/* Solvix universal sign-in — login + chooser surface.
   Built from the picked concept designs (21 split sign-in · 46 tile chooser).
   House rules: straight chrome (radius 0), Inter + Google Sans Code, paper palette. */

@import url('/noto-cjk.css');
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Google Sans Code — same four faces as the Solvix Agent dashboard (latin base
   + latin-ext + italics, split by unicode-range). */
@font-face { font-family: 'Google Sans Code'; src: url('/fonts/GoogleSansCode-Variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans Code'; src: url('/fonts/GoogleSansCode-Variable-Ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans Code'; src: url('/fonts/GoogleSansCode-Italic-Variable.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans Code'; src: url('/fonts/GoogleSansCode-Italic-Variable-Ext.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #E8E4DC; --card: #F4F1EA; --ink: #33302A; --soft: #63605A;
  --line: #D2CCC0; --muted: #EBE8E1; --pending: #9D9A94;
  --accent: #356B52; --accent-ink: #FFFFFF; --accent-hover: #598671;
  --ok: #2F6B45; --bad: #A3231D;
  --sans: 'Inter', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Hiragino Sans', 'Apple SD Gothic Neo', 'Microsoft YaHei', Arial, sans-serif;
  --mono: 'Google Sans Code', ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; }
button { font: inherit; cursor: default; }
.mono { font-family: var(--mono); }
.foot { font-family: var(--mono); font-size: 11.5px; color: var(--soft); letter-spacing: 0.02em; }

/* ---------- form primitives (sign-in concept) ---------- */
.form { display: grid; gap: 16px; }
.f-field { display: grid; gap: 6px; }
.f-field > span { font-size: 12.5px; font-weight: 550; color: var(--soft); letter-spacing: 0.01em; }
.inp { height: 44px; width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0 12px; font: inherit; font-size: 15px; }
.inp::placeholder { color: var(--pending); }
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.btn { height: 44px; width: 100%; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; }
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.err-line { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--bad); display: none; }
.err-line.on { display: block; }

/* ---------- shared split chrome (concepts 21 / 46) ---------- */
.split { display: grid; grid-template-columns: 44% 56%; min-height: 100vh; }
.left { position: relative; padding: 44px 48px 36px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.left .wm canvas { display: block; margin-left: -14px; }
.right { position: relative; display: grid; place-items: center start; }
.corner-logo { position: absolute; right: 48px; bottom: 36px; height: 56px; width: auto; }

/* ---------- sign-in page (concept 21) ---------- */
.signin { position: absolute; top: calc(50% - 23.4px); transform: translateY(-50%); right: 48px; width: 380px; }
.signin .cap { font-size: 11px; letter-spacing: 0.1em; color: var(--soft); }
.signin .sub { margin-top: 10px; font-size: 14.5px; color: var(--soft); line-height: 1.55; }
.signin .form { margin-top: 22px; }
.welc { width: 100%; background: #064E3B; padding: 64px 48px; }
.welc h2 { color: #FFFFFF; font-size: 26px; font-weight: 700; letter-spacing: -0.015em; }
.welc p { margin-top: 14px; color: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 1.65; max-width: 470px; }

/* ---------- chooser page (concept 46) ---------- */
.ustack { position: absolute; top: calc(50% - 163.4px); right: 48px; width: 380px; display: grid; gap: 18px; }
/* When the profile panel is open the column is taller than the 326.8px it was
   centred for, and on shorter viewports the panel (or its status line) can run
   into the footer. Clamp the top so the column always clears the footer:
   min() keeps the centred value untouched whenever it already fits (tall
   viewports are pixel-identical to before). */
.ustack.popen { top: min(calc(50% - 163.4px), calc(100vh - 712px)); }
.btns { display: flex; gap: 10px; }
.acct { display: grid; gap: 18px; justify-items: start; }
.acct .cap { font-size: 11px; letter-spacing: 0.1em; color: var(--soft); }
.who { display: flex; align-items: center; gap: 14px; }
.ava { width: 48px; height: 48px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 16px; font-weight: 650; letter-spacing: 0.02em; flex: none; }
.ava.hasphoto { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }
.who .fn { display: block; font-size: 16px; font-weight: 600; }
.who .un { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--soft); }
.welcome { font-size: 13.5px; color: var(--soft); max-width: 300px; line-height: 1.55; }
.prof { border: 1px solid var(--line); padding: 22px 22px 20px; display: grid; gap: 16px; }
.prof .cap { font-size: 11px; letter-spacing: 0.1em; color: var(--soft); }
.pview { display: grid; gap: 16px; }
.pview[hidden] { display: none; }
.err-line.on.info { color: var(--soft); }
.err-line.on.ok { color: var(--ok); }
.arow { display: flex; align-items: center; gap: 14px; }
.btn-sm { height: 38px; padding: 0 16px; background: var(--accent); color: var(--accent-ink); border: 0; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn-sm.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 550; }
.prof .actions { display: flex; align-items: center; margin-top: 2px; }
.actions .pair { margin-left: auto; display: flex; gap: 10px; }
.btn-ghost { height: 40px; padding: 0 18px; background: transparent; border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; font-weight: 550; cursor: pointer; }
.btn-ghost.active { border-color: var(--accent); color: var(--accent); }
.band { width: 100%; background: #064E3B; padding: 47.7px; color: #FFFFFF; }
.apps { display: grid; grid-template-columns: repeat(3, 160px); gap: 16px; }
.app { aspect-ratio: 1 / 1; background: #F4F1EA; color: #000000; display: grid; grid-template-rows: 1fr auto; padding: 0; text-decoration: none; cursor: pointer; }
.app:nth-child(3n+1) { background: #D8E7D6; }
.app:nth-child(3n+2) { background: #D4E1F1; }
.app:nth-child(3n+3) { background: #F0E1C4; }
.app .nm { font-size: 22.5px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; padding: 12px 16px 4px; align-self: start; }
.app .ds { font-size: 10px; font-weight: 400; line-height: 1.35; background: #DCE7E0; padding: 8px 16px; }
.app:nth-child(3n+1) .ds { background: #C2D9BF; }
.app:nth-child(3n+2) .ds { background: #BED2E9; }
.app:nth-child(3n+3) .ds { background: #E2CFA3; }
.app:hover { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -2px; }

/* ---------- corner dock (bottom-left; same component as Solvix Check) ---------- */
/* Top-right, exactly at the quick-settings chip: 32x32, right 16, top 12.5. */
.dock { position: fixed; right: 16px; top: 12.5px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; }
.dockbar { display: flex; flex-direction: column; align-items: flex-end; }
.dkb { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); background: var(--card); color: var(--soft); cursor: pointer; -webkit-appearance: none; appearance: none; }
.dkb:hover { color: var(--ink); background: rgba(53, 107, 82, 0.06); }
.dkb.on { color: var(--ink); background: var(--paper); }
.dockpanel { margin-top: 6px; background: var(--card); border: 1px solid var(--line); min-width: 156px; }
.dockpanel[hidden] { display: none; }
.dph { padding: 8px 12px; font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); border-bottom: 1px solid var(--line); white-space: nowrap; }
.dpi { display: block; width: 100%; text-align: left; padding: 8px 14px; border: 0; border-top: 1px solid var(--line); background: none; font: 600 11.2px/1.5 var(--mono); color: var(--soft); cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none; }
.dpi:first-of-type { border-top: 0; }
.dpi:hover { color: var(--ink); background: rgba(53, 107, 82, 0.06); }
.dpi.on { color: var(--ink); border-left: 2px solid var(--accent); padding-left: 12px; background: rgba(53, 107, 82, 0.08); }
.dkb:focus-visible, .dpi:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }

/* ---------- narrow screens (light fallback) ---------- */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .left { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 28px 28px; gap: 28px; }
  .signin, .ustack { position: static; top: auto; right: auto; width: 100%; transform: none; }
  .welc { padding: 36px 28px; }
  .band { padding: 32px 28px; }
  .apps { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .right { display: block; }
  .corner-logo { position: static; margin: 28px 28px 40px; height: 44px; }
}