/* ============================================================================
   Reaction Room · Bento skin — ENTRY pages
   gate · signin · auth · beta · landing · 404   (html[data-rr-page="…"])
   Spec: _bento-spec/derived.md §9 — ENTRY-01…08, ENTRY-11, GATE-01…03,
   SIGNIN-01…08 (+05b), AUTH-01…04, BETA-01…02, LANDING-01…02, 404-01…02.
   (ENTRY-09/10 are "not possible": no island and no invented creator name
   on these pages.) ENTRY-11, SIGNIN-05b and AUTH-04 answer the Codex copy's
   gate / signin / auth markup (account menu, #verification, #switchAccount,
   auth .error / #status); they are inert on this worktree's pages.

   Target: the keynote stage (black + the board mockup's violet / deep-blue
   light) with ONE centred widget card holding the NM lockup, a heavy two-tone
   headline, grey copy and a single cyan pill. Secondary actions are glass
   chips or cyan text links.

   Rules of this file
   - Every selector starts at html[data-rr-page="<shell>"] (or html:is(…) over
     the six entry shells). Page rules are all ≤ (0,2,0); foundation rules this
     file answers are named where they matter.
   - Pages toggle state with [hidden]; gate.html only has `.err[hidden]` and
     the UA rule for the rest, so this file never sets `display` on anything a
     page shows / hides (errors use padding + an absolutely placed disc).
   - Inline style="" on three links (gate #signinLink, beta and landing CTAs):
     where the inline value is a var(), the var is re-pointed on the element
     itself instead of reaching for !important. The two !important here
     answer inline literals: gate #signinRow's margin and, in the owner-only
     state only, #signinLink's font-weight (GATE-03).
   - Control heights and min-heights never drop below the page's own or 44px
     (the short-phone block trims gaps and card padding, never a target).
   - Motion (lifts, pulse, chevron turn) only under prefers-reduced-motion:
     no-preference / html.bento-motion; the pages keep their own entry
     animation and reduced-motion guards.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   ENTRY-01 · Stage — black, with the board mockup's two lights:
   .app::before violet  (1200×900 box at -200/-160 → centre 400,290 on 1440×900,
                         radii 45% → 540×405; .6 → .3 at 55% → 0 at 75%)
   .app::after  deep blue (900×700 box at right -260 / top -240 → centre 1250,110,
                         radii 405×315; .55 → 0 at 72%)
   Positions and radii are the same proportions of the viewport (vw/vh: Chrome
   rejects max() over a % radius). (0,1,2) beats
   each page's body{background:…} (signin/beta paint a stock-blue radial there).
   ------------------------------------------------------------------------- */
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) {
  --entry-grad: linear-gradient(96deg, #DAFCFF 0%, #A3EEF6 24%, #7288F6 64%, #8C7BFF 100%);   /* mockup numerals */
  --entry-cta-glow: 0 8px 24px -8px rgba(163, 238, 246, .55);
  --entry-cta-glow-hover: 0 12px 30px -8px rgba(163, 238, 246, .7);
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) body {
  background-color: #000;
  background-image:
    radial-gradient(max(37.5vw, 260px) 45vh at 27.8% 32%, rgba(39, 2, 134, .6), rgba(22, 15, 78, .3) 55%, transparent 75%),
    radial-gradient(max(28.1vw, 200px) 35vh at 86.8% 12%, rgba(4, 60, 140, .55), transparent 72%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/* ---------------------------------------------------------------------------
   ENTRY-02 · The widget card = body > main. R-TILE at r28 lit from inside by
   the board's featured-card light (R-FEATGLOW): isolation:isolate gives main a
   permanent stacking context, so the z-index:-1 pseudo always paints above the
   tile's own background and below its content, during and after the page's
   `in` transform animation (signin, beta). It sits on ::after because auth
   already draws its lockup on main::before.
   Where the light sits: on the mockup the featured card is lit from its FOOT
   (its image covers the top), teal on the left and periwinkle on the right
   under the title row, with a little of it spilling below the card. These
   cards have no image, so the light is pinned to the card's foot instead of a
   fixed 40–60% height, where it read as a grey haze beside the headline: the
   pseudo is the bottom min(62%, 300px) of the card, reaching 18px past it,
   with both centres at 88% of that box.
   Contrast sets the strength, measured pixel-true with the light on
   (every gate/signin/landing/beta/404/auth lab state at 1440, 1280, 768 and
   390 wide): the quietest texts sit on it (the footnote #98989D, gate red
   errors #FF4D6D 5.3:1 on the bare tile, signin's divider words). At the
   mockup's .28/.42 the red error falls under 4.5:1; at .10/.20 the worst
   text stays ≥4.5:1.
   The glow BELOW the card (ENTRY-02: cyan-to-periwinkle) is box-shadow, so
   it can be as strong as the spec asks: a shadow paints under the opaque
   tile, never behind a word, and never adds scroll height or width. Two
   pools under the foot, cyan under the left half and periwinkle under the
   right (the same split as the light inside the foot), then the soft
   periwinkle halo the card already had. A spread of -64px keeps each pool
   inside the card's sides (little glow up the edges; the spec's -40px
   version read as a periwinkle rim with the cyan lost along the left edge),
   and the y offset (78/82 = 64 + 14/18) puts each pool's edge 14–18px below
   the card. A pool exists only while the card is over 128px each way
   (2 × 64), which every entry card is (auth, the shortest, is ~250px).
   ------------------------------------------------------------------------- */
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) main {
  position: relative;
  isolation: isolate;
  max-width: 480px;
  padding: 36px 36px 30px;
  border-radius: 28px;
  background-color: var(--bento-tile);
  box-shadow:
    var(--bento-edge),
    -34px 78px 80px -64px rgba(163, 238, 246, .42),
    34px 82px 90px -64px rgba(114, 136, 246, .55),
    0 30px 60px -40px rgba(114, 136, 246, .25);
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) main::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 12px -18px;
  height: min(62%, 300px);
  border-radius: 40px;
  background:
    radial-gradient(60% 70% at 30% 88%, rgba(163, 238, 246, .10), transparent 70%),
    radial-gradient(60% 70% at 72% 88%, rgba(114, 136, 246, .20), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   ENTRY-03 · Brand lockup inside the card. The foundation already draws the
   NM logo on .dot and the product label on ::after (15px/600, hairline
   separator); here the spacing under it, and square corners: p.brand clips
   (overflow:hidden, for the pushed-out words) and is exactly as tall as the
   logo, so the foundation's 8px focus-ring radius (meant for a.brand links)
   rounded off the corners of the NM "r". A <p> is never focusable.
   (0,2,2) > foundation html[data-rr-page] .brand (0,2,1).
   ------------------------------------------------------------------------- */
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) p.brand {
  margin: 0 0 28px;
  border-radius: 0;
}


/* ---------------------------------------------------------------------------
   ENTRY-04 · Two-tone keynote headline: one weight, the second half grey.
   overflow-wrap:anywhere so a one-word creator name in the gate's #who (a
   Facebook page name such as "TheRealGrandmaReacts") breaks inside the card
   instead of widening it past a phone screen. `anywhere`, not `break-word`:
   only `anywhere` lowers the min-content width, which is what stops the
   centred grid item <main> from growing. Ordinary words never break (the
   extra opportunities are used only when a word cannot fit a line).
   ------------------------------------------------------------------------- */
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) h1 {
  margin: 0;
  font: 700 40px/1.05 var(--font);
  letter-spacing: -.036em;
  color: var(--bento-text);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--bento-text-2);
}
/* The grey half starts its own line (keynote title: white line, grey line).
   A forced break, not a nowrap, so a long creator name still wraps (with or
   without spaces: see overflow-wrap above). gate and beta are too long for
   one line in the card. Landing's "Edits review" is short enough to stay one
   line, and so is signin's "Your room. Your account." at 38px (about 403px
   of the card's 408px): one heavy line with its grey half, like the mockup's
   "Your projects.". On a wider system font, text-wrap:balance still gives a
   clean two-line fallback. The phone block below keeps 32px. */
