/* ─── COSMO DESIGN SYSTEM — COMPONENTS ────────────────────────────────────
   Reusable UI component classes. Requires tokens.css.
   When a screen introduces a new component pattern, it graduates here.
   When you modify a class here, it updates everywhere it's used.
 ─────────────────────────────────────────────────────────────────────────── */

/* ─── GLOBAL RESET ───────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-ui); font-size: var(--text-base); color: var(--ink); background: var(--bg-app); overflow: hidden; height: 100vh; display: flex; flex-direction: column; }

/* ─── APP LAYOUT ─────────────────────────────────────────────────────────── */
/* Base shell — set grid-template-columns per page */
.shell { display: grid; flex: 1; min-height: 0; overflow: hidden; transition: grid-template-columns 0.22s cubic-bezier(0.4,0,0.2,1); }
.page  { display: flex; flex-direction: column; height: 100%; overflow: hidden; min-width: 0; }

/* ─── TOPBAR ──────────────────────────────────────────────────────────────── */
.topbar       { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-5); height: 50px; background: var(--bg-panel); border-bottom: 1px solid var(--line); flex-shrink: 0; gap: var(--space-3); }
.topbar-left  { display: flex; align-items: center; gap: var(--space-4); }
.topbar-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.page-title   { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; white-space: nowrap; }

/* ─── KPI STRIP ───────────────────────────────────────────────────────────── */
/* Shared strip container used below any topbar to show summary metrics. */
.kpi-strip { display: flex; align-items: stretch; padding: var(--space-3) var(--space-5); background: var(--bg-app); border-bottom: 1px solid var(--line); flex-shrink: 0; gap: var(--space-3); }

/* ─── SLA CHIP ────────────────────────────────────────────────────────────── */
.sla-chip         { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-xs); white-space: nowrap; }
.sla-chip.overdue { background: var(--red-100);   color: var(--red-600); }
.sla-chip.today   { background: var(--amber-100); color: var(--amber-600); }
.sla-chip.ok      { background: var(--green-100); color: var(--green-600); }
.sla-chip.none    { color: var(--ink-muted); font-weight: 400; padding: 0; }

/* ─── TYPOGRAPHY UTILITY ─────────────────────────────────────────────────── */

.mono {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
}

