@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Archivo:ital,wght@0,400;0,450;0,500;0,550;0,600;1,400&family=Recursive:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ─────────────────────────────────────────────
   WIREFRAME DESIGN SYSTEM — Cosmo Concepts
   Mid-fidelity grayscale. All tokens below.
   ───────────────────────────────────────────── */

:root {
  --proto-h:    36px;
  --topbar-h:   52px;
  --rail-w:     192px;
  --sidebar-w:  272px;
  --sidepane-w: 356px;

  --ink:        #18181b;
  --ink-2:      #52525b;
  --ink-3:      #a1a1aa;
  --line:       #e4e4e7;
  --line-2:     #d4d4d8;
  --bg:         #f4f4f5;
  --surface:    #ffffff;
  --surface-2:  #fafafa;
  --surface-3:  #f0f0f2;

  --amber:      #92400e;
  --amber-bg:   #fffbeb;
  --amber-mid:  #fde68a;
  --red:        #991b1b;
  --red-bg:     #fff1f2;
  --red-mid:    #fecdd3;
  --green:      #14532d;
  --green-bg:   #f0fdf4;
  --green-mid:  #bbf7d0;
  --blue:       #1e3a8a;
  --blue-bg:    #eff6ff;
  --blue-mid:   #bfdbfe;

  /* Notification dot colors — vivid, attention-grabbing (distinct from semantic --red/--amber text colors) */
  --notif-red:   oklch(62% 0.26 25);
  --notif-amber: oklch(72% 0.20 62);

  /* Typography tokens — matches design system */
  --font-display: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-ui:      'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Recursive', ui-monospace, 'Cascadia Code', monospace;

  /* Accent — orange-500 from design system */
  --accent: oklch(57.2% 0.194 42);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.4;
  overflow: hidden;
  height: 100vh;
}

/* ═══════════════════════════════════════════
   PROTOTYPE NAV BAR
   ══════════════════════════════════════════ */
.proto-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--proto-h);
  background: #111827;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  z-index: 9999;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  font-family: 'Inter', sans-serif;
}
.proto-bar .p-label  { color: #fff; font-weight: 600; font-size: 11px; }
.proto-bar .p-screen { color: #fff; font-size: 12px; font-weight: 500; padding: 0 6px; }
.proto-bar .p-sep    { width: 1px; height: 18px; background: rgba(255,255,255,0.18); margin: 0 4px; }
.proto-bar .p-space  { flex: 1; }
.proto-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent; color: rgba(255,255,255,0.75);
  cursor: pointer; font-size: 11px; font-family: inherit;
  text-decoration: none; transition: background 0.12s;
}
.proto-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.proto-btn.active { background: rgba(255,255,255,0.2); color: #fff; border-color: rgba(255,255,255,0.4); }

/* ═══════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════ */
.app {
  display: flex;
  height: 100vh;
  padding-top: var(--proto-h);
  overflow: hidden;
}

/* ─── Concept A: horizontal top bar ─── */
.chrome-a {
  position: fixed;
  top: var(--proto-h); left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px;
  z-index: 100;
}
body.concept-b .chrome-a { display: none; }

.app-logo {
  font-weight: 700; font-size: 15px; color: var(--ink);
  display: flex; align-items: center; gap: 6px; letter-spacing: -0.02em;
}
.logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }

.view-toggle {
  display: flex; background: var(--surface-3);
  border-radius: 8px; padding: 3px; gap: 2px;
}
.view-tab {
  padding: 5px 16px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; border: none; background: transparent;
  cursor: pointer; transition: all 0.12s;
}
.view-tab.active {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

.chrome-spacer { flex: 1; }

.user-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2);
}
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--ink-2);
}

