/* ═══════════════════════════════════════════════════════════════════
   SARAH CANON — 2026-07-08 (Phase 2 of CSS unification)
   THE design system source of truth. Canon extracted from / (dashboard)
   and /agents/specialists. Loads LAST in base.html, after pop-v4.css.

   Phase 2 contract: this file is a computed NO-OP on every page —
   token values below equal the final cascade (style.css + pop-v3.css
   overrides) except --accent-2, re-pointed violet→teal by EJ ruling
   2026-07-08 (zero consumers at time of change, verified by grep).
   The .pop-* component classes duplicate pop-v4.css verbatim; pop-v4's
   copy retires in Phase 3's final batch once all pages migrate here.

   Rules for Phase 3 migrations:
   - Pills/badges: use .pop-tier-* / .pop-badge.* / .pop-act.* — never
     hand-roll a new pill class.
   - All pills scale on hover (canon: specialists page). Cards lift.
   - Accent is blue #0288D1. Teal #2DD4BF is EMPHASIS ONLY
     (section-title bar, <strong> highlights) — never the page accent.
   - Mono is JetBrains Mono everywhere.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── TOKENS (final cascade values — single source of truth) ─────── */
:root{
  /* base */
  --bg:#000000;
  --surface:rgba(0,0,0,0.92);
  --surface-solid:#000000;
  --surface-hover:rgba(18,18,18,0.85);
  --surface-elev:#0f0f0f;
  --border-s:rgba(255,255,255,0.20);   /* pop-v3 lifted value */
  --border-v:rgba(2,136,209,0.30);
  --text-p:#FFFFFF;
  --text-s:#e3e7ef;                    /* brightened for true-black 7/09 */
  --text-m:#aeb5c4;                    /* brightened for true-black 7/09 */
  /* brand */
  --accent:#0288D1;
  --accent-g:rgba(2,136,209,0.50);
  --accent-2:#2DD4BF;                  /* EMPHASIS ONLY — EJ ruling 7/08 */
  /* semantic (prospect/agent state, not brand) */
  --hot:#ef4444;      --hot-g:rgba(239,68,68,0.45);
  --warm:#f59e0b;     --warm-g:rgba(245,158,11,0.40);
  --active:#22c55e;   --active-g:rgba(34,197,94,0.40);
  --seq:#3b82f6;      --seq-g:rgba(59,130,246,0.40);
  --requeue:#8b5cf6;  --requeue-g:rgba(139,92,246,0.40);
  --cool:#6b7280;
  /* type */
  --mono:'JetBrains Mono',monospace;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --blur:blur(16px);
  /* ─── SB6-INNER BRIDGE PALETTE (Phase 1, 2026-07-16) ───────────────
     Canonical copy of the values sb6-obsidian-final.css paints on HOME.
     sb6-inner.css reads THESE — never re-type a literal into that sheet.
     Namespaced --sb6i-* on purpose: v6's home-only :root defines --sb6-blue
     (#3b82f6) / --sb6-cyan (#22d3ee) with DIFFERENT values; reusing those
     names would give one token two meanings per plane = the drift we fixed.
     Home is untouched by these — obsidian keeps its literals and still wins.
     Drift guard: tools/check-sb6-palette.sh asserts these == obsidian's.
     Phase 2 (tokenize obsidian, one source) = separate ruling. */
  --sb6i-void:#000;
  --sb6i-blue:#2f8fff;                    /* obsidian accent blue */
  --sb6i-blue-soft:#2f8fff;   /* TRON-BRIGHT: full-sat, was #9fd0ff */
  --sb6i-cyan:#18e8ff;                    /* obsidian cyan */
  --sb6i-red:#ff3d61;                     /* obsidian alert */
  --sb6i-red-soft:#ff3d61;    /* TRON-BRIGHT: full-sat, was #ff8ba1 */
  --sb6i-amber:#ffc329;                   /* obsidian warn */
  --sb6i-amber-soft:#ffc329;  /* TRON-BRIGHT: full-sat, was #ffd45e */
  --sb6i-green:#21f5a5;                   /* obsidian good */
  --sb6i-green-soft:#21f5a5;  /* TRON-BRIGHT: full-sat, was #4dffc0 */
  --sb6i-violet:#a78bfa;      /* requeue/violet accents (canon --requeue family) */
  --sb6i-line-soft:rgba(72,151,255,0.22); /* DERIVED: card-head hairline divider (no home analog) */
  --sb6i-hover-tint:rgba(59,130,246,0.07); /* obsidian:19 row/link hover */
  /* text: obsidian does NOT override these — home's values come from v6's
     --sb6-text-1/2/3, so these literals ARE home-true. Verified 7/16. */
  --sb6i-text-1:#ffffff;   /* TRON-BRIGHT: was #eaf2ff */
  --sb6i-text-2:#ffffff;   /* TRON-BRIGHT: was #b9c7e2 — Shane: white text = BRIGHT WHITE */
  --sb6i-text-3:#aebfe6;   /* TRON-BRIGHT: muted lifted from #7e8db0 */
  --sb6i-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  /* HOME's body typeface, copied verbatim from sarah-blue-v6.css:33 (--sb6-sans),
     which .sb6-root:40 applies and nothing overrides. System-FIRST.
     Inner pages were on canon's --body (:48) = 'Inter'-FIRST, so on a Mac home
     rendered SF while inner rendered Inter — that is the "slightly off" font.
     Same list, different head. Do not reorder. */
  --sb6i-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  /* ── NO GLOW TOKENS EXIST HERE, ON PURPOSE (Phase 1b, 2026-07-17) ──
        sb6-obsidian-final.css OVERRIDES ITSELF. Its early "V1" section
        (:10-11) sets border rgba(72,151,255,0.45) + box-shadow glow, but its
        final section SB6-TRON-FINAL (:134-279) sweeps
        box-shadow/text-shadow/filter to `none` across every .sb6-* element
        and re-declares SOLID full-saturation hairlines (:146 .sb6-panel
        border 1px solid #2f8fff, :158 .sb6-chip #2f8fff/#9fd0ff).
        LAST DECLARATION WINS → HOME HAS ZERO GLOW AND NO ALPHA BORDERS.
        Phase 1 tokenized the V1 values = DEAD CODE, which is why inner pages
        still looked washed (45% alpha + blur) next to home (100% solid, flat).
        Do not re-add a glow/alpha-border token without re-reading obsidian's
        TAIL first — presence in that file does NOT mean effective. ── */
}