/* ─── BUTTONS ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 550;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s, box-shadow 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.42; cursor: not-allowed; pointer-events: none; }

.btn-sm  { font-size: 11.5px; padding: 5px 10px; }
.btn-md  { font-size: var(--text-sm); padding: 7px 14px; }
.btn-lg  { font-size: var(--text-base); padding: 10px 18px; }

.btn-primary   { background: var(--ink-900); color: var(--cream-50); border: 1px solid var(--ink-900); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--ink-800); border-color: var(--ink-800); }

.btn-accent    { background: var(--accent); color: oklch(99% 0.006 78); border: 1px solid var(--accent); box-shadow: var(--shadow-xs); }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-secondary { background: var(--bg-raised); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--bg-sunken); border-color: var(--ink-300); }

.btn-ghost     { background: transparent; color: var(--ink-soft); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--bg-sunken); color: var(--ink); border-color: var(--line); }

.btn-danger    { background: var(--bg-raised); color: var(--red-600); border: 1px solid var(--line-strong); box-shadow: var(--shadow-xs); }
.btn-danger:hover { background: var(--red-100); border-color: var(--red-500); }

.btn-link      { background: transparent; color: var(--accent-dark); border: 1px solid transparent; font-weight: 500; padding-left: 0; padding-right: 0; }
.btn-link:hover { color: var(--accent); }

/* ─── TAGS & BADGES ───────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
}
.tag-on-track  { background: var(--s-on-track-bg);  color: var(--green-600);  }
.tag-at-risk   { background: var(--s-at-risk-bg);   color: var(--amber-600);  }
.tag-behind    { background: var(--s-behind-bg);    color: var(--red-600);    }
.tag-no-start  { background: var(--s-no-start-bg);  color: var(--ink-500);    }
.tag-delivered { background: var(--ink-900);         color: var(--cream-100);  }

.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--ink-900);
  color: var(--cream-100);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.tier-badge.lg  { width: 24px; height: 24px; font-size: 11px; border-radius: var(--radius-sm); }
.tier-badge.t1  { background: var(--ink-700); color: var(--cream-100); }
.tier-badge.t2  { background: var(--ink-600); color: var(--cream-100); }
.tier-badge.t3  { background: var(--ink-300); color: var(--ink-800); }
.tier-badge.rev { background: var(--ink-800); color: var(--cream-100); }

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px;
  font-weight: 600;
  background: var(--bg-sunken);
  color: var(--ink-soft);
  border-radius: var(--radius-full);
}
.count-badge.accent { background: var(--accent); color: oklch(99% 0.006 78); }

.phase-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-weight: 600;
}

/* ─── FORM INPUTS ─────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-label { font-size: var(--text-sm); font-weight: 550; color: var(--ink); }
.field-hint { font-size: var(--text-xs); color: var(--ink-muted); }

.input {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  width: 100%;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input::placeholder { color: var(--ink-muted); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bg-sunken); }
.input-error { border-color: var(--red-500); }
.input-error:focus { box-shadow: 0 0 0 3px var(--red-100); }

.select {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 28px 7px 10px;
  width: 100%;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6H0z' fill='%238E8B80'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.checkbox-row { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.checkbox { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.checkbox-label { font-size: var(--text-sm); color: var(--ink); }

/* ─── PLAYABLE CARD (ply-card) ──────────────────────────────────────────────── */
/* Unified playable entity — three contexts, one class family:
   .ply-card          = full two-row card (backlog, pools)
   .ply-card--grid    = compact single-row (weekly board day cells)
   .task-row          = flat table row (Pulse, Delivery — see task-row section)

   Row 1: [tier-badge] Name  PLY-000 ··· [.ply-status in --grid only]
   Row 2: Game name  [.ply-card-concept]       (hidden in --grid)
*/
.ply-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ply-card:hover    { border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.ply-card.selected { border-color: var(--accent); background: var(--accent-wash); }

.ply-card-r1 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ply-card-r2 { display: flex; align-items: center; gap: 5px; min-width: 0; }

.ply-card-name {
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.25;
}
.ply-card-id {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px;
  color: var(--ink-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.ply-card-game {
  font-size: 10px;
  color: var(--ink-muted);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ply-card-concept {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: var(--bg-sunken);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

/* Tier badge compact override within ply-card */
.ply-card .tier-badge { width: 16px; height: 16px; font-size: 8.5px; border-radius: 3px; }

/* Compact / Grid variant — row 2 hidden, tighter padding */
.ply-card--grid             { padding: 5px 7px; gap: 0; }
.ply-card--grid .ply-card-r2  { display: none; }
.ply-card--grid .ply-card-name { font-size: 11.5px; }

/* ─── STATUS BADGE (ply-status) ─────────────────────────────────────────────── */
/* Inline status+time label — right-aligned in .ply-card--grid row 1.
   Append .ply-status-age span for elapsed time (e.g. "4H", "2D"). */
.ply-status {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  flex-shrink: 0; white-space: nowrap;
  margin-left: auto;
  background: var(--bg-sunken); color: var(--ink-soft);
}
.ply-status.ok   { background: var(--s-on-track-bg); color: var(--green-600); }
.ply-status.warn { background: var(--s-at-risk-bg);  color: var(--amber-600); }
.ply-status.err  { background: var(--s-behind-bg);   color: var(--red-600); }
.ply-status-age  { margin-left: 5px; opacity: 0.6; font-weight: 400; }

/* ─── SCHEDULE CARD (rcard) — legacy weekly prototype ────────────────────────── */
/* Simple colored pill used in the current weekly.html prototype.
   Superseded by .ply-card--grid in the wireframe design direction. */

.rcard {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid oklch(12% 0.008 75 / 0.09);
  cursor: pointer;
  min-height: 24px;
  transition: box-shadow 0.1s, border-color 0.1s;
}
.rcard:hover { box-shadow: var(--shadow-xs); border-color: oklch(12% 0.008 75 / 0.18); }
.rcard.on-track  { background: var(--s-on-track-bg); }
.rcard.at-risk   { background: var(--s-at-risk-bg); }
.rcard.behind    { background: var(--s-behind-bg); }
.rcard.notstart  { background: var(--bg-sunken); }
.rcard.delivered { background: var(--ink-900); }
.rcard.carryover { opacity: 0.75; }

/* Compact tier badge override for rcard */
.rcard .tier-badge { width: 16px; height: 16px; font-size: 8.5px; border-radius: 3px; }
.rcard.on-track  .tier-badge { background: var(--green-600);  color: var(--cream-50); }
.rcard.at-risk   .tier-badge { background: var(--amber-600);  color: var(--cream-50); }
.rcard.behind    .tier-badge { background: var(--red-600);    color: var(--cream-50); }
.rcard.notstart  .tier-badge { background: var(--ink-300);    color: var(--ink-800); }
.rcard.delivered .tier-badge { background: var(--cream-300);  color: var(--ink-800); }

.rcard-title {
  flex: 1;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.rcard-meta {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.rcard.notstart  .rcard-title  { color: var(--ink-soft); }
.rcard.delivered .rcard-title  { color: var(--cream-200); }
.rcard.delivered .rcard-meta   { color: var(--ink-300); }
.carry-icon { flex-shrink: 0; color: var(--ink-muted); opacity: 0.6; }

.carry-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  margin-bottom: 1px;
}
.carry-label {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ─── PLAYABLE DETAIL CARD ────────────────────────────────────────────────── */

.playable-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  width: 280px;
}
.playable-card-head { padding: var(--space-4); border-bottom: 1px solid var(--line); }
.playable-card-id {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}
.playable-card-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: var(--space-2);
}
.playable-card-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.playable-card-body { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.playable-meta-row { display: flex; justify-content: space-between; align-items: baseline; }
.playable-meta-key {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.playable-meta-val { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.playable-card-foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); display: flex; gap: var(--space-2); }

/* ─── GAME CHIP ───────────────────────────────────────────────────────────── */

.game-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px 8px 8px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.1s;
}
.game-chip:hover { border-color: var(--line-strong); }
.game-chip.selected { border-color: var(--accent); background: var(--accent-wash); }
.game-chip-title { flex: 1; font-size: var(--text-sm); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-chip-count {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px;
  color: var(--ink-muted);
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

/* ─── AVATAR ──────────────────────────────────────────────────────────────── */

.avatar {
  width: 28px;
  height: 28px;
  background: var(--ink-900);
  color: var(--cream-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── NAVIGATION ──────────────────────────────────────────────────────────── */

.nav-group-label {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--space-4) var(--space-4) var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.nav-item:hover { background: var(--bg-sunken); color: var(--ink); }
.nav-item.active { background: var(--accent-wash); color: var(--accent-dark); border-color: var(--accent-soft); font-weight: 600; }
.nav-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; stroke-width: 1.8; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-label { flex: 1; }
.nav-count {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px;
  color: var(--ink-muted);
  background: var(--bg-sunken);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}
.nav-item.active .nav-count { background: oklch(57.2% 0.194 42 / 0.15); color: var(--accent-dark); }

/* ─── TABS ────────────────────────────────────────────────────────────────── */

.tabs {
  display: inline-flex;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}
.tab {
  padding: 5px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-ui);
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.tab.active { background: var(--bg-raised); color: var(--ink); box-shadow: var(--shadow-xs); font-weight: 600; }
.tab:hover:not(.active) { color: var(--ink); }

/* ─── FILTER PILL ─────────────────────────────────────────────────────────── */

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  white-space: nowrap;
  transition: border-color 0.1s;
}
.filter-pill:hover { border-color: var(--line-strong); }

/* ─── WEEK CONTROLS ───────────────────────────────────────────────────────── */

.date-label {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  white-space: nowrap;
}

.week-switch {
  display: flex;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 2px;
}
.week-btn {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.week-btn.active { background: var(--ink-900); color: var(--cream-50); }

/* ─── KPI TILE ────────────────────────────────────────────────────────────── */

.kpi {
  padding: 12px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  box-shadow: var(--shadow-xs);
}
.kpi.sm {
  padding: 8px 12px;
  min-width: 110px;
  justify-content: space-between;
}
.kpi.accent .kpi-value { color: var(--accent); }

.kpi-label {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.kpi.sm .kpi-label { font-size: 9px; }

.kpi-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.kpi.sm .kpi-value { font-size: 19px; }
.kpi-value .unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  letter-spacing: 0;
  margin-left: 1px;
}

.kpi-delta {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px;
  color: var(--green-600);
}
.kpi.sm .kpi-delta { font-size: 9px; }
.kpi-delta.down { color: var(--red-500); }
.kpi-delta.flat { color: var(--ink-muted); }

/* ─── TIER DISTRIBUTION CARD ──────────────────────────────────────────────── */
/* Used in stats strips and dashboards to show workload breakdown by tier. */

.tier-card {
  padding: 8px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  box-shadow: var(--shadow-xs);
}

/* ─── SEGMENTED BAR ───────────────────────────────────────────────────────── */

.seg-bar { display: flex; gap: 3px; height: 28px; }
.seg-bar.compact { height: 14px; }
.seg {
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  cursor: default;
}
.seg-bar.compact .seg { border-radius: 3px; }
.seg-dark { background: var(--ink-900); }
.seg-mid  { background: var(--cream-300); }
.seg-label {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.seg-dark .seg-label { color: var(--cream-100); }
.seg-mid  .seg-label { color: var(--ink-700); }

.seg-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.seg-leg { display: inline-flex; align-items: center; gap: 4px; }
.seg-dot { width: 7px; height: 7px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.seg-leg-label {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.seg-leg-count {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 2px;
}

/* ─── STATUS DISTRIBUTION BAR ────────────────────────────────────────────────
   Shows a horizontal breakdown of playables by pipeline stage_status.
   Canonical stage_status values: Assigned · Pending TL · Pending PG ·
   PG Approved · Build Queued · In Build · Build Complete · Build Failed ·
   Delivered · Stuck.

   JS behavior (not CSS):
   - filterByStatus(key)  — click a segment to activate it; others become dimmed.
   - clearPipelineFilter() — resets all segments to default.
   - evaluatePbWide(bar)  — per-segment responsive collapse: shows label only when
     segment is wide enough (icon col ~18px + label + 14px buffer).
   - showPbTooltip(seg) / hidePbTooltip() — body-attached tooltip positioned above
     the hovered segment. Tooltip text = label only (data-tip attribute), not a
     description. See screens/prototypes/air.html for the canonical JS pattern.

   Prefix: .sdb (status distribution bar)
   Aliases: .dist-bar → .sdb, .dist-seg → .sdb-seg  (prototypes migrate over time)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Container ──────────────────────────────────────────────────────────── */
.sdb {
  display: flex;
  height: 22px;
  gap: 1px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

/* ── Header row (label + optional filter hint) ──────────────────────────── */
.sdb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sdb-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sdb-filter-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
  display: none;
}
.sdb-filter-hint.visible { display: block; }
.sdb-clear-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0;
  margin-left: 4px;
}
.sdb-clear-btn:hover { color: var(--accent); }

/* ── Segment ────────────────────────────────────────────────────────────── */
.sdb-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: opacity 0.15s, filter 0.12s;
  /* Reset <button> defaults so segments render flush — no UA borders/padding. */
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink-700);
  -webkit-appearance: none;
  appearance: none;
  /* Background is set inline via JS (var(--cream-400) etc.) */
}

/* Keyboard accessibility — inset accent ring so it never adds visual weight
   outside the segment (no "black line" between segments). */
.sdb-seg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
}

/* States — visual feedback via filter + opacity only; no outlines, ever. */
.sdb-seg:hover                  { filter: brightness(0.9); }
.sdb-seg.is-dimmed              { opacity: 0.18; }
.sdb-seg.is-active              { filter: brightness(0.85); }

/* ── Segment icon ───────────────────────────────────────────────────────── */
.sdb-seg-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 4px;
}
.sdb-seg-icon svg { width: 10px; height: 10px; stroke-width: 2; color: var(--ink-700); }

/* Light segments (dark background — Delivered, In Build, Build Complete, etc.) */
.sdb-seg.is-light .sdb-seg-icon svg { color: var(--cream-100); }

/* ── Segment label ──────────────────────────────────────────────────────── */
.sdb-seg-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-700);
  white-space: nowrap;
  display: none; /* hidden by default; shown when .is-wide */
  padding: 0 4px 0 0;
  line-height: 1;
}
.sdb-seg.is-light .sdb-seg-label { color: var(--cream-100); }
.sdb-seg.is-wide  .sdb-seg-label { display: block; }

/* ── Tooltip (body-attached, JS-positioned — escapes bar's overflow:hidden) */
.sdb-tooltip {
  position: fixed;
  background: var(--bg-raised);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease-out;
  z-index: 9999;
}
.sdb-tooltip.is-visible { opacity: 1; }
.sdb-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  margin-top: -4px;
  background: var(--bg-raised);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ── Aliases — legacy class names; prototypes should migrate to .sdb-* ──── */
.dist-bar   { display: flex; height: 22px; gap: 1px; border-radius: var(--radius-full); overflow: hidden; }
.dist-seg   { display: flex; align-items: center; justify-content: center; min-width: 4px; overflow: hidden; cursor: pointer; position: relative; transition: opacity 0.15s, filter 0.12s; }
.dist-seg:hover        { filter: brightness(0.9); }
.dist-seg.pb-dimmed    { opacity: 0.18; }
.dist-seg.is-dimmed    { opacity: 0.18; }
.dist-seg.pb-active    { filter: brightness(0.85); }
.dist-seg.is-active    { filter: brightness(0.85); }
.dist-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }
.pb-seg-icon           { display: flex; align-items: center; flex-shrink: 0; padding: 0 4px; }
.pb-seg-icon svg       { width: 10px; height: 10px; stroke-width: 2; color: var(--ink-700); }
.dist-seg.pb-light .pb-seg-icon svg { color: var(--cream-100); }
.pb-seg-label          { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--ink-700); white-space: nowrap; display: none; padding: 0 4px 0 0; line-height: 1; }
.dist-seg.pb-light .pb-seg-label { color: var(--cream-100); }
.dist-seg.pb-wide  .pb-seg-label { display: block; }
.pb-tooltip            { position: fixed; background: var(--bg-raised); color: var(--ink); font-family: var(--font-ui); font-size: 11px; font-weight: 500; line-height: 1.35; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity 120ms ease-out; z-index: 9999; }
.pb-tooltip.is-visible { opacity: 1; }
.pb-tooltip::after     { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; margin-top: -4px; background: var(--bg-raised); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ─── PROGRESS BAR ────────────────────────────────────────────────────────── */

.progress-wrap { display: flex; flex-direction: column; gap: var(--space-1); }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; }
.progress-title { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.progress-pct {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10.5px;
  color: var(--ink-soft);
}
.progress-track { height: 6px; background: var(--bg-sunken); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width 0.4s ease-out;
}
.progress-fill.green { background: var(--s-on-track); }
.progress-fill.amber { background: var(--s-at-risk); }
.progress-fill.red   { background: var(--s-behind); }

/* ─── LOAD BAR (CAPACITY) ─────────────────────────────────────────────────── */

.load-bar-wrap { display: flex; align-items: center; gap: var(--space-2); }
.load-bar-track { flex: 1; height: 4px; background: var(--bg-sunken); border-radius: var(--radius-full); overflow: hidden; }
.load-bar-fill { height: 100%; border-radius: var(--radius-full); }
.load-bar-fill.low  { background: var(--s-on-track); }
.load-bar-fill.mid  { background: var(--accent); }
.load-bar-fill.high { background: var(--s-at-risk); }
.load-bar-fill.over { background: var(--s-behind); }
.load-count {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px;
  color: var(--ink-soft);
  flex-shrink: 0;
  width: 36px;
  text-align: right;
}

/* ─── EMPTY STATE ─────────────────────────────────────────────────────────── */

.empty-state { display: flex; flex-direction: column; align-items: center; padding: var(--space-10) var(--space-8); text-align: center; gap: var(--space-3); }
.empty-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}
.empty-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.empty-desc { font-size: var(--text-sm); color: var(--ink-soft); max-width: 30ch; line-height: 1.55; }

/* ─── ALERT ───────────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.alert-info    { background: var(--accent-wash);   border: 1px solid var(--accent-soft); color: var(--accent-dark); }
.alert-success { background: var(--s-on-track-bg); border: 1px solid var(--green-100);   color: var(--green-600); }
.alert-warning { background: var(--s-at-risk-bg);  border: 1px solid var(--amber-100);   color: var(--amber-600); }
.alert-danger  { background: var(--s-behind-bg);   border: 1px solid var(--red-100);     color: var(--red-600); }
.alert-body { flex: 1; }
.alert-title { font-weight: 600; margin-bottom: 2px; }
.alert-desc { opacity: 0.85; }

/* ─── STATUS TAG ──────────────────────────────────────────────────────────── */
/* Inline status indicator with dot, used in popovers and list views.
   Class modifier matches the status value string from the data layer. */

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
}
.status-tag.ontrack  { background: var(--s-on-track-bg); color: var(--green-600); }
.status-tag.atrisk   { background: var(--s-at-risk-bg);  color: var(--amber-600); }
.status-tag.behind   { background: var(--s-behind-bg);   color: var(--red-600); }
.status-tag.notstart { background: var(--cream-200);      color: var(--ink-500); }
.status-tag.delivered { background: var(--ink-900);       color: var(--cream-100); }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ─── POPOVER ─────────────────────────────────────────────────────────────── */

.pop-backdrop { position: fixed; inset: 0; z-index: 49; display: none; }
.pop-backdrop.on { display: block; }

.popover {
  position: fixed;
  width: 260px;
  display: none;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  overflow: hidden;
}
.popover.on { display: block; }

.pop-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.pop-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.pop-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.pop-close { background: none; border: none; cursor: pointer; color: var(--ink-muted); padding: 2px; display: flex; align-items: center; border-radius: var(--radius-xs); transition: background 0.1s; }
.pop-close:hover { background: var(--bg-sunken); color: var(--ink); }

.pop-body { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.pop-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.pop-key {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.pop-val { font-size: var(--text-sm); font-weight: 500; color: var(--ink); text-align: right; }
.pop-val.mono { font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0; font-size: 11px; }

.pop-foot { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.pop-btn {
  flex: 1;
  padding: 6px 8px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 550;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: background 0.1s;
}
.pop-btn:hover { background: var(--bg-sunken); }
.pop-btn.primary { background: var(--ink-900); border-color: var(--ink-900); color: var(--cream-50); }
.pop-btn.primary:hover { background: var(--ink-800); }

/* ─── TOAST ───────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink-900);
  color: var(--cream-100);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 80;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── APP SHELL / SIDEBAR ─────────────────────────────────────────────────── */

.sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 62px;
}

.sidebar-brand-text { flex: 1; min-width: 0; overflow: hidden; }

.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.brand-sub {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--ink-muted);
  margin-top: 3px;
  text-transform: uppercase;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
  margin-top: 1px;
}
.sidebar-toggle:hover { background: var(--bg-sunken); color: var(--ink); }

.toggle-icon-collapse,
.toggle-icon-expand { width: 14px; height: 14px; }
.toggle-icon-expand { display: none; }

.sidebar-nav {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.user-row { display: flex; align-items: center; gap: var(--space-2); }
.user-name { font-size: var(--text-sm); font-weight: 500; color: var(--ink); line-height: 1.2; }
.user-role {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Collapsed state ── */

.sidebar.collapsed .sidebar-brand {
  padding: var(--space-3) var(--space-2);
  justify-content: center;
  align-items: center;
}
.sidebar.collapsed .sidebar-brand-text { display: none; }
.sidebar.collapsed .toggle-icon-collapse { display: none; }
.sidebar.collapsed .toggle-icon-expand { display: block; }
.sidebar.collapsed .sidebar-toggle { margin-top: 0; }

.sidebar.collapsed .sidebar-nav {
  padding: var(--space-2) var(--space-1);
  align-items: center;
}
.sidebar.collapsed .nav-item {
  width: 34px;
  padding: 8px;
  justify-content: center;
  gap: 0;
}
.sidebar.collapsed .nav-item .nav-label { display: none; }
.sidebar.collapsed .nav-icon { opacity: 0.5; }
.sidebar.collapsed .nav-item.active .nav-icon { opacity: 1; }

.sidebar.collapsed .sidebar-footer {
  padding: var(--space-3) var(--space-2);
  display: flex;
  justify-content: center;
}
.sidebar.collapsed .user-name,
.sidebar.collapsed .user-role { display: none; }
.sidebar.collapsed .user-row { gap: 0; }

/* ─── TASK ROW ────────────────────────────────────────────────────────────── */
/* Compact horizontal row — playable tasks in observe, delivery, and backlog. */

.task-list {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  overflow: hidden;
}

.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: 44px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease-out);
  cursor: default;
  position: relative;
}
.task-row:last-child   { border-bottom: none; }
.task-row:hover        { background: var(--bg-sunken); }
.task-row.selected     { background: var(--accent-wash); }
.task-row.needs-review { background: oklch(94.0% 0.058 82 / 0.22); }
.task-row.stalled      { background: oklch(94.0% 0.058 82 / 0.10); }
.task-row.failed       { background: oklch(93.8% 0.058 20 / 0.22); }

.task-row-type  { flex-shrink: 0; }
.task-row-name  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.task-row-title {
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.task-row-sub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px;
  color: var(--ink-muted);
}
.task-row-id   { letter-spacing: 0.04em; }
.task-row-game { color: var(--ink-soft); }

.task-row-meta    { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.task-row-aud {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}
.task-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast);
  flex-shrink: 0;
}
.task-row:hover .task-row-actions { opacity: 1; pointer-events: auto; }

/* ─── ENTITY CARD ────────────────────────────────────────────────────────── */
/* Collapsible group card — used for games, auditors, teams.                 */

.entity-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  overflow: hidden;
  transition: border-color var(--dur-fast);
}
.entity-card + .entity-card { margin-top: var(--space-2); }
.entity-card.selected { border-color: var(--accent); }

.entity-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--dur-fast);
  user-select: none;
}
.entity-card-head:hover { background: var(--bg-sunken); }
.entity-card.selected .entity-card-head { background: var(--accent-wash); }

