/* ═══════════════════════════════════════════════════════════════
   Palat Restolabs — design tokens
   Palette derived from the logo mark: gold → lime → mint gradient,
   near-black wordmark, warm-grey ground.
   Status colours validated with the dataviz six-checks validator:
     light #14795A / #B8860B / #A5243D  — all pass
     dark  #33A47E / #B78A24 / #CE5A70  — all pass
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Straight from palat-logo.svg: a two-stop gradient and the wordmark ink.
     These are the LOGO values — used only for the brand gradient, never for UI fills. */
  --brand-gold:#FFC711;   /* stop 0  */
  --brand-mint:#85CDBE;   /* stop 1  */
  --brand-grad: linear-gradient(48deg, #FFC711 0%, #85CDBE 100%);

  /* surfaces — light and airy; ink is the logo's own #272628 */
  --ground:#F7F8F7; --surface:#FFFFFF; --surface-2:#F1F3F2; --surface-3:#E7EAE9;
  --ink:#272628; --ink-2:#5C6160; --ink-3:#8B918F;
  --rule:#E6EAE8; --rule-2:#D2D8D6;

  /* PRIMARY = the logo's top-right green.  SECONDARY = its bottom-left gold.
     The mint is a *fill* colour — too light for text on white, so anything that
     has to be read (links, pill text) uses --accent-ink instead. */
  --primary:#85CDBE; --primary-hi:#6EC2B0; --primary-soft:#EAF7F4;
  /* The raw logo gold is 2.3x the mint's chroma — as a hover fill it jolts. --secondary is
     the same hue re-stepped to the mint's weight, so hover reads as a sibling of rest. */
  --secondary:#DBB861; --secondary-soft:#FEF4DB;
  --accent:#85CDBE;                 /* fills, active states, focus */
  --accent-ink:#00755F;             /* links, keys — 5.7:1 on white, 5.2:1 on the tint */
  --accent-hi:#6EC2B0; --accent-soft:#EAF7F4;
  /* two steps per status: --x is the mark colour (validated), --x-txt is the darker
     step used for text sitting on the pale --x-soft tint. */
  --ok:#00846F;   --ok-txt:#00755F;   --ok-soft:#EAF7F4;
  --warn:#A97C00; --warn-txt:#8A6400; --warn-soft:#FFF3D4;
  --crit:#AC2B50; --crit-txt:#AC2B50; --crit-soft:#FBE8EC;
  --park:#77807E;   --park-soft:#EFF1F0;

  /* sequential ramp — the logo's teal, light→dark. Work advancing through stages. */
  --seq-1:#E4F5F1; --seq-2:#C2E9E1; --seq-3:#9FDBCF; --seq-4:#85CDBE;
  --seq-5:#5DB3A1; --seq-6:#3A9384; --seq-7:#217468;

  --shadow-1:0 1px 2px rgba(22,24,26,.05);
  --shadow-2:0 1px 2px rgba(22,24,26,.05), 0 8px 24px -14px rgba(22,24,26,.22);
  --shadow-3:0 2px 4px rgba(22,24,26,.06), 0 18px 40px -20px rgba(22,24,26,.30);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --r:10px; --r-sm:7px; --r-lg:14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#101413; --surface:#191D1C; --surface-2:#212625; --surface-3:#2A302E;
    --ink:#E9EDEB; --ink-2:#A9B1AF; --ink-3:#7B8482;
    --rule:#2B312F; --rule-2:#3B4340;
    --primary:#85CDBE; --primary-hi:#9BD9CC; --primary-soft:#12312C;
    --secondary:#C9A64E; --secondary-soft:#33290A;
    --accent:#85CDBE; --accent-ink:#85CDBE;
    --accent-hi:#9BD9CC; --accent-soft:#12312C;
    --ok:#57C0AC;   --ok-txt:#57C0AC;   --ok-soft:#12312C;
    --warn:#D9A62E; --warn-txt:#D9A62E; --warn-soft:#332810;
    --crit:#E58A97; --crit-txt:#E58A97; --crit-soft:#381D21;
    --park:#8F9997; --park-soft:#222726;
    --seq-1:#12312C; --seq-2:#1A453D; --seq-3:#245C51; --seq-4:#307568;
    --seq-5:#428F80; --seq-6:#5FAE9D; --seq-7:#85CDBE;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
    --shadow-3:0 2px 6px rgba(0,0,0,.5), 0 20px 44px -22px rgba(0,0,0,.9);
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font:15.5px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.005em;
}
h1 { font-size:1.6rem; font-weight:680; letter-spacing:-.028em; margin:0; }
h2 { font-size:1.15rem; font-weight:660; letter-spacing:-.018em; margin:0; }
h3 { font-size:1rem; font-weight:650; margin:0 0 4px; }
a { color:inherit; text-decoration:none; }
.muted { color:var(--ink-3); } .small { font-size:.86rem; }
.tnum { font-variant-numeric:tabular-nums; }
code { font-family:var(--mono); font-size:.85em; }
.stack { display:flex; flex-direction:column; gap:14px; }
.narrow { max-width:620px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; }

