/* ============================================================
   Relay — design system
   ONE source of truth for every Relay screen. Extracted from
   relay-app.html so the dashboard and the configuration screens
   cannot drift apart; edit tokens here first.

   Design position: the chrome is monochrome. Colour is spent only
   where the product's own thesis lives — automation. Cyan means
   "a machine did this / is doing this", nothing else. Status keeps
   its conventional trio. Selection is cyan because selecting is how
   you hand work to the automation.
   ============================================================ */
/* ============================================================
   Relay — shadcn token semantics
   Design position: the chrome is monochrome. Colour is spent only
   where the product's own thesis lives — automation. Cyan means
   "a machine did this / is doing this", nothing else. Status keeps
   its conventional trio. Selection is cyan because selecting is how
   you hand work to the automation.
   ============================================================ */
:root {
  /* primitives */
  --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-200:#e4e4e7; --zinc-300:#d4d4d8;
  --zinc-400:#a1a1aa; --zinc-500:#71717a; --zinc-600:#52525b; --zinc-700:#3f3f46;
  --zinc-800:#27272a; --zinc-900:#18181b; --zinc-950:#09090b; --white:#fff;
  --cyan-100:#cffafe; --cyan-400:#22d3ee; --cyan-500:#06b6d4; --cyan-600:#0891b2; --cyan-950:#083344;
  --green-100:#dcfce7; --green-400:#4ade80; --green-600:#16a34a; --green-950:#052e16;
  --amber-100:#fef3c7; --amber-400:#fbbf24; --amber-600:#d97706; --amber-950:#451a03;
  --red-100:#fee2e2; --red-400:#f87171; --red-600:#dc2626; --red-950:#450a0a;

  /* shadcn semantic layer */
  --background:var(--zinc-100); --foreground:var(--zinc-900);
  --card:var(--white); --card-foreground:var(--zinc-900);
  --popover:var(--white); --popover-foreground:var(--zinc-900);
  --primary:var(--zinc-900); --primary-hover:var(--zinc-800); --primary-foreground:var(--white);
  --secondary:var(--zinc-100); --secondary-foreground:var(--zinc-900);
  --muted:var(--zinc-100); --muted-foreground:var(--zinc-600); --muted-foreground-subtle:var(--zinc-500);
  --accent:var(--zinc-100); --accent-foreground:var(--zinc-900);
  --border:var(--zinc-200); --input:var(--zinc-300); --ring:var(--cyan-600); /* cyan-500 was 2.43:1 on white, under the 3:1 floor for focus */
  /* signal-subtle is mixed into the surface, not a saturated tint: a resting
     state should whisper. The saturated cyan stays for marks and icons. */
  --signal:var(--cyan-600); --signal-subtle:color-mix(in srgb,var(--cyan-500) 9%,var(--white));
  --success:var(--green-600); --success-subtle:var(--green-100);
  --warning:var(--amber-600); --warning-subtle:var(--amber-100);
  --destructive:var(--red-600); --destructive-subtle:var(--red-100);

  --radius:8px; --radius-sm:6px; --radius-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px;
  --shadow-sm:0 1px 2px rgba(9,9,11,.06);
  --shadow-md:0 6px 16px -4px rgba(9,9,11,.1);
  --shadow-lg:0 20px 50px -12px rgba(9,9,11,.25);

  /* ---- type scale ----
     Eight stops, no fractions. The prototype had grown to 13 distinct sizes
     including 11.5, 12.5 and 9.5, which is accretion rather than a scale:
     someone nudged a value until it looked right in one place and the nudge
     stuck. Nav sat at 12.5, half a step under body text, for no reason.
     Everything now lands on one of these, and they are tokens so a raw px
     value is a visible mistake rather than an invisible one. */
  /* 12px floor, everywhere. See the same note in tandem.css: the ramp used
     to start at 10, which is unreadable on a dense table, and the bottom two
     tiers now share the floor and separate by weight instead of by size. */
  --fs-micro:12px;   /* file-type badges, keyboard hints, avatar initials */
  --fs-xs:12px;      /* step tags, captions, micro labels */
  --fs-sm:13px;      /* secondary text, meta rows, counts */
  --fs-base:14px;    /* body default, nav items, table cells */
  --fs-md:15px;      /* card and panel titles, emphasis */
  --fs-lg:17px;      /* drawer titles */
  --fs-xl:21px;      /* page titles */
  --fs-2xl:28px;     /* stat values */

  --sidebar-w:236px; --topbar-h:52px;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
[data-theme="dark"]{
  --background:var(--zinc-950); --foreground:var(--zinc-50);
  --card:var(--zinc-900); --card-foreground:var(--zinc-50);
  --popover:var(--zinc-900); --popover-foreground:var(--zinc-50);
  --primary:var(--zinc-50); --primary-hover:var(--zinc-200); --primary-foreground:var(--zinc-900);
  --secondary:var(--zinc-800); --secondary-foreground:var(--zinc-50);
  --muted:var(--zinc-800); --muted-foreground:var(--zinc-400); --muted-foreground-subtle:var(--zinc-500);
  --accent:var(--zinc-800); --accent-foreground:var(--zinc-50);
  --border:var(--zinc-800); --input:var(--zinc-700); --ring:var(--cyan-400);
  --muted-foreground-subtle:var(--zinc-400); /* was never remapped for dark: 3.67:1 across every micro-label */
  --signal:var(--cyan-400); --signal-subtle:color-mix(in srgb,var(--cyan-400) 12%,var(--zinc-900));
  --success:var(--green-400); --success-subtle:var(--green-950);
  --warning:var(--amber-400); --warning-subtle:var(--amber-950);
  --destructive:var(--red-400); --destructive-subtle:var(--red-950);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 16px -4px rgba(0,0,0,.6);
  --shadow-lg:0 20px 50px -12px rgba(0,0,0,.8);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter,system-ui,sans-serif;font-size:var(--fs-base);line-height:20px;
  color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-radius:var(--radius-sm)}
svg{display:block;flex:none}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:-.02em}

