/* ═══════════════════════════════════════════════════════════════════════════
   MUMS SUPPORT STUDIO · COMMAND DECK              (FEATURE cdk-1, 2026-08-13)
   ───────────────────────────────────────────────────────────────────────────
   MACE-cleared refactor: "Solid Slate" multi-tone architecture. Replaces the
   flat total-black studio with a solid, layered, wireframe console.

   WHAT THIS FILE IS
   ─────────────────
   The LAST stylesheet on support_studio.html — after enterprise_theme.css and
   signal-desk.css. It is an OVERRIDE LAYER, exactly like signal-desk.css: no
   file underneath it is edited, so the whole refactor is one <link> away from
   being reverted.

   It lives in /css (not /css/support_studio) ON PURPOSE. tests/unit/
   studio_latency.test.js section 6 asserts enterprise_theme.css is the last
   sheet matching /css/support_studio/ — that gate protects LAZY FEATURE sheets
   from outranking the theme, and this file is not one. Same reasoning, and the
   same location, as signal-desk.css.

   FOUR RULES THIS SHEET ENCODES
   ─────────────────────────────
   1 · ELEVATION IS A LADDER, NOT A COLOUR. Five solid tones, each a real step:
       app L0 -> chrome L1 -> card L2 -> row/input L3 -> floating L4. A surface
       tone states its height. Nothing is translucent and nothing is blurred —
       every backdrop-filter inside the dark studio is killed in section 2.
   2 · THE BORDER IS THE GRID. One weight (1px), one colour (--cd-line). The
       ONLY things allowed to break it are focus, active and live states, which
       jump to Electric Blue / Emerald. That is what makes them read.
   3 · ONE BRIGHT THING. The blue CTA fill belongs to "New Case" alone. Every
       other command-bar control is Solid Graphite. Colour elsewhere is
       SEMANTIC (status) or CATEGORICAL (section identity), never decorative.
   4 · SECTIONS HAVE CHARACTER. Section 7 gives Today's Cases, On-Call Tech and
       the Controller Testing Lab three different structural languages —
       ledger, instrument console, device rack — so they stop reading as three
       copies of one card.

   SCOPE — DARK ONLY (MACE, 2026-08-13). Every rule is scoped under
   html[data-ss-theme="dark"]. The Light theme is deliberately untouched.

   INK IS MEASURED, NOT GUESSED (the trap in the psa-quickbase-sites-qa skill:
   a hue is not ink). Contrast of every ink token against all five tones:
     ink   #F2F4F7  18.3 -> 14.4:1      ink-2 #A8B0BE  9.2 -> 7.3:1
     ink-3 #8A93A1   6.5 ->  5.1:1      link  #4DA3FF  7.7 -> 6.1:1
     lime  #C6F24E  15.5 -> 12.3:1      crit  #FF5C5C  6.7 -> 5.3:1
   White on the CTA fill #2F6FCE measures 4.9:1.

   cdk-2 (2026-08-13, MACE) — WHY THE PALETTE CHANGED AGAIN
   ────────────────────────────────────────────────────────
   MACE, on the shipped cdk-1: "tanggalin mo ang blue accent na parang
   nakababad sa screen na blurry effect. sa support studio ang pangit. dapat
   maging katulad lng sa Main na walang blue foggy effect or accent."

   TWO SEPARATE CAUSES, both measurable, both fixed here:

   1 · THE CAST. cdk-1 shipped a blue-tinted slate. Chroma (max channel minus
       min) on the card tone was 28; Main's equivalent is 8. Every surface in
       the console carried three to four times Main's blue lean AT ONCE —
       that is the "nakababad" (soaked) effect. The ladder is now Main's own
       APEX "Signal Desk" graphite, chroma 3-11, and the accent is back to
       Main's acid lime #C6F24E. Blue survives in three SEMANTIC roles only:
       a link, the Investigating / Walmart-technician status hue, and the one
       CTA fill — all three of which predate cdk-1.
   2 · THE FOG. 345 coloured glow shadows ship across the studio sheets, and
       cdk-1 added a 64px-blur panel shadow on top. Coloured blur on a tinted
       mid-dark reads as haze. Section 2.3 removes every shadow inside the
       dark studio and re-declares only the ones that carry structure, which
       is also Main's language: flat planes, hairline rules, no halos.

   @module MUMS/Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   1 · TOKENS — the Solid Slate ramp
   ════════════════════════════════════════════════════════════════════════ */
html[data-ss-theme="dark"] {

  /* ── ELEVATION LADDER — NEUTRAL GRAPHITE (cdk-2) ────────────────────
     MACE: "tanggalin mo ang blue accent na parang nakababad sa screen na
     blurry effect… dapat maging katulad lng sa Main na walang blue foggy
     effect or accent."

     He is right, and the numbers say exactly how right. CHROMA (max channel
     minus min) is the measure of a colour cast on a near-black:

         cdk-1 slate   L0 13   L2 28   L4 35
         Main SIGNAL DESK      bg  3   panel2  8   border 12

     The old ramp carried three to four times Main's blue lean, on EVERY
     surface at once — that is the "nakababad" (soaked) effect, and because a
     tinted mid-dark reads softer than a neutral one, it also looked foggy.

     The ladder below IS Main's palette. L0/L1/L2 and the border are the
     literal APEX "Signal Desk" values from Config.THEMES (bg #07070A, panel
     #0D0E12, panel2 #14161C, border #23262F, bgRad3 #050508); L3 and L4 are
     the same ramp continued at the same step size, because the studio needs
     two rungs Main does not have (rows, and a floating layer). Chroma never
     exceeds 11 — under Main's own border.
     ──────────────────────────────────────────────────────────────────── */
  --cd-l0:   #07070A;   /* L0 · app ground        (Main bg)      chroma  3 */
  --cd-l1:   #0D0E12;   /* L1 · chrome            (Main panel)   chroma  5 */
  --cd-l2:   #14161C;   /* L2 · cards, panels     (Main panel2)  chroma  8 */
  --cd-l3:   #191C22;   /* L3 · rows, inputs, hover             chroma  9 */
  --cd-l4:   #1F222A;   /* L4 · floating only                   chroma 11 */
  --cd-well: #050508;   /* recessed well          (Main bgRad3)  chroma  3 */

  /* ── THE GRID ───────────────────────────────────────────────────────── */
  --cd-line:        #23262F;   /* Main's border, verbatim — the hairline  */
  --cd-line-strong: #343945;   /* floating edges, hover, internal rules   */
  --cd-line-soft:   #17191E;   /* hairline inside an already-bordered box */

  /* ── INK — Main's text and muted, verbatim ──────────────────────────── */
  --cd-ink:   #F2F4F7;   /* 18.3 → 14.4:1 across the ladder               */
  --cd-ink-2: #A8B0BE;   /*  9.2 →  7.3:1                                 */
  --cd-ink-3: #8A93A1;   /*  6.5 →  5.1:1                                 */

  /* ── THE SIGNAL — one accent, and it is Main's ──────────────────────
     Acid lime #C6F24E is what MAIN and the pre-cdk-1 studio both used for
     focus, active and interaction. cdk-1 replaced it with Electric Blue and
     that single substitution is what put blue on every border, every focus
     ring, every hover wash and every active tab at once. It is back. */
  --cd-accent:      #C6F24E;
  --cd-accent-2:    #D7F97A;
  --cd-accent-soft: #262C21;   /* solid 10% lime over L2 — a fill, not a wash */

  /* ── SEMANTIC — status only, NEVER structure ────────────────────────
     Blue survives in exactly three roles, all of which predate cdk-1 and none
     of which is a surface, a border or a focus state: a LINK, the
     "Investigating"/Walmart-technician status hue, and the one CTA fill. */
  --cd-link:      #4DA3FF;   /* links + identifiers (studio dark link)    */
  --cd-info:      #58A6FF;   /* status hue only                           */
  --cd-info-soft: #1E2A3C;
  --cd-cta:       #2F6FCE;   /* the studio's ORIGINAL New Case fill        */
  --cd-cta-hover: #3B7CDB;   /* white on #2F6FCE measures 4.9:1           */

  --cd-emerald:     #3DDC84;
  --cd-emerald-ink: #3DDC84;
  --cd-emerald-soft:#132D2A;
  --cd-amber:       #FFB020;
  --cd-amber-ink:   #FFB020;
  --cd-amber-soft:  #352C1D;
  --cd-rose:        #FF5C5C;
  --cd-rose-ink:    #FF5C5C;
  --cd-rose-soft:   #352025;
  --cd-teal:        #35D6D0;
  --cd-violet:      #93A2B8;
  --cd-orange:      #FF8A3D;
  --cd-graphite:    #23262F;   /* every SECONDARY command-bar button      */
  --cd-graphite-hi: #343945;

  /* ── TYPE ───────────────────────────────────────────────────────────── */
  --cd-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
             'Segoe UI', 'Plus Jakarta Sans', system-ui, sans-serif;
  --cd-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular,
             Menlo, monospace;

  /* ── GEOMETRY ───────────────────────────────────────────────────────── */
  --cd-pad:    14px;    /* the mandated cell / list padding               */
  --cd-pad-sm: 10px;
  --cd-r:      10px;
  --cd-r-sm:   6px;
  --cd-spine:  3px;     /* the section-header colour bar                  */

  /* THE FOG, PART ONE. cdk-1 lifted the floating panel with a 64px blur at
     62% black. On a tinted mid-dark that reads as haze, not elevation. Main
     lifts with 12px/32px at .30 — tighter, darker, neutral. Elevation here
     comes from the TONE and the 1px edge; the shadow only anchors it. */
  --cd-shadow-float: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --cd-shadow-card:  0 1px 0 #050508;
}

