/**
 * @file signal-desk.css
 * @description SIGNAL DESK layer for SUPPORT STUDIO + SERVICES.
 *              (2026-08-06, MACE-cleared — Mockup A selected; typography from Mockup B.)
 *
 *              index.html gets this same layer from SECTION M6.PR inside the
 *              generated `main_theme.css`, so it is NOT loaded there. Studio
 *              and Services do not load main_theme.css, which is why the
 *              editorial signature and the --pr-* tokens are restated here.
 *              The two files are kept in step by tests/unit/press_room.test.js.
 *
 *              LOAD ORDER: last on support_studio.html (after
 *              enterprise_theme.css) and on services.html (after
 *              services-command.css).
 *
 *              SCOPE DISCIPLINE — this layer changes only colour, font,
 *              border, radius and letter-spacing. It deliberately does NOT
 *              touch display, flex, grid, width, padding or margin, so it
 *              cannot move a box in either shell. No feature logic, no DOM.
 *
 *              THEME SCOPES
 *                Studio   : html[data-ss-theme="dark|light"]  (theme_manager.js)
 *                Services : :root  (dark default) / :root[data-svc-theme="light"]
 *
 * @module MUMS/Styles
 * Spec: design/MUMS_DESIGN_SYSTEM_SPEC.md §3
 */

/* ════════════════════════════════════════════════════════════════════════
   1 · TOKENS — Dark is the default; paper overrides.
   ════════════════════════════════════════════════════════════════════════ */
:root,
html[data-ss-theme="dark"] {
  --pr-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --pr-sans:  'Figtree', ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --pr-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pr-text:      #F2F4F7;
  --pr-rule:      #23262F;
  --pr-rule-hi:   #343945;
  --pr-dim:       #A8B0BE;
  --pr-faint:     #8A93A1;
  --pr-signal:      #C6F24E;
  --pr-on-fill:   #07070A;
  --pr-ok:        #3DDC84;
  --pr-warn:      #FFB020;
  --pr-crit:      #FF5C5C;
  --pr-info:      #4DA3FF;

  --pr-c1:#C6F24E; --pr-c2:#35D6D0; --pr-c3:#4DA3FF; --pr-c4:#FF5C5C;
  --pr-c5:#5FE3A1; --pr-c6:#FF8A3D; --pr-c7:#93A2B8; --pr-c8:#FF6B7A;
}

html[data-ss-theme="light"],
:root[data-svc-theme="light"] {
  --pr-text:      #0A0A0A;
  --pr-rule:      #D5D5CC;
  --pr-rule-hi:   #1A1A1A;
  --pr-dim:       #4A4F55;
  --pr-faint:     #5A6066;
  --pr-signal:      #4E6609;   /* lime is a FILL; as TEXT on paper it must drop to ink weight */
  --pr-on-fill:   #FFFFFF;
  --pr-ok:        #15633A;
  --pr-warn:      #8A5A00;
  --pr-crit:      #B3261E;
  --pr-info:      #1A5FB4;

  --pr-c1:#4E6609; --pr-c2:#0E6D68; --pr-c3:#1A5FB4; --pr-c4:#B3262F;
  --pr-c5:#16713F; --pr-c6:#9A4A05; --pr-c7:#4A5560; --pr-c8:#B3262F;
}

/* ════════════════════════════════════════════════════════════════════════
   2 · SHARED EDITORIAL SIGNATURE (mirrors main_theme.css SECTION M6.PR)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Headlines are ALWAYS serif ─────────────────────────────────────── */
.ss-body h1, .ss-body h2,
.svc-active-title, .svcx-title,
.modal h2, .modal h3,
.page-title, .panel-title {
  font-family: var(--pr-serif);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.06;
}

/* ── Kickers — mono, uppercase, .20em ───────────────────────────────── */
.lbl, .kicker, .small-caps,
.svc-left-label, .svcx-kicker, .ss-section-label {
  font-family: var(--pr-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--pr-faint);
}

/* ── Numerals monospace + tabular ───────────────────────────────────── */
.num, .svcx-kpi-val, .kpi-value, .stat-value, .oc-timeleft {
  font-family: var(--pr-mono);
  font-variant-numeric: tabular-nums;
}

/* ── The masthead rule pair — 2px + 1px ─────────────────────────────── */
.ss-topbar, .svc-topbar, .svc-active-header, .svc-left-header {
  border-bottom: 2px solid var(--pr-rule-hi);
  box-shadow: 0 3px 0 -2px var(--pr-rule);
}