.app{
  display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;
  transition:grid-template-columns .32s cubic-bezier(.16,1,.3,1);
}
/* Collapsed rail: icons only. Labels fade before the width closes so text
   never squashes; the sidebar keeps its own hover-expand affordance. */
.app.is-collapsed{grid-template-columns:56px 1fr}
.app.is-collapsed .nav-text,
.app.is-collapsed .nav-count,
.app.is-collapsed .nav-kbd,
.app.is-collapsed .brand-name,
.app.is-collapsed .brand-env,
.app.is-collapsed .ws-name,
.app.is-collapsed .user-meta,
.app.is-collapsed .nav-label,
.app.is-collapsed .ws svg{opacity:0;width:0;overflow:hidden;white-space:nowrap;transition:opacity .12s}
.app.is-collapsed .sidebar{padding-inline:var(--s2)}
.app.is-collapsed .nav-item,
.app.is-collapsed .ws,
.app.is-collapsed .user{justify-content:center;padding-inline:0}
.app.is-collapsed .nav-label{height:8px;padding:0}
.app.is-collapsed .brand{justify-content:center;padding-inline:0}
/* tooltip on the collapsed rail */
.app.is-collapsed .nav-item{position:relative}
.app.is-collapsed .nav-item::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--popover);color:var(--popover-foreground);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:3px 8px;font-size:var(--fs-sm);white-space:nowrap;box-shadow:var(--shadow-md);
  opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:40;
}
.app.is-collapsed .nav-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.collapse-btn{
  position:absolute;top:14px;right:-11px;width:22px;height:22px;z-index:25;
  display:grid;place-items:center;border-radius:var(--radius-pill);
  background:var(--card);border:1px solid var(--border);color:var(--muted-foreground);
  box-shadow:var(--shadow-sm);opacity:0;transition:opacity .15s,color .15s,border-color .15s;
}
.sidebar:hover .collapse-btn,.collapse-btn:focus-visible{opacity:1}
.collapse-btn:hover{color:var(--foreground);border-color:var(--input)}
.collapse-btn svg{transition:transform .32s cubic-bezier(.16,1,.3,1)}
.app.is-collapsed .collapse-btn svg{transform:rotate(180deg)}