/* ═══════════════════════════════════════════════════════════════════════
   CANON COMPONENTS v2 — the shared vocabulary (Shane ruling 2026-07-17)

   WHY: an audit of the 46 live inner templates found 883 distinct classes,
   824 of them (93%) used on exactly ONE page. `.pop-card` was used on ONE
   page; `.pop-badge` on ONE. There was no component system — every page
   hand-rolled its own card/pill/title, and the "look" was then re-skinned
   four times on top (v4, v5, next-global, sb6/obsidian) without ever
   removing a predecessor. `.card` is defined in FIVE sheets; `.section-title`
   in five. That is the drift engine, and no amount of override tuning fixes
   it — that is why the Phase 1/1b/1c bridge work kept playing whack-a-mole.

   These components are the migration target. Painted TRON (home's real look:
   flat #000 + SOLID full-saturation hairline + ZERO glow) directly from the
   --sb6i-* tokens above.

   HOME SAFETY: home (dashboard_sb6.html) uses the .sb6-* vocabulary and never
   emits a .pop-* class, so nothing here can reach it. Verified by sha.

   CONTRACT: style with .pop-*. Behaviour hooks are separate, js- prefixed
   classes that carry NO styling — so a JS rename can never break the look and
   a restyle can never break the JS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page furniture ── */
.pop-page-head { display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:12px; flex-wrap:wrap; gap:12px; }
.pop-kpi-line { font-family:var(--sb6i-mono); font-size:10px; color:var(--sb6i-text-3);
  letter-spacing:.3px; margin-top:2px; }
.pop-kpi-line .hot  { color:var(--sb6i-red); }
.pop-kpi-line .warm { color:var(--sb6i-amber); }

/* ── Filter chip row ── */
.pop-chip-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.pop-chip-btn { font-family:var(--sb6i-mono); font-size:10px; font-weight:600;
  letter-spacing:.8px; padding:5px 14px; border-radius:20px;
  border:1px solid var(--sb6i-blue); background:var(--sb6i-void);
  color:var(--sb6i-blue-soft); cursor:pointer; transition:border-color .15s, color .15s; }
.pop-chip-btn:hover { border-color:var(--sb6i-cyan); color:var(--sb6i-text-1); }
.pop-chip-btn.is-active { border-color:var(--sb6i-cyan); color:var(--sb6i-cyan);
  background:var(--sb6i-hover-tint); }

/* ── Search field ── */
.pop-search { position:relative; display:inline-block; }
.pop-search-input { font-family:var(--sb6i-mono); font-size:11px;
  padding:6px 26px 6px 24px; border-radius:20px;
  border:1px solid var(--sb6i-blue); background:var(--sb6i-void);
  color:var(--sb6i-text-1); outline:none; min-width:240px; }