input,select,textarea {
  font:inherit; width:100%; padding:9px 12px; border-radius:var(--r-sm);
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink);
  transition:border-color .14s, box-shadow .14s;
}
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
textarea { resize:vertical; }
label { font-size:.72rem; font-family:var(--mono); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:-3px; }
label em { color:var(--crit); font-style:normal; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ─── shell ─────────────────────────────────────────────── */
.app { display:grid; grid-template-columns:238px minmax(0, 1fr); min-height:100vh; }
aside {
  border-right:1px solid var(--rule); background:var(--surface);
  padding:0 14px 18px; display:flex; flex-direction:column; gap:20px;
  position:sticky; top:0; height:100vh;
}
.brandbar { height:4px; margin:0 -14px 16px; background:var(--brand-grad); }
.logo { flex:none; display:block; object-fit:contain; }
.logo.lockup { width:auto; max-width:100%; }
/* The lockup's wordmark is #272628 — invisible on a dark surface, while the gradient
   glyph is fine either way. So in dark mode the *lockup* gets a light plaque; the
   mark-only variant (favicon, empty state) is left alone. */
@media (prefers-color-scheme: dark) {
  .logo.lockup {
    background:#F4F6F5; padding:7px 11px; border-radius:9px;
    box-shadow:0 1px 2px rgba(0,0,0,.35);
  }
}
.brand { display:flex; align-items:center; padding:0 4px; }
.brand-txt { line-height:1.05; }
.brand-txt b { display:block; font-size:.95rem; font-weight:650; letter-spacing:-.03em; }
.brand-txt span { font-size:.63rem; font-family:var(--mono); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); }

aside nav { display:flex; flex-direction:column; gap:1px; }
aside nav a {
  padding:8px 11px; border-radius:var(--r-sm); font-size:.91rem; color:var(--ink-2);
  display:flex; align-items:center; gap:9px; transition:background .13s, color .13s;
}
aside nav a:hover { background:var(--surface-2); color:var(--ink); }
aside nav a.on {
  background:var(--secondary-soft); color:var(--warn-txt); font-weight:600;
  box-shadow:inset 3px 0 0 var(--secondary);
}
aside nav a .badge {
  margin-left:auto; font-family:var(--mono); font-size:.66rem; padding:1px 6px;
  border-radius:99px; background:var(--crit); color:#fff;
}
.who-box {
  margin-top:auto; border-top:1px solid var(--rule); padding-top:12px;
  display:flex; flex-direction:column; gap:9px; min-width:0;
}
.who-row { display:flex; align-items:center; gap:9px; min-width:0; }
.avatar {
  width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--primary); color:#173F38; font-size:.76rem; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase;
}
/* min-width:0 is what actually lets the children truncate inside a flex row */
.who-meta { min-width:0; flex:1 1 auto; line-height:1.3; }
.who-meta b, .who-meta span {
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.who-meta b { font-size:.9rem; font-weight:650; }
.who-meta span { font-size:.76rem; color:var(--ink-3); }
.who-meta em {
  font-style:normal; margin-left:5px; padding:0 5px; border-radius:99px;
  background:var(--surface-3); color:var(--ink-2); font-size:.68rem; font-weight:600;
}
.signout {
  width:100%; padding:7px 10px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid var(--rule-2); background:transparent; color:var(--ink-2);
  font:inherit; font-size:.82rem; font-weight:550;
  transition:background .13s, border-color .13s, color .13s;
}
.signout:hover { background:var(--secondary-soft); border-color:var(--secondary); color:var(--warn-txt); }

/**
 * Desktop-first: `main` fills the window rather than stopping at 1120px.
 *
 * The cap made sense when the dashboard was a stack of cards, where a very wide measure is hard to
 * read. It stopped making sense with the queue redesign: a task row is a title, a client and a
 * button, and on a 2560px monitor the old cap left half the screen empty while row content still
 * truncated. The width now goes to the layout that needs it — tables, the planning board, the
 * segment timeline — and prose keeps its own measure via `max-width` on the elements that hold it.
 */
main { padding:24px 34px 80px; width:100%; }
.topbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:-24px -30px 20px; padding:11px 30px; border-bottom:1px solid var(--rule);
  background:var(--surface); position:sticky; top:0; z-index:20;
}
.topbar .spacer { flex:1; }
.timerchip {
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.76rem;
  background:var(--primary-soft); color:var(--accent-ink); padding:5px 11px; border-radius:99px;
}
.timerchip .dot { width:6px; height:6px; border-radius:50%; background:var(--primary);
  animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce) { .timerchip .dot { animation:none } }

/* ─── hero ──────────────────────────────────────────────── */
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  flex-wrap:wrap; margin-bottom:4px; }
.hero .date { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.rolechips { display:flex; gap:5px; flex-wrap:wrap; }

/* ─── stat tiles ────────────────────────────────────────── */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; }
.tile {
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:13px 14px; text-align:left; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s, border-color .14s;
  display:block; width:100%; font:inherit; color:inherit;
}
.tile::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--rule-2); }
.tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--secondary); }
.tile:hover::before { background:var(--secondary); }
.tile:active { transform:translateY(0); }
.tile b { display:block; font-size:1.7rem; font-weight:680; letter-spacing:-.035em;
  line-height:1.1; font-variant-numeric:tabular-nums; }