html:is([data-rr-page="gate"], [data-rr-page="beta"]) h1 em::before {
  content: "\A";
  content: "\A" / "";
  white-space: pre;
}
html[data-rr-page="signin"] h1 { font-size: 38px; }


/* ---------------------------------------------------------------------------
   ENTRY-05 · Copy and footnote. Copy 15/1.5 grey (7.7:1 on the tile); the
   footnote 12.5/1.6 (5.9:1), aligned as each page has it, closed off by a
   hairline when it ends the card. text-wrap:pretty keeps a single word from
   ending a paragraph alone (landing "frame.", beta "device."); browsers
   without it wrap as before.
   Errors are never body copy: the Codex auth.html puts `p#err.error
   [role=alert]` straight under main, and this (0,2,3) rule would otherwise
   outrank its `.error{color:var(--danger)}` (0,1,0) and paint it grey. They
   take the ENTRY-08 recipe instead. Extra :not() arguments keep (0,2,3).
   ------------------------------------------------------------------------- */
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) main > p:not(.brand, .code, .note, .notice, .err, .error, [role=alert]) {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bento-text-2);
  text-wrap: pretty;
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="beta"], [data-rr-page="landing"]) .note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--bento-text-3);
  text-wrap: pretty;
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="beta"], [data-rr-page="landing"]) main > .note:last-child {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--bento-hairline);
}


/* ---------------------------------------------------------------------------
   ENTRY-06 · The one cyan pill per page (R-CTA, full width in the card; the
   landing link stays a compact pill). Colours come from the foundation
   (cyan fill, navy text, pill radius); here size, type and the CTA glow.
   ------------------------------------------------------------------------- */
html[data-rr-page="gate"] #gate button[type=submit],
html[data-rr-page="auth"] button#go,
html[data-rr-page="signin"] a.action#continue {
  height: var(--bento-ctl-lg);
  font: 600 15px/1 var(--font);
  letter-spacing: -.01em;
  border-radius: var(--bento-pill);
  box-shadow: var(--entry-cta-glow);
}
html[data-rr-page="gate"] #gate button[type=submit] { margin-top: 20px; }
html[data-rr-page="auth"] button#go {
  width: 100%;
  margin-top: 26px;
  padding: 0 22px;
}
/* The id outranks the foundation's primary :hover:not(:disabled) (0,5,1): keep the CTA glow's shape. */
html[data-rr-page="gate"] #gate button[type=submit]:hover:not(:disabled),
html[data-rr-page="auth"] button#go:hover:not(:disabled),
html[data-rr-page="signin"] a.action#continue:hover {
  box-shadow: var(--entry-cta-glow-hover);
}

/* beta "Continue to sign in" and landing "Sign in with your email" paint from
   style="" (display, padding, radius, background:var(--accent), color:#fff).
   The foundation already forces navy text and the pill radius; the hover tint
   re-points --accent on the link itself, so no further !important is needed. */
html:is([data-rr-page="beta"], [data-rr-page="landing"]) a[href="/signin"][style*="background:var(--accent)"] {
  font-size: 15px;
  letter-spacing: -.01em;
  box-shadow: var(--entry-cta-glow);
}
html:is([data-rr-page="beta"], [data-rr-page="landing"]) a[href="/signin"][style*="background:var(--accent)"]:hover {
  --accent: var(--bento-cyan-hover);
  box-shadow: var(--entry-cta-glow-hover);
}
html[data-rr-page="beta"] a[href="/signin"][style*="background:var(--accent)"] {
  min-height: 48px;                       /* inline block + 13px padding ≈ 49px already */
}
html[data-rr-page="beta"] main > p:has(> a[href="/signin"][style]) { margin-top: 26px; }
html[data-rr-page="landing"] a[href="/signin"][style*="background:var(--accent)"] {
  min-height: 44px;                       /* LANDING-02: min beats the inline height:40px */
}

@media (prefers-reduced-motion: no-preference) {
  html:is([data-rr-page="beta"], [data-rr-page="landing"]) a[href="/signin"][style*="background:var(--accent)"] {
    transition: background-color .15s ease, box-shadow .2s ease, transform .18s var(--bento-spring);
  }
  html[data-rr-page="gate"] #gate button[type=submit]:hover:not(:disabled),
  html[data-rr-page="auth"] button#go:hover:not(:disabled),
  html[data-rr-page="signin"] a.action#continue:hover,
  html:is([data-rr-page="beta"], [data-rr-page="landing"]) a[href="/signin"][style*="background:var(--accent)"]:hover {
    transform: translateY(-1px);
  }
  html[data-rr-page="gate"] #gate button[type=submit]:active:not(:disabled),
  html[data-rr-page="auth"] button#go:active:not(:disabled),
  html[data-rr-page="signin"] a.action#continue:active {
    transform: scale(.98);
  }
}

/* X-01 · rings sit 3px off every pill and chip. */
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"]) :is(button, a.action, a[style], summary):focus-visible,
html[data-rr-page="auth"] main > p > a:focus-visible {
  outline: 2px solid var(--bento-focus);
  outline-offset: var(--bento-focus-offset);
}