/* ---------- sidebar ---------- */
/* Inverted surfaces: the chrome (sidebar, topbar) sits on the tinted layer,
   the work surface is the bright one. Content gets the light, not the frame. */
.sidebar{
  background:var(--muted);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:var(--s3);gap:2px;
  position:sticky;top:0;height:100vh;overflow:visible;
}
.brand{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s2) var(--s4)}
.brand-mark{
  width:20px;height:20px;border-radius:var(--radius-sm);background:var(--primary);
  display:grid;place-items:center;color:var(--primary-foreground);flex:none;
}
.brand-name{font-weight:600;font-size:var(--fs-base);letter-spacing:-.01em}
.brand-env{
  margin-left:auto;font-size:var(--fs-xs);font-weight:500;
  color:var(--muted-foreground);background:var(--card);border:1px solid var(--border);
  padding:1px 5px;border-radius:4px;
}
.ws{
  display:flex;align-items:center;gap:var(--s2);width:100%;
  padding:6px var(--s2);border-radius:var(--radius-sm);
  border:1px solid var(--border);margin-bottom:var(--s4);background:var(--card);
  transition:border-color .15s;
}
.ws:hover{border-color:var(--input)}
.ws-avatar{width:18px;height:18px;border-radius:4px;background:var(--zinc-700);color:#fff;display:grid;place-items:center;font-size:var(--fs-micro);font-weight:600;flex:none}
.ws-name{font-size:var(--fs-sm);font-weight:500;flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-label{
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em;
  color:var(--muted-foreground);padding:var(--s4) var(--s2) var(--s2);
}
.nav-item{
  display:flex;align-items:center;gap:var(--s2);width:100%;
  padding:5px var(--s2);border-radius:var(--radius-sm);
  color:var(--muted-foreground);font-size:var(--fs-base);transition:background .12s,color .12s;
}
.nav-item:hover{background:var(--accent);color:var(--foreground)}
.nav-item.is-active{background:var(--accent);color:var(--foreground);font-weight:500}
.nav-item svg{stroke:currentColor;opacity:.75}
.nav-item.is-active svg{opacity:1}
.nav-text{flex:1;text-align:left}
.nav-count{font-size:var(--fs-sm);color:var(--muted-foreground)}
.nav-kbd{
  font-size:var(--fs-xs);color:var(--muted-foreground-subtle);
  opacity:0;transition:opacity .12s;
}
.nav-item:hover .nav-kbd{opacity:1}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:var(--s2)}
.user{display:flex;align-items:center;gap:var(--s2);padding:6px var(--s2);border-radius:var(--radius-sm);width:100%;transition:background .12s}
.user:hover{background:var(--accent)}
.user-meta{flex:1;text-align:left;min-width:0}
.user-name{font-size:var(--fs-sm);font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-mail{font-size:var(--fs-xs);color:var(--muted-foreground);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- avatars ---------- */
.av{border-radius:var(--radius-pill);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;color:#fff;flex:none}
.av-24{width:24px;height:24px}
.av-26{width:28px;height:28px}
.av-stack{display:flex}
.av-stack .av{border:1.5px solid var(--card)}
.av-stack .av+.av{margin-left:-7px}
.av-more{background:var(--muted);color:var(--muted-foreground)}

/* ---------- main + topbar ---------- */
.main{display:flex;flex-direction:column;min-width:0;background:var(--card)}
.topbar{
  height:var(--topbar-h);display:flex;align-items:center;gap:var(--s3);
  padding:0 var(--s5);border-bottom:1px solid var(--border);
  background:var(--card);position:sticky;top:0;z-index:20;
}
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted-foreground);flex:1;min-width:0}
.crumbs strong{color:var(--foreground);font-weight:500}
.crumb-sep{color:var(--input)}
.search{
  display:flex;align-items:center;gap:var(--s2);width:210px;
  padding:5px var(--s2);border:1px solid var(--border);background:var(--card);
  border-radius:var(--radius-sm);color:var(--muted-foreground-subtle);font-size:var(--fs-sm);
  transition:border-color .15s;
}
.search:hover{border-color:var(--input)}
.kbd{
  font-family:var(--mono);font-size:var(--fs-micro);padding:1px 4px;
  border:1px solid var(--border);border-radius:4px;color:var(--muted-foreground-subtle);
  background:var(--background);
}
.search .kbd{margin-left:auto}
.icon-btn{
  width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;
  color:var(--muted-foreground);position:relative;transition:background .12s,color .12s;
}
.icon-btn:hover{background:var(--accent);color:var(--foreground)}
.dot-badge{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--destructive);border:1.5px solid var(--background)}

/* ---------- page head ---------- */
.page-head{padding:var(--s5) var(--s5) var(--s4);display:flex;align-items:flex-start;gap:var(--s4)}
.page-title{font-size:var(--fs-xl);line-height:26px;font-weight:600;letter-spacing:-.02em}
.page-sub{font-size:var(--fs-sm);color:var(--muted-foreground);margin-top:3px;display:flex;align-items:center;gap:6px}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--signal);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.page-actions{margin-left:auto;display:flex;gap:var(--s2);align-items:center}