/* ────────────────────────────────────────────────────────────────────────
   1b · THE RE-POINT
   Every studio surface resolves through these two token families, so
   re-aiming them here re-skins the whole console without editing one rule
   underneath. --st-* is the enterprise layer, --ss-* the legacy sheets;
   both must move TOGETHER or the studio splits into two palettes.
   ──────────────────────────────────────────────────────────────────────── */
html[data-ss-theme="dark"] {
  --st-bg:          var(--cd-l0);
  --st-surface:     var(--cd-l2);
  --st-surface-2:   var(--cd-l3);
  --st-surface-3:   var(--cd-l4);
  --st-line:        var(--cd-line);
  --st-line-strong: var(--cd-line-strong);

  --st-text:   var(--cd-ink);
  --st-text-2: var(--cd-ink-2);
  --st-text-3: var(--cd-ink-3);
  --st-muted:  var(--cd-ink-2);
  --st-faint:  var(--cd-ink-3);

  --st-accent:        var(--cd-accent);
  --st-accent-strong: var(--cd-accent-2);
  --st-accent-soft:   var(--cd-accent-soft);
  --st-link:          var(--cd-link);
  --st-teal:          var(--cd-teal);
  --st-success:       var(--cd-emerald-ink);
  --st-success-bg:    var(--cd-emerald-soft);
  --st-success-line:  #1C6B57;
  --st-danger:        var(--cd-rose-ink);
  --st-danger-bg:     var(--cd-rose-soft);
  --st-danger-line:   #6E2B41;
  --st-warn:          var(--cd-amber-ink);
  --st-warn-bg:       var(--cd-amber-soft);
  --st-warn-line:     #6B5327;
  --st-info-bg:       var(--cd-info-soft);
  --st-info-line:     #2E4C7E;
  --st-purple:        var(--cd-violet);
  --st-orange:        var(--cd-orange);

  --st-chrome:        var(--cd-l1);
  --st-chrome-2:      #161A21;
  --st-chrome-active: var(--cd-line);
  --st-chrome-edge:   #050508;
  --st-chrome-text:   var(--cd-ink);
  --st-chrome-dim:    var(--cd-ink-2);
  --st-chrome-muted:  var(--cd-ink-3);
  --st-chrome-line:   var(--cd-line);
  --st-chrome-wash:   var(--cd-l3);

  --st-shadow-1: var(--cd-shadow-card);
  --st-shadow-2: 0 2px 8px rgba(0,0,0,.45);
  --st-shadow-3: var(--cd-shadow-float);
  --st-focus-ring: 0 0 0 2px var(--cd-accent);

  --st-scroll-thumb:       #343945;
  --st-scroll-thumb-hover: #454B59;

  /* legacy --ss-* family, moved in lock-step */
  --ss-bg:       var(--cd-l0);
  --ss-surface:  var(--cd-l2);
  --ss-surface2: var(--cd-l3);
  --ss-surface3: var(--cd-l4);
  --ss-border:   var(--cd-line);
  --ss-border2:  var(--cd-line-soft);
  --ss-text:     var(--cd-ink);
  --ss-muted:    var(--cd-ink-2);
  --ss-accent:   var(--cd-accent);
  --ss-accent2:  var(--cd-accent-2);
  --ss-green:    var(--cd-emerald-ink);
  --ss-purple:   var(--cd-violet);
  --ss-danger:   var(--cd-rose-ink);
  --ss-warn:     var(--cd-amber-ink);
  --ss-cyan:     var(--cd-teal);
  --ss-orange:   var(--cd-orange);

  /* search_sources.css derives its dim ink from --ss-text at 70%; give it the
     real muted token so the results panel matches the rest of the console. */
  --ssq-dim:  var(--cd-ink-3);
  --ssq-line: var(--cd-line);

  /* signal-desk.css — cdk-1 re-aimed its acid lime at Electric Blue, which is
     how the blue reached the editorial layer too. cdk-2 puts it BACK: these
     now resolve to the same values signal-desk.css ships by default, so the
     studio and Main speak one language again. */
  --pr-signal:  var(--cd-accent);
  --pr-on-fill: #FFFFFF;
  --pr-rule:    var(--cd-line);
  --pr-rule-hi: var(--cd-line-strong);
  --pr-text:    var(--cd-ink);
  --pr-dim:     var(--cd-ink-2);
  --pr-faint:   var(--cd-ink-3);
  --pr-ok:      var(--cd-emerald-ink);
  --pr-warn:    var(--cd-amber-ink);
  --pr-crit:    var(--cd-rose-ink);
  --pr-info:    var(--cd-link);
}

/* ════════════════════════════════════════════════════════════════════════
   2 · SURFACE ROUTING — solid materials only
   ════════════════════════════════════════════════════════════════════════ */

/* ── 2.1 NO GLASS. ANYWHERE. ──────────────────────────────────────────────
   MACE: "Do NOT use any glassmorphism, opacity blends, blur effects, or
   translucent obsidian materials." The studio ships 23 backdrop-filters
   across three sheets; killing them is not only the brief, it removes a real
   bug class — a backdrop-filter makes an element the CONTAINING BLOCK for
   its position:fixed descendants, which is exactly what used to strand
   studio flyouts inside their parent card (see the studio-menu-nav contract).
   One property, one rule, no exceptions inside the dark studio. */
