/* ==========================================================================
   Hotbox University — Components
   Surfaces, grouped lists, the receipt, buttons, pills, readouts, progress,
   forms, tables, callouts, toast. Depends on tokens.css and base.css.
   R39b: buttons, segments, chips and toggles share action blue for "chosen";
   one focus ring; press and lift timings from the tokens' ladder.
   ========================================================================== */

/* ---- Surface ("card"): one tonal step up, an edge lit from above (a gradient
   hairline), a 1px inner light, and a layered shadow that agrees with the light. ---- */
.card, .panel, .group, .reasons, .timeline, .includes, .faq, .person, .col, .venues, .table-wrap, .lead, .drawer, .script, .price__guarantee, .callout--objective {
  border: 1px solid transparent;
  background-image: linear-gradient(var(--surface, var(--bg-1)), var(--surface, var(--bg-1))), var(--hairline);   /* not --edge: see tokens.css */
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.card {
  position: relative;
  --surface: var(--bg-1);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}
.card--raised { --surface: var(--bg-2); box-shadow: var(--shadow-float); }
.card--tight { padding: var(--s-4); }
.card--flush { padding: 0; overflow: hidden; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
a.card { color: var(--fg); text-decoration: none; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease), border-color var(--dur-fast); }
@media (hover: hover) { a.card:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow-float); transform: translateY(-2px); } }
a.card:active { transform: scale(0.99); transition-duration: var(--dur-press); }

/* ---- Spotlight: a cursor-following light on the border and the surface (marketing/main.js sets --mx/--my). ---- */
.spot { position: relative; isolation: isolate; }
.spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-med) var(--ease); }
.spot::before { inset: -1px; padding: 1px; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--neon-rgb), 0.9), transparent 55%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; z-index: 1; }
.spot::after { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.07), transparent 60%); z-index: 0; }
@media (hover: hover) { .spot:hover::before, .spot:hover::after { opacity: 1; } }
.spot > * { position: relative; z-index: 2; }

/* ---- Grouped list: rows in one soft container, hairlines inset from the left. ---- */
.group { display: grid; --surface: var(--bg-1); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.group--floor { background: var(--bg-1); border-color: transparent; }
.group > * { margin: 0; }
.group > * + * { border-top: 1px solid var(--rule); }
.group__row { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); }