.tile span { font-family:var(--mono); font-size:.63rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); }
.tile.is-crit::before { background:var(--crit); } .tile.is-crit b { color:var(--crit); }
.tile.is-warn::before { background:var(--warn); } .tile.is-warn b { color:var(--warn); }
.tile.is-ok::before   { background:var(--primary); }
.tile.is-zero b { color:var(--ink-3); }
.tile.is-zero::before { background:var(--rule); }
@media (prefers-reduced-motion:reduce) { .tile { transition:none } .tile:hover { transform:none } }

/* ─── panels ────────────────────────────────────────────── */
.panel { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-1); }
.phead {
  display:flex; align-items:center; gap:10px; padding:10px 15px;
  border-bottom:1px solid var(--rule); background:var(--surface-2);
}
.phead .t { font-family:var(--mono); font-size:.69rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-2); font-weight:600; }
.phead .n { margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; }
.pbody { padding:15px; }
.form { padding:22px; display:flex; flex-direction:column; gap:12px; }

/* ─── task rows ─────────────────────────────────────────── */
.row {
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  padding:11px 15px 11px 12px; border-bottom:1px solid var(--rule);
  border-left:3px solid transparent; transition:background .12s, border-left-color .12s;
}
.row:last-child { border-bottom:0; }
.row:hover { background:var(--surface-2); border-left-color:var(--secondary); }
.rowwrap { border-bottom:1px solid var(--rule); }
.rowwrap:last-child { border-bottom:0; }
.rowwrap .row { border-bottom:0; }
.rowwrap .sub { padding:0 15px 10px 15px; font-size:.79rem; color:var(--ink-3);
  font-family:var(--mono); letter-spacing:.01em; }
.rank {
  width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center;
  font-family:var(--mono); font-size:.7rem; font-weight:650;
  background:var(--primary-soft); color:var(--accent-ink);
}
.key { font-family:var(--mono); font-size:.75rem; color:var(--accent-ink); flex:none; font-weight:550; }
.key.big { font-size:.85rem; }
.ttl { flex:1 1 210px; font-size:.92rem; }
.who { font-size:.79rem; color:var(--ink-3); }

/* ─── pills ─────────────────────────────────────────────── */
.pill {
  font-family:var(--mono); font-size:.665rem; letter-spacing:.03em; padding:3px 8px;
  border-radius:5px; white-space:nowrap; background:var(--surface-3); color:var(--ink-2);
  display:inline-flex; align-items:center; gap:4px; font-weight:550;
}
.pill::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor;
  opacity:.75; flex:none; }
.pill.bare::before { display:none; }
.t-o { background:var(--ok-soft);   color:var(--ok-txt); }
.t-w { background:var(--warn-soft); color:var(--warn-txt); }
.t-c { background:var(--crit-soft); color:var(--crit-txt); }
.t-i,.t-a { background:var(--primary-soft); color:var(--ok-txt); }
.t-p { background:var(--park-soft); color:var(--park); }
.t-n { background:var(--surface-3); color:var(--ink-2); }

/* ─── pipeline bar (sequential ramp, single hue) ────────── */
.flowbar { display:flex; gap:2px; height:34px; border-radius:var(--r-sm); overflow:hidden; }
.flowseg { position:relative; min-width:3px; display:grid; place-items:center;
  transition:filter .14s; cursor:default; }
