/* ==========================================================================
   Hotbox University — Polish (loaded last, on the front page and in the app)
   --------------------------------------------------------------------------
   The aesthetic director's file (round 39b). tokens.css, base.css and
   components.css hold the system; this file only brings the area stylesheets
   into line with it where they drifted, so the whole site reads as one hand.

   Rules for this file:
   - Every override names why. If an area's owner adopts the fix in their own
     file, delete the matching block here.
   - Same selector as the area rule (equal specificity, later file wins); never
     !important, never IDs, never layout (position, size, grid) beyond what a
     state needs. Color, ring, material and motion only.
   - Reduced motion is honored at the bottom.
   The system: research-reports/aesthetic-system.md.
   ========================================================================== */

/* ---- 1. One focus ring --------------------------------------------------
   These rooms gave keyboard focus the same look as hover and removed the
   outline, so a Tab user could not tell a focused tile from a hovered one (and
   on touch-sized tiles the hover glow is faint). They keep their hover glow;
   focus adds the site ring on top. (WCAG 2.4.7; audit section 3.) */
.dock a:focus-visible, .phonenav a:focus-visible, .phonenav button:focus-visible,
.tabs a:focus-visible, .chip:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }            /* game.css used plain white */
.plate:focus-visible, .tool-foot__next:focus-visible, .tool-head__lesson:focus-visible,
.supply:focus-visible, .tool-tab:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }          /* arsenal.css */
.lob__door:focus-visible, .pmenu a:focus-visible, .pin:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }   /* app.css */
a.reach:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }                                 /* crm.css */
.crm-table tr:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--focus); }                     /* crm.css: a row cannot take an outline in every engine; a lit left edge instead */
a.rail__door:focus-visible, .gate__skip:focus-visible, .gate__sound:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }  /* marketing.css */

/* ---- 2. White words sit on action blue -----------------------------------
   These pressed toggles and filled bubbles put white text on --volt (#3b82ff),
   3.6:1 at 12.8px: below AA (audit: "Her/Him toggles"). --action is 4.7:1 and
   is the same "chosen" blue the buttons and segments now use. */
.lob__sex button[aria-pressed="true"] { background: var(--action-fill); box-shadow: 0 0 14px rgba(var(--action-rgb), 0.55); }     /* app.css */
.lobby__sex button[aria-pressed="true"] { background: var(--action-fill); box-shadow: 0 0 14px rgba(var(--action-rgb), 0.55); }   /* marketing.css */
.seg button[aria-pressed="true"] { background: var(--action-fill); }                                         /* app.css */
.guide__msg--user { background: var(--action); }                                                             /* app.css: Ask Craig, your own message */
.msg--staff .msg__avatar { background: var(--action); }                                                      /* app.css */
.lob__soon { background: var(--action); }                                                                    /* app.css */

/* ---- 3. Glass, done once -------------------------------------------------
   The big room panel, the side panel and the HUD cards are the world's glass
   (game.css). They had the tint and blur but no light: no top highlight, no
   sheen, and a blur that greyed the photo under it. Same tint and border, plus
   saturation in the blur, a faint sheen from the top, and a 1px inner light,
   so the panel reads as a lit pane, not a dark sticker. */
body.game.is-panel .stage__view > .panel {
  background: var(--glass-sheen), var(--hu-panel);
  border-top-color: var(--glass-line-top);
  backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 100px -40px rgba(0, 0, 0, 0.9);
}
body.game .side { background: var(--glass-sheen), var(--hu-panel); border-top-color: var(--glass-line-top); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); }
.tabs, .chip { backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-top-color: rgba(190, 220, 255, 0.34); }

/* ---- 4. Press feedback ---------------------------------------------------
   The dock tiles and top tabs lift on hover but did nothing when pressed, so a
   tap on a phone felt dead. A short press-in (90ms) answers the finger. */
.dock a:active { transform: translateY(-2px) scale(0.97); transition-duration: var(--dur-press); }
.tabs a:active, .chip:active { transform: scale(0.96); transition-duration: var(--dur-press); }
.phonenav a:active, .phonenav button:active { transform: scale(0.94); transition: transform var(--dur-press) var(--ease-press); }

/* ---- 5. Reduced motion ----------------------------------------------------
   base.css already flattens durations; this also removes the lift and press
   offsets themselves so nothing moves at all. */
@media (prefers-reduced-motion: reduce) {
  .dock a:hover, .dock a:focus-visible, .dock a:active, .tabs a:hover, .tabs a:active, .chip:active,
  .phonenav a:active, .phonenav button:active, .plate:hover, .plate:focus-visible, .plate:active { transform: none; }
}