/* ─── Concept B: left rail ─── */
.chrome-b {
  position: fixed;
  top: var(--proto-h); left: 0; bottom: 0;
  width: var(--rail-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 100;
}
body.concept-a .chrome-b { display: none; }

.rail-logo {
  padding: 14px 16px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 6px;
}
.rail-role-chip {
  margin-top: 10px; margin-bottom: 4px;
  padding: 3px 12px 3px 16px;
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.12s;
}
.rail-item:hover { background: var(--surface-2); color: var(--ink); }
.rail-item.active { background: var(--surface-2); color: var(--ink); border-left-color: var(--ink); font-weight: 600; }
.rail-icon { font-size: 15px; width: 20px; text-align: center; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rail-icon svg { width: 15px; height: 15px; stroke-width: 1.75; }
.rail-sep { height: 1px; background: var(--line); margin: 8px 0; }
.rail-space { flex: 1; }
.rail-footer {
  padding: 12px 16px;
  font-size: 12px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}

/* ═══════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════ */
.content-area {
  display: flex; flex: 1; overflow: hidden;
}
body.concept-a .content-area { padding-top: var(--topbar-h); }
body.concept-b .content-area { padding-left: var(--rail-w); }

/* ─── Left Sidebar (backlog / tools) ─── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width 0.22s ease, min-width 0.22s ease, opacity 0.18s ease;
}
.sidebar.hidden { width: 0; min-width: 0; opacity: 0; pointer-events: none; }
.sidebar.hidden + .resize-handle { display: none; }
/* Disable transition while actively resizing */
.sidebar.resizing { transition: none; }

/* ─── Resize handle (sidebar and panel splits) ─── */
.resize-handle {
  width: 6px; flex-shrink: 0; cursor: col-resize;
  position: relative; z-index: 20; background: transparent;
}
.resize-handle::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 36px; width: 3px; border-radius: 2px;
  background: var(--line); opacity: 0;
  transition: opacity 0.15s;
}
.resize-handle:hover::after { opacity: 1; }

.sidebar-head {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.sidebar-title { font-size: 13px; font-weight: 600; }
.sidebar-count { font-size: 12px; color: var(--ink-3); }
.sidebar-x { border: none; background: none; cursor: pointer; color: var(--ink-3); font-size: 18px; line-height: 1; }

.sidebar-search { padding: 8px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sidebar-search input {
  width: 100%; padding: 6px 10px;
  border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 12px; font-family: inherit;
  background: var(--surface-2); outline: none; color: var(--ink);
}
.sidebar-search input::placeholder { color: var(--ink-3); }

.sidebar-filters { padding: 7px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 5px; flex-shrink: 0; }
.sidebar-body { flex: 1; overflow-y: auto; padding: 6px 0; }

/* Backlog group */
.bl-group-head {
  padding: 5px 12px 3px;
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  display: flex; align-items: center; justify-content: space-between;
}
.bl-gh-stats { display: flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; }
.bl-gh-unassigned { color: var(--ink-2); font-weight: 600; }
.bl-gh-dot { color: var(--line-2); }
.bl-gh-quota { color: var(--ink); font-weight: 700; }
.bl-gh-quota-total { color: var(--ink-3); font-weight: 500; }
.bl-card {
  margin: 3px 8px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: grab;
}
.bl-card:hover { border-color: var(--ink-3); box-shadow: 0 2px 5px rgba(0,0,0,0.06); }
.bl-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.bl-card-name { font-size: 12px; font-weight: 500; }
.bl-card-meta { font-size: 11px; color: var(--ink-3); display: flex; gap: 5px; margin-top: 3px; }

/* ─── Right Side Pane (detail / feedback) ─── */
.side-pane {
  width: var(--sidepane-w);
  min-width: var(--sidepane-w);
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width 0.22s ease, min-width 0.22s ease;
}
.side-pane.hidden { width: 0; min-width: 0; }

.side-pane-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.side-pane-title { font-size: 14px; font-weight: 600; }
.side-pane-x { border: none; background: none; cursor: pointer; color: var(--ink-3); font-size: 18px; line-height: 1; }
.side-pane-body { flex: 1; overflow-y: auto; padding: 16px; }

/* ─── Main ─── */
main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════
   KPI STRIP
   ══════════════════════════════════════════ */
.kpi-strip { display: flex; background: var(--surface); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.kpi-item {
  flex: 1; padding: 13px 16px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-item:last-child { border-right: none; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.kpi-label { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.kpi-item.warn .kpi-value { color: var(--amber); }
.kpi-item.danger .kpi-value { color: var(--red); }
.kpi-item.good .kpi-value { color: var(--green); }

/* ═══════════════════════════════════════════
   SUB-HEADER
   ══════════════════════════════════════════ */
.sub-header {
  padding: 8px 20px;
  background: var(--surface-2);
  border-top: 2px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   PIPELINE STATUS BAR — floating card
   ══════════════════════════════════════════ */
.pipeline-bar {
  margin: 8px 20px 4px;
  padding: 8px 12px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Pipeline bar inner layout: title above bar */
.pb-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pb-title {
  font-size: 9px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3);
  line-height: 1;
}

/* Backlog summary panel — left of pipeline bar */
.backlog-summary {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 14px 4px 0;
  border-right: 1px solid var(--line);
  min-width: 164px;
}
.bs-header {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.bs-total-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  font-family: 'Recursive', monospace;
  font-variation-settings: 'MONO' 1, 'CASL' 0;
}
.bs-total-label {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 500;
}
.bs-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.bs-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid var(--line-2);
}
.bs-chip-v { background: var(--surface-3); color: var(--ink-2); }
.bs-chip-r { background: var(--surface-3); color: var(--ink-2); }
.bs-chip-assigned { background: var(--green-bg); color: var(--green); border-color: var(--green-mid); }
.bs-progress-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bs-track {
  flex: 1;
  height: 4px;
  background: var(--line-2);
  border-radius: 2px;
  overflow: hidden;
}
.bs-fill {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width 0.25s ease;
  min-width: 0;
}
.bs-pct {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  min-width: 28px;
  text-align: right;
  font-family: 'Recursive', monospace;
  font-variation-settings: 'MONO' 1, 'CASL' 0;
}
/* Overdue alert button — in sub-header, shown when past-active cards exist */
.overdue-btn {
  display: none;
  align-items: center; gap: 5px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-mid);
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600; color: var(--amber);
  cursor: pointer; white-space: nowrap;
  transition: background 0.1s;
}
.overdue-btn:hover { background: var(--amber-mid); color: #fff; }
.overdue-btn.visible { display: flex; }
.overdue-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

/* My team return button — shown when viewing a guest team */
.my-team-btn {
  display: none;
  align-items: center; gap: 5px;
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-radius: 7px; padding: 4px 10px;
  font-size: 11px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
  transition: all 0.1s;
}
.my-team-btn:hover { background: var(--surface-2); color: var(--ink); }
.my-team-btn.visible { display: flex; }

/* Past column header treatment — strongly muted */
.gh.past {
  color: var(--ink-3) !important;
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-color: var(--line-2);
}

/* Past column cells — crosshatch background, clearly locked */
.gc.past-col {
  background: repeating-linear-gradient(
    -45deg,
    var(--surface-3) 0px, var(--surface-3) 1.5px,
    transparent 1.5px, transparent 8px
  ) !important;
  border: 1px solid var(--line-2) !important; /* override dashed empty-cell border */
  pointer-events: none; /* lock empty past cells */
}
.gc.past-col.filled {
  background: repeating-linear-gradient(
    -45deg,
    var(--surface-3) 0px, var(--surface-3) 1.5px,
    var(--surface) 1.5px, var(--surface) 8px
  ) !important;
  pointer-events: auto; /* filled past cards stay interactive */
}

/* Past-done cards: muted + striped */
.pc.pc-done-past {
  background: repeating-linear-gradient(0deg, var(--surface-3) 0px, var(--surface-3) 1px, var(--surface) 1px, var(--surface) 5px);
  opacity: 0.45;
  pointer-events: none;
}
.pc.pc-done-past .pc-title,
.pc.pc-done-past .pc-id { color: var(--ink-3); }

/* Past-active cards: overdue, action required — orange tint, draggable */
.pc.pc-active-past {
  position: relative;
  background: var(--amber-bg);
  border-color: var(--amber-mid) !important;
}
.pc.pc-active-past .pc-title { color: var(--amber); }

/* Safety override: if a past-class card ends up outside a past-col cell,
   neutralise all past styling — handles any JS timing edge cases */
.gc:not(.past-col) .pc.pc-active-past,
.gc:not(.past-col) .pc.pc-done-past {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.gc:not(.past-col) .pc.pc-active-past .pc-title,
.gc:not(.past-col) .pc.pc-done-past .pc-title { color: var(--ink) !important; }

/* Move-to-next-day arrow — floats outside the card (week view) */
.pc-move-btn {
  display: none;
  position: absolute;
  right: -15px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: var(--amber); color: #fff;
  border: none; border-radius: 50%;
  cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  z-index: 10;
}
.pc.pc-active-past:hover .pc-move-btn { display: flex; }
/* Day view: button sits inside the card at right edge */
.day-lane-body .pc-move-btn {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
/* The gc cell needs visible overflow so the button can poke out */
.gc.past-col.filled { overflow: visible; }

/* Day view: past-day lane treatment */
.day-view.past-day .day-lane-body {
  background: repeating-linear-gradient(
    -45deg,
    var(--surface-3) 0px, var(--surface-3) 1px,
    transparent 1px, transparent 8px
  );
}

/* Badge age indicator */
.badge-age { margin-left: 4px; opacity: 0.6; font-weight: 400; font-size: 9px; }

/* Ghost auditor row (weekly grid) */
.ga-ghost { cursor: pointer; opacity: 0.45; border-top: 1px dashed var(--line-2); }
.ga-ghost:hover { opacity: 0.85; }
/* Guest auditor row tint — weekly grid */
.ga.ga-added { background: var(--amber-bg); border-radius: 6px; }
.gc.gc-guest  { background: var(--amber-bg); }
.av-ghost {
  background: transparent !important;
  border: 1.5px dashed var(--ink-3) !important;
  color: var(--ink-3) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

/* Chrome A: view tab add — styled as a tab option (dashed), not a standalone button */
.view-tab-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 5px 11px;
  border: 1.5px dashed var(--line-2);
  border-radius: 6px; background: transparent;
  color: var(--ink-3); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.1s;
}
.view-tab-add svg { width: 11px; height: 11px; }
.view-tab-add:hover { border-color: var(--ink-2); color: var(--ink-2); background: rgba(0,0,0,0.02); }

/* Cosmo AI search bar — Concept A central chrome element */
.chrome-agent-bar {
  flex: 1; max-width: 460px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 9px;
  height: 34px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.chrome-agent-bar:hover {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--line));
}
.chrome-agent-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent);
  background: var(--surface);
}
.chrome-agent-bar:focus-within .chrome-agent-icon { color: var(--accent); }
.chrome-agent-bar:focus-within .chrome-agent-kbd { opacity: 0; pointer-events: none; }
.chrome-agent-icon { color: var(--ink-3); flex-shrink: 0; line-height: 0; transition: color 0.15s; }
.chrome-agent-icon svg { width: 14px; height: 14px; }
.chrome-agent-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 13px; color: var(--ink);
  font-family: var(--font-ui);
  caret-color: var(--accent);
}
.chrome-agent-input::placeholder { color: var(--ink-3); }
.chrome-agent-kbd {
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 5px;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  flex-shrink: 0; white-space: nowrap;
  transition: opacity 0.12s;
}

/* Chrome A: action icon buttons (right side) */
.chrome-actions { display: flex; align-items: center; gap: 2px; margin-right: 4px; }
.chrome-action-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 7px;
  color: var(--ink-3); cursor: pointer; transition: all 0.1s;
}
.chrome-action-btn svg { width: 15px; height: 15px; }
.chrome-action-btn:hover { background: var(--surface-3); color: var(--ink-2); }

/* User chip: name + role subtitle stacked, avatar on right */
.user-chip { display: flex; align-items: center; gap: 8px; }
.user-info { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.user-name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.user-role-sub { font-size: 10px; color: var(--ink-3); line-height: 1.2; }

/* Backlog drag-to-reorder indicator */
.bl-drag-line { height: 2px; background: var(--ink); border-radius: 1px; margin: 1px 8px; pointer-events: none; }
.bl-card-wrap { margin: 3px 8px; }

/* Cell / lane intra-container reorder indicator */
.cell-drag-line { height: 2px; background: var(--accent); border-radius: 1px; margin: 1px 4px; pointer-events: none; }

/* ═══════════════════════════════════════════
   DISTRIBUTION BAR (pipeline stages)
   ══════════════════════════════════════════ */
.dist-bar {
  display: flex; height: 24px;
  border-radius: 6px; overflow: visible; /* visible for tooltips */
  gap: 2px;
}
.dist-seg {
  height: 100%; min-width: 2px;
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  overflow: visible; /* must be visible for ::after tooltip to show above bar */
  transition: filter 0.1s, outline 0.1s;
}
.dist-seg:hover { filter: brightness(0.88); }
.dist-seg.pb-active { outline: 2px solid var(--ink); outline-offset: 2px; z-index: 1; }
.dist-seg.pb-dimmed { opacity: 0.28; }

/* Inner label (visible when segment is wide enough — JS adds .pb-wide class) */
.pb-seg-label {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 6px;
  font-size: 9px; font-weight: 700;
  color: rgba(0,0,0,0.40);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none; user-select: none;
}
/* Only show label when segment is wide enough */
.dist-seg:not(.pb-wide) .pb-seg-label { display: none; }

/* CSS tooltip on hover */
.dist-seg::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--surface);
  padding: 4px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; transition: opacity 0.12s;
  z-index: 400;
}
.dist-seg:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════
   WEEKLY GRID
   ══════════════════════════════════════════ */
.grid-wrap { flex: 1; overflow: auto; padding: 16px 20px; }
.weekly-grid {
  display: grid;
  grid-template-columns: 110px repeat(5, minmax(130px, 1fr));
  gap: 5px;
  min-width: 780px;
}
.gh { /* grid header cell */
  padding: 5px 8px;
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em; text-align: center;
}
.gh.today { color: var(--ink); font-weight: 700; }

.ga { /* auditor label cell */
  padding: 6px 4px 0;
  display: flex; align-items: flex-start; gap: 6px;
}
.av { /* auditor avatar */
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--ink-2); flex-shrink: 0;
}
.an { font-size: 11px; font-weight: 500; color: var(--ink); padding-top: 3px; }

.gc { /* grid cell */
  background: var(--surface-2);
  border: 1.5px dashed var(--line-2);
  border-radius: 8px;
  padding: 5px;
  min-height: 78px;
  display: flex; flex-direction: column; gap: 3px;
}
.gc.filled { background: var(--surface); border: 1px solid var(--line); border-style: solid; }

.gc-add {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--ink-3); font-size: 11px;
  cursor: pointer; border-radius: 5px; gap: 3px;
}
.gc-add:hover { background: var(--surface-3); color: var(--ink-2); }

/* Task card inside grid */
.tc {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 8px;
}
.tc-game { font-size: 9px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.tc-name { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 5px; }
.tc-foot { display: flex; align-items: center; justify-content: space-between; }

/* ═══════════════════════════════════════════
   BADGES & TAGS
   ══════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.bd { background: var(--surface-3); color: var(--ink-2); }                              /* default */
.ba { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-mid); }  /* amber */
.br { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-mid); }    /* red */
.bg { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-mid); }  /* green */
.bb { background: var(--blue-bg);  color: var(--blue);  border: 1px solid var(--blue-mid); }   /* blue */
.bv { background: var(--ink); color: #fff; }                                            /* version (dark) */

.tag {
  display: inline-flex; padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 500;
  background: var(--surface-3); color: var(--ink-2);
}

/* ═══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 7px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: none; font-family: inherit; transition: all 0.12s;
  text-decoration: none; white-space: nowrap;
}
.btn-primary  { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2d2d2d; }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost    { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger   { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-mid); }
.btn-sm  { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-xs  { padding: 3px 8px; font-size: 11px; border-radius: 5px; }

/* ═══════════════════════════════════════════
   FILTER TABS
   ══════════════════════════════════════════ */
.ftabs { display: flex; gap: 3px; }
.ftab {
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  cursor: pointer; border: 1px solid transparent;
  background: none; font-family: inherit; transition: all 0.12s;
}
.ftab:hover { color: var(--ink); background: var(--surface-3); }
.ftab.active { color: var(--ink); background: var(--surface); border-color: var(--line-2); }

/* ═══════════════════════════════════════════
   SELECT / INPUT
   ══════════════════════════════════════════ */
.select {
  padding: 5px 28px 5px 10px; border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 12px; font-family: inherit; background: var(--surface);
  color: var(--ink); cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}

.week-nav {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.week-nav button {
  border: 1px solid var(--line-2); background: var(--surface);
  border-radius: 5px; width: 26px; height: 26px;
  cursor: pointer; font-size: 13px; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.week-nav button:hover { background: var(--surface-2); }

/* ═══════════════════════════════════════════
   ACTIVITY FEED
   ══════════════════════════════════════════ */
.feed-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.feed-dot.green { background: var(--green); }
.feed-dot.amber { background: var(--amber); }
.feed-dot.red   { background: var(--red); }
.feed-dot.gray  { background: var(--ink-3); }
.feed-body { flex: 1; }
.feed-title { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 1px; }
.feed-sub   { font-size: 11px; color: var(--ink-3); }
.feed-time  { font-size: 11px; color: var(--ink-3); white-space: nowrap; padding-top: 2px; }

/* ═══════════════════════════════════════════
   MONITOR LIST ROW
   ══════════════════════════════════════════ */
.mon-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.mon-row:hover { background: var(--surface-2); }
.mon-info { flex: 1; }
.mon-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.mon-sub  { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.stale-chip {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-mid);
  white-space: nowrap;
}
.fail-chip {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  background: var(--red-bg); color: var(--red); border: 1px solid var(--red-mid);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   DELIVERY CARDS
   ══════════════════════════════════════════ */
.section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.section-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.section-count {
  font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: 999px; background: var(--surface-3); color: var(--ink-2);
}
.section-space { flex: 1; }

.del-card {
  padding: 13px 20px; background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; gap: 12px; align-items: flex-start;
}
.del-card:hover { background: var(--surface-2); cursor: pointer; }
.del-card-info { flex: 1; }
.del-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.del-card-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.del-card-meta { font-size: 12px; color: var(--ink-3); }
.del-card-actions { display: flex; gap: 6px; align-items: center; padding-top: 2px; }

/* ═══════════════════════════════════════════
   GAME TABLE (PG Observe)
   ══════════════════════════════════════════ */
.game-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.game-table th {
  padding: 9px 16px; text-align: left;
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
  white-space: nowrap;
}
.game-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.game-table tr:hover td { background: var(--surface-2); }

.pace-wrap { min-width: 80px; }
.pace-bar { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.pace-fill { height: 100%; border-radius: 2px; }

/* ═══════════════════════════════════════════
   TIMELINE (side pane)
   ══════════════════════════════════════════ */
.tl-item { display: flex; gap: 10px; padding-bottom: 14px; position: relative; }
.tl-item::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--line); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); flex-shrink: 0; margin-top: 3px; }
.tl-dot.done { border-color: var(--green); background: var(--green-bg); }
.tl-content { flex: 1; }
.tl-label { font-size: 13px; font-weight: 500; }
.tl-date  { font-size: 11px; color: var(--ink-3); }

/* ═══════════════════════════════════════════
   ALERT BANNER
   ══════════════════════════════════════════ */
.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px;
  background: var(--amber-bg); border-bottom: 1px solid var(--amber-mid);
  font-size: 13px; color: var(--amber); flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   CHART PLACEHOLDER
   ══════════════════════════════════════════ */
.chart-ph {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 12px; font-style: italic;
}

/* ═══════════════════════════════════════════
   TWO-PANEL LAYOUT
   ══════════════════════════════════════════ */
.two-panel { display: flex; flex: 1; overflow: hidden; }
.panel-l { width: 320px; min-width: 320px; border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.panel-r { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.panel-head { padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.panel-title { font-size: 13px; font-weight: 600; }
.panel-sub   { font-size: 11px; color: var(--ink-3); }
.panel-space { flex: 1; }
.panel-body  { flex: 1; overflow-y: auto; }

/* ═══════════════════════════════════════════
   TOGGLE CHIP (small)
   ══════════════════════════════════════════ */
.toggle-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.tgl-track { width: 28px; height: 16px; border-radius: 8px; background: var(--line-2); position: relative; transition: background 0.12s; flex-shrink: 0; }
.tgl-track.on { background: var(--ink); }
.tgl-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left 0.12s; }
.tgl-track.on .tgl-thumb { left: 14px; }

/* ═══════════════════════════════════════════
   MISC UTILITIES
   ══════════════════════════════════════════ */
.divider { height: 1px; background: var(--line); }
.spacer  { flex: 1; }
.mt4  { margin-top: 4px; }
.mt8  { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.ml8  { margin-left: 8px; }
.p16  { padding: 16px; }
.p12  { padding: 12px; }
.row  { display: flex; align-items: center; }
.col  { display: flex; flex-direction: column; }
.gap4 { gap: 4px; }
.gap6 { gap: 6px; }
.gap8 { gap: 8px; }
.gap12 { gap: 12px; }
.text-2  { color: var(--ink-2); }
.text-3  { color: var(--ink-3); }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.fw-5    { font-weight: 500; }
.fw-6    { font-weight: 600; }
.fw-7    { font-weight: 700; }

/* ═══════════════════════════════════════════
   UNIFIED PLAYABLE CARD  (.pc)
   Used in backlog, weekly grid, and day lanes

   Layout:
   Row 1 — [type chip]  Name  PLY-000  ···  [status (compact only)]
   Row 2 — Game name  [NC/NV chip]           (hidden in compact)
   ══════════════════════════════════════════ */
.pc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pc:hover { border-color: var(--ink-3); box-shadow: 0 2px 6px rgba(0,0,0,0.07); }

/* Row 1: type chip + name + id (+ optional status badge at right for compact) */
.pc-row1 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pc-title {
  font-size: 12px; font-weight: 600; color: var(--ink);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-id {
  font-size: 10px; color: var(--ink-3); font-weight: 500;
  margin-left: 3px;
  font-family: 'Recursive', monospace;
  font-variation-settings: 'MONO' 1, 'CASL' 0;
}

/* Row 2: game name + concept/version chip */
.pc-row2 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pc-game { font-size: 10px; color: var(--ink-3); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Type chips — V and R look related, not alarming */
.bt-v { background: var(--ink); color: #fff; border-radius: 3px; font-size: 9px; font-weight: 700; padding: 1px 5px; letter-spacing: 0.04em; flex-shrink: 0; }
.bt-r { background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 3px; font-size: 9px; font-weight: 700; padding: 1px 5px; letter-spacing: 0.04em; flex-shrink: 0; }

/* Compact variant — used in weekly grid cells (row2 hidden, status badge in row1) */
.pc-compact { padding: 6px 8px; gap: 0; }
.pc-compact .pc-row2 { display: none; }
.pc-compact .pc-title { font-size: 11px; }

/* ═══════════════════════════════════════════
   DAY LANE VIEW — Trello-style kanban columns
   ══════════════════════════════════════════ */
.day-view {
  display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden;
}
.day-view.active { display: flex; }
.day-view-header {
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink); flex-shrink: 0;
}
.today-chip {
  background: var(--ink); color: #fff;
  padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  border: none; cursor: default;
}
/* On non-today days: hollow/clickable to jump to today */
.today-chip.go-to-today {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: all 0.1s;
}
.today-chip.go-to-today:hover {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
/* Day past notice: flex row for text + action button */
.day-past-notice {
  margin: 0 16px 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 11px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
  justify-content: space-between;
}
.day-past-notice-text { display: flex; align-items: center; gap: 6px; }
.day-past-move-btn {
  flex-shrink: 0;
  background: var(--amber-bg); border: 1px solid var(--amber-mid);
  border-radius: 6px; padding: 3px 9px;
  font-size: 10px; font-weight: 600; color: var(--amber);
  cursor: pointer; white-space: nowrap; transition: all 0.1s;
}
.day-past-move-btn:hover { background: var(--amber); color: #fff; border-color: var(--amber); }
/* Lane container: dark-ish background so lanes pop */
.day-lanes {
  display: flex; gap: 10px; flex: 1; overflow-x: auto; min-width: 0;
  padding: 12px; background: var(--surface-3);
}
/* Each lane is a Trello-style column */
.day-lane {
  min-width: 260px; max-width: 260px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; flex-direction: column; flex-shrink: 0;
  overflow: hidden;
}
.day-lane-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); flex-shrink: 0;
}
/* Guest auditor lane tint — day view */
.day-lane.day-lane-guest,
.day-lane.day-lane-guest .day-lane-head { background: var(--amber-bg); }
.day-lane-body {
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  flex: 1; overflow-y: auto;
  min-height: 80px;
}
/* Drop-zone hint inside lane body */
.day-lane-body.drag-over { background: var(--amber-bg); }
/* Cards inside day lanes use surface (lighter than lane bg) */
.day-lane-body .pc { background: var(--surface); }

.day-lane-add {
  display: flex; align-items: center; justify-content: center;
  padding: 9px; color: var(--ink-3); font-size: 11px;
  border: 1.5px dashed var(--line-2); border-radius: 7px;
  cursor: pointer; margin: 0 0 2px;
}
.day-lane-add:hover { background: var(--surface-3); color: var(--ink-2); }

/* "Add auditor" lane — dashed column at end of scroll */
.day-lane-new {
  min-width: 200px; max-width: 200px;
  border: 1.5px dashed var(--line-2); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; cursor: pointer; flex-shrink: 0;
  color: var(--ink-3); font-size: 12px; font-weight: 500;
  padding: 20px;
}
.day-lane-new:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink-2); }

/* "Add auditor" row in weekly grid (spans auditor column only) */
.ga-add {
  padding: 7px 4px;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; color: var(--ink-3); font-size: 11px;
  border-top: 1px dashed var(--line-2);
}
.ga-add:hover { color: var(--ink-2); }
/* Spacer cells next to the ga-add row */
.gc-spacer { border: none; background: transparent; }

/* ═══════════════════════════════════════════
   DRAG AND DROP
   ══════════════════════════════════════════ */
.gc.drag-over {
  border-color: var(--accent) !important;
  border-style: solid !important;
  background: var(--amber-bg) !important;
}
.pc.dragging { opacity: 0.35; pointer-events: none; }
/* Backlog drag-over */
#sidebar-body.drag-over { background: var(--amber-bg); border-radius: 6px; }

/* ═══════════════════════════════════════════
   CONTEXT MENU
   ══════════════════════════════════════════ */
.ctx-menu {
  position: fixed; z-index: 2000;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  min-width: 168px; padding: 5px 0;
  display: none;
}
.ctx-menu.open { display: block; }
.ctx-item {
  padding: 8px 14px; font-size: 12px; color: var(--ink-2);
  cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.ctx-item:hover { background: var(--surface-2); color: var(--ink); }
.ctx-item.danger { color: var(--red); }
.ctx-item.danger:hover { background: var(--red-bg); }
.ctx-div { height: 1px; background: var(--line); margin: 4px 0; }

/* ═══════════════════════════════════════════
   ADD AUDITOR POPOVER
   ══════════════════════════════════════════ */
.add-aud-pop {
  position: fixed; z-index: 2000;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  width: 240px; padding: 14px;
  display: none;
}
.add-aud-pop.open { display: block; }
.add-aud-title { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.add-aud-select { width: 100%; font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); font-family: inherit; margin-bottom: 8px; }
.add-aud-row { display: flex; gap: 6px; margin-top: 10px; }
.add-aud-btn { flex: 1; padding: 6px 0; font-size: 11px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; font-family: inherit; }
.add-aud-btn.primary { background: var(--ink); color: #fff; }
.add-aud-btn.secondary { background: var(--surface-3); color: var(--ink-2); }

/* ═══════════════════════════════════════════
   KPI LIVE SECTION (TL Work)
   ══════════════════════════════════════════ */
.kpi-live {
  flex: 2;
  padding: 11px 16px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0;
}
.kpi-live-label {
  font-size: 9px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 5px;
}
.live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
}
.kpi-live-count {
  font-size: 14px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1;
}
.kpi-strip .kpi-value { font-size: 16px; }
.kpi-strip .kpi-label { font-size: 10px; }
.kpi-strip .kpi-item  { padding: 11px 14px; }

/* Backlog toggle button in sub-header */
.backlog-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink-2);
  cursor: pointer; transition: all 0.12s;
}
.backlog-toggle-btn:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); }
.backlog-toggle-btn svg { width: 15px; height: 15px; stroke-width: 1.75; }
.sh-sep { width: 1px; height: 18px; background: var(--line); flex-shrink: 0; }

/* ═══════════════════════════════════════════
   VIEW MODE TOGGLE (Week / Day)
   ══════════════════════════════════════════ */
.view-mode-toggle {
  display: flex; background: var(--surface-3);
  border-radius: 7px; padding: 2px; gap: 1px;
}
.view-mode-btn {
  padding: 4px 13px; border-radius: 5px;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; transition: all 0.12s;
}
.view-mode-btn.active {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.09);
}

/* ═══════════════════════════════════════════
   SIDEBAR UNIFIED HEADER
   ══════════════════════════════════════════ */
.sidebar-head-unified {
  padding: 10px 12px 0;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sidebar-head-row {
  display: flex; align-items: center; gap: 3px;
  margin-bottom: 7px;
}
.sidebar-icon-btn {
  border: none; background: none; cursor: pointer;
  color: var(--ink-3); padding: 3px 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; line-height: 1;
}
.sidebar-icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.sidebar-filters-row { padding-bottom: 7px; }

/* ═══════════════════════════════════════════
   3-DOT DROPDOWN MENU
   ══════════════════════════════════════════ */
.dot-menu-wrap { position: relative; }
.dot-menu-trigger {
  border: none; background: none; cursor: pointer;
  color: var(--ink-3); padding: 2px 6px;
  font-size: 15px; border-radius: 4px;
  font-family: inherit; line-height: 1; letter-spacing: 2px;
}
.dot-menu-trigger:hover { background: var(--surface-3); color: var(--ink); }
.dot-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: 0 6px 18px rgba(0,0,0,0.11);
  min-width: 185px; z-index: 500; display: none; padding: 5px 0;
}
.dot-menu.open { display: block; }
.dot-menu-item {
  padding: 8px 14px; font-size: 12px; color: var(--ink-2);
  cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.dot-menu-item:hover { background: var(--surface-2); color: var(--ink); }
.dot-menu-div { height: 1px; background: var(--line); margin: 4px 0; }

/* ═══════════════════════════════════════════
   OBSERVE LAYOUT
   ══════════════════════════════════════════ */
.obs-shell {
  display: flex; flex: 1; overflow: hidden;
  padding: 12px 16px; gap: 12px;
  background: var(--bg);
  min-height: 0;
}
.obs-main {
  flex: 1; min-width: 0; min-height: 0;
  overflow-y: auto;
  padding: 0 4px;
}
.obs-activity {
  width: 272px; min-width: 272px; flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
  max-height: 100%; overflow: hidden;
}
.obs-activity-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.obs-activity-title {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin-bottom: 2px;
}
.obs-activity-sub { font-size: 11px; color: var(--ink-3); }
.obs-activity-body { flex: 1; overflow-y: auto; padding: 14px 16px 6px; }

/* Timeline items inside activity card */
.tl2-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding-bottom: 16px; position: relative;
}
.tl2-item::before {
  content: '';
  position: absolute; left: 5px; top: 13px; bottom: 0;
  width: 1px; background: var(--line);
}
.tl2-item:last-child::before { display: none; }
.tl2-dot {
  width: 11px; height: 11px; border-radius: 50%;
  flex-shrink: 0; margin-top: 3px;
}
.tl2-dot.green { background: var(--green); }
.tl2-dot.amber { background: var(--amber); }
.tl2-dot.red   { background: var(--red); }
.tl2-dot.gray  { background: var(--ink-3); }
.tl2-body { flex: 1; min-width: 0; }
.tl2-title { font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.35; margin-bottom: 2px; }
.tl2-sub   { font-size: 10px; color: var(--ink-3); line-height: 1.4; }
.tl2-time  { font-size: 10px; color: var(--ink-3); white-space: nowrap; padding-top: 3px; flex-shrink: 0; }

/* SLA chips — used in Pulse task rows */
.sla-chip { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.sla-chip.sla-over { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-mid); }
.sla-chip.sla-risk { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-mid); }