.flowseg:hover { filter:brightness(1.08); }
.flowseg b { font-family:var(--mono); font-size:.7rem; font-weight:650;
  font-variant-numeric:tabular-nums; color:#173F38; }
.flowseg.deep b { color:#FFFFFF; }
@media (prefers-color-scheme: dark) {
  .flowseg b { color:#DEE8E5; }
  .flowseg.deep b { color:#0D1817; }
}
.flowseg:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.flowseg:last-child  { border-radius:0 var(--r-sm) var(--r-sm) 0; }
.flowlegend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:11px; }
.flowlegend div { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-2); }
.flowlegend i { width:9px; height:9px; border-radius:3px; flex:none; }
.flowlegend b { font-variant-numeric:tabular-nums; color:var(--ink); }

/* ─── task detail ───────────────────────────────────────── */
.thead { display:flex; flex-direction:column; gap:8px; }
.pills { display:flex; gap:6px; flex-wrap:wrap; }
.actionbar { display:flex; gap:8px; flex-wrap:wrap; }
.cycle { padding:12px 15px; border-bottom:1px solid var(--rule); border-left:3px solid transparent; }
.cycle:last-child { border-bottom:0; }
.cycle.FAILED { border-left-color:var(--crit); background:color-mix(in srgb,var(--crit-soft) 28%,transparent); }
.cycle.PASSED { border-left-color:var(--ok); }
.cycle.BYPASSED { border-left-color:var(--warn); background:color-mix(in srgb,var(--warn-soft) 28%,transparent); }
.crow { display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:.9rem; }
.quote { margin-top:6px; font-size:.87rem; color:var(--ink-2);
  border-left:2px solid var(--rule-2); padding-left:11px; }
.cmt { padding:12px 15px; border-bottom:1px solid var(--rule); font-size:.9rem; }
.log { padding:9px 15px; border-bottom:1px solid var(--rule); font-size:.83rem;
  display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; }
.log:last-child { border-bottom:0; }
.filters { display:flex; gap:9px; flex-wrap:wrap; }
.filters input { max-width:290px; } .filters select { max-width:210px; }

/* ─── buttons ───────────────────────────────────────────── */
.btn {
  padding:9px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  background:var(--primary); color:#173F38; font-weight:650; font-size:.87rem; cursor:pointer;
  transition:background-color .15s ease, transform .1s, box-shadow .13s; white-space:nowrap;
}
/* secondary carries hover and selected — same dark ink reads on both (6.4:1 / 7.4:1) */
.btn:hover, .btn.on { background:var(--secondary); box-shadow:var(--shadow-2); }
.btn:active { transform:translateY(1px); }
.btn.ghost { background:transparent; border-color:var(--rule-2); color:var(--ink-2); }
.btn.ghost:hover { background:var(--surface-2); color:var(--ink); box-shadow:none; }
.btn.warnb { background:var(--warn-soft); color:var(--warn-txt); border-color:var(--warn); }
.btn.warnb:hover { background:var(--warn); color:#fff; }
.btn.critb { background:var(--crit-soft); color:var(--crit-txt); border-color:var(--crit); }
.btn.critb:hover { background:var(--crit); color:#fff; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.linkbtn { background:none; border:0; color:var(--accent-ink); cursor:pointer; padding:0;
  font:inherit; font-size:.87rem; text-align:left; font-weight:550; }
.linkbtn:hover { color:var(--primary-hi); text-decoration:underline; }
.err { background:var(--crit-soft); color:var(--crit-txt); padding:10px 13px;
  border-radius:var(--r-sm); font-size:.87rem; border:1px solid color-mix(in srgb,var(--crit) 25%,transparent); }
.warnbox { background:var(--warn-soft); color:var(--warn-txt); padding:12px 14px;
  border-radius:var(--r-sm); font-size:.87rem; }

/* ─── empty state ───────────────────────────────────────── */
.empty { padding:34px 20px; text-align:center; }
.empty .logo { margin:0 auto; opacity:.42; }
.empty p { margin:0; color:var(--ink-3); font-size:.92rem; }

/* ─── login ─────────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px;
  background:var(--ground); }
.login { width:100%; max-width:440px; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-3); }
.login-top { height:4px; background:var(--brand-grad); }
.login-body { padding:30px; display:flex; flex-direction:column; gap:13px; }
.login .brand { padding:0; margin-bottom:4px; }
.demo { border-top:1px solid var(--rule); padding-top:15px; margin-top:5px; }
.demo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:6px; margin-top:10px; }
.demo-btn { text-align:left; padding:8px 10px; border:1px solid var(--rule); border-radius:var(--r-sm);
  background:var(--surface-2); cursor:pointer; color:var(--ink); transition:border-color .12s, background .12s; }
.demo-btn:hover { border-color:var(--secondary); background:var(--secondary-soft); }
.demo-btn b { display:block; font-size:.83rem; }
.demo-btn span { font-size:.68rem; color:var(--ink-3); }
.eyebrow { font-family:var(--mono); font-size:.67rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); font-weight:600; }

/* ─── modal ─────────────────────────────────────────────── */
.modal-bg { position:fixed; inset:0; background:rgba(10,14,12,.5); backdrop-filter:blur(2px);
  display:grid; place-items:center; padding:20px; z-index:50; }
.modal { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:24px; width:100%; max-width:470px; display:flex; flex-direction:column; gap:14px;
  max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-3); }

@media (max-width:860px) {
  .app { grid-template-columns:1fr; }
  aside { position:static; height:auto; flex-direction:row; align-items:center; gap:14px;
    overflow-x:auto; padding:10px 14px; }
  .brandbar { display:none; }
  aside nav { flex-direction:row; }
  .who-box { margin:0; border:0; padding:0; flex-direction:row; align-items:center;
    gap:10px; flex:none; }
  .who-meta { max-width:150px; }
  .signout { width:auto; }
  main { padding:18px; }
  .topbar { margin:-18px -18px 16px; padding:10px 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   M3 · M8–M15 — the components the second half of the build added.
   Same two rules as everything above: colour never carries meaning
   on its own, and wide content scrolls inside its own container so
   the page body never scrolls sideways.
   ═══════════════════════════════════════════════════════════════ */

/* ─── nav groups ────────────────────────────────────────── */
.navgroup { display:flex; flex-direction:column; gap:1px; margin-bottom:9px; }
.navhead {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:6px 11px 3px; border:0; background:none; cursor:pointer; font:inherit;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); text-align:left;
}
.navhead em { font-style:normal; font-size:.85rem; }
aside nav { overflow-y:auto; }

/* ─── topbar extras ─────────────────────────────────────── */
.page { min-width:0; }
.search { flex:0 1 240px; margin-left:8px; }
.search input { padding:5px 10px; font-size:.85rem; border-radius:99px; }
.timerchip a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.timerchip button {
  border:0; background:none; cursor:pointer; color:inherit; font:inherit; padding:0 2px;
}
.timerchip.idle { background:var(--surface-3); color:var(--ink-2); border:0; cursor:pointer; }
/* past the warn threshold — amber, and it says so rather than only looking different */
.timerchip.warn { background:var(--warn-soft); color:var(--warn-txt); }
.timerchip.warn .dot { background:var(--warn); }
.timerchip em { font-style:normal; }

.bellwrap { position:relative; }
.bell {
  border:1px solid var(--rule-2); background:var(--surface); border-radius:99px;
  padding:4px 10px; cursor:pointer; font-size:.85rem; position:relative;
}
.bell .badge {
  position:absolute; top:-5px; right:-5px; background:var(--crit); color:#fff;
  font-family:var(--mono); font-size:.6rem; padding:1px 5px; border-radius:99px;
}
.bellmenu {
  position:absolute; right:0; top:calc(100% + 8px); width:340px; max-height:60vh; overflow:auto;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:var(--shadow-3); z-index:40;
}
.bellrow {
  display:flex; flex-direction:column; gap:2px; padding:9px 14px;
  border-bottom:1px solid var(--rule); font-size:.85rem;
}
.bellrow:last-child { border-bottom:0; }
.bellrow:hover { background:var(--surface-2); }
.bellrow.unread { box-shadow:inset 3px 0 0 var(--primary); }
.bellrow b { font-weight:550; }

/* ─── buttons ───────────────────────────────────────────── */
.btn.small { padding:5px 11px; font-size:.82rem; }
.btnrow { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.btnrow .spacer, .phead .spacer, .topbar .spacer { flex:1; }
.linkbtn { border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-size:.8rem; color:var(--accent-ink); text-decoration:underline;
  text-underline-offset:2px; }
.link { color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }

/* ─── report head, filters ──────────────────────────────── */
.rhead { display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  flex-wrap:wrap; }
/* prose keeps a readable measure even though its container no longer does */
.rhead p { margin:6px 0 0; max-width:70ch; }
.filters { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.filters input, .filters select { width:auto; min-width:150px; }
.filters .spacer { flex:1; }
.check { display:flex; align-items:center; gap:7px; font:inherit; font-size:.86rem;
  text-transform:none; letter-spacing:normal; color:var(--ink-2); margin:0; cursor:pointer; }
.check input { width:auto; }
.check span { display:block; }

/* ─── task kind chooser (D-92) ───────────────────────────── */
/* Two cards rather than a select: the choice decides whether this record runs through QA and
   deployment, and a consequence that large should be visible while choosing. */
.kind-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 560px) { .kind-choice { grid-template-columns:1fr; } }

.kind-card {
  display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left;
  padding:11px 13px; border:1px solid var(--rule-2); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.kind-card:hover { border-color:var(--accent); }
.kind-card.on { border-color:var(--accent); background:var(--accent-soft); }
/* The selected card carries a second cue besides colour, so the choice survives a greyscale
   print and does not rely on colour vision alone. */
.kind-card.on b::after { content:' ✓'; color:var(--accent-ink); }
.kind-card b { font-size:.94rem; }
.kind-card span { line-height:1.35; }

/* ─── tables ────────────────────────────────────────────── */
.tablewrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:.88rem; }
.tbl th {
  text-align:left; padding:9px 12px; border-bottom:1px solid var(--rule-2);
  background:var(--surface-2); font-family:var(--mono); font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2); font-weight:600; white-space:nowrap;
}
.tbl td { padding:9px 12px; border-bottom:1px solid var(--rule); vertical-align:top; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tbody tr:hover { background:var(--surface-2); }
.tbl tr.clickable { cursor:pointer; }
.tbl tr.totals td { background:var(--surface-2); font-weight:600; }
.tbl details summary { cursor:pointer; font-size:.8rem; color:var(--accent-ink); }
/* the permission grid: 15 columns of checkboxes need vertical headers to stay readable */
.tbl.grid th.vert { writing-mode:vertical-rl; transform:rotate(180deg); height:130px;
  padding:8px 4px; text-align:left; }
.tbl.grid th.vert em { font-style:normal; color:var(--ink-3); margin-left:6px; }
.tbl.grid td { padding:5px 4px; }
.tbl.grid input { width:auto; }

.meter { display:inline-flex; align-items:center; gap:7px; min-width:110px; }
.meter i { display:block; height:7px; border-radius:99px; background:var(--primary);
  flex:0 0 auto; min-width:2px; max-width:90px; }
.meter i.warn { background:var(--warn); } .meter i.crit { background:var(--crit); }
.meter b { font-family:var(--mono); font-size:.74rem; font-variant-numeric:tabular-nums; }

.barrow { display:flex; align-items:center; gap:9px; font-size:.86rem; padding:3px 0; }
.barrow i { display:block; height:7px; border-radius:99px; background:var(--primary);
  min-width:2px; flex:0 1 auto; }
.barrow span { flex:0 0 130px; }
.barrow b { margin-left:auto; font-variant-numeric:tabular-nums; font-size:.82rem; }
.barrow b.crit { color:var(--crit); }

/* ─── chips, tabs, banners ──────────────────────────────── */
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  border:1px solid var(--rule-2); background:var(--surface); border-radius:99px;
  padding:4px 11px; font:inherit; font-size:.79rem; cursor:pointer; color:var(--ink-2);
  transition:background .13s, border-color .13s, color .13s;
}
.chip:hover:not(:disabled) { border-color:var(--secondary); background:var(--secondary-soft); }
.chip.on { background:var(--primary-soft); border-color:var(--primary); color:var(--ok-txt);
  font-weight:600; }
.chip:disabled { opacity:.45; cursor:not-allowed; }
.chip.static { cursor:default; }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.tabs button {
  border:0; background:none; padding:8px 13px; cursor:pointer; font:inherit; font-size:.88rem;
  color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs button.on { color:var(--ink); border-bottom-color:var(--secondary); font-weight:600; }
.tabs .badge { margin-left:6px; font-family:var(--mono); font-size:.68rem; padding:1px 6px;
  border-radius:99px; background:var(--surface-3); color:var(--ink-2); }

.banner {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 15px;
  border-radius:var(--r); background:var(--primary-soft); color:var(--ok-txt);
  border:1px solid var(--primary); font-size:.88rem;
}
.banner.warn { background:var(--warn-soft); color:var(--warn-txt); border-color:var(--warn); }
.banner.crit { background:var(--crit-soft); color:var(--crit-txt); border-color:var(--crit); }
.banner .muted { color:inherit; opacity:.8; }
.banner div { flex-basis:100%; }

.caveats { border-left:3px solid var(--rule-2); padding:2px 0 2px 14px; }
.caveats p { margin:0 0 7px; font-size:.83rem; color:var(--ink-3); max-width:78ch; }

/* ─── boards (intake, planning) ─────────────────────────── */
.board { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;
  align-items:start; }
.boardcol { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-1); }
.boardbody { padding:9px; display:flex; flex-direction:column; gap:8px; max-height:70vh;
  overflow-y:auto; }
.card {
  display:flex; flex-direction:column; gap:5px; padding:10px 11px; border-radius:var(--r-sm);
  border:1px solid var(--rule); background:var(--surface); position:relative;
  transition:border-color .13s, box-shadow .13s;
}
.card:hover { border-color:var(--secondary); box-shadow:var(--shadow-2); }
.card.first { border-left:3px solid var(--primary); }
.card b { font-size:.89rem; font-weight:550; }
/* the rank badge floats top-right, so the title needs room not to run under it */
.card .rank { position:absolute; top:9px; right:9px; }
.card > a { display:flex; flex-direction:column; gap:3px; padding-right:26px; }
.cardmeta { display:flex; gap:5px; flex-wrap:wrap; }
.addrow { border:1px dashed var(--rule-2); background:none; border-radius:var(--r-sm);
  padding:8px; cursor:pointer; font:inherit; font-size:.82rem; color:var(--ink-3); }
.addrow:hover { border-color:var(--secondary); color:var(--warn-txt); }
.picker { display:flex; flex-direction:column; gap:3px; max-height:220px; overflow-y:auto;
  border:1px solid var(--rule); border-radius:var(--r-sm); padding:6px; }
.picker button { text-align:left; border:0; background:none; font:inherit; font-size:.82rem;
  padding:5px 7px; border-radius:5px; cursor:pointer; }
.picker button:hover { background:var(--surface-2); }
.planrow { display:flex; align-items:center; gap:10px; padding-left:12px;
  border-bottom:1px solid var(--rule); }
.planrow:last-child { border-bottom:0; }
.planrow .row { flex:1; border-bottom:0; }
.planrow.first { background:var(--primary-soft); }

/* ─── task detail additions ─────────────────────────────── */
.actionbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.prose { white-space:pre-wrap; font-size:.9rem; line-height:1.6; }
.runbookitem { margin-bottom:12px; }
.runbookitem:last-child { margin-bottom:0; }
.eyebrow { font-family:var(--mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
pre.sql {
  font-family:var(--mono); font-size:.79rem; background:var(--surface-2); padding:10px 12px;
  border-radius:var(--r-sm); border:1px solid var(--rule); overflow-x:auto; margin:0;
  white-space:pre-wrap; position:relative;
}
pre.sql .copy { position:absolute; top:6px; right:6px; border:1px solid var(--rule-2);
  background:var(--surface); border-radius:5px; font:inherit; font-size:.7rem; padding:2px 7px;
  cursor:pointer; }
textarea.mono, input.mono { font-family:var(--mono); font-size:.82rem; }
.checklist { border:1px solid var(--warn); background:var(--warn-soft); border-radius:var(--r);
  padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.checklist .check { align-items:flex-start; color:var(--warn-txt); }
.checklist .check b { display:block; margin-bottom:4px; }
.checklist pre.sql { background:var(--surface); }

.userchip { display:inline-flex; align-items:center; gap:6px; font-size:.86rem; }
.userchip i { width:21px; height:21px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-3); color:var(--ink-2); font-style:normal; font-size:.62rem;
  font-weight:700; text-transform:uppercase; flex:none; }

.uploader { display:flex; flex-direction:column; gap:3px; border:1px dashed var(--rule-2);
  border-radius:var(--r-sm); padding:12px; cursor:pointer; text-transform:none;
  letter-spacing:normal; font-family:inherit; }
.uploader input { display:none; }
.uploader span { font-size:.87rem; color:var(--ink-2); }
.attachrow { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:7px 0;
  border-bottom:1px solid var(--rule); font-size:.86rem; }
.attachrow:last-child { border-bottom:0; }
.attachrow a { color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }

.log { padding:10px 16px; border-bottom:1px solid var(--rule); display:flex;
  flex-direction:column; gap:3px; font-size:.87rem; }
.log:last-child { border-bottom:0; }
.log > span:first-child { font-family:var(--mono); font-size:.72rem; color:var(--ink-3); }
.diff { display:flex; gap:7px; flex-wrap:wrap; font-size:.79rem; align-items:baseline; }
.diff b { font-weight:600; }
.diff .was { color:var(--ink-3); text-decoration:line-through; }
.diff .now { color:var(--ok-txt); }
.morerow { display:block; padding:9px 15px; font-size:.84rem; color:var(--accent-ink);
  background:var(--surface-2); }

/* ─── timesheet ─────────────────────────────────────────── */
.dayhead { padding:8px 15px; background:var(--surface-2); border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; }
.entryrow { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:8px 15px;
  border-bottom:1px solid var(--rule); font-size:.86rem; }
.entryrow:last-child { border-bottom:0; }
/* discarded entries stay visible with a strikethrough on the owner's timesheet */
.entryrow.discarded { opacity:.5; text-decoration:line-through; }
.reviewrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 15px;
  border-bottom:1px solid var(--rule); }
.reviewrow:last-child { border-bottom:0; }
.reviewrow > div:first-child { flex:1 1 320px; }

/* ─── modal ─────────────────────────────────────────────── */
.modal.wide { max-width:720px; }
.modal { max-height:88vh; overflow-y:auto; }

/* ─── empty state ───────────────────────────────────────── */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:34px 16px; text-align:center; color:var(--ink-3); }
.empty p { margin:0; max-width:44ch; font-size:.9rem; }

.warnbox.small { font-size:.8rem; padding:8px 10px; }

/* ─── narrow viewports ──────────────────────────────────── */
@media (max-width: 880px) {
  .app { grid-template-columns:1fr; }
  aside { position:static; height:auto; }
  aside nav { flex-direction:row; flex-wrap:wrap; }
  .navgroup { flex-direction:row; flex-wrap:wrap; }
  main { padding:16px 16px 60px; }
  .topbar { margin:-16px -16px 16px; padding:10px 16px; }
}

/* the role × event preference grid — 15 role columns, one chip per cell. The event column is
   sticky because scrolling right until you cannot see which row you are on is the whole failure
   mode of a wide grid. */
.tbl.prefgrid th.rowhead { position:sticky; left:0; z-index:1; background:var(--surface);
  text-align:left; white-space:nowrap; padding-right:14px; font-weight:500; }
.tbl.prefgrid tbody tr:hover th.rowhead { background:var(--surface-2); }
.tbl.prefgrid th { font-size:.72rem; line-height:1.2; vertical-align:bottom; }
.tbl.prefgrid td { text-align:center; padding:4px 3px; }
.tbl.prefgrid .chip { min-width:52px; justify-content:center; font-size:.7rem; padding:3px 6px; }
/* an unsaved cell is visibly unsaved — a grid you can edit in twenty places needs to show which
   twenty before you press Save */
.chip.edited { outline:2px solid var(--warn); outline-offset:1px; }

/* ── the queue dashboard (D-87) ──────────────────────────────────────────────
   One list per section, three sections at most. What replaced 33 tiles and panels.
   ─────────────────────────────────────────────────────────────────────────── */
.dhead { margin-bottom: 4px; }
.dhead h1 { margin: 2px 0 0; font-size: 1.5rem; letter-spacing: -.01em; }

.queue { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; }
/* the primary section is the one the role exists to look at, so it gets the weight */
.queue.primary { border-color: var(--rule-2); box-shadow: var(--shadow); }
.queue.warn { border-left: 3px solid var(--warn); }
.queue > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.queue > header h2 { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2); }
.qcount { font-size: .78rem; font-weight: 600; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: 99px; padding: 0 8px; }
.qhint { flex-basis: 100%; margin: 2px 0 0; font-size: .82rem; color: var(--ink-3); }
/* an empty queue: quiet enough to scan past, present enough to say the section is not broken */
.qnone { margin: 0; padding: 14px 16px; font-size: .85rem; color: var(--ink-3); }

.qlist { list-style: none; margin: 0; padding: 0; }
.qlist li { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--rule); }
.qlist li:last-child { border-bottom: 0; }
.qlist li:hover { background: var(--surface-2); }
.qlist li.is-rework { border-left: 3px solid var(--warn); padding-left: 13px; }

.qmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  cursor: pointer; text-decoration: none; color: inherit; }
/* a queue row is scanned, not read — but a 2000px-wide title with the button a mouse-journey away
   is worse than a capped one, so the text stops and the action stays reachable */