/* ---------------------------------------------------------------------------
   ENTRY-07 · Fields: sentence-case labels, 48px filled fields (r14). The fill
   and the cyan focus halo are the foundation's; gate keeps the mono passcode.
   ------------------------------------------------------------------------- */
html[data-rr-page="gate"] #gate label,
html[data-rr-page="signin"] #f label {
  margin: 0 0 8px;
  font: 600 12.5px/1.3 var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--bento-text-2);
}
html[data-rr-page="gate"] #gate label + input + label { margin-top: 18px; }
html[data-rr-page="gate"] #gate :is(#nm, #pc),
html[data-rr-page="signin"] #f #email {
  height: 48px;
  padding: 0 15px;
  border-radius: 14px;
  font-size: 15px;
}
/* V6 (round 4 review): these two IDs are (2,1,1) — no combination of classes
   or attributes (foundation.css's own touch-field rule included) outranks an
   ID pair, so 15px stood on iOS Safari and zoomed the page on focus. Same
   selector, same specificity, later in the cascade, gated to touch only. */
@media (pointer: coarse) {
  html[data-rr-page="gate"] #gate :is(#nm, #pc),
  html[data-rr-page="signin"] #f #email {
    font-size: max(16px, 1em);
  }
}
/* Keep the crisp cyan rim while the pointer rests on a focused field (the
   normal state while typing, and gate's autofocused #nm on load): the
   foundation's field :hover:not(:disabled) is (0,4,2) and outranks its own
   :focus (0,3,2). The ids here are (2,2,1); the halo stays the foundation's. */
html[data-rr-page="gate"] #gate :is(#nm, #pc):focus,
html[data-rr-page="signin"] #f #email:focus {
  border-color: var(--bento-cyan);
}
/* Hints ("e.g. Kosta", "you@example.com"): the foundation's --faint #98989D
   lands at about 4.1–4.4:1 on the lit field fill here. text-2 is 5.3:1 on the
   brightest fill sampled (#34383f) and still reads as a hint next to typed
   #F5F5F7 text. */
html[data-rr-page="gate"] #gate #nm::placeholder,
html[data-rr-page="signin"] #f #email::placeholder {
  color: var(--bento-text-2);
}
/* Browser autofill (a saved name or email): Chrome's UA rule
   input:-internal-autofill-selected paints a slate-blue fill and FieldText
   with !important, which an author rule cannot outrank. The inset shadow
   covers that fill with the skin's own field colour (#2C2C30 = the
   foundation's rgba(118,118,128,.18) over the tile), the text fill colour
   answers FieldText, and the long transition keeps the UA background from
   ever showing. Focused, the cyan halo is kept on top. */
html[data-rr-page="gate"] #gate :is(#nm, #pc):-webkit-autofill,
html[data-rr-page="signin"] #f #email:-webkit-autofill {
  -webkit-text-fill-color: var(--bento-text);
  caret-color: var(--bento-text);
  box-shadow: 0 0 0 40px #2C2C30 inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
html[data-rr-page="gate"] #gate :is(#nm, #pc):-webkit-autofill:focus,
html[data-rr-page="signin"] #f #email:-webkit-autofill:focus {
  box-shadow: 0 0 0 40px #2C2C30 inset, var(--bento-focus-halo);
}


/* ---------------------------------------------------------------------------
   ENTRY-08 · Errors (red-pink ink + a round "!" disc) and notices (cyan + an
   info glyph). Errors keep their own display: the disc is absolutely placed.
   gate and signin: `.err`. auth (Codex copy): `main > p#err.error[role=alert]`
   and a `p#status[role=status]` notice; auth is a centred card, so there the
   disc and glyph sit inline before the first word instead of hanging in the
   left margin, away from centred text (AUTH-04 below). Both selectors are
   inert on today's auth.html, which has neither element.
   ------------------------------------------------------------------------- */
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"]) {
  --entry-err-disc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23E3143D'/%3E%3Cpath d='M8 4.3v4.4' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.55' r='1.1' fill='%23fff'/%3E%3C/svg%3E");
  --entry-info-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='7.25'/%3E%3Cpath d='M9 8.2v4.4'/%3E%3Ccircle cx='9' cy='5.55' r='.95' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
html:is([data-rr-page="gate"], [data-rr-page="signin"]) .err,
html[data-rr-page="auth"] main > p.error {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bento-red-ink);
  text-wrap: pretty;                          /* no lone "again." on a phone (ENTRY-05) */
}
html:is([data-rr-page="gate"], [data-rr-page="signin"]) .err {
  position: relative;
  padding-left: 25px;
}
html:is([data-rr-page="gate"], [data-rr-page="signin"]) .err::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.8px;
  width: 16px;
  height: 16px;
  background: var(--entry-err-disc) center / 16px 16px no-repeat;
}
html[data-rr-page="signin"] #authNotice {
  position: relative;
  margin: 18px 0 0;
  padding-left: 25px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bento-cyan);
  text-wrap: pretty;
}
html[data-rr-page="signin"] #authNotice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.8px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--entry-info-glyph) center / contain no-repeat;
          mask: var(--entry-info-glyph) center / contain no-repeat;
}


/* ---------------------------------------------------------------------------
   ENTRY-11 · Account menu. The Codex copy mounts reactor/account-controls.js
   into `div[data-account-controls]` (gate: position:fixed, top-right). The
   module paints itself from its own <style> (#20232c box, #626675 border,
   10px corners, a navy panel, a 3px #b4c9ff ring) and, on these pages, its
   two buttons fell under the foundation's entry primary recipe: two more
   cyan pills in the panel. Here it becomes a glass capsule like the gate's
   sign-in chip, and a tile panel with neutral well pills (the page's one cyan
   pill stays the card's). Only colour, shape, type and the ring change; the
   module's layout, positions, [hidden] toggles and 44px rows stay its own.
   Specificity: the module's rules are (0,1,1)–(0,2,1); the panel rows here
   (0,3,2) and their hover (0,5,2) beat the foundation's entry primary
   (0,3,1) / (0,5,1). Inert today (no such element in this worktree). The
   widget also sits in topbars on other pages; those belong to their own
   partials (or the foundation).
   ------------------------------------------------------------------------- */
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls {
  font-family: var(--font);
  color: var(--bento-text);
}
/* M26 (round 4): gate.html's own inline style="position:fixed;right:16px;
   top:16px" floats the pill over the card's top-right corner at phone
   widths (the short-viewport rules above trim body's padding-top even
   further there, so there's less clearance, not more) and can sit over the
   name/passcode fields once the keyboard pushes the card up. Below this
   width the pill rejoins the page's own centred grid flow — it stacks above
   the card, same as everything else — instead of floating over it;
   !important answers the inline style.
   V2 (round 4 review) — this was a regression: `position: static` also
   un-does account-controls.js's own `.account-controls{position:relative}`
   on this SAME node (the module renders straight into this wrapper), which
   is what makes it the positioning context for its own absolute `.ac-panel`
   (`top: calc(100% + …)`). Static here made that `top` resolve against the
   page's own height instead — the panel opened hundreds of px below the
   fold. `relative` still leaves the grid flow (no offsets are set), so the
   fix is one word: it joins the flow AND stays the panel's anchor. The panel
   itself still needs its own fix below — it's right-anchored to a pill that
   is now centred, not at an edge. */
