/* Madder — the entry pages: early access, sign in, sign up, workspace address, quiz.
   Source of truth is the Figma file (Semantics variables + text styles); the names below are the
   Figma names with `/` turned into `-`, so a change there is one find-and-replace here.
   These pages do not load ds.css: they are a different shell (form column + art panel) and share
   no component with the product screens. The palette is the same one. */

:root{
  --action-primary:#0B6D86; --action-primary-hover:#095B70; --action-primary-pressed:#074A5B;
  --action-soft:rgba(101,208,235,.16); --action-soft-hover:rgba(101,208,235,.28);
  --brand-madder:#DD0200;
  --text-primary:#1B1712; --text-body:#4A443C; --text-secondary:#7C756B; --text-dim:#9A9289; --text-on-action:#FFFFFF;
  --bg-page:#FBFAF8; --bg-surface:#FFFFFF; --bg-subtle:rgba(27,23,18,.055); --bg-hover:rgba(27,23,18,.022); --bg-pressed:rgba(27,23,18,.10);
  --border-default:rgba(27,23,18,.10); --border-soft:rgba(27,23,18,.065); --border-control:rgba(27,23,18,.14); --border-focus:#0B6D86;
  --status-error:#C2402E; --status-error-bg:rgba(221,2,0,.08); --status-error-ring:rgba(194,64,46,.10);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:8px;
}

*{margin:0; padding:0; box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg-page); color:var(--text-body); font-family:var(--font); font-size:14px; line-height:20px;
  -webkit-font-smoothing:antialiased; font-feature-settings:'cv11','ss01'}
[hidden]{display:none!important}

/* ---- text styles ---- */
.t-display{font-size:32px; line-height:40px; font-weight:600; letter-spacing:-.02em; color:var(--text-primary)}
.t-subtitle{font-size:16px; line-height:24px; font-weight:600; color:var(--text-primary)}
.t-body-lg{font-size:16px; line-height:24px; color:var(--text-body)}
.t-body{font-size:14px; line-height:20px; color:var(--text-body)}
.t-body-strong{font-size:14px; line-height:20px; font-weight:500}
.t-caption{font-size:12px; line-height:16px; color:var(--text-secondary)}
.t-caption-strong{font-size:12px; line-height:16px; font-weight:500; color:var(--text-secondary)}
.t-secondary{color:var(--text-secondary)}

/* ---- shell: form column + art panel ----
   Drawn at 1280×832 (672 + 608). The other widths are RULES, written down in Figma, page
   "04 · Breakpoints" — by the width of the WINDOW, never of the device:

     S   up to 599     one column, gutters 20, header 72, no art
     M   600–1023      one column of 480 in the middle, no art
     L   1024–1535     two columns 52.5 % / 47.5 %, gutters 48 — the drawn layout. The stage is never
                       taller than the ART allows: the tile keeps the drawn 584×808 proportion, so a
                       tall narrow window (half a monitor) shows paper above and below instead of
                       cutting the picture's sides
     XL  1536 and up   the same two columns inside a STAGE of at most 1440×960, centred in the
                       window with paper around it

   What grows is the margin, never the control: a field is 400, a button is 40 and the text styles
   are the same on a phone and on a 27-inch monitor. The art is the column's background (cover,
   centred), so it crops instead of ballooning. --stage-h is the height the columns share. */
:root{--stage-h:100vh}
@supports (height:100dvh){ :root{--stage-h:100dvh} }
body{display:flex; flex-direction:column; justify-content:center}
.entry{width:100%; min-height:var(--stage-h); margin:0 auto; display:grid; grid-template-columns:minmax(0,672fr) minmax(0,608fr)}
.entry-side{display:flex; flex-direction:column; justify-content:space-between; gap:32px; min-height:var(--stage-h); padding:32px 48px}
.entry-top{display:flex; flex-direction:column; gap:20px}
.entry-head{height:100px; display:flex; align-items:center}
.entry-logo{display:inline-flex; align-items:center; gap:8px; color:var(--text-primary); font-size:16px; line-height:24px; font-weight:600; text-decoration:none; border-radius:6px}
.entry-logo svg{width:28px; height:28px; display:block}
.entry-content{width:100%; max-width:400px; display:flex; flex-direction:column; gap:24px}
.entry-heading{display:flex; flex-direction:column; gap:8px}
.entry-foot{display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--text-secondary)}
.entry-art{position:sticky; top:0; height:var(--stage-h); padding:12px}
.entry-art i{display:block; width:100%; height:100%; border-radius:16px; background:var(--bg-page) center/cover no-repeat}

/* L — the tile is 47.5 % of the window less its 12 px margins; its height is that × 808/584.
   (100vw × .475 − 24) × 1.3836 + 24 = 65.72vw − 9. Never above XL's 960. */
@media (min-width:1024px) and (max-width:1535px){
  :root{--stage-h:min(100vh, 960px, calc(65.72vw - 9px))}
}
/* XL — the stage. Taller or wider than this the window shows paper, not a stretched layout. */
@media (min-width:1536px){
  :root{--stage-h:min(100vh, 960px)}
  .entry{max-width:1440px}
}
/* M — one column of 480 in the middle: logo, form and the bottom row share its left edge. */
@media (max-width:1023px){
  .entry{grid-template-columns:minmax(0,1fr)}
  .entry-art{display:none}
  .entry-side{align-items:center; padding:32px}
  .entry .entry-side > *{width:100%; max-width:480px}
  .entry-content{max-width:480px}
}
/* S — the phone. */
@media (max-width:599px){
  .entry-side{padding:16px 20px 24px; gap:24px}
  .entry-head{height:72px}
}
/* A short window scrolls; the bottom row then follows the form instead of sitting on it. */
@media (max-height:699px){
  :root{--stage-h:auto}
  .entry-side{min-height:100vh; justify-content:flex-start}
}