html[data-ss-theme="dark"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 2.3 NO HALOS ─────────────────────────────────────────────────────────
   MACE, cdk-2: "…na parang nakababad sa screen na blurry effect."

   The studio sheets ship 345 box-shadow declarations that carry a CHROMATIC
   colour — glows, not shadows. `.yct-dot-on` alone throws a 6px blue halo on
   every open case in the list. Individually each is a nice touch; together,
   on a page holding forty of them, they are the fog.

   CSS cannot say "remove outer glows but keep insets", so this does the
   honest thing: reset every shadow inside the dark studio, then re-declare
   the handful that carry STRUCTURE rather than decoration. That is also
   Main\'s own language — the APEX theme is described as "graphite canvas,
   zero radius, hairline rules", and its resting surfaces have no glow at all.

   THE RE-DECLARED SET (each one is information, not ornament):
     · the 3px section spines            — which tool am I looking at
     · the floating panel\'s elevation    — this thing is above the page
     · the On-Call well\'s recess         — this readout is set INTO the card
     · the row-hover rules + spine       — which row is under my cursor
     · the focus ring on a form control  — where is my keyboard
     · `.su-cell.linked`\'s inset ring    — this cell publishes an ID CODE
   Anything not on that list was decoration and is gone.

   SPECIFICITY NOTE: this rule is (0,2,1) and lands EARLY, so every
   re-declaration below it wins on order alone at equal weight, and on
   specificity where a selector adds a class. Rules in the sheets underneath
   that carry `!important` at (0,3,1) — `html[data-ss-theme="dark"] .ss-shell
   .x` — would still beat it, which is why section 11 verifies the result in
   a browser instead of trusting the cascade.
   ──────────────────────────────────────────────────────────────────────── */
html[data-ss-theme="dark"] .ss-shell *,
html[data-ss-theme="dark"] #ssq-layer *,
html[data-ss-theme="dark"] .ss-menu-dropdown *,
html[data-ss-theme="dark"] .ss-quickbase-dropdown * {
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Glows are also drawn with `filter: drop-shadow()` in a few feature modules,
   and that one is invisible to a box-shadow reset. */
html[data-ss-theme="dark"] .ss-shell [style*="drop-shadow"],
html[data-ss-theme="dark"] #ssq-layer [style*="drop-shadow"] { filter: none !important; }

/* ── 2.2 THE LADDER, BY ROLE ────────────────────────────────────────────── */
/* L0 · the ground */
html[data-ss-theme="dark"] body,
html[data-ss-theme="dark"] .ss-shell,
html[data-ss-theme="dark"] .ss-body,
html[data-ss-theme="dark"] .ss-canvas,
html[data-ss-theme="dark"] .ss-canvas-inner,
html[data-ss-theme="dark"] #canvas-home {
  background: var(--cd-l0) !important;
}

/* L1 · chrome — top bar, rails, toolbars, status bar */
html[data-ss-theme="dark"] .ss-header,
html[data-ss-theme="dark"] .ss-sidebar,
html[data-ss-theme="dark"] .ss-sidebar.right,
html[data-ss-theme="dark"] .ss-canvas-toolbar,
html[data-ss-theme="dark"] .ss-statusbar,
html[data-ss-theme="dark"] .sfx-bar,
html[data-ss-theme="dark"] .home-toolbar {
  background: var(--cd-l1) !important;
  border-color: var(--cd-line) !important;
}
/* The chrome/ground seam is a real edge, not a fade. */
html[data-ss-theme="dark"] .ss-header { border-bottom: 1px solid var(--cd-line) !important; }
html[data-ss-theme="dark"] .ss-sidebar { border-right: 1px solid var(--cd-line) !important; }
html[data-ss-theme="dark"] .ss-sidebar.right { border-right: 0 !important; border-left: 1px solid var(--cd-line) !important; }

/* L4 · everything that floats. These are the body-level popouts that carry a
   hard-coded near-black and therefore ignore the token re-point. */
html[data-ss-theme="dark"] #ss-beacon-popup,
html[data-ss-theme="dark"] #se2-drawer,
html[data-ss-theme="dark"] .ss-menu-dropdown,
html[data-ss-theme="dark"] .ss-quickbase-dropdown,
html[data-ss-theme="dark"] .oc-next-pop {
  background: var(--cd-l4) !important;
  border: 1px solid var(--cd-line) !important;
  box-shadow: var(--cd-shadow-float) !important;
}

/* Native <option> lists are painted by the OS from the element background;
   two sheets hard-code the old #161b22 and would sit a full step off. */
html[data-ss-theme="dark"] select.odp-input option,
html[data-ss-theme="dark"] .hp-ctl-bk-select option,
html[data-ss-theme="dark"] select option {
  background: var(--cd-l3);
  color: var(--cd-ink);
}

/* The vacant-slot hatch was built from a 1%-white stripe on the old surface.
   Re-cut it solid so it still reads as "empty by design", not as a render bug. */
html[data-ss-theme="dark"] .hp-vacant {
  background: repeating-linear-gradient(45deg,
    var(--cd-l2), var(--cd-l2) 5px,
    var(--cd-l3) 5px, var(--cd-l3) 10px) !important;
  border: 1px dashed var(--cd-line-strong) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   3 · THE WIREFRAME GRID — one border weight, one border colour
   ════════════════════════════════════════════════════════════════════════ */

/* Cards and panels are plates on a grid, not floating blobs: 1px, sharp, and
   the SAME on every section. Depth comes from the tone, not from the edge. */
html[data-ss-theme="dark"] .ss-shell .hp-card,
html[data-ss-theme="dark"] .ss-shell .ss-panel,
html[data-ss-theme="dark"] .ss-shell .ss-card {
  background: var(--cd-l2) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r) !important;
  box-shadow: var(--cd-shadow-card) !important;
}

/* Focus / active / live are the ONLY things that may break the grid colour.
   That exclusivity is what makes them legible at a glance across a wall of
   identical plates. */
html[data-ss-theme="dark"] .ss-shell :focus-visible {
  outline: 2px solid var(--cd-accent) !important;
  outline-offset: 1px;
}
html[data-ss-theme="dark"] .ss-shell input:focus,
html[data-ss-theme="dark"] .ss-shell textarea:focus,
html[data-ss-theme="dark"] .ss-shell select:focus,
html[data-ss-theme="dark"] .ss-search-input:focus {
  border-color: var(--cd-accent) !important;
  box-shadow: 0 0 0 1px var(--cd-accent) !important;
  outline: none !important;
}

/* Form controls and table rows share ONE interactive tone (L3) so an operator
   learns the material once. */
html[data-ss-theme="dark"] .ss-shell input[type="text"],
html[data-ss-theme="dark"] .ss-shell input[type="search"],
html[data-ss-theme="dark"] .ss-shell input[type="number"],
html[data-ss-theme="dark"] .ss-shell input[type="date"],
html[data-ss-theme="dark"] .ss-shell input[type="time"],
html[data-ss-theme="dark"] .ss-shell input[type="email"],
html[data-ss-theme="dark"] .ss-shell input[type="url"],
html[data-ss-theme="dark"] .ss-shell textarea,
html[data-ss-theme="dark"] .ss-shell select,
html[data-ss-theme="dark"] .ss-search-input {
  background: var(--cd-l3) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
  color: var(--cd-ink) !important;
  font-family: var(--cd-sans);
}
html[data-ss-theme="dark"] .ss-shell ::placeholder,
html[data-ss-theme="dark"] .ss-search-input::placeholder { color: var(--cd-ink-3) !important; }

/* Scrollbars belong to the grid too — a bright thumb on a dark rail is one
   more thing competing with the data. */
html[data-ss-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--cd-line-strong);
  border-radius: 2px;
}
html[data-ss-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #454B59; }

/* ════════════════════════════════════════════════════════════════════════
   4 · TYPOGRAPHY + THE SECTION SPINE
   ════════════════════════════════════════════════════════════════════════ */

/* Neo-grotesque across the console. Inter is requested first; the OS faces
   behind it (SF Pro Display / Segoe UI) are the same genre, so a machine that
   never fetches the webfont still renders the intended voice rather than a
   fallback that changes the layout. */
html[data-ss-theme="dark"] body,
html[data-ss-theme="dark"] .ss-shell,
html[data-ss-theme="dark"] .ss-shell input,
html[data-ss-theme="dark"] .ss-shell button,
html[data-ss-theme="dark"] .ss-shell select,
html[data-ss-theme="dark"] .ss-shell textarea,
html[data-ss-theme="dark"] #ssq-layer,
html[data-ss-theme="dark"] #ssq-layer input,
html[data-ss-theme="dark"] #ssq-layer button {
  font-family: var(--cd-sans);
  font-feature-settings: 'cv05' 1, 'ss01' 1, 'tnum' 1;
}

/* THE THREE WEIGHTS (P1 rule 3). Anything that is not one of these three is
   the exception that must justify itself.
     header    600 / uppercase / tracked
     body      400-500 / 14px / normal tracking
     metadata  500 / 12px / muted ink                                      */
html[data-ss-theme="dark"] .ss-shell .hp-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
  color: var(--cd-ink-2) !important;
}

/* ── 4.1 THE COLOUR-CODED SPINE ─────────────────────────────────────────
   Every section header carries a solid 3px bar on its LEFT edge, in that
   section's own hue. It is drawn with an inset box-shadow rather than a
   border so it cannot add a pixel of layout — the header keeps its exact
   height and the card grid does not reflow.

   The hue is CATEGORICAL (which tool am I looking at), never decorative, and
   it is the only place the section hue appears at full strength. That is the
   whole de-uniforming move: six identical plates, six unmistakable labels. */
html[data-ss-theme="dark"] .ss-shell .hp-card-head {
  background: var(--cd-l1) !important;
  border-bottom: 1px solid var(--cd-line) !important;
  box-shadow: inset var(--cd-spine) 0 0 var(--cd-sec, var(--cd-line-strong)) !important;
  padding: 10px 12px 10px 14px !important;
}
html[data-ss-theme="dark"] .ss-shell .hp-card-head .hp-icon {
  background: var(--cd-l3) !important;
  border: 1px solid var(--cd-line) !important;
  color: var(--cd-sec, var(--cd-ink-2)) !important;
  border-radius: var(--cd-r-sm) !important;
}