@media (max-width: 480px) {
  html[data-rr-page="gate"] [data-account-controls] {
    position: relative !important;
    /* relative (unlike static) still honours top/right from the inline
       style="…right:16px;top:16px" — cancel them too, or the pill would
       shift by that offset from its new, flowed position instead of sitting
       plainly in it. */
    top: auto !important;
    right: auto !important;
    margin: 0 0 14px !important;
  }
  html[data-rr-page="gate"] [data-account-controls] .ac-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(280px, calc(100vw - 24px));
  }
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls summary {
  min-height: 44px;
  padding: 0 16px 0 13px;
  gap: 8px;
  border-color: transparent;
  border-radius: var(--bento-pill);
  background-color: rgba(255, 255, 255, .08);
  color: var(--bento-text-soft);
  font: 600 14px/1 var(--font);
  letter-spacing: -.005em;
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls summary:hover,
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls details[open] > summary {
  background-color: rgba(255, 255, 255, .14);
  color: var(--bento-text);
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls .ac-panel {
  top: calc(100% + 8px);
  padding: 16px;
  border-color: var(--bento-hairline-strong);
  border-radius: 18px;
  background-color: var(--bento-tile);
  box-shadow: var(--bento-edge), var(--bento-shadow);
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls .ac-person {
  margin-bottom: 8px;
  font: 600 14px/1.35 var(--font);
  letter-spacing: -.005em;
  color: var(--bento-text);
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls .ac-panel :is(button, a) {
  min-height: 44px;
  margin-top: 8px;
  padding: 0 16px;
  border-color: transparent;
  border-radius: var(--bento-pill);
  background-color: var(--bento-well-2);
  color: var(--bento-text);
  font: 600 14px/1.25 var(--font);
  letter-spacing: -.005em;
  box-shadow: none;
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls .ac-panel :is(button, a):hover:not(:disabled) {
  background-color: var(--bento-well-3);
  border-color: transparent;
  color: var(--bento-text);
  box-shadow: none;
}
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls .ac-status {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bento-text-2);
}
/* The module's `.account-controls :focus-visible` (0,2,0) 3px #b4c9ff ring
   outranks the foundation baseline (0,1,0); the entry rings (X-01) are the
   cyan 2px at 3px. (0,3,1). */
html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls :focus-visible {
  outline: 2px solid var(--bento-focus);
  outline-offset: var(--bento-focus-offset);
}
@media (prefers-reduced-motion: no-preference) {
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) .account-controls summary {
    transition: background-color .15s ease, color .15s ease;
  }
}


/* ===========================================================================
   GATE (data-rr-page="gate")
   ========================================================================= */

/* GATE-01 · The inner form.card is flattened: the fields sit in the one card.
   (1,1,2) > foundation .card (0,2,1). */
html[data-rr-page="gate"] form#gate {
  margin-top: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* GATE-02 · "Sign in with your email →" as a glass chip (R-CHIP) with a cyan
   envelope glyph. Its style="" reads var(--hairline), var(--radius-sm) and
   var(--ink): re-pointed here on the link itself. min-height beats the inline
   height:38px. */
html[data-rr-page="gate"] #signinLink {
  --hairline: transparent;
  --radius-sm: 999px;
  --ink: var(--bento-text-soft);
  min-height: 44px;
  padding-left: 14px;
  padding-right: 18px;
  background-color: rgba(255, 255, 255, .08);
  font-size: 14px;
  letter-spacing: -.005em;
}
html[data-rr-page="gate"] #signinLink::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--bento-cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.25' y='3.75' width='13.5' height='10.5' rx='2.6'/%3E%3Cpath d='M3.2 5.6 9 9.7l5.8-4.1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.25' y='3.75' width='13.5' height='10.5' rx='2.6'/%3E%3Cpath d='M3.2 5.6 9 9.7l5.8-4.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-rr-page="gate"] #signinLink:hover {
  --ink: #fff;
  background-color: rgba(255, 255, 255, .14);
}
html[data-rr-page="gate"] #signinRow { margin-top: 20px !important; }   /* style="margin:14px 0 0" — a touch more air under the lede */
@media (prefers-reduced-motion: no-preference) {
  html[data-rr-page="gate"] #signinLink { transition: background-color .15s ease, color .15s ease; }
}

/* Errors inside the form: a little air above the pill. */
html[data-rr-page="gate"] #gate .err { margin-top: 16px; }

/* GATE-03 · owner-only / paused: the form is hidden by the page; the card is
   lockup, headline, lede, the sign-in link (owner) or note (paused), closed
   off by the hairline footnote. In the owner-only state "Sign in with your
   email →" is the only way forward, so it becomes the page's one cyan pill
   (ENTRY-06) instead of a quiet chip. The inline style="" is re-pointed as
   above (--ink, --hairline); its literal font-weight:500 needs the one
   !important (inline-style exception, as the foundation's inline CTAs). The
   paused state has no link and stays as it is. (2,2,2) > the chip rules. */
html[data-rr-page="gate"] main:has(> #gate[hidden]) #signinLink {
  --ink: var(--bento-navy);
  width: 100%;
  min-height: 48px;
  justify-content: center;
  background-color: var(--bento-cyan);
  font-size: 15px;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  box-shadow: var(--entry-cta-glow);
}
html[data-rr-page="gate"] main:has(> #gate[hidden]) #signinLink::before { background-color: var(--bento-navy); }
html[data-rr-page="gate"] main:has(> #gate[hidden]) #signinLink:hover {
  --ink: var(--bento-navy);
  background-color: var(--bento-cyan-hover);
  box-shadow: var(--entry-cta-glow-hover);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-rr-page="gate"] main:has(> #gate[hidden]) #signinLink {
    transition: background-color .15s ease, box-shadow .2s ease, transform .18s var(--bento-spring);
  }
  html[data-rr-page="gate"] main:has(> #gate[hidden]) #signinLink:hover { transform: translateY(-1px); }
  html[data-rr-page="gate"] main:has(> #gate[hidden]) #signinLink:active { transform: scale(.98); }
}


/* ===========================================================================
   SIGNIN (data-rr-page="signin")
   ========================================================================= */

/* SIGNIN-01 · The .panel is flattened into the card. */
html[data-rr-page="signin"] .panel {
  margin-top: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* SIGNIN-02 · Google stays Google-white; only the shape and type change. No
   glow: the page's one glowing pill is the cyan CTA (#continue when signed
   in), as on the mockup. */
html[data-rr-page="signin"] a.action.google#google {
  height: 48px;
  gap: 12px;
  border-color: #fff;
  border-radius: var(--bento-pill);
  font: 600 15px/1 var(--font);
  letter-spacing: -.01em;
  color: #1F1F1F;
  box-shadow: none;
}
html[data-rr-page="signin"] a.action.google#google:hover {
  background: #EEF3FB;
  border-color: #EEF3FB;
}

/* SIGNIN-03 · Divider: quiet grey words between two hairlines. */
html[data-rr-page="signin"] .divider {
  margin: 22px 0;
  gap: 14px;
  font-size: 12.5px;
  color: var(--bento-text-3);
}
html[data-rr-page="signin"] .divider::before,
html[data-rr-page="signin"] .divider::after { background: var(--bento-hairline-strong); }

/* SIGNIN-04 · "Email me a sign-in link": a neutral pill (Google is primary).
   Every button.secondary on signin and auth takes it, so the Codex copy's
   "Switch account" (`button#switchAccount.secondary`, signin and auth) is the
   same 48px well-2 pill, not the one rectangle among pills. The colours are
   set here too: the foundation's neutral rule covers signin only.
   (0,2,2) > foundation neutral (0,2,1); hover (0,4,2) > (0,4,1). */
html:is([data-rr-page="signin"], [data-rr-page="auth"]) button.secondary {
  height: 48px;
  border-radius: var(--bento-pill);
  background-color: var(--bento-well-2);
  border-color: transparent;
  color: var(--bento-text);
  font: 600 15px/1 var(--font);
  letter-spacing: -.01em;
}
html:is([data-rr-page="signin"], [data-rr-page="auth"]) button.secondary:hover:not(:disabled) {
  background-color: var(--bento-well-3);
  border-color: transparent;
}
html:is([data-rr-page="signin"], [data-rr-page="auth"]) button.secondary:disabled {
  opacity: 1;
  background-color: var(--bento-well-2);
  color: var(--bento-text-3);                 /* "Sending…" / "Signing out…" 4.6:1 on well-2 */
}
html[data-rr-page="signin"] button.secondary#go { margin-top: 16px; }
/* Codex signin: "Switch account" follows the session or verification tile,
   close under it (it acts on that tile's account), before the notice and
   the sign-in panel. */
html[data-rr-page="signin"] button.secondary#switchAccount { margin-top: 12px; }

/* SIGNIN-05 · Signed-in session: a well tile with a mint edge and a mint
   check disc (decorative) before "Signed in as". */
html[data-rr-page="signin"] #session {
  margin-top: 26px;
  padding: 16px 16px 14px;
  border: 0;
  border-radius: 18px;
  background: var(--bento-well);
  box-shadow: inset 0 0 0 1px rgba(67, 217, 163, .35);
  font-size: 13.5px;
  color: var(--bento-text-2);
}
html[data-rr-page="signin"] #session > p:first-child {
  position: relative;
  padding-left: 27px;
  font-size: 14.5px;
  line-height: 20px;
  color: var(--bento-text-2);
}
html[data-rr-page="signin"] #session > p:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2343D9A3'/%3E%3Cpath d='M6 10.3l2.7 2.7L14.2 7.6' fill='none' stroke='%2303170F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
html[data-rr-page="signin"] #session strong#sessionEmail {
  font-weight: 600;
  color: var(--bento-text);
}
html[data-rr-page="signin"] #session a.action#continue { margin-top: 14px; }
html[data-rr-page="signin"] #session .detail { margin-top: 10px; }

