/* ═══════════════════════════════════════════════════════════════════════════
   onboarding.css — THE FITTING (founder 2026-09-12). Loaded last.

   The gates are restyled, never the forms inside them: the anchor's three shapes
   and the thirty-six pairs are the measurement and are not touched. What changes
   is the room around them, so the first thing a new operator meets is the same
   instrument as every room after it. Governed by DESIGN-CONSTITUTION.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ONE FRAME: the Intercept's glass, at the size each step needs ─────────── */
/* #ob-auth left this list 2026-09-14: the front door is not a panel. */
#ob-anchor, #ob-diag, #ob-bio, #ob-arbit, #ob-first, #ob-consent{
  border-radius:24px !important; isolation:isolate;
  background:linear-gradient(150deg,rgba(0,191,255,.08),rgba(10,122,205,.06) 55%,rgba(255,255,255,.012)) !important;
  border:1px solid rgba(160,225,255,.16) !important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 70px -40px rgba(18,64,184,.95) !important;
  padding:44px 40px 36px !important; }
#ob-anchor::before, #ob-diag::before, #ob-bio::before, #ob-arbit::before, #ob-first::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 20% 0%,rgba(47,123,255,.22),transparent 70%),
             radial-gradient(50% 50% at 90% 100%,rgba(31,126,219,.14),transparent 70%); }
#ob-anchor, #ob-diag, #ob-bio, #ob-arbit, #ob-first{ position:relative; }

/* ── TYPE: the website's own law, brought to the fitting ───────────────────
   Headline Syne 500, tight and negative-tracked, text-wrap balance. One italic
   Cormorant clause inside it or inside the standfirst, at 1.14em in ice-hi.
   The standfirst reads in FULL ink at near-headline size on a 44ch measure, the
   way the website promotes its own. Body Manrope. The one deviation from the
   website: the eyebrow is sentence case, because the app has no capitals left. */
#ob-anchor .overline, #ob-diag .overline, #ob-bio .overline,
#ob-arbit .overline, #ob-first .overline,
#ob-anchor-kicker, #ob-diag-kicker, #ob-bio-kicker, #ob-arbit-kicker, #ob-first-kicker{
  font:400 13.5px/1.4 var(--f-body) !important; letter-spacing:0 !important; text-transform:none !important;
  color:rgb(var(--ink3)) !important; margin-bottom:14px !important; }
#ob-anchor h2, #ob-diag h2, #ob-bio h2, #ob-arbit h2, #ob-first h2{
  font-family:var(--f-disp) !important; font-weight:500 !important;
  font-size:clamp(30px,3.4vw,44px) !important; line-height:1.05 !important;
  letter-spacing:-.022em !important; color:rgb(var(--ink)) !important; text-wrap:balance;
  margin:0 0 18px !important; }
#ob-anchor h2 em, #ob-diag h2 em, #ob-bio h2 em, #ob-arbit h2 em, #ob-first h2 em,
#ob-anchor p em, #ob-diag p em, #ob-bio p em, #ob-arbit p em, #ob-first p em{
  font-family:var(--f-em) !important; font-style:italic !important; font-weight:400 !important;
  font-size:1.14em !important; letter-spacing:0 !important; color:#CFF3FF !important; }
#ob-anchor > p:not(.overline), #ob-diag > p:not(.overline):not(#ob-prog),
#ob-bio > p:not(.overline), #ob-arbit > p:not(.overline), #ob-first > p:not(.overline){
  font-family:var(--f-body) !important; font-weight:400 !important;
  font-size:clamp(18px,1.45vw,21px) !important; line-height:1.45 !important;
  color:rgb(var(--ink)) !important; max-width:44ch; margin-left:auto; margin-right:auto; }
#ob-bio, #ob-bio > p{ text-align:left; }
#ob-bio > p{ margin-left:0; }
html[data-theme="light"] :is(#ob-anchor,#ob-diag,#ob-bio,#ob-arbit,#ob-first) :is(h2,p) em{ color:#0B1E33 !important; }

/* ── PROGRESS: a hairline and the point it has reached, never a filled bar ─── */
#ob-diag .h-1\.5{ height:1px !important; border-radius:0 !important;
  background:rgba(0,191,255,.14) !important; overflow:visible !important; margin-bottom:12px !important; }
