/* ============================================================================
   CHARCOAL GROUND — owner 2026-08-06: "can u make the theme of the city command
   mockup charcoal grey".

   SAME SHAPE AS THE SLATE ATTEMPT (8c): this file is ONLY the ground. It moves
   the background / panel / line / hover variables and NOTHING else. Every rule
   that carries meaning — the 5px card caps and their five-colour rotation, the
   Every Seat row fills, the white type, the pass/warn/fail inks — lives in
   8b-navy.css and is inherited untouched, because none of it was ever navy.
     TO GO BACK TO NAVY:  delete the one <link> to this file in index.html.
     TO GO LIGHTER:       raise the three greys one step (values noted below).

   CHARCOAL vs THE SLATE TRY. Slate (#2F3841/#3B4652) is a blue-grey — it still
   carries hue, which is what made it read as "navy that lost its colour" when it
   went up on the wall. Charcoal is neutral: equal-ish R/G/B with a hair of warmth
   so it doesn't go flat-blue under the TVs' cool panels. That leaves the five cap
   colours and the row fills as the only hues on screen, which is the point —
   a red cap has nothing to compete with.

   CONTRAST, measured, because these are wall TVs:
     white on the page ground #23262B   →  14.1:1
     white on a tile          #2E3238   →  11.9:1
     white on the raised tile #292D33   →  12.9:1
   The 4.5:1 bar is cleared several times over, and these are 46px numbers.
   Cap colours against the tile: red #CC0000 2.2:1, emerald #007A33 2.4:1 —
   both slightly BETTER than they were on navy, for the reason above.

   TV COMPAT: plain hex only. No color-mix(), oklch(), nesting, :is()/:where() —
   Tizen Chromium 69/76 drops an entire stylesheet on one modern token.
   ========================================================================== */

:root{
  /* ONE CHARCOAL, EVERYWHERE (owner 2026-08-06: "we want all charcoal to be the
     same color as the card container background charcoal"). The first cut had
     three depths — page darker than the tile, header darker still — which is the
     usual way to make a card read as an object. The owner wants it flat, so the
     page ground, the tiles, the header and the table cells are all #2E3238, the
     card colour. What separates a card now is its BORDER and its 5px cap, not a
     step in brightness. If it ever needs the depth back, drop --bg to #23262B
     and --panel-2 to #292D33 and nothing else has to change. */
  --bg:#2E3238; --panel:#2E3238; --panel-2:#2E3238;
  --line:#454A52; --line-soft:#3A3F46;
  --row-hover:#383D45;

  /* neutral inks. The navy set is blue-tinted and reads faintly cold against a
     neutral ground; these are straight greys so nothing looks tinted. */
  --ink:#FFFFFF; --ink-dim:#C9CDD2; --ink-faint:#999FA7;
}

html,body{background:var(--bg)}
header.topbar{background:var(--panel-2);border-bottom:2px solid var(--line)}
.kpi{background:var(--panel-2);border-color:var(--line)}