/* ---- The receipt: thermal paper, typewriter print, torn bottom edge ---- */
.receipt {
  position: relative;
  width: 100%;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 1.4rem 1.3rem 2rem;
  border-radius: 2px 2px 0 0;
  box-shadow: var(--shadow-paper);
  /* fine paper grain */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* torn edge */
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M0 0 L8 10 L16 0 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% calc(100% - 10px), 16px 10px;
  -webkit-mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M0 0 L8 10 L16 0 Z' fill='black'/></svg>");
  mask-size: 100% calc(100% - 10px), 16px 10px;
  mask-position: top, bottom;
  mask-repeat: no-repeat, repeat-x;
}
.receipt__title { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }
.receipt__meta { color: var(--paper-faint); margin-top: 0.15rem; }
.receipt__rule { border: 0; border-top: 1px dashed rgba(29, 31, 34, 0.35); margin: 0.7rem 0; }
.receipt__rule--double { border-top: 3px double rgba(29, 31, 34, 0.5); }
.receipt__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.12rem 0; }
.receipt__row span:last-child { font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; }
.receipt__row--sub { color: #4a4d52; }
.receipt__row--total { font-weight: 700; }
.receipt__row--hero { font-weight: 700; font-size: 1.05rem; margin-top: 0.3rem; }
.receipt__note { color: var(--paper-faint); font-size: 0.78rem; margin-top: 0.6rem; }
/* Print-on-load: rows appear top to bottom (marketing/main.js adds .is-printing). */
.receipt.is-printing .receipt__row, .receipt.is-printing .receipt__rule, .receipt.is-printing .receipt__note, .receipt.is-printing .receipt__title, .receipt.is-printing .receipt__meta { animation: print 240ms steps(2, end) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes print { from { opacity: 0; } to { opacity: 1; } }

/* ---- Chrome type: the brand's steel, as a gradient through the letters ---- */
.chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---- Dot-matrix numerals: serials, levels, counters (the machine's own display) ---- */
.dot-num { font-family: var(--font-dot); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
/* ---- Lit text: a word that carries the volt light. Used on one or two words a page, never a sentence. ---- */
.lit { color: var(--neon); text-shadow: 0 0 10px rgba(var(--neon-rgb), 0.55), 0 0 32px rgba(var(--neon-rgb), 0.22); animation: lit 3.4s ease-in-out infinite alternate; }
@keyframes lit { from { text-shadow: 0 0 10px rgba(var(--neon-rgb), 0.55), 0 0 32px rgba(var(--neon-rgb), 0.22); } to { text-shadow: 0 0 14px rgba(var(--neon-rgb), 0.8), 0 0 44px rgba(var(--neon-rgb), 0.35); } }
/* ---- The streak LEDs: seven days, lit when something got done ---- */
.streak__week { display: inline-flex; gap: 4px; }
.streak__week i { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-3); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.streak__week i.is-on { background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.8); }
.streak__week i.is-today:not(.is-on) { box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.6); }
@media (prefers-reduced-motion: reduce) { .lit { animation: none; } }

/* ---- The Operator Card: a holo trading card, the thing you win. Vended on the
   landing page, carried in the course (lib/card.js builds it from live numbers).
   Foil only here. ---- */
.opcard { position: relative; width: 100%; aspect-ratio: 63 / 88; perspective: 900px; }
.opcard__rotator { position: relative; width: 100%; height: 100%; border-radius: var(--r-lg); overflow: hidden; transform: rotateX(var(--ry, 0deg)) rotateY(calc(var(--rx, 0deg) + var(--flip, 0deg))); transform-style: preserve-3d; transition: transform 520ms var(--ease-out); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), var(--shadow-lg), 0 40px 80px -30px rgba(0, 0, 0, 0.9); background: #16161b; }
.opcard__face { position: absolute; inset: 0; padding: 18px 20px 16px; display: grid; grid-template-rows: auto 1fr auto auto auto auto; gap: 6px; align-content: start; background: linear-gradient(165deg, #26262e 0%, #141418 48%, #1d1d24 100%); }
/* fine foil lines across the whole face */
.opcard__face::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.9;
  /* carbon weave: two diagonal twills, low contrast, the material under the foil */
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 6px);
  background-size: 8px 8px, 8px 8px; }
.opcard__face::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px; pointer-events: none; }
.opcard__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.opcard__serial { font-size: var(--t-xs); color: var(--volt); letter-spacing: 0.08em; }
/* The art: the operator standing on a lit stage. The figure is the member's rank (operator-1..5.png); the pips under the stage are the five ranks. */
.opcard__art { position: relative; place-self: stretch; min-height: 0; display: grid; justify-items: center; align-items: end; margin-block: 2px; overflow: hidden; border-radius: 12px; background: var(--scene, none) center 35% / cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.opcard__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 6, 13, 0.3), transparent 30%, transparent 60%, rgba(4, 6, 13, 0.85)); pointer-events: none; }
.opcard__stage { position: absolute; left: 12%; right: 12%; bottom: 6px; height: 12%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(var(--neon-rgb), 0.55), rgba(var(--neon-rgb), 0.12) 45%, transparent 70%); filter: blur(2px); }
.opcard__art::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 10px; height: 5%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.55), 0 0 24px rgba(var(--neon-rgb), 0.35); }
.opcard__op { position: absolute; left: 50%; bottom: 4px; z-index: 1; height: calc(100% - 4px); width: auto; max-width: 80%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 24px rgba(var(--neon-rgb), 0.16)); transform: translateX(-50%); }
.opcard__tiers { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; }
.opcard__tiers i { width: 14px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.opcard__tiers i.is-on { background: var(--volt); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.8); }
.opcard__op { transition: transform 400ms var(--ease-out); } .opcard:hover .opcard__op { transform: translateX(-50%) scale(1.03); }
.opcard__name { font-stretch: var(--signage-stretch); font-weight: 800; font-size: 2.9rem; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.opcard__sub { font-size: var(--t-xs); color: var(--fg-dim); }
.opcard__stats { list-style: none; margin: 6px 0 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.opcard__stats li { min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; gap: 1px 6px; margin: 0; }
.opcard__stats img { grid-row: 1 / 3; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(var(--neon-rgb), 0.5)); }
.opcard__stats b { font-size: 1.9rem; line-height: 1; color: var(--volt); font-weight: 800; font-stretch: var(--signage-stretch); letter-spacing: -0.02em; }
.opcard__stats span { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.opcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.opcard__holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
/* The foil: a rainbow that moves with the pointer, blended into the dark face. */
.opcard__shine { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(110deg, #ff5acd 0%, #ffd166 5%, #c8ff4a 10%, #7df9ff 15%, #b48cff 20%, #ff5acd 25%); background-size: 400% 400%; background-position: var(--bx, 50%) var(--by, 50%); mix-blend-mode: color-dodge; filter: brightness(0.55) contrast(1.5) saturate(0.85); opacity: 0.32; transition: opacity var(--dur-med) var(--ease); }
.opcard__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(farthest-corner circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.5) 8%, rgba(255, 255, 255, 0.18) 26%, rgba(0, 0, 0, 0.35) 90%); mix-blend-mode: overlay; opacity: 0.5; transition: opacity var(--dur-med) var(--ease); }
.opcard.is-live .opcard__shine { opacity: 0.75; }
.opcard.is-live .opcard__glare { opacity: 0.85; }
.opcard.is-live .opcard__rotator { transition-duration: 120ms; }
/* Idle: the foil drifts on its own, like the card catching light on a shelf. */
.opcard:not(.is-live) .opcard__shine { animation: foil 9s ease-in-out infinite alternate; }
@keyframes foil { from { background-position: 30% 30%; } to { background-position: 70% 70%; } }
@media (prefers-reduced-motion: reduce) { .opcard__shine { animation: none; } .opcard__rotator { transition: none; } }

/* ---- The ruler: an engraved scale. Minor ticks every 8px, a major every 40px.
   The one ornament that repeats across the build, the way a cornice repeats. ---- */
.ruler { display: block; height: 10px; width: 100%; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.42) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px); background-size: 40px 10px, 8px 5px; background-repeat: repeat-x; background-position: 0 0, 0 5px; border-top: 1px solid var(--rule-strong); }
.ruler--accent { background-image: linear-gradient(90deg, rgba(var(--neon-rgb), 0.7) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--neon-rgb), 0.28) 1px, transparent 1px); border-top-color: rgba(var(--neon-rgb), 0.45); }
.volt .ruler { background-image: linear-gradient(90deg, rgba(11, 11, 14, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 11, 14, 0.22) 1px, transparent 1px); }