#ob-progbar{
  display:block; height:1px !important; min-height:0 !important; min-width:0 !important;
  padding:0 !important; line-height:0 !important; font-size:0 !important;
  border-radius:0 !important; border:0 !important; box-shadow:none !important;
  background:var(--mg-ice,#7FD3FF) !important; position:relative;
  transition:width .3s cubic-bezier(.2,.8,.2,1) !important; }
#ob-progbar::after{
  content:''; position:absolute; right:-2px; top:50%; width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%; background:var(--ice,#00BFFF); }
#ob-prog{
  font:400 13px/1.4 var(--f-body) !important; font-family:var(--f-body) !important;
  letter-spacing:0 !important; color:rgb(var(--ink3)) !important; margin-bottom:24px !important; }

/* ── THE FORMS: their containers only. The shapes inside are the measurement ─ */
#ob-optA, #ob-optB, #ob-anchor-grid > *, #ob-arbit-grid > *{
  border-radius:14px !important;
  border:1px solid rgba(160,225,255,.14) !important;
  background:rgba(0,191,255,.035) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition:border-color .2s ease, background-color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1) !important; }
#ob-optA:hover, #ob-optB:hover, #ob-anchor-grid > *:hover, #ob-arbit-grid > *:hover{
  border-color:rgba(200,236,255,.42) !important; background:rgba(0,191,255,.07) !important;
  transform:translateY(-2px); }
#ob-optA:active, #ob-optB:active, #ob-anchor-grid > *:active{ transform:none; }
#ob-optA:focus-visible, #ob-optB:focus-visible,
#ob-anchor-grid > *:focus-visible, #ob-arbit-grid > *:focus-visible{
  outline:2px solid var(--ice2); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  #ob-optA, #ob-optB, #ob-anchor-grid > *, #ob-arbit-grid > *{ transition:none !important; }
  #ob-optA:hover, #ob-optB:hover, #ob-anchor-grid > *:hover{ transform:none; }
}

/* ── THE ONE BUTTON PER STEP: the app's pill, nothing louder ───────────────── */
#ob-bio-btn, #ob-fl-go{
  width:100%; min-height:52px; border-radius:999px !important;
  border:1px solid rgba(160,225,255,.22) !important;
  background:linear-gradient(115deg,rgba(10,122,205,.62),rgba(0,191,255,.42) 50%,rgba(0,63,92,.62)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 14px 36px -16px rgba(47,123,255,.85) !important;
  color:rgb(var(--ink)) !important; font:600 16px/1 var(--f-body) !important; letter-spacing:0 !important;
  margin-top:22px; transition:transform .3s cubic-bezier(.2,.8,.2,1) !important; }
#ob-bio-btn:hover, #ob-fl-go:hover{ transform:translateY(-1px); }
#ob-bio-btn:active, #ob-fl-go:active{ transform:none; }

/* the quiet exits: text in the field, never a bordered box */
#ob-hrv-connect, #ob-fl-skip, #ob-arbit-skip, #ob-diag .absolute.top-3\.5{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; color:rgb(var(--ink2)) !important;
  font:500 14px/1.4 var(--f-body) !important; min-height:44px; }
#ob-hrv-connect:hover, #ob-fl-skip:hover, #ob-arbit-skip:hover{ color:rgb(var(--ink)) !important; }

/* ── THE BODY STEP: two values on hairline tracks ──────────────────────────── */
#ob-bio .flex.justify-between span{ font:400 14px/1.4 var(--f-body) !important; color:rgb(var(--ink2)) !important; }
#ob-bio .flex.justify-between span[id$="-v"]{
  font-family:var(--f-body) !important; font-variant-numeric:tabular-nums;
  color:rgb(var(--ink)) !important; letter-spacing:0 !important; }
/* the two values sit on hairlines, the way every track in the instrument does */
#ob-bio input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; padding:0;
  background:transparent !important; border:0 !important; box-shadow:none !important; cursor:pointer; }