.pop-search-input:focus { border-color:var(--sb6i-cyan); }
.pop-search-input::placeholder { color:var(--sb6i-text-3); }
.pop-search-icon { position:absolute; left:9px; top:50%; transform:translateY(-50%);
  color:var(--sb6i-text-3); pointer-events:none; font-size:12px; }
.pop-search-clear { position:absolute; right:9px; top:50%; transform:translateY(-50%);
  color:var(--sb6i-text-3); cursor:pointer; font-size:10px; }
.pop-search-count { font-family:var(--sb6i-mono); font-size:9px;
  color:var(--sb6i-text-3); margin-left:8px; }

/* ── Status dot (heat / state indicator) ── */
.pop-dot { display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--sb6i-void); border:1px solid var(--sb6i-blue); }
.pop-dot.hot     { border-color:var(--sb6i-red);   background:var(--sb6i-red); }
.pop-dot.warm    { border-color:var(--sb6i-amber); background:var(--sb6i-amber); }
.pop-dot.active  { border-color:var(--sb6i-green); background:var(--sb6i-green); }
.pop-dot.seq     { border-color:var(--sb6i-blue);  background:var(--sb6i-blue); }
.pop-dot.cooling,
.pop-dot.unknown { border-color:var(--sb6i-text-3); background:transparent; }

/* ── TABLE — the component that did not exist ──
   Sticky header NOTE: `top:0` is correct because .pop-table-wrap is itself the
   scrolling ancestor (max-height + overflow-y). `position:sticky` resolves top
   against the NEAREST scroller — the legacy rule used top:64px (the topbar
   height), which only makes sense if the PAGE scrolls, and that is exactly why
   the prospects header parked mid-table.
   border-collapse MUST stay `separate` or sticky th borders drop out. */
/* SPECIFICITY ARMOUR — load-order note (2026-07-17):
   sarah-canon.css loads 5th of 8 (base.html:11), so sarah-next-global.css
   (:25) and sb6-inner.css (:26) both override it. next-global targets BARE
   ELEMENTS — `.sarah-inner-page thead th` (0,1,2) — which TIES a plain
   `.pop-table thead th` (0,1,2) and then wins on load order. That would drag
   `top:64px` back and re-break the sticky header.
   So the component rules that collide with element-level legacy are written
   at (0,2,2) via the wrap. Deliberate, not decoration — do not "simplify"
   these selectors without moving canon last in base.html first. */
.pop-table-wrap { max-height:600px; overflow-y:auto; border-radius:8px;
  border:1px solid var(--sb6i-blue); background:var(--sb6i-void); }
.pop-table-wrap .pop-table { width:100%; border-collapse:separate; border-spacing:0;
  font-size:12px; color:var(--sb6i-text-2); background:var(--sb6i-void); }
.pop-table-wrap .pop-table thead th { position:sticky; top:0; z-index:4;
  background:var(--sb6i-void); color:var(--sb6i-blue);
  font-family:var(--sb6i-mono); font-size:9px; font-weight:800;
  letter-spacing:.10em; text-transform:uppercase; text-align:left;
  padding:9px 10px; white-space:nowrap;
  border-bottom:1px solid var(--sb6i-blue); text-shadow:none; }
.pop-table-wrap .pop-table tbody td { padding:9px 10px;
  border-bottom:1px solid var(--sb6i-line-soft); vertical-align:top;
  background:var(--sb6i-void); }
.pop-table-wrap .pop-table tbody tr:hover td { background:var(--sb6i-hover-tint); }
.pop-table-wrap .pop-table tbody tr:last-child td { border-bottom:none; }
.pop-table .num { font-family:var(--sb6i-mono); }
.pop-table .strong { color:var(--sb6i-text-1); font-weight:600; }
.pop-table .dim { color:var(--sb6i-text-3); font-size:11px; }

/* ── Row action buttons ── */
.pop-btn { display:inline-block; font-family:var(--sb6i-mono); font-size:9px;
  font-weight:600; letter-spacing:.06em; padding:3px 8px; border-radius:4px;
  border:1px solid var(--sb6i-blue); background:var(--sb6i-void);
  color:var(--sb6i-blue-soft); cursor:pointer; text-decoration:none; }