/* ---- Microprint: the banknote border, text too small to read until you lean in ---- */
.micro { position: absolute; left: 14px; right: 14px; overflow: hidden; white-space: nowrap; font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.28); pointer-events: none; line-height: 1; }
.micro--top { top: 5px; } .micro--bottom { bottom: 5px; }

/* ---- Cut corner: one chamfer at the top right, the way instrument bezels are cut. Applied by role, never everywhere. ---- */
.cut { position: relative; }
.cut::after { content: ""; position: absolute; top: -1px; right: -1px; width: 0; height: 0; border-style: solid; border-width: 0 14px 14px 0; border-color: transparent var(--bg-0) transparent transparent; pointer-events: none; z-index: 3; }
.cut--lg::after { border-width: 0 22px 22px 0; }

/* ---- Wordmark ---- */
.wordmark { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 700; font-stretch: var(--display-stretch); font-size: 1.05rem; letter-spacing: -0.02em; text-decoration: none; color: var(--fg); white-space: nowrap; }
.wordmark:hover { text-decoration: none; }
.wordmark__logo { width: 40px; height: 40px; border-radius: 0; flex: none; display: block; object-fit: contain; box-shadow: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); --x: 0 0 0 1px rgba(var(--neon-rgb), 0.35), 0 0 18px rgba(var(--neon-rgb), 0.35); }
.wordmark__logo--lg { width: 52px; height: 52px; }

/* ---- Buttons: glass pills with a keycap edge. ----
   R39b, one family in three sizes (36 / 46 / 54) and three weights:
   - primary: action blue (tokens --action-fill), white label at AA, lit from above,
     a soft blue bloom and a light that runs the border once on hover;
   - default: navy glass with a hairline brighter on top (the world's panels, small);
   - ghost: text until hovered.
   Every one lifts 1px on hover, presses to 97% in 90ms and eases back, shows the
   site focus ring, and holds still under reduced motion. */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  font: inherit; font-weight: 600; font-size: var(--t-sm); letter-spacing: 0; line-height: 1.2;
  color: var(--fg);
  background: rgba(144, 195, 255, 0.08);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-top);
  border-radius: var(--r-pill);
  box-shadow: var(--keycap), var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease);
}
.btn > svg, .btn > img { flex: none; }
.fog .btn { background: rgba(255, 255, 255, 0.7); color: var(--fg); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-color: rgba(144, 195, 255, 0.15); border-color: rgba(144, 195, 255, 0.34); border-top-color: rgba(200, 225, 255, 0.5); text-decoration: none; transform: var(--lift); }
  .fog .btn:hover { background: #ffffff; }
}
.btn:active { transform: var(--press); transition-duration: var(--dur-press); transition-timing-function: var(--ease-press); }
.btn--primary, .btn--accent {
  color: var(--on-accent);
  background: var(--action-fill);
  border-color: var(--action-bottom); border-top-color: color-mix(in srgb, var(--action-top), #ffffff 35%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px -8px rgba(var(--action-rgb), 0.7);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 20, 70, 0.25);
}
/* The light that runs the border on hover. */
.btn--primary::after, .btn--accent::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--angle), transparent 0 72%, rgba(255, 255, 255, 0.9) 86%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity var(--dur-med) var(--ease); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--accent:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--action-top), #ffffff 8%), var(--action-hover) 55%, var(--action)); border-color: var(--action-bottom); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 28px -10px rgba(var(--action-rgb), 0.9); }
  .btn--primary:hover::after, .btn--accent:hover::after { opacity: 0.85; animation: beam 1.6s linear infinite; }
}
.btn--primary:active, .btn--accent:active { box-shadow: inset 0 1px 2px rgba(0, 10, 40, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3); }
@keyframes beam { to { --angle: 360deg; } }
.btn--ghost { background: transparent; border-color: transparent; color: var(--fg-dim); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { color: var(--fg); background: rgba(144, 195, 255, 0.08); border-color: transparent; } .fog .btn--ghost:hover { background: rgba(15, 20, 36, 0.06); } }
.btn--sm { min-height: 36px; padding: 0.35rem 0.95rem; font-size: var(--t-xs); gap: 6px; }
/* Small buttons keep a comfortable hit area on touch screens: 36 + 2x5 = 46px tall.
   R39b fix: this used to be inset: -6px on all four sides, so the invisible pad stuck
   6px past the button's right edge, scrollWidth grew by 6, and the layout check read
   every .btn--sm as "6px wider than its box" (and it could nudge a tight row sideways).
   Now it extends only up and down, and only for coarse pointers, where it is needed. */