#ob-bio input[type="range"]::-webkit-slider-runnable-track{ height:1px; border-radius:0; background:rgba(0,191,255,.20); }
#ob-bio input[type="range"]::-moz-range-track{ height:1px; border-radius:0; background:rgba(0,191,255,.20); }
#ob-bio input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%; border:0;
  background:var(--mg-ice,#7FD3FF); margin-top:-5.5px; box-shadow:0 0 0 4px rgba(0,191,255,.12); }
#ob-bio input[type="range"]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; border:0;
  background:var(--mg-ice,#7FD3FF); box-shadow:0 0 0 4px rgba(0,191,255,.12); }
#ob-bio input[type="range"]:focus-visible{ outline:none; }
#ob-bio input[type="range"]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--ice2); outline-offset:3px; }
html[data-theme="light"] #ob-bio input[type="range"]::-webkit-slider-runnable-track{ background:rgba(11,30,51,.16); }
html[data-theme="light"] #ob-bio input[type="range"]::-webkit-slider-thumb{ background:#0B7ACD; box-shadow:0 0 0 4px rgba(11,122,205,.12); }
#ob-bio-known{ font:400 13px/1.5 var(--f-body) !important; color:rgb(var(--ink3)) !important;
  letter-spacing:0 !important; }
#ob-hrv-status{ font:400 13px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important; }

/* ── LIGHT THEME: the same frame, the ink the other way up ─────────────────── */
html[data-theme="light"] :is(#ob-anchor,#ob-diag,#ob-bio,#ob-arbit,#ob-first,#ob-consent){
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(240,247,252,.92)) !important;
  border-color:rgba(11,30,51,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 30px 70px -44px rgba(11,30,51,.45) !important; }
html[data-theme="light"] :is(#ob-optA,#ob-optB,#ob-anchor-grid > *,#ob-arbit-grid > *){
  border-color:rgba(11,30,51,.12) !important; background:rgba(11,122,205,.04) !important; }
html[data-theme="light"] #ob-diag .h-1\.5{ background:rgba(11,30,51,.12) !important; }
html[data-theme="light"] #ob-progbar{ background:#0B7ACD !important; }
html[data-theme="light"] #ob-progbar::after{ background:#0B7ACD; }

/* ── PHONE: the frame keeps its margins and the forms keep their square ────── */
@media (max-width:640px){
  #ob-anchor, #ob-diag, #ob-bio, #ob-arbit, #ob-first{ padding:30px 22px 26px !important; }
  #ob-anchor h2, #ob-diag h2, #ob-bio h2, #ob-arbit h2, #ob-first h2{ font-size:24px !important; }
  #ob-anchor-grid{ gap:10px !important; }
}

/* ── THE WAIT: the instrument reading, not a loader ────────────────────────
   The same frame and the same type as every other step. One hairline with a
   point of ice travelling it, because that is how a level is drawn everywhere
   else in this instrument. No bars, no spinner, no gradient on the words. */
#ob-synth{
  position:relative; border-radius:24px !important; isolation:isolate;
  background:linear-gradient(150deg,rgba(0,191,255,.08),rgba(10,122,205,.06) 55%,rgba(255,255,255,.012)) !important;
  border:1px solid rgba(160,225,255,.16) !important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 70px -40px rgba(18,64,184,.95) !important;
  padding:44px 40px 36px !important; }
#ob-synth::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 20% 0%,rgba(47,123,255,.22),transparent 70%),
             radial-gradient(50% 50% at 90% 100%,rgba(31,126,219,.14),transparent 70%); }
#ob-synth .overline, #ob-synth-kicker{
  font:400 13.5px/1.4 var(--f-body) !important; letter-spacing:0 !important; text-transform:none !important;
  color:rgb(var(--ink3)) !important; margin:0 0 14px !important; }
#ob-synth h2{
  font-family:var(--f-disp) !important; font-weight:500 !important; background:none !important;
  -webkit-text-fill-color:currentColor !important; color:rgb(var(--ink)) !important;
  font-size:clamp(28px,3vw,40px) !important; line-height:1.05 !important; letter-spacing:-.022em !important;
  text-wrap:balance; margin:0 0 22px !important; }