/* SIGNIN-05b · Codex signin `div#verification.status[role=status]` ("Verify
   your account to continue…"): the same well tile as the session, but an
   information state, not a done one, so a cyan edge and the cyan info glyph
   (#authNotice's) hanging before the text instead of the mint check.
   Inert today (no such element in this worktree's signin.html). */
html[data-rr-page="signin"] #verification {
  position: relative;
  margin-top: 26px;
  padding: 14px 16px 14px 43px;
  border: 0;
  border-radius: 18px;
  background: var(--bento-well);
  box-shadow: inset 0 0 0 1px rgba(163, 238, 246, .22);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bento-text-2);
  text-wrap: pretty;
}
html[data-rr-page="signin"] #verification::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 16.5px;
  width: 16px;
  height: 16px;
  background-color: var(--bento-cyan);
  -webkit-mask: var(--entry-info-glyph) center / contain no-repeat;
          mask: var(--entry-info-glyph) center / contain no-repeat;
}

/* SIGNIN-06 · "Check your inbox": a well tile, mint check disc, cyan links. */
html[data-rr-page="signin"] #done {
  padding: 26px 20px 18px;
  border: 0;
  border-radius: 18px;
  background: var(--bento-well);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
html[data-rr-page="signin"] #done .tick {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: var(--bento-mint-soft);
  box-shadow: inset 0 0 0 1px rgba(67, 217, 163, .25);
}
html[data-rr-page="signin"] #done .tick svg { width: 26px; height: 26px; stroke: var(--bento-mint); stroke-width: 2.4; }
html[data-rr-page="signin"] #done h2 {
  font: 700 20px/1.2 var(--font);
  letter-spacing: -.02em;
  color: var(--bento-text);
}
html[data-rr-page="signin"] #done p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bento-text-2);
}
html[data-rr-page="signin"] #done a.dev#devLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  font: 600 13px/1.3 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--bento-cyan);
  text-decoration: underline;
  text-decoration-color: var(--bento-cyan-line);
  text-underline-offset: 3px;
}

/* SIGNIN-07 · Help disclosure: hairline top, 44px summary row with a chevron
   that turns when open (the native marker is swapped; <details> semantics
   and the keyboard toggle are the browser's own). */