@media (pointer: coarse) { .btn--sm::before { content: ""; position: absolute; inset: -5px 0; border-radius: inherit; } }
.btn--lg { min-height: 54px; padding: 0.9rem 1.8rem; font-size: var(--t-md); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; filter: saturate(0.6); box-shadow: none; }
.btn[disabled]::after, .btn[aria-disabled="true"]::after { display: none; }
.btn:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active, a.card:hover { transform: none !important; } .btn--primary:hover::after, .btn--accent:hover::after { animation: none; opacity: 0; } }

/* Text link with a chevron, for the second action beside a button. */
.link { color: var(--neon-hot); text-decoration: none; font-weight: 500; display: inline-block; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Pills: soft fills, no borders ---- */
.pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.3em 0.7em;
  font-size: var(--t-2xs); font-weight: 600; font-stretch: var(--wide-stretch);
  color: var(--fg-dim);
  background: var(--bg-3);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-top);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pill--accent { color: var(--neon-hot); background: var(--accent-soft); }
.pill--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pill--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill--bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }

/* ---- Readouts and KPIs (printed numbers) ---- */
.readout { display: grid; gap: var(--s-1); }
.readout__value { font-family: var(--font-mono); font-size: clamp(var(--t-xl), 3vw, var(--t-2xl)); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.readout__value--accent { color: var(--neon-hot); }
.readout__value--bad { color: var(--bad); }
.kpi { display: grid; gap: var(--s-1); min-width: 0; }
.kpi__v { font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi__v--accent { color: var(--neon-hot); }

/* ---- Progress ---- */
.bar { height: 4px; background: var(--bg-3); border-radius: var(--r-pill); overflow: hidden; }
.bar__fill { height: 100%; width: 0; background: var(--neon); border-radius: var(--r-pill); box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.7); transition: width var(--dur-slow) var(--ease-out); }
.ring { position: relative; width: 64px; height: 64px; flex: none; }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring__tick { stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.8; }
.ring__tick--major { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.1; }
.ring__tick--red { stroke: rgba(var(--neon-rgb), 0.55); }
.ring__track { fill: none; stroke: var(--bg-3); stroke-width: 3.5; stroke-linecap: butt; }
.ring__redline { fill: none; stroke: rgba(var(--neon-rgb), 0.28); stroke-width: 3.5; }
.ring__fill { fill: none; stroke: var(--neon); stroke-width: 3.5; stroke-linecap: butt; transition: stroke-dashoffset var(--dur-slow) var(--ease-out); filter: drop-shadow(0 0 4px rgba(var(--neon-rgb), 0.7)); }
.ring.is-redline .ring__fill { stroke: #ffffff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)); }
.ring__label { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t-xs); color: var(--fg); padding-top: 2px; }

/* ---- Forms: filled fields, no borders, a blue ring on focus ---- */
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--t-sm); font-weight: 500; color: var(--fg-dim); }
.field__hint { font-weight: 400; color: var(--fg-faint); }
.input, .select, textarea.input {
  width: 100%; min-height: 46px;
  padding: 0.6rem 0.9rem;
  font: inherit; font-family: var(--font-sans); font-size: var(--t-md); font-variant-numeric: tabular-nums slashed-zero;   /* R39c: words in sans (a search for a name read as code in mono); numbers below */
  color: var(--fg); background: var(--bg-0);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: background var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.fog .input, .fog .select, .fog textarea.input { background: var(--bg-0); box-shadow: none; }
.input::placeholder { color: var(--fg-faint); }
.select { font-family: var(--font-sans); }
.input[type="number"], .input[inputmode="decimal"], .input[inputmode="numeric"] { font-family: var(--font-mono); }   /* figures keep the instrument face */
textarea.input { min-height: 72px; resize: vertical; font-family: var(--font-sans); }
/* Fields take a halo instead of the offset ring: the blue line sits on the field's own edge. */
.input:focus-visible, .select:focus-visible, .input:focus, .select:focus { outline: none; border-color: var(--volt); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), var(--focus-halo); }
.input[aria-invalid="true"] { border-color: var(--red); }
.input:disabled, .select:disabled { opacity: 0.55; cursor: not-allowed; }
.select { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%), linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field--inline { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; }
.field--inline > label { color: var(--fg); font-weight: 500; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; --surface: var(--bg-1); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
th, td { padding: 0.75rem 0.95rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); background: var(--bg-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Callouts (lesson blocks) ---- */
.callout { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--line); }
.callout__title { display: block; margin-bottom: var(--s-3); font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-dim); }
.callout--objective { --surface: var(--bg-2); box-shadow: var(--shadow-card); }
.callout--action { background: linear-gradient(180deg, rgba(var(--neon-rgb), 0.10), rgba(var(--neon-rgb), 0.04)); }
.callout--action .callout__title { color: var(--neon-hot); }
.callout--note { color: var(--fg-dim); }