#ob-synth-msg{
  font:400 16px/1.5 var(--f-body) !important; color:rgb(var(--ink2)) !important; margin:18px 0 0 !important; }
.ob-wait{ position:relative; height:1px; width:min(260px,72%); margin:0 auto;
  background:rgba(0,191,255,.16); overflow:visible; }
.ob-wait i{ position:absolute; top:50%; left:0; width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
  background:var(--ice,#00BFFF); animation:ob-travel 2.6s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes ob-travel{ from{ left:0 } to{ left:calc(100% - 5px) } }
@media (prefers-reduced-motion:reduce){ .ob-wait i{ animation:none; left:calc(50% - 2.5px); } }
html[data-theme="light"] #ob-synth{
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(240,247,252,.92)) !important;
  border-color:rgba(11,30,51,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 30px 70px -44px rgba(11,30,51,.45) !important; }
html[data-theme="light"] .ob-wait{ background:rgba(11,30,51,.14); }
html[data-theme="light"] .ob-wait i{ background:#0B7ACD; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE GATES BEFORE THE FITTING (founder 2026-09-12).

   The fitting was already brought onto the constitution. The three rooms a new
   operator meets FIRST were not: the intro cards and the gate still carried the
   old kit — a gradient-filled headline, a fourth type family at .28em tracking,
   a mark inside a bordered tile, rounded-xl filled buttons, 10px legal type. A
   stranger therefore met a different product for four screens and only then met
   Areté. These two blocks close that. Nothing inside the fitting is touched:
   the anchor shapes and the thirty-six pairs are the measurement.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the gate itself: a panel taller than the viewport must still be reachable.
   It was overflow:visible, so on a short window the last field and the button
   were simply unreachable; nothing scrolled. */
#gate{ overflow-y:auto; overscroll-behavior:contain; padding:24px 16px !important; }

/* ── THE FRONT DOOR: #ob-auth ─────────────────────────────────────────────────
   HER CALL 2026-09-14: "one screen with the logo and login, nothing else."

   So this is not a dialog panel any more. It is the whole screen: the canonical
   ground, the canonical mark, two lines to type on, one pill, one way to switch.
   No card, no box around a box, no marketing, no scroll. #ob-auth is taken OUT
   of the shared onboarding frame at the top of this file — the later steps keep
   the glass, the door does not stand on anything.

   The mark is the website's: the open cube on #E6F7FF → #2F7BFF over ARETE in
   Michroma at .22em in --ice-hi (areteprotocol.com index.html:136-138, :592).
   ───────────────────────────────────────────────────────────────────────────── */

/* THE SCRIM STAYS FOR EVERY OTHER STEP. #gate carried its scrim as an inline
   style; that came off with the card, and the later steps (anchor, diagnostic,
   body, first light) would have floated over a live dashboard. The scrim is
   declared here now, and only the front door replaces it with the ground. */
#gate{ background:rgba(4,7,16,0.9); }
html[data-theme="light"] #gate{ background:rgba(226,236,246,0.92); }

/* the field, one source, upper middle — the same ground as every room */
#gate:has(#ob-auth:not(.hidden)){ background:var(--bg) !important; }
#gate:has(#ob-auth:not(.hidden))::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%,rgba(31,126,219,.20),transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg) 70%); }
html[data-theme="light"] #gate:has(#ob-auth:not(.hidden))::before{
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%,rgba(17,98,137,.09),transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg) 70%); }

/* one column standing in an empty field. No frame of any kind. */
#ob-auth{ position:relative; z-index:1;
  max-width:21rem !important; width:100%; margin:auto; text-align:center;
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important; padding:8px 0 !important; }

/* the mark, stacked: the glyph over the wordmark, the way a stamp reads */
#ob-auth .ent-mark--stack{ flex-direction:column; gap:18px; margin-bottom:40px; }
#ob-auth .ent-mark--stack .ent-glyph{ width:44px; height:44px; }
#ob-auth .ent-mark--stack .ent-wordmark{ font-size:26px; }