/* Section identity — assigned once, consumed by the spine, the icon and each
   section's own accents further down. */
html[data-ss-theme="dark"] #hp-odp-card                 { --cd-sec: var(--cd-amber);   }
html[data-ss-theme="dark"] #hp-apps-card                { --cd-sec: var(--cd-violet);  }
html[data-ss-theme="dark"] #hp-controller-testing-lab-card { --cd-sec: var(--cd-teal); }
html[data-ss-theme="dark"] #hp-connect-credential-card  { --cd-sec: var(--cd-teal);    }
html[data-ss-theme="dark"] #oc-card                     { --cd-sec: var(--cd-emerald); }
html[data-ss-theme="dark"] .yct-panel                   { --cd-sec: var(--cd-accent);  }

/* Inline hue washes still live on three of those cards in the shell markup.
   The theme layer already !important-ed the background; the head keeps its
   own inline border-bottom, so it is restated here at equal specificity and
   later position. (A plain inline style loses to !important — only a JS
   `cssText` with !important would be unbeatable, and none is used here.) */
html[data-ss-theme="dark"] .ss-shell #hp-odp-card,
html[data-ss-theme="dark"] .ss-shell #hp-apps-card,
html[data-ss-theme="dark"] .ss-shell #hp-connect-credential-card {
  background: var(--cd-l2) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   5 · THE COMMAND BAR — one bright thing
   ════════════════════════════════════════════════════════════════════════ */

/* SECONDARY CONTROLS: Favorites, the star, Contact Directory, the call
   widget, the cache beacon, the theme toggle and General Settings all become
   the SAME solid graphite chip with crisp ink. Before this they were six
   different tints, which is why the bar read as a toolbar of equals with no
   primary. Uniform secondary is what MAKES a primary possible. */
html[data-ss-theme="dark"] .ss-header-right .sfx-star,
html[data-ss-theme="dark"] .ss-header-right .sfx-hub-btn,
html[data-ss-theme="dark"] .ss-header-right .ss-topbar-contacts,
html[data-ss-theme="dark"] .ss-header-right .ss-call-widget,
html[data-ss-theme="dark"] .ss-header-right .ss-beacon-circle,
html[data-ss-theme="dark"] .ss-header-right .ss-theme-toggle,
html[data-ss-theme="dark"] .ss-header-right > .ss-tab,
html[data-ss-theme="dark"] #ss-tab-config {
  background: var(--cd-graphite) !important;
  border: 1px solid var(--cd-line-strong) !important;
  border-radius: var(--cd-r-sm) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transition: background .14s ease, border-color .14s ease;
}
html[data-ss-theme="dark"] .ss-header-right .sfx-star:hover,
html[data-ss-theme="dark"] .ss-header-right .sfx-hub-btn:hover,
html[data-ss-theme="dark"] .ss-header-right .ss-topbar-contacts:hover,
html[data-ss-theme="dark"] .ss-header-right .ss-call-widget:hover,
html[data-ss-theme="dark"] .ss-header-right .ss-beacon:hover .ss-beacon-circle,
html[data-ss-theme="dark"] .ss-header-right .ss-theme-toggle:hover,
html[data-ss-theme="dark"] .ss-header-right > .ss-tab:hover,
html[data-ss-theme="dark"] #ss-tab-config:hover {
  background: var(--cd-graphite-hi) !important;
  border-color: var(--cd-accent) !important;
  color: #FFFFFF !important;
}
/* Icons inside a graphite chip inherit the chip ink — except the star, whose
   whole job is to be findable, and the semantic beacon dot. */
html[data-ss-theme="dark"] .ss-header-right .sfx-hub-btn i,
html[data-ss-theme="dark"] .ss-header-right .ss-topbar-contacts i,
html[data-ss-theme="dark"] .ss-header-right .ss-call-widget i,
html[data-ss-theme="dark"] .ss-header-right .ss-theme-toggle i,
html[data-ss-theme="dark"] .ss-header-right > .ss-tab i,
html[data-ss-theme="dark"] #ss-tab-config,
html[data-ss-theme="dark"] #ss-tab-config i { color: #FFFFFF !important; }
/* WHY #ss-tab-config is named explicitly and not left to the class selector:
   enterprise_theme.css styles General Settings through an ID
   (#ss-tab-config { background: transparent !important }). An ID beats any
   number of classes, and !important on both sides does not change that — the
   more specific !important wins. A class-only override here silently lost,
   and it lost INVISIBLY: the button simply kept its old skin while every
   other control in the bar changed. Caught by a getComputedStyle probe in
   /_command_deck_harness.html, which is why that harness exists. */
html[data-ss-theme="dark"] .ss-header-right .sfx-star i,
html[data-ss-theme="dark"] .ss-header-right .sfx-star.is-on i { color: var(--cd-amber-ink) !important; }

/* Counts on a graphite chip: a solid slate pill, not a coloured badge. */
html[data-ss-theme="dark"] .ss-header-right .sfx-hub-count,
html[data-ss-theme="dark"] .ss-header-right .ss-tbc-count {
  background: var(--cd-l4) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-ink) !important;
  font-family: var(--cd-mono);
  font-size: 10px !important;
  font-weight: 600 !important;
}
/* The active tab is the one graphite chip allowed a blue edge. */
html[data-ss-theme="dark"] .ss-header-right > .ss-tab.active,
html[data-ss-theme="dark"] #ss-tab-config.active {
  background: var(--cd-accent-soft) !important;
  border-color: var(--cd-accent) !important;
  color: #FFFFFF !important;
}

/* ── THE ONE BRIGHT THING ────────────────────────────────────────────────
   New Case is the only fill in the console allowed to be loud. cdk-2 puts it
   back on the studio's ORIGINAL #2F6FCE (white text 4.9:1) instead of cdk-1's
   brighter #2563EB — this is the button MACE already had and never objected
   to, and Main's own New Case button is the same family. It is a discrete
   solid control, not an accent bathing the page, which is the distinction
   the cdk-2 brief actually draws. */
html[data-ss-theme="dark"] .ss-new-case-btn {
  background: var(--cd-cta) !important;
  border: 1px solid var(--cd-cta) !important;
  border-radius: var(--cd-r-sm) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  box-shadow: var(--cd-shadow-card) !important;
}
html[data-ss-theme="dark"] .ss-new-case-btn:hover {
  background: var(--cd-cta-hover) !important;
  border-color: var(--cd-cta-hover) !important;
}
html[data-ss-theme="dark"] .ss-new-case-btn i { color: #FFFFFF !important; }

/* Nav tabs read as a rail of labels; the active one gets a solid underline in
   the accent rather than a filled pill, so it cannot be confused with the CTA. */
html[data-ss-theme="dark"] .ss-tabs .ss-tab {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--cd-ink-2) !important;
  border-radius: var(--cd-r-sm) var(--cd-r-sm) 0 0 !important;
}
html[data-ss-theme="dark"] .ss-tabs .ss-tab:hover {
  background: var(--cd-l2) !important;
  color: var(--cd-ink) !important;
}
html[data-ss-theme="dark"] .ss-tabs .ss-tab.active {
  background: var(--cd-l2) !important;
  border-color: var(--cd-line) !important;
  border-bottom: 2px solid var(--cd-accent) !important;
  color: #FFFFFF !important;
}

/* ════════════════════════════════════════════════════════════════════════
   6 · THE FLOATING SEARCH RESULTS PANEL
   ────────────────────────────────────────────────────────────────────────
   MACE: "The search results modal blends completely into the background. It
   lacks depth, elevation and clear boundaries. The data text and icons feel
   cluttered and hard to read."

   Both halves of that were true, and they had the SAME cause: the panel was
   painted with var(--ss-surface) — the identical token every card behind it
   uses — so it was, literally, the same colour as the page. Four moves fix it
   and none of them is a blur:

     1 · TONE      the panel is the only thing on L4. It is a full step above
                   the cards it covers, so the boundary exists even where the
                   shadow is clipped.
     2 · EDGE      1px solid Electric Blue. An open results panel IS the
                   focused element (rule 2 of this sheet), and it is the only
                   surface on screen wearing that edge while it is open.
     3 · SHADOW    a deep, tight drop shadow plus a 1px dark outer ring, so
                   the panel casts against whatever it lands on.
     4 · BREATH    14px cells, a 2-line clamp instead of a hard ellipsis, and
                   a sticky header on its own tone.
   ════════════════════════════════════════════════════════════════════════ */