/* ---- Segmented control ---- */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-md); }
.segmented button { font: inherit; font-size: var(--t-sm); font-weight: 500; padding: 0.4rem 0.9rem; background: transparent; color: var(--fg-dim); border: 0; border-radius: calc(var(--r-md) - 4px); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.segmented button.is-on { background: var(--bg-3); color: var(--fg); box-shadow: var(--keycap), var(--shadow-sm); }

/* ---- Ordered list for real sequences (steps, phases) ---- */
.index-list { list-style: none; padding: 0; margin: 0; display: grid; }
.index-list > li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line); margin: 0; }
.index-list > li:last-child { border-bottom: 1px solid var(--line); }
.index-list__n { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-md); line-height: 1.4; color: var(--neon-hot); font-variant-numeric: tabular-nums; }
.index-list h4 { margin-bottom: var(--s-2); }
.index-list p { color: var(--fg-dim); max-width: 60ch; }

/* ---- Toast: glass, an LED dot, enters from 95% ---- */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.7rem 1.1rem; font-size: var(--t-sm); font-weight: 600;
  background: rgba(10, 25, 58, 0.86); color: var(--white); border-radius: var(--r-pill);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-top);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg); z-index: 50;
  animation: toast-in var(--dur-med) var(--ease-out);
}
.toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.9); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.96); } }
.fog .toast { background: rgba(255, 255, 255, 0.85); color: var(--ink); }

/* ==========================================================================
   Instruments: numbers colored by meaning (tokens.css, "Meaning")
   --------------------------------------------------------------------------
   A plain number is instrument white and lit. Money in is green, money out is
   red, a verdict is volt. Edge-lights put the same meaning on a panel.
   ========================================================================== */
.num { color: var(--instrument); text-shadow: var(--instrument-glow); font-variant-numeric: tabular-nums; }
.num--in, .in { color: var(--money) !important; text-shadow: 0 0 10px rgba(var(--money-rgb), 0.35); }
.num--out, .out { color: var(--red) !important; text-shadow: 0 0 10px rgba(var(--red-rgb), 0.35); }
.num--verdict { color: var(--neon-hot) !important; text-shadow: 0 0 10px rgba(var(--neon-rgb), 0.35); }
.num--quiet { color: var(--fg-dim); text-shadow: none; }     /* a count that is not the point (a column tally) */
.kpi__v, .stat__value, .week__v { color: var(--instrument); text-shadow: var(--instrument-glow); }
.kpi__v--accent { color: var(--neon-hot); }

/* Edge-light: one lit edge on a panel, colored by what the panel says. */
.lit-edge { position: relative; }
.lit-edge::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 2px; border-radius: 2px; background: var(--edge-color, var(--neon)); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--edge-color, var(--neon)) 55%, transparent); pointer-events: none; }
.lit-edge--volt { --edge-color: var(--neon); }
.lit-edge--money { --edge-color: var(--money); }
.lit-edge--red { --edge-color: var(--red); }
.lit-edge--white { --edge-color: var(--instrument); }
.lit-edge--dim { --edge-color: var(--fg-faint); }
.lit-edge--dim::before { box-shadow: none; }

/* Pills follow the palette. */
.pill--ok { color: var(--money-hot); background: color-mix(in srgb, var(--money) 14%, transparent); }
.pill--bad { color: var(--red-hot); background: color-mix(in srgb, var(--red) 14%, transparent); }

/* The founding badge on the card: the first hundred carry it for life. */
.opcard__badge { font-family: var(--font-mono); font-size: var(--t-3xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-hot); padding: 2px 6px; border: 1px solid rgba(var(--neon-rgb), 0.45); border-radius: 3px; box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.25); white-space: nowrap; }