/* ─── Observe task rows — flat grid table layout ─── */
.obs-row {
  display: grid;
  grid-template-columns: 1fr 200px 190px 130px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface);
  border-radius: 8px;
  margin-bottom: 3px;
  cursor: pointer;
  transition: box-shadow 0.12s;
}
.obs-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }

.obs-col-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.obs-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-row .pc-id { flex-shrink: 0; }

.obs-col-meta { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obs-col-status { display: flex; align-items: center; gap: 6px; }
.obs-age { font-size: 11px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }

.obs-col-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.obs-icon-btn {
  padding: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 6px; cursor: pointer; color: var(--ink-2);
  transition: all 0.12s; flex-shrink: 0;
}
.obs-icon-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.obs-icon-btn svg { width: 13px; height: 13px; }

.obs-scope-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px;
  border: 1.5px solid var(--line);
  border-radius: 20px; background: var(--surface-3);
  cursor: pointer; font-size: 11px; font-weight: 600;
  color: var(--ink-2); white-space: nowrap;
  transition: background 0.12s; font-family: inherit;
}
.obs-scope-btn:hover { background: var(--surface-2); }
.obs-scope-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.obs-scope-btn.scope-other {
  border-color: var(--line); background: none; color: var(--ink-2); font-weight: 500;
}
.obs-scope-btn.scope-other:hover { background: var(--bg); }