/* ---- 6. Targets: 24px for every standalone control (R39c, defects #55) ---------
   WCAG 2.2, 2.5.8. The words don't move or grow: the box gets taller around
   them. Shared parts (breadcrumbs, disclosures, faders) are in components.css;
   these are the area ones the sweep found at 17-22px. */
.ledger__head a { display: inline-flex; align-items: center; min-height: 24px; }        /* arsenal.css: "Open →" (22px) */
.start__facts a { display: inline-flex; align-items: center; min-height: 24px; }        /* course.css: the tool link on a lesson's start card (22px) */
.footer li a { display: inline-flex; align-items: center; min-height: 24px; }            /* marketing.css: footer links (17px) */
@media (max-width: 640px) {
  .tool-head__lessonlink { display: inline-flex; align-items: center; min-height: 24px; } /* arsenal.css: "Lesson 5.2 →" in a tool's crumbs (20px) */
}
/* The front page's slide dots are 6px bars; the room version already had a hit
   pad (rooms.css). Same pad here: 24px tall, the bar drawn as before. */
.feature__dots button { position: relative; }
.feature__dots button::before { content: ""; position: absolute; inset: -9px -3px; }

/* ---- 7. The 11px floor (R39c) ---------------------------------------------------
   Tracked caps had drifted to 9-10.6px (0.56-0.66rem) in the area files; at
   that size on a phone they are decoration, not words. Every one now sits on
   the floor (--t-3xs, 11px). Letter-spacing comes down a touch where the box
   is tight so the line still fits. Checked at 390 and 1440: nothing wraps or
   clips that didn't before. (The Operator Card's 5px microprint is aria-hidden
   decoration and stays.) */
.streak__l { font-size: var(--t-3xs); letter-spacing: 0.04em; }                         /* app.css 0.56rem */
.station__s { font-size: var(--t-3xs); }                                                  /* app.css 0.6rem */
.map__you span { font-size: var(--t-3xs); }                                               /* app.css */
.cards span { font-size: var(--t-3xs); letter-spacing: 0.1em; }                           /* game.css 0.62rem (lobby stat labels) */
.cards--6 span { font-size: var(--t-3xs); letter-spacing: 0.08em; }                       /* game.css 0.58rem */
.plate__flag { font-size: var(--t-3xs); }                                                 /* arsenal.css 0.62rem */
.leadbar .field > label, .youbar .field > label { font-size: var(--t-3xs); }              /* arsenal.css 0.62rem */
@media (max-width: 640px) { .ledger__stage span { font-size: var(--t-3xs); } }            /* arsenal.css 0.66rem */
.rstat span { font-size: var(--t-3xs); letter-spacing: 0.1em; }                           /* rooms.css 0.64rem / 0.58rem on phone */
.mlevel__title .label { font-size: var(--t-3xs); }                                        /* rooms.css 0.62rem */
.rtag { font-size: var(--t-3xs); }                                                        /* rooms.css 0.62rem */
.hub__when { font-size: var(--t-3xs); }                                                   /* rooms.css 0.66rem */
.unlock__card .opcard__stats span { font-size: var(--t-3xs); letter-spacing: 0.06em; }    /* rooms.css 0.62rem */
/* R40 (defects-r40 M14): the field labels of every tool form and the rest of the stragglers. */
.tool-form .field:not(.field--inline) > label, .pipeline .field:not(.field--inline) > label, .finder .field:not(.field--inline) > label,
.scripts .field:not(.field--inline) > label, .drawer .field:not(.field--inline) > label, .field > label.label { font-size: var(--t-3xs); letter-spacing: 0.1em; } /* app.css 0.62rem */
.lf__typeslabel, .lf__saved-label, .lf__th, .lf__chip-n, .tac__legend, .tac__corner { font-size: var(--t-3xs); }  /* finder.css / app.css 0.62-0.66rem */
.feature-card__status, .lob__soon, .inv__worn, .inv__state { font-size: var(--t-3xs); letter-spacing: 0.08em; } /* app.css / rooms.css 0.6-0.64rem */
.rtrack__here, .rsteps__when, .station__s, .rank__text small, .lob__stats span { font-size: var(--t-3xs); letter-spacing: 0.08em; } /* rooms.css / app.css 0.6-0.64rem */
.fleet__hour span { font-size: var(--t-3xs); }                                            /* app.css 0.52rem (the hour axis) */
.reach small, .seqcard__step small, .crm-table td::before, .grades__key, .bars__x, .guide__status, .reward__label { font-size: var(--t-3xs); } /* crm / study / guide 0.6-0.66rem */
.side a.is-locked .side__pct::before { font-size: var(--t-3xs); }                         /* app.css 0.6rem */
.opbadge__name, .opbadge__chapter, .cta__tag, .founding__label { font-size: var(--t-3xs); } /* landing.css 0.62-0.64rem */
@media (max-width: 380px) { .opbadge__name, .opbadge__chapter { letter-spacing: 0.06em; } }   /* the badge column is 137px at 360 */
.counter span { font-size: var(--t-3xs); letter-spacing: 0.08em; }                        /* landing.css 0.58rem */
.promise__seal { font-size: var(--t-3xs); letter-spacing: 0.08em; }                       /* marketing.css 0.56rem ("days" under the 2) */
.badge__meta { font-size: var(--t-3xs); }                                                 /* game.css 0.68rem (10.88) */
@media (max-width: 760px) { .dock a, .phonenav a, .phonenav button { font-size: var(--t-3xs); } }   /* game.css / landing.css 0.68rem */