/* ── Surfaces — 2px radius ──────────────────────────────────────────── */
.hp-card, .oc-card, .card, .panel,
.svc-panel, .svcx-card, .sfx-panel, .modal-content,
/* skx-1 (2026-08-07): the Shortcut Keys portals join the layer. */
.skx-modal, .skx-ctx, .skx-hud, .skx-toast {
  border-radius: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn, .ss-btn, .svc-btn, .svc-new-btn, .svc-rpt-btn,
.skx-btn, .skx-toggle, .skx-mini, .skx-x, .ss-menu-action {
  border-radius: 0;
  font-family: var(--pr-sans);
  font-weight: 600;
  letter-spacing: .01em;
}

/* ── Tabs — the active tab carries the masthead gold ────────────────── */
.ss-tab {
  border-radius: 0;
  font-family: var(--pr-sans);
  font-weight: 600;
}
.ss-tab.active, .ss-tab[aria-selected="true"] {
  color: var(--pr-signal);
  box-shadow: inset 0 -2px 0 var(--pr-signal);
}

/* ── Tables — 2px under the head, hairlines between ─────────────────── */
.ss-body table thead th,
.svc-grid thead th, .svcx-table thead th {
  font-family: var(--pr-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pr-faint);
  border-bottom: 2px solid var(--pr-rule-hi);
}

/* ── Chips / pills / tags ───────────────────────────────────────────── */
.chip, .pill, .tag, .svc-active-badge, .svcx-chip, .sfx-chip {
  border-radius: 0;
  font-family: var(--pr-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── Key-caps (skx-1) ───────────────────────────────────────────────
   A cap is already mono; it takes the square corner and the mono face but NOT
   the .12em chip tracking — at 22px a wide track pushes "Page Up" out of its
   own cap. Squared here rather than in shortcut_keys.css so the base file
   stays theme-neutral. */
.skx-kbd {
  border-radius: 0;
  font-family: var(--pr-mono);
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
.ss-search-input, .svc-sheet-search, .svcx-input,
.skx-search input, .skx-rec-pad,
input[type="text"], input[type="search"], select, textarea {
  border-radius: 0;
  font-family: var(--pr-sans);
}

/* ── Sheet rail — active sheet carries a 3px masthead bar ───────────── */
.svc-sheet-item.active, .sfx-item.active,
/* The focused command row in the shortcuts manager is the same idea. */
.skx-row.is-focus {
  box-shadow: inset 3px 0 0 var(--pr-signal);
}

/* ── Avatars keep circular geometry, gain on-fill ink ───────────────── */
.avatar, .oc-avatar, .svc-user-chip {
  /* typography only — the hue owner keeps the ink (see main_theme M6.PR §11) */
  font-family: var(--pr-mono);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   3 · PURPLE NEUTRALIZER (Support Studio)
   MACE banned purple/violet, and a blue→purple gradient breaks the
   no-gradient rule as well. These four Studio surfaces hardcode one in
   main_studio.css; they become flat masthead-gold marks.
   ════════════════════════════════════════════════════════════════════════ */
:root, html[data-ss-theme="dark"], html[data-ss-theme="light"] {
  --ss-purple: #93A2B8;
}
html[data-ss-theme="light"] { --ss-purple: #4A5560; }

.ss-brand-icon,
.ss-home-hero-icon,
.ss-home-card-icon,
#hp-ctl-add-now-btn,
#hp-ctl-add-now-btn:hover {
  background: var(--pr-signal);
  color: var(--pr-on-fill);
}

/* ════════════════════════════════════════════════════════════════════════
   4 · SERVICES ▸ SHEETS RAIL  (Mockup A reference, MACE: "gustong gusto ko
   yung ganung kalinis")
   ------------------------------------------------------------------------
   Built against the rail in public/_mockup_a_harness.html. Four devices do
   the work, and all four are Signal Desk primitives:

     1. HAIRLINES, not boxes      — one 1px rule separates; nothing is a card.
     2. ZERO RADIUS               — a sheet row is a band, not a pill.
     3. MONO KICKERS              — section labels are 9.5px / .20em uppercase.
     4. A 3px SIGNAL BAR          — the active sheet is marked on its EDGE, so
                                    the row itself stays quiet.

   Geometry is confined to this rail (row height / padding). It is a
   self-contained sidebar, so nothing outside it can be moved by these rules.
   ════════════════════════════════════════════════════════════════════════ */

/* ── the rail ───────────────────────────────────────────────────────── */
.svc-left {
  border-right: 1px solid var(--pr-rule);
}

/* ── header: the masthead rule pair, mono label, sharp New button ───── */
.svc-left-header {
  border-bottom: 2px solid var(--pr-rule-hi);
  box-shadow: 0 3px 0 -2px var(--pr-rule);
}
.svc-left-label {
  font-family: var(--pr-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--pr-faint);
}
.svc-new-btn {
  border-radius: 0;
  font-family: var(--pr-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--pr-rule-hi);
  color: var(--pr-dim);
}
.svc-new-btn:hover {
  border-color: var(--pr-signal);
  color: var(--pr-signal);
  background: transparent;
}

/* ── search: a field, not a capsule ─────────────────────────────────── */
.svc-sheet-search {
  border-radius: 0;
  font-family: var(--pr-mono);
  font-size: 11px;
  border: 1px solid var(--pr-rule);
  background: transparent;
}
.svc-sheet-search:focus {
  border-color: var(--pr-signal);
  outline: none;
  box-shadow: none;
}

/* ── section headers: mono kicker + hairline leader ─────────────────── */
.svc-sheet-section-label,
.svc-sheet-section-header {
  font-family: var(--pr-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pr-faint);
}
.svc-sheet-section-header { border-bottom: 1px solid var(--pr-rule); }
.svc-sheet-section-count {
  font-family: var(--pr-mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: var(--pr-faint);
  background: transparent;
  border: none;
  border-radius: 0;
}

/* ── the rows ───────────────────────────────────────────────────────── */
.svc-sheet-item {
  position: relative;
  border-radius: 0;
  font-family: var(--pr-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pr-dim);
  border-left: 3px solid transparent;   /* reserves the signal bar's gutter so
                                           selecting a row never shifts text */
}
.svc-sheet-item:hover {
  color: var(--pr-text);
  background: rgba(198,242,78,.05);
}
.svc-sheet-item.active {
  border-left-color: var(--pr-signal);
  background: rgba(198,242,78,.10);
  font-weight: 600;
}
html[data-ss-theme="light"] .svc-sheet-item:hover,
:root[data-svc-theme="light"] .svc-sheet-item:hover { background: rgba(10,10,10,.035); }
html[data-ss-theme="light"] .svc-sheet-item.active,
:root[data-svc-theme="light"] .svc-sheet-item.active { background: rgba(78,102,9,.10); }

/* status glyphs read as marks, not badges */
.svc-sheet-lock, .svc-sheet-public, .svc-sheet-readonly {
  border-radius: 0;
  font-family: var(--pr-mono);
  font-size: 8.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* ── footer ─────────────────────────────────────────────────────────── */
.svc-left-footer {
  border-top: 1px solid var(--pr-rule);
  font-family: var(--pr-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pr-faint);
}

/* ════════════════════════════════════════════════════════════════════════
   5 · SHORTCUT KEYS  (skx-1, 2026-08-07)

   The `.skx-*` feature ships its own self-contained graphite/cyan palette so
   it renders correctly with or without this layer. Here it is RE-POINTED onto
   the Signal Desk ramp — token substitution only, so every rule in
   shortcut_keys.css keeps working and nothing about the geometry moves.

   THE LIME IS A FILL, NEVER TEXT. `--pr-signal` on paper measures 1.06:1 as
   text, so in light it is only ever used behind `--pr-on-fill` ink; the light
   accent below drops to the ink-weight lime that IS readable, exactly as
   §4 does for the Services rail.
   ════════════════════════════════════════════════════════════════════════ */
:root,
html[data-ss-theme="dark"] {
  --skx-surface:   #101015;
  --skx-surface2:  #16161C;
  --skx-surface3:  #0B0B0F;
  --skx-line:      var(--pr-rule);
  --skx-line2:     var(--pr-rule);
  --skx-text:      var(--pr-text);
  --skx-muted:     var(--pr-faint);
  --skx-accent:    var(--pr-signal);
  --skx-accent2:   var(--pr-info);
  --skx-ok:        var(--pr-ok);
  --skx-warn:      var(--pr-warn);
  --skx-danger:    var(--pr-crit);
  --skx-cap-bg:    #1C1C23;
  --skx-cap-line:  var(--pr-rule-hi);
  --skx-cap-ink:   var(--pr-text);
  --skx-shadow:    0 0 0 1px var(--pr-rule), 0 26px 60px rgba(0,0,0,.72);
  --skx-scrim:     rgba(7,7,10,.72);
}

html[data-ss-theme="light"] {
  --skx-surface:   #FFFFFF;
  --skx-surface2:  #F4F4EE;
  --skx-surface3:  #EDEDE7;
  --skx-line:      var(--pr-rule);
  --skx-line2:     var(--pr-rule);
  --skx-text:      var(--pr-text);
  --skx-muted:     var(--pr-faint);
  --skx-accent:    var(--pr-signal);   /* already the ink-weight #4E6609 in paper */
  --skx-accent2:   var(--pr-info);
  --skx-ok:        var(--pr-ok);
  --skx-warn:      var(--pr-warn);
  --skx-danger:    var(--pr-crit);
  --skx-cap-bg:    #FFFFFF;
  --skx-cap-line:  #1A1A1A;
  --skx-cap-ink:   var(--pr-text);
  --skx-shadow:    0 0 0 1px var(--pr-rule), 0 22px 48px rgba(10,10,10,.16);
  --skx-scrim:     rgba(10,10,10,.30);
}

/* A key-cap in Signal Desk is a stamped square, not a raised plastic key. */
.skx-kbd { border-bottom-width: 1px; }

/* The bound-surface dot becomes a signal square. */
[data-skx-cmd].skx-bound::after { border-radius: 0; }