/* ---- focus: one ring ---- */
:where(a,button,input,[tabindex]):focus-visible{outline:none; box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 4px var(--border-focus)}

/* a heading focused by script (so a screen reader lands on the new step) shows no ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible{outline:none; box-shadow:none}

/* ---- text field ---- */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:14px; line-height:20px; font-weight:500; color:var(--text-primary)}
.field input{height:44px; padding:0 14px; border-radius:var(--r); border:1px solid var(--border-default); background:var(--bg-surface);
  font:inherit; color:var(--text-primary); caret-color:var(--action-primary); transition:border-color .12s, box-shadow .12s}
.field input::placeholder{color:var(--text-dim)}
.field input:hover{border-color:var(--border-control)}
.field input:focus, .field input:focus-visible{outline:none; border-color:var(--border-focus); box-shadow:0 0 0 .5px var(--border-focus), 0 0 0 4px var(--action-soft-hover)}
.field input:disabled, .field input[readonly]{color:var(--text-body)}
.field .helper{font-size:12px; line-height:16px; color:var(--text-secondary)}
.field.is-error input{border-color:var(--status-error); box-shadow:0 0 0 .5px var(--status-error), 0 0 0 4px var(--status-error-ring)}
.field.is-error .helper{color:var(--status-error)}

/* ---- buttons ---- */
.btn{height:40px; padding:0 20px; border:0; border-radius:var(--r); display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:500; cursor:pointer; text-decoration:none; transition:background-color .12s, opacity .12s}
.btn-block{width:100%}
.btn-primary{background:var(--action-primary); color:var(--text-on-action)}
.btn-primary:hover{background:var(--action-primary-hover)}
.btn-primary:active{background:var(--action-primary-pressed)}
.btn-ghost{background:var(--bg-subtle); color:var(--text-body)}
.btn-ghost:hover{background:var(--bg-pressed); color:var(--text-primary)}
.btn:disabled{opacity:.45; cursor:default; pointer-events:none}
.btn.is-loading{pointer-events:none}
.btn .spin, .provider .spin{width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .btn .spin, .provider .spin{animation-duration:2s} }

/* provider button — sign in with an outside account */
.provider{height:44px; width:100%; border-radius:var(--r); border:1px solid var(--border-control); background:var(--bg-surface); color:var(--text-primary);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-weight:500; cursor:pointer; transition:background-color .12s}
.provider:hover{background:linear-gradient(var(--bg-hover),var(--bg-hover)) var(--bg-surface)}
.provider:active{background:linear-gradient(var(--bg-pressed),var(--bg-pressed)) var(--bg-surface)}
.provider.is-loading{pointer-events:none; color:var(--text-secondary); border-color:var(--border-default)}
.provider svg{width:16px; height:16px}

.or{display:flex; align-items:center; gap:12px; font-size:12px; line-height:16px; color:var(--text-secondary)}
.or::before,.or::after{content:''; flex:1; height:1px; background:var(--border-default)}

/* ---- links ---- */
.link{font:inherit; font-weight:500; color:var(--action-primary); text-decoration:none; background:none; border:0; cursor:pointer; padding:4px 6px; margin:-4px -6px; border-radius:6px}
.link:hover{color:var(--action-primary-hover); text-decoration:underline; text-underline-offset:3px}
.link-muted{color:var(--text-secondary)}
.link-muted:hover{color:var(--text-primary)}

/* ---- alerts ---- */
.alert{padding:12px 14px; border-radius:var(--r); background:var(--bg-subtle); color:var(--text-body)}
.alert-error{background:linear-gradient(var(--status-error-bg),var(--status-error-bg)) var(--bg-surface); color:var(--status-error)}

/* ---- card + choice chips (the optional questions) ---- */
.card{background:var(--bg-surface); border:1px solid var(--border-default); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:16px}
.chips{display:flex; flex-direction:column; gap:8px; border:0}
.chips legend{font-size:12px; line-height:16px; font-weight:500; color:var(--text-secondary); margin-bottom:8px; padding:0}
.chips .row{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0}
.chip span{height:40px; padding:0 16px; border-radius:var(--r); border:1px solid var(--border-default); background:var(--bg-surface); color:var(--text-body);
  display:inline-flex; align-items:center; gap:8px; font-weight:500; transition:border-color .12s, background-color .12s}
.chip span svg{width:16px; height:16px; flex:none}
.chip:hover span{border-color:var(--border-control); background:linear-gradient(var(--bg-hover),var(--bg-hover)) var(--bg-surface)}
.chip input:checked + span{border-color:var(--border-focus); box-shadow:0 0 0 .5px var(--border-focus); background:linear-gradient(var(--action-soft),var(--action-soft)) var(--bg-surface); color:var(--text-primary)}
.chip input:focus-visible + span{box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 4px var(--border-focus)}

/* ---- one-time code ---- */
.code{display:flex; gap:8px}
.code input{width:52px; height:60px; text-align:center; border-radius:var(--r); border:1px solid var(--border-control); background:var(--bg-surface);
  font:600 20px/28px var(--font); letter-spacing:-.01em; color:var(--text-primary); caret-color:var(--action-primary)}
.code input:focus{outline:none; border:2px solid var(--border-focus); box-shadow:none}
.code.is-error input{border-color:var(--status-error)}
@media (max-width:420px){ .code{gap:6px} .code input{width:44px; height:54px} }