/* the sentence of the screen. setAuthMode writes both at runtime; signed out it
   reads "Welcome back" / "Sign in to your record." — that is the whole copy. */
#ob-auth #ob-auth-title{
  font-family:var(--f-disp) !important; font-weight:500 !important;
  font-size:26px !important; line-height:1.1 !important;
  letter-spacing:-.022em !important; text-wrap:balance;
  background:none !important; -webkit-background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important; color:rgb(var(--ink)) !important;
  margin:0 0 6px !important; }
#ob-auth #ob-auth-sub{
  font:400 15px/1.5 var(--f-body) !important; color:rgb(var(--ink2)) !important;
  max-width:100%; margin:0 0 30px !important; }

/* ── the two lines. Inputs have no box (§9): a line, and it brightens on focus.
      This is the Intercept's rule and the door's on the old landing. ── */
#ob-auth .ob-lab{ display:block; text-align:left;
  font:400 13px/1.4 var(--f-body) !important; letter-spacing:0 !important;
  text-transform:none !important; color:rgb(var(--ink3)) !important; margin:0 0 2px !important; }
#ob-auth .ob-line{ position:relative; padding-bottom:10px; margin-bottom:22px; }
#ob-auth .ob-line::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--hair2); transition:background var(--dur-2) var(--ease-inst); }
#ob-auth .ob-line:focus-within::after{ background:var(--ice); }
#ob-auth .ob-line input[type="email"], #ob-auth .ob-line input[type="password"]{
  width:100%; min-height:0 !important; background:transparent !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  outline:0; color:rgb(var(--ink)) !important;
  font:400 16px/1.5 var(--f-body) !important; letter-spacing:-.005em !important;
  padding:6px 0 !important; margin:0 !important; text-align:left; }
#ob-auth .ob-line input:focus{ background:transparent !important; border:0 !important; }
#ob-auth .ob-line input:focus-visible{ outline:0 !important; }
#ob-auth input::placeholder{ color:rgb(var(--ink3)) !important; opacity:1; }
/* Chrome paints its own yellow wash on a remembered field; hold the ink. */
#ob-auth .ob-line input:-webkit-autofill{
  -webkit-text-fill-color:rgb(var(--ink)); transition:background-color 6000s 0s; }

/* the pill. .ui-btn--primary is a solid #00BFFF gradient with a wide cast: on a
   full room beside other content it reads as the one lit control, but alone on an
   empty screen it reads neon. This is the glass pill the rest of the fitting uses
   (#ob-bio-btn, #ob-fl-go above) — the same shape, the light turned down. */
#ob-auth #li-btn{
  width:100%; min-width:0 !important; min-height:52px; margin-top:10px;
  border-radius:var(--r-pill) !important;
  border:1px solid rgba(160,225,255,.22) !important;
  background:linear-gradient(115deg,rgba(10,122,205,.62),rgba(0,191,255,.42) 50%,rgba(0,63,92,.62)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 14px 36px -18px rgba(47,123,255,.7) !important;
  color:rgb(var(--ink)) !important; font:600 16px/1 var(--f-body) !important;
  letter-spacing:0 !important; filter:none !important;
  transition:transform var(--dur-2) var(--ease-inst), border-color var(--dur-2) !important; }
#ob-auth #li-btn:hover{ transform:translateY(-2px); border-color:rgba(200,236,255,.42) !important; }
#ob-auth #li-btn:active{ transform:translateY(0) scale(.985); }
#ob-auth #li-btn:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; }
html[data-theme="light"] #ob-auth #li-btn{
  background:linear-gradient(115deg,#0a7acd,#116289 50%,#003f5c) !important;
  border-color:rgba(10,122,205,.5) !important; color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 36px -20px rgba(17,98,137,.5) !important; }
#ob-auth #li-msg{ font:400 13px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important;
  min-height:18px; margin-top:14px !important; }

/* the one switch, and the reset: quiet text exits (§9) on 44px targets */
#ob-auth > p:not(#li-msg){ font:400 14px/1.5 var(--f-body) !important;
  color:rgb(var(--ink3)) !important; margin:14px 0 0 !important; }