.btn{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--s3);
  border-radius:var(--radius-sm);font-size:var(--fs-base);font-weight:500;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.btn-primary{background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-outline{border:1px solid var(--border);background:var(--card);color:var(--foreground)}
.btn-outline:hover{border-color:var(--input)}

/* ---------- stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);padding:0 var(--s5) var(--s4)}
.stat{
  position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s3) var(--s4);
  display:flex;flex-direction:column;gap:6px;overflow:hidden;
}
/* 1px inner top highlight — the detail that separates a crafted card from a div */
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
[data-theme="dark"] .stat::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
.stat.is-automated{border-color:color-mix(in srgb,var(--signal) 32%,var(--border))}
.stat-head{display:flex;align-items:center;gap:5px}
.stat-title{font-size:var(--fs-sm);color:var(--muted-foreground)}
.auto-tag{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:var(--fs-xs);font-weight:500;
  color:var(--signal);background:var(--signal-subtle);padding:1px 4px;border-radius:3px;
}
.stat-row{display:flex;align-items:baseline;gap:var(--s2)}
.stat-value{font-size:var(--fs-2xl);line-height:32px;font-weight:600;letter-spacing:-.03em}
.delta{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-xs);font-weight:500}
.delta-up{color:var(--success)}
.delta-down{color:var(--destructive)}
.delta-flat{color:var(--muted-foreground-subtle)}
.stat-foot{display:flex;align-items:flex-end;gap:var(--s2);margin-top:2px}
.stat-caption{font-size:var(--fs-sm);color:var(--muted-foreground)}
.spark{margin-left:auto}

/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s5) var(--s3)}
.tabs{display:flex;gap:1px;background:var(--muted);padding:2px;border-radius:var(--radius-sm)}
.tab{padding:4px var(--s3);border-radius:4px;font-size:var(--fs-sm);font-weight:500;color:var(--muted-foreground);transition:background .15s,color .15s}
.tab:hover{color:var(--foreground)}
.tab.is-active{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)}
/* The count rides inside the tab rather than beside it: status IS the tab
   now, so how many sit under each one is part of the label, not a badge
   bolted on. Subdued, because the number moves and the label does not. */
.tab-n{margin-left:5px;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.tab.is-active .tab-n{color:var(--muted-foreground)}
.toolbar-right{margin-left:auto;display:flex;gap:6px;align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 var(--s2);
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);
  font-size:var(--fs-sm);color:var(--muted-foreground);transition:border-color .15s,color .15s;
}
.chip:hover{border-color:var(--input);color:var(--foreground)}
.chip.is-on{border-color:var(--signal);color:var(--signal);background:var(--signal-subtle)}