/* ---- 8. One radius ladder (R39c) --------------------------------------------------
   4 tag · 8 key/control · 12 tile · 16 card · 22 panel. The area files had their
   own steps (6, 9, 10, 14, 18, 20), so two neighbors on one screen rounded
   differently (a 14px stat tile beside a 12px input; an 18px card inside a 22px
   panel). Same selectors as the area rules; nested parts shrink by the padding.
   Icon sockets (plate and tool-head icons) keep their own proportional radius. */
.tabs, .gtop__tabs { border-radius: var(--r-md); }                                        /* game.css / landing.css 14 */
.tabs a, .gtop__tabs a, .settings__nav a, .pmenu a, .pmenu button,
.scripts__item, .guide__msg, .quiz__feedback, .feature__btn, .side__replay,
.ledger__stage, .lv-row__n, .lv-resume__lvl, .lv-stop__img, .hud__equipped img,
.phonenav__more, .hub__gear img { border-radius: var(--r-sm); }                           /* 9 and 10 */
@media (max-width: 900px) { .phonenav a, .phonenav button { border-radius: var(--r-sm); } }
.cards a, .cards div, .badge, .hud__obj, .next-class, .rstat, .founding, .opbadge,
.pin__card, .tool-head__lesson, .warm, .lv-steps a, .match__tile, .room__react button,
.hall__screen, .map__list a { border-radius: var(--r-md); }                                             /* 14 */
.wing, .lv-resume, .tool-foot__next, .finish, .rhero, .lpanel, .chat, .room__screen,
.rwindow, .lv-brief { border-radius: var(--r-lg); }                                       /* 18 (cards) */
body.game .lob, body.game .hub, body.game .hall, .palette__box,
.map, .nextmove, .ledger, .catalog__shelf { border-radius: var(--r-xl); }                 /* 18 and 20 (panels and sheets) */
.armory__keys kbd, .tool-foot__keys kbd, .leadbar kbd, .done__keys kbd, .rail__keys kbd,
.kbd, .plate__lesson, .explore__bar i { border-radius: var(--r-xs); }                     /* 6 (keys and tags) */

/* ---- 9. One focus ring, part two (R39c) -------------------------------------------
   The rooms and the lobby HUD drew focus as a plain white box; everywhere else
   it is the ice ring. Same selectors as rooms.css / game.css / app.css. */
.rstat:focus-visible, .rnext:focus-visible, .rshelf__item:focus-visible, a.patchrow:focus-visible,
.mrow__hit:focus-visible, .mrow__door:focus-visible, .rchip:focus-visible, .inv__slot:focus-visible,
.help__q summary:focus-visible, .bar__btn:focus-visible, .bar__react button:focus-visible, .pew:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
body.game .feature__dots button:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.badge__name:focus-visible, .feature__link:focus-visible, .hud__more:focus-visible, .hud__cta:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.pin:focus-visible .pin__label { outline: var(--focus-ring); outline-offset: 2px; }

/* ---- 10. Glass only on the navigation layer (R39c, visual playbook) ---------------
   Apple's rule: never glass on glass; things that sit on glass get fills. Three
   places stacked a second blur inside the room panel: the Map's pin labels, the
   Scorecard's sticky phone summary, and the award overlay (which also used the
   retired graphite black). They become solid navy fills; the overlay becomes a
   navy dimming scrim, which is what a full-screen layer over content should be. */
.pin__label { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 16, 39, 0.9); }   /* app.css */
@media (max-width: 640px) { .uw-mini { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8, 18, 42, 0.98); } } /* scorecard.css */
.award { background: rgba(3, 8, 20, 0.84); }                                                               /* app.css (was rgba(11,11,14,.78)) */
/* Words straight on the photo need a dimming layer (playbook rule 3). The front
   page's left veil faded out at 40% while the hero paragraph runs to ~28%, so the
   line ends sat on bright castle stone (2.2:1 at worst). The veil now holds its
   dim under the whole text column, then falls off the same way. */