#ob-auth #ob-toggle, #ob-auth #ob-forgot{
  background:none; border:0; cursor:pointer;
  font:500 14px var(--f-body) !important; color:rgb(var(--ink2)) !important;
  min-height:44px; padding:0 4px; display:inline-flex; align-items:center;
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
  text-decoration-color:var(--hair2);
  transition:color var(--dur-1), text-decoration-color var(--dur-1); }
#ob-auth #ob-toggle:hover, #ob-auth #ob-forgot:hover{
  color:rgb(var(--ink)) !important; text-decoration-color:currentColor; }
#ob-auth #ob-toggle:focus-visible, #ob-auth #ob-forgot:focus-visible{
  outline:2px solid var(--ice2); outline-offset:3px; border-radius:var(--r-1); }

/* consent is law, not decoration: register mode only, at the foot, readable */
#ob-consent-row{ margin:24px 0 0 !important; gap:10px !important; text-align:left; }
#ob-consent-row span{ font:400 12.5px/1.55 var(--f-body) !important; color:rgb(var(--ink3)) !important; }
#ob-consent-row a{ color:rgb(var(--ink2)) !important; text-decoration:underline; text-underline-offset:3px; }
#ob-auth #ob-consent{ width:17px; height:17px; margin-top:2px; accent-color:var(--ice2); }

#ob-forgot-form{ border-top:1px solid var(--hair); margin-top:18px !important; padding-top:16px !important; }
#ob-forgot-form input{ width:100%; background:transparent !important; border:0 !important;
  border-bottom:1px solid var(--hair2) !important; border-radius:0 !important;
  box-shadow:none !important; outline:0; color:rgb(var(--ink)) !important;
  font:400 15px var(--f-body) !important; padding:8px 0 !important; margin-bottom:14px !important; }
#ob-forgot-form input:focus{ border-bottom-color:var(--ice) !important; }
#fg-send{ width:100%; min-height:44px; border-radius:var(--r-pill);
  border:1px solid var(--mg-pill-edge); background:var(--mg-pill-bg);
  color:rgb(var(--ink2)); font:500 14px var(--f-body); cursor:pointer;
  transition:background var(--dur-1), color var(--dur-1); }
#fg-send:hover{ background:var(--mg-pill-hover); color:rgb(var(--ink)); }
#fg-msg{ font:400 13px var(--f-body) !important; color:rgb(var(--ink3)) !important; margin-top:10px !important; }

/* the invite state keeps its meaning, on hairlines instead of a blue box */
#ob-invite-note{
  border:0 !important; border-top:1px solid var(--hair2) !important;
  border-bottom:1px solid var(--hair2) !important;
  background:none !important; border-radius:0 !important;
  padding:14px 0 !important; margin:0 0 26px !important; text-align:left; }
#ob-invite-note p:first-child{
  font:500 14px/1.4 var(--f-body) !important; letter-spacing:0 !important;
  text-transform:none !important; color:rgb(var(--ink)) !important; }
#ob-invite-note p:last-child{
  font:400 13px/1.55 var(--f-body) !important; color:rgb(var(--ink2)) !important; margin-top:6px !important; }
#ob-invite-note svg{ display:none; }

/* arrival: opacity and a 12px rise, staggered, once (§10) */
@media (prefers-reduced-motion:no-preference){
  #gate:not(.hidden) #ob-auth:not(.hidden) > *{ animation:ent-rise var(--dur-3) var(--ease-inst) both; }
  #gate:not(.hidden) #ob-auth:not(.hidden) > :nth-child(1){ animation-delay:0ms; }
  #gate:not(.hidden) #ob-auth:not(.hidden) > :nth-child(2){ animation-delay:80ms; }
  #gate:not(.hidden) #ob-auth:not(.hidden) > :nth-child(3){ animation-delay:120ms; }
  #gate:not(.hidden) #ob-auth:not(.hidden) > :nth-child(4){ animation-delay:160ms; }
  #gate:not(.hidden) #ob-auth:not(.hidden) > :nth-child(5){ animation-delay:200ms; }
  #gate:not(.hidden) #ob-auth:not(.hidden) > :nth-child(6){ animation-delay:240ms; }
  #gate:not(.hidden) #ob-auth:not(.hidden) > :nth-child(7){ animation-delay:280ms; }
  #gate:not(.hidden) #ob-auth:not(.hidden) > :nth-child(8){ animation-delay:320ms; }
  #gate:not(.hidden) #ob-auth:not(.hidden) > :nth-child(9){ animation-delay:360ms; }
}