.entity-card-body { border-top: 1px solid var(--line); }
.entity-card.collapsed .entity-card-body { display: none; }

.entity-chevron {
  flex-shrink: 0;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}
.entity-chevron svg { width: 14px; height: 14px; }
.entity-card.collapsed .entity-chevron { transform: rotate(-90deg); }

/* Square avatar — for games and non-person entities */
.entity-av     { position: relative; flex-shrink: 0; width: 36px; height: 36px; }
.entity-av-sq  {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 10px; font-weight: 700; color: #fff;
}
.entity-av-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 14px; height: 14px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 7px; font-weight: 700; color: #fff;
  border: 1.5px solid var(--bg-panel);
}
/* Circle avatar — for people */
.entity-av-circle {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--ink-800); color: var(--cream-100);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 11px; font-weight: 700;
}

.entity-name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.entity-sub  { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 2px; }

.entity-stats  { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex-shrink: 0; }
.entity-stat   { display: flex; flex-direction: column; align-items: center; min-width: 28px; }
.entity-stat-n {
  font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1;
}
.entity-stat-l { font-size: 9px; color: var(--ink-muted); font-weight: 500; margin-top: 2px; }
.entity-stat-n.warn   { color: var(--amber-600); }
.entity-stat-n.danger { color: var(--red-600); }
.entity-stat-n.good   { color: var(--green-600); }