@media (min-width: 761px) {
  .screen__veil { background: linear-gradient(90deg, rgba(6, 16, 39, 0.86) 0, rgba(6, 16, 39, 0.7) 22%, rgba(6, 16, 39, 0.36) 32%, rgba(6, 16, 39, 0) 44%), linear-gradient(180deg, rgba(6, 16, 39, 0.45), transparent 16%); }   /* landing.css */
}

/* ---- 11. Reduced transparency and more contrast (visual playbook rule 4) ----------
   Someone who has asked the OS for less transparency gets solid navy panels with
   a clear border; someone who asked for more contrast gets the same plus brighter
   hairlines and dim text lifted toward white. */
@media (prefers-reduced-transparency: reduce) {
  body.game.is-panel .stage__view > .panel, body.game .side, .tabs, .chip, .dock a, .phonenav,
  .badge, .hud__welcome, .presence, .feed, .hud__more, .guide__toggle, .head, .topbar.is-scrolled, .sticky-cta {
    background: #0b1a3a; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255, 255, 255, 0.3);
  }
}
@media (prefers-contrast: more) {
  :root { --fg-dim: #dde4f3; --fg-faint: #b9c3dc; --rule: rgba(200, 225, 255, 0.28); --rule-strong: rgba(220, 235, 255, 0.45); }
  body.game.is-panel .stage__view > .panel, body.game .side, .tabs, .chip, .dock a, .phonenav, .card, .badge, .hud__welcome {
    background: #071330; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255, 255, 255, 0.5);
  }
}

/* ---- 12. One lift (R39c, playbook: "dock hover lifts 2px, never bounces") ------
   Tiles and doors rose 3-4px on hover in six files, the dock 4px, the lesson
   cards 1-2px: the same gesture answered differently room to room. Everything
   you can walk into now rises 2px. Glow and border light are unchanged. */
.dock a:hover, .dock a:focus-visible, body.game .dock .guide__toggle:hover, body.game .dock .guide__toggle:focus-visible,
.lob__door:hover, .lob__door:focus-visible, .wing:hover, .wing.is-on, .plate:hover, .plate:focus-visible,
.tool-foot__next:hover, .tool-foot__next:focus-visible, .cards a:hover, a.rshelf__item:hover,
a.rail__door:hover, a.rail__door:focus-visible { transform: translateY(-2px); }
.dock a:active { transform: translateY(-2px) scale(0.97); }   /* re-stated after the hover rule so the press still shows */
.plate:active { transform: translateY(-2px) scale(0.98); }     /* arsenal.css press, same reason */
@media (prefers-reduced-motion: reduce) {
  .dock a:hover, .dock a:focus-visible, body.game .dock .guide__toggle:hover, body.game .dock .guide__toggle:focus-visible,
  .lob__door:hover, .lob__door:focus-visible, .wing:hover, .wing.is-on, .plate:hover, .plate:focus-visible,
  .tool-foot__next:hover, .tool-foot__next:focus-visible, .cards a:hover, a.rshelf__item:hover,
  a.rail__door:hover, a.rail__door:focus-visible, .dock a:active, .plate:active { transform: none; }
}

/* ---- Coordinator (round 39b) ---------------------------------------------- */
/* A route that takes a moment: a thin action-blue line runs along the top (main.js routing()). */
body.is-routing::after { content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 40%; z-index: 200; background: linear-gradient(90deg, transparent, var(--action, #1a6cf5), transparent); animation: routing-run 900ms var(--ease, ease) infinite; pointer-events: none; }
@keyframes routing-run { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { body.is-routing::after { animation: none; width: 100%; opacity: 0.6; } }
/* Focus moves to the page heading on every route change for screen readers; it is not a control, so no ring. */
.view-head h1:focus, #view h1[tabindex="-1"]:focus { outline: none; }
/* The sync chip when the account is behind. */
.sync-chip.is-error .sync-chip__dot { background: #f5a524; box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.25); }
/* Toast with one action (lib/dom.js toast(msg, { action })): the Undo pattern. */
.toast--action { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.toast__action { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(156, 202, 255, 0.55); background: transparent; color: #9ccaff; font: inherit; font-weight: 700; cursor: pointer; }
.toast__action:hover { background: rgba(156, 202, 255, 0.14); color: #fff; }

/* Round 40 coordinator: sealed lesson rows (preview tier) read as locked, not broken. */
.lesson-row.is-sealed { border-style: dashed; }
.lesson-row.is-sealed .lesson-row__title { color: var(--fg-dim); }
.lesson-row.is-sealed .lesson-row__state { color: var(--hu-blue-400); letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }

/* R40: on the 11px floor the fleet's 24 hour labels collide below 1100px wide; there only every third bar keeps its label. */
@media (max-width: 1100px) { .fleet__hour:not(:nth-child(3n+1)) span { visibility: hidden; } }