html[data-rr-page="signin"] details.help {
  margin-top: 24px;
  padding-top: 2px;
  border-top: 1px solid var(--bento-hairline);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bento-text-2);
}
html[data-rr-page="signin"] details.help > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  font: 600 14px/1.3 var(--font);
  letter-spacing: -.005em;
  color: var(--bento-text);
}
html[data-rr-page="signin"] details.help > summary::-webkit-details-marker { display: none; }
html[data-rr-page="signin"] details.help > summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background-color: var(--bento-text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.75 3.75 12 9l-5.25 5.25'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.75 3.75 12 9l-5.25 5.25'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-rr-page="signin"] details.help > summary:hover::after { background-color: var(--bento-text); }
html[data-rr-page="signin"] details.help[open] > summary::after { transform: rotate(90deg); }
html[data-rr-page="signin"] details.help > p { margin: 4px 0 0; }
html[data-rr-page="signin"] details.help > p + p { margin-top: 10px; }
html[data-rr-page="signin"] details.help > p:last-child { margin-bottom: 6px; }
@media (prefers-reduced-motion: no-preference) {
  html[data-rr-page="signin"] details.help > summary::after { transition: transform .22s var(--bento-ease), background-color .15s ease; }
}
/* The help row already draws the hairline; the footnote follows it without a second rule. */
html[data-rr-page="signin"] details.help + .note:last-child {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

/* SIGNIN-08 · Status text and text buttons. */
html[data-rr-page="signin"] .detail {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bento-text-2);
  text-wrap: pretty;
}
html[data-rr-page="signin"] #googleHint { margin-top: 10px; text-align: center; }
html[data-rr-page="signin"] button.linkbutton {
  width: fit-content;
  min-height: 44px;
  height: auto;
  margin: 8px auto 0;
  padding: 0 14px;
  border-radius: var(--bento-pill);
  font: 600 14px/1.2 var(--font);
  letter-spacing: -.005em;
  color: var(--bento-cyan);
}
html[data-rr-page="signin"] button.linkbutton:hover {
  background: rgba(163, 238, 246, .08);
  text-decoration: underline;
  text-decoration-color: var(--bento-cyan-line);
  text-underline-offset: 3px;
}


/* ===========================================================================
   AUTH (data-rr-page="auth") — centred card, no brand element in the markup.
   ========================================================================= */

/* AUTH-01 · The lockup as one decorative pseudo (logo + hairline + label,
   alt text empty so nothing is read twice). */
html[data-rr-page="auth"] main::before {
  content: "Reaction Room";
  content: "Reaction Room" / "";
  display: block;
  width: fit-content;
  margin: 0 auto 30px;
  padding-left: 153px;                        /* 128 logo + 12 + 1 hairline + 12 */
  background:
    url("nm-logo.svg") 0 50% / 128px 18px no-repeat,
    linear-gradient(rgba(245, 245, 247, .24), rgba(245, 245, 247, .24)) 140px 50% / 1px 18px no-repeat;
  font: 600 15px/18px var(--font);
  letter-spacing: -.012em;
  color: var(--bento-text);
  white-space: nowrap;
}

@media (max-width: 640px) {                   /* the foundation's phone logo is 114×16 */
  html[data-rr-page="auth"] main::before {
    padding-left: 139px;
    background-size: 114px 16px, 1px 16px;
    background-position: 0 50%, 126px 50%;
  }
}

/* AUTH-02 · Spinner: a cyan arc on a faint cyan track (static under reduced motion — the page's own guard). */
html[data-rr-page="auth"] .spin#spin {
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  border: 3.5px solid rgba(163, 238, 246, .18);
  border-top-color: var(--bento-cyan);
}

/* AUTH-03 · Headline, copy, pill, link. */
html[data-rr-page="auth"] h1 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
html[data-rr-page="auth"] main > p > a[href="/signin"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}
html[data-rr-page="auth"] main > p:has(> a[href="/signin"]) { margin-top: 10px; }

/* AUTH-04 · Codex auth.html (verify / invitation flow). Inert today: none of
   these elements exist in this worktree's auth.html.
   - `p#err.error[role=alert]` → the ENTRY-08 red-ink recipe; the "!" disc
     sits inline before the first word so it stays with the centred text.
   - `p#status[role=status]` → the signin #authNotice treatment (cyan with an
     info glyph), inline for the same reason. (1,1,3) beats ENTRY-05.
   - `button#switchAccount.secondary` is shown by default. The foundation's
     neutral recipe covers signin only, so the page's
     `.secondary{background:var(--surface)}` painted it #1C1C1E, the card's
     own colour: an invisible fill, a hairline box and 12px corners. It takes
     the SIGNIN-04 neutral pill below, full width under the cyan #go.
   - While the page checks the link, #go ("Checking…") and #switchAccount are
     disabled; the page's opacity:.55 turned the cyan pill a muddy teal. Both
     read as the signin "Sending…" state instead: text-3 on well-2 (4.6:1),
     no glow. */
html[data-rr-page="auth"] main > p.error::before,
html[data-rr-page="auth"] main > p#status::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
}
html[data-rr-page="auth"] main > p.error::before { background: var(--entry-err-disc) center / 16px 16px no-repeat; }
html[data-rr-page="auth"] main > p#status {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bento-cyan);
  text-wrap: pretty;
}
html[data-rr-page="auth"] main > p#status::before {
  background-color: currentColor;
  -webkit-mask: var(--entry-info-glyph) center / contain no-repeat;
          mask: var(--entry-info-glyph) center / contain no-repeat;
}
html[data-rr-page="auth"] button#switchAccount {
  width: 100%;
  margin-top: 12px;
  padding: 0 22px;
}
html[data-rr-page="auth"] button#go:disabled {
  opacity: 1;
  background-color: var(--bento-well-2);
  border-color: transparent;
  color: var(--bento-text-3);
  box-shadow: none;
}


/* ===========================================================================
   BETA (data-rr-page="beta")
   ========================================================================= */

/* BETA-01 · "Private access" as the mockup's LIVE chip. */
html[data-rr-page="beta"] .pill {
  height: 24px;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0 10px 0 9px;
  border-radius: 12px;
  background: rgba(163, 238, 246, .1);
  box-shadow: inset 0 0 0 1px rgba(163, 238, 246, .28);
  font: 700 11px/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bento-cyan);
}
html[data-rr-page="beta"] .pill i {
  width: 6px;
  height: 6px;
  background: var(--bento-cyan);
  box-shadow: none;
}
html[data-rr-page="beta"].bento-motion .pill i { animation: bento-entry-pulse 1.8s ease-in-out infinite; }
@keyframes bento-entry-pulse { 50% { opacity: .45; } }