.qtitle { max-width: 90ch; }
.qtitle { font-weight: 500; color: var(--ink); }
.qmeta { font-size: .8rem; color: var(--ink-3); }
/* "with QA (Akansh)" — the answer to *what is waiting for someone else?* as a sentence on the
   row rather than a section of its own */
.qwait { font-size: .78rem; color: var(--ink-3); font-style: italic; }
.qwhy { font-size: .78rem; color: var(--warn-ink, var(--ink-2)); }
.qstatus { font-size: .78rem; color: var(--accent-ink); }
.qdate { font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.qactions { display: flex; gap: 6px; flex-shrink: 0; }

/* Priority: only P0 and rework shout. P1–P3 get progressively quieter rather than three more
   competing colours — the point is that the two urgent things are found without reading. */
.pchip { flex-shrink: 0; min-width: 30px; text-align: center; font-family: var(--mono);
  font-size: .68rem; font-weight: 600; padding: 3px 7px; border-radius: 4px; letter-spacing: .02em; }
.pchip.p-p0 { background: var(--crit); color: #fff; }
.pchip.rework { background: var(--warn); color: #fff; min-width: auto; }
.pchip.p-p1 { background: var(--surface-2); color: var(--ink); border: 1px solid var(--rule-2); }
.pchip.p-p2 { background: transparent; color: var(--ink-3); border: 1px solid var(--rule); }
.pchip.p-p3 { background: transparent; color: var(--ink-3); border: 1px dashed var(--rule); }

/* the pipeline: one line, six links. It replaced six KPI tiles and a stacked bar. */
.stagestrip { display: flex; flex-wrap: wrap; }
.stage { flex: 1 1 100px; padding: 12px 14px; border-right: 1px solid var(--rule);
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 1px; }
.stage:last-child { border-right: 0; }
.stage:hover { background: var(--surface-2); }
.stage b { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stage span { font-size: .72rem; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .04em; }

/* the planning dialog: one line per developer, with the derived date at the end */
.planrow { display: grid; grid-template-columns: 1.4fr .6fr .9fr auto auto; gap: 8px;
  align-items: end; }
.planend { font-size: .8rem; color: var(--ink-2); padding-bottom: 8px; white-space: nowrap; }
/* progressive disclosure: the four optional handoff fields stay folded until wanted */
.disclose { border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px 12px; }
.disclose summary { cursor: pointer; font-size: .84rem; color: var(--accent-ink); }
.disclose .stack { margin-top: 10px; }

@media (max-width: 700px) {
  .planrow { grid-template-columns: 1fr 1fr; }
  .qlist li { flex-wrap: wrap; }
}

/* the reports index — one entry in the nav, ten cards behind it */
.repgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.repcard { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  text-decoration: none; color: inherit; }
.repcard:hover { border-color: var(--rule-2); box-shadow: var(--shadow); }
.repcard b { font-weight: 600; }
.repcard span { font-size: .82rem; color: var(--ink-3); }

/* ─── the raiser's list ──────────────────────────────────────
   Sales and support get one row per request with its stage on the right, rather than the
   pipeline's table. The stage column is fixed-width so the labels line up down the page and the
   eye can run the column without reading each one. */
.panel li.qrow { display:flex; align-items:flex-start; gap:14px; padding:11px 16px;
  border-bottom:1px solid var(--rule); list-style:none; }
.panel li.qrow:last-child { border-bottom:0; }
.panel li.qrow:hover { background:var(--surface-2); }
.stagecell { display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  flex:0 0 auto; max-width:32ch; text-align:right; }
/* the reason sits under the pill — parked and rejected explain themselves inline, because
   making somebody click to find out why a "no" was a "no" is the failure this product prevents */
.stagecell em { font-style:normal; line-height:1.35; }
@media (max-width:700px) {
  .panel li.qrow { flex-direction:column; gap:7px; }
  .stagecell { align-items:flex-start; text-align:left; }
}

/* the raiser's one fact — a client rings to ask "when", so the date is the largest thing on
   the page rather than one cell in a seven-row planned/actual table */
.bigdate { font-size:1.7rem; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
/* the raiser's task page: wider than a form, narrower than a pipeline table */
.stack.readable { max-width:860px; }

/* ─── the client combobox ────────────────────────────────────
   Searches the master and creates from the same input, so a salesperson mid-call never has to
   leave the form to file a prerequisite. */
.combo { position:relative; }
.combo input { width:100%; padding-right:30px; }
.comboclear { position:absolute; right:7px; top:50%; transform:translateY(-50%);
  border:0; background:none; cursor:pointer; font-size:1.1rem; line-height:1;
  color:var(--ink-3); padding:2px 5px; border-radius:var(--r-sm); }
.comboclear:hover { color:var(--ink); background:var(--surface-2); }
.combolist {
  position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; margin:0;
  padding:4px; list-style:none; max-height:260px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--rule-2); border-radius:var(--r-sm);
  box-shadow:0 8px 26px -12px rgba(20,26,23,.34);
}
.comboitem { padding:7px 10px; border-radius:var(--r-sm); cursor:pointer; font-size:.9rem; }
.comboitem.hi { background:var(--surface-2); }
/* the create row is visually last and quieter — putting it first invites a fat-fingered duplicate */
.comboitem.create { border-top:1px solid var(--rule); margin-top:4px; padding-top:9px;
  color:var(--accent-ink); }
.comboitem.create b { font-weight:600; }

/* "Showing 5 of 23 — see all": a folded tail, never a silent one */
.qmore { display:block; padding:9px 16px; font-size:.83rem; color:var(--accent-ink);
  border-top:1px solid var(--rule); text-decoration:none; }
.qmore:hover { background:var(--surface-2); }