/* 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-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 }

/* 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 }
}