/* ---------- table ---------- */
.table-wrap{
  margin:0 var(--s5) var(--s5);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);
}
.table-scroll{overflow-x:auto;overflow-y:visible} /* table scrolls in its panel, never the document */
table{width:100%;border-collapse:collapse;min-width:640px}
th{
  text-align:left;font-size:var(--fs-sm);font-weight:500;color:var(--muted-foreground);
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);white-space:nowrap;
}
td{padding:7px var(--s3);border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--accent)}
tbody tr.is-selected{background:color-mix(in srgb,var(--signal) 6%,var(--card))}
tbody tr:last-child td{border-bottom:none}
.group-row td{padding:6px var(--s3);background:var(--muted)}
.group-head{display:flex;align-items:center;gap:6px}
.group-name{font-size:var(--fs-sm);font-weight:500;color:var(--foreground)}
.group-count{font-size:var(--fs-sm);color:var(--muted-foreground)}
.status-sq{width:7px;height:7px;border-radius:2px;flex:none}
.chev{transition:transform .18s cubic-bezier(.16,1,.3,1);color:var(--muted-foreground-subtle)}
.is-collapsed .chev{transform:rotate(-90deg)}
.cell-task{display:flex;align-items:center;gap:6px;min-width:0}
.task-id{font-size:var(--fs-base);color:var(--muted-foreground);flex:none;width:56px}
.task-name{font-weight:500;font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.task-name:hover{text-decoration:underline;text-underline-offset:2px}
.bolt{color:var(--signal);flex:none}
.sub-count{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-sm);color:var(--muted-foreground);flex:none}
.date{font-size:var(--fs-base);color:var(--muted-foreground);white-space:nowrap}
.date.is-overdue{color:var(--destructive);font-weight:500}
.prio{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-base);white-space:nowrap}
.prio-urgent{color:var(--destructive)}
.prio-normal{color:var(--muted-foreground)}
.prio-low{color:var(--muted-foreground-subtle)}
.progress{display:flex;align-items:center;gap:var(--s2);min-width:96px}
.track{flex:1;height:3px;border-radius:var(--radius-pill);background:var(--muted);overflow:hidden}
.fill{height:100%;border-radius:var(--radius-pill);background:var(--foreground);transition:width .4s cubic-bezier(.16,1,.3,1)}
.fill.is-auto{background:var(--signal)}
.fill.is-done{background:var(--success)}
.pct{font-size:var(--fs-sm);color:var(--muted-foreground);width:34px;text-align:right}
.cb{
  appearance:none;font-size:var(--fs-base);width:15px;height:15px;border:1px solid var(--input);border-radius:4px;
  background:var(--card);cursor:pointer;flex:none;display:grid;place-items:center;transition:.12s;
}
.cb:checked{background:var(--signal);border-color:var(--signal)}
.cb:checked::after{content:"";width:8px;height:4px;border:1.75px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
.row-actions{opacity:0;transition:opacity .12s}
tr:hover .row-actions{opacity:1}
.add-row{display:flex;align-items:center;gap:6px;padding:8px var(--s3);color:var(--muted-foreground-subtle);font-size:var(--fs-sm);width:100%;transition:.12s}
.add-row:hover{color:var(--foreground);background:var(--accent)}

/* ---------- status dropdown (replaces the flat badge) ---------- */
.dd{position:relative}
.dd-trigger{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
  border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:500;
  border:1px solid transparent;transition:border-color .12s,background .12s;white-space:nowrap;
}
.dd-trigger:hover{border-color:var(--input)}
.dd-trigger .chev-sm{opacity:0;transition:opacity .12s}
tr:hover .dd-trigger .chev-sm,.dd.is-open .chev-sm{opacity:.6}
/* Status is NOT the automation signal — it gets neutral and status hues so
   cyan can keep meaning one thing. Foregrounds darkened one stop for AA. */
.t-progress{background:var(--muted);color:var(--muted-foreground)}
.t-review{background:var(--warning-subtle);color:#a45709}
.t-done{background:var(--success-subtle);color:#15803d}
[data-theme="dark"] .t-review{color:var(--warning)}
[data-theme="dark"] .t-done{color:var(--success)}
.dd-menu{
  position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:168px;
  background:var(--popover);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:4px;
  /* visibility:hidden keeps closed menus out of the tab order and the
     a11y tree — opacity alone left 80 phantom focus stops in the page */
  opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;visibility:hidden;
  transition:opacity .14s,transform .14s cubic-bezier(.16,1,.3,1),visibility 0s linear .14s;
}
.dd.is-open .dd-menu{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.dd-item{
  display:flex;align-items:center;gap:var(--s2);width:100%;padding:5px var(--s2);
  border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--popover-foreground);text-align:left;
}
.dd-item:hover{background:var(--accent)}
.dd-item .tick{margin-left:auto;opacity:0;color:var(--signal)}
.dd-item.is-current .tick{opacity:1}
.dd-sep{height:1px;background:var(--border);margin:4px 0}
.dd-hint{font-size:var(--fs-xs);font-weight:500;color:var(--muted-foreground);padding:5px var(--s2) 3px}
/* assignee picker — same dropdown primitive, avatar-led trigger */
.dd-assignee{display:inline-flex;align-items:center;gap:5px;padding:2px 5px 2px 3px;border-radius:var(--radius-pill);border:1px solid transparent;transition:border-color .12s}
.dd-assignee:hover{border-color:var(--input)}
.dd-assignee .chev-sm{opacity:0;transition:opacity .12s}
tr:hover .dd-assignee .chev-sm{opacity:.6}
.dd-menu--people{min-width:196px}
.dd-item .av{margin-right:2px}
.dd-item-sub{font-size:var(--fs-xs);color:var(--muted-foreground-subtle);margin-left:auto;font-family:var(--mono)}

/* ---------- model picker ---------- */
.model-btn{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s2);
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);
  font-size:var(--fs-sm);color:var(--muted-foreground);transition:border-color .15s,color .15s;
}
.model-btn:hover{border-color:var(--input);color:var(--foreground)}
.model-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:288px;
  background:var(--popover);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-md);overflow:hidden;
  opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;visibility:hidden;
  transition:opacity .14s,transform .14s cubic-bezier(.16,1,.3,1),visibility 0s linear .14s;
}
.dd.is-open .model-menu{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.model-top{padding:var(--s3);border-bottom:1px solid var(--border)}
.switch-row{display:flex;align-items:center;gap:var(--s3);padding:4px 0}
.switch-label{flex:1;font-size:var(--fs-base);font-weight:500}
.switch-sub{font-size:var(--fs-xs);color:var(--muted-foreground);margin-top:1px;font-weight:400}
.switch{
  width:34px;height:19px;border-radius:999px;background:var(--input);flex:none;
  position:relative;transition:background .18s;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;transition:transform .18s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-sm);
}
.switch.is-on{background:var(--signal)}
.switch.is-on::after{transform:translateX(15px)}
.switch.is-locked{opacity:.5}
.model-upgrade{
  display:inline-flex;align-items:center;gap:4px;margin-top:var(--s2);
  font-size:var(--fs-sm);font-weight:500;color:var(--signal);
}
.model-list{padding:4px;max-height:232px;overflow-y:auto}
.model-item{
  display:flex;align-items:center;gap:var(--s2);width:100%;padding:6px var(--s2);
  border-radius:var(--radius-sm);font-size:var(--fs-base);text-align:left;
}
.model-item:hover{background:var(--accent)}
.model-item.is-on{background:var(--accent)}
.model-mult{margin-left:auto;font-size:var(--fs-xs);color:var(--muted-foreground)}