.pop-btn:hover { border-color:var(--sb6i-cyan); color:var(--sb6i-text-1); }
.pop-btn.danger { border-color:var(--sb6i-red); color:var(--sb6i-red-soft); }
.pop-btn.good   { border-color:var(--sb6i-green); color:var(--sb6i-green-soft); }
.pop-btn.warn   { border-color:var(--sb6i-amber); color:var(--sb6i-amber-soft); }
.pop-btn.muted  { border-color:var(--sb6i-line-soft); color:var(--sb6i-text-3); }

/* ── Active-filter bar ── */
.pop-filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px;
  padding:7px 12px; border-radius:8px;
  border:1px solid var(--sb6i-amber); background:var(--sb6i-void); }
.pop-filter-bar-label { font-family:var(--sb6i-mono); font-size:10px; font-weight:600;
  letter-spacing:.06em; color:var(--sb6i-amber); }
.pop-filter-bar-clear { font-family:var(--sb6i-mono); font-size:10px;
  color:var(--sb6i-text-3); text-decoration:none; margin-left:auto; }
.pop-filter-bar-clear:hover { color:var(--sb6i-cyan); }

/* ═══ CANON COMPONENTS v2.1 — overnight-run gap fill (2026-07-17 night) ═══
   Built from the MISSING-COMPONENT reports of the migration lanes. Same law
   as everything above: TRON (void black, solid hairlines, zero glow), every
   colour a --sb6i-* token. The form vocabulary unblocks the ~9 form/auth
   pages wave 1 correctly skipped. */

/* chip variants the contract promised but v2 never defined */
.pop-chip.good { border-color:var(--sb6i-green); color:var(--sb6i-green-soft); }
.pop-chip.info { border-color:var(--sb6i-cyan);  color:var(--sb6i-cyan); }

/* ── FORM VOCABULARY ── */
.pop-form-label { display:block; font-family:var(--sb6i-mono); font-size:9px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sb6i-text-3); margin:14px 0 5px; }
.pop-input, .pop-select, .pop-textarea {
  width:100%; box-sizing:border-box; font-family:var(--sb6i-mono); font-size:12px;
  padding:9px 11px; border-radius:6px;
  border:1px solid var(--sb6i-line-soft); background:var(--sb6i-void);
  color:var(--sb6i-text-1); outline:none; }
.pop-input:focus, .pop-select:focus, .pop-textarea:focus { border-color:var(--sb6i-cyan); }
.pop-input::placeholder, .pop-textarea::placeholder { color:var(--sb6i-text-3); }
.pop-textarea { min-height:120px; resize:vertical; line-height:1.5; }
.pop-form-msg { font-family:var(--sb6i-mono); font-size:10px; margin:8px 0;
  color:var(--sb6i-text-2); }
.pop-form-msg.error   { color:var(--sb6i-red-soft); }
.pop-form-msg.success { color:var(--sb6i-green-soft); }
.pop-form-msg.info    { color:var(--sb6i-cyan); }

/* full-size action buttons (canon .pop-btn stays the 9px row-action) */
.pop-btn-primary { display:inline-block; font-family:var(--sb6i-mono); font-size:11px;
  font-weight:700; letter-spacing:.08em; padding:10px 22px; border-radius:6px;
  border:1px solid var(--sb6i-blue); background:var(--sb6i-void);
  color:var(--sb6i-blue); cursor:pointer; text-decoration:none;
  transition:border-color .15s, color .15s, background .15s; }
.pop-btn-primary:hover { border-color:var(--sb6i-cyan); color:var(--sb6i-cyan);
  background:var(--sb6i-hover-tint); }
.pop-btn-primary.danger { border-color:var(--sb6i-red); color:var(--sb6i-red-soft); }
.pop-btn-primary.good   { border-color:var(--sb6i-green); color:var(--sb6i-green-soft); }
.pop-btn-primary.block  { display:block; width:100%; text-align:center; }
.pop-btn-subtle { font-family:var(--sb6i-mono); font-size:10px; padding:8px 16px;
  border-radius:6px; border:1px solid var(--sb6i-line-soft); background:var(--sb6i-void);
  color:var(--sb6i-text-3); cursor:pointer; }
.pop-btn-subtle:hover { border-color:var(--sb6i-blue); color:var(--sb6i-text-2); }

/* auth / standalone centered card */
.pop-auth-wrap { min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:20px; }
.pop-auth-card { width:100%; max-width:400px; padding:32px 30px; border-radius:10px;
  border:1px solid var(--sb6i-blue); background:var(--sb6i-void); }

/* ── SMALL DISPLAY PIECES ── */
.pop-stat { padding:14px 16px; border-radius:8px; border:1px solid var(--sb6i-blue);
  background:var(--sb6i-void); }