@media (prefers-reduced-motion:reduce){
  #ob-auth #li-btn{ transition:none !important; }
  #ob-auth #li-btn:hover{ transform:none; }
}

/* phone: the same screen, closer together. Nothing is dropped. */
@media (max-width:640px){
  #ob-auth{ padding:8px 0 !important; max-width:100% !important; }
  #ob-auth .ent-mark--stack{ margin-bottom:34px; }
  #ob-auth #ob-auth-sub{ margin-bottom:26px !important; }
}
@media (max-height:640px){
  #ob-auth .ent-mark--stack{ gap:14px; margin-bottom:24px; }
  #ob-auth .ent-mark--stack .ent-glyph{ width:38px; height:38px; }
  #ob-auth #ob-auth-sub{ margin-bottom:20px !important; }
  #ob-auth .ob-line{ margin-bottom:18px; }
}

/* ── HER RULING 2026-09-14: the blue ring comes off the schematics ──────────
   css/arete-system.css:873 paints `stroke:url(#ai-grad)` onto every `.card svg`.
   It is meant for the small line icons in cards and rails. The fitting's
   schematics live in `.card` panels too, so every shape in them that carries no
   stroke of its own inherited that gradient: the halo circle became a hard blue
   ring, and each filled dot grew a blue outline. Her words: the same blue shows
   at different sizes all along the test, and as small circles inside the shapes.

   Stroke is inherited, and a presentation attribute is a declaration on the
   element itself, so `stroke:none` here only reaches the shapes that never
   asked for a stroke. Every line, polygon and ring the artwork draws on purpose
   keeps exactly the stroke it was given. */
#ob-anchor-grid svg,
#ob-opts svg, #ob-optA svg, #ob-optB svg,
#ob-arbit-grid svg{ stroke:none; }


/* ── THE FACTS AT SIGN-UP (2026-09-23, design pass). The front door's twin: one
      column standing in the same lit field, no frame of any kind, the door's own
      title, sentence, lines and pill, measured off #ob-auth above. The level is a
      set of tappable words: a choice is a brighter hairline, never a fill (§3). ── */
#gate:has(#ob-facts:not(.hidden)){ background:var(--bg) !important; }
#gate:has(#ob-facts:not(.hidden))::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%,rgba(31,126,219,.20),transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg) 70%); }
html[data-theme="light"] #gate:has(#ob-facts:not(.hidden))::before{
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%,rgba(17,98,137,.09),transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg) 70%); }
#ob-facts{ position:relative; z-index:1; width:100%; max-width:26rem; margin:auto; text-align:center; padding:8px 0; }
#ob-facts.hidden{ display:none; }
#ob-facts .fx-kick{ margin:0 0 6px; font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); }
#ob-facts .fx-title{ margin:0 0 6px; font:500 26px/1.1 var(--f-disp); letter-spacing:-.022em; color:rgb(var(--ink)); text-wrap:balance; }
#ob-facts .fx-sub{ margin:0 auto 30px; max-width:44ch; font:400 15px/1.5 var(--f-body); color:rgb(var(--ink2)); text-wrap:pretty; }
#ob-facts .fx-pair{ display:grid; grid-template-columns:1fr 1fr; gap:24px; text-align:left; }
#ob-facts .fx-lab{ display:block; margin:0 0 2px; font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); }
#ob-facts .fx-lab--c{ text-align:center; margin-top:6px; }
#ob-facts .fx-line{ position:relative; padding-bottom:6px; }
#ob-facts .fx-line::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--hair2); transition:background var(--dur-2) var(--ease-inst); }
#ob-facts .fx-line:focus-within::after{ background:var(--ice); }
#ob-facts .fx-line input{ width:100%; min-height:44px; background:transparent !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important; outline:0; color:rgb(var(--ink)) !important;
  font:300 28px/1.2 var(--f-body) !important; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  padding:4px 0 !important; margin:0 !important; }