/* ---------- boxed panel series (Notion-style) ---------- */
.panel{
  background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s3);margin-bottom:var(--s3);
}
.panel-title{font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s3)}
.panel-tabs{display:flex;gap:2px;margin-bottom:var(--s3)}
.ptab{
  display:inline-flex;align-items:center;gap:5px;padding:4px var(--s2);
  border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;color:var(--muted-foreground);
}
.ptab:hover{color:var(--foreground)}
.ptab.is-active{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)}
.panel-body{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--s3);font-size:var(--fs-base);line-height:21px;
}
.panel-quote{border-left:2px solid var(--input);padding-left:var(--s3);color:var(--foreground)}
.panel-meta{display:flex;align-items:center;gap:6px;margin-top:var(--s2);font-size:var(--fs-xs);color:var(--muted-foreground)}

/* ---------- detail drawer ---------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:45;
  background:var(--card);border-left:1px solid var(--border);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;
  transition:transform .34s cubic-bezier(.16,1,.3,1),visibility 0s linear .34s;
}
.drawer.is-open{transform:none;visibility:visible;transition-delay:0s}
.drawer-head{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s4) var(--s3);
  border-bottom:1px solid var(--border);
}
.drawer-title{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;flex:1}
.drawer-body{flex:1;overflow-y:auto;padding:var(--s4)}

/* document metadata component */
.doc{
  display:flex;gap:var(--s3);padding:var(--s3);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
}
.doc-icon{
  width:38px;height:46px;border-radius:5px;flex:none;position:relative;
  background:var(--muted);border:1px solid var(--border);
  display:grid;place-items:end center;padding-bottom:5px;
}
.doc-ext{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;color:var(--card);
  background:var(--destructive);padding:1px 4px;border-radius:3px;
}
.doc-meta{min-width:0;flex:1}
.doc-name{font-size:var(--fs-base);font-weight:500;word-break:break-all}
.doc-sub{font-size:var(--fs-sm);color:var(--muted-foreground);margin-top:2px}
.doc-date{font-size:var(--fs-sm);color:var(--muted-foreground-subtle);margin-top:1px}
.doc-tags{display:flex;gap:5px;margin-top:var(--s2);flex-wrap:wrap}
.tag{
  display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:500;
  padding:2px 7px;border-radius:var(--radius-pill);
  background:var(--muted);color:var(--muted-foreground);
}
.tag--signal{background:color-mix(in srgb,var(--signal) 12%,transparent);color:var(--signal)}
/* Used by the configuration screens; they had no definition and rendered as bare text. */
.tag--warn,.tag--sys{
  display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:500;
  padding:2px 7px;border-radius:var(--radius-pill);white-space:nowrap;
}
.tag--warn{background:var(--warning-subtle);color:#a45709}
[data-theme="dark"] .tag--warn{color:var(--warning)}
.tag--sys{background:var(--muted);color:var(--muted-foreground)}

/* back link above a detail title */
.back{
  display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);color:var(--muted-foreground);
  margin-bottom:6px;padding:2px 6px 2px 2px;margin-left:-2px;border-radius:var(--radius-sm);transition:.12s;
}
.back:hover{color:var(--foreground);background:var(--accent)}