html[data-ss-theme="dark"] .ssq-panel,
html[data-ss-theme="dark"] .ssq-menu {
  background: var(--cd-l4) !important;
  border: 1px solid var(--cd-accent) !important;
  border-radius: var(--cd-r) !important;
  box-shadow:
    0 0 0 1px #05080F,
    var(--cd-shadow-float) !important;
}

/* The head is the panel's identity strip: source hue on the left as a solid
   3px spine, title in the header voice, count as mono metadata. */
html[data-ss-theme="dark"] .ssq-panel-head {
  background: var(--cd-l1) !important;
  border-bottom: 1px solid var(--cd-line) !important;
  box-shadow: inset var(--cd-spine) 0 0 var(--ssq-src, var(--cd-accent)) !important;
  padding: 12px 12px 12px var(--cd-pad) !important;
}
html[data-ss-theme="dark"] .ssq-panel-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .085em !important;
  color: #FFFFFF !important;
}
html[data-ss-theme="dark"] .ssq-panel-meta {
  font-family: var(--cd-mono);
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--cd-ink-3) !important;
}
html[data-ss-theme="dark"] .ssq-panel-x {
  background: var(--cd-graphite) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-ink-2) !important;
  border-radius: var(--cd-r-sm) !important;
}
html[data-ss-theme="dark"] .ssq-panel-x:hover {
  background: var(--cd-rose-soft) !important;
  border-color: var(--cd-rose) !important;
  color: var(--cd-rose-ink) !important;
}
html[data-ss-theme="dark"] .ssq-panel-body { padding: var(--cd-pad) !important; }

/* ── The results table ──────────────────────────────────────────────────── */
html[data-ss-theme="dark"] .ssq-table-wrap {
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
  background: var(--cd-l2) !important;
}
html[data-ss-theme="dark"] .ssq-table { font-size: 12px !important; }
html[data-ss-theme="dark"] .ssq-table th {
  background: var(--cd-l1) !important;
  border-bottom: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-ink-3) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  padding: 11px var(--cd-pad) !important;
}
/* 14px cells, and text that WRAPS to two lines instead of being guillotined
   by an ellipsis at 200px. A site address the operator cannot read is not a
   result, it is a tooltip they have to hunt for. */