/* BETA-02 · handled with the CTAs above (full-width, 48px). */


/* ===========================================================================
   LANDING (data-rr-page="landing")
   ========================================================================= */

/* LANDING-01 · The accent rule becomes a short keynote bar. */
html[data-rr-page="landing"] .rule {
  height: 3px;
  max-width: 56px;
  margin-top: 20px;
  border-radius: 2px;
  background: var(--bento-grad-soft);
}
html[data-rr-page="landing"] main > .rule + p { margin-top: 18px; }   /* (0,2,3), after the copy rule */
/* LANDING-02 · handled with the CTAs above (compact, ≥44px). */


/* ===========================================================================
   404 (data-rr-page="404")
   ========================================================================= */

/* 404-01 · The code as a hero numeral (R-NUM at stat scale). fit-content so
   the gradient spans the digits, a hair of right padding so the tight
   tracking never clips the last glyph out of the painted box. */
html[data-rr-page="404"] p.code {
  width: fit-content;
  margin: 0 0 16px;
  padding-right: .06em;
  font: 700 88px/.9 var(--font);
  letter-spacing: -.045em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  background: var(--entry-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-rr-page="404"] p.brand { margin-bottom: 30px; }
/* 404-02 · headline and copy: ENTRY-04 / ENTRY-05. */


/* ---------------------------------------------------------------------------
   SIGNIN-05 (fit) · Signed in is the longest entry card: session tile, Google,
   the email form, help and footnote all at once. At 1440×900, the mockup's own
   frame, it ran about 100px past the fold. While the session tile shows, and
   only on screens up to 1000px tall, the card's vertical rhythm tightens so it
   stays one centred card. Nothing is hidden, and no type size or 44/48px
   target changes. The :has(#…) scope (1,2,x) outranks every rule above and
   the short-screen and phone blocks below.
   The scope is "the tall card": the session tile, or the Codex copy's
   "Switch account" pill (shown with the session tile or with its
   #verification tile). Inert #switchAccount today.
   State-independent on purpose: signin's load() hides #session at the start
   of every run and shows it again after /api/me (first load and every window
   focus), so nothing a reader looks at may change size with it. The headline
   size and the lockup gap are set for every state at each screen size (see
   "Signin headline and lockup per screen size" below); only the gaps under
   the lockup tighten here.
   ------------------------------------------------------------------------- */
@media (max-height: 1000px) {
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #session {
    margin-top: 18px;
    padding: 14px 16px 12px;
  }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #session a.action#continue { margin-top: 12px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #session .detail { margin-top: 8px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #verification { margin-top: 18px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) button.secondary#switchAccount { margin-top: 10px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) .panel { margin-top: 18px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #googleHint { margin-top: 8px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) .divider { margin: 16px 0; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) details.help { margin-top: 16px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) details.help + .note:last-child { margin-top: 8px; }
}
@media (max-height: 1000px) and (min-width: 481px) {   /* phones keep their own gutters and card padding */
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) body {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) main {
    padding-top: 28px;
    padding-bottom: 24px;
  }
  /* "Check your inbox" and any state with the help disclosure open: the
     card itself fits 1440×900 but the page's 40px padding pushed the scroll
     height past the fold ("Check your inbox" + help: 919 vs classic 900).
     24px keeps the card clear of the edges; the padding only shows once the
     card is taller than the window, so shorter states look the same. */
  html[data-rr-page="signin"]:has(#done:not([hidden]), details.help[open]) body {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  /* The Codex copy's tall card carries one more 48px pill ("Switch account")
     and longer copy; these few pixels keep it inside 1440×900 (card ≤ 852px
     with 24px above and below). Before the ≤860px blocks, which win there. */
  html[data-rr-page="signin"]:has(#switchAccount:not([hidden])) main {
    padding-top: 24px;
    padding-bottom: 20px;
  }
  html[data-rr-page="signin"]:has(#switchAccount:not([hidden])) #session,
  html[data-rr-page="signin"]:has(#switchAccount:not([hidden])) #verification { margin-top: 16px; }
  html[data-rr-page="signin"]:has(#switchAccount:not([hidden])) .panel { margin-top: 16px; }
  html[data-rr-page="signin"]:has(#switchAccount:not([hidden])) #googleHint { margin-top: 6px; }
  html[data-rr-page="signin"]:has(#switchAccount:not([hidden])) .divider { margin: 14px 0; }
  html[data-rr-page="signin"]:has(#switchAccount:not([hidden])) details.help { margin-top: 14px; }
}
/* Short screens (1280×800 laptops, 390×844 phones). The rhythm above still
   ran 51px past a 1280×800 window and 85px past a 390×844 phone (classic
   scrolls by the same 54 / 85px). Here every gap inside the card steps down
   to 8–16px; the 44/48px targets and all copy sizes stay as they are.
   Measured with the lab's signed-in state (lockup gap as in every state):
   1280×800 main 753px (fits), 390×844 main 793px (fits).
   Same :has(#…) scope as above, after it, so it wins at equal specificity. */
@media (max-height: 860px) {
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) main > h1 + p { margin-top: 10px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #session {
    margin-top: 14px;
    padding: 12px 16px 10px;
  }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #session a.action#continue { margin-top: 10px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #session .detail { margin-top: 6px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #verification { margin-top: 14px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) button.secondary#switchAccount { margin-top: 8px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) .panel { margin-top: 14px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #googleHint { margin-top: 6px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) .divider { margin: 12px 0; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) #f label { margin-bottom: 6px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) button.secondary#go { margin-top: 12px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) details.help { margin-top: 12px; }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) details.help + .note:last-child { margin-top: 6px; }
}
@media (max-height: 860px) and (min-width: 481px) {
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) body {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) main {
    padding-top: 24px;
    padding-bottom: 20px;
  }
}
/* 1366×768 laptops. The card's inner light (main::after) reaches 18px below
   the card and counts as scroll overflow, so a centred card needs ≥18px
   above and below it: main ≤ 732px here (today's signed-in card: 729px). */
@media (max-height: 780px) and (min-width: 481px) {
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) body {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) main {
    padding-top: 18px;
    padding-bottom: 14px;
  }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) .divider { margin: 10px 0; }
}
@media (max-height: 860px) and (max-width: 480px) {
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) body {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  html[data-rr-page="signin"]:has(#session:not([hidden]), #switchAccount:not([hidden])) main {
    padding-top: 20px;
    padding-bottom: 16px;
  }
}


/* ---------------------------------------------------------------------------
   Short screens (1280×800 laptops, phones): a tighter vertical rhythm so the
   longer states (gate errors, "Check your inbox") still fit without a scroll.
   Before the phone block, which sets its own card padding.
   ------------------------------------------------------------------------- */
@media (max-height: 860px) {
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) body {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) main {
    padding-top: 30px;
    padding-bottom: 26px;
  }
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) p.brand { margin-bottom: 22px; }
  /* signin "Check your inbox": a slightly smaller tick disc and tile padding
     and a tighter divider / help gap, so the card fits a 390×844 phone as
     classic does (and gains slack at 1280×800, where it fitted to the pixel). */
  html[data-rr-page="signin"] #done { padding: 20px 18px 12px; }
  html[data-rr-page="signin"] #done .tick {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
  }
  html[data-rr-page="signin"] .divider { margin: 18px 0; }
  html[data-rr-page="signin"] details.help { margin-top: 18px; }
}
/* Signin headline and lockup per screen size, the same in every state (see
   SIGNIN-05 fit): 1440/1280 wide keep 38px and the 28 / 22px lockup gap;
   1366×768 laptops take classic's own 34px and an 18px gap (the signed-in
   card needs them there); short phones get 28px below. */