.pop-stat-label { font-family:var(--sb6i-mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sb6i-text-3); }
.pop-stat-num { font-family:var(--sb6i-mono); font-size:26px; font-weight:800;
  color:var(--sb6i-blue); line-height:1.2; }
.pop-stat.warm .pop-stat-num { color:var(--sb6i-amber); }
.pop-stat.hot  .pop-stat-num { color:var(--sb6i-red); }
.pop-stat.good .pop-stat-num { color:var(--sb6i-green); }
/* sub/timestamp line inside a stat tile (canon .dim is otherwise .pop-table-scoped) */
.pop-stat .dim { color:var(--sb6i-text-3); font-size:11px; }

.pop-meter { height:3px; border-radius:2px; background:var(--sb6i-line-soft);
  overflow:hidden; }
.pop-meter-fill { height:100%; background:var(--sb6i-blue); }
.pop-meter-fill.warm { background:var(--sb6i-amber); }
.pop-meter-fill.hot  { background:var(--sb6i-red); }

.pop-pre { font-family:var(--sb6i-mono); font-size:12px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; padding:16px; border-radius:8px;
  border:1px solid var(--sb6i-line-soft); background:var(--sb6i-void);
  color:var(--sb6i-text-2); }

.pop-info-row { display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--sb6i-line-soft);
  font-size:12px; color:var(--sb6i-text-2); }
.pop-info-row b { color:var(--sb6i-text-1); font-weight:600; }
.pop-divider { border:none; border-top:1px solid var(--sb6i-line-soft); margin:16px 0; }

.pop-list-row { display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0; border-bottom:1px solid var(--sb6i-line-soft); }
.pop-list-row:last-child { border-bottom:none; }
.pop-back-link { display:block; text-align:center; font-family:var(--sb6i-mono);
  font-size:10px; color:var(--sb6i-text-3); margin-top:14px; text-decoration:none; }
.pop-back-link:hover { color:var(--sb6i-cyan); }

.pop-card-section-title { display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--sb6i-mono); font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sb6i-blue); margin-bottom:10px; }
.pop-card-section-title .hint { font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--sb6i-text-3); }

/* ── Utilities ── */
.pop-empty { padding:26px; text-align:center; font-family:var(--sb6i-mono);
  font-size:11px; color:var(--sb6i-text-3); }
@media (max-width:768px) { .pop-hide-mobile { display:none !important; } }

/* ── Dropdown menu (quick-status pattern) ── */
.pop-menu-anchor { position:relative; display:inline-block; }
.pop-menu { position:absolute; z-index:20; display:none;
  min-width:150px; padding:4px; border-radius:6px;
  border:1px solid var(--sb6i-blue); background:var(--sb6i-void); }
.pop-menu.is-open { display:block; }
.pop-menu button { display:block; width:100%; text-align:left;
  font-family:var(--sb6i-mono); font-size:10px; padding:5px 8px;
  border:none; background:none; color:var(--sb6i-text-2); cursor:pointer; }
.pop-menu button:hover { background:var(--sb6i-hover-tint); color:var(--sb6i-text-1); }

/* ─── BADGE BASE ─────────────────────────────────────────────────── */
.pop-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: filter 180ms ease, transform 180ms ease;
}
.pop-badge:hover { filter: brightness(1.10); transform: scale(1.03); }