/* Section labels in observe */
.obs-section-label { display: flex; align-items: center; gap: 8px; padding: 18px 4px 6px; }
.obs-section-label:first-child { padding-top: 6px; }
.obs-sec-label-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.obs-sec-label-desc { font-size: 11px; color: var(--ink-3); margin-left: auto; }

/* Section title colors */
.obs-sec-needs-review { color: var(--amber); }
.obs-sec-failed       { color: var(--red); }
.obs-sec-stalled      { color: var(--ink-2); }
.obs-sec-active       { color: var(--ink); }
.obs-sec-done         { color: var(--green); }

/* ═══════════════════════════════════════════
   VIEW TAB ICONS (concept A toggle)
   ══════════════════════════════════════════ */
.view-tab { display: inline-flex; align-items: center; gap: 5px; }
.view-tab svg { width: 13px; height: 13px; stroke-width: 1.75; }

/* ═══════════════════════════════════════════
   RAIL — updated structure + collapsed state
   ══════════════════════════════════════════ */

/* Wrap text nodes for hide-on-collapse */
.rail-item-text { flex: 1; white-space: nowrap; overflow: hidden; }
.rail-logo-text  { overflow: hidden; white-space: nowrap; }
.rail-footer-name { overflow: hidden; white-space: nowrap; flex: 1; }

/* Rail: no transition by default on items; smooth on chrome-b width */
.chrome-b { transition: width 0.2s ease; }
body.concept-b .content-area { transition: padding-left 0.2s ease; }

/* Collapsed state */
.chrome-b.collapsed { overflow: hidden; }
.chrome-b.collapsed .rail-logo { justify-content: center; padding: 14px 0; }
.chrome-b.collapsed .rail-logo .logo-dot { display: none; }
.chrome-b.collapsed .rail-logo-text { display: none; }
.chrome-b.collapsed .rail-collapse-btn { margin-left: 0; }
.chrome-b.collapsed .rail-role-chip { display: none; }
.chrome-b.collapsed .rail-item {
  padding: 9px 0; justify-content: center; gap: 0;
}
.chrome-b.collapsed .rail-item .rail-icon { width: 52px; justify-content: center; }
.chrome-b.collapsed .rail-item-text { display: none; }
.chrome-b.collapsed .rail-footer { justify-content: center; padding: 12px 0; }
.chrome-b.collapsed .rail-footer-name { display: none; }

/* Rail collapse button — lives inside .rail-logo row */
.rail-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  margin-left: auto;
  background: none; border: none; border-radius: 5px;
  cursor: pointer; color: var(--ink-3);
  transition: background 0.1s, color 0.1s;
}
.rail-collapse-btn:hover { background: var(--surface-3); color: var(--ink); }
.rail-collapse-btn svg { width: 15px; height: 15px; stroke-width: 1.75; }

/* Rail agent button (Ask Cosmo) */
.rail-agent-btn {
  background: none; border: none; width: 100%;
  text-align: left; font-family: inherit; cursor: pointer;
}
.rail-agent-icon { color: var(--amber); }

/* ═══════════════════════════════════════════
   OBSERVE KPI FLOATING CARDS
   ══════════════════════════════════════════ */
.obs-kpi-strip {
  display: flex; gap: 10px;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}
.obs-kpi-card {
  flex: 1; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 0;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.obs-kpi-card.danger { border-color: var(--red-mid); }
.obs-kpi-card.warn   { border-color: var(--amber-mid); }
.obs-kpi-card.good   { border-color: var(--green-mid); }

.obs-kpi-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 6px;
}
.obs-kpi-value {
  font-size: 28px; font-weight: 700; color: var(--ink);
  line-height: 1; letter-spacing: -0.04em;
}
.obs-kpi-card.danger .obs-kpi-value { color: var(--red); }
.obs-kpi-card.warn   .obs-kpi-value { color: var(--amber); }
.obs-kpi-card.good   .obs-kpi-value { color: var(--green); }

.obs-kpi-label {
  font-size: 11px; color: var(--ink-3); font-weight: 500;
  margin-top: 4px; line-height: 1.3;
}
.obs-kpi-trend {
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}
.obs-kpi-trend.up-bad  { color: var(--amber); background: var(--amber-bg); }
.obs-kpi-trend.up-good { color: var(--green);  background: var(--green-bg); }
.obs-kpi-trend.stable  { color: var(--ink-3);  background: var(--surface-3); }
.obs-kpi-trend.alert   { color: var(--red);    background: var(--red-bg); }

.obs-kpi-chart {
  display: block;
  width: calc(100% + 28px);
  margin: 8px -14px 0;
  height: 42px;
}

/* ═══════════════════════════════════════════
   VM TABS — segmented view-mode tabs
   Used in: TL Pulse sub-header, PG Program sub-header
   ══════════════════════════════════════════ */
