/* plan b — sign in
   Flat editorial split on gallery-white, divided by a single hairline. Same
   restraint as the app and the PDF: sharp corners, thin Geist, uppercase
   tracked labels, blue used only as a whisper. No panels, gradients or glow. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white:  #FFFFFF;
  --off:    #F5F5F5;
  --ink:    #111111;
  --ink-2:  #4A4A4A;
  --muted:  #999999;
  --faint:  #BDBDBD;
  --rule:   #E0E0E0;
  --accent: #4DA8DA;
  --danger: #B23A2E;
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --white:  #141414;
    --off:    #1C1C1C;
    --ink:    #F2F2F2;
    --ink-2:  #C4C4C4;
    --muted:  #7C7C7C;
    --faint:  #5A5A5A;
    --rule:   #2C2C2C;
    --danger: #D9705F;
  }
}

html, body { height: 100%; }
body { font-family: var(--font); background: var(--white); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 1px; }
::selection { background: var(--ink); color: var(--white); }

.split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100dvh; }

/* ── Brand side ────────────────────────────────────────────────────────────── */

.brand-panel {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 52px;
  border-right: 1px solid var(--rule);
  background: var(--white);
}
.brand-mark img { height: 26px; width: auto; }
:root[data-theme="dark"] .brand-mark img { filter: invert(1) brightness(1.9) grayscale(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-mark img { filter: invert(1) brightness(1.9) grayscale(1); } }

.brand-lede { max-width: 30ch; }
.brand-lede h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 300;
  line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.brand-lede p { margin-top: 16px; max-width: 36ch; font-size: 13px; font-weight: 300;
  line-height: 1.75; color: var(--muted); }

.brand-foot { font-size: 9px; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); }

/* ── Form side ─────────────────────────────────────────────────────────────── */

.form-panel { display: flex; align-items: center; justify-content: center; padding: 44px 40px; background: var(--white); }
.form-card { width: 100%; max-width: 340px; }

.form-eyebrow { font-size: 9px; font-weight: 400; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.form-card h2 { font-size: 22px; font-weight: 300; letter-spacing: .01em; color: var(--ink); }
.form-card .sub { margin-top: 8px; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--muted); }

form { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 8.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.input-wrap { position: relative; display: flex; }
.field input { width: 100%; padding: 11px 13px; border: 1px solid var(--rule); background: var(--white);
  color: var(--ink); font-family: var(--font); font-size: 13.5px; font-weight: 300; outline: none;
  transition: border-color .15s; }
.field input::placeholder { color: var(--faint); }
.field input:focus { border-color: var(--ink); }
.field input.pw { padding-right: 44px; }

.pw-toggle { position: absolute; right: 0; top: 0; height: 100%; width: 42px;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--muted); transition: color .15s; }
.pw-toggle:hover { color: var(--ink); }
.pw-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.error { display: none; align-items: center; gap: 9px; padding: 10px 12px;
  background: var(--off); border-left: 2px solid var(--danger);
  color: var(--danger); font-size: 12px; font-weight: 400; line-height: 1.45; }
.error.show { display: flex; }
.error svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; }

.submit { margin-top: 4px; width: 100%; padding: 13px 0; border: 1px solid var(--ink); background: var(--ink);
  color: var(--white); font-family: var(--font); font-size: 10px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer; transition: opacity .15s; }
.submit:hover:not(:disabled) { opacity: .86; }
.submit:disabled { opacity: .5; cursor: default; }

.form-note { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 11px; font-weight: 300; line-height: 1.65; color: var(--muted);
  display: flex; align-items: flex-start; gap: 9px; }
.form-note svg { width: 13px; height: 13px; margin-top: 1px; flex-shrink: 0; fill: none; stroke: var(--faint); stroke-width: 1.5; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .brand-panel { padding: 22px 22px; border-right: none; border-bottom: 1px solid var(--rule);
    flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .brand-lede { display: none; }
  .brand-mark img { height: 22px; }
  .form-panel { padding: 40px 22px 60px; align-items: flex-start; }
  .form-card { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }