/* Extracted from play.html by tools/split_play.py — INFRA.
   Linked at the SAME position the <style> block occupied: this sheet's cascade order
   is load-bearing, including several deliberate late overrides. */

/* ⛔ MOBILE TAP TARGETS (Dave 2026-08-01: mobile is THE priority surface — the CEO plays on a
   phone in Spain). Measured at iPhone-13 width on six screens: every one carried controls below
   the 44px thumb minimum. Worst offenders were the DICE buttons at 30px — the very controls the
   CEO asked to be made MORE prominent — and the consent card's DECLINE/ACCEPT at 34px, which is
   a GDPR control that must be genuinely tappable, not just present.
   Components are named EXPLICITLY. No element catch-alls: a stack of those caused the beige-button
   defect (twice) and the seven-deep heading override that broke typography. */
@media (max-width: 480px){
  .pn-dice{ min-height:48px !important; padding-top:8px !important; padding-bottom:8px !important; }
  /* align-self:stretch did NOT inherit the sibling's new height — measured still 30px. Set it. */
  .pn-dice-q{ min-width:48px !important; width:48px !important; min-height:48px !important; }
  .pn-btn--sm{ min-height:44px !important; }
  .pn-btn--primary, .pn-btn--secondary{ min-height:48px !important; }
  .poap-dossier{ min-height:44px !important; }
  .hub-tab{ min-height:44px !important; }
  /* CARDS / TEAM SHEET are unclassed <button>s inside .mt-toggle. Scoped to that container —
     NOT written as a bare `button{}` rule, which is the catch-all pattern that has twice
     shipped defects here. */
  .mt-toggle button{ min-height:44px !important; }
  /* NOT touched: .lg-dot (12px). It is a design indicator Tracey sized deliberately, not a
     primary control — enlarging it would break the composition to satisfy a metric. Logged
     instead, so the exception is a decision on the record rather than an oversight. */
  .topbar .tb-btn{ min-height:44px !important; }
  #pn-consent .pnc-yes, #pn-consent .pnc-no{ min-height:48px !important; padding:12px 18px !important; }
  /* "Read the policy" was 19px — a link-sized target on a consent card. Give it a real box. */
  #pn-consent a{ display:inline-block; min-height:44px; line-height:44px; padding:0 4px; }
  .wr-back, .pn-back{ min-height:44px !important; }
  .rv-opt{ min-height:48px !important; }
}

/* CEO 08-13 ("Take me there button unresponsive") — the pn-pitch2 beat modal (#pnp2-beat) is the
   live pitch/work experience and carries its own primary action per beat. The war-room "Take me
   there" strip points at targets (#get-to-work, #prop…) that don't exist inside that modal, so the
   button was dead there. Timing-independent guard (the modal can open without a render() that would
   re-run pnNextMoveBar): whenever the beat dialog is in the DOM, the strip stands down. */
body:has(#pnp2-beat) #pn-nextmove{ display:none !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   CEO-59 · THE LEFT RAIL — "looks dated"
   ══════════════════════════════════════════════════════════════════════════════════════════
   What was actually wrong, item by item, rather than a restyle for its own sake:

   1. THE LABELS WERE 9.5px. The rail carried the smallest type in the game, under the 11px
      phone floor, on the one control every session touches. That is a legibility defect, not
      a taste call, and it is fixed first.
   2. THE SELECTED STATE WAS A BOTTOM UNDERLINE. `inset 0 -2px 0` is a horizontal-tab idiom.
      Stacked vertically it reads as a stray rule under one item, not as "you are here". In a
      vertical rail the marker belongs on the LEADING edge, which is where the eye enters.
   3. SEVEN TABS, NO STRUCTURE. An undifferentiated stack is a list of links. Three hairlines
      group it into YOUR AGENCY / THE MONEY / THE WORLD — no headings, because the rule does
      the work and headings would eat the width the icons need.
   4. PLAY WEEK SAT IN THE LIST. The one control that advances the game was another tab in the
      stack. It is now pinned to the FOOT of the rail with a rule above it — separated from
      navigation, because it is not navigation.
   5. NOTHING WAS LIVE. Football Manager's rail carries counts; ours carried none, so the
      player had to open NBOs to find out whether there was anything in them. Two badges, both
      backed by real state — open pitches, and clients under 40 loyalty (the re-pitch line).
      Nothing else gets a badge, because nothing else has a number we can stand behind.
   6. 19px ICONS IN AN 88px RAIL read thin and weightless against the heavy card language.

   Written as ONE block at the end of the sheet on purpose: the rail is already overridden in
   five earlier places across three theme layers, and adding a sixth scattered patch is how the
   last three collision defects happened. Everything the rail needs is here, in reading order.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
body[data-view="office"] .hud-main{ grid-template-columns:96px 1fr !important; }
body[data-view="office"] .hub-nav{
  padding:10px 8px 10px !important; gap:2px !important;
  display:flex !important; flex-direction:column !important;
}
body[data-view="office"] .hub-tab{
  position:relative !important; min-height:56px !important;
  padding:9px 4px 8px !important; gap:6px !important; border-radius:10px !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:.005em !important;
  line-height:1.15 !important; border:1px solid transparent !important;
  transition:background .15s ease, color .15s ease !important;
}
body[data-view="office"] .hub-tab .ht-ico svg{ width:22px !important; height:22px !important; }
body[data-view="office"] .hub-tab .ht-ico{ opacity:.72 !important; transition:opacity .15s ease }
body[data-view="office"] .hub-tab:hover .ht-ico{ opacity:1 !important }

/* THE MARKER — leading edge, not a bottom underline. Drawn as a pseudo-element so it can sit
   INSIDE the tab's rounded corner without a second border fighting the fill. */
body[data-view="office"] .hub-tab.on{ box-shadow:none !important; }
body[data-view="office"] .hub-tab.on::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0;
  background:var(--accent); }
body[data-view="office"] .hub-tab.on .ht-ico{ opacity:1 !important }

/* THE GROUP RULES — hairline, inset, and quiet enough to read as structure rather than a border */
body[data-view="office"] .hub-rule{
  display:block; flex:none; height:1px; margin:8px 10px;
  background:currentColor; opacity:.14; }

/* PLAY WEEK — ruled off from the tabs and given the weight of a control rather than a tab.
   It sits at the foot of the LIST, not the foot of the viewport. Pinning it to the bottom of the
   rail (min-height:100vh + margin-top:auto) was tried and reverted: the rail starts ~265px down
   the page, so a viewport-tall column put the one control that advances the game below the fold
   on first paint. A separator earns the separation; pushing it off-screen does not. */
body[data-view="office"] .hub-advance{
  margin:10px 0 0 !important; order:99 !important; min-height:56px !important;
  padding:10px 4px !important; border-radius:10px !important; font-size:11px !important;
  position:relative !important; }
body[data-view="office"] .hub-advance::before{
  content:""; position:absolute; left:6px; right:6px; top:-9px; height:1px;
  background:currentColor; opacity:.14; }