.pop-badge.super {
  background: linear-gradient(135deg, rgba(2,136,209,0.92), rgba(2,136,209,0.62));
  border: 1px solid rgba(77,184,238,0.95);
  box-shadow:
    0 0 0 1px rgba(77,184,238,0.25),
    0 0 18px rgba(2,136,209,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.pop-badge.admin {
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.70));
  color: #1a0a00;
  border: 1px solid rgba(251,191,36,1);
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.30),
    0 0 18px rgba(245,158,11,0.55),
    inset 0 1px 0 rgba(255,255,255,0.40);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.pop-badge.user {
  background: linear-gradient(135deg, rgba(124,93,250,0.92), rgba(92,56,255,0.62));
  border: 1px solid rgba(184,164,255,0.95);
  box-shadow:
    0 0 0 1px rgba(184,164,255,0.25),
    0 0 18px rgba(92,56,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.pop-badge.approved {
  background: linear-gradient(135deg, rgba(34,197,94,0.85), rgba(22,163,74,0.58));
  border: 1px solid rgba(95,224,128,0.95);
  box-shadow:
    0 0 0 1px rgba(95,224,128,0.25),
    0 0 18px rgba(34,197,94,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.pop-badge.revoked {
  background: linear-gradient(135deg, rgba(220,80,80,0.78), rgba(180,40,40,0.55));
  border: 1px solid rgba(240,120,120,0.80);
  box-shadow:
    0 0 0 1px rgba(240,120,120,0.20),
    0 0 14px rgba(220,80,80,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.pop-badge.pending {
  background: linear-gradient(135deg, rgba(251,191,36,0.80), rgba(245,158,11,0.55));
  color: #1a0a00;
  border: 1px solid rgba(251,191,36,0.85);
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.22),
    0 0 14px rgba(245,158,11,0.45),
    inset 0 1px 0 rgba(255,255,255,0.30);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.pop-badge.muted,
.pop-badge.na {
  background: rgba(120,120,130,0.20);
  color: #aaa;
  border: 1px solid rgba(180,180,180,0.22);
  text-shadow: none;
}

/* ─── ACTIVITY PILLS (ON / OFF) ──────────────────────────────────── */
.pop-act {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.pop-act.on {
  background: linear-gradient(135deg, rgba(34,197,94,0.92), rgba(22,163,74,0.68));
  color: #ffffff;
  border: 1px solid rgba(95,224,128,0.95);
  box-shadow:
    0 0 0 1px rgba(95,224,128,0.30),
    0 0 16px rgba(34,197,94,0.60),
    inset 0 1px 0 rgba(255,255,255,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.pop-act.off {
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.72));
  color: #1a0a00;
  border: 1px solid rgba(251,191,36,1);
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.30),
    0 0 16px rgba(245,158,11,0.55),
    inset 0 1px 0 rgba(255,255,255,0.40);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* ─── TIER PILLS ─────────────────────────────────────────────────── */
.pop-tier {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 700;
  white-space: nowrap;
  color: #ffffff;
  display: inline-block;
  transition: filter 180ms ease, transform 180ms ease;
}
.pop-tier-t1 {
  background: linear-gradient(135deg, rgba(2,136,209,0.92), rgba(2,136,209,0.62));
  border: 1px solid rgba(77,184,238,0.95);
  box-shadow:
    0 0 0 1px rgba(77,184,238,0.25),
    0 0 18px rgba(2,136,209,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: #ffffff;
  white-space: nowrap;
}
.pop-tier-t3 {
  background: linear-gradient(135deg, rgba(34,197,94,0.85), rgba(22,163,74,0.58));
  border: 1px solid rgba(95,224,128,0.95);
  box-shadow:
    0 0 0 1px rgba(95,224,128,0.25),
    0 0 18px rgba(34,197,94,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: #ffffff;
  white-space: nowrap;
}
.pop-tier-t2 {
  background: linear-gradient(135deg, rgba(124,93,250,0.92), rgba(92,56,255,0.62));
  border: 1px solid rgba(184,164,255,0.95);
  box-shadow:
    0 0 0 1px rgba(184,164,255,0.25),
    0 0 18px rgba(92,56,255,0.60),
    inset 0 1px 0 rgba(255,255,255,0.22);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: #ffffff;
  white-space: nowrap;
}
.pop-tier-t2-infra {
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.70));
  color: #1a0a00;
  border: 1px solid rgba(251,191,36,1);
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.3),
    0 0 18px rgba(245,158,11,0.60),
    inset 0 1px 0 rgba(255,255,255,0.40);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  white-space: nowrap;
}

/* ─── SECTION TITLE (mono-label header, teal emphasis bar) ───────── */
.pop-section-title {
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-p, #f5f5f7);
  margin: 28px 0 14px 0;
  padding: 10px 0 10px 16px;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  border-left: 4px solid rgba(45,212,191,0.55);
  background: linear-gradient(90deg, rgba(45,212,191,0.10), transparent 60%);
}
.pop-section-title strong { color: #2DD4BF; font-weight: 800; }
.pop-section-sub {
  font-size: 12px;
  color: var(--text-s, #d2d6e1);
  margin: 0 0 12px 16px;
  font-style: italic;
}

/* ─── CARD + GRID ────────────────────────────────────────────────── */
.pop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.pop-card {
  background: var(--surface);
  border: 1px solid var(--border-s);
  border-radius: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.pop-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.08);
  transition: background 180ms ease, height 180ms ease;
}
.pop-card:hover {
  border-color: rgba(255,255,255,0.18);
  background: var(--surface-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.pop-card:hover::before { height: 3px; }
.pop-card:hover [class*="pop-tier"] { filter: brightness(1.1); transform: scale(1.04); }

.pop-card:has(.pop-tier-t1)::before       { background: linear-gradient(90deg, rgba(2,136,209,0.85), rgba(2,136,209,0.20) 80%, transparent); }
.pop-card:has(.pop-tier-t3)::before       { background: linear-gradient(90deg, rgba(34,197,94,0.80), rgba(34,197,94,0.20) 80%, transparent); }
.pop-card:has(.pop-tier-t2)::before       { background: linear-gradient(90deg, rgba(124,93,250,0.85), rgba(92,56,255,0.20) 80%, transparent); }
.pop-card:has(.pop-tier-t2-infra)::before { background: linear-gradient(90deg, rgba(251,191,36,0.85), rgba(245,158,11,0.20) 80%, transparent); }

.pop-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; }
.pop-card-name { font-size: 17px; font-weight: 600; color: var(--text-p); font-family: var(--body); letter-spacing: -0.2px; }
.pop-card-desc { color: var(--text-s); font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.pop-card-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-m); font-family: var(--mono); }
.pop-card-stats strong { color: var(--text-p); font-weight: 600; }

/* nav drawer tag chip (finale 2026-07-09) */
.nav-tag { font-size: 9px; padding: 1px 5px; border-radius: 3px; background: rgba(2,136,209,0.15); margin-left: 4px; letter-spacing: 0.1em; }

/* ═══ TINT SYSTEM (2026-07-09 visual-fix) — specialists card language as shared
   classes. Generic single-class + scoped boosters: dashboard-v4.css loads AFTER
   canon (extra_css @import), so v4 surfaces need (0,3,0)+ selectors to win
   without !important. Teal tint = EJ exception (verdict b) for Working tile +
   Performance row. Layered ON TOP of dashboard-v4's POP-v1 block (verdict c). ═══ */
.pop-tint-accent, .v4-root .d-v4-stat.pop-tint-accent,
.v4-root details.d-v4-peek.pop-tint-accent, .v4-root details.d-v4-peek.pop-tint-accent[open],
.v4-root details.d-v4-collapsible.pop-tint-accent, .v4-root details.d-v4-collapsible.pop-tint-accent[open] {
  border-color: rgba(2,136,209,0.65);
  background: linear-gradient(180deg, rgba(2,136,209,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(77,184,238,0.20), 0 0 20px rgba(2,136,209,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pop-tint-warm, .v4-root .d-v4-stat.pop-tint-warm,
.v4-root details.d-v4-peek.pop-tint-warm, .v4-root details.d-v4-peek.pop-tint-warm[open],
.v4-root details.d-v4-collapsible.pop-tint-warm, .v4-root details.d-v4-collapsible.pop-tint-warm[open] {
  border-color: rgba(245,158,11,0.65);
  background: linear-gradient(180deg, rgba(245,158,11,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(251,191,36,0.20), 0 0 20px rgba(245,158,11,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pop-tint-hot, .v4-root .d-v4-stat.pop-tint-hot,
.v4-root details.d-v4-peek.pop-tint-hot, .v4-root details.d-v4-peek.pop-tint-hot[open],
.v4-root details.d-v4-collapsible.pop-tint-hot, .v4-root details.d-v4-collapsible.pop-tint-hot[open] {
  border-color: rgba(239,68,68,0.65);
  background: linear-gradient(180deg, rgba(239,68,68,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(255,100,100,0.24), 0 0 20px rgba(239,68,68,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
}
.pop-tint-seq, .v4-root .d-v4-stat.pop-tint-seq,
.v4-root details.d-v4-peek.pop-tint-seq, .v4-root details.d-v4-peek.pop-tint-seq[open],
.v4-root details.d-v4-collapsible.pop-tint-seq, .v4-root details.d-v4-collapsible.pop-tint-seq[open] {
  border-color: rgba(59,130,246,0.65);
  background: linear-gradient(180deg, rgba(59,130,246,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(100,160,255,0.20), 0 0 20px rgba(59,130,246,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pop-tint-teal, .v4-root .d-v4-stat.pop-tint-teal,
.v4-root details.d-v4-peek.pop-tint-teal, .v4-root details.d-v4-peek.pop-tint-teal[open],
.v4-root details.d-v4-collapsible.pop-tint-teal, .v4-root details.d-v4-collapsible.pop-tint-teal[open] {
  border-color: rgba(45,212,191,0.65);
  background: linear-gradient(180deg, rgba(45,212,191,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(94,234,212,0.20), 0 0 20px rgba(45,212,191,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* teal identity for the Working tile: number + stripe (replaces .info blue) */
.v4-root .d-v4-stat.pop-tint-teal .d-v4-stat-num { color: #2DD4BF; text-shadow: 0 0 13px rgba(45,212,191,0.25); }
.v4-root .d-v4-stat.pop-tint-teal::before { background: linear-gradient(90deg, #2DD4BF, rgba(45,212,191,0.2) 80%, transparent); }
.v4-root .d-v4-stat.pop-tint-hot:hover { box-shadow: 0 0 0 1px rgba(255,100,100,0.30), 0 0 27px rgba(239,68,68,0.29), inset 0 1px 0 rgba(255,255,255,0.07); }
.v4-root .d-v4-stat.pop-tint-accent:hover { box-shadow: 0 0 0 1px rgba(77,184,238,0.28), 0 0 24px rgba(2,136,209,0.27), inset 0 1px 0 rgba(255,255,255,0.06); }
.v4-root .d-v4-stat.pop-tint-warm:hover { box-shadow: 0 0 0 1px rgba(251,191,36,0.28), 0 0 24px rgba(245,158,11,0.27), inset 0 1px 0 rgba(255,255,255,0.06); }
.v4-root .d-v4-stat.pop-tint-seq:hover { box-shadow: 0 0 0 1px rgba(100,160,255,0.28), 0 0 24px rgba(59,130,246,0.27), inset 0 1px 0 rgba(255,255,255,0.06); }
.v4-root .d-v4-stat.pop-tint-teal:hover { box-shadow: 0 0 0 1px rgba(94,234,212,0.28), 0 0 24px rgba(45,212,191,0.27), inset 0 1px 0 rgba(255,255,255,0.06); }
.v4-root .d-v4-stat.pop-tint-accent:hover, .v4-root .d-v4-stat.pop-tint-teal:hover,
.v4-root .d-v4-stat.pop-tint-warm:hover, .v4-root .d-v4-stat.pop-tint-seq:hover { filter: brightness(1.06); }

/* ─── CANON TAG CHIP (SYSTEM HEALTH badge etc.) ─── */
.pop-chip, .v4-root .d-v4-summary-badge.pop-chip {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px;
  background: rgba(120,120,130,0.20); color: var(--text-s); border: 1px solid rgba(180,180,180,0.22);
  transition: filter 180ms ease, transform 180ms ease;
}
.pop-chip:hover, .v4-root .d-v4-summary-badge.pop-chip:hover { filter: brightness(1.10); transform: scale(1.03); }
.pop-chip.alert, .v4-root .d-v4-summary-badge.pop-chip.alert {
  color: #fff; background: linear-gradient(135deg, rgba(220,80,80,0.78), rgba(180,40,40,0.55));
  border: 1px solid rgba(240,120,120,0.80); box-shadow: 0 0 10px rgba(239,68,68,0.35);
}
.pop-chip.warn, .v4-root .d-v4-summary-badge.pop-chip.warn {
  color: #1a0a00; background: linear-gradient(135deg, rgba(251,191,36,0.80), rgba(245,158,11,0.55));
  border: 1px solid rgba(251,191,36,0.85); box-shadow: 0 0 10px rgba(245,158,11,0.30);
}

/* ─── NAV DRAWER DIVIDER (final flat nav 2026-07-09) ─── */
.nav-drawer-divider { border-top: 1px solid var(--border-s); margin: 8px 0; }

/* double-class boosters (7/09): make .pop-tint-* beat page-local single-class card rules regardless of load order */
.pop-tint-accent.pop-tint-accent {
  border-color: rgba(2,136,209,0.65);
  background: linear-gradient(180deg, rgba(2,136,209,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(77,184,238,0.20), 0 0 20px rgba(2,136,209,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pop-tint-warm.pop-tint-warm {
  border-color: rgba(245,158,11,0.65);
  background: linear-gradient(180deg, rgba(245,158,11,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(251,191,36,0.20), 0 0 20px rgba(245,158,11,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pop-tint-hot.pop-tint-hot {
  border-color: rgba(239,68,68,0.65);
  background: linear-gradient(180deg, rgba(239,68,68,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(255,100,100,0.20), 0 0 20px rgba(239,68,68,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pop-tint-seq.pop-tint-seq {
  border-color: rgba(59,130,246,0.65);
  background: linear-gradient(180deg, rgba(59,130,246,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(100,160,255,0.20), 0 0 20px rgba(59,130,246,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pop-tint-teal.pop-tint-teal {
  border-color: rgba(45,212,191,0.65);
  background: linear-gradient(180deg, rgba(45,212,191,0.10), transparent 45%), #000;
  box-shadow: 0 0 0 1px rgba(94,234,212,0.20), 0 0 20px rgba(45,212,191,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}