/* the card hover tint has to move with the ground or it flashes navy on grey */
.pf-card:hover{background:#383D45}

/* sticky Every Seat name cell paints its own background so the row scrolls
   under it — it was pinned to the navy panel and would stripe blue on charcoal */
#dtBody td.nm{background:var(--panel)}

/* off/idle seat dot: the navy value disappears against grey */
:root{ --off:#7C838C; }

/* ── THE VARIETY ORANGE BECOMES BRIGHT YELLOW (owner 2026-08-06) ────────────
   "for all instances of this orange that this color has besides the watch
   orange itself make it a bright yellow."

   The swatch orange #E69138 was doing two unrelated jobs off one hex:
     1. a VERDICT — WATCH / WARNING (--warn). The owner's 2026-07-29 rule is
        "watch will always be orange hue provided", so this one does not move.
     2. VARIETY — one of the five card-cap hues, the leaderboard's third-place
        column, the Away seat state and the tail of the signal ramp. None of
        those carry meaning; they exist so two neighbouring cards never match.
   Only job 2 turns yellow, which is why this file re-points --c-orange and
   leaves --warn alone. A card cap can now never be confused with a watch tile.

   AND THE ROTATION HAD TO MOVE WITH IT. #F1C232 already sat at 5n+3, so a
   bright yellow at 5n+4 would have put two yellows side by side — the one thing
   the rotation exists to prevent ("no two same colours next to each other").
   Red and yellow swap slots: blue, green, gold, red, bright-yellow. Every
   adjacent pair in the cycle, including the wrap from 5n+5 back to 5n+1, is now
   two different hues.
   TV COMPAT: plain hex, no modern tokens. */
:root{
  --c-orange:#FFD21F;          /* variety only — NOT the watch verdict */
  --away:#FFD21F;              /* the Away seat state rode the same hex */
  --sig-ramp:linear-gradient(90deg,#3D85C6,#6AA84F 55%,#FFD21F);
}
.pf-card:nth-child(5n+4){--cap:var(--c-red)}
.pf-card:nth-child(5n+5){--cap:var(--c-orange)}
/* third-place podium column carried the orange as a literal rgba, so the var
   swap above could not reach it */
.clb-pod-3 .clb-pcol{background:rgba(255,210,31,.13);border-color:rgba(255,210,31,.40)}

/* ── TOTAL DEALS TODAY: the count IS the card (owner 2026-08-06) ────────────
   "make the deals number much bigger so we dont have to be restricted by the
   thing below it now" — the MTD bar, the goal line and the Avg deal row came
   out of the card in js/16, so nothing is left to squeeze the number.

   IT NEEDS ITS OWN CLASS BECAUSE TWO !important RULES OWN THAT ELEMENT:
     8-light.css  .pf-big{font-size:46px !important}
     7-perf.css   .pf-today .pf-big.o{font-size:112px!important}
                  .pf-today .pf-big:not(.o){font-size:42px!important}
   The 112px only ever applied through the `.o` (warn) class — so dropping `.o`
   to get the colour off the watch orange silently shrank the number to 42px.
   Rather than re-borrow a verdict class for sizing, the card carries
   .pf-deals-xl and this rule beats both.

   The colour is the bright yellow the owner asked for — NOT var(--warn), which
   stays orange for watch/warning. A deal count was never a warning; it only
   looked like one because it borrowed that class. */
.pf-today .pf-card .pf-big.pf-deals-xl{
  font-size:150px !important; line-height:1.02; letter-spacing:-.02em;
  color:var(--c-orange);        /* = #FFD21F, the bright yellow */
  /* SITS AT THE TOP, under its own label (owner 2026-08-06: "the 16 should be
     at the top not middle"). The card had been flex-centred so the lone number
     floated in the middle of a tile whose height is set by its taller
     neighbours; now it flows normally, straight under the title, and the empty
     space falls to the bottom where it reads as room rather than as drift. */
  margin-top:2px;
}

/* ── CITY FINANCE LOGO, TOP LEFT ──────────────────────────────────────────
   The supplied on-dark export has white lettering and red/blue slashes on a
   transparent ground. The topbar cannot grow because its tabs and live chips
   share the row; width remains automatic so the artwork never distorts. */
/* One knob for both copies. The new City Finance wordmark is much wider than
   the compact prior mark, so these heights keep its occupied header width in
   the same range while the 2048px source remains crisp on a 4K wall. */
:root{ --logo-h:38px;        /* wide City Finance header wordmark */
       --logo-h-chrome:45px; /* Dialer Health / Performance — same ~253px
                                 footprint as the prior artwork, preserving
                                 room for the way-home and scope pills. */ }
.logo .logo-img{
  height:var(--logo-h); width:auto; display:block; flex:0 0 auto;
  image-rendering:auto;
}
.logo{gap:12px}
/* the strapline hangs off the wordmark rather than a second title line */
.logo small{margin-top:0;letter-spacing:1.6px}

/* ── THE MARK ON CHROMELESS VIEWS (owner 2026-08-06) ───────────────────────
   Performance and Dialer Health run chromeless (1-base.css) — the whole top bar
   is hidden and the fixed "⌂ Board" pill is the only chrome. That took the logo
   with it, so #chromeLogo puts it back in the same top-left corner, at the same
   44px as the header copy.

   The ⌂ Board pill moves right to sit beside it instead of underneath. Both
   views reserve only the new wordmark's real height; the retired tall-logo
   spacer is gone. The mark stays fixed while the views scroll underneath. */
#chromeLogo{display:none}
body.chromeless #chromeLogo{
  display:block; position:fixed; top:8px; left:14px; z-index:61;
  height:var(--logo-h-chrome); width:auto; cursor:pointer;
}
body.chromeless #chromeLogo:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
/* THE SCOPE PILLS SIT BESIDE THE MARK, NOT UNDER IT (owner 2026-08-06: "put
   every desk sales floor and servicing to be on the right of the logo and not
   below it"). The logo is fixed, so the view used to be pushed down past it and
   the pill row landed underneath. Instead the view starts near the top and only
   its FIRST header row is indented past the mark — every section below it runs
   full width, and the row is nudged down so the pills centre against the
   wordmark rather than its ascenders. */
body.chromeless #viewDialer{padding-top:8px}
/* PERFORMANCE KEEPS CLEARANCE INSTEAD OF THE INDENT. Its first rows are two
   full-width tab strips (Sales/Boarding Pass/… and the jump chips), not the
   single scope row Dialer Health has, so that view starts directly below the
   45px logo with a compact gap. */
body.chromeless #viewPerf{padding-top:58px}
body.chromeless #viewDialer > .pf-h:first-child{
  margin-left:272px; margin-top:0;
  /* Hold exactly the new wordmark's 45px box. The old 74px spacer was sized for
     the retired tall mark and created a large dead band above Live Floor. */
  min-height:45px; display:flex; align-items:center;
}
/* the way-home pill goes to the far right so it fights neither the mark nor the
   pills — it was parked in the exact spot the scope row now occupies */
body.chromeless #chromeBack{left:auto;right:14px;top:14px;transform:none}