/* The card as a toy: tap, it flips. The reverse carries the member's own numbers. */
.opcard--flips { cursor: pointer; }
.opcard--flips .opcard__rotator { overflow: visible; }
.opcard--flips .opcard__face, .opcard__back { border-radius: var(--r-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.opcard--flips .opcard__face { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.opcard__back { position: absolute; inset: 0; padding: 18px 20px 16px; display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px; transform: rotateY(180deg); background: linear-gradient(165deg, #1b1b21 0%, #101014 50%, #17171d 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.opcard__back::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px; pointer-events: none; }
.opcard.is-flipped { --flip: 180deg; }
.opcard.is-flipped .opcard__shine, .opcard.is-flipped .opcard__glare { opacity: 0 !important; }
.opcard.is-flipped .opcard__rotator { transition-duration: 640ms; }
.opcard__bars { display: block; height: 34px; background: repeating-linear-gradient(90deg, var(--white) 0 2px, transparent 2px 4px, var(--white) 4px 5px, transparent 5px 9px, var(--white) 9px 12px, transparent 12px 14px, var(--white) 14px 15px, transparent 15px 20px); opacity: 0.85; border-radius: 2px; }
.opcard__kv { display: grid; gap: 8px; align-content: center; }
.opcard__kv div { display: grid; gap: 2px; }
.opcard__kv span { font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.opcard__kv b { font-family: var(--font-mono); font-size: var(--t-md); font-weight: 700; color: var(--instrument); text-shadow: var(--instrument-glow); overflow-wrap: anywhere; }
.opcard__kv b.in { color: var(--money); }
.home-card__hint { text-align: center; font-family: var(--font-mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-faint); margin-top: var(--s-3); }
.opcard--flips .opcard__shine, .opcard--flips .opcard__glare { border-radius: var(--r-lg); }

/* ==========================================================================
   Instruments (tools/form.js numberField): a stepper, a readout, a fader
   --------------------------------------------------------------------------
   The number is the readout, white and lit; the unit sits beside it; the
   buttons are keycaps; the fader is a thin track with a lit fill. One row per
   number, the same row everywhere.
   ========================================================================== */
.inst { display: grid; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.inst:last-child { border-bottom: 0; }
.inst__head label { font-size: var(--t-sm); font-weight: 500; color: var(--fg); }
.inst__ctl { display: grid; grid-template-columns: 40px 1fr 40px; gap: 6px; align-items: stretch; }
.inst__btn { height: 40px; border: 0; border-radius: var(--r-sm); background: var(--bg-2); color: var(--fg); font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; box-shadow: var(--keycap), var(--shadow-sm); transition: transform 120ms var(--ease-out), background 120ms; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.inst__btn:hover { background: var(--bg-3); }
.inst__btn:active { transform: scale(0.94); background: var(--bg-3); }
.inst__btn:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.inst__read { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 40px; padding: 0 10px; border-radius: var(--r-sm); background: var(--bg-0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 120ms; }
.inst__read:focus-within { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(var(--neon-rgb), 0.6), 0 0 0 3px var(--accent-soft); }
.inst__value { width: 100%; min-width: 0; max-width: 9ch; border: 0; background: transparent; color: var(--instrument); text-shadow: var(--instrument-glow); font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; padding: 0; }
.inst__value::-webkit-outer-spin-button, .inst__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inst__value:focus { outline: none; }
.inst__unit { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 700; color: var(--fg-faint); letter-spacing: 0.04em; }
.inst--money .inst__unit:first-child { color: var(--money); }
.inst--pct .inst__unit { color: var(--neon-hot); }
.inst__fader { -webkit-appearance: none; appearance: none; width: 100%; height: 24px;   /* R39c: 24px hit area (WCAG 2.5.8); the 3px track and thumb draw the same */ margin: 0; background: transparent; cursor: pointer; --pct: 0%; }
.inst__fader::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--neon) var(--pct), var(--bg-3) var(--pct)); }
.inst__fader::-moz-range-track { height: 3px; border-radius: 2px; background: var(--bg-3); }
.inst__fader::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--neon); }
.inst__fader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: var(--instrument); box-shadow: 0 0 0 2px var(--bg-0), 0 0 10px rgba(255, 255, 255, 0.35); transition: transform 120ms var(--ease-out); }
.inst__fader::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--instrument); box-shadow: 0 0 0 2px var(--bg-0), 0 0 10px rgba(255, 255, 255, 0.35); }
.inst__fader:active::-webkit-slider-thumb, .inst__fader:hover::-webkit-slider-thumb { transform: scale(1.25); }
.inst__fader:focus { outline: none; }
@media (hover: none) { .inst__fader { height: 28px; } .inst__fader::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7.5px; } }