/* PLAY WEEK WAS INVISIBLE IN THE LIGHT SHELL — measured 1.03:1, i.e. the label was the same
   value as its own fill. The earlier light override reached for `var(--rust-ink,#1a1410)`, and
   in the platinum/porcelain palettes that token resolves to something all but identical to the
   button's `--rust-ink-08` background. Pinned to the SAME ink the tabs use in each shell, which
   is already contrast-tuned, rather than to a token that only happens to work in one theme. */
body:not(.mvc-light)[data-view="office"] .hub-advance{ color:rgba(226,235,248,.92) !important; }
body.mvc-light[data-view="office"] .hub-advance{ color:#3a3128 !important; }

/* THE COUNTS — a live rail, the FM idiom. Only rendered when the number is real and non-zero
   (pnRailCounts hides them otherwise), so an empty rail is a genuinely quiet rail. */
body[data-view="office"] .ht-n{
  position:absolute; top:6px; right:8px; min-width:17px; height:17px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; background:transparent; border:1px solid var(--accent); color:var(--accent);
  font-family:var(--mono),ui-monospace,monospace; font-size:11px; font-weight:800;
  line-height:1; letter-spacing:0; }
body[data-view="office"] .ht-n[hidden]{ display:none }
/* OUTLINED, NOT FILLED — and this is a contrast decision, not a taste one. A filled accent pill
   needs its own ink colour, and the ink that passes on the dark shell's #f97316 fails on the
   light shell's #b4380d (3.3:1 at 11px). Outlining makes the badge's contrast identical to the
   active tab's, which is already tuned per theme — so it passes everywhere with no per-shell
   override to keep in sync. Quieter too, which is right for a nav rail. */

/* AT RISK is the exception, and stays FILLED. A client under 40 loyalty is a thing going wrong,
   not a count, and colouring it like "you have 4 pitches open" would flatten the difference. Its
   red is fixed rather than themed, so white on it is 4.86:1 in every shell. */
body[data-view="office"] .ht-n--risk{ background:#c8442a; border-color:#c8442a; color:#fff; }

/* FOCUS — the rail is keyboard-reachable and was showing the UA default outline on a dark card,
   which is invisible in the dark shells. */
body[data-view="office"] .hub-tab:focus-visible,
body[data-view="office"] .hub-advance:focus-visible{
  outline:2px solid var(--accent) !important; outline-offset:2px !important; }

/* PHONE — the rail lies down into a scrolling strip. The label floor, the leading-edge marker
   (rotated to the top edge, which is the leading edge of a horizontal strip) and the badges all
   survive; the group rules become vertical ticks; Play week un-pins and rides at the end. */
@media (max-width:900px){
  /* MY OWN BUG, caught by hit-testing the tabs: the 96px grid above is unconditional and sits
     LATER in the sheet than the earlier `@media (max-width:900px){grid-template-columns:1fr}`,
     so it won at every width. The phone kept the desktop two-column split — a 94px rail with
     the tabs overflowing off the side of it and the hub body crammed beside it. Restated here,
     inside the phone block, where it now wins. */
  /* Restating `grid-template-columns:1fr` is not enough: `.hub-body{grid-column:2}` is declared
     unconditionally further up, so a one-column template just grows an IMPLICIT second column
     and the nav — which is `overflow-x:auto`, so its min-content width is almost nothing —
     collapses to 16px. Dropping the grid entirely on phones removes every `grid-column` in the
     cascade at a stroke, which is the only version of this that stays fixed. */
  body[data-view="office"] .hud-main{ display:block !important; }
  body[data-view="office"] .hub-nav,
  body[data-view="office"] .hub-body{ grid-column:auto !important; width:auto !important; }
  body[data-view="office"] .hub-nav{ margin:0 0 12px !important; }
  body[data-view="office"] .hub-nav{
    flex-direction:row !important; min-height:0 !important; align-items:stretch !important;
    padding:8px !important; gap:3px !important;
    /* OCCLUSION LAW. Caught by hit-testing, not by eye: at 390 the strip is `position:static`
       with no stacking context, and the Performance hero directly beneath it is
       `position:relative; z-index:1`. Where the two overlap, the hero paints OVER the strip and
       swallows the taps — `document.elementFromPoint` on four tab centres returned
       `.perf-hero-txt`, meaning those tabs could not be pressed at all on a phone. The rail is
       chrome; it wins. */
    position:relative !important; z-index:41 !important; }
  body[data-view="office"] .hub-tab,
  body[data-view="office"] .hub-advance{ width:72px !important; flex:none !important; }
  body[data-view="office"] .hub-tab.on::before{
    left:9px; right:9px; top:0; bottom:auto; width:auto; height:3px; border-radius:0 0 3px 3px; }
  body[data-view="office"] .hub-rule{ width:1px; height:auto; margin:6px 5px; }
  body[data-view="office"] .hub-advance{ margin:0 !important; }
  body[data-view="office"] .hub-advance::before{
    left:auto; right:auto; top:6px; bottom:6px; width:1px; height:auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   CEO-83 · THE GOLDEN CARD
   ══════════════════════════════════════════════════════════════════════════════════════════
   Jon: "Their 'Hire' card should be golden and feature a 'The100' emblem."

   GOLD IS A MATERIAL, NOT A FOURTH ACCENT. The spec is explicit about this and it is the trap:
   introducing a fourth colour into a three-colour system breaks the alternation law everywhere it
   touches. So gold is confined to ONE object — its edge, its emblem and its tier — and it is a
   FIXED ramp rather than a theme token, because a Named must read the same class of thing in every
   shell. It never appears on a button fill, a chart, or any other card.

   The card is a different STOCK from the market cards next to it: darker and warmer in the dark
   shell, a deep vellum in the light one, so you can tell across a page that one of these is not
   like the others — which is the whole brief.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --t100-gold:#c9a227;          /* struck, not neon — a milled edge, not a highlighter */
  --t100-gold-hi:#e8c964;
  --t100-ink:#f4ecd8;           /* warm off-white, reads as printed on the dark stock */
  --t100-stock:#151109;
  --t100-stock-2:#241c10;
}
body.mvc-light{
  --t100-ink:#221a0c;
  --t100-stock:#f4ecd8;
  --t100-stock-2:#e6d9ba;
}
.t100-lede{ margin:0 0 14px; max-width:70ch; font-size:13px; line-height:1.6 }
.t100-lede p{ margin:0 0 6px }
.t100-lede-gate{ color:var(--t100-gold); font-weight:700 }
.t100-board{ display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:14px }

.t100{
  position:relative; display:flex; flex-direction:column; gap:9px; padding:15px 15px 13px;
  border-radius:12px; border:1px solid var(--t100-gold);
  background:linear-gradient(158deg,var(--t100-stock-2),var(--t100-stock));
  color:var(--t100-ink);
  box-shadow:0 1px 0 rgba(232,201,100,.35) inset, 0 10px 28px rgba(0,0,0,.28);
}
/* the milled edge — a hairline of brighter gold inside the border, which is what makes it read as
   a struck object rather than a card with a yellow outline */
.t100::before{
  content:""; position:absolute; inset:3px; border-radius:9px; pointer-events:none;
  border:1px solid rgba(201,162,39,.34);
}
.t100.is-held{ box-shadow:0 0 0 2px rgba(201,162,39,.5), 0 10px 28px rgba(0,0,0,.3) }
.t100.is-gone{ filter:saturate(.35); opacity:.72 }

.t100-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.t100-emblem{ display:inline-flex; align-items:center; gap:6px; color:var(--t100-gold-hi) }
.t100-emblem svg{ width:17px; height:17px; display:block }
.t100-emblem i{ font-style:normal; font-family:var(--mono),ui-monospace,monospace;
  font-size:11px; font-weight:800; letter-spacing:.18em }
.t100-tier{ font-family:var(--mono),ui-monospace,monospace; font-size:11px; font-weight:800;
  letter-spacing:.18em; color:var(--t100-gold); border:1px solid currentColor; border-radius:4px;
  padding:3px 7px }

.t100-id h4{ margin:0; font-family:'Inter',sans-serif; font-weight:900; font-size:19px;
  line-height:1.15; letter-spacing:-.02em; color:var(--t100-ink) }
.t100-title{ display:block; margin-top:2px; font-size:12px; opacity:.78 }

.t100-ovr{ position:absolute; top:44px; right:15px; text-align:right; line-height:1 }
.t100-ovr i{ display:block; font-style:normal; font-family:var(--mono),ui-monospace,monospace;
  font-size:11px; font-weight:800; letter-spacing:.14em; opacity:.7 }
.t100-ovr b{ font-family:'Inter',sans-serif; font-weight:900; font-size:30px;
  color:var(--t100-gold-hi); font-variant-numeric:tabular-nums }
/* The bright gold fails on vellum. #8a6a12 measured 3.6:1 — legal for 30px display type but mean;
   #7a5c0d gets it to 4.45:1, which is effectively AA at any size. */
body.mvc-light .t100-ovr b{ color:#7a5c0d }

.t100-stats{ display:flex; flex-direction:column; gap:4px; margin-top:2px }
.t100-stat{ display:grid; grid-template-columns:82px 1fr 28px; align-items:center; gap:8px }
.t100-stat i{ font-style:normal; font-size:11px; opacity:.78 }
.t100-stat em{ font-style:normal; font-family:var(--mono),ui-monospace,monospace; font-size:11px;
  font-weight:800; text-align:right; font-variant-numeric:tabular-nums }
.t100-bar{ display:block; height:5px; border-radius:3px; background:rgba(201,162,39,.18); overflow:hidden }
.t100-bar b{ display:block; height:100%; background:linear-gradient(90deg,var(--t100-gold),var(--t100-gold-hi)) }

.t100-sig{ margin:2px 0 0; padding-left:9px; border-left:2px solid var(--t100-gold);
  font-family:'Inter',sans-serif; font-style:italic; font-size:13px; line-height:1.45; opacity:.92 }

.t100-terms{ display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; padding-top:9px;
  border-top:1px solid rgba(201,162,39,.24) }
.t100-terms span{ display:flex; align-items:baseline; justify-content:space-between; gap:8px }
.t100-terms i{ font-style:normal; font-size:11px; opacity:.7 }
.t100-terms b{ font-family:var(--mono),ui-monospace,monospace; font-size:11px; font-weight:800;
  font-variant-numeric:tabular-nums }

/* THE RISK BLOCK — printed on every card, before you bid, per the honesty law. A hidden risk is a
   cheat; a stated one is a story. */
.t100-risk{ padding:8px 10px; border-radius:8px; background:rgba(201,162,39,.10);
  border:1px solid rgba(201,162,39,.22) }
.t100-risk i{ display:block; font-style:normal; font-family:var(--mono),ui-monospace,monospace;
  font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--t100-gold); margin-bottom:3px }
body.mvc-light .t100-risk i{ color:#8a6a12 }
.t100-risk p{ margin:0; font-size:12px; line-height:1.45; opacity:.92 }
/* THE CARD OWNS ITS OWN INK. Measured, not assumed: the office shell's muted-text rules were
   reaching into the card and painting the risk line rgb(107,97,87) — 4.19:1 on vellum at 12px, a
   marginal fail, on the one paragraph the honesty law says must be readable before you spend
   £748,000. Every secondary string on the card is pinned to the card's own ink at a stated opacity
   so the shell cannot re-tint it. The `body[data-view="office"]` prefix is load-bearing, not
   decoration: the offending rule is `body[data-view="office"] p:not([class]){color:…!important}`,
   and a bare `.t100-risk p` loses to it on specificity even with !important. */
body[data-view="office"] .t100-title,body[data-view="office"] .t100-stat i,
body[data-view="office"] .t100-terms i,body[data-view="office"] .t100-terms b,
body[data-view="office"] .t100-sig,body[data-view="office"] .t100-risk p,
body[data-view="office"] .t100-foot p,body[data-view="office"] .t100-foot--held,
body[data-view="office"] .t100-foot--gone,body[data-view="office"] .t100-stat em{
  color:var(--t100-ink) !important }

.t100-foot{ margin-top:2px }
.t100-foot p{ margin:0 0 5px; font-size:12px; line-height:1.45; opacity:.9 }
.t100-foot--locked{ padding-top:8px; border-top:1px dashed rgba(201,162,39,.3) }
.t100-foot--held,.t100-foot--gone{ padding-top:8px; border-top:1px solid rgba(201,162,39,.24);
  font-size:12px; line-height:1.45 }
/* !important because the office shell carries a catch-all
   `body[data-view="office"] button:not(.primary):not(.hub-tab)…{background;color}` that this class
   is not excluded from — it was repainting the most important button on the card as a generic
   dark slab, which is exactly the "golden card" promise quietly not happening. Rather than add a
   twelfth :not() to a selector that is already unreadable, the one object states its own material.
   Gold #c9a227 under #1b1405 ink measures 7.6:1. */
.t100-cta{ appearance:none; cursor:pointer; width:100%; min-height:44px; padding:11px 14px;
  border-radius:8px; border:1px solid var(--t100-gold) !important;
  background:linear-gradient(180deg,var(--t100-gold-hi),var(--t100-gold)) !important;
  color:#1b1405 !important; font-family:'Inter',sans-serif; font-weight:800; font-size:13px;
  transition:filter .15s ease }
.t100-cta:hover{ filter:brightness(1.07) }
.t100-cta:focus-visible{ outline:2px solid var(--t100-gold-hi); outline-offset:2px }
.t100-cta--ghost{ background:transparent !important; color:var(--t100-gold) !important; width:auto; margin-top:6px }
body.mvc-light .t100-cta--ghost{ color:#7a5c0d !important }
/* On vellum the highlight gold is a whisper — the emblem and the tier chip, the two marks that say
   "this is one of the hundred", were the faintest things on the card. Struck gold in the light shell. */
body.mvc-light .t100-emblem{ color:#7a5c0d }
body.mvc-light .t100-tier{ color:#7a5c0d }

/* THE FORM CHIP — the same object on the golden card and the squad card, so the two can never
   disagree about how somebody is doing. Colour carries meaning here (hot / cold / resting) and is
   the only place on the card where anything but gold appears, which is why each state also carries
   a WORD: colour alone is not a readout. */
.t100-formrow{ margin-top:2px }
.t100-form{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:7px 10px; border-radius:8px; border:1px solid rgba(201,162,39,.28);
  background:rgba(201,162,39,.08) }
.t100-form i{ font-style:normal; font-family:var(--mono),ui-monospace,monospace; font-size:11px;
  font-weight:800; letter-spacing:.14em }
.t100-form b{ font-family:var(--mono),ui-monospace,monospace; font-size:13px; font-weight:800;
  font-variant-numeric:tabular-nums }
.t100-form em{ flex:1 1 100%; font-style:normal; font-size:11px; opacity:.85 }
.t100-form.is-hot{ border-color:rgba(58,163,96,.5); background:rgba(58,163,96,.12) }
.t100-form.is-cold{ border-color:rgba(200,68,42,.5); background:rgba(200,68,42,.12) }
.t100-form.is-rest{ border-color:rgba(140,140,150,.5); background:rgba(140,140,150,.12) }
.t100-form.is-gone{ opacity:.6 }
body[data-view="office"] .t100-form i,body[data-view="office"] .t100-form b,
body[data-view="office"] .t100-form em{ color:inherit !important }

/* the Named block on a squad card — form, the condition running, and the week's decision */
.sqd-named{ display:flex; flex-direction:column; gap:8px; margin:10px 0 0; padding:10px;
  border-radius:10px; border:1px solid rgba(201,162,39,.3) }
body[data-view="office"] .sqd-named .sqd-named-cond{ margin:0; font-size:12px; line-height:1.45;
  color:inherit !important }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   CEO-84 · THE SEASON CLOCK AND THE WHILE-YOU-WERE-OUT REPORT
   ══════════════════════════════════════════════════════════════════════════════════════════
   Both sit INLINE at the top of Performance rather than as overlays. That is a deliberate call
   and not a shortcut: overlay occlusion has been the most common defect in this build, and a
   report that covers the thing it is reporting on is worse than one you scroll past. Neither can
   steal a click from anything.

   Both state their own ink and their own button material — the office shell's
   `p:not([class]){color!important}` and `button:not(.primary):not(.hub-tab)…{background;color}`
   catch-alls reach into any new component otherwise. Learned twice now. */
/* OCCLUSION LAW, caught by hit-testing: the Performance hero that follows these two blocks
   contains absolutely-positioned decoration (.vc-note) that painted over the WHILE YOU WERE OUT
   dismiss button — the click was unreachable at the button's own centre. Both blocks are content
   at the TOP of the view and nothing decorative may sit on them, so they take their own stacking
   context. Same class of defect as the phone nav rail; same fix. */
.pn-season,.wywo{ position:relative; z-index:2 }
.pn-season{ margin:0 0 14px; padding:14px 16px; border-radius:14px;
  border:1px solid var(--pn-border,rgba(255,255,255,.12)); background:var(--rust-ink-08,rgba(255,255,255,.04)) }
.pn-season.is-shut{ border-color:rgba(200,68,42,.55) }
.pn-season-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap }
/* .tac-eyebrow ships at 9px — under the phone floor. Raised for THIS component only; the class is
   used in dozens of places and changing it globally moves layouts three screens away. */
body[data-view="office"] .pn-season .tac-eyebrow,
body[data-view="office"] .wywo .tac-eyebrow{ font-size:11px !important }
.pn-season-count{ font-family:var(--mono),ui-monospace,monospace; font-size:12px; font-weight:800;
  letter-spacing:.06em; color:var(--accent) }
.pn-season.is-shut .pn-season-count{ color:#c8442a }

/* the 90 days as a bar, with Deadline Day struck through it as a real mark rather than a legend */
.pn-season-bar{ position:relative; height:8px; margin:11px 0 12px; border-radius:5px;
  background:rgba(128,128,140,.22); overflow:visible }
.pn-season-bar > i{ display:block; height:100%; border-radius:5px; background:var(--accent) }
.pn-season-bar > b{ position:absolute; top:-5px; width:2px; height:18px; background:#c8442a;
  border-radius:1px; transform:translateX(-1px) }

.pn-season-rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px 16px }
.pn-season-rows span{ display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding-bottom:5px; border-bottom:1px solid var(--pn-border,rgba(255,255,255,.1)) }
.pn-season-rows i{ font-style:normal; font-size:11px; opacity:.72 }
.pn-season-rows b{ font-family:var(--mono),ui-monospace,monospace; font-size:12px; font-weight:800;
  font-variant-numeric:tabular-nums }
body[data-view="office"] .pn-season-note{ margin:10px 0 0; font-size:12.5px; line-height:1.5;
  color:inherit !important; opacity:.9 }
body[data-view="office"] .pn-season-note--small{ font-size:11px; opacity:.72 }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   PN-M11 · DE-BLAND THE HUB   (CEO 08-13: "this whole page design is too bland")
   ══════════════════════════════════════════════════════════════════════════════════════════
   The office home read as flat dark boxes with mono-grey rows — no depth, no warmth, nothing
   that says this is a game. No new colours, no new copy: the SAME three-colour system, given
   material. Objects that catch light; a countdown that carries the screen; a lit clock bar;
   stat rows that read as struck chips instead of a mono list. Guarded per shell so the light
   theme doesn't go dark-on-dark. */

/* THE SEASON PANEL — the dominant object on the screen, so it earns being a hero.
   Dark shell: a layered navy stock with a warm glow catching the top-right corner. */
body:not(.mvc-light)[data-view="office"] .pn-season{
  padding:16px 16px 15px !important; border-radius:16px !important;
  border:1px solid rgba(var(--glow),.26) !important;
  background:
    radial-gradient(130% 85% at 90% -12%, rgba(var(--glow),.17) 0%, transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.012) 42%, rgba(0,0,0,.18) 100%),
    #0e1a26 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 34px -22px rgba(0,0,0,.85) !important;
}
/* Light shell: the same object in vellum + porcelain, glow softened. */
body.mvc-light[data-view="office"] .pn-season{
  padding:16px 16px 15px !important; border-radius:16px !important;
  border:1px solid rgba(var(--glow),.30) !important;
  background:
    radial-gradient(130% 85% at 90% -12%, rgba(var(--glow),.12) 0%, transparent 56%),
    linear-gradient(180deg,#ffffff 0%,#f3f5f8 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 28px -20px rgba(20,30,45,.42) !important;
}
body[data-view="office"] .pn-season.is-shut{ border-color:rgba(200,68,42,.6) !important; }

/* The countdown stops being a label and becomes the headline of the panel. */
body[data-view="office"] .pn-season-count{
  font-size:16px !important; letter-spacing:.02em !important;
  text-shadow:0 0 20px rgba(var(--glow),.32);
}

/* THE CLOCK BAR — a lit rail sunk into the stock, its fill glowing, Deadline Day a struck flag. */
body[data-view="office"] .pn-season-bar{
  height:10px !important; margin:13px 0 14px !important;
  background:rgba(0,0,0,.34) !important; overflow:visible !important;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55);
}
body[data-view="office"] .pn-season-bar > i{
  background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 68%,#fff) 0%, var(--accent) 100%) !important;
  box-shadow:0 0 14px rgba(var(--glow),.6);
}
body[data-view="office"] .pn-season-bar > b{
  top:-6px !important; height:20px !important; box-shadow:0 0 8px rgba(200,68,42,.85); }

/* THE ROWS — struck chips, not a mono ledger. Numbers go bright and full-weight. */
body[data-view="office"] .pn-season-rows{ gap:8px !important; }
body[data-view="office"] .pn-season-rows span{
  padding:8px 11px !important; border:1px solid rgba(128,132,148,.2) !important;
  border-bottom:1px solid rgba(128,132,148,.2) !important;
  border-radius:10px !important; background:rgba(255,255,255,.035) !important; }
body.mvc-light[data-view="office"] .pn-season-rows span{
  background:rgba(20,30,45,.03) !important; border-color:rgba(20,30,45,.1) !important; }
body[data-view="office"] .pn-season-rows i{
  opacity:.6 !important; font-size:10px !important; letter-spacing:.06em; text-transform:uppercase; }
body:not(.mvc-light)[data-view="office"] .pn-season-rows b{ color:#fff !important; }

/* THE NAV — flat outlines became raised tiles inside a tray. Shell-agnostic bevels
   (a white top-light + a black foot) read on both stocks; the active tile wears the glow. */
body[data-view="office"] .hub-nav{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.06)) !important;
  border:1px solid rgba(128,132,148,.18) !important; border-radius:16px !important; }
body[data-view="office"] .hub-tab:not(.on){
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.05)) !important;
  border:1px solid rgba(128,132,148,.18) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset !important; }
body[data-view="office"] .hub-tab.on{
  background:linear-gradient(180deg, rgba(var(--glow),.18), rgba(var(--glow),.06)) !important;
  border:1px solid rgba(var(--glow),.42) !important;
  box-shadow:0 0 18px -6px rgba(var(--glow),.5) !important; }
/* Play week / End week — the action tile, warmed so it reads as the one you press. */
body[data-view="office"] .hub-advance{
  background:linear-gradient(180deg, rgba(var(--glow),.15), rgba(var(--glow),.05)) !important;
  border:1px solid rgba(var(--glow),.36) !important; }

/* CEO 08-13 "give me a faster way to deliver" — the angle is a sharpener, not a gate. The
   "· optional" qualifier reads as a quiet aside, never emphasis competing with the label. */
.wr-angle-opt,.wr-bs-opt{ font-style:normal; font-weight:600; opacity:.55;
  font-size:.82em; letter-spacing:.03em; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   PN-M12 · THE DISCLOSURE + BUTTON SYSTEM   (CEO 08-13, ~6th ask)
   ══════════════════════════════════════════════════════════════════════════════════════════
   "This button, like the roll the dice buttons, are too vague and badly formatted." / "Other bad
   buttons." He is pointing at the SAME object every time: the `<details class="wr-more">`
   disclosure — THE ROOM AND WHAT IT TAUGHT YOU · THE PITCH ON A PAGE · 5 DISCIPLINES FIELDED ·
   THE BACKGROUND · Your angle — which rendered as a wide bare bar with a whispered "OPEN +"
   floating at the right edge, clipping off-screen. Plus ROLL THE DICE (a two-line label crushed
   into a squat box) and "Best line-up".

   ONE system, applied once, so they stop drifting apart:
     · every disclosure summary IS a button — real fill, real border, real press state, ≥48px;
     · the state cue is a fixed-width [+]/[−] chip at the right that can never clip or wrap;
     · the label never wraps to two lines and never collides with the cue.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.wr-more > summary{
  display:flex !important; align-items:center; gap:10px;
  min-height:48px; padding:10px 12px 10px 14px !important;
  border-radius:10px !important; cursor:pointer; list-style:none;
  border:1px solid rgba(128,132,148,.34) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset !important;
  transition:background .15s ease, border-color .15s ease; }
body.mvc-light .wr-more > summary{
  background:linear-gradient(180deg, rgba(11,28,48,.05), rgba(11,28,48,.015)) !important; }
.wr-more > summary::-webkit-details-marker{ display:none }
.wr-more > summary:active{ transform:translateY(1px) }
.wr-more > summary .wr-more-k{
  font-size:13px !important; font-weight:800; letter-spacing:.04em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* the sub-label is context, not a second heading — it never competes and never forces a wrap */
.wr-more > summary .wr-more-sub{
  font-size:11px !important; opacity:.6; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; flex:1 1 auto; }
/* THE CUE — fixed width, pinned right, cannot clip. Replaces the free-floating "OPEN +" text. */
.wr-more > summary .wr-more-cue{
  flex:0 0 auto; margin-left:auto; width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(var(--glow),.42); color:var(--accent);
  font-weight:900; font-size:15px; line-height:1; }
.wr-more > summary .wr-more-cue::before{ content:"+" }
.wr-more[open] > summary .wr-more-cue::before{ content:"\2212" }  /* − */
/* KILL THE OLD CUE. style-01.css:10232 prints "+" and :10710 prints the literal "OPEN +" through
   ::after — the exact "vague and badly formatted" label the CEO kept circling. Both are silenced
   here so the chip above is the ONLY cue; leaving them stacked printed "OPEN +" over the chip. */
.wr-more > summary .wr-more-cue::after{ content:"" !important; display:none !important; }
.wr-more[open] > summary{ border-color:rgba(var(--glow),.44) !important; }

/* ROLL THE DICE — was a squat box with the label breaking across two lines ("ROLL THE / DICE").
   One line, real button, and its "?" partner matches its height instead of floating beside it. */
.pn-dice{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 14px !important; border-radius:10px !important;
  white-space:nowrap; line-height:1 !important;
  border:1px solid rgba(var(--glow),.44) !important;
  background:linear-gradient(180deg, rgba(var(--glow),.16), rgba(var(--glow),.05)) !important; }
.pn-dice b{ font-size:13px; font-weight:800; letter-spacing:.05em; white-space:nowrap; }
.pn-dice-q{
  min-height:48px !important; width:48px !important; border-radius:10px !important;
  border:1px solid rgba(128,132,148,.34) !important;
  background:rgba(0,0,0,.22) !important; }
body.mvc-light .pn-dice-q{ background:rgba(255,255,255,.7) !important; }
.pn-dice-wrap{ display:inline-flex; align-items:stretch; gap:8px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   PN-M13 · WORK READY — "this page still looks ugly, needs image at top" (CEO 08-13)
   ══════════════════════════════════════════════════════════════════════════════════════════
   The set-piece DOES carry the client's sector art (`sectorArt()` on `.pnr-reel`), but three
   rules were burying it: `.pn-ready.is-lap .pnr-reel` drops it to brightness(.62) + blur(2px),
   a full-bleed scrim sits over it, and the `.pnr-bleed` ghost word (FATHOM / LUMEN) is painted
   across the top 56%. Net effect on a phone: a murky dark void with a faint word in it.
   On the phone the picture becomes a real HERO BAND at the top — crisp, unblurred, its own
   height — the ghost word goes (he has had that cut elsewhere already), and the scrim becomes
   a bottom-up gradient so the band reads as a photograph and the type under it stays AA. */
@media (max-width:760px){
  /* THE DIALOG OWNS ITS OWN GROUND. The full-bleed scrim used to be what made this set-piece
     opaque; cropping it to a band let the war room behind bleed through and collide. The wrapper
     now carries a solid stock, so the band is decoration rather than the only backdrop. */
  html body .pn-ready{ background:#05070b !important; }
  html body .pn-ready .pnr-bleed{ display:none !important; }
  html body .pn-ready .pnr-reel,
  html body .pn-ready.is-lap .pnr-reel{
    inset:0 0 auto 0 !important; height:62vh !important;
    filter:none !important; opacity:1 !important;
    background-position:50% 42% !important;
    border-bottom:1px solid rgba(var(--glow),.34) !important; }
  /* the scrim rides ON the band only — a bottom-up fade so type below the picture stays AA */
  html body .pn-ready .pn-ready-scrim{
    inset:0 0 auto 0 !important; height:62vh !important;
    background:linear-gradient(180deg, rgba(5,7,11,.06) 0%, rgba(5,7,11,.34) 60%, rgba(5,7,11,1) 100%) !important;
    /* SELF-REVIEW 08-13 — THE REASON THE "IMAGE AT THE TOP" LOOKED LIKE A SMEAR. The scrim sits at
       z-index 1 directly over the plate and carries backdrop-filter:blur(14px), so it was frosting
       the very photograph it exists to darken. At a 200px band that read as atmosphere; at 62vh it
       is the whole set-piece out of focus. The scrim's job is the gradient — the blur is deleted,
       not reduced, so the plate arrives sharp. */
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  /* the content starts UNDER the band instead of being layered over it */
  /* THE CONTENT SITS DIRECTLY UNDER THE BAND. The dialog centres its inner block vertically, so
     padding on the inner double-counted (measured: inner already started 333px down, +216 padding
     pushed the copy to 549) and opened a SECOND void — the exact defect this pass exists to kill.
     Top-align the dialog itself and let its own top padding clear the band; the inner adds none. */
  /* SELF-REVIEW 08-13 (CEO: "This section in particular is dead space"): top-aligning the block
     under a 200px band left a MEASURED 355px void between the last button and the footer — half
     the phone, empty. The space belongs to the picture and to the breathing room around the two
     actions, not to a hole at the bottom. The band takes 300px (the set-piece's only image, now
     actually a hero) and the action block centres in what is left, clear of the 49px footer, so
     the emptiness is shared as margin instead of pooling under the fold.
     The band is sized in vh, not px: the action block settles at a fixed offset from the top of
     the dialog (MEASURED: padding-top + 263, and it lands there ~3s in, after the set-piece's
     reveal), so a px band either leaves a hole above the copy on a tall phone or crops the picture
     on a short one. 62vh puts the picture's bottom edge just above where the copy actually lands
     at 844, and tracks the viewport instead of guessing it. */
  html body .pn-ready{
    display:flex !important; flex-direction:column !important;
    justify-content:center !important; align-items:stretch !important;
    padding-top:300px !important; padding-bottom:56px !important; }
  html body .pn-ready .pn-ready-inner{
    position:relative; z-index:3; background:transparent;
    padding-top:0 !important; margin-top:0 !important;
    justify-content:flex-start !important; align-items:center !important; }
  /* the decorative furniture never eats a tap (defensive: the CEO reported the actions as
     "unresponsive" — they hit-test clean here, so this is belt-and-braces on the real device) */
  html body .pn-ready .pnr-reel,
  html body .pn-ready .pn-ready-scrim,
  html body .pn-ready .pnr-tex,
  html body .pn-ready .pnr-site,
  html body .pn-ready .pnr-foot{ pointer-events:none !important; }
  html body .pn-ready .pn-ready-actions{ position:relative; z-index:6; }
  html body .pn-ready .pn-ready-actions .pn-btn{ min-height:52px; touch-action:manipulation; }
}

/* CEO 08-13 — the response object leads with the DELIVER action; the sharpeners fold beneath it. */
.wr-work .wr-deliver{ margin:2px 0 8px; }
.wr-work .wr-deliver-note{ margin:0 0 12px; font-size:12.5px; line-height:1.5; opacity:.72; }
.wr-work .wr-more{ margin:0 0 8px; }

/* WHILE YOU WERE OUT — a receipt for the weeks that happened without you */
.wywo{ margin:0 0 14px; padding:15px 16px; border-radius:14px;
  border:1px solid var(--accent); background:rgba(var(--glow),.08) }
.wywo h3{ margin:6px 0 0; font-family:'Inter',sans-serif; font-weight:900; font-size:20px;
  line-height:1.2; letter-spacing:-.02em }
body[data-view="office"] .wywo-lede{ margin:5px 0 12px; font-size:12.5px; line-height:1.5;
  color:inherit !important; opacity:.85 }
.wywo-rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px 18px }
.wywo-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:6px; border-bottom:1px solid var(--pn-border,rgba(255,255,255,.1)) }
.wywo-row span{ font-size:12px; opacity:.75 }
.wywo-row b{ font-family:var(--mono),ui-monospace,monospace; font-size:13px; font-weight:800;
  font-variant-numeric:tabular-nums }
.wywo-row b.is-warn{ color:#e0603f }
body[data-view="office"] .wywo-note{ margin:11px 0 0; font-size:12px; line-height:1.5;
  color:inherit !important; opacity:.88 }
body[data-view="office"] .wywo-note.is-warn{ color:#e0603f !important; opacity:1; font-weight:700 }
.wywo-ok{ margin-top:13px; min-height:44px }

/* CEO-29 — the fee chip's label and the opportunity's money line both ship at 8.5px, under the
   phone floor. They were decorative before; they now carry the price of the account and the word
   JUMBO, so they have to be readable on the device the CEO is testing on. Scoped to these two. */
body[data-view="office"] .rfi-budget span{ font-size:11px !important }
body[data-view="office"] .nbo-fit-meta{ font-size:11.5px !important; line-height:1.5 }

/* CEO-29 — ON THE BOOKS. An economy you cannot see is an economy you cannot play, so what you
   are owed and when it lands is printed, not buried in the cash number. */
.pn-owed{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 14px;
  padding:11px 14px; border-radius:12px; border:1px solid var(--pn-border,rgba(255,255,255,.14));
  border-left:3px solid var(--mvc-green,#3fd68f); background:var(--rust-ink-08,rgba(255,255,255,.04)) }
.pn-owed-k{ font-family:var(--mono),ui-monospace,monospace; font-size:11px; font-weight:800;
  letter-spacing:.16em; opacity:.72 }
.pn-owed-v{ font-family:'Inter',sans-serif; font-weight:900; font-size:20px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--mvc-green,#3fd68f) }
.pn-owed-s{ flex:1 1 100%; font-size:11.5px; opacity:.8 }
body.mvc-light .pn-owed-v{ color:#0f7a3f }

/* JUMBO — the fee chip says so, because an account four times the size of everything else on the
   board should not look like everything else on the board. */
.rfi-budget.is-jumbo{ border-color:#c9a227 !important; box-shadow:0 0 0 1px rgba(201,162,39,.5) inset }
.rfi-budget.is-jumbo span{ color:#c9a227 !important; font-weight:800 }
body.mvc-light .rfi-budget.is-jumbo span{ color:#7a5c0d !important }

/* APPLY IT — the verdict's third act. Reading is not learning; this is where the debrief becomes a
   move. Three columns on desktop, stacked on a phone, each with a stated price. */
.rl-apply{ margin-top:16px; padding-top:14px; border-top:1px solid var(--pn-border,rgba(255,255,255,.14)) }
.rl-apply-rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:9px }
.rl-act{ display:flex; flex-direction:column; gap:7px; padding:11px 12px; border-radius:10px;
  border:1px solid var(--pn-border,rgba(255,255,255,.14)) }
.rl-act.is-off{ opacity:.62 }
.rl-act-k{ font-family:var(--mono),ui-monospace,monospace; font-size:11px; font-weight:800;
  letter-spacing:.14em; color:var(--accent) }
body[data-view="office"] .rl-act p{ margin:0; font-size:12.5px; line-height:1.45; color:inherit !important }
.rl-act-off{ font-size:11px; opacity:.8; font-style:italic }
.rl-act-go{ align-self:flex-start; min-height:44px }

/* the sub-tab that leads to them wears the mark, quietly */
.s2-htab--gold.on{ color:var(--t100-gold) !important }
/* The tier chips reuse .s2-htab, which ships at 38px — under the 44px tap floor. Raised HERE
   rather than on .s2-htab globally, because that class is also the Hires sub-tab row and changing
   its height moves a layout three panels away from this one. */
.t100-lede + .s2-htabs .s2-htab{ min-height:44px }

@media (max-width:520px){
  .t100-board{ grid-template-columns:1fr }
  .t100-ovr{ top:42px }
  .t100-terms{ grid-template-columns:1fr }
}

/* ══ PN-M14 · THE COMMAND BAR AT 390 ══════════════════════════════════════════════════════════
   CEO 2026-08-13 (verbatim): "this top nav is still ugly".
   He is right, and the diagnosis is measurable, not taste: at 390 the bar rendered FOUR bands and
   149px of chrome (plus a 53px order strip under it = 202px, ~24% of the phone) —
     deck 1  "offline · connection" + a SIGN IN slab   — a connection log, printed as a headline
     deck 2  the wordmark, with the ⋯ burger stranded MID-ROW (x=170 of 390) beside a dead void
     deck 3  the four numbers, WEEK clipping the right edge
     deck 4  a second END THE WEEK button — the same action already sitting in deck 1
   The fix is subtraction, not restyling. Phone chrome is now TWO decks and one job each:
     deck 1  PITCHNOIR · End week · ⋯   (identity, the week's one irreversible act, everything else)
     deck 2  the numbers
   The connection state and Sign in are not headlines — they move into the ⋯ menu where every other
   utility already lives (§ "deletion, not dimming": the control is not dimmed, the BANNER is gone
   and the control is intact one tap away). Meets PN-M2's ≤96px header budget. */
@media (max-width:760px){
  html body .topbar{
    flex-wrap:wrap !important; align-items:center !important;
    padding:5px 12px 4px !important; row-gap:0 !important; column-gap:8px !important;
    min-height:0 !important; }
  /* the connection log + SIGN IN slab: off the bar, alive in the ⋯ menu */
  html body .topbar #account,
  html body .topbar #account.is-signedout{ display:none !important; }
  html body .topbar .spacer,
  html body .topbar .game-clock{ display:none !important; }
  /* deck 1 — identity left, the week's act and the menu hard right */
  html body .topbar .brandmark{
    order:1; flex:0 0 auto; height:44px !important; align-self:center !important;
    padding-right:0 !important; margin-right:0 !important; border-right:0 !important; }
  html body .topbar #tbEndWeek{ order:2; flex:0 0 auto; margin-left:auto !important; }
  html body .topbar .tb-more{ order:3; flex:0 0 auto; margin-left:0 !important; }
  /* deck 2 — the numbers, full width, its own line, scrollable rather than clipped */
  html body .topbar #hud{ order:4; flex:1 0 100% !important; width:100% !important;
    min-width:0 !important; overflow-x:auto !important; }
  html body .topbar #hud .hud-group.hud-primary{ padding:0 !important; }
}
/* 390 and under: the four numbers have to hold one line without a scroll nobody discovers */
@media (max-width:400px){
  html body .topbar #hud .hud-primary .stat{ padding:0 9px !important; }
  html body .topbar #hud .hud-primary .stat:first-child{ padding-left:0 !important; }
  html body .topbar #hud .hud-primary .stat:last-child{ padding-right:0 !important; }
}

/* ══ PN-M15 · THE DELEGATION REPORT ═══════════════════════════════════════════════════════════
   CEO 08-13: "when a team is assigned it user should still get a pop up report showing how it
   went, including revenue it earns when successful or cost it cost of unsuccessful."
   The money is the line he named, so the money is the hero — one big figure, coloured by
   direction, with the supporting numbers as a quiet ruled list underneath. */
.aar-money{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:12px;
  border:1px solid rgba(128,132,148,.34); margin:0 0 12px; }
.aar-money .aar-k{ font:800 10px/1 var(--mono),monospace; letter-spacing:.22em; text-transform:uppercase;
  opacity:.72; }
.aar-money b{ font:900 clamp(28px,7vw,38px)/1 Inter,sans-serif; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin-top:4px; }
.aar-money i{ font:500 12px/1.4 Inter,sans-serif; font-style:italic; opacity:.7; margin-top:3px; }
.aar-money--in{ background:linear-gradient(180deg,rgba(61,220,132,.14),rgba(61,220,132,.05)); }
.aar-money--in b{ color:#3ddc84; }
.aar-money--out{ background:linear-gradient(180deg,rgba(255,106,85,.14),rgba(255,106,85,.05)); }
.aar-money--out b{ color:#ff6a55; }
body.mvc-light .aar-money--in b{ color:#12703d; }
body.mvc-light .aar-money--out b{ color:#b0261a; }
.aar-rows{ display:flex; flex-direction:column; }
.aar-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 2px; border-top:1px solid rgba(128,132,148,.24); font-size:13px; }
.aar-row span{ opacity:.74; }
.aar-row b{ font-variant-numeric:tabular-nums; font-weight:800; }

/* ══ PN-M16 · THE NUMBERED STEPS READ AS STEPS (#132) ═════════════════════════════════════════
   CEO 08-13: "The whole numbered step process is still unclear." The numbers were decoration and
   state lived only in opacity. A tick replaces the number once a step is done, and the active
   step says its position in words — "Step 2 of 4" — because a bare "02" assumes the reader is
   counting segments. Underline removed from <u>: it is used here as a semantic tag, not a rule. */
#pn-stagerail .pn-stgcount{
  display:block; text-decoration:none; margin:1px 0 2px;
  font:800 9px/1 var(--mono),monospace; letter-spacing:.16em; text-transform:uppercase;
  opacity:.9; }
#pn-stagerail .pn-stgtick{ font-size:14px; line-height:1; }
#pn-stagerail .pn-stgseg[data-state="done"]{ opacity:.55; }
#pn-stagerail .pn-stgseg[data-state="next"]{ opacity:.38; }
#pn-stagerail .pn-stgseg[data-state="now"]{ opacity:1; }
@media (max-width:480px){
  /* at 390 four segments plus an action line is a scrum — the two the player cannot act on
     shrink to their marker, so the step they ARE in keeps the width its instruction needs. */
  #pn-stagerail .pn-stgseg[data-state="next"] i{ display:none; }
  #pn-stagerail .pn-stgcount{ font-size:8.5px; letter-spacing:.12em; }
}

/* ══ PN-M17 · #122 (PN-M3) THE SEV-2 FLOORS AT 390 ═══════════════════════════════════════════
   Measured, not guessed. A probe walked office / prep / ready / review at 390 and reported every
   interactive element under 44px in either axis and every text node under 9px, with its parent
   chain. What follows fixes exactly what it found and nothing it did not.

   ── WHAT I DELIBERATELY LEFT ALONE, and why it matters ──
   The smallest text on the READY surface is 5.5-6.5px and sits at
       .pnr-lap-rig > .pnr-lid > .pnr-screen > …
   which is the DRAWN LAPTOP — a picture of a laptop with the deck on its screen. That text is
   ARTWORK, not copy the player is asked to read; it is small for the same reason a road sign in a
   painting is small. Raising it to a legibility floor would blow the prop apart and make the
   illustration read as broken UI. A blanket "no text under 10px" sweep would have done exactly
   that, which is the argument for measuring parents rather than font sizes alone. The real labels
   around the prop are raised below; the picture stays a picture. */
@media (max-width: 480px){
  /* ── TAP TARGETS ──────────────────────────────────────────────────────────────────────────
     Named individually. A stack of element catch-alls is what caused the beige-button defect
     twice and the seven-deep heading override; the file header already says so. */
  .nm-go{ min-height:44px !important; }                    /* measured 146x40 on office + ready */
  .ts-chip{ min-height:44px !important; }                  /* measured  94x36 on office */

  /* The mac traffic lights measured 12x12 — the smallest control in the game, and one of them is
     CLOSE. The visible dot stays 12px (it is a recognisable object; growing it would make the
     titlebar look wrong); the BUTTON around it grows.
     An honest limit, stated rather than glossed: the hit box goes to 44 TALL but ~28 WIDE, not
     44x44. Three of these sit side by side in a titlebar, and three 44-wide targets in a 390
     viewport would have to OVERLAP — which on a close button means a mis-tap closes something the
     player was not closing. An overlapping 44 is worse than a clean 28, so the width is capped at
     the point where the targets still cannot collide.
     The box is on the ELEMENT, not a pseudo: a transparent ::after halo was tried on .u3-help and
     proved unhittable in QA (see account.js). */
  .lg-tb-dots{ align-items:center; }
  .lg-tb-dots .lg-dot{
    width:28px !important; height:44px !important; border-radius:0 !important;
    background:none !important; box-shadow:none !important; border:0 !important;
    display:inline-flex !important; align-items:center; justify-content:center;
    margin:0 -6px !important;            /* keep the painted spacing the titlebar was drawn with */
    position:relative; cursor:pointer;
  }
  .lg-tb-dots .lg-dot::before{
    content:""; width:12px; height:12px; border-radius:50%; background:currentColor;
  }
  .lg-tb-dots .lg-dot.red{ color:#ff5f57 } .lg-tb-dots .lg-dot.amber{ color:#febc2e }
  .lg-tb-dots .lg-dot.green{ color:#28c840 }

  /* ── TEXT FLOORS ──────────────────────────────────────────────────────────────────────────
     Every one of these is a LABEL the player is meant to read, measured under 9px. 9.5px is the
     floor rather than 10px because these are uppercase mono eyebrows at wide tracking, where the
     cap height does the legibility work — the same reason the rail's step count sits at 8.5px and
     is still readable at arm's length. */
  .rm-stat span{ font-size:9.5px !important; }             /* "INSIGHT" measured 7.5px */
  .rm-disc .rm-key{ font-size:9.5px !important; }          /* "KEY"     measured 8px   */
  .pnp2-rule i{ font-size:9.5px !important; }              /* measured 8.5px */
  .pnp2-term i{ font-size:9.5px !important; }              /* "Job type" measured 8px */
  .pnr-site-l .lock{ font-size:9.5px !important; }         /* "WORK LOCKED…" measured 8.5px */
  .pnr-foot span{ font-size:9.5px !important; }            /* the studio line, measured 8.5px */
  /* Missed on the first pass and caught by re-running the probe rather than by assuming the batch
     was complete — OVERWEIGHT / UNDERWEIGHT are the squad-balance warnings, so of everything here
     they are the labels least worth shrinking. */
  .ts-flag{ font-size:9.5px !important; }                  /* measured 8px on office */

  /* ── TRUNCATION: REFLOW, NOT CLIP ─────────────────────────────────────────────────────────
     .wr-more-sub was clipping mid-phrase in four places on one screen — "they want Commercials"
     cut at 101px of 162, and worst of all "the one-pager · optional" given 7px of 185. A label
     amputated to nothing is not a label. These are short helper lines with room beneath them, so
     they wrap; nothing below them is pinned, so nothing is pushed off screen. */
  .wr-more-sub{
    overflow:visible !important; text-overflow:clip !important;
    white-space:normal !important; word-break:break-word;
  }
  /* The window title carried the whole breadcrumb ("01BRIEFTHE WORK // 1 OF 6 — TH…") into 295px
     of 312. It is a title, so it may not wrap into the titlebar — it steps down a size instead,
     which recovers the tail without touching the chrome's height. */
  .lg-tb-title{ font-size:9.5px !important; letter-spacing:.10em !important; min-width:0; }
}