/* ==========================================================================
   Document Control Tracker (design mockup)
   Tokens are taken from the Auditor Request Tracker design system so this
   reads as a sibling app: brand blue #126798, Inter, pale blue ground, white cards.
   ========================================================================== */
:root{
  --brand:#126798; --brand-deep:#0e5a85;
  --accent:#0f6fa6; --accent-hover:#0c5e8f;

  --ink:#0b1620; --ink-strong:#1a2b3c; --ink-heading:#1e3a52; --ink-body:#3b4a59; --ink-muted:#5b6977;
  --page-gradient:linear-gradient(168deg,#f0f5fb 0%,#e8eff8 40%,#f3f7fb 70%,#edf3fa 100%);
  --card:#ffffff; --line:#dfe9f2; --line-row:#edf2f7; --line-cell:#eef2f7;
  --surface-slate:#f8fafc; --surface-hover:#f4f9ff;

  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 6px 16px rgba(16,24,40,.08);
  --shadow-pop:0 24px 60px rgba(16,24,40,.18),0 4px 16px rgba(16,24,40,.08);

  /* Status colours are reserved for meaning: red = no room, green = room, amber = expedited. */
  --good:#16a34a; --good-strong:#15803d; --good-bg:#dcfce7; --good-tint:#f0fdf4; --good-ink:#166534; --good-border:#a7dbb8;
  --bad:#dc2626;  --bad-deep:#991b1b; --bad-bg:#fee2e2;  --bad-tint:#fff5f5;  --bad-ink:#b42318;  --bad-border:#f5b0b3;
  --warn:#d97706; --warn-dot:#f59e0b; --warn-bg:#fef3c7; --warn-tint:#fffbeb; --warn-ink:#92400e; --warn-border:#f5d472;

  /* Chart ramps (validated): one hue, light to dark. */
  --series-earlier:#7fb0d9; --series-today:#0f6fa6;
  --ring-pace:#9fe2b6;

  --font:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --topbar-h:64px;
  --focus:0 0 0 3px rgba(15,111,166,.35);
  --stripes-bad:repeating-linear-gradient(45deg,#dc2626 0 .3em,#991b1b .3em .55em);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--page-gradient); background-attachment:fixed;
  font-size:14px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--focus)}
.i{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}

.app{height:100vh;display:flex;flex-direction:column}
.view{flex:1;min-height:0}

/* ==========================================================================
   Top bar (shared by both screens)
   ========================================================================== */
.topbar{
  position:relative; z-index:20; flex:0 0 auto; height:var(--topbar-h); overflow:hidden;
  display:flex; align-items:center; gap:18px; padding:0 20px; color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.topbar > :not(.helix):not(.refresh-line){position:relative;z-index:1}
/* Brand touch: a faint double helix, echoing the strands in the Avecia logo. */
.helix{
  position:absolute; top:0; right:0; height:100%; width:58%; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%); mask-image:linear-gradient(90deg,transparent 0%,#000 55%);
}
.helix path{fill:none;stroke:#fff;stroke-width:1.8;opacity:.22}
.helix line{stroke:#fff;stroke-width:1.3;opacity:.12}
/* Refresh progress: fills from the last Power BI refresh to the next one. */
.refresh-line{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:rgba(255,255,255,.14)}
.refresh-line span{display:block;height:100%;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,rgba(255,255,255,.45),#fff)}
.refresh-line.live span{transition:width 1s linear}

.lockup{display:flex;align-items:center;gap:14px;min-width:0}
.logo-plate{
  height:44px; padding:7px 12px; border-radius:8px; flex:0 0 auto;
  display:flex; align-items:center;
  background:rgba(255,255,255,.96); box-shadow:0 1px 3px rgba(0,0,0,.10);
}
.logo-plate img{height:30px;width:auto;display:block}
.titles{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.t1{font-size:19px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.t2{font-size:12.5px;font-weight:500;opacity:.82;letter-spacing:.1px;margin-top:4px;white-space:nowrap}

.tabs{display:flex;gap:4px;padding:4px;margin-left:6px;border-radius:11px;background:rgba(255,255,255,.12)}
.tab{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px;
  border:0; border-radius:8px; background:transparent; color:rgba(255,255,255,.9);
  font-size:14px; font-weight:600; white-space:nowrap;
}
.tab .i{width:17px;height:17px}
.tab:hover{background:rgba(255,255,255,.14);color:#fff}
.tab[aria-selected="true"]{background:#fff;color:var(--brand-deep);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.spacer{flex:1}

.preview-pill{
  height:28px; display:inline-flex; align-items:center; padding:0 11px; border-radius:999px;
  border:1px dashed rgba(255,255,255,.45); font-size:12px; font-weight:600; opacity:.9; white-space:nowrap;
}
.fresh{
  display:flex; align-items:center; gap:10px; height:36px; padding:0 14px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); font-size:13.5px; white-space:nowrap;
}
.fresh .dot{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.fresh b{font-weight:700}
.fresh .next{opacity:.85;padding-left:10px;border-left:1px solid rgba(255,255,255,.28)}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.clock .time{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.clock .date{font-size:12.5px;opacity:.85;margin-top:2px}
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto;
  border-radius:10px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff;
}
.icon-btn .i{width:19px;height:19px}
.icon-btn:hover{background:rgba(255,255,255,.18)}
.topbar :focus-visible{box-shadow:0 0 0 2px var(--brand-deep),0 0 0 4px #fff}
.preview-pill .short{display:none}
/* The top bar is sized for a 1920px TV; on laptops it sheds the least important text first. */
@media (max-width:1460px){ .preview-pill .long{display:none} .preview-pill .short{display:inline} }
@media (max-width:1400px){ .fresh .next{display:none} }
@media (max-width:1300px){ .t2,.preview-pill{display:none} }

/* ==========================================================================
   Dashboard: built for a 1920x1080 TV. Every size is in em, and the em is tied
   to the viewport so the whole board always fits the screen without scrolling.
   Key numbers are sized to be read from across the room.
   ========================================================================== */
.dash{
  font-size:min(calc(100vw / 120), calc((100vh - var(--topbar-h)) / 63.5));
  padding:1.1em 1.5em 1.1em; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:.9em;
}

/* Title badges: a small tinted icon tile in front of each section title. */
.title-badge{width:2.1em;height:2.1em;border-radius:.6em;display:grid;place-items:center;flex:0 0 auto}
.title-badge .i{width:1.25em;height:1.25em}
.tb-blue{background:#e6f0f9;color:var(--accent)}
.tb-amber{background:var(--warn-bg);color:#b45309}
.tb-slate{background:#e3ebf4;color:var(--ink-heading)}

/* ---- Count tiles: white cards; colour only on the stripe, the icon and the number ---- */
.v-info{--c-stripe:#3b82f6;--c-icon:#2563eb;--c-value:#1e40af;--c-label:#3b5e91;--c-bg1:#eff6ff;--c-bg2:#e8f1fb;--c-border:#b8d4f0}
.v-bad {--c-stripe:#ef4444;--c-icon:#dc2626;--c-value:#991b1b;--c-label:#89383b;--c-bg1:#fff1f2;--c-bg2:#ffe4e6;--c-border:#f5b0b3}
.v-warn{--c-stripe:#f59e0b;--c-icon:#d97706;--c-value:#92400e;--c-label:#78600f;--c-bg1:#fffbeb;--c-bg2:#fef3c7;--c-border:#f5d472}
.v-good{--c-stripe:#22c55e;--c-icon:#16a34a;--c-value:#15603a;--c-label:#3f6e52;--c-bg1:#f0fdf4;--c-bg2:#dcfce7;--c-border:#a7dbb8}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1em}
.kpi{
  position:relative; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; gap:.3em;
  padding:.8em 1.2em .85em 1.55em; border-radius:.875em;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-2);
  transition:box-shadow .15s ease, transform .15s ease;
}
.kpi:hover{box-shadow:0 10px 24px rgba(16,24,40,.12);transform:translateY(-1px)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.32em;background:var(--c-stripe)}
.kpi-top{display:flex;align-items:center;gap:.6em}
.kpi-badge{width:1.9em;height:1.9em;border-radius:.55em;display:grid;place-items:center;flex:0 0 auto;background:var(--c-bg2);color:var(--c-icon)}
.kpi-badge .i{width:1.15em;height:1.15em}
.kpi-label{font-size:1.25em;font-weight:700;line-height:1.2;color:var(--ink-heading)}
.kpi-top .pulse{margin-left:.1em}
.kpi-mid{display:flex;align-items:center;gap:1.1em;min-height:3.7em}
.kpi-value{font-size:3.6em;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c-value);min-width:1.2em}
.kpi-vis{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.3em}
.kpi-sub{display:flex;align-items:center;flex-wrap:wrap;gap:.4em;font-size:1.05em;color:var(--ink-body);line-height:1.3}
.kpi-sub .sub-note{margin-left:auto;font-size:.85em;font-weight:600;color:var(--ink-muted)}
.vis-cap{display:flex;justify-content:space-between;gap:.6em;font-size:.82em;font-weight:600;color:var(--ink-muted);white-space:nowrap}
.vis-cap.start{justify-content:flex-start;gap:1.1em}
.vis-cap .k{display:inline-flex;align-items:center;gap:.35em}
.vis-cap .sw{width:.85em;height:.85em;border-radius:.2em;display:inline-block}
.delta{font-weight:700;font-variant-numeric:tabular-nums}
.delta.bad{color:var(--bad-ink)} .delta.good{color:var(--good-ink)}

/* Sparkline (In queue): the line recedes, today's point carries the accent. */
.spark{width:100%;height:auto;display:block;overflow:visible}
.spark .area{fill:var(--c-stripe);opacity:.14}
.spark .line{fill:none;stroke:var(--c-icon);stroke-opacity:.6;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.spark .dot{fill:var(--c-icon);stroke:#fff;stroke-width:2.5;vector-effect:non-scaling-stroke}

/* Limit bar (Backlog): what fits in today's limit, then the overflow, striped. */
.cap{display:flex;height:1.05em;border-radius:.3em;overflow:hidden}
.cap span{height:100%}
.cap .cap-in{width:calc(var(--w) * 100%);background:#a3b2c2}
.cap .cap-over{flex:1;margin-left:2px;background:var(--stripes-bad)}

/* Ring (Completed today): done so far, then where today's pace lands by 16:00. */
.ring{position:relative;width:5.4em;height:5.4em;flex:0 0 auto}
.ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .ring-track{stroke:#e3f6e9}
.ring .ring-pace{stroke:var(--ring-pace);stroke-dasharray:var(--len) 100;stroke-linecap:round}
.ring .ring-done{stroke:var(--good);stroke-dasharray:var(--len) 100;stroke-linecap:round}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring-num{font-size:2.3em;font-weight:800;letter-spacing:-.02em;color:var(--c-value)}
.ring-of{margin-top:.2em;font-size:.82em;font-weight:600;color:var(--ink-muted)}
.ring-text{font-size:1.05em;line-height:1.35;color:var(--ink-body)}
.ring-text b{font-size:1.2em;font-weight:800;color:var(--c-value)}

/* Due-time strip (Expedited): today from 08:00 to 18:00, a "now" marker, one dot per expedite. */
.tl{position:relative;height:3.3em;margin:0 .5em}
.tl-line,.tl-past{position:absolute;left:0;top:1.55em;height:.3em;border-radius:999px}
.tl-line{right:0;background:#e6ebf1}
.tl-past{width:calc(var(--x) * 100%);background:#c9d3de}
.tl-now{position:absolute;top:.75em;height:1.85em;left:calc(var(--x) * 100%);width:2px;margin-left:-1px;background:var(--ink-heading);border-radius:2px}
.tl-now i{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-style:normal;font-size:.72em;font-weight:700;color:var(--ink-heading);line-height:1.1}
.tl-dot{position:absolute;top:1.7em;left:calc(var(--x) * 100%);width:1em;height:1em;margin:-.5em 0 0 -.5em;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(16,24,40,.25)}
.tl-dot.late{background:var(--bad)}
.tl-dot.soon{background:var(--warn-dot)}
.tl-dot.later{background:#94a3b8}
.tl-lab{position:absolute;bottom:0;left:calc(var(--x) * 100%);transform:translateX(-50%);font-size:.74em;font-weight:600;color:var(--ink-muted);font-variant-numeric:tabular-nums;line-height:1}
.tl-lab.first{transform:none}
.tl-lab.last{transform:translateX(-100%)}

.tag{display:inline-flex;align-items:center;gap:.3em;padding:.12em .55em;border-radius:999px;font-size:.9em;font-weight:700;white-space:nowrap;border:1px solid}
.tag .i{width:1em;height:1em}
.tag.bad{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad-border)}
.tag.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.tag.good{background:var(--good-bg);color:var(--good-ink);border-color:var(--good-border)}
.tag.plain{background:#eef3f8;color:var(--ink-body);border-color:#dbe5ee}
.ellip{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ambient motion is kept for things that need attention: the backlog dot and overdue items. */
.pulse{position:relative;display:inline-block;width:.6em;height:.6em}
.pulse::before,.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#ef4444}
.pulse::after{animation:pulseRing 2s ease-out infinite}
@keyframes pulseRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}

/* ---- Panels ---- */
.insights{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1em;min-height:0}
.panel{
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:1em; box-shadow:var(--shadow-2);
}
.panel-head{display:flex;align-items:center;gap:.7em;padding:.7em 1.3em .6em;border-bottom:1px solid var(--line-row)}
.panel-title{margin:0;font-size:1.4em;font-weight:700;letter-spacing:-.01em;color:var(--ink-heading);line-height:1.25;white-space:nowrap}
.panel-chip{padding:.15em .65em;border-radius:999px;background:#eef3f8;border:1px solid #dbe5ee;font-size:.88em;font-weight:600;color:var(--ink-body);white-space:nowrap}
.panel-meta{margin-left:auto;display:flex;align-items:baseline;gap:.35em;white-space:nowrap}
.panel-meta .big{font-size:1.75em;font-weight:800;color:var(--ink-strong);line-height:1}
.panel-meta .small{font-size:.95em;color:var(--ink-muted)}
.panel-body{flex:1;min-height:0;padding:.6em 1.3em .8em}

/* ---- Rotating panel: three views, 20 seconds each, paused while the pointer is over it ---- */
.rot-tabs{margin-left:auto;display:flex;gap:.25em;padding:.22em;border-radius:.7em;background:#f1f5f9;border:1px solid #e5ecf3}
.rot-tab{
  position:relative; overflow:hidden; border:0; background:transparent; border-radius:.5em;
  padding:.32em .8em .38em; font-size:.92em; font-weight:600; color:var(--ink-muted); white-space:nowrap;
}
.rot-tab:hover{color:var(--ink-heading)}
.rot-tab[aria-selected="true"]{background:#fff;color:var(--ink-heading);box-shadow:var(--shadow-1)}
.rot-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center}
.rot-tab[aria-selected="true"] .rot-bar{animation:rotFill var(--rot-ms,20000ms) linear forwards}
.rotator.paused .rot-tab[aria-selected="true"] .rot-bar{animation-play-state:paused}
@keyframes rotFill{to{transform:scaleX(1)}}
.rot-body{position:relative;padding:0}
.rot-view{
  position:absolute; inset:0; padding:.6em 1.3em .8em; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s;
}
.rot-view.is-active{opacity:1;visibility:visible;transition:opacity .45s ease}

/* Bar rows (departments, document age): one baseline, value at the tip. */
.bars{list-style:none;margin:0;padding:0;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly}
.bar-row{display:grid;grid-template-columns:13.5em minmax(0,1fr);align-items:center;column-gap:1em;border-radius:.4em;outline:none}
.bar-row:focus-visible{box-shadow:var(--focus)}
.bar-label{font-size:1.05em;font-weight:500;color:var(--ink-body);white-space:nowrap}
.bar-track{display:flex;align-items:center;min-height:1.9em;border-left:1px solid #c6d3df}
.seg{height:1.3em;flex:0 0 auto;width:calc((100% - 7.5em) * var(--w))}
.seg + .seg{margin-left:2px}
.seg.end{border-radius:0 .25em .25em 0}
.seg.earlier{background:var(--series-earlier)}
.seg.today{background:var(--series-today)}
.bar-row:hover .seg{filter:brightness(.92)}
.bar-val{margin-left:.6em;font-size:1.1em;font-weight:700;color:var(--ink-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-val small{margin-left:.35em;font-size:.8em;font-weight:600;color:var(--ink-muted)}
.mini-legend{display:flex;justify-content:flex-end;gap:1.3em;font-size:.92em;color:var(--ink-muted)}
.mini-legend span{display:inline-flex;align-items:center;gap:.4em}
.mini-legend i{width:.9em;height:.9em;border-radius:.2em;display:inline-block}

/* Queue trend */
.trend{position:relative;flex:1;min-height:0}
.trend svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trend .grid-l{stroke:#e6edf4;stroke-width:1}
.trend .base-l{stroke:#c6d3df;stroke-width:1}
.trend .axis-t{fill:var(--ink-muted)}
.trend .band{fill:#fee2e2;opacity:.6}
.trend .band-t{fill:var(--bad-ink);font-weight:600}
.trend .limit{stroke:#e48a8a;stroke-width:1.5}
.trend .area{fill:var(--series-today);opacity:.1}
.trend .line{fill:none;stroke:var(--series-today);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.trend .pt{fill:var(--series-today);stroke:#fff;stroke-width:2}
.trend .end-t{fill:var(--ink-strong);font-weight:800}
.trend .cross{stroke:#94a3b8;stroke-width:1}
.trend .hit{fill:transparent;cursor:crosshair}

/* Document age */
.age{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.6em}
.age .bar-row{grid-template-columns:8.5em minmax(0,1fr)}
.age .seg{width:calc((100% - 4em) * var(--w))}
.oldest{align-self:center;display:flex;flex-direction:column;gap:.5em;padding:1em 1.2em;border:1px solid var(--line);border-radius:.9em;background:var(--surface-slate)}
.oldest-k{font-size:.98em;font-weight:600;color:var(--ink-muted)}
.oldest-doc{font-size:1.9em;font-weight:800;line-height:1.05;color:var(--ink-strong);font-variant-numeric:tabular-nums}
.oldest-days{display:flex;align-items:center;gap:.4em;font-size:1.15em;font-weight:700;color:var(--bad-ink)}
.oldest-days .i{width:1.1em;height:1.1em}
.oldest-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin-top:.2em;padding-top:.65em;border-top:1px solid var(--line);font-size:.98em;color:var(--ink-body)}

/* ---- Work these first ---- */
.worklist{list-style:none;margin:0;padding:0;height:100%;display:flex;flex-direction:column;gap:.45em;overflow:hidden}
.work{
  display:grid; grid-template-columns:6.8em minmax(0,1fr) auto; align-items:center; column-gap:1em;
  padding:.35em .6em; border:1px solid var(--line-row); border-radius:.75em; background:#fff; line-height:1.2;
}
.work.is-late{background:var(--bad-tint);border-color:#f8c9c9;box-shadow:inset .3em 0 0 var(--bad)}
.due{border-radius:.55em;padding:.24em .35em;text-align:center;line-height:1.05;background:var(--surface-slate);color:var(--ink-body);border:1px solid var(--line)}
.due-time{display:block;font-size:1.45em;font-weight:800;font-variant-numeric:tabular-nums}
.due-note{display:block;font-size:.82em;font-weight:700;margin-top:.12em}
.due.late{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-ink);animation:latePulse 2.4s ease-in-out infinite}
.due.soon{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-ink)}
@keyframes latePulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}50%{box-shadow:0 0 0 .32em rgba(220,38,38,.2)}}
.work.just-late{animation:flashLate 1.4s ease-out 1}
@keyframes flashLate{0%,30%{background:#fecaca;border-color:#f5b0b3}100%{background:var(--bad-tint)}}
.work-doc{display:flex;align-items:center;gap:.7em;min-width:0}
.docno{font-weight:700;color:var(--ink-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.work .docno{font-size:1.3em}
.work .tag{font-size:.95em;min-width:0}
.who{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--ink-strong);white-space:nowrap}
.work .who{font-size:1.05em}
.avatar{
  width:2.6em; height:2.6em; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:.82em; font-weight:700; letter-spacing:.02em;
  background:#e6f0f8; color:var(--brand-deep); border:1px solid #cfe0ee;
}
.more{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.1em .2em 0;font-size:1em;color:var(--ink-muted)}
.more b{color:var(--ink-strong)}
.more-btn{display:inline-flex;align-items:center;gap:.4em;padding:.3em .8em;border-radius:.5em;border:1px solid var(--line);background:#fff;color:var(--accent);font-weight:600}
.more-btn:hover{border-color:#b9d3e8;background:var(--surface-hover)}
.empty-line{display:flex;align-items:center;gap:.6em;height:100%;justify-content:center;color:var(--ink-muted);font-size:1.1em}
.empty-line .i{width:1.4em;height:1.4em;color:var(--good)}

/* ---- Team workload: the one loud element on the board ---- */
.team-wrap{display:flex;flex-direction:column;gap:.6em}
.team-head{display:flex;align-items:center;gap:.7em;min-width:0}
.team-head .title-badge{width:1.95em;height:1.95em}
.section-title{margin:0 .3em 0 0;font-size:1.4em;font-weight:700;letter-spacing:-.01em;color:var(--ink-heading);white-space:nowrap}
.summary{display:flex;gap:.5em}
.summary .tag{font-size:1.02em;padding:.22em .8em}
.suggest{margin-left:auto;display:flex;align-items:center;gap:.55em;font-size:1em;color:var(--ink-body);white-space:nowrap;min-width:0}
.suggest > .i{width:1.25em;height:1.25em;color:var(--accent)}
.move{display:inline-flex;align-items:center;padding:.2em .75em;border-radius:999px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-weight:700}

.team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1em}
.person{
  display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:1em; box-shadow:var(--shadow-2);
  transition:box-shadow .15s ease, transform .15s ease;
}
.person:hover{box-shadow:0 10px 24px rgba(16,24,40,.13);transform:translateY(-1px)}
.person.full{--band:var(--bad);--band-ink:var(--bad-ink);border-color:var(--bad-border)}
.person.room{--band:var(--good-strong);--band-ink:var(--good-ink);border-color:var(--good-border)}
.band{display:flex;align-items:center;gap:.7em;padding:.62em .9em;background:var(--band);color:#fff}
.band .avatar{background:#fff;border:0;color:var(--band-ink);width:2.75em;height:2.75em;font-size:.88em}
.band-id{flex:1;min-width:0}
.person-name{font-size:1.3em;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band-status{display:flex;align-items:center;gap:.3em;margin-top:.12em;font-size:.95em;font-weight:600;opacity:.95}
.band-status .i{width:1.05em;height:1.05em}
.band-num{text-align:right;line-height:1;flex:0 0 auto}
.band-num b{display:block;font-size:2.2em;font-weight:800;letter-spacing:-.02em}
.band-num span{display:block;margin-top:.18em;font-size:.82em;font-weight:600;opacity:.92}

.meters{list-style:none;margin:0;padding:.65em .95em .55em;display:flex;flex-direction:column;gap:.5em;flex:1}
.meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;line-height:1.2}
.meter-label{font-size:1em;font-weight:600;color:var(--ink-body);white-space:nowrap}
.meter-num{font-size:1em;color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.meter-num b{font-size:1.25em;font-weight:800;color:var(--ink-strong)}
.m-full .meter-num b{color:var(--bad-ink)}
.meter{display:flex;height:.8em;margin-top:.3em;border-radius:999px;background:var(--track);overflow:hidden}
.meter .fill{height:100%;background:var(--fill)}
.meter .fill.in{width:calc(var(--w) * 100%)}
.meter .fill.over{flex:1;margin-left:2px;background:var(--stripes-bad)}
.m-room{--track:var(--good-bg);--fill:var(--good)}
.m-full{--track:#fff;--fill:var(--bad)}

.person-foot{
  display:flex; align-items:center; gap:.45em; flex-wrap:wrap; line-height:1.25;
  padding:.5em .95em .55em; border-top:1px solid var(--line-row); font-size:1em; color:var(--ink-body);
}
.person-foot .i.zap{width:1.15em;height:1.15em;color:var(--warn)}
.person-foot .tag{font-size:.9em}
.person-foot.none{color:var(--ink-muted)}

/* ---- Entrance: one orchestrated moment on load, and one per chart as it rotates in ---- */
.dash.intro .meter .fill,.dash.intro .cap span{transform-origin:left center;animation:growX .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--delay,0s)}
.dash.intro .spark .line{animation:draw 1.2s ease-out .15s both}
.dash.intro .spark .dot{animation:fadeIn .4s ease-out 1.2s both}
.dash.intro .ring .ring-pace,.dash.intro .ring .ring-done{animation:ringGrow 1.2s cubic-bezier(.2,.7,.2,1) .15s both}
.dash.intro .tl-dot{animation:popIn .45s cubic-bezier(.2,.7,.3,1.4) both;animation-delay:var(--delay,0s)}
.rot-view.play .seg{transform-origin:left center;animation:growX .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--delay,0s)}
.rot-view.play .trend .line{animation:draw 1.1s ease-out both}
.rot-view.play .trend .area,.rot-view.play .trend .pt,.rot-view.play .trend .end-t{animation:fadeIn .5s ease-out .7s both}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}}
@keyframes ringGrow{from{stroke-dasharray:0 100}}
@keyframes popIn{from{transform:scale(0);opacity:0}}

/* ==========================================================================
   Tracker: a desk screen for Deb and Jill. Fixed px sizes, audit-tracker density.
   ========================================================================== */
.tracker{display:flex;flex-direction:column;gap:10px;padding:12px 16px 16px;overflow:hidden}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2)}

.controlbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:10px 12px}
.field{display:flex;align-items:center;gap:8px}
.field label{font-size:12.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.select{
  appearance:none; -webkit-appearance:none; height:36px; min-width:180px; padding:0 34px 0 12px;
  border:1px solid var(--line); border-radius:10px; font-size:13.5px; font-weight:600; color:var(--ink-strong);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243443' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center/14px;
}
.select:hover{border-color:#c5d6e6}
.toggle{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff; font-size:13.5px; font-weight:600; color:var(--ink-body); white-space:nowrap;
}
.toggle .box{width:16px;height:16px;border-radius:4px;border:1.5px solid #b9ccdd;display:grid;place-items:center;background:#fff}
.toggle .box .i{width:12px;height:12px;stroke-width:3;color:#fff;opacity:0}
.toggle[aria-pressed="true"]{border-color:#9cc3df;background:#f0f7fd;color:var(--brand-deep)}
.toggle[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent)}
.toggle[aria-pressed="true"] .box .i{opacity:1}
.search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;min-width:240px}
.search .i{width:16px;height:16px;color:#64748b}
.search input{border:0;outline:0;background:transparent;width:100%;font-size:13.5px}
.search:focus-within{border-color:rgba(15,111,166,.65);box-shadow:0 0 0 4px rgba(15,111,166,.10)}
.search input::placeholder{color:#64748b}

.mini-kpis{margin-left:auto;display:flex;gap:6px}
.mini{
  position:relative; overflow:hidden; min-width:128px; padding:5px 12px 6px 14px; border-radius:9px;
  border:1px solid var(--c-border); background:linear-gradient(135deg,var(--c-bg1),var(--c-bg2));
}
.mini::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-stripe)}
.mini-label{font-size:11.5px;font-weight:600;color:var(--c-label);white-space:nowrap}
.mini-value{font-size:20px;font-weight:800;line-height:1.15;color:var(--c-value)}
/* On laptop widths the filters need the whole bar; the counts stay on the Dashboard. */
@media (max-width:1679px){ .mini-kpis{display:none} }

.grid-card{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.grid-toolbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:10px 14px;
  border-bottom:1px solid #e2e8f0; background:linear-gradient(180deg,#f8fafc,#f1f5f9);
}
.grid-title{font-size:15px;font-weight:700;color:var(--ink-heading)}
.count-pill{padding:3px 10px;border-radius:999px;background:#eef2f7;color:#475569;border:1px solid #e2e8f0;font-size:12px;font-weight:700;white-space:nowrap}
.key{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-muted);white-space:nowrap}
.key .i{width:14px;height:14px;color:#64748b}
.key .sw{width:14px;height:14px;border-radius:4px;border:1px solid #dbe3ec}
.key .sw.ro{background:var(--surface-slate)}
.key .sw.ed{background:#fff}
.tb-btn{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:8px;
  border:1px solid #cbd5e1; background:linear-gradient(180deg,#fff,#f8fafc); font-size:13px; font-weight:700; color:#0f172a;
}
.tb-btn .i{width:15px;height:15px}
.tb-btn:hover{border-color:#94a3b8}

.grid-scroll{flex:1;min-height:0;overflow:auto}
table.grid{width:100%;min-width:1760px;border-collapse:separate;border-spacing:0;font-size:13.5px}
.grid th{
  position:sticky; top:0; z-index:2; text-align:left; white-space:nowrap;
  padding:10px 12px; font-size:12.5px; font-weight:800; color:#0f172a;
  background:linear-gradient(180deg,#f0f4f8 0%,#e8edf3 100%);
  border-bottom:2px solid #d1dae4; border-right:1px solid #d8e0ea;
}
.th-in{display:flex;align-items:center;gap:7px}
.th-in .i{width:15px;height:15px;color:#64748b}
.grid td{
  padding:9px 12px; vertical-align:top; line-height:1.45; color:var(--ink);
  border-bottom:1px solid var(--line-cell); border-right:1px solid var(--line-cell); background:#fff;
}
.grid td.ro{background:var(--surface-slate);color:#334155}
.grid tbody tr:hover td{background:var(--surface-hover)}
.grid tbody tr:hover td.ro{background:#eef4fa}
.grid td.rowno{width:52px;text-align:center;font-size:12px;font-weight:700;color:#475569}
.grid tr.is-exp td.rowno{box-shadow:inset 3px 0 0 var(--warn-dot)}
.grid tr.is-done td{color:#64748b}
.grid tr.is-done .docno{color:#475569}
.grid .who{font-size:13.5px}
.grid .avatar{font-size:11px;width:26px;height:26px}
.badge-exp{
  display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:1px 8px; border-radius:999px; vertical-align:1px;
  background:var(--warn-bg); color:var(--warn-ink); border:1px solid var(--warn-border); font-size:11.5px; font-weight:700;
}
.badge-exp .i{width:12px;height:12px}
.grid td.ed{cursor:pointer;position:relative}
.grid td.ed:hover{box-shadow:inset 0 0 0 2px rgba(37,99,235,.35)}
.grid td.ed:hover::after{
  content:""; position:absolute; top:9px; right:9px; width:13px; height:13px; background:#64748b;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.grid td.ed[data-edit="dept"]:hover::after{display:none}
.cell-due{font-variant-numeric:tabular-nums;white-space:nowrap}
.cell-due small{display:block;font-size:11.5px;font-weight:700}
.cell-due.late{color:var(--bad-ink);font-weight:700}
.cell-due.soon{color:var(--warn-ink);font-weight:700}
.ph{color:#64748b;font-style:italic}
.dd{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.dd .chip{display:inline-flex;align-items:center;padding:1px 9px;border-radius:999px;background:#eef3f8;border:1px solid #dbe5ee;font-weight:600;color:var(--ink-strong);white-space:nowrap}
.dd .i{width:14px;height:14px;color:#64748b}
.dd .ph{white-space:nowrap}
.txt{white-space:pre-wrap;word-break:break-word;padding-right:14px}
.nowrap{white-space:nowrap;font-variant-numeric:tabular-nums}
.done-chip{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:0 8px;border-radius:999px;background:var(--good-bg);color:var(--good-ink);border:1px solid var(--good-border);font-size:11.5px;font-weight:700}
.done-chip .i{width:12px;height:12px}
.grid .empty td{padding:40px 12px;text-align:center;color:var(--ink-muted);background:#fff}

/* Popover editors (grid) */
.pop{
  position:fixed; z-index:50; width:300px; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:var(--shadow-pop);
}
.pop-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #f1f5f9;background:linear-gradient(180deg,#f8fafc,#fff)}
.pop-head .i{width:16px;height:16px;color:#0369a1}
.pop-title{font-size:13px;font-weight:800;color:#0f172a}
.pop-sub{margin-left:auto;font-size:12px;color:#64748b;font-variant-numeric:tabular-nums}
.pop-list{max-height:300px;overflow:auto;padding:6px}
.pop-item{
  display:flex; align-items:center; justify-content:space-between; width:100%; padding:8px 10px;
  border:0; border-radius:8px; background:transparent; font-size:13.5px; text-align:left; color:var(--ink-strong);
}
.pop-item .i{width:15px;height:15px;color:#1d4ed8}
.pop-item:hover,.pop-item:focus-visible{background:#f1f5f9}
.pop-item[aria-selected="true"]{background:#eff6ff;color:#1e40af;font-weight:700}
.pop-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pop-row{display:flex;gap:10px}
.pop-field{display:flex;flex-direction:column;gap:4px;flex:1}
.pop-field span{font-size:11.5px;font-weight:700;color:#475569}
.pop-field input,.pop-field textarea{
  width:100%; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font-size:13.5px; background:#fff; color:var(--ink);
}
.pop-field textarea{resize:vertical;min-height:96px;line-height:1.45}
.pop-field input:focus,.pop-field textarea:focus{outline:0;border-color:#0f6fa6;box-shadow:0 0 0 3px rgba(15,111,166,.12)}
.pop-hint{font-size:12px;color:#64748b}
.pop-error{font-size:12px;font-weight:600;color:var(--bad-ink)}
.pop-foot{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid #f1f5f9;background:linear-gradient(0deg,#f8fafc,#fff)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px;
  border-radius:8px; border:1px solid transparent; font-size:13px; font-weight:600;
}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(15,111,166,.2)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{background:#fff;border-color:#cbd5e1;color:#334155}
.btn.ghost:hover{border-color:#94a3b8}
.btn.link{background:transparent;color:var(--bad-ink);padding:0 6px}
.pop-foot .btn.primary{margin-left:auto}

/* Tooltip + toast */
.tooltip{
  position:fixed; z-index:70; pointer-events:none; max-width:300px; padding:8px 11px; border-radius:8px;
  background:#0b1620; color:#fff; font-size:13px; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.tooltip b{font-size:17px;font-weight:800;display:block}
.toast-host{position:fixed;top:76px;right:16px;z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;max-width:380px;padding:10px 14px;border-radius:8px;background:#dbeafe;color:#1e3a8a;font-size:14px;line-height:1.4;box-shadow:0 4px 12px rgba(0,0,0,.18)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}