.vm-tabs {
  display: flex; gap: 2px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 2px; flex-shrink: 0;
}
.vm-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  border: none; background: none; cursor: pointer; white-space: nowrap;
  transition: color 0.1s; font-family: inherit;
}
.vm-tab svg { width: 13px; height: 13px; flex-shrink: 0; }
.vm-tab.active {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.vm-tab.pri { color: var(--amber); }
.vm-tab.pri.active { color: var(--amber); }
.vm-tab-badge {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 10px;
  background: var(--surface-3); color: var(--ink-3);
}
.vm-tab.pri .vm-tab-badge,
.vm-tab.pri.active .vm-tab-badge { background: var(--amber-bg); color: var(--amber); }

/* ═══════════════════════════════════════════
   PG PROGRAM — game portfolio strip
   ══════════════════════════════════════════ */
.pg-portfolio-strip {
  display: flex; gap: 10px; padding: 10px 16px 6px; flex-shrink: 0;
}
.pg-game-card {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
  min-width: 210px; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.pg-game-card:hover { border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); }
.pg-game-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 12%, transparent);
}
.pg-game-hd { display: flex; align-items: center; gap: 10px; }
.pg-game-av { position: relative; flex-shrink: 0; width: 36px; height: 36px; }
.pg-game-av-sq {
  width: 36px; height: 36px; min-width: 36px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.95);
  font-family: var(--font-display);
}
.pg-game-av-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 5px; font-weight: 800; color: rgba(255,255,255,0.95);
}
.pg-game-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.pg-game-partner { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.pg-quota-row { display: flex; gap: 6px; }
.pg-qstat {
  flex: 1; background: var(--surface-2); border-radius: 8px;
  padding: 7px 8px; display: flex; flex-direction: column; gap: 2px;
}
.pg-qstat-n { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.03em; }
.pg-qstat-l { font-size: 10px; color: var(--ink-3); font-weight: 500; margin-top: 1px; }
.pg-qstat-n.ok   { color: var(--green); }
.pg-qstat-n.warn { color: var(--amber); }
.pg-qstat-n.bad  { color: var(--red); }
.pg-quota-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pg-quota-fill { height: 100%; border-radius: 2px; background: var(--green); }
.pg-quota-fill.warn { background: var(--amber); }
.pg-quota-fill.bad  { background: var(--red); }

/* ── PG task cards ── */
.pg-section { padding: 0 16px 24px; }
.pg-section-hd {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 12px 0 8px; display: flex; align-items: center; gap: 8px;
}
.pg-group-tag {
  background: var(--surface-2); border-radius: 5px;
  padding: 2px 7px; font-size: 11px; font-weight: 600;
  color: var(--ink-3); text-transform: none; letter-spacing: 0;
}
.pg-mini-av {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 800; color: rgba(255,255,255,0.95);
}
.pg-task-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px 10px; margin-bottom: 8px;
}
.pg-task-card.rev-card { border-color: var(--amber-mid); }
.pg-task-title-row {
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  margin-bottom: 6px; overflow: hidden;
}
.pg-task-name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pg-type-chip {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 5px;
  white-space: nowrap; flex-shrink: 0;
}
.chip-v  { background: color-mix(in oklch, var(--green)  15%, transparent); color: var(--green);  }
.chip-r  { background: color-mix(in oklch, var(--amber)  15%, transparent); color: var(--amber);  }
.chip-nc { background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--accent); }
.pg-rev-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px;
  background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-mid);
  white-space: nowrap; flex-shrink: 0;
}
.pg-concept-name {
  font-size: 12px; color: var(--ink-3); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-task-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pg-act-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.pg-act-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.pg-act-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.pg-act-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-act-btn.primary:hover { opacity: 0.88; }
.pg-act-btn.danger { border-color: var(--red-mid); color: var(--red); }
.pg-act-btn.danger:hover { background: var(--red-bg); }
.pg-task-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-3); flex-wrap: wrap;
}
.pg-meta-id { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); font-weight: 600; }
.pg-meta-sep { color: var(--line); }
.pg-sla-ok   { color: var(--green); font-weight: 600; }
.pg-sla-warn { color: var(--amber); font-weight: 600; }
.pg-sla-bad  { color: var(--red);   font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.pg-waiting  { color: var(--amber); font-weight: 500; }

/* ── PG ideas tab ── */
.pg-ideas-strip { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0 8px; }
.pg-idea-card {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 16px; min-width: 240px; flex: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.pg-idea-hd { display: flex; align-items: flex-start; justify-content: space-between; }
.pg-idea-game { font-size: 13px; font-weight: 600; color: var(--ink); }
.pg-idea-quota { font-size: 11px; color: var(--ink-3); }
.pg-idea-stats { display: flex; gap: 12px; }
.pg-idea-stat { display: flex; flex-direction: column; gap: 1px; }
.pg-idea-stat-n { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.pg-idea-stat-l { font-size: 10px; color: var(--ink-3); }
.pg-idea-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pg-idea-fill { height: 100%; border-radius: 3px; }
.pg-idea-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pg-idea-gap { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; }
.pg-idea-gap.ok   { color: var(--green); background: var(--green-bg); }
.pg-idea-gap.warn { color: var(--amber); background: var(--amber-bg); }
.pg-supply-btn {
  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 6px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}
.pg-supply-btn svg { width: 11px; height: 11px; }

/* ═══════════════════════════════════════════
   PULSE / OBSERVE TABLE — full component set
   Used in: TL Pulse (tl-observe.html), PG Pulse (pg-program.html)
   ══════════════════════════════════════════ */
.obs-table-wrap { padding: 0 4px; overflow-x: auto; }
.obs-table-inner { min-width: var(--obs-table-min, 600px); }

.obs-table-head,
.obs-row {
  display: grid !important;
  grid-template-columns: var(--obs-grid, 1fr 140px 160px 100px) !important;
  column-gap: 16px !important;
}
.obs-table-head {
  align-items: center; padding: 5px 10px 5px 12px; margin-bottom: 2px;
}
.obs-table-head.hidden { display: none !important; }
.obs-th {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-3); white-space: nowrap; overflow: hidden;
}

.obs-col-picker-btn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; color: var(--ink-3); transition: background 0.1s, color 0.1s; flex-shrink: 0;
}
.obs-col-picker-btn:hover { background: var(--surface-3); color: var(--ink); }
.obs-col-picker-btn svg { width: 13px; height: 13px; }
.obs-col-picker-wrap { position: relative; }
.obs-col-picker-pop {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  padding: 8px 0; z-index: 500; min-width: 180px; display: none;
}
.obs-col-picker-pop.open { display: block; }
.obs-cp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; cursor: pointer; font-size: 12px; color: var(--ink-2);
  user-select: none; transition: background 0.08s;
}
.obs-cp-item:hover { background: var(--bg); }
.obs-cp-item input[type=checkbox] { accent-color: var(--accent); width: 13px; height: 13px; }

.obs-row {
  align-items: center; padding: 0 10px 0 12px !important;
  background: var(--surface) !important; border-radius: 8px;
  margin-bottom: 3px; cursor: pointer; min-height: 52px;
  position: relative; transition: box-shadow 0.12s;
}
.obs-row:hover { outline: 1.5px solid var(--line) !important; box-shadow: none !important; }