#ob-facts .fx-line input::placeholder{ color:rgb(var(--ink3)); opacity:.45; }
#ob-facts .fx-err{ min-height:18px; margin:6px 0 12px; font:400 12px/1.5 var(--f-body); color:rgb(var(--ink2)); }
#ob-facts .fx-levels{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:8px 0 30px; }
#ob-facts .fx-levels button{ min-height:44px; padding:0 16px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(160,225,255,.16); background:transparent; color:rgb(var(--ink2));
  font:500 14px/1 var(--f-body); letter-spacing:0;
  transition:border-color var(--dur-1) ease, color var(--dur-1) ease; }
#ob-facts .fx-levels button:hover{ color:rgb(var(--ink)); border-color:rgba(200,236,255,.42); }
#ob-facts .fx-levels button[aria-pressed="true"]{ color:rgb(var(--ink)); border-color:rgba(200,236,255,.72); }
#ob-facts .fx-levels button:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; }
/* the pill: the door's own (#li-btn) */
#ob-facts #fx-go{ width:100%; min-height:52px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(160,225,255,.22);
  background:linear-gradient(115deg,rgba(10,122,205,.62),rgba(0,191,255,.42) 50%,rgba(0,63,92,.62));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 14px 36px -18px rgba(47,123,255,.7);
  color:rgb(var(--ink)); font:600 16px/1 var(--f-body); letter-spacing:0;
  transition:transform var(--dur-2) var(--ease-inst), border-color var(--dur-2); }
#ob-facts #fx-go:hover{ transform:translateY(-2px); border-color:rgba(200,236,255,.42); }
#ob-facts #fx-go:active{ transform:translateY(0) scale(.985); }
#ob-facts #fx-go:disabled{ opacity:.35; cursor:default; transform:none; }
#ob-facts #fx-go:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; }
html[data-theme="light"] #ob-facts #fx-go{
  background:linear-gradient(115deg,#0a7acd,#116289 50%,#003f5c); border-color:rgba(10,122,205,.5); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 36px -20px rgba(17,98,137,.5); }
#ob-facts .fx-fine{ margin:14px auto 0; max-width:40ch; font:400 13px/1.45 var(--f-body); color:rgb(var(--ink3)); }
/* the reveal, once (§10) */
#ob-facts:not(.hidden) > *{ animation:fx-rise var(--dur-3) cubic-bezier(.2,.8,.2,1) both; }
#ob-facts > *:nth-child(2){ animation-delay:80ms; } #ob-facts > *:nth-child(3){ animation-delay:160ms; }
#ob-facts > *:nth-child(4){ animation-delay:240ms; } #ob-facts > *:nth-child(n+5){ animation-delay:320ms; }
@keyframes fx-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ #ob-facts > *{ animation:none !important; } }
@media (max-width:480px){
  #ob-facts{ padding:8px 4px; }
  #ob-facts .fx-pair{ gap:18px; }
  #ob-facts .fx-line input{ font-size:24px !important; }
}

/* THE ARBITRATION FORMS, NAMED (her ruling 2026-09-27): under each glyph its plain day
   line from lib/arete-lexicon.js. Manrope 14px, ink2, sentence case (constitution §2). */
#ob-arbit-grid .ob-cell--named{ aspect-ratio:auto; flex-direction:column; justify-content:flex-start; gap:10px; padding:8% 8% 14px; }
#ob-arbit-grid .ob-cell__g{ display:block; width:100%; aspect-ratio:1; }
#ob-arbit-grid .ob-cell__g svg{ width:100%; height:100%; display:block; }
#ob-arbit-grid .ob-cell__t{ font:400 14px/1.35 var(--f-body); color:rgb(var(--ink2)); text-align:center; text-transform:none; letter-spacing:0; text-wrap:balance; }
#ob-arbit-grid .ob-cell--named.sel .ob-cell__t{ color:rgb(var(--ink)); }