.entity-detail-btn {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--ink-muted); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.entity-detail-btn:hover { background: var(--bg-sunken); color: var(--ink); border-color: var(--line); }
.entity-detail-btn svg { width: 13px; height: 13px; }

/* Capacity bar — auditor-specific */
.cap-bar { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 80px; max-width: 140px; }
.cap-bar-row   { display: flex; justify-content: space-between; align-items: center; }
.cap-bar-label { font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0; font-size: 9px; color: var(--ink-muted); }
.cap-bar-nums  { font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0; font-size: 9.5px; color: var(--ink-soft); }
.cap-bar-track { height: 3px; background: var(--bg-sunken); border-radius: var(--radius-full); overflow: hidden; }
.cap-bar-fill  { height: 100%; border-radius: var(--radius-full); transition: width 0.3s var(--ease-out); }
.cap-bar-fill.ok   { background: var(--green-500); }
.cap-bar-fill.warn { background: var(--amber-500); }
.cap-bar-fill.over { background: var(--red-500); }

/* ─── SIDE DETAIL PANEL ──────────────────────────────────────────────────── */
/* Docked right panel for entity details. Sits inside a flex row container.  */
/* Use .detail-panel.hidden to collapse it (width → 0, no border).           */

.detail-panel {
  width: 320px;
  min-width: 280px;
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.detail-panel.hidden { width: 0; min-width: 0; border-left: none; box-shadow: none; overflow: hidden; }

.dp-head {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  position: relative;
}
.dp-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 24px; height: 24px;
  background: none; border: none; border-radius: var(--radius-xs);
  color: var(--ink-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.dp-close:hover { background: var(--bg-sunken); color: var(--ink); }
.dp-close svg { width: 14px; height: 14px; }
.dp-type {
  font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--space-2);
}
.dp-title-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.dp-title { font-size: var(--text-md); font-weight: 700; color: var(--ink); line-height: 1.2; }
.dp-sub   { font-size: var(--text-sm); color: var(--ink-muted); }

.dp-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }

.dp-section       { display: flex; flex-direction: column; gap: var(--space-2); }
.dp-section-label {
  font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
}

.dp-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dp-action {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 6px 11px;
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.dp-action.primary   { background: var(--accent); color: #fff; border-color: var(--accent); }
.dp-action.primary:hover   { filter: brightness(0.92); }
.dp-action.secondary { background: var(--bg-panel); color: var(--ink-soft); }
.dp-action.secondary:hover { background: var(--bg-sunken); color: var(--ink); }
.dp-action.ghost     { background: none; color: var(--ink-muted); }
.dp-action.ghost:hover     { background: var(--bg-sunken); color: var(--ink-soft); }
.dp-action svg { width: 12px; height: 12px; }

.dp-meta     { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.dp-meta-key { font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; align-self: center; }
.dp-meta-val { font-size: var(--text-xs); color: var(--ink); font-weight: 500; }

.dp-preview {
  height: 110px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; position: relative;
}
.dp-preview-play {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.75);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background var(--dur-fast);
}
.dp-preview:hover .dp-preview-play { transform: scale(1.08); background: #fff; }
.dp-preview-play svg { width: 14px; height: 14px; color: var(--ink); margin-left: 2px; }

.dp-timeline  { display: flex; flex-direction: column; }
.dp-tl-item   { display: flex; gap: var(--space-3); align-items: flex-start; padding-bottom: var(--space-3); position: relative; }
.dp-tl-item::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; background: var(--line); }
.dp-tl-item:last-child::before { display: none; }
.dp-tl-dot    { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; background: var(--ink-muted); }
.dp-tl-dot.green { background: var(--green-500); }
.dp-tl-dot.amber { background: var(--amber-500); }
.dp-tl-dot.red   { background: var(--red-500); }
.dp-tl-event  { font-size: var(--text-sm); font-weight: 500; color: var(--ink); line-height: 1.3; }
.dp-tl-when   { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 2px; }

.dp-pipeline  { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dp-pipe-box  {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; min-width: 42px;
}
.dp-pipe-n    { font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1; }
.dp-pipe-l    { font-size: 9px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; white-space: nowrap; }
.dp-pipe-box.warn   { border-color: var(--amber-500); }
.dp-pipe-box.danger { border-color: var(--red-500); }
.dp-pipe-n.warn   { color: var(--amber-600); }
.dp-pipe-n.danger { color: var(--red-600); }
.dp-pipe-n.good   { color: var(--green-600); }

/* Colored values in metadata grid */
.dp-meta-val.warn   { color: var(--amber-600); font-weight: 600; }
.dp-meta-val.danger { color: var(--red-600);   font-weight: 600; }
.dp-meta-val.good   { color: var(--green-600); font-weight: 600; }

/* Task list — flush variant (no border/radius, for embedding inside cards/panels) */
.task-list--flush              { border: none; border-radius: 0; background: transparent; }
.task-list--flush .task-row    { padding-left: var(--space-3); padding-right: var(--space-3); }

/* Cap bar — full-width override and thick track variant */
.cap-bar--full              { max-width: none; }
.cap-bar-track--thick       { height: 5px; }
.cap-bar-nums.danger        { color: var(--red-600); font-weight: 600; }

/* Auditor circle — small variant for panel title rows */
.entity-av-circle--sm { width: 24px; height: 24px; font-size: 9px; }