.obs-col-name {
  display: flex !important; align-items: center; gap: 8px;
  min-width: 240px; overflow: hidden; position: relative;
}
.obs-name-icon { flex-shrink: 0; }
.obs-name-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.obs-name-r1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.obs-name    { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-name-id { font-size: 10px; font-family: var(--font-mono); color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }
.obs-name-r2 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.obs-game    { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obs-row-actions {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 3px; padding-left: 40px;
  background: linear-gradient(to right, transparent, var(--surface) 40px);
}
.obs-hover-action { opacity: 0; pointer-events: none; transition: opacity 0.13s; }
.obs-row:hover .obs-hover-action { opacity: 1; pointer-events: auto; }

.obs-col-auditor, .obs-col-owner {
  font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.obs-col-status { display: flex; align-items: center; gap: 5px; overflow: hidden; }
.obs-col-sla    { display: flex; align-items: center; }

.obs-section-label { display: flex !important; align-items: center; gap: 8px; padding: 18px 4px 6px; }
.obs-section-label:first-child { padding-top: 6px; }
.obs-sec-label-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.obs-sec-label-desc  { font-size: 11px; color: var(--ink-3); margin-left: auto; }
.obs-sec-needs-review { color: var(--amber); }
.obs-sec-failed       { color: var(--red); }
.obs-sec-stalled      { color: var(--ink-2); }
.obs-sec-active       { color: var(--ink); }
.obs-sec-done         { color: var(--green); }

.obs-inline-pb { flex: 1; min-width: 80px; display: flex; align-items: center; padding: 0 2px; }
.obs-inline-pb .dist-bar { width: 100%; height: 20px; border-radius: 5px; }
.obs-inline-pb .dist-seg { border-radius: 3px; }
.obs-inline-pb .dist-seg::after { bottom: auto; top: calc(100% + 8px); }

.obs-filter-row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; justify-content: flex-end; }
.obs-filter-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex-direction: row-reverse; }
.obs-filter-chip {
  display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 20px;
  font-size: 11px; color: var(--ink-2); white-space: nowrap;
}
.obs-filter-chip strong { color: var(--ink); font-weight: 600; }
.obs-fc-remove {
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 50%; cursor: pointer;
  color: var(--ink-3); padding: 0; flex-shrink: 0; transition: background 0.1s, color 0.1s;
}
.obs-fc-remove:hover { background: var(--line); color: var(--ink); }
.obs-fc-remove svg { width: 10px; height: 10px; }
.obs-add-filter-wrap { position: relative; flex-shrink: 0; }
.obs-add-filter-btn {
  display: flex; align-items: center; gap: 5px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 20px; background: none; cursor: pointer;
  font-size: 11px; font-weight: 500; color: var(--ink-2); font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
.obs-add-filter-btn:hover { background: var(--bg); color: var(--ink); }
.obs-add-filter-btn svg { width: 12px; height: 12px; }
.obs-filter-pop {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  padding: 8px 0; z-index: 600; min-width: 220px; max-height: 420px;
  overflow-y: auto; display: none;
}
.obs-filter-pop.open { display: block; }
.obs-fp-section { padding: 8px 14px 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.obs-fp-item {
  display: flex; align-items: center; gap: 9px; padding: 6px 14px; cursor: pointer;
  font-size: 12px; color: var(--ink-2); user-select: none; transition: background 0.08s;
}
.obs-fp-item:hover { background: var(--bg); }
.obs-fp-item input[type=checkbox] { accent-color: var(--accent); width: 13px; height: 13px; flex-shrink: 0; }
.obs-fp-div { height: 1px; background: var(--line); margin: 6px 0; }

.obs-scope-wrap { position: relative; flex-shrink: 0; }
.obs-scope-btn {
  display: flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px;
  border: 1.5px solid var(--accent); border-radius: 20px;
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  cursor: pointer; font-size: 11px; font-weight: 600; color: var(--accent);
  white-space: nowrap; transition: background 0.12s; font-family: inherit;
}
.obs-scope-btn:hover { background: color-mix(in oklch, var(--accent) 16%, transparent); }
.obs-scope-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.obs-scope-btn.scope-other { border-color: var(--line); background: none; color: var(--ink-2); font-weight: 500; }
.obs-scope-btn.scope-other:hover { background: var(--bg); }
.obs-scope-pop {
  position: absolute; left: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  padding: 0; z-index: 650; min-width: 220px; display: none; overflow: hidden;
}
.obs-scope-pop.open { display: block; }
.obs-sp-toolbar {
  display: flex; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.obs-sp-toolbar-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 600;
  color: var(--ink-2); transition: background 0.1s, color 0.1s, border-color 0.1s, opacity 0.1s;
  white-space: nowrap; font-family: inherit;
}
.obs-sp-toolbar-btn:hover:not(.obs-sp-btn-disabled) { background: var(--surface-3); color: var(--ink); }
.obs-sp-toolbar-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.obs-sp-toolbar-btn.obs-sp-btn-active {
  background: var(--surface-3);
  border-color: var(--ink-2); color: var(--ink);
}
.obs-sp-toolbar-btn.obs-sp-btn-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.obs-sp-body { padding: 6px 0; }
.obs-sp-section-hd { padding: 8px 14px 3px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.obs-sp-team {
  display: flex; align-items: center; gap: 9px; padding: 7px 14px; cursor: pointer;
  font-size: 12px; color: var(--ink-2); user-select: none; transition: background 0.08s;
}
.obs-sp-team:hover { background: var(--bg); }
.obs-sp-team input[type=checkbox] { accent-color: var(--accent); width: 13px; height: 13px; flex-shrink: 0; }
.obs-sp-div { height: 1px; background: var(--line); margin: 5px 0; }

.obs-col-activity {
  display: flex; align-items: center; gap: 8px;
  padding-right: 16px; border-right: 1px solid var(--line); min-width: 0;
}
.obs-act-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.obs-act-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.obs-act-label { font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-act-time  { font-size: 10px; color: var(--ink-3); white-space: nowrap; font-family: var(--font-mono); }

.obs-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 4px 6px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.obs-group-header:first-child { padding-top: 6px; }
.obs-group-count {
  font-size: 11px; font-weight: 500; color: var(--ink-3);
  background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 1px 7px;
}

.obs-entity-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 8px; overflow: hidden;
}
.obs-entity-hd {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  cursor: pointer; user-select: none; transition: background 0.08s;
}
.obs-entity-hd:hover { background: var(--bg); }
.obs-entity-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--ink-2);
  flex-shrink: 0; font-family: var(--font-mono);
}
.obs-game-av { position: relative; flex-shrink: 0; width: 38px; height: 38px; }
.obs-game-av-sq {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.95);
  letter-spacing: -0.02em; font-family: var(--font-display);
}
.obs-game-av-badge {
  position: absolute; bottom: -3px; right: -3px;
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 6px; font-weight: 800; color: rgba(255,255,255,0.95);
  font-family: var(--font-display); letter-spacing: 0;
}
.obs-entity-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.obs-entity-sub  { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.obs-entity-stats { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.obs-est {
  display: flex; align-items: center; gap: 4px; padding: 3px 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 20px; white-space: nowrap;
}
.obs-est-n { font-size: 12px; font-weight: 700; color: var(--ink); }
.obs-est-n.c-amber { color: var(--amber-6, #d97706); }
.obs-est-n.c-red   { color: var(--red-6,   #dc2626); }
.obs-est-n.c-green { color: var(--green-6,  #16a34a); }
.obs-est-l { font-size: 10px; color: var(--ink-3); font-weight: 500; }
.obs-rev-rate {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-3);
}
.obs-rev-rate.hi {
  background: color-mix(in oklch, var(--amber) 12%, transparent);
  border-color: var(--amber); color: var(--amber-6, #d97706);
}
.obs-entity-detail-btn {
  flex-shrink: 0; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; border-radius: 6px;
  color: var(--ink-3); transition: background 0.1s, color 0.1s;
}
.obs-entity-detail-btn:hover { background: var(--surface-3); color: var(--ink); }
.obs-entity-card.dp-selected .obs-entity-detail-btn { color: var(--ink-2); }
.obs-entity-detail-btn svg { width: 14px; height: 14px; }
.obs-entity-chevron { flex-shrink: 0; color: var(--ink-3); line-height: 0; }
.obs-entity-chevron svg { width: 14px; height: 14px; transition: transform 0.18s; }
.obs-entity-card.collapsed .obs-entity-chevron svg { transform: rotate(-90deg); }
.obs-entity-controls {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 10px;
}
.obs-entity-controls-count { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.obs-entity-controls-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: var(--ink-2);
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 9px; cursor: pointer; font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
.obs-entity-controls-btn:hover { background: var(--bg); color: var(--ink); }
.obs-entity-controls-btn svg { width: 12px; height: 12px; }
.obs-entity-body {
  border-top: 1px solid var(--line); padding: 6px 8px 8px; background: var(--bg);
}
.obs-entity-card.collapsed .obs-entity-body { display: none; }
.obs-entity-col-hd {
  display: grid !important;
  grid-template-columns: var(--obs-grid, 1fr 140px 160px 100px) !important;
  column-gap: 16px !important;
  padding: 4px 10px 4px 12px; margin-bottom: 2px;
}
.obs-entity-col-hd .obs-th { font-size: 9px; }

.obs-detail {
  width: 320px; min-width: 320px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  display: none; flex-direction: column; max-height: 100%; overflow: hidden;
  position: relative;
}
.obs-detail.open { display: flex; }
.obs-detail-resize {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 10; flex-shrink: 0; transition: background 0.15s;
}
.obs-detail-resize:hover,
.obs-detail.resizing .obs-detail-resize {
  background: color-mix(in oklch, var(--accent) 30%, transparent);
}
.odp-head {
  padding: 10px 16px 0;
  flex-shrink: 0;
}
.odp-head-top {
  display: flex; align-items: center;
}
.odp-close {
  flex-shrink: 0;
  width: 26px; height: 26px; margin-right: -4px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; border-radius: 6px;
  color: var(--ink-3); transition: background 0.1s, color 0.1s;
}
.odp-close:hover { background: var(--bg); color: var(--ink); }
.odp-close svg { width: 14px; height: 14px; }
.odp-type {
  font: 700 9px/1 var(--font-display);
  letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3);
  flex: 1;
}
.odp-title-row { display: flex; align-items: center; gap: 7px; }
.odp-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.odp-sub { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.odp-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.odp-sec-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.odp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.odp-act {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 6px; font-size: 11px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent; transition: all 0.1s;
  white-space: nowrap; font-family: var(--font-ui); letter-spacing: 0.01em;
}
.odp-act.primary   { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.odp-act.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.odp-act.secondary { background: var(--bg); color: var(--ink-2); border-color: var(--line); }
.odp-act.secondary:hover { background: var(--surface-3); color: var(--ink); }
.odp-act.ghost     { background: none; color: var(--ink-3); border-color: var(--line); }
.odp-act.ghost:hover { background: var(--bg); color: var(--ink-2); }
.odp-act svg { width: 13px; height: 13px; }
.odp-preview {
  border-radius: 8px; overflow: hidden; aspect-ratio: 16/10; position: relative;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.odp-preview-play {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22); transition: transform 0.15s, background 0.1s;
}
.odp-preview:hover .odp-preview-play { transform: scale(1.08); background: #fff; }
.odp-preview-play svg { width: 16px; height: 16px; color: var(--ink); margin-left: 2px; }
.odp-meta { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; }
.odp-mk { font-size: 11px; color: var(--ink-3); white-space: nowrap; align-self: center; }
.odp-mv { font-size: 11px; color: var(--ink); font-weight: 500; }
.odp-tl { display: flex; flex-direction: column; }
.odp-tl-item { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 14px; position: relative; }
.odp-tl-item::before { content: ''; position: absolute; left: 5px; top: 13px; bottom: 0; width: 1px; background: var(--line); }
.odp-tl-item:last-child::before { display: none; }
.odp-tl-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; background: var(--ink-3); }
.odp-tl-dot.green { background: var(--green); }
.odp-tl-dot.amber { background: var(--amber); }
.odp-tl-dot.red   { background: var(--red); }
.odp-tl-event { font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.odp-tl-when  { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.odp-pipe { display: flex; gap: 6px; flex-wrap: wrap; }
.odp-pipe-box {
  display: flex; flex-direction: column; align-items: center;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; min-width: 44px;
}
.odp-pipe-n {
  font-size: 14px; font-weight: 700; color: var(--ink);
  font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'CASL' 0;
}
.odp-pipe-l { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; margin-top: 1px; }
.odp-pipe-box.hi-amber { border-color: var(--amber); }
.odp-pipe-box.hi-red   { border-color: var(--red); }
.odp-pipe-n.c-amber { color: var(--amber-6, #d97706); }
.odp-pipe-n.c-red   { color: var(--red-6,   #dc2626); }
.odp-pipe-n.c-green { color: var(--green-6,  #16a34a); }
.odp-task-list { display: flex; flex-direction: column; gap: 3px; }
.odp-task {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 7px; background: var(--bg); cursor: pointer; transition: background 0.1s;
}
.odp-task:hover { background: var(--surface-3); }
.odp-task-name { font-size: 12px; font-weight: 500; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odp-task-st   { font-size: 10px; color: var(--ink-3); flex-shrink: 0; }

.obs-row.dp-selected {
  background: var(--surface-3) !important;
  outline: 2px solid var(--ink-2);
  outline-offset: -2px;
}
/* Preserve outline on hover — default hover rule overwrites it otherwise */
.obs-row.dp-selected:hover {
  outline: 2px solid var(--ink-2) !important;
}
/* Match gradient to selected background so it doesn't show as a white strip */
.obs-row.dp-selected .obs-row-actions {
  background: linear-gradient(to right, transparent, var(--surface-3) 40px);
}
.obs-entity-card.dp-selected {
  outline: 2px solid var(--ink-2);
  box-shadow: 0 0 0 4px var(--surface-3);
}
.obs-entity-card.dp-selected > .obs-entity-hd {
  background: var(--surface-3);
}

@media (max-width: 680px) {
  .obs-shell { flex-direction: column !important; }
  .obs-detail { display: none !important; }
  .obs-table-head { display: none !important; }
  .obs-col-picker-wrap { display: none !important; }
  .obs-table-wrap { overflow-x: hidden !important; padding: 0 !important; }
  .obs-table-inner { min-width: 0 !important; display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
  .sub-header { flex-wrap: wrap !important; gap: 6px !important; }
  .vm-tabs { overflow-x: auto !important; flex-shrink: 0 !important; }
  .obs-inline-pb { flex: 1 1 100% !important; min-width: 0 !important; order: 3; }
  .obs-filter-row { flex: 1 1 100% !important; }
  .obs-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important; row-gap: 10px !important;
    background: var(--surface) !important; border: 1px solid var(--line) !important;
    border-radius: 10px !important; padding: 12px 14px !important;
    outline: none !important; box-shadow: none !important;
  }
  .obs-col-name { grid-column: 1 / -1 !important; grid-row: 1 !important; min-width: 0 !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--line) !important; }
  .obs-col-auditor { grid-column: 1 !important; grid-row: 2 !important; font-size: 11px !important; color: var(--ink-3) !important; display: flex !important; align-items: center !important; white-space: nowrap !important; }
  .obs-col-status  { grid-column: 2 !important; grid-row: 2 !important; display: flex !important; align-items: center !important; }
  .obs-col-sla     { grid-column: 3 !important; grid-row: 2 !important; display: flex !important; align-items: center !important; }
  .obs-col-activity, .obs-col-partner, .obs-col-owner, .obs-col-built, .obs-col-sent { display: none !important; }
  .obs-group-header { padding: 14px 4px 4px !important; }
}

/* ── Playable Detail Panel — fixed drawer (kanban / work / any overlay context) ── */
.ply-dp {
  position: fixed; right: 0; top: var(--proto-h, 36px); bottom: 0;
  width: 340px;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -6px 0 28px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; z-index: 200; overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.ply-dp.open { transform: translateX(0); }

/* Card selected state — outline when its detail pane is open */
.pc.dp-selected {
  outline: 2px solid var(--ink-2);
  outline-offset: -2px;
  border-radius: 9px;
}

/* Notification dot — "something needs your attention" */
.pc-notif {
  position: absolute;
  top: -5px; right: -5px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--notif-red);
  border: 2.5px solid var(--surface);
  z-index: 1;
}
.pc-notif.amber { background: var(--notif-amber); }

/* ── ply-detail.js panel — tab system and activity feed ── */

.ply-dp .odp-body { padding: 0; gap: 0; }

/* Tab bar — small, normal case, consistent with nav labels */
.odp-tabs {
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid var(--line);
  margin-left: -16px; margin-right: -16px; padding-left: 12px;
}
.odp-tab {
  background: none; border: none; cursor: pointer;
  font: 500 11px/1 var(--font-ui);
  color: var(--ink-3);
  padding: 6px 10px 7px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.odp-tab.active  { color: var(--ink); border-bottom-color: var(--ink); }
.odp-tab:hover:not(.active) { color: var(--ink-2); }

/* Tab panels */
.odp-tab-panel { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.odp-tab-panel.active { display: flex; }

/* Playable info rows in panel header — same pc-row1/pc-row2 layout, no card chrome */
.odp-ply-hd {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 8px;
}

/* Event feed — scrollable, newest at top */
.odp-feed {
  flex: 1; overflow-y: auto;
  padding: 12px 16px 16px;
  display: flex; flex-direction: column;
  background: var(--surface-2);
}

/* Timeline row: [content col] [dot-col + time] */
.odp-ev {
  display: flex;
  gap: 10px;
  align-items: stretch;
  border-radius: 6px;
  margin: 0 -8px;
  padding: 0 8px;
  transition: background 0.1s;
}
.odp-ev:hover { background: var(--surface-3); }

/* Content column — fills remaining width */
.odp-ev-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding-bottom: 14px;
}
.odp-ev:last-child .odp-ev-content { padding-bottom: 4px; }

/* Right-side track: dot column + timestamp */
.odp-ev-track {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

/* Dot column — stretches full event height and carries the vertical line */
.odp-ev-dot-col {
  position: relative;
  width: 7px;
  align-self: stretch;
  display: flex;
  justify-content: center;
}
.odp-ev-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3);
  margin-top: 4px;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.odp-ev-dot.green { background: var(--green); }
.odp-ev-dot.red   { background: var(--red); }
.odp-ev-dot.amber { background: var(--amber); }

/* Vertical connecting line — runs from dot bottom to next event */
.odp-ev:not(:last-child) .odp-ev-dot-col::after {
  content: '';
  position: absolute;
  top: 15px; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 1px;
  background: var(--line);
}

.odp-ev-label { font: 500 12px/1.35 var(--font-ui); color: var(--ink-2); }
.odp-ev-time  {
  font: 400 10px/1 var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0;
  color: var(--ink-3); white-space: nowrap; margin-top: 4px; min-width: 36px; text-align: right;
}

/* Inline action buttons inside an event entry */
.odp-ev-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Card for rich content — submission, prompt, feedback */
.odp-ev-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
/* Video thumbnail inside card */
.odp-ev-thumb {
  height: 76px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: filter 0.15s;
}
.odp-ev-thumb:hover { filter: brightness(1.08); }
.odp-ev-play-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.88);
  display: flex; align-items: center; justify-content: center;
}
.odp-ev-play-btn svg { width: 11px; height: 11px; color: var(--ink); margin-left: 2px; }
/* Text body inside card (prompt or feedback) */
.odp-ev-card-body {
  padding: 8px 10px;
  font: 400 11px/1.5 var(--font-ui);
  color: var(--ink-2);
}
.odp-ev-card-body.italic { font-style: italic; }
/* Error note inside card */
.odp-ev-card-note {
  padding: 6px 10px;
  font: 400 10px/1.4 var(--font-ui);
  color: var(--red);
  background: var(--red-bg);
}

/* Details tab */
.odp-details-sec    { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; background: var(--surface-2); }
.odp-details-status { display: flex; align-items: center; gap: 8px; }

/* Inline feedback form */
.odp-feedback-form {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 8px;
}
.odp-feedback-input {
  width: 100%; box-sizing: border-box;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; resize: none; outline: none;
}
.odp-feedback-input:focus { border-color: var(--ink-2); }
.odp-feedback-actions { display: flex; gap: 6px; }