/* tabs (shadcn segmented) */
.dtabs{display:flex;gap:1px;background:var(--muted);padding:2px;border-radius:var(--radius-sm);margin:var(--s4) 0 var(--s3)}
.dtab{flex:1;padding:5px;border-radius:4px;font-size:var(--fs-sm);font-weight:500;color:var(--muted-foreground)}
.dtab.is-active{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)}

/* activity / time-tracking steps */
.steps{position:relative;padding-left:var(--s5)}
.steps::before{
  content:"";position:absolute;left:7px;top:6px;bottom:10px;width:1px;background:var(--border);
}
.step{position:relative;padding-bottom:var(--s4)}
.step-dot{
  position:absolute;left:calc(-1 * var(--s5) + 3px);top:3px;
  width:9px;height:9px;border-radius:50%;background:var(--card);
  border:2px solid var(--input);
}
.step.is-auto .step-dot{border-color:var(--signal);background:var(--signal)}
.step.is-now .step-dot{border-color:var(--foreground)}
.step-head{display:flex;align-items:baseline;gap:var(--s2)}
.step-name{font-size:var(--fs-base);font-weight:500}
.step-time{font-size:var(--fs-sm);color:var(--muted-foreground-subtle);margin-left:auto}
.step-desc{font-size:var(--fs-sm);color:var(--muted-foreground);margin-top:2px}
.step-dur{
  display:inline-flex;align-items:center;gap:4px;margin-top:5px;
  font-size:var(--fs-xs);font-weight:500;padding:1px 6px;border-radius:var(--radius-pill);
  background:var(--muted);color:var(--muted-foreground);
}
.step.is-auto .step-dur{background:color-mix(in srgb,var(--signal) 12%,transparent);color:var(--signal)}