@media (max-height: 780px) and (min-width: 481px) {
  html[data-rr-page="signin"] h1 { font-size: 34px; }
  html[data-rr-page="signin"] p.brand { margin-bottom: 18px; }
}


/* ---------------------------------------------------------------------------
   Phones (≤480px): the card fills the width minus 16px gutters.
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) body {
    padding-left: 16px;
    padding-right: 16px;
  }
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) main {
    padding: 26px 20px 22px;
    border-radius: 24px;
  }
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="auth"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) h1 { font-size: 32px; }
  html[data-rr-page="auth"] h1 { font-size: 26px; }
  html[data-rr-page="404"] p.code { font-size: 76px; }
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="beta"], [data-rr-page="landing"], [data-rr-page="404"]) p.brand { margin-bottom: 24px; }
  /* Footnotes at classic's 12px: on the phone card's 318px measure the
     12.5px notes broke raggedly (gate's two sentences took four lines with
     one-word tails "the link." / "a month."). text-3 stays ≥5:1 on the tile. */
  html:is([data-rr-page="gate"], [data-rr-page="signin"], [data-rr-page="beta"], [data-rr-page="landing"]) main > .note {
    font-size: 12px;
    letter-spacing: -.003em;
  }
}
/* Phones that are also short (390×844): a slightly tighter vertical rhythm on
   signin, so the states that fit classic without a scroll (help opened, a
   notice plus an error, the local dev link in "Check your inbox") still fit.
   No type size or 44/48px target changes. After the phone block, which sets
   the card padding and the lockup gap this answers. */
@media (max-width: 480px) and (max-height: 860px) {
  html[data-rr-page="signin"] main {
    padding-top: 22px;
    padding-bottom: 18px;
  }
  html[data-rr-page="signin"] p.brand { margin-bottom: 18px; }
  /* "Your room. Your account." on one line at 28px in every state: it used
     to drop to 28px only while the session tile showed, so a signed-in
     phone user watched it flip 28 → 32px (two lines) → 28px on every return
     to the tab. */
  html[data-rr-page="signin"] h1 { font-size: 28px; }
  html[data-rr-page="signin"] .panel { margin-top: 20px; }
  html[data-rr-page="signin"] .divider { margin: 14px 0; }
  html[data-rr-page="signin"] details.help { margin-top: 14px; }
}
/* Short phones (iPhone SE/8 375×667, and the ~553px Safari leaves below its
   toolbars; 320×640): the desktop rhythm made the gate 86–141px taller than
   classic and pushed "Open the board" below the first screen. Here the gate
   and signin cards tighten their gaps, the headline steps down to 28px and
   the gate's fields to 44px; no target goes under 44px and nothing is
   hidden. The gate then fits 375×667 without a scroll (classic's own
   height) and its submit stays above a 553px fold, errors included. */
@media (max-width: 480px) and (max-height: 700px) {
  html:is([data-rr-page="gate"], [data-rr-page="signin"]) body {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  html:is([data-rr-page="gate"], [data-rr-page="signin"]) main {
    padding-top: 20px;
    padding-bottom: 18px;
  }
  html:is([data-rr-page="gate"], [data-rr-page="signin"]) p.brand { margin-bottom: 16px; }
  html:is([data-rr-page="gate"], [data-rr-page="signin"]) h1 { font-size: 28px; }
  html[data-rr-page="gate"] main > p#lede {
    margin-top: 10px;
    font-size: 14px;
  }
  html[data-rr-page="gate"] form#gate { margin-top: 18px; }
  html[data-rr-page="gate"] #gate :is(#nm, #pc) { height: 44px; }
  html[data-rr-page="gate"] #gate label + input + label { margin-top: 12px; }
  html[data-rr-page="gate"] #gate button[type=submit] { margin-top: 16px; }
  html:is([data-rr-page="gate"], [data-rr-page="signin"]) main > .note:last-child {
    margin-top: 18px;
    padding-top: 12px;
  }
  html[data-rr-page="signin"] .panel { margin-top: 18px; }
}


/* ---------------------------------------------------------------------------
   Forced colours (Windows High Contrast). The skin draws two cues that forced
   colours would erase: the help chevron is a mask painted with
   background-color (forced to Canvas, so it vanished along with the native
   marker it replaced), and the session / inbox tiles draw their edge with an
   inset box-shadow (removed) on border:0. The chevron keeps a system text
   colour; a transparent border is invisible normally and becomes a system
   border here, as classic's 1px .status/.done boxes. The decorative envelope
   and info glyphs follow the same pattern. The card light (gradients) and
   glows are dropped by the browser.
   ------------------------------------------------------------------------- */
@media (forced-colors: active) {
  html[data-rr-page="signin"] details.help > summary::after,
  html[data-rr-page="signin"] #authNotice::before,
  html[data-rr-page="signin"] #verification::before,
  html[data-rr-page="auth"] main > p#status::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
  html[data-rr-page="gate"] #signinLink::before,
  html[data-rr-page="gate"] main:has(> #gate[hidden]) #signinLink::before {
    forced-color-adjust: none;
    background-color: LinkText;
  }
  html[data-rr-page="signin"] :is(#session, #done, #verification) { border: 1px solid transparent; }
}