html[data-ss-theme="dark"] .ssq-table td {
  padding: var(--cd-pad) !important;
  border-bottom: 1px solid var(--cd-line-soft) !important;
  color: var(--cd-ink) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
  max-width: 280px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
html[data-ss-theme="dark"] .ssq-table td > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Zebra + a solid hover with a blue spine: the row you are on is unambiguous
   even when the cursor is at the far right of a wide table. */
html[data-ss-theme="dark"] .ssq-table tbody tr:nth-child(even) > td { background: var(--cd-l3); }
html[data-ss-theme="dark"] .ssq-tr:hover > td {
  background: var(--cd-accent-soft) !important;
  box-shadow: inset 0 1px 0 var(--cd-line-strong), inset 0 -1px 0 var(--cd-line-strong);
}
html[data-ss-theme="dark"] .ssq-tr:hover > td:first-child { box-shadow: inset var(--cd-spine) 0 0 var(--cd-accent); }
html[data-ss-theme="dark"] .ssq-td-act { padding: 8px var(--cd-pad) !important; }
html[data-ss-theme="dark"] .ssq-th-act, html[data-ss-theme="dark"] .ssq-td-act { width: 56px; }
html[data-ss-theme="dark"] .ssq-mono {
  font-family: var(--cd-mono);
  font-size: 11px !important;
  opacity: 1 !important;
  color: var(--cd-ink-2) !important;
}

/* ── Row actions and links inside the panel ─────────────────────────────── */
html[data-ss-theme="dark"] .ssq-view {
  width: 28px; height: 28px;
  background: var(--cd-graphite) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-ink) !important;
  border-radius: var(--cd-r-sm) !important;
}
html[data-ss-theme="dark"] .ssq-view:hover {
  background: var(--cd-cta) !important;
  border-color: var(--cd-accent) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
html[data-ss-theme="dark"] .ssq-view.off {
  background: var(--cd-l2) !important;
  border-color: var(--cd-line) !important;
  color: var(--cd-ink-3) !important;
}
/* "Open docs" is a real link and now looks like one: emerald ink on a solid
   chip, not a dashed underline that reads as a spelling error. */
html[data-ss-theme="dark"] .ssq-doclink {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--cd-line-strong) !important;
  border-bottom: 1px solid var(--cd-line-strong) !important;
  border-radius: var(--cd-r-sm);
  background: var(--cd-l3);
  color: var(--cd-emerald-ink) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
html[data-ss-theme="dark"] .ssq-doclink:hover {
  background: var(--cd-emerald-soft) !important;
  border-color: var(--cd-emerald) !important;
  border-bottom-style: solid !important;
}
html[data-ss-theme="dark"] .ssq-none { color: var(--cd-ink-3) !important; }

/* States and the filter chip — semantic fills on solid slate. */
html[data-ss-theme="dark"] .ssq-state {
  background: var(--cd-l2) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
  color: var(--cd-ink-2) !important;
  padding: var(--cd-pad) !important;
  font-size: 12px !important;
}
html[data-ss-theme="dark"] .ssq-state.err {
  background: var(--cd-rose-soft) !important;
  border-color: var(--cd-rose) !important;
  color: var(--cd-rose-ink) !important;
}
html[data-ss-theme="dark"] .ssq-state-sub {
  background: var(--cd-amber-soft) !important;
  border-color: var(--cd-amber) !important;
  color: var(--cd-amber-ink) !important;
}
html[data-ss-theme="dark"] .ssq-filterchip {
  background: var(--cd-amber-soft) !important;
  border: 1px solid var(--cd-amber) !important;
  color: var(--cd-amber-ink) !important;
  border-radius: var(--cd-r-sm) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* ── The source picker + its chip ───────────────────────────────────────── */
html[data-ss-theme="dark"] .ssq-menu-head {
  background: var(--cd-l1) !important;
  border-bottom: 1px solid var(--cd-line) !important;
  color: var(--cd-ink-3) !important;
  padding: 11px var(--cd-pad) !important;
}
html[data-ss-theme="dark"] .ssq-menu-body { padding: 8px !important; }
html[data-ss-theme="dark"] .ssq-mi {
  border: 1px solid transparent !important;
  border-radius: var(--cd-r-sm) !important;
  padding: 11px var(--cd-pad-sm) !important;
  color: var(--cd-ink) !important;
}
html[data-ss-theme="dark"] .ssq-mi:hover,
html[data-ss-theme="dark"] .ssq-mi:focus-visible {
  background: var(--cd-l3) !important;
  border-color: var(--cd-accent) !important;
}
html[data-ss-theme="dark"] .ssq-mi[aria-checked="true"] {
  background: var(--cd-accent-soft) !important;
  border-color: var(--cd-accent) !important;
}
/* The source chip on the search box keeps its source dot but sits on graphite
   like every other secondary control. */
html[data-ss-theme="dark"] .ss-srcchip {
  background: var(--cd-graphite) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: #FFFFFF !important;
  border-radius: var(--cd-r-sm) !important;
}
html[data-ss-theme="dark"] .ss-srcchip:hover {
  background: var(--cd-graphite-hi) !important;
  border-color: var(--ssq-src, var(--cd-accent)) !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   7 · SECTION DE-DUPLICATION — three tools, three structural languages
   ────────────────────────────────────────────────────────────────────────
   MACE: "Every component looks identical in weight and styling. They merge
   together visually, causing high cognitive load."

   Colour alone cannot fix that — a blue card and a green card are still two
   cards. Each of the three has to be built from a different STRUCTURE, so it
   is recognisable in peripheral vision before a single word is read:

     Today's Cases  ->  LEDGER   flat rows, hairline rules, zebra, status
                                 spine. No inner card. Reads as a list.
     On-Call Tech   ->  CONSOLE  recessed instrument wells, monospace
                                 readouts, a hard-ruled 2-up crew split.
                                 Reads as a panel of gauges.
     Controller Lab ->  RACK     discrete bays, each with a solid rack rail
                                 and an LED. Reads as hardware.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 7.1 · TODAY'S CASES = THE LEDGER ───────────────────────────────────
   MODIFICATION 1 of 3: DE-CARD THE ROWS. The entries were 12px-radius cards
   with their own border, background, shadow AND a hover lift — nine cards
   stacked inside a tenth card. They become ledger rows: no radius, no
   shadow, no transform, one shared hairline, and the status colour reduced
   to a 3px spine. Scanning a list of 40 cases is now a vertical read instead
   of forty separate objects.

   The hover lift is removed on purpose and not only for looks: a translateY
   moves the hit area, so a cursor resting on a row edge flips hover on and
   off every frame. That exact bug was paid for once already on the main
   page's tiles (the "counter blinks fast on hover" report). */
html[data-ss-theme="dark"] .yct-panel {
  background: var(--cd-l1) !important;
  border-right: 1px solid var(--cd-line) !important;
}
html[data-ss-theme="dark"] .yct-header {
  background: var(--cd-l1) !important;
  border-bottom: 1px solid var(--cd-line) !important;
  box-shadow: inset var(--cd-spine) 0 0 var(--cd-accent);
  padding: var(--cd-pad) var(--cd-pad) 10px !important;
}
html[data-ss-theme="dark"] .yct-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: #FFFFFF !important;
}
html[data-ss-theme="dark"] .yct-meta { font-size: 12px !important; color: var(--cd-ink-3) !important; }
html[data-ss-theme="dark"] .yct-count {
  background: var(--cd-l4) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-ink) !important;
  font-family: var(--cd-mono);
}
html[data-ss-theme="dark"] .yct-list { padding: 0 !important; }
html[data-ss-theme="dark"] .yct-entry {
  margin-bottom: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cd-line-soft) !important;
  border-radius: 0 !important;
  background: var(--cd-l1) !important;
  box-shadow: none !important;
  transform: none !important;
}
html[data-ss-theme="dark"] .yct-entry:nth-child(even) { background: var(--cd-l2) !important; }
html[data-ss-theme="dark"] .yct-entry:hover,
html[data-ss-theme="dark"] .yct-entry.yct-warn:hover,
html[data-ss-theme="dark"] .yct-entry.yct-green:hover {
  background: var(--cd-l3) !important;
  border-color: var(--cd-line-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}
/* the status spine — solid, full height, no gradient */
html[data-ss-theme="dark"] .yct-accent { width: var(--cd-spine) !important; border-radius: 0 !important; }
html[data-ss-theme="dark"] .yct-acc-blue  { background: var(--cd-info) !important; }
html[data-ss-theme="dark"] .yct-acc-warn  { background: var(--cd-amber) !important; }
html[data-ss-theme="dark"] .yct-acc-green { background: var(--cd-emerald) !important; }
html[data-ss-theme="dark"] .yct-acc-init  { background: var(--cd-line-strong) !important; }
html[data-ss-theme="dark"] .yct-card-header {
  padding: 12px var(--cd-pad) 10px !important;
  border-bottom: 1px solid var(--cd-line-soft) !important;
}
html[data-ss-theme="dark"] .yct-card-body { padding: 10px var(--cd-pad) 0 !important; }
html[data-ss-theme="dark"] .yct-cnum {
  font-family: var(--cd-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cd-link) !important;
}
/* status chips: solid slate plate + semantic ink + semantic edge */
html[data-ss-theme="dark"] .yct-badge {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  border-radius: var(--cd-r-sm) !important;
  padding: 3px 8px !important;
}
html[data-ss-theme="dark"] .yct-cb-inv  { background: var(--cd-info-soft) !important;      color: var(--cd-link) !important;    border: 1px solid var(--cd-info) !important; }
html[data-ss-theme="dark"] .yct-cb-init { background: var(--cd-amber-soft) !important;   color: var(--cd-amber-ink) !important;   border: 1px solid var(--cd-amber) !important; }
html[data-ss-theme="dark"] .yct-cb-res  { background: var(--cd-emerald-soft) !important; color: var(--cd-emerald-ink) !important; border: 1px solid var(--cd-emerald) !important; }
html[data-ss-theme="dark"] .yct-cb-wait { background: #2A2745 !important;                color: var(--cd-violet) !important;      border: 1px solid var(--cd-violet) !important; }
html[data-ss-theme="dark"] .yct-age-pill,
html[data-ss-theme="dark"] .yct-time-chip {
  background: var(--cd-l3) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
  color: var(--cd-ink-2) !important;
  font-family: var(--cd-mono);
}
/* THE LAST TWO WASHES IN THE LEDGER (cdk-2). Both are `rgba(hue, .1)` fills
   from main_studio.css — a 10% hue over a near-black is exactly the muddy,
   "soaked" look MACE named. Identity moves to the INK and the 1px edge, where
   it stays legible; the fill goes solid slate like every other chip. */
html[data-ss-theme="dark"] .yct-icon {
  background: var(--cd-l3) !important;
  border: 1px solid var(--cd-line) !important;
  color: var(--cd-accent) !important;
}
html[data-ss-theme="dark"] .yct-eu-tag {
  background: var(--cd-l3) !important;
  border: 1px solid var(--cd-line) !important;
  color: var(--cd-violet) !important;
  font-weight: 500 !important;
}
/* filter pills read as a segmented control, not as four more buttons */
html[data-ss-theme="dark"] .yct-pill {
  background: var(--cd-l2) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
  color: var(--cd-ink-2) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
html[data-ss-theme="dark"] .yct-pill:hover:not(.active) { border-color: var(--cd-line-strong) !important; color: var(--cd-ink) !important; }
html[data-ss-theme="dark"] .yct-pill.active {
  background: var(--cd-accent-soft) !important;
  border-color: var(--cd-accent) !important;
  color: #FFFFFF !important;
}

/* ── 7.2 · ON-CALL TECH = THE INSTRUMENT CONSOLE ────────────────────────
   MODIFICATION 2 of 3: RECESS THE READOUTS. Everything in this card used to
   sit on the same plane as the card itself, so a live countdown had the same
   visual weight as a label. The status strip now drops INTO the card — a
   darker well with an inset top edge — and the numbers move to monospace at
   a size the others do not use. A recess cannot be confused with a plate, so
   this card no longer shares a silhouette with anything else on the page. */
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-strip {
  background: var(--cd-well) !important;
  border-bottom: 1px solid var(--cd-line) !important;
  box-shadow: inset 0 1px 0 #05080F, inset 0 -1px 0 var(--cd-line);
  padding: 12px var(--cd-pad) !important;
}
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-clock-val {
  font-family: var(--cd-mono) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--cd-emerald-ink) !important;
}
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-clock-cap,
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-when-cap,
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-col-lbl {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  color: var(--cd-ink-3) !important;
}
/* the LIVE state is the one thing in the card allowed a full-strength hue */
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-live-badge {
  background: var(--cd-emerald-soft) !important;
  border: 1px solid var(--cd-emerald) !important;
  color: var(--cd-emerald-ink) !important;
  border-radius: var(--cd-r-sm) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
html[data-ss-theme="dark"] .ss-shell #oc-card.oc-offduty .oc-live-badge {
  background: var(--cd-amber-soft) !important;
  border-color: var(--cd-amber) !important;
  color: var(--cd-amber-ink) !important;
}
/* the crew split is a HARD rule, full-bleed — two instruments, not two cards */
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-tech-col { padding: var(--cd-pad) !important; }
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-tech-col:first-child {
  border-right: 1px solid var(--cd-line) !important;
}
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-tech-row {
  background: var(--cd-l3) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
  padding: 12px var(--cd-pad) !important;
}
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-col-lbl.wm { color: var(--cd-link) !important; }
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-col-lbl.ca { color: #FFAB70 !important; }
/* phone numbers are data an operator dials — mono, full ink, never dimmed */
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-next-phone,
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-tech-phone {
  font-family: var(--cd-mono) !important;
  font-size: 12px !important;
  color: var(--cd-ink-2) !important;
}
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-next-name,
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-tech-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}
/* square avatars — the console has no round parts */
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-next-ava,
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-tech-ava {
  border-radius: var(--cd-r-sm) !important;
  background: var(--cd-l4) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-ink) !important;
}
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-next-ava.wm { border-color: var(--cd-info) !important; color: var(--cd-link) !important; }
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-next-ava.ca { border-color: var(--cd-orange) !important; color: var(--cd-orange) !important; }
/* the header shortcut chips join the graphite family */
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-links a,
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-link-chip {
  background: var(--cd-graphite) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: #FFFFFF !important;
  border-radius: var(--cd-r-sm) !important;
  text-decoration: none !important;
}
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-links a:hover,
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-link-chip:hover {
  background: var(--cd-graphite-hi) !important;
  border-color: var(--cd-emerald) !important;
}

/* ── 7.3 · CONTROLLER TESTING LAB = THE DEVICE RACK ─────────────────────
   MODIFICATION 3 of 3: TURN TILES INTO BAYS. The lab lists physical hardware,
   and it was rendering it as the same soft translucent tile used for
   passwords and apps. Each controller becomes a RACK BAY: one step up in
   tone, a square (not rounded) frame, and a solid 4px rack rail down the left
   edge that carries the device's LIVE state. The rail is the thing you read
   from across the room — green rail, unit is up.

   These rules must outrank a runtime <style> that ctl_booking.js injects into
   <head> AFTER every stylesheet, so they carry a three-class selector
   (0,3,1) against its bare .ctl-card (0,1,0). Specificity beats order; this
   is the documented pattern for the studio's runtime-injected CSS. */
html[data-ss-theme="dark"] .ss-shell .ctl-card {
  background: var(--cd-l3) !important;
  border: 1px solid var(--cd-line) !important;
  border-left: 4px solid var(--cd-line-strong) !important;
  border-radius: var(--cd-r-sm) !important;
  padding: var(--cd-pad) !important;
  transition: border-color .16s ease, background .16s ease !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card:hover {
  background: var(--cd-l4) !important;
  border-color: var(--cd-line-strong) !important;
  border-left-color: var(--cd-teal) !important;
}
/* the rack rail IS the status: online green, in-use amber, offline slate */
html[data-ss-theme="dark"] .ss-shell .ctl-card.is-online,
html[data-ss-theme="dark"] .ss-shell .ctl-card.online { border-left-color: var(--cd-emerald) !important; }
html[data-ss-theme="dark"] .ss-shell .ctl-card.in-use  { border-left-color: var(--cd-amber) !important; }
html[data-ss-theme="dark"] .ss-shell .ctl-card.offline { border-left-color: var(--cd-line-strong) !important; }

/* the device plate: square frame, solid ground, no translucency */
html[data-ss-theme="dark"] .ss-shell .ctl-card-img {
  width: 48px !important; height: 48px !important;
  background: var(--cd-l1) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
}
/* the LED — ringed in the BAY tone so it reads as a lamp set into the plate */
html[data-ss-theme="dark"] .ss-shell .ctl-card-dot { border: 2px solid var(--cd-l3) !important; }
html[data-ss-theme="dark"] .ss-shell .ctl-card-type {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}
/* an IP address is an identifier: mono, readable, not 40%-white at 9px */
html[data-ss-theme="dark"] .ss-shell .ctl-card-ip,
html[data-ss-theme="dark"] .ss-shell .hp-ctl-col-ip,
html[data-ss-theme="dark"] .ss-shell .hp-ctl-chip-ip {
  font-family: var(--cd-mono) !important;
  font-size: 11px !important;
  color: var(--cd-ink-3) !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card-status { font-size: 11px !important; font-weight: 500 !important; }
html[data-ss-theme="dark"] .ss-shell .ctl-card-gear {
  color: var(--cd-ink-3) !important;
  border-radius: var(--cd-r-sm) !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card-gear:hover {
  background: var(--cd-graphite) !important;
  color: #FFFFFF !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card-bk {
  background: var(--cd-emerald-soft) !important;
  border: 1px solid var(--cd-emerald) !important;
  border-radius: var(--cd-r-sm) !important;
  padding: var(--cd-pad-sm) var(--cd-pad) !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card-bk-user { color: var(--cd-emerald-ink) !important; }
html[data-ss-theme="dark"] .ss-shell .ctl-card-bk-task { color: var(--cd-ink-3) !important; font-size: 11px !important; }

/* Bay actions follow the command-bar law: graphite by default, and exactly
   one filled button per bay — the primary action for that unit's state. */
html[data-ss-theme="dark"] .ss-shell .ctl-card-btn {
  background: var(--cd-graphite) !important;
  border: 1px solid var(--cd-line-strong) !important;
  border-radius: var(--cd-r-sm) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 9px !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card-btn:hover {
  background: var(--cd-graphite-hi) !important;
  border-color: var(--cd-accent) !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card-btn--book {
  background: var(--cd-cta) !important;
  border-color: var(--cd-cta) !important;
  color: #FFFFFF !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card-btn--book:hover { background: var(--cd-cta-hover) !important; }
html[data-ss-theme="dark"] .ss-shell .ctl-card-btn--advance {
  background: var(--cd-emerald-soft) !important;
  border-color: var(--cd-emerald) !important;
  color: var(--cd-emerald-ink) !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card-btn--queue {
  background: var(--cd-amber-soft) !important;
  border-color: var(--cd-amber) !important;
  color: var(--cd-amber-ink) !important;
}
html[data-ss-theme="dark"] .ss-shell .ctl-card-btn--log { color: var(--cd-ink-2) !important; }
html[data-ss-theme="dark"] .ss-shell .ctl-q-badge {
  background: var(--cd-l4) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-violet) !important;
  border-radius: var(--cd-r-sm) !important;
}
/* the legacy column layout, same rack language */
html[data-ss-theme="dark"] .ss-shell .hp-ctl-col {
  border-right: 1px solid var(--cd-line) !important;
  border-bottom: 1px solid var(--cd-line) !important;
  padding: var(--cd-pad) var(--cd-pad-sm) !important;
}
html[data-ss-theme="dark"] .ss-shell .hp-ctl-col:hover { background: var(--cd-l3) !important; }
html[data-ss-theme="dark"] .ss-shell .hp-ctl-col-img {
  background: var(--cd-l1) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   8 · DENSITY — 14px everywhere data is read
   ════════════════════════════════════════════════════════════════════════ */

/* Studio data grids: L1 header, L3 zebra, one hairline, 14px cells. Applied
   by structure rather than per-feature so a table added tomorrow inherits it. */
html[data-ss-theme="dark"] .ss-shell table th,
html[data-ss-theme="dark"] .ss-shell .su-grid thead th,
html[data-ss-theme="dark"] .ss-shell .qb-data-table th {
  background: var(--cd-l1) !important;
  border-bottom: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-ink-3) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  padding: 12px var(--cd-pad) !important;
}
html[data-ss-theme="dark"] .ss-shell .su-grid .su-cell,
html[data-ss-theme="dark"] .ss-shell .qb-data-table td {
  padding: 10px var(--cd-pad) !important;
  border-bottom: 1px solid var(--cd-line-soft) !important;
  color: var(--cd-ink) !important;
  font-size: 12px !important;
}
html[data-ss-theme="dark"] .ss-shell .su-grid tbody tr:nth-child(even) .su-cell { background: var(--cd-l2); }
html[data-ss-theme="dark"] .ss-shell .su-grid tbody tr:hover .su-cell { background: var(--cd-l3) !important; }
html[data-ss-theme="dark"] .ss-shell .su-grid-wrap {
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
  background: var(--cd-l2) !important;
}
html[data-ss-theme="dark"] .ss-shell .su-sheet-head {
  background: var(--cd-l1) !important;
  border-bottom: 1px solid var(--cd-line) !important;
  box-shadow: inset var(--cd-spine) 0 0 var(--su-accent, var(--cd-accent));
  padding: var(--cd-pad) !important;
}
html[data-ss-theme="dark"] .ss-shell .su-cell-ro { padding: 0 !important; }
html[data-ss-theme="dark"] .ss-shell .su-cell-in {
  background: var(--cd-l3) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: var(--cd-r-sm) !important;
  color: var(--cd-ink) !important;
  padding: 7px 9px !important;
}
html[data-ss-theme="dark"] .ss-shell .su-cell-in:focus {
  border-color: var(--cd-accent) !important;
  background: var(--cd-l4) !important;
}
html[data-ss-theme="dark"] .ss-shell .su-code-chip {
  background: var(--cd-l4) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-teal) !important;
  font-family: var(--cd-mono);
  border-radius: var(--cd-r-sm) !important;
}

/* ── Overlays: solid panel, NO blur on the scrim ────────────────────────
   The scrim stays translucent because that is what a scrim IS — the point of
   the no-glass rule is that no MATERIAL is see-through, and a dialog that
   hides what it covers is the opposite of glass. What is removed is the blur
   (killed globally in 2.1) and the frosted panel fill. */
html[data-ss-theme="dark"] .ss-mgr-modal,
html[data-ss-theme="dark"] .ss-shell .ss-modal-backdrop {
  background: rgba(4,7,13,.86) !important;
}
html[data-ss-theme="dark"] .ss-mgr-modal > *,
html[data-ss-theme="dark"] .ss-shell .ss-modal-card,
html[data-ss-theme="dark"] .ss-shell .ss-mgr-card {
  background: var(--cd-l4) !important;
  border: 1px solid var(--cd-line-strong) !important;
  border-radius: var(--cd-r) !important;
  box-shadow: var(--cd-shadow-float) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   9 · SYSTEM UPDATE — LIVE LINK CELLS  (su-link, see system_update.js)
   ────────────────────────────────────────────────────────────────────────
   MACE: "sa System Update yung mga column doon na link dapat clicable at pag
   ni click dapat mag oopen ng new tab."

   A QuickBase-mirrored sheet renders read-only cells as plain text, so a
   CONNECT+ URL sitting in a cell was dead text an operator had to select and
   copy. The renderer now emits a real anchor for any http(s) / mailto: / tel:
   value (see _suLinkify), and this is what it looks like: link ink, a hairline
   underline that solidifies on hover, and an external-link glyph so the
   new-tab behaviour is announced before the click, not discovered after it.
   The whole cell is NOT the hit area on purpose — these grids support
   right-click cell actions and text selection, and swallowing the cell would
   take both away. */
html[data-ss-theme="dark"] .ss-shell .su-link,
html[data-ss-theme="dark"] .ss-shell .su-cell-ro .su-link {
  color: var(--cd-link) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--cd-line-strong);
  overflow-wrap: anywhere;
}
html[data-ss-theme="dark"] .ss-shell .su-link:hover {
  color: #FFFFFF !important;
  border-bottom-color: var(--cd-accent);
  background: var(--cd-accent-soft);
}
html[data-ss-theme="dark"] .ss-shell .su-link:focus-visible {
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
}
html[data-ss-theme="dark"] .ss-shell .su-link-ic {
  font-size: 8px;
  margin-left: 5px;
  opacity: .65;
  vertical-align: baseline;
}
/* The launcher that rides an EDITABLE cell: the input keeps the value, the
   button opens it. Editing a URL and following it are different intents and
   an <input> cannot be both. */
html[data-ss-theme="dark"] .ss-shell .su-cell-go {
  background: var(--cd-graphite) !important;
  border: 1px solid var(--cd-line-strong) !important;
  color: var(--cd-link) !important;
  border-radius: var(--cd-r-sm) !important;
}
html[data-ss-theme="dark"] .ss-shell .su-cell-go:hover {
  background: var(--cd-cta) !important;
  border-color: var(--cd-accent) !important;
  color: #FFFFFF !important;
}

/* ════════════════════════════════════════════════════════════════════════
   10 · CROSS-CUTTING INK — kill the last low-contrast strays
   ════════════════════════════════════════════════════════════════════════ */
/* These three literals are used across the studio for "quiet" text and all
   three fail AA on the new tones. They are re-pointed rather than hunted
   down file by file, which is also why they are listed here as attribute
   matches: the values ship inline in feature markup, not only in CSS. */
html[data-ss-theme="dark"] .ss-shell [style*="color:#7d8590"],
html[data-ss-theme="dark"] .ss-shell [style*="color: #7d8590"],
html[data-ss-theme="dark"] .ss-shell [style*="color:#8b949e"],
html[data-ss-theme="dark"] .ss-shell [style*="color: #8b949e"] {
  color: var(--cd-ink-3) !important;
}

/* Anything still painting itself with the retired near-black gets the ground
   tone instead, so a stray legacy surface can never be a hole in the ladder. */
html[data-ss-theme="dark"] .ss-shell [style*="background:#0d1117"],
html[data-ss-theme="dark"] .ss-shell [style*="background: #0d1117"],
html[data-ss-theme="dark"] .ss-shell [style*="background:#010409"],
html[data-ss-theme="dark"] .ss-shell [style*="background: #010409"] {
  background: var(--cd-l2) !important;
}

/* REDUCED MOTION — the console has no decorative animation left, but the
   status LEDs and the countdown pulse do animate. Honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  html[data-ss-theme="dark"] .ss-shell *,
  html[data-ss-theme="dark"] #ssq-layer * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   11 · THE RE-DECLARED SHADOWS  (must load AFTER everything in section 2.3)
   ────────────────────────────────────────────────────────────────────────
   Section 2.3 reset every shadow in the dark studio. These are the ones that
   carry information, restated at a specificity that beats both the reset and
   the `!important` rules in the sheets underneath. Each carries a `.ss-shell`
   or an id, so it sits at (0,3,1) or better.

   NEUTRAL ONLY. Not one of these is chromatic — depth in this console comes
   from the TONE ladder and the 1px grid, never from a coloured halo.
   ════════════════════════════════════════════════════════════════════════ */

/* the section spines — the categorical bar that names each tool */
html[data-ss-theme="dark"] .ss-shell .hp-card-head {
  box-shadow: inset var(--cd-spine) 0 0 var(--cd-sec, var(--cd-line-strong)) !important;
}
html[data-ss-theme="dark"] .ss-shell .yct-header,
html[data-ss-theme="dark"] .yct-panel .yct-header {
  box-shadow: inset var(--cd-spine) 0 0 var(--cd-accent) !important;
}
html[data-ss-theme="dark"] .ss-shell .su-sheet-head {
  box-shadow: inset var(--cd-spine) 0 0 var(--su-accent, var(--cd-accent)) !important;
}

/* the On-Call well — a recess, which is the whole point of that card */
html[data-ss-theme="dark"] .ss-shell #oc-card .oc-strip {
  box-shadow: inset 0 1px 0 #000000, inset 0 -1px 0 var(--cd-line) !important;
}

/* the floating layer — the one place elevation is real */
html[data-ss-theme="dark"] #ssq-layer .ssq-panel,
html[data-ss-theme="dark"] #ssq-layer .ssq-menu,
html[data-ss-theme="dark"] .ss-shell .ss-menu-dropdown,
html[data-ss-theme="dark"] .ss-shell .ss-quickbase-dropdown,
html[data-ss-theme="dark"] .ss-shell #ss-beacon-popup,
html[data-ss-theme="dark"] .ss-shell .oc-next-pop,
html[data-ss-theme="dark"] .ss-mgr-modal > * {
  box-shadow: var(--cd-shadow-float) !important;
}
html[data-ss-theme="dark"] #ssq-layer .ssq-panel-head {
  box-shadow: inset var(--cd-spine) 0 0 var(--ssq-src, var(--cd-accent)) !important;
}

/* which row am I on */
html[data-ss-theme="dark"] #ssq-layer .ssq-tr:hover > td {
  box-shadow: inset 0 1px 0 var(--cd-line-strong), inset 0 -1px 0 var(--cd-line-strong) !important;
}
html[data-ss-theme="dark"] #ssq-layer .ssq-tr:hover > td:first-child {
  box-shadow: inset var(--cd-spine) 0 0 var(--cd-accent) !important;
}

/* where is my keyboard — the focus ring is the one thing that MUST cut through */
html[data-ss-theme="dark"] .ss-shell input:focus,
html[data-ss-theme="dark"] .ss-shell textarea:focus,
html[data-ss-theme="dark"] .ss-shell select:focus,
html[data-ss-theme="dark"] .ss-search-input:focus,
html[data-ss-theme="dark"] #ssq-layer input:focus {
  box-shadow: 0 0 0 1px var(--cd-accent) !important;
}

/* this cell publishes an ID CODE — information the operator acts on */
html[data-ss-theme="dark"] .ss-shell .su-cell.linked {
  box-shadow: inset 0 0 0 1px var(--su-accent, var(--cd-accent)) !important;
}

/* the plate hairline that separates a card from the ground it sits on */
html[data-ss-theme="dark"] .ss-shell .hp-card,
html[data-ss-theme="dark"] .ss-shell .ss-panel,
html[data-ss-theme="dark"] .ss-shell .ss-card {
  box-shadow: var(--cd-shadow-card) !important;
}