/* Segmented control: a pill with a thumb that slides (the Apple one, in our materials). */
.segmented { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.segmented button { position: relative; z-index: 1; font: inherit; font-size: var(--t-sm); font-weight: 500; padding: 0.45rem 0.95rem; background: transparent; color: var(--fg-dim); border: 0; border-radius: var(--r-pill); cursor: pointer; transition: color 150ms, background 150ms, transform 120ms var(--ease-out); }
.segmented button:active { transform: scale(0.96); }
/* R39b: the chosen segment is action blue, the same "this one" the top tabs, the dock and every chip use. */
.segmented button.is-on, .segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: var(--action-fill); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 10px -4px rgba(var(--action-rgb), 0.8); }
@media (hover: hover) and (pointer: fine) { .segmented button:not(.is-on):not([aria-pressed="true"]):hover { color: var(--fg); background: rgba(144, 195, 255, 0.08); } }
.segmented button:focus-visible { outline-offset: 1px; }
.select { border-radius: var(--r-sm); background-color: var(--bg-0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06); border-color: transparent; }

/* Preset chips: one tap sets a known scenario. */
.tool-form__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.presets { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.preset { font: inherit; font-size: var(--t-xs); font-weight: 600; min-height: 30px; padding: 0.3rem 0.75rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--fg-dim); cursor: pointer; transition: color 120ms, border-color 120ms, transform 120ms var(--ease-out); }
.preset:hover { color: var(--fg); border-color: rgba(var(--neon-rgb), 0.5); }
.preset:active { transform: scale(0.96); }
.preset.is-on { color: #fff; background: var(--action-fill); border-color: var(--action-bottom); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 12px rgba(var(--action-rgb), 0.35); }

/* The lesson's callouts carry the four lights: what you'll be able to do (white), the numbers (green), do this now (volt), takeaways (white), check yourself (red: the gate). */
.callout { position: relative; }
.callout::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 2px; border-radius: 2px; background: var(--edge, transparent); box-shadow: 0 0 14px 1px color-mix(in srgb, var(--edge, transparent) 50%, transparent); }
.callout--objective { --edge: var(--instrument); }
.callout--note { --edge: var(--money); color: var(--fg); }
.callout--note .callout__title { color: var(--money-hot); }
.callout--action { --edge: var(--neon); }
.callout--takeaway { --edge: var(--instrument); }
.callout--check { --edge: var(--red); }
.callout--check .callout__title { color: var(--red-hot); }


/* ==========================================================================
   The console: slots and meters (tools/form.js slotField, slotSelect, meterField)
   ========================================================================== */
.console { gap: var(--s-4); }
.console__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-top: var(--s-2); }
.console__head:first-child { padding-top: 0; }
.console__hint { color: var(--fg-faint); white-space: nowrap; }
.console__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.console__meters { display: grid; gap: 2px; }
@media (max-width: 560px) { .console__grid { grid-template-columns: 1fr; } }

/* A slot: recessed, labeled inside, a machined corner mark, scan-blue when it is taking data. */
.slot { position: relative; display: grid; gap: 2px; min-height: 58px; padding: 9px 12px 8px; border-radius: var(--r-sm); background: var(--bg-0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06); cursor: text; transition: box-shadow 160ms var(--ease-out); }
.slot--wide { grid-column: 1 / -1; }
.slot__label { font-size: var(--t-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); font-family: var(--font-mono); transition: color 160ms; }
.slot__in { width: 100%; min-width: 0; min-height: 24px; border: 0; padding: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--t-md); line-height: 1.3; resize: vertical; text-overflow: ellipsis; }
.slot__in:focus { outline: none; }
.slot__in::placeholder { color: var(--steel-dim); opacity: 0.6; }
.slot__in--select { appearance: none; cursor: pointer; padding-right: 1.6rem; background-image: linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%), linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.slot__in--select option { background: var(--bg-1); color: var(--fg); }
.slot__corner { position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-top: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong); opacity: 0.6; transition: border-color 160ms, opacity 160ms; }
.slot.is-filled .slot__label { color: var(--fg-dim); }
.slot:focus-within { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(var(--scan-rgb), 0.7), 0 0 0 3px rgba(var(--scan-rgb), 0.14), 0 0 24px -8px rgba(var(--scan-rgb), 0.6); }
.slot:focus-within .slot__label { color: var(--scan); }
.slot:focus-within .slot__corner { border-color: var(--scan); opacity: 1; }