/* ---------- bulk bar ---------- */
.bulk{
  position:fixed;bottom:var(--s5);left:calc(50% + var(--sidebar-w) / 2);max-width:calc(100vw - 32px);
  transform:translateX(-50%) translateY(20px);
  display:flex;align-items:center;gap:var(--s3);
  background:var(--zinc-900);color:var(--zinc-50);border:1px solid var(--zinc-800);
  padding:var(--s2) var(--s3);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1),visibility 0s linear .22s;z-index:40;
}
.bulk.is-open{visibility:visible;transition-delay:0s}
[data-theme="dark"] .bulk{background:var(--zinc-800);border-color:var(--zinc-700)}
.bulk.is-open{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.bulk-count{font-size:var(--fs-sm);font-weight:500}
.bulk-sep{width:1px;height:16px;background:rgba(255,255,255,.16)}
.bulk button{font-size:var(--fs-sm);color:var(--zinc-300);padding:3px 7px;border-radius:5px;transition:.12s;display:inline-flex;align-items:center;gap:5px}
.bulk button:hover{background:rgba(255,255,255,.1);color:#fff}
.bulk .automate{color:var(--cyan-400)}
.bulk .automate:hover{background:rgba(34,211,238,.14)}

/* ---------- palette ---------- */
.scrim{position:fixed;inset:0;background:rgba(9,9,11,.4);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .18s;z-index:50}
.scrim.is-open{opacity:1;pointer-events:auto}
.palette{
  position:fixed;top:16vh;left:50%;transform:translateX(-50%) scale(.98);
  width:min(540px,92vw);background:var(--popover);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .18s,transform .18s cubic-bezier(.16,1,.3,1),visibility 0s linear .18s;z-index:51;overflow:hidden;
}
.palette.is-open{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto;visibility:visible;transition-delay:0s}
.palette-in{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--border)}
.palette-in input{flex:1;border:none;background:none;font:inherit;font-size:var(--fs-md);color:var(--foreground)}
.palette-list{max-height:300px;overflow-y:auto;padding:6px}
.palette-sec{font-size:var(--fs-xs);font-weight:500;color:var(--muted-foreground);padding:8px 8px 4px}
.palette-item{display:flex;align-items:center;gap:var(--s2);width:100%;padding:6px 8px;border-radius:var(--radius-sm);color:var(--muted-foreground);font-size:var(--fs-base)}
.palette-item[aria-selected="true"]{background:var(--accent);color:var(--foreground)}
.palette-item .kbd{margin-left:auto}
.palette-item .bolt{margin-left:auto;margin-right:0}

.toast{
  position:fixed;bottom:var(--s5);right:var(--s5);background:var(--popover);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);
  padding:var(--s2) var(--s3);display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:.2s cubic-bezier(.16,1,.3,1);z-index:60;
}
.toast.is-open{opacity:1;transform:none}
.proto-note{
  position:fixed;left:var(--s3);bottom:var(--s3);z-index:30;font-size:var(--fs-xs);color:var(--muted-foreground-subtle);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 9px;
}
@media (max-width:1100px){
  .app{grid-template-columns:1fr}.sidebar{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}.bulk{left:50%}
  .col-desc,.col-progress{display:none}
}
@media (max-width:680px){
  .stats{grid-template-columns:1fr}.col-date,.col-assignee,.task-id{display:none}
  .search{width:auto}.search span,.search .kbd{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}