/* A meter: the label, the chosen level's words, and a bank of three segments lit to the level in its color. */
.meter { display: grid; grid-template-columns: minmax(0, 1fr) 132px; grid-template-areas: "head bank" "hint bank"; column-gap: var(--s-4); row-gap: 2px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.meter:last-child { border-bottom: 0; }
.meter__head { grid-area: head; display: flex; flex-wrap: wrap; gap: 2px var(--s-3); align-items: baseline; }
.meter__label { font-size: var(--t-sm); font-weight: 500; color: var(--fg); }
.meter__word { font-size: var(--t-xs); font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--fg-faint); transition: color 160ms; }
.meter__hint { grid-area: hint; font-size: var(--t-xs); color: var(--fg-faint); }
.meter__bank { grid-area: bank; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px; border-radius: var(--r-sm); background: var(--bg-0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.meter__seg { height: 28px; border: 0; border-radius: 3px; background: var(--bg-2); cursor: pointer; box-shadow: var(--keycap); transition: background 140ms, box-shadow 140ms, transform 120ms var(--ease-out); }
.meter__seg:hover { background: var(--bg-3); }
.meter__seg:active { transform: scale(0.95); }
.meter__seg:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.meter[data-tone="red"] { --m: var(--red); --m-rgb: var(--red-rgb); }
.meter[data-tone="white"] { --m: var(--instrument); --m-rgb: 255, 255, 255; }
.meter[data-tone="money"] { --m: var(--money); --m-rgb: var(--money-rgb); }
.meter__seg.is-on { background: rgba(var(--m-rgb), 0.28); box-shadow: var(--keycap), inset 0 0 0 1px rgba(var(--m-rgb), 0.35); }
.meter__seg.is-top { background: var(--m); box-shadow: var(--keycap), 0 0 14px rgba(var(--m-rgb), 0.55); }
.meter[data-tone] .meter__word { color: var(--m); }
@media (max-width: 480px) { .meter { grid-template-columns: 1fr; grid-template-areas: "head" "bank" "hint"; } }

/* The scan: when a reading is recomputed, a scan-blue line sweeps the output once. */
.is-scanning { position: relative; overflow: hidden; }
.is-scanning::before { content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 2px; z-index: 1; background: linear-gradient(90deg, transparent, var(--scan), transparent); box-shadow: 0 0 18px 2px rgba(var(--scan-rgb), 0.5); animation: scan-sweep 620ms var(--ease-inout) both; pointer-events: none; }
@keyframes scan-sweep { from { top: 0; opacity: 0; } 15% { opacity: 1; } to { top: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .is-scanning::before { animation: none; } }

/* Assumptions and rubric: a quiet disclosure under a reading. */
.assume { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--fg-dim); }
.assume summary { cursor: pointer; list-style: none; color: var(--fg-faint); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-2xs); }
.assume summary::before { content: "+ "; color: var(--scan); }
.assume[open] summary::before { content: "− "; }
.assume ul { margin: var(--s-2) 0 0; padding-left: 1.1em; display: grid; gap: 4px; }

/* ---- The operator picker, the inventory, the battle pass (under the card on Home) ---- */
.oppick { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }
.oppick__sex { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.oppick__sex button { font: inherit; font-size: var(--t-xs); font-weight: 700; color: var(--fg-dim); background: none; border: 0; padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; }
.oppick__sex button[aria-pressed="true"] { background: var(--action-fill); color: #fff; box-shadow: 0 0 14px rgba(var(--action-rgb), 0.5); }
.inv { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); }
.inv__head, .pass__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); }
.inv__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.inv__slot { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.inv__slot img { width: 78%; height: 78%; object-fit: contain; filter: grayscale(1) brightness(0.45); }
.inv__slot.is-on { background: rgba(var(--neon-rgb), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.7), 0 0 18px -4px rgba(var(--neon-rgb), 0.6); }
.inv__slot.is-on img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
.inv__at { position: absolute; right: 5px; bottom: 3px; font-size: 0.7rem; color: var(--fg-faint); }
.inv__next { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--fg-dim); }
.inv__next b { color: var(--fg); }
.pass { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: linear-gradient(160deg, rgba(var(--neon-rgb), 0.18), var(--bg-1) 60%); box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.35); }
.pass p { margin: 0; font-size: var(--t-sm); color: var(--fg-dim); }
.pass p b { color: var(--fg); }
.pass__soon { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); background: var(--action); color: #fff; }
.award__gear { width: 160px; height: 160px; object-fit: contain; filter: drop-shadow(0 0 30px rgba(var(--neon-rgb), 0.8)); animation: none; }

@media (max-width: 520px) { .opcard__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; } }
/* Every slot is the same square whatever the art's proportions (tall art like the watch must not stretch its row). */
.inv__slot { overflow: hidden; }
.inv__slot img { position: absolute; inset: 11%; width: 78%; height: 78%; }

/* ==========================================================================
   Targets (R39c, defects #55): every control a finger can hit is at least 24px
   tall (WCAG 2.2, 2.5.8). Inline links inside running text are exempt by the
   rule; these are the standalone ones that were 17-22px: breadcrumbs, the
   "How it is built" disclosures, the range faders above. The look does not
   change: the extra height is empty, centered space around the same words.
   ========================================================================== */
.crumbs { align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
/* A disclosure line with no padding of its own gets just enough above and below its one
   line of text to reach 24px, so the words stay centered (area rules with padding win). */
details > summary { min-height: 24px; padding-block: max(0px, (24px - 1lh) / 2); }