/* Agile Admin — admin console. Tina4 palette. */
/* Route loading bar — a thin indeterminate strip shown while a tab's data
   loads. Only revealed after a short delay (see _beginRouteProgress in
   admin.js), so cache-served tab switches never flash it. */
.route-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;
  background:transparent;overflow:hidden;pointer-events:none}
.route-progress[hidden]{display:none}
.route-progress.active::before{content:"";position:absolute;top:0;height:100%;
  width:35%;border-radius:0 3px 3px 0;background:var(--blue);
  animation:route-progress-slide 0.9s ease-in-out infinite}
@keyframes route-progress-slide{
  0%{left:-35%}
  60%{left:100%}
  100%{left:100%}
}
@media (prefers-reduced-motion: reduce){
  .route-progress.active::before{animation-duration:0s;left:0;width:100%;opacity:.4}
}
:root{
  --blue:#2563EB;
  --blue-ink:#1E40AF;
  --pink:#2563EB;
  --yellow:#FBBF24;
  --ink:#1E2A4A;
  --paper:#F7F8FA;
  --card:#FFFFFF;
  --line:#E4E7EC;
  --muted:#667085;
  --good:#15803D;
  --warn:#B45309;
  --bad:#BE123C;
  --shadow:0 1px 2px rgba(30,42,74,.08), 0 8px 24px rgba(30,42,74,.08);
  --radius:10px;
  --radius-sm:6px;
  /* ── Design tokens (design/DESIGN.md §3) — additive layer, legacy names re-pointed above ── */
  --text-1:var(--ink); --text-2:#475467; --text-3:var(--muted);
  --accent:var(--blue); --accent-hover:#1D4ED8; --accent-active:#1E40AF;
  --accent-tint:#DBEAFE; --hover-tint:rgba(37,99,235,.06);
  --good-tint:#DCFCE7; --good-ink:#15803D;
  --warn-tint:#F59E0B; --warn-ink:#1E2A4A;
  --bad-tint:#FFE4E6;  --bad-ink:#BE123C;
  --info-tint:#E2E8F0; --info-ink:#475569;
  --pink-tint:#DBEAFE; --pink-ink:#1E40AF;
  --yellow-tint:#FEF3C7;
  --focus-ring:0 0 0 3px var(--accent-tint),0 0 0 1px var(--accent);
  --disabled-opacity:.45;
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --lh-tight:1.2; --lh-body:1.45;
  --font-ui:'Geist',system-ui,sans-serif;
  --font-display:'Plus Jakarta Sans',var(--font-ui);
  --font-mono:'Geist Mono',ui-monospace,monospace;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(30,42,74,.08);
  --shadow-2:0 4px 12px rgba(30,42,74,.10);
  --shadow-3:0 12px 32px rgba(30,42,74,.14);
  --dur-fast:100ms; --dur-base:160ms; --ease-out:cubic-bezier(.2,0,0,1);
  --max-content:1600px;
  --z-dropdown:100; --z-sticky:200; --z-modal-backdrop:500; --z-modal:600; --z-toast:700;

  --signal:#FBBF24; --border-strong:#C9CED6; --accent-ink:#1E40AF; --on-accent:#FFFFFF; --on-warning:#1E2A4A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Geist',sans-serif;font-weight:800;
  line-height:1.15;letter-spacing:-.01em;margin:0}
h1{font-size:28px}
h2{font-size:20px}
h3{font-size:16px}
code,.mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace}

/* Layout — the app shell (rail + top navbar + content) lives in the SHELL
   section further down; these are the content-area basics. */
.main{min-width:0;overflow-x:hidden}
/* Every table needs a horizontally-scrollable wrapper on narrow viewports */
.card > table, .alloc-grid, .stack > table{max-width:100%}
table{table-layout:auto}
th,td{white-space:normal;word-break:break-word}
.metrics{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.field-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

@media (max-width:960px){
  .main{padding:16px}
}
@media (max-width:600px){
  .main{padding:12px}
  h1{font-size:22px}
  .card{padding:14px}
  th,td{padding:6px 6px;font-size:12px}
}

.main{padding:16px 24px;min-width:0}

/* Clock strip — flush against the top nav, part of the sticky header block */
.clock-strip{display:flex;align-items:center;gap:14px;padding:10px 24px;
  background:linear-gradient(90deg, rgba(10,165,118,.12), rgba(43,65,230,.10));
  border:0;border-bottom:1px solid rgba(10,165,118,.30);border-radius:0;
  box-shadow:0 2px 12px rgba(10,165,118,.10)}
.clock-strip[hidden]{display:none!important}
/* Give main breathing room below the sticky header */
body.clock-on .main{padding-top:20px}
.clock-dot{width:10px;height:10px;background:var(--good);border-radius:50%;flex:0 0 10px;
  animation:clock-pulse 1.4s ease-in-out infinite}
@keyframes clock-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}
.clock-copy{flex:1 1 auto;min-width:0}
.clock-label{font-size:9px;color:var(--good);text-transform:uppercase;letter-spacing:.08em;
  font-weight:800;line-height:1}
.clock-task{font-size:13px;font-weight:600;color:var(--ink);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clock-note-hint{flex:1 1 200px;min-width:120px;max-width:400px;padding:6px 12px;
  color:var(--muted);font-size:12px}
.clock-note{flex:1 1 200px;min-width:120px;max-width:400px;padding:6px 12px;
  border:1px solid rgba(10,165,118,.30);background:rgba(255,255,255,.6);border-radius:100px;
  font-family:inherit;font-size:12px;color:var(--ink);outline:none}
.clock-note[hidden]{display:none!important}
.clock-note:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(43,65,230,.12)}
.clock-strip.stopped .clock-note{background:rgba(255,255,255,.5);border-color:var(--line)}
.clock-elapsed-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.clock-elapsed{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.clock-strip:not(.stopped) .clock-elapsed{cursor:pointer}
.clock-strip:not(.stopped) .clock-elapsed:hover{opacity:.72}
.clock-total{font-size:10px;color:var(--muted);font-weight:700;line-height:1}
.clock-total.over{color:var(--bad)}
.clock-stop{background:var(--bad);color:#fff;border:0;padding:8px 16px;border-radius:100px;
  font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;flex:0 0 auto}
.clock-stop:hover{transform:translateY(-1px)}
.clock-resume{background:var(--good);color:#fff;border:0;padding:8px 16px;border-radius:100px;
  font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;flex:0 0 auto}
.clock-resume:hover{transform:translateY(-1px)}
.clock-resume[hidden]{display:none!important}
/* Stopped state — muted, dismiss button instead of stop */
.clock-strip.stopped{background:linear-gradient(90deg, rgba(107,113,148,.08), rgba(107,113,148,.04));
  border-bottom-color:var(--line);box-shadow:none}
.clock-strip.stopped .clock-dot{background:var(--muted);animation:none}
.clock-strip.stopped .clock-label{color:var(--muted)}
.clock-strip.stopped .clock-label::after{content:" · stopped"}
.clock-strip.stopped .clock-stop{background:var(--ink);color:#fff}
/* Work-mode dashboard */
/* Flat hero — the title sits on the page (no gradient card), matching the
   rest of the flat design system. */
.work-hero{background:transparent;border:0;border-radius:0;padding:0;
  margin-bottom:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.work-strip{display:flex;gap:12px;flex-wrap:wrap}

/* Compact "Log time to" pill row — replaces the old Standing-tasks + Meetings
   tinted bands. Same click handlers (work-clock-standing / work-start-meeting). */
.work-logtime{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.work-logtime-label{font-size:12px;color:var(--text-3);margin-right:2px}
.work-pill{border:1px solid var(--border-strong);background:var(--surface);border-radius:100px;
  font:600 12px/1 var(--font-body);color:var(--text-2);padding:7px 13px;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.work-pill:hover{border-color:var(--accent);color:var(--accent)}
.work-pill.cal{border-color:var(--accent-tint);background:var(--accent-tint);color:var(--accent-ink)}
.work-pill.cal.on{background:var(--bad);border-color:var(--bad);color:#fff}

/* Empty lane → one quiet line, not a full empty-state card. */
.work-emptyline{display:flex;align-items:baseline;gap:8px;padding:10px 2px;margin:0;
  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--text-3)}
.work-emptyline .count{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--text-3);opacity:.7}

/* "Now" is the one elevated lane — a 2px accent left rule, nothing louder.
   Qualified with .card so it beats the base .card border on source order. */
.card.work-sec-progress{border-left:2px solid var(--accent)}
.work-metric{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 16px;
  display:flex;flex-direction:column;min-width:100px}
.work-metric-button{font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.work-metric-button:hover{border-color:var(--blue);box-shadow:0 0 0 2px rgba(43,65,230,.10);background:rgba(43,65,230,.04)}
.work-metric-button.is-active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(43,65,230,.14);background:var(--blue);color:#fff}
.work-metric-button.is-active .work-metric-label{color:rgba(255,255,255,.85)}
.work-metric-value{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;line-height:1}
.work-metric-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;margin-top:4px}
.work-list{display:flex;flex-direction:column;gap:4px}
.work-story-group{display:grid;gap:6px;width:100%;min-width:0;max-width:100%;box-sizing:border-box;
  padding:6px;border:1px solid rgba(67,140,242,.28);border-radius:10px;
  background:linear-gradient(120deg,rgba(67,140,242,.045),var(--card) 65%);overflow:hidden}
.work-list-story-context{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;box-sizing:border-box;
  padding:7px 10px;background:rgba(67,140,242,.07);border:1px solid rgba(67,140,242,.16);border-radius:7px}
.work-list-story-context .work-level-badge{flex:0 0 auto}
.work-list-story-link{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;color:var(--ink);text-decoration:none}
.work-list-story-link:hover .work-list-story-title{text-decoration:underline}
.work-list-story-link .work-item-code{flex:0 0 auto;white-space:nowrap}
.work-list-story-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800}
.work-list-story-label{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.work-subtask-list{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;width:calc(100% - 16px);max-width:calc(100% - 16px);
  min-width:0;box-sizing:border-box;margin-left:16px;padding-left:10px;border-left:2px solid rgba(67,140,242,.32)}
.work-subtask-list>.work-item{min-width:0;max-width:100%;box-sizing:border-box}
.work-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;
  padding:8px 12px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:8px}
.work-item.kind-released{border-left-width:4px}
.work-item-mainline{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,auto);align-items:center;gap:20px;margin-top:2px}
.work-item-topline{display:flex;align-items:center;gap:8px;min-width:0;font-size:11px;color:var(--muted)}
.work-item-code{font-weight:700;color:var(--ink)}
.work-item-project{margin-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:700}
.work-parent-trail{max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.work-level-badge{display:inline-block;padding:3px 8px;border-radius:3px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.work-level-badge.epic{background:#7c3aed}
.work-level-badge.story{background:#438cf2}
.work-level-badge.sub-task{background:#20b965}
.work-level-badge.bug{background:#ef6b73}
.work-level-badge.feature{background:#79aef2}
.work-level-badge.request{background:#e9bd55;color:#3f2b00}
.work-level-badge.task{background:#65758b}
.work-level-badge.risk{background:#c15b29}
.kanban-type-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border:1px solid;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.kanban-type-badge.bug{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.kanban-type-badge.feature{background:#dbeafe;color:#1e3a8a;border-color:#bfdbfe}
.kanban-type-badge.request{background:#fef3c7;color:#78350f;border-color:#fde68a}
.work-type-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ticket-list-identity{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px}
.ticket-list{gap:6px}
.ticket-list-item{grid-template-columns:minmax(0,1fr) auto auto;padding:8px 12px}
.ticket-list-item,.support-ticket-list-card{border-left-color:#f59e0b;background:linear-gradient(90deg,rgba(245,158,11,.06),var(--card) 28%)}
.ticket-list-item .work-item-topline{flex-wrap:wrap;row-gap:5px}
.ticket-list-item .work-item-project{flex:1 1 220px;min-width:150px}
.ticket-list-item .work-item-title{margin-top:2px}
.ticket-list-item .work-item-context{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-list-date{font-size:11px;white-space:nowrap;align-self:center}
.work-item-context .kanban-type-badge{padding:2px 6px;font-size:10px}
.work-item-context .support-ticket-marker{padding:2px 6px;font-size:9px}
.work-item-title-block{min-width:0}
.work-item-title{font-weight:800;font-size:14px;line-height:1.2}
.work-item-context{margin-top:2px;font-size:11px;color:var(--muted);line-height:1.2}
.work-item-context strong{color:var(--ink)}
.work-item-statusline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;min-height:0;line-height:1.1}
.work-item-due-wrap{min-width:150px;text-align:center;justify-self:end}
.work-due-badge{display:inline-block;padding:4px 9px;border-radius:3px;font-size:12px;font-weight:900;letter-spacing:.04em}
.work-due-badge.good{background:#20b965;color:#fff}
.work-due-badge.warn{background:#f4b52e;color:#241b00}
.work-due-badge.bad{background:#d51d2e;color:#fff}
.work-item.signed{border-left-color:var(--good);opacity:.75}
/* Age-since-accept badge — small circle sitting inside the top-right
   of each task row / card. 1 (green) → 10 (red). Hue set inline. */
/* Delivery lifecycle strip on the project page */
.lifecycle-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lc-track{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lc-pip{font-size:11px;font-weight:700;padding:4px 12px;border-radius:100px;
  background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.lc-pip.on{background:rgba(10,165,118,.14);color:var(--good);border-color:rgba(10,165,118,.3)}
.lc-pip.now{background:var(--blue);color:#fff;border-color:var(--blue)}
.lc-arrow{color:var(--line-strong,#c3c7d6);font-weight:700}
.lc-action{display:flex;align-items:center;gap:8px}

.age-badge{position:absolute;top:2px;right:2px;
  width:18px;height:18px;border-radius:50%;
  color:#fff;font-size:10px;font-weight:800;line-height:1;
  display:grid;place-items:center;
  box-shadow:0 1px 2px rgba(14,19,48,.14);
  z-index:2;letter-spacing:-.02em;font-family:'Geist Mono',ui-monospace,monospace;
  pointer-events:none}
.work-item.overdue{border-left:4px solid var(--bad);background:rgba(217,38,78,.04)}
.work-item.overdue .work-item-title{color:var(--bad)}
.work-overdue-band{display:flex;flex-direction:column;gap:6px}
.work-overdue-divider{display:flex;align-items:center;gap:10px;margin:8px 0;
  color:var(--bad);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.work-overdue-divider::before,.work-overdue-divider::after{content:"";flex:1;height:2px;background:var(--bad);opacity:.35}
.work-overdue-divider span{padding:2px 10px;background:var(--bad);color:#fff;border-radius:100px}
.chip.bad{background:var(--bad);color:#fff;border:1px solid var(--bad);padding:2px 8px;border-radius:100px;font-size:10.5px;font-weight:700}
.work-item-body{min-width:0}
.work-item-crumb{margin-bottom:2px}
.work-item-title{font-weight:700;font-size:14px;line-height:1.2}
.work-item.clocking{border-color:var(--good,#0aa576);box-shadow:0 0 0 1px var(--good,#0aa576),0 0 0 4px rgba(10,165,118,.12)}
.work-item.clocking::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--good,#0aa576);border-radius:3px 0 0 3px;animation:clock-pulse 1.4s ease-in-out infinite}
@keyframes clock-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.chip.clocking-chip{background:var(--good,#0aa576);color:#fff;border:1px solid var(--good,#0aa576);
  padding:2px 8px;border-radius:100px;font-size:10.5px;font-weight:700}
.clock-stop-btn{background:var(--bad,#d9264e)!important;color:#fff!important;border-color:var(--bad,#d9264e)!important;font-weight:700}
.work-item-est{font-size:13px;font-weight:700;color:var(--muted);text-align:right;white-space:nowrap;min-width:82px}
.work-item-est .wie-logged{font-size:15px;font-weight:800;color:var(--ink,#0e1330);line-height:1.1}
.work-item-est .wie-logged.over{color:var(--bad)}
.work-item-est .wie-sub{font-size:10.5px;font-weight:600;color:var(--muted);margin-top:1px}
.work-item-actions{display:inline-flex;gap:6px}
.task-note.note-peer_review_bypass,
.task-note.note-testing_bypass{background:#fff9eb;border-color:#f2d8a2;border-left:3px solid #e6a321}
.task-note.note-peer_review_bypass .muted,
.task-note.note-testing_bypass .muted{
  color:#a45a00;
  font-weight:800;
}
.task-note.task-note-client-visible{background:#fffaf0;border-color:#f0dda8;border-left:3px solid #edbf45}
.task-notes-thread{display:flex;flex-direction:column;gap:10px;padding:10px 6px}
.task-note{display:block;min-width:0;padding:10px 11px;border:1px solid #e7e9ef;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.035)}
.task-note-header{display:flex;align-items:center;gap:5px 8px;min-width:0;flex-wrap:wrap;margin-bottom:7px}
.task-note-author{font-size:12px;font-weight:750;color:var(--ink)}
.task-note-kind{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:10px}
.task-note-kind .conversation-audience-badge{margin:0}
.task-note-time{margin-left:auto;color:var(--muted);font-size:10px;white-space:nowrap}
.task-note-content{min-width:0}
.task-note-body{color:var(--ink)}
.task-note.task-audit-event{border-left:3px solid #8ba3f7;background:#fbfcff}
.task-audit-changes{display:grid;gap:4px;margin:0;padding-left:18px;color:var(--muted);font-size:12px;line-height:1.45}
.task-audit-changes strong{color:var(--ink)}
.comment-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;padding-top:8px;border-top:1px solid #eef0f4}
.comment-attachment-link{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:1px solid #e3e6ed;border-radius:6px;background:#f8f9fc;padding:5px 8px;color:var(--blue);cursor:pointer;font-size:11px;text-align:left}
.comment-attachment-link:hover{border-color:#b9c5fa;background:#f1f4ff}
.comment-attachment-staging .att-list:empty{display:none}
.conversation-audience-badge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:100px;font-size:9px;font-weight:800;line-height:1.4;text-transform:uppercase;letter-spacing:.04em}
.client-visible-badge{background:#ffedb5;color:#754d00}
.internal-audience-badge{background:rgba(98,111,158,.1);color:var(--muted)}
.time-log-list{margin-top:8px;border-top:1px solid var(--line)}
.time-log-group{border-bottom:1px solid var(--line)}
.time-log-group>summary{display:flex;align-items:center;gap:8px;padding:10px 0;cursor:pointer;list-style:none}
.time-log-group>summary::-webkit-details-marker{display:none}
.time-log-group>summary::before{content:'▸';color:var(--muted)}
.time-log-group[open]>summary::before{content:'▾'}
.time-log-group>summary .count{margin-left:2px}
.time-log-group>summary .mono{margin-left:auto;color:var(--muted);font-size:11px}
.time-log-row{display:grid;grid-template-columns:minmax(320px,1fr) minmax(790px,1.35fr);align-items:start;gap:20px;padding:8px 0;border-top:1px solid var(--line);font-size:12px}
.time-log-entry-main{display:flex;align-items:center;gap:8px;min-width:0}
.time-log-entry-main>div{min-width:0}
.time-log-actions{display:grid;grid-template-columns:minmax(280px,1fr) 158px 158px 112px auto;align-items:start;gap:8px;min-width:0}
.time-log-row.is-locked .time-log-actions{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap}
.time-log-input{font:inherit;border:1px solid var(--line);border-radius:5px;padding:5px 6px;background:#fff;color:var(--ink)}
.time-log-datetime{width:158px}
.time-log-duration{width:112px;text-align:center;font-variant-numeric:tabular-nums}
.time-log-comment{width:100%;min-height:44px;resize:vertical;line-height:1.35}
.time-log-row.is-locked{color:var(--muted)}
.time-log-note{margin-top:4px;padding-left:8px;border-left:2px solid var(--line-strong,#c3c7d6)}
@media (max-width:1200px){
  .time-log-row{grid-template-columns:minmax(280px,1fr) minmax(720px,1.25fr);gap:12px}
  .time-log-actions{grid-template-columns:minmax(220px,1fr) 150px 150px 112px auto;gap:6px}
  .time-log-datetime{width:150px}
}
@media (max-width:760px){
  .time-log-row{display:block}
  .time-log-entry-main{display:block}
  .time-log-actions{display:flex;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
  .time-log-datetime,.time-log-comment{width:100%}
  .time-log-duration{width:112px}
}
@media (max-width:760px){
  .work-item{grid-template-columns:1fr;gap:8px}
  .work-item-mainline{grid-template-columns:1fr;gap:4px}
  .work-item-due-wrap{justify-self:start;text-align:left}
  .work-item-est{display:none}
  .work-item-actions{justify-content:flex-end}
  .work-item-project{display:none}
  .work-parent-trail{max-width:35%}
  .work-story-group{padding:5px;gap:5px}
  .work-subtask-list{width:calc(100% - 9px);max-width:calc(100% - 9px);margin-left:9px;padding-left:7px}
  .work-list-story-context{gap:6px;padding:6px}
  .work-list-story-label{display:none}
}
@media (min-width:761px){
  .work-item-body{padding-right:4px}
  .work-item-actions{min-width:max-content}
}

/* Cards + tables */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:20px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{display:flex;align-items:center;gap:10px}
.card-title h2{font-size:16px}
.card-title .count{font-size:11px;color:var(--muted);background:var(--paper);
  border:1px solid var(--line);padding:2px 8px;border-radius:100px;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:700;color:var(--muted);text-transform:uppercase;font-size:10px;
  letter-spacing:.08em;padding:6px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(43,65,230,.02)}

.chip{display:inline-block;padding:2px 10px;border-radius:100px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;line-height:1.6}
.chip.blue{background:var(--blue);color:#fff}
.chip.pink{background:var(--pink);color:#fff}
.chip.purple{background:#5d2a91;color:#fff}
.chip.yellow{background:var(--yellow);color:var(--ink)}
.chip.muted{background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.chip.good{background:#d8f6e8;color:#0a6647}
.chip.warn{background:#ffe6cf;color:#8f4200}
.chip.bad{background:#ffd7df;color:#a01235}

button,.btn{cursor:pointer;font-family:inherit;font-weight:600;font-size:13px;
  padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);
  transition:transform .05s ease}
button:hover,.btn:hover{transform:translateY(-1px)}
button.primary,.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
button:disabled,.btn:disabled,
button.primary:disabled,.btn.primary:disabled{
  background:#e7e9f0;color:#8a8fa3;border-color:#d5d8e2;
  cursor:not-allowed;opacity:1;transform:none;
}
button:disabled:hover,.btn:disabled:hover{transform:none}
button.pink{background:var(--pink);color:#fff;border-color:var(--pink)}
button.ghost{background:transparent;border-color:transparent;color:var(--blue)}
button.danger{background:#fff;color:var(--bad);border-color:#f5b8c4}
button.sm{padding:5px 12px;font-size:11px;white-space:nowrap}
/* Icon-only action buttons for row-level operations */
button.icon-btn{padding:0;width:30px;height:30px;display:inline-grid;place-items:center;
  border-radius:8px;line-height:1;background:#fff;color:var(--muted);border:1px solid var(--line);
  transition:color .1s, background .1s, border-color .1s}
button.icon-btn:hover{color:var(--ink);background:var(--paper);transform:none}
button.icon-btn.primary{color:var(--blue);border-color:transparent;background:rgba(43,65,230,.08)}
button.icon-btn.primary:hover{background:rgba(43,65,230,.16);color:var(--blue-ink)}
button.icon-btn.danger{color:var(--bad);border-color:transparent;background:transparent}
button.icon-btn.danger:hover{background:#fff5f7;color:var(--bad)}
button.icon-btn.good{color:var(--good);border-color:transparent;background:rgba(10,165,118,.08)}
button.icon-btn.good:hover{background:rgba(10,165,118,.16)}
button.icon-btn.warn{color:var(--warn);border-color:transparent;background:rgba(229,105,31,.08)}
button.icon-btn.warn:hover{background:rgba(229,105,31,.16)}
button.icon-btn[disabled]{opacity:.4;cursor:not-allowed}
button.icon-btn[disabled]:hover{background:#fff;color:var(--muted)}
button.icon-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block;pointer-events:none}
/* Even disabled buttons show their tooltip on hover — helps explain why they're disabled */
button.icon-btn[disabled][title]{pointer-events:auto}
/* Row action cells: keep buttons on one line, comfortable gap */
td .row-actions{display:inline-flex;gap:4px;flex-wrap:nowrap;align-items:center;justify-content:flex-end}
/* Give tables a bit more breathing room on wide viewports */
td{padding:12px 10px;vertical-align:middle}
th{padding:8px 10px}
/* Right-align action column so buttons don't drift into content */
td:last-child, th:last-child{text-align:right;white-space:nowrap}

input,select,textarea{font-family:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;outline:none;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,65,230,.12)}
/* Inside form fields, controls stretch to fill their column */
.field > input, .field > select, .field > textarea, .field > .combobox{width:100%;display:block}

/* Invalid state — for required-field validation feedback */
.field.invalid > input,
.field.invalid > textarea,
.field.invalid > select,
.field.invalid > .combobox .combobox-input,
input.invalid, textarea.invalid, select.invalid,
.combobox.invalid .combobox-input{
  border-color:var(--bad);
  box-shadow:0 0 0 3px rgba(217,38,78,.12);
  background:#fff5f7;
}
.field.invalid > label{color:var(--bad)}
.field-error{color:var(--bad);font-size:11px;font-weight:600;margin-top:4px;letter-spacing:0;text-transform:none}

/* ── Combobox — searchable dropdown replacement for <select> ─────────────── */
.combobox{position:relative;display:inline-block;min-width:140px}
.combobox.block{display:block;width:100%}
.combobox-input{width:100%;padding-right:28px;cursor:text;background-image:
  linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(-45deg,transparent 50%,var(--muted) 50%);
  background-position:calc(100% - 14px) center,calc(100% - 10px) center;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.combobox[data-open="true"] .combobox-input{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(43,65,230,.12)}
.combobox-list{position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);max-height:240px;overflow-y:auto;z-index:50;
  padding:4px;display:none}
.combobox[data-open="true"] .combobox-list{display:block}
.combobox-option{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;
  display:flex;align-items:center;gap:8px;color:var(--ink)}
.combobox-option:hover,.combobox-option[data-active="true"]{background:rgba(43,65,230,.08)}
.combobox-option[data-selected="true"]{font-weight:700;color:var(--blue)}
.combobox-option[data-selected="true"]::before{content:"✓";color:var(--blue);width:14px;display:inline-block;text-align:center}
.combobox-option:not([data-selected="true"])::before{content:"";width:14px;display:inline-block}
.combobox-option .work-level-badge{flex:0 0 auto;padding:2px 6px;font-size:9px}
.combobox-option .opt-sub{color:var(--muted);font-size:11px;margin-left:auto}
.combobox-empty{padding:12px;text-align:center;color:var(--muted);font-size:12px}
label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;margin-bottom:4px}
.field{margin-bottom:12px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Metrics grid */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow)}
.metric .label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.metric .value{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:28px;line-height:1.1;margin-top:6px}
.metric .sub{font-size:11px;color:var(--muted);margin-top:4px}

/* Ledger table — accrued vs lost visualisation */
.ledger-table .ledger-h{font-weight:800}
.ledger-table .ledger-h-accrued{color:var(--good)}
.ledger-table .ledger-h-lost{color:var(--bad)}
.ledger-table .ledger-cell-accrued strong{color:var(--good);font-size:14px}
.ledger-table .ledger-cell-lost strong{color:var(--bad);font-size:14px}
.ledger-table .net-good{color:var(--good);font-size:14px}
.ledger-table .net-bad{color:var(--bad);font-size:14px}
.ledger-table .net-flat{color:var(--muted);font-size:14px}

/* Allocation grid */
.alloc-grid{overflow-x:auto}
.alloc-grid table{min-width:800px}
.alloc-grid td.hours{font-family:'Geist Mono',monospace;font-weight:700;text-align:right}
.alloc-grid td.hours.over{color:var(--bad)}

/* Modal */
.modal-scrim{position:fixed;inset:0;background:rgba(14,19,48,.5);display:grid;place-items:center;z-index:100;
  padding:20px;overflow:auto}
.modal-scrim[hidden]{display:none!important}
.modal{background:var(--card);border-radius:var(--radius);padding:0;
  width:min(560px,100%);box-shadow:0 20px 60px rgba(14,19,48,.20);
  display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.modal.wide{width:min(820px,100%)}
.modal.task-workspace-modal{width:min(1440px,96vw);height:min(900px,calc(100vh - 32px));max-height:calc(100vh - 32px)}
.modal.task-workspace-modal .modal-body{display:flex;padding:0;overflow:hidden}
.modal.task-workspace-modal.task-workspace-edit .modal-actions{display:none}
.modal-header{padding:24px 28px 12px;border-bottom:1px solid var(--line)}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:18px}
.modal.task-workspace-modal .modal-header h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-view-modes{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.task-view-modes[hidden]{display:none!important}
.task-view-mode-group{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.task-view-mode-group button,.task-view-modes>button{border:0;border-radius:6px;padding:6px 8px;background:transparent;color:var(--muted);font-family:inherit;font-size:11px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap}
.task-view-mode-group button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(14,19,48,.12)}
.task-view-modes>button{border:1px solid var(--line);background:#fff;color:var(--ink)}
.modal-body{padding:20px 28px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal-actions{padding:16px 28px;border-top:1px solid var(--line);
  display:flex;gap:8px;justify-content:flex-end;background:var(--paper);
  border-radius:0 0 var(--radius) var(--radius)}
.modal h2{margin:0}
.modal .field:last-child{margin-bottom:0}
.task-workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.8fr);flex:1 1 auto;min-width:0;min-height:0}
.task-workspace-main:only-child{grid-column:1/-1}
.task-workspace-main{min-width:0;min-height:0;overflow-y:auto;padding:20px 24px}
.task-workspace-identity{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.task-activity-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:16px;border-left:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--paper))}
.task-activity-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 2px 12px;border-bottom:1px solid var(--line)}
.task-activity-tabs{display:flex;gap:4px;align-items:center}
.task-activity-tabs button{padding:5px 8px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}
.task-activity-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(14,19,48,.1)}
.task-panel-page{min-height:0;flex:1 1 auto;overflow:auto}
.task-activity-panel[data-active-panel="related"] #td-panel-activity{display:none}
.task-activity-panel[data-active-panel="activity"] #td-panel-related{display:none}
.task-activity-panel[data-active-panel="related"] #td-panel-related{display:block}
.task-activity-panel[data-active-panel="history"] #td-panel-activity,
.task-activity-panel[data-active-panel="history"] #td-panel-related{display:none}
.task-panel-page#td-panel-history{display:none;padding:10px 2px}
.task-activity-panel[data-active-panel="history"] #td-panel-history{display:block}
.task-panel-page#td-panel-activity{display:flex;flex-direction:column;min-height:0}
.task-related-panel{display:none;padding:12px 2px;overflow:auto}
.task-related-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.task-related-list{display:flex;flex-direction:column;gap:5px;list-style:none;padding:0;margin:0 0 14px}
.task-related-row{display:grid;grid-template-columns:106px minmax(0,1fr) 26px;gap:6px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:7px;background:#fff}
.task-related-type{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.task-related-target,.task-main-related-row a{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;color:var(--ink);text-decoration:none;font-size:12px}
.task-related-target .work-level-badge,.task-main-related-row a .work-level-badge{flex:0 0 auto;padding:2px 6px;font-size:9px}
.task-related-target .mono,.task-main-related-row a .mono{flex:0 0 auto;white-space:nowrap}
.task-related-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-related-target:hover{text-decoration:underline}
.task-related-remove{border:0;background:transparent;color:var(--muted);border-radius:5px;padding:4px;cursor:pointer}
.task-related-remove:hover{background:rgba(217,38,78,.1);color:var(--bad)}
.task-related-linker{border-top:1px solid var(--line);padding-top:12px}
.task-related-linker label{display:block;margin-bottom:6px;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.task-related-linker-row{display:grid;grid-template-columns:minmax(95px,.7fr) minmax(0,1.3fr) auto;gap:6px;align-items:center}
.task-related-linker select{min-width:0;width:100%;height:34px;padding:0 7px;font-size:12px}
.task-related-linker .sm{height:34px;white-space:nowrap}
.task-related-empty{font-size:12px;color:var(--muted);padding:12px 4px}
.task-main-related{border-top:1px solid var(--line);margin:12px 0;padding:12px 0}
.task-main-related-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}
.task-main-related-heading h3{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;font-weight:700}
.task-main-related-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--paper);color:var(--muted);font-size:10px}
.task-main-related-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.task-main-related-row{display:grid;grid-template-columns:106px minmax(0,1fr);align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff}
.task-main-related-type{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.task-main-related-row a:hover{color:var(--blue);text-decoration:underline}
.task-main-related-empty{font-size:11px;color:var(--muted);padding:3px 0}
.task-inline-link{border:0;padding:3px 5px;background:transparent;color:var(--blue);font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.task-inline-link:hover{text-decoration:underline}
.task-activity-thread{flex:1 1 auto;min-height:120px;overflow-y:auto;margin:0 -4px;padding:8px 4px}
.task-activity-composer{flex:0 0 auto;margin:12px 0 0}
.task-flag-comment-prompt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:9px 11px;border:1px solid #f0a2a7;border-radius:7px;background:#fff2f3;color:#a7222d;font-size:11px;line-height:1.4}
.task-flag-comment-prompt[data-flag-action="clear"]{border-color:#9bd8b1;background:#f0fbf4;color:#147339}
.task-flag-comment-prompt .sm{flex:0 0 auto}
.task-flag-comment-prompt[hidden],.task-flag-comment-error[hidden]{display:none}
.task-flag-comment-error{margin:0 0 7px;color:var(--bad,#c92f3b);font-size:11px}
.task-activity-composer.is-flag-action .task-comment-editor{border-color:#df414b;box-shadow:0 0 0 2px rgba(201,47,59,.12)}
.task-activity-composer.is-flag-action[data-flag-action="clear"] .task-comment-editor{border-color:#2e9e5b;box-shadow:0 0 0 2px rgba(46,158,91,.12)}
.task-activity-thread{padding:10px 6px}
.task-comment-editor{overflow:visible;border:1px solid #d9dce5;border-radius:8px;background:#fff;transition:border-color .12s,box-shadow .12s}
.task-comment-editor:focus-within{border-color:var(--blue);box-shadow:0 0 0 2px rgba(43,65,230,.1)}
.task-comment-editor.is-dragging{outline:2px dashed var(--blue);outline-offset:-5px;background:rgba(43,65,230,.035)}
.task-comment-formatting{display:flex;align-items:center;gap:2px;min-height:40px;padding:5px 8px;border-bottom:1px solid var(--line);background:#fbfbfd;border-radius:8px 8px 0 0}
.task-comment-formatting button{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border:1px solid transparent;border-radius:5px;background:transparent;color:#4d5363;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;line-height:1}
.task-comment-formatting button:hover,.task-comment-formatting button:focus-visible{border-color:var(--line);background:#fff;color:var(--ink);outline:0}
.task-comment-tool-separator{width:1px;height:18px;margin:0 4px;background:var(--line)}
.task-comment-input-drop{position:relative;border-radius:0}
.task-activity-composer .task-comment-input-drop textarea{display:block;width:100%;min-height:92px;margin:0;padding:12px 14px;resize:vertical;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:13px;line-height:1.5}
.task-comment-attachments{margin:0;min-width:0;border-top:1px solid #eef0f4;background:#fff;border-radius:0 0 8px 8px}
.task-comment-attachment-zone{display:flex;align-items:flex-start;gap:8px;min-width:0;flex-wrap:wrap;padding:8px}
.task-comment-attachment-zone.drag{outline:2px dashed var(--blue);outline-offset:-4px;border-radius:6px}
.task-comment-attach-button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;margin:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;font-size:18px;font-weight:500;line-height:1}
.task-comment-attach-button:hover,.task-comment-attach-button:focus-within{color:var(--ink);background:var(--paper)}
.task-comment-attach-button input{display:none}
.task-comment-attachment-zone .att-list{display:flex;align-items:flex-start;gap:8px;min-width:0;flex-wrap:wrap}
.task-comment-attachment-zone .att-list:empty{display:none}
.task-comment-attachment-zone .att-item{position:relative;display:flex;flex:0 0 156px;min-width:0;max-width:156px;min-height:90px;overflow:hidden;padding:0;border:1px solid #e1e4eb;border-radius:7px;background:#fff}
.task-comment-attachment-zone .att-name{display:flex;flex:1 1 auto;flex-direction:column;align-items:stretch;gap:0;min-width:0;padding:0 0 4px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.task-comment-file-preview{display:grid;place-items:center;width:100%;height:56px;overflow:hidden;background:#f4f5f8}
.task-comment-file-preview.is-image{background:#f4f5f8}
.task-comment-file-preview img{display:block;width:100%;height:100%;object-fit:cover}
.task-comment-file-icon{display:grid;place-items:center;width:32px;height:38px;border:1px solid #d9dce5;border-radius:4px;background:white;color:#65708a;font-size:8px;font-weight:800;letter-spacing:.04em}
.task-comment-attachment-copy{display:flex;flex-direction:column;gap:2px;min-width:0;padding:5px 7px 0}
.task-comment-attachment-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:600}
.task-comment-attachment-zone .att-meta{display:block;font-size:9px;line-height:1.2}
.task-comment-attachment-zone .att-rm{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:21px;height:21px;border:1px solid rgba(20,25,40,.08);border-radius:50%;background:rgba(255,255,255,.95);color:#51586a;padding:0;cursor:pointer;font-size:14px;line-height:1}
.task-comment-attachment-zone .att-rm:hover{color:var(--bad);border-color:var(--bad)}
.task-activity-composer .conversation-mention-input{position:relative}
.task-activity-actions{margin-top:7px}
.task-activity-actions .sm{height:30px;padding:5px 10px;font-size:11px}
.task-workspace-activity-collapsed .task-workspace{grid-template-columns:minmax(0,1fr)}
.task-workspace-activity-collapsed .task-activity-panel{display:none}
.modal.task-workspace-view-fullscreen{width:100vw;height:100vh;max-height:100vh;border-radius:0}
.modal-scrim.task-workspace-scrim-fullscreen{padding:0;place-items:stretch}
.modal.task-workspace-view-sidebar{width:min(620px,100vw);height:100vh;max-height:100vh;border-radius:0}
.modal-scrim.task-workspace-scrim-sidebar{display:flex;justify-content:flex-end;align-items:stretch;padding:0}
.modal.task-workspace-view-sidebar .modal-body{display:block;overflow-y:auto}
.modal.task-workspace-view-sidebar .task-workspace{display:flex;flex-direction:column;min-height:100%}
.modal.task-workspace-view-sidebar .task-workspace.has-preview{display:grid}
.modal.task-workspace-view-sidebar .task-workspace-main{overflow:visible;padding:16px}
.modal.task-workspace-view-sidebar .task-activity-panel{min-height:360px;border-left:0;border-top:1px solid var(--line)}
.task-activity-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.task-note-body{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.task-note-body .md-p{margin:0 0 5px}
.task-note-body .md-p:last-child{margin-bottom:0}
.task-edit-form{padding:8px 0;border:0;border-radius:0;background:transparent}
.task-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.task-edit-save-status{min-height:16px;margin:0 0 8px;text-align:right}
.task-edit-save-status[data-state="saved"]{color:var(--good,#16803c)}
.task-edit-save-status[data-state="error"]{color:var(--danger,#b42318)}
.task-workspace .task-edit-form{padding:8px 0}
.task-field-layout{display:grid;gap:14px}
.task-field-title input{min-height:42px;padding:4px 2px;border:1px solid transparent;border-radius:5px;background:transparent;box-shadow:none;font-size:21px;font-weight:680}
.task-field-title input:hover{background:#fbfbfd}
.task-field-title input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 2px rgba(43,65,230,.1)}
.task-field-group{display:grid;gap:8px}
.task-field-heading{display:flex;align-items:center;gap:7px;margin:0;font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.task-edit-properties{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:6px 0 12px;border-bottom:1px solid var(--line);container:task-properties / inline-size}
.task-edit-field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px;min-width:0}
.task-edit-field-pair:has(> .field:only-child){grid-template-columns:minmax(0,1fr)}
.task-edit-property{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:5px;min-width:0;min-height:36px;margin:0}
.task-edit-property-wide{grid-column:1/-1}
.task-edit-property-label{display:flex;align-items:center;gap:6px;min-width:0;color:var(--muted);font-size:11px}
.task-edit-property-label .task-ui-icon{width:13px;height:13px;flex-basis:13px}
.task-edit-parent-link{color:var(--blue);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.task-edit-parent-link:hover:not([aria-disabled="true"]){color:var(--blue);text-decoration:underline}
.task-edit-parent-link[aria-disabled="true"]{cursor:not-allowed;opacity:.72}
.task-edit-property.task-edit-type-property{grid-template-columns:96px minmax(0,1fr)}
.task-edit-property.task-edit-assignee-property{grid-template-columns:96px minmax(0,1fr)}
.task-priority-picker{position:relative;min-width:0}
.task-priority-picker .combobox[data-value="low"]{--priority-color:#64748b;--priority-bg:#f1f5f9;--priority-border:#dbe2eb}
.task-priority-picker .combobox[data-value="normal"]{--priority-color:#5267c9;--priority-bg:#f1f3ff;--priority-border:#dbe0ff}
.task-priority-picker .combobox[data-value="high"]{--priority-color:#b45309;--priority-bg:#fff5e8;--priority-border:#ffdfb1}
.task-priority-picker .combobox[data-value="urgent"]{--priority-color:#b42338;--priority-bg:#fff0f1;--priority-border:#f4c2c8}
.task-priority-picker .task-priority-current-flag{position:absolute;z-index:1;top:50%;left:8px;transform:translateY(-50%);color:var(--priority-color);pointer-events:none}
.task-priority-picker .task-priority-current-flag .task-ui-icon{width:13px;height:13px;flex-basis:13px;stroke-width:1.8}
.task-priority-picker .combobox-input{padding-left:29px!important;border-color:var(--priority-border)!important;background-color:var(--priority-bg)!important;color:var(--priority-color);font-weight:650}
.task-priority-picker .combobox[data-open="true"] .combobox-input{border-color:var(--blue)!important;background-color:#fff!important;box-shadow:0 0 0 2px rgba(43,65,230,.1);color:var(--ink);font-weight:500}
.task-priority-picker .combobox[data-value="low"]+.task-priority-current-flag{color:#64748b}
.task-priority-picker .combobox[data-value="normal"]+.task-priority-current-flag{color:#5267c9}
.task-priority-picker .combobox[data-value="high"]+.task-priority-current-flag{color:#b45309}
.task-priority-picker .combobox[data-value="urgent"]+.task-priority-current-flag{color:#b42338}
.task-priority-marker{display:inline-flex!important;align-items:center;justify-content:center;width:16px;height:16px;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--priority-color)!important;font-size:16px;line-height:1}
.task-priority-marker.priority-low{--priority-color:#64748b}
.task-priority-marker.priority-normal{--priority-color:#5267c9}
.task-priority-marker.priority-high{--priority-color:#c77700}
.task-priority-marker.priority-urgent{--priority-color:#c6283d}
.task-assignee-picker{display:flex;align-items:center;gap:6px;min-width:0}
.task-assignee-picker>.combobox{flex:1 1 auto;min-width:0}
.task-assignee-initials{display:none;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#e8efff;color:#2949be;font-size:9px;font-weight:800;letter-spacing:.02em}
.task-assignee-picker:has(.combobox[data-cb-name="mt-assignee"][data-value]:not([data-value=""])) .task-assignee-initials{display:inline-flex}
.task-edit-property.task-edit-requestor-property{grid-template-columns:96px minmax(0,1fr)}
.task-requestor-picker{display:flex;align-items:center;gap:4px;min-width:0}
.task-edit-property .task-requestor-picker>.combobox{flex:0 1 auto;width:max-content;max-width:100%;min-width:0}
.task-edit-property .task-requestor-picker .combobox-input{width:var(--task-requestor-width,100%);max-width:100%;padding-right:20px}
.task-edit-property .task-requestor-picker>.combobox[data-value=""]{flex:1 1 auto;width:100%}
.task-edit-property .task-requestor-picker>.combobox[data-value=""] .combobox-input{width:100%}
.task-requestor-picker .combobox-list{min-width:260px;max-width:min(380px,calc(100vw - 40px))}
.task-requestor-initials{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#e8efff;color:#2949be;font-size:9px;font-weight:800;letter-spacing:.02em}
.task-requestor-client-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:100px;background:#ffedb5;color:#754d00;font-size:9px;font-weight:800;line-height:1.4;text-transform:uppercase;letter-spacing:.04em}
.task-requestor-initials[hidden],.task-requestor-client-badge[hidden]{display:none!important}
.task-field-layout .field{min-width:0;margin:0}
.task-field-layout .field>label{display:flex;align-items:center;gap:6px;margin:0;color:#747b8c;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.task-ui-icon{display:inline-block;width:14px;height:14px;flex:0 0 14px;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;fill:none;vertical-align:-2px}
.task-field-heading .task-ui-icon{width:13px;height:13px;flex-basis:13px}
.task-field-layout .task-edit-property input,.task-field-layout .task-edit-property select,.task-field-layout .task-edit-property textarea{width:100%;min-width:0;min-height:30px;padding:5px 8px;border:1px solid transparent;border-radius:6px;background:transparent;box-shadow:none;font-size:12px}
.task-edit-property input:hover,.task-edit-property .combobox-input:hover,.task-edit-property .datepick-display:hover{background:#f4f5f8}
.task-edit-property .combobox{display:block;width:100%;min-width:0}
.task-edit-property .combobox-input{height:30px;min-height:30px;padding:4px 26px 4px 8px;border-color:transparent;border-radius:6px;background-color:transparent;box-shadow:none;font-size:12px}
.task-edit-property .combobox[data-open="true"] .combobox-input{border-color:var(--blue);background-color:#fff;box-shadow:0 0 0 2px rgba(43,65,230,.1)}
.task-edit-property .combobox[data-cb-name="mt-type"][data-value="epic"]:not([data-open="true"])::before{content:"EPIC";position:absolute;z-index:1;top:50%;left:8px;transform:translateY(-50%);padding:3px 7px;border-radius:3px;background:#7c3aed;color:#fff;font-size:9px;font-weight:900;letter-spacing:.04em;line-height:1;pointer-events:none}
.task-edit-property .combobox[data-cb-name="mt-type"][data-value="epic"]:not([data-open="true"]) .combobox-input{color:transparent;caret-color:transparent}
.task-edit-property .datepick{min-width:0;gap:0}
.task-edit-property .datepick-row{min-width:0;gap:0}
.task-edit-property .datepick-display{height:30px;min-height:30px;padding:4px 8px;border:1px solid transparent;border-radius:6px;background:transparent;box-shadow:none;text-align:left;font-size:12px;font-weight:500}
.task-edit-property .datepick-clear{width:24px;height:24px;padding:0;border-color:transparent;border-radius:5px;color:var(--muted);opacity:.55}
.task-edit-property .datepick-clear:hover{opacity:1;background:#fff}
.task-edit-property .datepick-quick{display:none}
.task-edit-number{display:flex;align-items:center;gap:5px;max-width:120px}
.task-edit-number input{max-width:86px}
.task-edit-number>span{color:var(--muted);font-size:11px}
.task-property-static{font-size:12px;color:var(--muted)}
.task-due-date-reason{grid-column:1/-1;display:grid;gap:5px;padding:9px 11px;border:1px solid #cbd6ff;border-radius:7px;background:#f6f8ff}
.task-due-date-reason[hidden]{display:none}
.task-due-date-reason label{font-size:11px;font-weight:700;color:var(--ink)}
.task-due-date-reason textarea{width:100%;min-height:46px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:12px;resize:vertical}
.task-signed-off-notice{margin:10px 0;padding:10px 12px;border:1px solid #c9d5ff;border-left:3px solid var(--blue);border-radius:7px;background:#f6f8ff;color:var(--muted);font-size:12px}
.task-signed-off-notice strong{color:var(--ink)}
@container task-properties (max-width: 620px){.task-edit-field-pair{grid-template-columns:minmax(0,1fr)}}
.task-custom-fields{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;padding:0 0 4px}
.task-field-list{display:contents}
.task-custom-field-list{display:contents}
.task-custom-field{min-width:0}
.task-field-list .task-custom-field{grid-column:1/-1;grid-template-columns:minmax(160px,.45fr) minmax(0,1fr) auto;align-items:start}
.task-field-list .task-custom-field-heading label{overflow:visible;color:var(--ink);font-size:12px;font-weight:600;text-overflow:clip;text-transform:none;white-space:nowrap}
.task-field-list textarea[data-task-field-value]{grid-column:2/-1;min-height:56px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);line-height:1.45;resize:vertical}
.task-field-list textarea[data-task-field-value]:focus{border-color:var(--blue);outline:2px solid rgba(43,65,230,.12)}
.task-field-list textarea[data-task-field-value]::placeholder{color:var(--muted)}
.task-custom-field-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.task-custom-field-heading label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-custom-field-heading button,.task-custom-field-search-row button{width:24px;height:24px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:16px;line-height:1}
.task-custom-field-heading button:hover,.task-custom-field-search-row button:hover{background:#f0f2f7;color:var(--ink)}
.task-add-fields{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px dashed var(--line);border-radius:6px;background:transparent;color:var(--muted);font-size:12px}
.task-add-fields:hover{border-color:#aeb9d8;background:#f7f8fc;color:var(--blue)}
.task-custom-field-picker{position:absolute;z-index:45;top:calc(100% + 4px);left:0;width:min(340px,calc(100vw - 48px));max-height:min(430px,70vh);overflow:auto;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 12px 32px rgba(22,31,62,.18)}
.task-custom-field-picker[hidden],.task-custom-field-create[hidden],.task-custom-field-existing[hidden]{display:none}
.task-custom-field-search-row{display:flex;align-items:center;gap:6px}
.task-custom-field-search-row input{flex:1;min-width:0;height:32px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:12px}
.task-custom-field-tabs{display:flex;gap:12px;margin:8px 0;border-bottom:1px solid var(--line)}
.task-custom-field-tabs button{padding:7px 2px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:12px}
.task-custom-field-tabs button[aria-selected="true"]{border-bottom-color:var(--blue);color:var(--ink);font-weight:700}
.task-custom-field-create{display:grid;gap:8px;padding:4px 0 8px}
.task-custom-field-create>label{display:grid;gap:4px;color:var(--muted);font-size:11px;font-weight:700}
.task-custom-field-create input,.task-custom-field-create select{width:100%;min-height:32px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:12px}
.task-custom-field-create small{font-weight:400}
.task-custom-field-create .primary{justify-self:start}
.task-custom-field-option{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;padding:8px 6px;border:0;border-radius:6px;background:transparent;text-align:left;color:var(--ink);font-size:12px}
.task-custom-field-option[hidden]{display:none!important}
.task-custom-field-option:hover:not(:disabled){background:#f3f5fa}
.task-custom-field-option:disabled{color:var(--muted);opacity:.7}
.task-field-catalog-group{padding:5px 0;border-top:1px solid var(--line)}
.task-field-catalog-group h4{margin:3px 4px 4px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.task-custom-field-option-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-custom-field-option small,.task-custom-field-empty{color:var(--muted);font-size:11px}
.task-custom-field-empty{margin:8px 4px}
.task-custom-field-error{margin:6px 0 0;color:var(--bad);font-size:11px}
.task-custom-label-options{display:flex;flex-wrap:wrap;gap:5px}
.task-custom-label-options label{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid var(--line);border-radius:12px;background:#f8f9fb;color:var(--muted);font-size:11px}
.task-custom-label-options input,.task-custom-checkbox input{width:auto!important;min-height:auto!important;accent-color:var(--blue)}
.task-custom-checkbox{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.task-field-layout .field textarea{min-height:82px;line-height:1.45}
.task-field-layout .task-description-field textarea{min-height:108px}
.task-field-hint{margin-top:0;font-size:10px;line-height:1.3}
.task-field-layout .story-estimate-hint{display:none}
.task-optional-fields{border-top:1px solid var(--line);padding-top:9px}
.task-optional-fields summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:650}
.task-field-grid-extra{padding-top:10px}
.task-related-help{margin-top:-7px}
.task-property-summary{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:0 0 12px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.task-property{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:120px;padding:3px 14px;border-right:1px solid var(--line)}
.task-property:first-child{padding-left:0}
.task-property:last-child{border-right:0}
.task-property>span{font-size:9px;color:var(--muted);font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.task-property>strong{font-size:11px;font-weight:650;color:var(--ink)}
.task-property-summary .task-property button{padding:0}
.task-status-summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.task-priority-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--priority-border);border-radius:999px;background:var(--priority-bg);color:var(--priority-color);font-size:10px;font-weight:800;line-height:1.2;white-space:nowrap}
.task-priority-badge .task-ui-icon{width:12px;height:12px;flex-basis:12px;stroke-width:1.8}
.task-priority-badge.priority-low{--priority-color:#64748b;--priority-bg:#f1f5f9;--priority-border:#dbe2eb}
.task-priority-badge.priority-normal{--priority-color:#5267c9;--priority-bg:#f1f3ff;--priority-border:#dbe0ff}
.task-priority-badge.priority-high{--priority-color:#b45309;--priority-bg:#fff5e8;--priority-border:#ffdfb1}
.task-priority-badge.priority-urgent{--priority-color:#b42338;--priority-bg:#fff0f1;--priority-border:#f4c2c8}
.task-client-update{margin:0 0 14px;padding:11px 12px;border:1px solid #dfe5f3;border-radius:9px;background:linear-gradient(110deg,#f8faff,#fff)}
.task-client-update-fields{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(160px,1fr) auto;gap:10px;align-items:end}
.task-client-update-fields label{display:grid;gap:4px;color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.045em}
.task-client-update-fields select,.task-client-update-fields input{width:100%;height:32px;padding:5px 9px;border:1px solid #dce1ed;border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:12px;text-transform:none;letter-spacing:normal}
.task-client-update-fields button{height:32px;white-space:nowrap}
.task-client-update-reason{width:100%;height:30px;margin-top:8px;padding:5px 9px;border:1px solid #e2e6ef;border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:11px}
.task-client-update-reason:focus,.task-client-update-fields select:focus,.task-client-update-fields input:focus{outline:2px solid #dbe4ff;border-color:#899cf6}
.task-state-chip{display:inline-flex;align-items:center;gap:5px}
.task-state-chip.is-blocked{background:#fff0f1;color:#a92036;border-color:#f3b5bf}
.task-state-icon-warn{width:13px;height:13px;flex-basis:13px}
.task-flag-toggle{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:4px;border:1px solid #d8dced;border-radius:7px;background:#fff;color:#7b83a2;cursor:pointer;font-size:16px;line-height:1}
.task-flag-toggle:hover{border-color:#df414b;color:#c92f3b}
.task-flag-toggle.is-flagged{border-color:#df414b;background:#fff0f1;color:#c92f3b}
.task-workspace-identity:has(.task-flag-toggle.is-flagged) .task-work-key{border-color:#df414b!important;background:#fff0f1!important;color:#c92f3b!important}
.work-kanban-context-menu{position:fixed;z-index:10020;min-width:190px;padding:5px;border:1px solid #d8dced;border-radius:9px;background:#fff;box-shadow:0 8px 26px #141b3826}
.work-kanban-context-menu button{display:block;width:100%;border:0;border-radius:6px;background:transparent;padding:8px 10px;text-align:left;color:#17203f;cursor:pointer}
.work-kanban-context-menu button:hover,.work-kanban-context-menu button:focus{background:#f1f3fb;outline:none}
.task-note-flag-raised,.task-audit-flag-raised{border-color:#e34851!important}
.task-note-flag-raised .task-note-kind,.task-audit-flag-raised .task-note-kind{color:#c72f3b;font-weight:700}
.task-note-flag-cleared,.task-audit-flag-cleared{border-color:#36ae63!important}
.task-note-flag-cleared .task-note-kind,.task-audit-flag-cleared .task-note-kind{color:#22894a;font-weight:700}
.task-status-control{display:inline-flex;align-items:center;gap:5px;margin-right:4px}
.task-status-control label{font-size:9px;color:var(--muted);font-weight:750;text-transform:uppercase}
.task-status-control select{height:30px;min-width:110px;padding:4px 24px 4px 8px;font-size:11px}
.task-status-control .sm{height:30px;padding:4px 8px;font-size:10px}
.task-workspace .task-attach-section{padding-top:12px;border-top:1px solid var(--line)}
.task-workspace.has-preview{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.35fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"activity preview";width:100%;height:100%;min-height:0;overflow:hidden}
.task-workspace.has-preview .task-workspace-main{display:none}
.task-workspace.has-preview .task-activity-panel{grid-area:activity;min-height:0;border:0;border-right:1px solid var(--line)}
.task-workspace.has-preview .modal-preview{grid-area:preview;display:flex;min-width:0;min-height:0;overflow:hidden;flex-direction:column;border:0;background:#f7f8fa}
.task-workspace.has-preview .modal-preview-body{display:flex;align-items:center;justify-content:center;overflow:auto;padding:16px}
.task-workspace.has-preview .modal-preview-body img{width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain}
.task-workspace.has-preview .modal-preview-body iframe{width:100%;height:100%;min-height:0;flex:1 1 auto;border:0;background:#fff}
.modal.task-workspace-modal.task-preview-open:not(.task-workspace-view-fullscreen):not(.task-workspace-view-sidebar){width:min(1600px,98vw);height:min(940px,96vh);max-height:96vh}
.modal.task-workspace-view-sidebar.task-preview-open{width:min(680px,100vw);height:100vh;max-height:100vh}
.modal.task-workspace-view-sidebar .task-workspace.has-preview{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(170px,.75fr) minmax(240px,1fr);grid-template-areas:"activity" "preview"}
.modal.task-workspace-view-sidebar .task-workspace.has-preview .task-activity-panel{border-right:0;border-bottom:1px solid var(--line);padding:10px}
.modal.task-workspace-view-fullscreen.task-preview-open{width:100vw;height:100vh;max-height:100vh}

.task-epic-stories{margin:14px 0;padding:12px 0;border-top:1px solid var(--line)}
.task-epic-stories-heading{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--muted);font-size:11px}
.task-epic-stories-heading h3{display:flex;align-items:center;gap:6px;margin:0;color:var(--ink);font-size:13px;font-weight:750}
.task-epic-stories-heading .task-child-create-button{margin-left:auto}
.task-child-heading{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.task-child-heading h3{display:flex;align-items:center;gap:6px;margin:0;color:var(--ink);font-size:13px;font-weight:750}
.task-child-create-button{margin-left:auto;white-space:nowrap}
.task-child-inline-create{display:flex;align-items:center;gap:7px;margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fafbff}
.task-child-inline-create[hidden]{display:none!important}
.task-child-inline-create input{flex:1 1 220px;min-width:120px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;color:var(--ink);font:inherit}
.task-child-inline-create select{min-width:110px;padding:8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit}
.task-child-drag-handle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:18px;color:#8791a5;cursor:grab;font-size:17px;line-height:1;user-select:none}
.task-child-drag-handle:active{cursor:grabbing}
.task-child-empty{padding:12px;border:1px dashed var(--line);border-radius:7px;color:var(--muted);font-size:11px;text-align:center}
.task-epic-stories-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--paper);color:var(--muted);font-size:10px}
.task-epic-stories-heading>span:last-child{margin-left:auto}
.task-epic-stories-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.task-epic-stories-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:11px}
.task-epic-stories-table th:first-child,.task-epic-stories-table td:first-child{width:58%}
.task-epic-stories-table th:nth-child(2),.task-epic-stories-table td:nth-child(2){width:27%}
.task-epic-stories-table th:nth-child(3),.task-epic-stories-table td:nth-child(3){width:15%}
.task-epic-stories-table th{padding:7px 9px;border-bottom:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:750;text-align:left;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.task-epic-stories-table th .task-ui-icon{margin-right:4px}
.task-epic-stories-table td{padding:8px 9px;border-bottom:1px solid #eef0f4;vertical-align:middle}
.task-epic-stories-table tr:last-child td{border-bottom:0}
.task-epic-story-name{display:flex;align-items:center;gap:6px;min-width:0}
.task-epic-story-name a{display:flex;flex:1 1 auto;align-items:center;gap:7px;min-width:0;overflow:hidden;color:var(--ink);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.task-child-item-type,.task-child-item-code{flex:0 0 auto;white-space:nowrap}
.task-child-item-type .work-level-badge{display:inline-flex;flex:0 0 auto;white-space:nowrap}
.task-child-item-code{font-size:10px}
.task-epic-story-name a:hover{color:var(--blue);text-decoration:underline}
.task-child-item-title{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-child-state{display:inline-flex;align-items:center;gap:4px;margin-top:3px;color:var(--muted);font-size:9px}
.task-child-state .task-ui-icon{width:12px;height:12px;flex-basis:12px}
.task-child-state.is-blocked{color:#b42338;font-weight:700}
.task-child-state.is-complete{color:var(--good)}
.task-epic-story-assignee,.task-epic-story-priority{display:inline-flex;align-items:center;gap:5px;color:var(--muted);white-space:nowrap}
.task-epic-story-assignee .task-ui-icon,.task-epic-story-priority .task-ui-icon{width:13px;height:13px;flex-basis:13px}
.task-epic-stories-empty{padding:12px;border:1px dashed var(--line);border-radius:7px;color:var(--muted);font-size:11px;text-align:center}
.task-child-list ul{margin:0;padding-left:20px;font-size:12px}
.task-child-list li{padding:4px 0}
.task-related-type{display:flex;align-items:center;gap:5px}
.task-related-type .task-ui-icon{width:13px;height:13px;flex-basis:13px}
.task-related-type .task-link-icon-blocked{color:#b42338}
.task-related-type .task-link-icon-warn{color:#c77700}
.task-main-related-type{display:flex;align-items:center;gap:5px}
.task-main-related-type .task-ui-icon{width:13px;height:13px;flex-basis:13px}
.task-related-type,.task-main-related-type{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;padding:3px 6px;border:1px solid transparent;border-radius:999px;font-size:9px;line-height:1.1;white-space:nowrap}
.task-related-type.is-blocked-by,.task-main-related-type.is-blocked-by{background:#fff0f0;border-color:#ffd4d4;color:#b42338}
.task-related-type.is-blocks,.task-main-related-type.is-blocks{background:#fff6e8;border-color:#ffe0b2;color:#9b5b00}
.task-related-type.is-related,.task-main-related-type.is-related{background:#eef3ff;border-color:#dbe5ff;color:#3852a5}
.task-epic-stories-table th .work-level-badge{padding:2px 6px;font-size:9px}
@media(max-width:900px){
  .task-workspace{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)}
  .task-workspace-main{padding:16px}
  .task-activity-panel{padding:12px}
  .task-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .task-edit-property{grid-template-columns:84px minmax(0,1fr) auto}
}
@media(max-width:700px){
  .modal.task-workspace-modal{width:calc(100vw - 12px);height:calc(100vh - 12px);max-height:calc(100vh - 12px)}
  .modal.task-workspace-modal .modal-body{display:block;overflow-y:auto}
  .task-workspace{display:flex;flex-direction:column;min-height:100%}
  .task-workspace-main{overflow:visible;padding:14px}
  .task-child-inline-create{flex-wrap:wrap}
  .task-child-inline-create input{flex-basis:100%}
  .task-activity-panel{min-height:360px;max-height:55vh;border-left:0;border-top:1px solid var(--line);padding:14px}
  .task-field-grid{grid-template-columns:minmax(0,1fr)}
  .task-edit-properties{grid-template-columns:minmax(0,1fr);gap:8px 0}
  .task-edit-field-pair{grid-template-columns:minmax(0,1fr)}
  .task-custom-fields{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .task-edit-property{grid-template-columns:96px minmax(0,1fr) auto}
  .task-property-summary{align-items:flex-start}
  .task-client-update-fields{grid-template-columns:1fr 1fr}
  .task-client-update-fields button{grid-column:1/-1}
  .task-property{min-width:50%;border-right:0;padding:5px 8px}
  .modal.task-workspace-modal .modal-header{padding:16px 18px 10px}
  .modal.task-workspace-modal .modal-actions{padding:12px 18px}
  .modal.task-workspace-modal .modal-header{align-items:flex-start;flex-direction:column;padding:12px 14px 10px}
  .task-view-modes{width:100%;justify-content:space-between;gap:4px}
  .task-view-mode-group{flex:1;justify-content:space-between}
  .task-view-mode-group button{padding:6px 5px;font-size:10px}
  .task-related-linker-row{grid-template-columns:1fr 1.4fr}
  .task-related-linker-row .sm{grid-column:1/-1}
}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:12px 18px;
  border-radius:8px;box-shadow:var(--shadow);font-size:13px;font-weight:600;z-index:200;
  transform:translateY(0);transition:transform .2s,opacity .2s;opacity:1}
.toast[hidden]{opacity:0;transform:translateY(20px);pointer-events:none}
.toast.good{background:var(--good)}
.toast.bad{background:var(--bad)}

/* Section header */
.section-head{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.section-head p{color:var(--muted);margin:0}

.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:8px}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ======================================================================
   EMPTY STATE — one shared treatment app-wide (ui-guide .empty; the client
   Inbox's former .pempty promoted). Rendered by emptyStateHtml() in admin.js:

     .empty[.compact]
       svg.ico      optional context icon (Phosphor, 40px, --text-3)
       h4           short title, display font
       p            one plain-language sentence (caption, --text-2)
       .btn         optional single next step (.btn-secondary / .btn-primary —
                    the button rules are shared with the portal, further down)

   .compact      inside a band / kanban column / table cell: tighter, 32px icon
   td.empty-cell hosts one inside a register table row (cell padding + hover
                 tint cleared so the block reads as a panel, not a row)
   NB .focus-slot.empty (focus-planner day cells) is an older, unrelated use of
   the word and overrides everything it needs in its own rule.
   ====================================================================== */
.empty{text-align:center;padding:var(--space-8) var(--space-6);color:var(--text-2)}
.empty[hidden]{display:none}
.empty > *{max-width:380px;margin-left:auto;margin-right:auto}
.empty .ico{display:block;width:40px;height:40px;color:var(--text-3);margin:0 auto var(--space-3);fill:currentColor;stroke:none}
.empty h4,.empty h3{font-family:var(--font-display);font-size:var(--text-h3);font-weight:700;letter-spacing:-.01em;
  color:var(--text-1);margin:0 auto var(--space-2)}
.empty p{font-size:var(--text-caption);color:var(--text-2);margin:0 auto var(--space-4)}
.empty p:last-child{margin-bottom:0}
.empty p a{color:var(--accent)}
.empty.compact{padding:var(--space-6) var(--space-4)}
.empty.compact .ico{width:32px;height:32px;margin-bottom:var(--space-2)}
.empty.compact h4{font-size:var(--fs-lg)}
.empty.compact p{margin-bottom:var(--space-3)}
td.empty-cell,.card table td.empty-cell{padding:0}
tr:hover td.empty-cell,.card table tr:hover td.empty-cell{background:transparent}

/* AI prompt strip inside project detail */
.ai-strip{background:linear-gradient(120deg, rgba(43,65,230,.06), rgba(255,90,160,.06));
  border:1px solid rgba(43,65,230,.15);border-radius:var(--radius);padding:14px 18px;
  margin-bottom:16px;box-shadow:none}
.ai-strip-body{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ai-strip-icon{width:40px;height:40px;border-radius:10px;background:var(--blue);color:#fff;
  display:grid;place-items:center;flex:0 0 40px}
.ai-strip-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.ai-strip-copy{flex:1 1 260px;min-width:0}
.ai-strip-title{font-weight:700;font-size:14px;margin-bottom:2px}
.ai-strip-sub{line-height:1.4}
.ai-strip-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Project management view */
.pm-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  margin-bottom:20px;flex-wrap:wrap}
.pm-header .crumb-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  font-weight:600;color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
.pm-header .crumb-link:hover{color:var(--blue)}
.pm-metrics{display:flex;gap:14px;flex-wrap:wrap}
.pm-metrics > div{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;display:flex;flex-direction:column;box-shadow:var(--shadow);min-width:110px}
.pm-metric-value{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;line-height:1}
.pm-metric-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;margin-top:4px}
/* Hero metric — completed hours + progress bar */
.pm-metric-hero{min-width:180px;background:linear-gradient(120deg, rgba(43,65,230,.10), rgba(255,90,160,.08))!important;
  border-color:rgba(43,65,230,.25)!important}
.pm-metric-hero .pm-metric-value{color:var(--blue);font-size:28px}
.pm-progress{margin-top:8px;height:6px;background:rgba(43,65,230,.10);border-radius:100px;overflow:hidden}
.pm-progress-bar{height:100%;background:linear-gradient(90deg,var(--blue),var(--pink));border-radius:100px;
  transition:width .3s ease}

/* Client project header: three calm, flat cards — no shadow, no gradient, solid
   accent bar. Overrides the staff card treatment above (incl. the !important
   hero gradient). Values sentence-case + display font per the ui-guide. */
.pm-metrics-client > div{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:none;min-width:140px}
.pm-metrics-client .pm-metric-hero{min-width:200px;background:var(--surface)!important;border-color:var(--border)!important}
.pm-metrics-client .pm-metric-value{font-family:var(--font-display);font-weight:700;font-size:24px;
  color:var(--text-1);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pm-metrics-client .pm-metric-value.accent{color:var(--accent)}
.pm-metrics-client .pm-metric-value.quiet{color:var(--text-3)}
.pm-metrics-client .pm-metric-label{font-family:var(--font-body);font-size:12px;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--text-3);margin-top:4px}
.pm-metrics-client .pm-progress{margin-top:8px;height:3px;background:#F2F4F7}
.pm-metrics-client .pm-progress-bar{background:var(--accent)}
.pm-metrics-client .pm-progress-bar.complete{background:var(--good-ink)}
.project-link{color:inherit;text-decoration:none;border-bottom:1px dashed transparent}
.project-link:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* WBS tree */
.wbs-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
  flex-wrap:wrap}
.wbs-fold-controls{display:flex;gap:6px}
.wbs-fold-controls button.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:5px 12px;font-size:11px;font-weight:600}
.wbs-fold-controls button.ghost:hover{color:var(--ink);border-color:var(--ink)}
/* WBS assignee filter picker */
.wbs-assignee-wrap{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;
  text-transform:none;font-size:inherit;letter-spacing:normal;color:var(--muted)}
.wbs-assignee-wrap .wbs-assignee-ic{display:inline-flex;width:15px;height:15px;color:var(--muted)}
.wbs-assignee-wrap .wbs-assignee-ic svg{width:15px;height:15px}
select.wbs-assignee{border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);
  padding:5px 26px 5px 10px;font-size:12px;font-weight:600;cursor:pointer;max-width:220px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
select.wbs-assignee:focus{outline:none;border-color:var(--blue)}
.wbs-tree{display:flex;flex-direction:column;gap:4px}
.wbs-row{display:grid;
  /* chevron 24 (ours: no 2px overflow) · code minmax(88,max-content) (Andy: fits the code, no wrap) · assignee + progress widened */
  grid-template-columns:18px 24px 24px minmax(88px,max-content) minmax(140px,1fr) minmax(100px,160px) minmax(60px,76px) auto;
  gap:8px;align-items:center;padding:6px 10px;border-radius:8px;
  margin-left:calc(var(--depth,0) * 20px);
  border-left:4px solid transparent;transition:background .1s;
  background:#fff;border:1px solid var(--line);border-left-width:4px;min-width:0}
.wbs-tree{overflow-x:visible}
.wbs-tree{overflow-x:auto}
.wbs-row:hover{background:var(--paper)}
.wbs-row[data-depth="0"]{background:linear-gradient(90deg,rgba(255,90,160,.05),transparent 30%);
  border-left-color:var(--pink)!important;border-left-width:5px}
.wbs-row[data-depth="0"] .wbs-title strong{font-size:15px}
.wbs-row[data-depth="1"] .wbs-title strong{font-size:14px}
/* Whole-row status treatments — makes done/progress/todo unmissable */
.wbs-row.status-done{border-left-color:var(--good);background:linear-gradient(90deg,rgba(10,165,118,.06),transparent 40%)}
.wbs-row.status-progress{border-left-color:var(--blue);background:linear-gradient(90deg,rgba(43,65,230,.06),transparent 40%)}
.wbs-row.status-todo{border-left-color:var(--line)}
.wbs-row.status-rework{border-left-color:var(--warn);background:linear-gradient(90deg,rgba(229,105,31,.06),transparent 40%)}
/* Health strip along the row bottom — black/green/yellow/orange/red */
.wbs-row{border-bottom-width:2px;border-bottom-style:solid}
.wbs-row.tone-black{border-bottom-color:var(--ink)}
.wbs-row.tone-green{border-bottom-color:var(--good)}
.wbs-row.tone-yellow{border-bottom-color:var(--yellow)}
.wbs-row.tone-orange{border-bottom-color:var(--warn)}
.wbs-row.tone-red{border-bottom-color:var(--bad)}
.wbs-cell{min-width:0}
.wbs-cell.wbs-title{overflow:hidden;text-overflow:ellipsis}
.wbs-cell.wbs-code{white-space:nowrap}   /* keep the work-item code on one line */
.wbs-status{display:grid;place-items:center;overflow:visible}
.wbs-progress{overflow:visible}
.wbs-chevron{width:22px;height:22px;border:0;background:transparent;color:var(--muted);cursor:pointer;
  padding:0;font-size:14px;line-height:1;display:grid;place-items:center;border-radius:4px;
  transition:transform .12s ease,color .1s}
.wbs-chevron:hover{color:var(--ink);background:var(--paper)}
.wbs-chevron.open{transform:rotate(90deg);color:var(--blue)}
.wbs-chevron.placeholder{cursor:default;visibility:hidden}
.wbs-collapsed-count{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--paper);
  padding:2px 8px;border-radius:100px;border:1px solid var(--line)}
.wbs-date-chip{display:inline-block;margin-right:8px;font-size:10.5px;font-weight:600;
  color:var(--muted);background:var(--paper);padding:2px 8px;border-radius:100px;
  border:1px solid var(--line);vertical-align:middle;white-space:nowrap;cursor:pointer}
.wbs-date-chip:hover{color:var(--ink);border-color:var(--blue)}
.wbs-date-chip.projected{border-style:dashed;font-style:italic;opacity:.85}
.wbs-date-chip.projected:hover{opacity:1;background:rgba(43,65,230,.06)}
.wbs-date-chip.placeholder{border-style:dashed;opacity:.55;font-weight:500}
.wbs-date-chip.placeholder:hover{opacity:1;background:rgba(43,65,230,.06)}
.wbs-date-warning{display:inline-block;margin-left:6px;color:var(--bad);font-size:10px;font-weight:800;white-space:nowrap}
.wbs-drag-handle{display:grid;place-items:center;color:var(--muted);font-size:11px;line-height:1;cursor:grab;user-select:none;min-height:28px}
.wbs-drag-handle:hover{color:var(--blue);background:rgba(43,65,230,.08);border-radius:5px}
.wbs-drag-handle:active{cursor:grabbing}
.wbs-date-chip{font-size:11px;margin-right:6px;padding:3px 7px}
.wbs-inline-date{font:inherit;font-size:11px;border:1px solid var(--blue);border-radius:6px;padding:2px 5px;width:128px;background:#fff;color:var(--ink)}
.wbs-row[draggable="true"]{cursor:grab;user-select:none;-webkit-user-select:none}
.wbs-row.wbs-dragging{opacity:.45}
.wbs-row.wbs-drop-target{outline:2px dashed var(--blue);outline-offset:1px}
.wbs-row.wbs-drop-target:not(.wbs-drop-after){box-shadow:inset 0 3px 0 var(--blue)}
.wbs-row.wbs-drop-target.wbs-drop-after{box-shadow:inset 0 -3px 0 var(--blue)}
.wbs-sort-wrap{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.wbs-sort{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 7px}
.wbs-flag{display:inline-block;margin-left:6px}
.wbs-status-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:2px solid var(--line);color:var(--muted)}
.wbs-status-dot svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.status-done .wbs-status-dot{background:var(--good);border-color:var(--good);color:#fff}
.status-progress .wbs-status-dot{background:var(--blue);border-color:var(--blue);color:#fff}
.status-rework .wbs-status-dot{background:var(--warn);border-color:var(--warn);color:#fff}
.wbs-code{font-weight:700;color:var(--muted);font-size:12px;white-space:nowrap}
.wbs-title strong{font-size:14px}
.wbs-title .work-level-badge{margin-right:7px;padding:2px 6px;font-size:9px;vertical-align:1px}
.wbs-done-title{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(10,165,118,.5);text-decoration-thickness:2px}
.wbs-desc{margin-top:2px;line-height:1.4}
.wbs-assignee{font-size:12px;min-width:0;display:flex;justify-content:center;overflow:hidden}
.wbs-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;font-size:11px;font-weight:700;letter-spacing:-.02em;flex:0 0 22px;line-height:1;
  overflow:hidden;background-size:cover;background-position:center}
/* Compact people-icon pill — one glyph per row */
.wbs-owners-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:100px;
  border:1px solid transparent;font-size:11px;font-weight:700;line-height:1;cursor:default;max-width:100%;min-width:0}
.wbs-owners-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wbs-owners-pill svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 14px}
.wbs-owners-pill.full{background:rgba(43,65,230,.08);color:var(--blue);border-color:rgba(43,65,230,.2)}
.wbs-owners-pill.partial{background:#fff4c9;color:#8f4200;border-color:#e6b040}
.wbs-owners-pill.nobody{background:#fff4c9;color:#8f4200;border-color:#e6b040;border-style:dashed}
.wbs-owners-count{font-family:'Geist Mono',monospace}
.wbs-owners-warn{color:#a01235;font-weight:800}
.wbs-progress{min-width:0;display:flex;justify-content:center}   /* min-width:0 (both) kills the old 140px overflow/scrollbar; centered (Andy) */
.wbs-actions{justify-self:end}
/* Progress pill — bigger + louder than a normal chip */
.wbs-pill{display:inline-block;padding:3px 10px;border-radius:100px;font-size:10.5px;
  font-family:'Geist Mono',monospace;white-space:nowrap;line-height:1.5;font-weight:600;max-width:100%}
.wbs-pill.done{background:var(--good);color:#fff}
.wbs-pill.over{background:var(--bad);color:#fff}
.wbs-pill.progress{background:rgba(43,65,230,.14);color:var(--blue);border:1px solid rgba(43,65,230,.3)}
.wbs-pill.todo{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.wbs-pill.rework{background:rgba(229,105,31,.14);color:var(--warn);border:1px solid rgba(229,105,31,.3)}
@media (max-width:960px){
  .wbs-row{grid-template-columns:18px 24px 24px minmax(88px,max-content) minmax(140px,1fr) minmax(90px,120px) minmax(60px,76px) auto;gap:8px}
}
@media (max-width:720px){
  .wbs-row{grid-template-columns:18px 24px 24px minmax(88px,max-content) minmax(140px,1fr) minmax(90px,120px) auto;gap:8px}
  .wbs-cell.wbs-progress{display:none}
}
@media (max-width:520px){
  .wbs-row{grid-template-columns:18px 22px 20px minmax(0,1fr) minmax(84px,110px) auto;gap:6px;padding:6px 10px}
  .wbs-cell.wbs-code,.wbs-cell.wbs-progress{display:none}
}

/* Filter tabs — used on Clients page, reusable elsewhere */
.filter-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:2px}
.filter-tabs .tab{background:transparent;border:0;border-bottom:2px solid transparent;
  padding:8px 12px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;
  border-radius:0;display:inline-flex;align-items:center;gap:6px;transition:color .1s}
.filter-tabs .tab:hover{color:var(--ink);transform:none}
.filter-tabs .tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.filter-tabs .tab-count{background:var(--paper);border:1px solid var(--line);color:var(--muted);
  border-radius:100px;padding:0 8px;font-size:10px;font-weight:700;line-height:16px;min-width:22px;text-align:center}
.filter-tabs .tab.on .tab-count{background:rgba(43,65,230,.10);border-color:transparent;color:var(--blue)}

/* Projects register — compact scanning controls, sortable fields and a
   three-part workload bar. The table keeps its native horizontal scroll on
   small screens rather than hiding delivery information. */
.project-status-tabs{display:flex;width:100%;max-width:100%;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.project-status-tabs::-webkit-scrollbar{display:none}
.project-register-tools{display:flex;gap:10px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.project-search-wrap{position:relative;min-width:220px;flex:1 1 280px}
.project-register-tools input:not([type=checkbox]){width:100%;min-width:0;padding-right:38px}
.project-search-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:21px;line-height:1;display:grid;place-items:center}
.project-search-clear:hover{background:var(--paper);color:var(--ink);transform:translateY(-50%)}
.project-search-clear[hidden]{display:none}
.project-register-tools select{min-width:180px;flex:0 1 240px}
.project-inactive-filter{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}
.project-inactive-filter input{width:15px;height:15px;margin:0;accent-color:var(--blue)}
.project-visibility-filter{position:sticky;right:0;display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:4px 6px 4px 11px;border:1px solid #d9ddf5;border-radius:9px;background:#f3f4ff;box-shadow:-8px 0 10px rgba(255,255,255,.9);color:#626b9b;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex:0 0 auto}
.project-visibility-filter select{min-width:136px;flex:0 0 auto;padding:7px 28px 7px 10px;border-color:#ccd2ff;background:#fff;color:#353fc2;font-size:12px;font-weight:700;text-transform:none;letter-spacing:normal}
.project-active-toggle{display:inline-flex;align-items:center;gap:7px;padding:3px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.project-active-toggle:hover{transform:none;color:var(--ink)}
.project-active-toggle span{position:relative;width:32px;height:18px;flex:0 0 32px;border-radius:99px;background:#aeb4c3;transition:background .15s}
.project-active-toggle span:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.22);transition:transform .15s}
.project-active-toggle.on span{background:var(--good)}
.project-active-toggle.on span:after{transform:translateX(14px)}
.project-active-toggle em{font-style:normal}
.project-sort{border:0;background:transparent;padding:0;color:inherit;font:inherit;font-weight:inherit;cursor:pointer;text-transform:inherit;letter-spacing:inherit}
.project-sort:hover{color:var(--blue);transform:none}
.project-progress{position:relative;min-width:118px;font-size:10px;color:var(--muted);font-weight:700;outline:none}
.project-progress-bar{display:flex;height:7px;overflow:hidden;border-radius:99px;background:var(--line);margin-bottom:4px}
.project-progress-bar i{display:block;height:100%}
.project-progress-bar .done{background:var(--good)}
.project-progress-bar .doing{background:var(--blue)}
.project-progress-bar .todo{background:#cdd1df}
.project-progress-tooltip{display:none;position:absolute;z-index:80;left:0;top:calc(100% + 9px);width:292px;padding:13px 16px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(20,24,50,.16);
  font-size:13px;font-weight:400;white-space:normal}
.project-progress:hover .project-progress-tooltip,.project-progress:focus .project-progress-tooltip{display:block}
.project-progress-tooltip-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 0;line-height:1.35}
.project-progress-tooltip-row strong{font-size:13px;font-weight:700;white-space:nowrap}
.project-progress-legend{display:flex;align-items:center;gap:8px;color:var(--muted)}
.project-progress-legend i{width:12px;height:12px;flex:0 0 12px;border-radius:2px}
.project-progress-legend i.done{background:var(--good)}
.project-progress-legend i.doing{background:var(--blue)}
.project-progress-legend i.todo{background:#cdd1df}
.project-progress-tooltip-row.total{margin-top:5px;padding-top:9px;border-top:1px solid var(--line);color:var(--muted)}
.project-date-inline{min-width:126px;padding:6px 8px;font:inherit;color:var(--ink);background:#fff}
.project-admin-summary{min-height:40px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fafbff;color:var(--ink)}
.project-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}
.project-header-actions #add-project{flex:0 0 auto}
.project-view-switch{display:flex;justify-content:flex-end;gap:5px;margin:0;padding:4px;border:1px solid var(--line);border-radius:10px;background:#f7f8fc;width:max-content;max-width:100%}
.project-view-switch button{border:0;border-radius:7px;background:transparent;padding:8px 12px;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.project-view-switch button:hover{transform:none;color:var(--ink);background:#fff}
.project-view-switch button.on{background:var(--blue);color:#fff;box-shadow:0 2px 5px rgba(43,65,230,.18)}
.project-view-panel[hidden]{display:none!important}
.project-kanban-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;min-width:0;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.project-kanban-card[hidden],.project-timeline-row[hidden]{display:none!important}
.project-kanban-column{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:340px;box-sizing:border-box;padding:7px;border:1px solid var(--line);border-radius:11px;background:#f8f9fc;transition:border-color .15s,background .15s}
.project-kanban-column.drag-over{border-color:var(--blue);background:var(--accent-tint)}
.project-kanban-column-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 8px;border-bottom:1px solid var(--line)}
.project-kanban-column-head h3{margin:0;font-size:12px;font-weight:800}
.project-kanban-column-head .count{min-width:22px;padding:2px 7px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--muted);font-size:10px;text-align:center}
.project-kanban-column-body{display:flex;flex:1;flex-direction:column;align-items:stretch;gap:8px}
.project-kanban-card{display:flex;flex-direction:column;gap:7px;padding:8px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:9px;background:#fff;box-shadow:0 2px 5px rgba(28,34,72,.04);min-width:0;box-sizing:border-box}
.project-kanban-card[draggable="true"]{cursor:grab}.project-kanban-card.is-dragging,.project-timeline-bar.is-dragging{opacity:.45}
.project-kanban-card-top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:4px 7px;min-width:0}
.project-kanban-card-top .project-type-chip{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}
.project-kanban-key{flex:1 1 45px;min-width:0;overflow:hidden;color:var(--muted);font-size:10px;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.project-kanban-title{color:var(--ink);font-size:13px;font-weight:750;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
.project-kanban-title:hover{color:var(--blue)}
.project-kanban-client{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.project-kanban-card-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;padding-top:6px;border-top:1px solid var(--line)}
.project-kanban-date{color:var(--muted);font-size:10px;line-height:1.4}
.project-kanban-card .project-status-inline{align-self:stretch;width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.project-kanban-empty{margin:8px 0 0;color:var(--muted);font-size:11px;text-align:center}
.project-timeline{overflow:hidden;border:1px solid var(--line);border-radius:11px;background:var(--surface,#fff)}
.project-timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line)}
.project-timeline-toolbar h3{margin:0 0 3px;font-size:14px}.project-timeline-toolbar p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
.project-timeline-controls{display:flex;align-items:center;gap:4px;flex:0 0 auto;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.project-timeline-controls button{min-width:32px;padding:6px 9px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}
.project-timeline-controls button:hover{transform:none;background:#fff;color:var(--ink)}
.project-timeline-controls button.on{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(25,30,70,.12)}
.project-timeline-divider{width:1px;height:20px;margin:0 3px;background:var(--line)}
.project-timeline-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.project-timeline-grid-shell{min-width:920px}
.project-timeline-axis,.project-timeline-row{display:grid;grid-template-columns:minmax(205px,250px) minmax(690px,1fr)}
.project-timeline-axis{position:sticky;top:0;z-index:6;background:var(--surface-2);border-bottom:1px solid var(--line)}
.project-timeline-axis-label{display:flex;align-items:center;padding:9px 12px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.project-timeline-axis-ticks{position:relative;display:grid;grid-template-columns:repeat(var(--timeline-tick-count),minmax(0,1fr));min-width:0}
.project-timeline-tick{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:2px;padding:7px 5px;border-left:1px solid var(--line);overflow:hidden}
.project-timeline-tick strong{overflow:hidden;color:var(--ink);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.project-timeline-tick small{color:var(--muted);font-size:9px;white-space:nowrap}
.project-timeline-axis-today{position:absolute;z-index:2;top:0;bottom:0;width:2px;background:var(--accent);pointer-events:none}
.project-timeline-row{min-height:82px;border-bottom:1px solid var(--line)}
.project-timeline-row:last-of-type{border-bottom:0}
.project-timeline-project{position:sticky;left:0;z-index:4;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:9px 12px;background:var(--surface);border-right:1px solid var(--line)}
.project-timeline-name{overflow:hidden;color:var(--ink);font-size:12px;font-weight:750;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.project-timeline-name:hover{color:var(--blue)}
.project-timeline-meta{display:flex;align-items:center;gap:6px;overflow:hidden;color:var(--muted);font-size:10px;white-space:nowrap}
.project-timeline-meta>span:last-child{overflow:hidden;text-overflow:ellipsis}
.project-timeline-meta .chip{padding:2px 6px;font-size:9px}
.project-timeline-dates{color:var(--muted);font-size:10px}
.project-timeline-project .project-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;width:100%;min-width:0;box-sizing:border-box}
.project-timeline-project .project-progress-bar{grid-column:1;grid-row:1;margin:0}
.project-timeline-project .project-progress>span{grid-column:2;grid-row:1;white-space:nowrap}
.project-timeline-set-dates{align-self:flex-start;padding:3px 7px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--blue);font-size:10px;font-weight:700;cursor:pointer}
.project-timeline-set-dates:hover{transform:none;background:var(--accent-tint)}
.project-timeline-track{position:relative;display:grid;grid-template-columns:repeat(var(--timeline-tick-count),minmax(0,1fr));align-items:center;min-width:0;min-height:82px;touch-action:pan-y;user-select:none}
.project-timeline-gridline{grid-row:1;align-self:stretch;border-left:1px solid var(--border);pointer-events:none}
.project-timeline-today{position:absolute;z-index:1;top:0;bottom:0;width:2px;background:var(--accent);opacity:.8;pointer-events:none}
.project-timeline-bar{position:absolute;z-index:2;left:var(--bar-left);width:max(6px,var(--bar-width));height:26px;display:flex;align-items:center;overflow:visible;padding:0;border:0;border-radius:var(--radius-md,8px);background:var(--accent);color:#fff;cursor:grab}
.project-timeline-bar[data-editable="true"]{min-width:24px}
.project-timeline-bar span{position:relative;z-index:1;flex:1 1 auto;min-width:0;overflow:hidden;padding:0 10px;color:inherit;font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
/* Resize handles — ui-guide .tl-bar .h: a slim rounded pill in the bar's text
   colour, no filled zone. */
.project-timeline-resize-handle{position:absolute;z-index:2;top:0;bottom:0;box-sizing:border-box;width:11px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:inherit;cursor:ew-resize;touch-action:none}
.project-timeline-resize-handle::after{content:"";width:3px;height:14px;border-radius:999px;background:currentColor;opacity:.7;transition:opacity var(--duration-fast,.12s)}
.project-timeline-resize-start{left:0}.project-timeline-resize-end{right:0}
.project-timeline-resize-handle:hover::after,.project-timeline-resize-handle:focus-visible::after{opacity:1}
.project-timeline-resize-handle:focus-visible{outline:2px solid rgba(37,99,235,.42);outline-offset:1px;border-radius:4px}
.project-timeline-date-preview{position:absolute;z-index:6;left:50%;bottom:calc(100% + 4px);display:block;max-width:calc(100vw - 32px);transform:translateX(-50%);padding:4px 7px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:#10132e;color:#fff;font-size:10px;font-weight:700;line-height:1.2;white-space:nowrap;box-shadow:0 3px 8px rgba(16,19,46,.25);pointer-events:none}
.project-timeline-date-preview[hidden]{display:none}
.project-timeline-bar.is-resizing,.project-timeline-track.is-resizing{cursor:ew-resize}
.project-timeline-bar.is-resizing{z-index:4;box-shadow:0 0 0 2px rgba(43,65,230,.2),0 3px 8px rgba(25,30,70,.18)}
/* Timeline bars carry the guide's SHAPE (26px, 11px/600 label, pill handles) but
   keep the per-status COLOUR so a planning view reads status at a glance. Each
   status sets its own bg + readable text; the pill handle inherits the text
   colour (currentColor). The base accent/#fff above is only a status-less fallback. */
.project-timeline-bar.project-status-backlog{background:#e5e8f1;color:#4d5573}.project-timeline-bar.project-status-quote{background:#f2c5e0;color:#7b2863}
.project-timeline-bar.project-status-scheduled{background:#f8df75;color:#705800}.project-timeline-bar.project-status-active{background:#80ade9;color:#153f78}
.project-timeline-bar.project-status-paused{background:#efb171;color:#713b09}.project-timeline-bar.project-status-signoff{background:#dc83c4;color:#641950}
.project-timeline-bar.project-status-complete{background:#68cc91;color:#135b34}.project-timeline-bar.project-status-cancelled{background:#ed969a;color:#801c26}
.project-timeline-track.is-selecting{cursor:crosshair}.project-timeline-track.drag-over{background-color:#f0f2ff}
.project-timeline-selection{position:absolute;z-index:3;top:calc(50% - 14px);height:28px;border:2px solid var(--blue);border-radius:6px;background:rgba(43,65,230,.18);pointer-events:none}
.project-timeline-readonly{position:absolute;inset:0;pointer-events:none}
.project-timeline-empty{padding:20px;color:var(--muted);font-size:12px;text-align:center}
.project-timeline-empty[hidden]{display:none}
.project-status-inline{min-width:112px;padding:5px 25px 5px 9px;border-radius:100px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.chip.project-status-backlog,.project-status-inline.project-status-backlog{background:#eef0f7;color:#556080;border:1px solid #d9ddea}
.chip.project-status-quote,.project-status-inline.project-status-quote{background:#f7cbe8;color:#8b286f;border:1px solid #efa7d4}
.chip.project-status-scheduled,.project-status-inline.project-status-scheduled{background:#ffe77a;color:#735a00;border:1px solid #f5d45d}
.chip.project-status-active,.project-status-inline.project-status-active{background:#8db9f2;color:#174a91;border:1px solid #6ca0e9}
.chip.project-status-paused,.project-status-inline.project-status-paused{background:#f7b36d;color:#7b3e00;border:1px solid #ee9650}
.chip.project-status-signoff,.project-status-inline.project-status-signoff{background:#ee8fd3;color:#7b2063;border:1px solid #dc69bb}
.chip.project-status-complete,.project-status-inline.project-status-complete{background:#62d889;color:#126335;border:1px solid #48c873}
.chip.project-status-cancelled,.project-status-inline.project-status-cancelled{background:#f49a9e;color:#8f1d28;border:1px solid #ee777d}
button.icon-btn.health-good{color:var(--good);border-color:transparent;background:rgba(10,165,118,.08)}
button.icon-btn.health-warn{color:var(--warn);border-color:transparent;background:rgba(229,105,31,.08)}
button.icon-btn.health-bad{color:var(--bad);border-color:transparent;background:rgba(217,38,78,.08)}
button.icon-btn.health-muted{color:var(--muted);border-color:transparent;background:rgba(107,113,148,.08)}
.project-info-health{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;margin-bottom:16px;background:#fafbff}
.project-info-health.good{border-color:#a9e4c9;background:#f0fbf5}.project-info-health.warn{border-color:#f0c28e;background:#fff8ef}.project-info-health.bad{border-color:#f2a7b4;background:#fff3f5}.project-info-health.muted{color:var(--muted)}
.project-health-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:0 0 10px}.project-info-health.good .project-health-dot{background:var(--good)}.project-info-health.warn .project-health-dot{background:var(--warn)}.project-info-health.bad .project-health-dot{background:var(--bad)}
.project-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px;margin-bottom:16px}.project-info-grid label,.project-info-copy label,.project-info-progress label,.project-info-history>label{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}.project-info-grid strong{font-size:13px}.project-info-progress{margin-bottom:16px}.project-info-progress .project-progress-bar{max-width:360px;margin:5px 0}.project-info-progress>span{font-size:11px;color:var(--muted)}.project-info-copy{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.project-info-copy p{white-space:pre-wrap;margin:0;color:var(--ink);font-size:13px;line-height:1.5}.project-info-history{border-top:1px solid var(--line);padding-top:12px;margin-top:16px}.project-info-history .project-activity-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
@media (max-width:720px){
  .project-header-actions{flex-wrap:wrap}
  .project-register-tools .project-search-wrap,.project-register-tools select{flex:1 1 100%;min-width:0}
  .project-view-switch{justify-content:stretch}.project-view-switch button{flex:1;padding:8px 6px}
  .project-timeline-toolbar{align-items:flex-start;flex-direction:column}.project-timeline-controls{max-width:100%;flex-wrap:wrap}
  .project-kanban-board{grid-template-columns:repeat(8,minmax(230px,1fr))}
}
@media (min-width:721px) and (max-width:1100px){
  .project-kanban-board{grid-template-columns:repeat(8,minmax(190px,1fr))}
  .project-kanban-column{min-width:190px}
}

/* Form grid — two-column layout for modal forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:8px}
.form-grid .field{margin-bottom:0}
.form-grid .col-2{grid-column:1 / -1}
.section-divider{margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted)}

/* Contacts editor — nested rows inside client modal */
.contacts-editor{display:grid;gap:8px;margin-bottom:4px}
.contact-head{display:grid;grid-template-columns:1.2fr 1.6fr 1fr 1fr 32px;gap:8px;
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;
  padding:0 2px}
.contact-row{display:grid;grid-template-columns:1.2fr 1.6fr 1fr 1fr 32px;gap:8px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px}
.contact-row input{padding:7px 9px;font-size:13px;background:#fff}
.contact-row button[data-action="remove-contact"]{padding:4px;line-height:1;font-size:18px;
  width:32px;height:32px;background:transparent;color:var(--muted);border-color:transparent;
  display:grid;place-items:center;border-radius:6px}
.contact-row button[data-action="remove-contact"]:hover{color:var(--bad);background:#fff5f7}
@media (max-width:720px){
  .form-grid{grid-template-columns:1fr}
  .form-grid .col-2{grid-column:auto}
  .contact-head{display:none}
  .contact-row{grid-template-columns:1fr 1fr 32px;grid-auto-rows:min-content;gap:6px}
  .contact-row input[data-field="name"]{grid-column:1/-1}
  .contact-row input[data-field="email"]{grid-column:1/-1}
  .contact-row input[data-field="phone"]{grid-column:1/2}
  .contact-row input[data-field="role"]{grid-column:2/3}
  .contact-row button[data-action="remove-contact"]{grid-column:3/4;grid-row:1/2}
}

/* ---------- Schedule mode ---------- */
.sch-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media (max-width:900px){.sch-insights{grid-template-columns:1fr}}
.sch-insight{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:0 1px 2px rgba(14,19,48,.05), 0 8px 24px rgba(14,19,48,.06)}
.sch-insight-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted)}
.sch-insight-value{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:24px;line-height:1;margin:6px 0 4px}
.sch-insight-sub{font-size:12px;color:var(--muted)}
.sch-insight.warn .sch-insight-value{color:var(--warn,#e5691f)}
.sch-insight.good .sch-insight-value{color:var(--good,#0aa576)}
.sch-insight.blue .sch-insight-value{color:var(--blue,#2b41e6)}

.sch-week-card{padding:14px 16px}
.sch-allday-row{display:grid;grid-template-columns:56px repeat(7,1fr);gap:0;
  border-left:1px solid var(--line);border-right:1px solid var(--line);border-top:1px solid var(--line)}
.sch-allday-corner{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper,#f8f8fb);padding:6px 8px;font-size:9px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;text-align:right}
.sch-allday-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:4px;min-height:30px;display:flex;flex-direction:column;gap:3px}
.sch-allday-cell.today{background:rgba(43,65,230,.03)}
.sch-allday-event{padding:2px 6px;border-radius:4px;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.3}
.sch-allday-event.milestone{background:var(--blue,#2b41e6);color:#fff}
.sch-allday-event.delivery{background:var(--pink,#ff5aa0);color:#fff}
.sch-allday-event.holiday{background:var(--good,#0aa576);color:#fff}
.sch-allday-event.offsite{background:#5d2a91;color:#fff}
.sch-allday-event.deadline{background:var(--bad,#d9264e);color:#fff}
/* An all-day block-out: yellow, and stamped with who logged it. */
.sch-allday-event.blocked{background:#ffd23c;color:#0e1330;display:flex;gap:5px;
  align-items:baseline;flex-wrap:wrap}
.sch-allday-event.blocked .ade-by{font-weight:700;text-transform:none;letter-spacing:0;
  opacity:.7;font-size:9px}
.sch-allday-event.blocked .ade-by::before{content:"· "}
/* …and the whole day column tints yellow behind the timed events. */
.sch-day-cell.sch-blocked{background:rgba(255,210,60,.16)}
.sch-day-cell.sch-blocked.today{background:rgba(255,210,60,.22)}

.sch-week-grid{display:grid;grid-template-columns:56px repeat(7,1fr);gap:0;
  border-left:1px solid var(--line);border-right:1px solid var(--line);position:relative}
.sch-corner{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper,#f8f8fb);padding:6px 0;text-align:center;
  font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.sch-day-head{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:6px;text-align:center;background:var(--paper,#f8f8fb)}
.sch-day-head.today{background:rgba(43,65,230,.06)}
.sch-day-name{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted)}
.sch-day-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:16px;line-height:1;margin-top:2px;color:var(--ink)}
.sch-day-head.today .sch-day-num{color:var(--blue,#2b41e6)}
.sch-hour-label{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1px 6px 0 0;font-size:10px;color:var(--muted);text-align:right;
  font-family:'Geist Mono',ui-monospace,monospace;height:44px}
.sch-day-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;height:44px}
.sch-day-cell.today{background:rgba(43,65,230,.02)}

.sch-event{position:absolute;left:2px;right:2px;padding:3px 6px;border-radius:6px;
  font-size:10px;line-height:1.25;overflow:hidden;cursor:pointer;
  border-left:3px solid;background:#fff;font-weight:600;min-height:22px;
  box-shadow:0 1px 3px rgba(14,19,48,.08);z-index:2}
.sch-event .sch-ev-time{font-family:'Geist Mono',ui-monospace,monospace;font-size:9px;opacity:.7}
.sch-event .sch-ev-title{font-weight:700;margin-top:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* Compact — short events fold time + title onto one line so nothing gets clipped. */
.sch-event.compact{padding:3px 6px 2px}
.sch-event.compact .sch-ev-inline{display:flex;gap:6px;align-items:baseline;
  white-space:nowrap;overflow:hidden}
.sch-event.compact .sch-ev-inline .sch-ev-time{flex:0 0 auto}
.sch-event.compact .sch-ev-inline .sch-ev-title{flex:1 1 auto;margin-top:0;
  overflow:hidden;text-overflow:ellipsis}
.sch-event.client   {background:rgba(255,210,60,.20); border-left-color:var(--yellow,#ffd23c);color:#8f4200}
.sch-event.standup  {background:rgba(107,113,148,.14);border-left-color:var(--muted,#6b7194);color:var(--muted,#6b7194)}
.sch-event.milestone{background:rgba(43,65,230,.14); border-left-color:var(--blue,#2b41e6);color:#1a2ba8}
.sch-event.delivery {background:rgba(255,90,160,.14);border-left-color:var(--pink,#ff5aa0);color:#a03d6f}
.sch-event.personal {background:rgba(107,113,148,.08);border-left-color:var(--muted,#6b7194);color:var(--muted,#6b7194);border-left-style:dashed}
.sch-event.offsite  {background:rgba(93,42,145,.14); border-left-color:#5d2a91;color:#5d2a91}
.sch-event.holiday  {background:rgba(10,165,118,.14);border-left-color:var(--good,#0aa576);color:#0a6647}
.sch-event.deadline {background:rgba(217,38,78,.14); border-left-color:var(--bad,#d9264e);color:#a01235}

.sch-ev-owner{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;
  border:1px solid #fff;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;
  font-size:10px;line-height:1;background:var(--paper);z-index:3;pointer-events:none}
.sch-drag-sel{position:absolute;z-index:4;pointer-events:none;border-radius:6px;
  background:rgba(43,65,230,.16);border:1.5px solid var(--blue,#2b41e6)}
.sch-week-grid .sch-day-cell{cursor:cell}
.sch-now-line{position:absolute;left:56px;right:0;height:1px;background:var(--bad,#d9264e);z-index:5;pointer-events:none}
.sch-now-line::before{content:"";position:absolute;left:-6px;top:-4px;width:8px;height:8px;background:var(--bad,#d9264e);border-radius:50%}
.sch-now-line::after{content:"NOW";position:absolute;right:6px;top:-8px;background:var(--bad,#d9264e);color:#fff;
  font-size:8px;padding:1px 6px;border-radius:8px;font-weight:800;letter-spacing:.08em}

.sch-legend{display:flex;flex-wrap:wrap;gap:12px;padding:8px 2px 2px;font-size:11px;color:var(--muted)}
.sch-legend .lg{display:inline-flex;align-items:center;gap:6px}
.sch-dot{width:8px;height:8px;border-radius:2px;display:inline-block}
.sch-dot.client   {background:var(--yellow,#ffd23c)}
.sch-dot.standup  {background:var(--muted,#6b7194)}
.sch-dot.milestone{background:var(--blue,#2b41e6)}
.sch-dot.delivery {background:var(--pink,#ff5aa0)}
.sch-dot.personal {background:var(--muted,#6b7194);opacity:.5}
.sch-dot.holiday  {background:var(--good,#0aa576)}
.sch-dot.offsite  {background:#5d2a91}
.sch-dot.deadline {background:var(--bad,#d9264e)}

.sch-agenda-list{padding:0 2px}
.sch-agenda-day{padding:8px 0;border-bottom:1px solid var(--line)}
.sch-agenda-day:last-child{border-bottom:0}
.sch-agenda-day-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.sch-day-full{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px}
.sch-count{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.sch-agenda-item{display:grid;grid-template-columns:80px 12px minmax(0,1fr) 110px auto;
  gap:10px;align-items:center;padding:6px 4px;border-radius:6px}
.sch-agenda-item:hover{background:var(--paper,#f8f8fb)}
.sch-agenda-time{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;color:var(--muted);font-weight:600}
.sch-agenda-swatch{width:8px;height:22px;border-radius:100px}
.sch-agenda-swatch.client   {background:var(--yellow,#ffd23c)}
.sch-agenda-swatch.standup  {background:var(--muted,#6b7194)}
.sch-agenda-swatch.milestone{background:var(--blue,#2b41e6)}
.sch-agenda-swatch.delivery {background:var(--pink,#ff5aa0)}
.sch-agenda-swatch.personal {background:var(--muted,#6b7194);opacity:.5}
.sch-agenda-swatch.holiday  {background:var(--good,#0aa576)}
.sch-agenda-swatch.deadline {background:var(--bad,#d9264e)}
.sch-agenda-title{font-size:13px;font-weight:600}
.sch-agenda-title small{color:var(--muted);font-weight:500;display:block;font-size:11px;margin-top:1px}
.sch-agenda-blocked{text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.sch-agenda-blocked strong{color:var(--warn,#e5691f);font-family:'Geist Mono',ui-monospace,monospace}
.sch-agenda-actions{display:flex;gap:4px}

/* Compact the tables on narrower widths so the timeline still fits */
@media (max-width:900px){
  .sch-week-grid,.sch-allday-row{grid-template-columns:44px repeat(7,minmax(60px,1fr))}
  .sch-event .sch-ev-time{display:none}
  .sch-agenda-item{grid-template-columns:64px 10px minmax(0,1fr) auto}
  .sch-agenda-blocked,.sch-agenda-actions{display:none}
}

/* Working days toggle chips (Settings) */
.day-toggles{display:flex;gap:6px;flex-wrap:wrap}
.day-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);
  border-radius:100px;background:#fff;cursor:pointer;user-select:none;font-size:12px;font-weight:600;color:var(--muted)}
.day-toggle input{position:absolute;opacity:0;pointer-events:none}
.day-toggle.on{background:var(--blue,#2b41e6);color:#fff;border-color:var(--blue,#2b41e6)}
.day-toggle:hover{border-color:var(--ink)}
.day-toggle.on:hover{border-color:var(--blue-ink,#1a2ba8)}

/* Non-working-day tint in Schedule grid */
.sch-day-head.off,
.sch-day-cell.off,
.sch-allday-cell.off{background:repeating-linear-gradient(
  45deg,
  rgba(107,113,148,.04),
  rgba(107,113,148,.04) 6px,
  rgba(107,113,148,.09) 6px,
  rgba(107,113,148,.09) 12px)}
.sch-day-head.off .sch-day-name,
.sch-day-head.off .sch-day-num{opacity:.55}
.sch-agenda-day.off .sch-day-full{opacity:.7}

/* Modal inline checkbox label helper */
label.inline{display:inline-flex;align-items:center;gap:6px;padding-top:8px;font-weight:500}

/* Time-off swatch — soft violet with diagonal stripe */
.sch-event.off,
.sch-allday-event.off,
.sch-agenda-swatch.off,
.sch-dot.off{background:repeating-linear-gradient(
  135deg,
  rgba(93,42,145,.18),
  rgba(93,42,145,.18) 4px,
  rgba(93,42,145,.30) 4px,
  rgba(93,42,145,.30) 8px);border-left-color:#5d2a91;color:#4a2373}
.sch-allday-event.off{background:#5d2a91;color:#fff;background-image:repeating-linear-gradient(
  135deg, rgba(255,255,255,.18), rgba(255,255,255,.18) 4px, transparent 4px, transparent 8px)}
.sch-agenda-swatch.off{border-left:0;background:#5d2a91}
.sch-dot.off{background:#5d2a91}

/* Attendee count + RSVP chip on agenda rows */
.sch-att-count{display:inline-block;font-size:10px;padding:1px 6px;border-radius:100px;
  background:var(--paper,#f8f8fb);color:var(--muted);font-weight:700;margin-left:4px;vertical-align:middle}
.sch-rsvp-chip{display:inline-block;font-size:9px;padding:1px 8px;border-radius:100px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;margin-left:4px;vertical-align:middle}
.sch-rsvp-chip.rsvp-accepted {background:rgba(10,165,118,.18);color:#0a6647}
.sch-rsvp-chip.rsvp-tentative{background:rgba(255,210,60,.28);color:#8f4200}
.sch-rsvp-chip.rsvp-declined {background:rgba(217,38,78,.18);color:#a01235}
.sch-rsvp-chip.rsvp-pending  {background:rgba(107,113,148,.14);color:var(--muted)}
.sch-agenda-actions .sm.on{background:var(--blue,#2b41e6);color:#fff;border-color:var(--blue,#2b41e6)}

/* Focus this week — auto-packed task allocation across 7 days */
.focus-card{padding:14px 16px 8px}
.focus-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:6px 0}
.focus-day{border:1px solid var(--line);border-radius:10px;padding:8px;
  background:#fff;min-height:120px;display:flex;flex-direction:column}
.focus-day.today{border-color:var(--blue,#2b41e6);box-shadow:0 0 0 3px rgba(43,65,230,.10)}
.focus-day.off{background:repeating-linear-gradient(
  45deg,
  rgba(107,113,148,.04),
  rgba(107,113,148,.04) 6px,
  rgba(107,113,148,.09) 6px,
  rgba(107,113,148,.09) 12px)}
.focus-day-head{display:flex;align-items:baseline;gap:6px;margin-bottom:6px;justify-content:space-between}
.focus-day-name{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted)}
.focus-day-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px}
.focus-day-cap{font-size:10px;color:var(--muted);margin-left:auto}
.focus-day.today .focus-day-num{color:var(--blue,#2b41e6)}
.focus-day-slots{display:flex;flex-direction:column;gap:4px;flex:1}
.focus-slot{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;
  padding:6px 8px;background:rgba(43,65,230,.06);border-left:3px solid var(--blue,#2b41e6);
  border-radius:6px;font-size:11px;font-weight:600;min-width:0}
.focus-slot.empty{background:transparent;border-left:1px dashed var(--line);color:var(--muted);
  font-weight:500;justify-content:center;font-size:10px;padding:4px;grid-template-columns:1fr}
.focus-slot-code{font-size:9px;color:var(--blue-ink,#1a2ba8);font-weight:700}
.focus-slot-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.focus-slot-hours{color:var(--blue-ink,#1a2ba8);font-size:10px;font-weight:800}
.focus-overflow{margin-top:8px;padding:8px 12px;background:rgba(217,38,78,.08);
  border-left:3px solid var(--bad,#d9264e);border-radius:6px;font-size:12px}
.focus-overflow strong{color:var(--bad,#d9264e)}

/* Row-actions button.on style already exists via .sm.on above; secondary buttons keep default */
@media (max-width:900px){
  .focus-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}

/* Lunch band on the timeline */
.sch-lunch-band{position:absolute;left:56px;right:0;background:repeating-linear-gradient(
  135deg, rgba(255,210,60,.20), rgba(255,210,60,.20) 6px, rgba(255,210,60,.30) 6px, rgba(255,210,60,.30) 12px);
  z-index:1;pointer-events:none;border-top:1px dashed rgba(255,210,60,.60);border-bottom:1px dashed rgba(255,210,60,.60)}
/* Per-day bands are clickable so a person can skip lunch on a given day. */
.sch-lunch-band[data-lunch-day]{pointer-events:auto;cursor:pointer;transition:filter .1s ease}
.sch-lunch-band[data-lunch-day]:hover{filter:brightness(.96)}
.sch-lunch-band.dismissed{background:repeating-linear-gradient(
  135deg, rgba(107,113,148,.10), rgba(107,113,148,.10) 6px, rgba(107,113,148,.16) 6px, rgba(107,113,148,.16) 12px);
  border-color:rgba(107,113,148,.4)}
.sch-lunch-band.dismissed span{color:var(--muted);background:rgba(255,255,255,.75)}
.sch-lunch-band span{position:absolute;left:8px;top:2px;font-size:9px;font-weight:800;color:#8f4200;
  letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.7);padding:1px 6px;border-radius:100px}

/* Milestone/delivery progress chip on agenda */
.sch-task-progress{display:inline-block;font-size:10px;font-weight:700;color:var(--blue-ink,#1a2ba8);
  background:rgba(43,65,230,.12);padding:1px 8px;border-radius:100px;margin-left:4px;vertical-align:middle}

/* Link-tasks picker inside the add-event modal */
.ev-tasks-list{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;
  padding:6px 8px;background:var(--paper,#f8f8fb)}
.ev-tasks-group + .ev-tasks-group{margin-top:8px}
.ev-task-chip{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;
  padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px}
.ev-task-chip:hover{background:#fff}
.ev-task-chip input{margin:0}

/* Sent-back note callout on assignee's Work row */
.work-review-note{margin-top:6px;padding:8px 12px;background:rgba(217,38,78,.08);
  border-left:3px solid var(--bad,#d9264e);border-radius:6px;font-size:12px;line-height:1.4;
  color:#7b0c2a}
.work-review-note strong{color:var(--bad,#d9264e);font-weight:800}
.work-item.sent-back{border-left:3px solid var(--bad,#d9264e);background:rgba(217,38,78,.02)}

/* Admin impersonation picker */
.imp-list{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow-y:auto;margin-top:8px}
.imp-row{display:flex;flex-direction:column;align-items:flex-start;padding:10px 14px;
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
  font-family:inherit;text-align:left;transition:background .1s ease,border-color .1s ease}
.imp-row:hover{background:var(--paper,#f8f8fb);border-color:var(--blue,#2b41e6)}
.imp-name{font-weight:700;font-size:13px}
.imp-meta{margin-top:2px}

/* ---------- Tickets ---------- */
.ticket-pill{display:inline-block;padding:3px 10px;border-radius:100px;font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.ticket-pill.pill-open{background:rgba(43,65,230,.14);color:var(--blue);border:1px solid rgba(43,65,230,.3)}
.ticket-pill.pill-await{background:rgba(229,105,31,.14);color:var(--warn);border:1px solid rgba(229,105,31,.3)}
.ticket-pill.pill-done{background:var(--good);color:#fff}
.ticket-pill.pill-reject{background:var(--bad);color:#fff}
.ticket-reply{border-left:3px solid var(--line);padding:6px 10px;margin-bottom:8px;background:#fff;border-radius:0 6px 6px 0}
.ticket-reply-client{background:#fff8e7;border-left-color:#edbf45}
.ticket-reply-staff{background:#fff;border-left-color:var(--line)}
.ticket-reply-requester-change{background:#eef5ff;border-left-color:var(--blue)}
.ticket-reply-head{margin-bottom:4px}
.ticket-reply-body{white-space:pre-wrap;font-size:13px;color:var(--ink)}
.client-requester-handoff{margin:8px 0 12px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.client-requester-handoff summary{font-weight:700;cursor:pointer}
.client-requester-handoff .field{margin-top:9px}
.client-requester-handoff select,.client-requester-handoff textarea{width:100%;box-sizing:border-box}
.client-requester-handoff [role=status]{margin-top:5px;min-height:14px}
.chip.warn{background:rgba(229,105,31,.14);color:var(--warn);border:1px solid rgba(229,105,31,.3);
  padding:2px 8px;border-radius:100px;font-size:10.5px;font-weight:700}

/* ---------- Date picker ---------- */
.datepick{display:flex;flex-direction:column;gap:6px;position:relative}
.datepick-row{display:flex;gap:6px;align-items:stretch;position:relative}
.datepick-display{flex:1 1 auto;cursor:pointer;background:#fff;font-weight:600;
  font-size:13px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  transition:border-color .1s ease}
.datepick-display:hover{border-color:var(--blue)}
.datepick-clear{background:transparent;border:1px solid var(--line);border-radius:8px;
  padding:0 10px;color:var(--muted);cursor:pointer;font-size:14px}
.datepick-clear:hover{color:var(--bad);border-color:var(--bad)}
.datepick-quick{display:flex;gap:4px;flex-wrap:wrap}
.datepick-quick button{background:var(--paper);border:1px solid var(--line);
  border-radius:100px;padding:3px 12px;font-size:11px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:all .1s ease;font-family:inherit}
.datepick-quick button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
/* Inline calendar dropdown — width matches the input row. */
.datepick-cal{position:absolute;left:0;right:0;top:100%;margin-top:6px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(14,19,48,.14);padding:10px;z-index:20}
.datepick-cal-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px}
.datepick-cal-title{font-weight:800;font-size:13px;color:var(--ink)}
.datepick-cal-nav{background:transparent;border:1px solid var(--line);border-radius:6px;
  display:grid;place-items:center;width:32px;height:32px;font-size:20px;line-height:1;
  font-weight:700;cursor:pointer;color:var(--blue);font-family:inherit;transition:all .12s ease}
.datepick-cal-nav:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.datepick-cal-nav:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.datepick-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;
  font-size:10px;font-weight:700;color:var(--muted);text-align:center;text-transform:uppercase;
  letter-spacing:.04em}
.datepick-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.datepick-cal-cell{background:transparent;border:1px solid transparent;border-radius:6px;
  padding:6px 0;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;
  font-family:inherit;text-align:center}
.datepick-cal-cell:hover{background:var(--paper);border-color:var(--line)}
.datepick-cal-cell.other{color:var(--line-strong,#c3c7d6);font-weight:400}
.datepick-cal-cell.today{border-color:var(--blue);color:var(--blue)}
.datepick-cal-cell.sel{background:var(--blue);color:#fff;border-color:var(--blue)}
.datepick-cal-cell.sel:hover{background:var(--blue-ink,#1a2ba8)}


/* ---------- Attachments (drag-and-drop) ---------- */
.att-zone{display:flex;flex-direction:column;gap:8px}
.att-drop{display:flex;align-items:center;justify-content:center;gap:6px;
  border:1.5px dashed var(--line);border-radius:10px;padding:14px 12px;cursor:pointer;
  background:var(--paper);color:var(--muted);font-size:13px;text-align:center;transition:all .12s ease}
.att-drop:hover{border-color:var(--blue);color:var(--ink)}
.att-drop.drag{border-color:var(--blue);background:rgba(43,65,230,.06);color:var(--ink)}
.att-browse{color:var(--blue);font-weight:700;text-decoration:underline}
.att-list{display:flex;flex-direction:column;gap:4px}
.att-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);
  border-radius:8px;background:var(--card,#fff)}
.att-item .att-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:transparent;border:0;padding:0;text-align:left;font:inherit;font-size:13px;color:var(--blue);cursor:pointer}
.att-item .att-name[style*="cursor:default"]{color:var(--ink)}
.att-item .att-meta{flex:0 0 auto}
.att-item .att-rm{flex:0 0 auto;background:transparent;border:0;color:var(--muted);cursor:pointer;
  font-size:14px;line-height:1;padding:2px 6px;border-radius:6px}
.att-item .att-rm:hover{background:rgba(217,38,78,.10);color:var(--bad,#d9264e)}

/* ---- Mobile / phone layout (source-order-last so it wins) ---- */
@media (max-width:640px){
  /* Stat tiles wrap to two columns instead of overflowing off-screen. */
  .metrics{grid-template-columns:repeat(2,1fr)}
  /* Tables scroll sideways instead of crushing columns to a single letter. */
  .card > table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .card > table thead,.card > table tbody,.card > table tr{white-space:nowrap}
  .card > table th,.card > table td{white-space:nowrap}
}
@media (max-width:400px){
  .metrics{grid-template-columns:1fr 1fr}
}

/* ---- Attachment preview: expand the modal with a right-hand pane ---- */
.modal-preview{display:none}
.modal.has-preview{width:min(1080px,96vw);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"head head" "body preview" "acts acts";
  max-height:calc(100vh - 40px)}
.modal.has-preview .modal-header{grid-area:head}
.modal.has-preview .modal-body{grid-area:body;overflow:auto}
.modal.has-preview .modal-actions{grid-area:acts}
.modal.has-preview .modal-preview{grid-area:preview;display:flex;flex-direction:column;
  border-left:1px solid var(--line);min-height:0;background:var(--paper)}
.modal-preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 14px;border-bottom:1px solid var(--line)}
.modal-preview-name{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-preview-actions{display:flex;gap:6px;flex:0 0 auto}
.modal-preview-actions a,.modal-preview-actions button{background:transparent;border:1px solid var(--line);
  border-radius:6px;padding:2px 9px;cursor:pointer;text-decoration:none;color:var(--ink);font-size:13px;line-height:1.6}
.modal-preview-body{flex:1 1 auto;overflow:auto;padding:14px;min-height:0}
.modal-preview-body img{max-width:100%;height:auto;display:block;margin:auto;border-radius:6px}
.modal-preview-body iframe{width:100%;height:100%;min-height:62vh;border:0;background:#fff;border-radius:6px}
.modal-preview-body video{display:block;width:100%;max-height:100%;margin:auto;background:#111;border-radius:6px}
.modal-preview-body audio{display:block;width:min(560px,100%);margin:20px auto}
.modal-preview-body pre{white-space:pre-wrap;word-break:break-word;font-size:12.5px;margin:0}
.office-document-preview,.office-workbook-preview{max-width:100%;margin:0 auto;padding:20px;background:#fff;color:#202124;line-height:1.55}
.office-document-preview{max-width:850px;min-height:100%;box-shadow:0 1px 5px rgba(20,28,48,.12)}
.office-document-preview h1,.office-document-preview h2,.office-document-preview h3,
.office-document-preview h4,.office-document-preview h5,.office-document-preview h6{margin:1.1em 0 .45em}
.office-document-preview p{margin:.45em 0;white-space:pre-wrap}
.office-document-preview .office-list-item{padding-left:1.3em}
.office-sheet{margin:0 0 24px}
.office-sheet h3{margin:0 0 8px;font-size:14px}
.office-sheet-scroll{max-width:100%;overflow:auto}
.office-preview-table{border-collapse:collapse;font-size:12px;min-width:100%}
.office-preview-table td{min-width:72px;max-width:320px;padding:5px 8px;border:1px solid #d8dce5;white-space:pre-wrap;overflow-wrap:anywhere;vertical-align:top}
.office-preview-message,.attachment-preview-message{text-align:center;padding:28px;color:var(--muted)}
.office-preview-message strong{color:var(--ink)}
@media (max-width:760px){
  .modal.has-preview{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:"head" "body" "preview" "acts";width:min(560px,100%)}
  .modal.has-preview .modal-preview{border-left:0;border-top:1px solid var(--line)}
  .modal.task-workspace-modal.has-preview{width:calc(100vw - 12px);height:calc(100vh - 12px);max-height:calc(100vh - 12px);
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(150px,.48fr) auto minmax(0,1fr);
    grid-template-areas:"head" "activity" "preview-head" "preview-body"}
  .modal.task-workspace-modal.has-preview .task-activity-panel{border-right:0;border-bottom:1px solid var(--line);padding:10px}
  .modal.task-workspace-modal.has-preview .task-activity-thread{min-height:40px}
  .modal.task-workspace-modal.has-preview .modal-preview-body{padding:8px}
}

@media (max-width:760px){
  .task-workspace.has-preview{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,.7fr) minmax(220px,1fr);grid-template-areas:"activity" "preview"}
  .task-workspace.has-preview .task-activity-panel{border-right:0;border-bottom:1px solid var(--line);padding:10px}
  .task-workspace.has-preview .task-activity-thread{min-height:40px}
  .task-workspace.has-preview .modal-preview-body{padding:8px}
}

/* ---- Markdown rendering (descriptions, briefs, .md previews) ---- */
.md-render .md-p{margin:0 0 6px;line-height:1.55}
.md-render .md-h{font-weight:800;margin:10px 0 4px}
.md-render .md-h1{font-size:18px}.md-render .md-h2{font-size:16px}.md-render .md-h3{font-size:14px}
.md-list{margin:4px 0;padding-left:18px}
.md-list li{margin:2px 0}
.md-check{list-style:none;margin-left:-14px}
.md-check label{display:flex;align-items:flex-start;gap:8px;cursor:pointer;text-transform:none;font-size:inherit;color:inherit;letter-spacing:normal;font-weight:400;margin:0}
.md-check span{text-transform:none;font-size:inherit;color:inherit;letter-spacing:normal}
.md-check input[type=checkbox]{margin-top:3px;flex:none}
.md-check .done{text-decoration:line-through;color:var(--muted)}
.md-render code,.md-p code{background:var(--paper);padding:1px 5px;border-radius:4px;font-size:12px}

/* ---- Inline WYSIWYG editor (toolbar + contenteditable + source toggle) ---- */
.md-editor{border:1px solid var(--line);border-radius:8px;overflow:visible;position:relative;background:var(--card)}
.md-toolbar{display:flex;gap:2px;align-items:center;padding:4px;border-bottom:1px solid var(--line);background:var(--paper);flex-wrap:wrap;border-radius:8px 8px 0 0}
.md-toolbar button{background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 9px;cursor:pointer;font-size:13px;line-height:1.4;color:var(--ink)}
.md-toolbar button:hover{background:var(--card);border-color:var(--line)}
.md-toolbar button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.md-toolbar .md-spacer{flex:1 1 auto}
.md-wysiwyg{padding:10px 12px;min-height:var(--md-minh,72px);outline:none;line-height:1.55;background:var(--card);border-radius:0 0 8px 8px}
.md-wysiwyg:focus{outline:none}
.md-wysiwyg.is-empty:before{content:attr(data-ph);color:var(--muted);pointer-events:none;display:block}
.md-wysiwyg input[type=checkbox]{cursor:pointer}
.md-editor textarea.md-source{border:0;width:100%;display:block;min-height:var(--md-minh,72px);resize:vertical;background:var(--card);padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;border-radius:0 0 8px 8px}
.md-editor textarea.md-source[hidden]{display:none}
.md-editor textarea.md-source:focus{outline:none}
/* slash command menu */
.md-slash{position:absolute;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:4px;min-width:180px;max-height:260px;overflow:auto}
.md-slash-item{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--ink)}
.md-slash-item.active,.md-slash-item:hover{background:var(--paper)}
.md-slash-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--line);border-radius:5px;font-size:11px;color:var(--muted);flex:none}
.md-slash-empty{padding:6px 9px;font-size:12px;color:var(--muted)}
/* ---- Markdown tables + horizontal rules + ordered lists ---- */
.md-tablewrap{overflow-x:auto;margin:6px 0}
.md-table{border-collapse:collapse;width:auto;font-size:12.5px}
.md-table th,.md-table td{border:1px solid var(--line);padding:4px 9px;text-align:left;white-space:nowrap}
.md-table th{background:var(--paper);font-weight:700}
.md-hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.md-ol{list-style:decimal;padding-left:20px}

/* ---- Work view switcher + team Kanban ---- */
.work-hero-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.work-view-toggle{display:flex;gap:4px;padding:3px;background:var(--paper);border:1px solid var(--line);border-radius:9px}
.work-view-toggle .sm{border:1px solid transparent;background:transparent;color:var(--ink);font-weight:700;opacity:.72;min-height:30px}
.work-view-toggle .sm:hover{opacity:1;background:var(--card);border-color:var(--line)}
.work-view-toggle .sm.is-active{background:var(--blue);border-color:var(--blue);color:#fff;opacity:1;box-shadow:0 2px 5px rgba(43,65,230,.22)}
.kanban-aux-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 14px}
.kanban-aux{padding:0;overflow:hidden}
.kanban-aux-head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:800;cursor:pointer;text-align:left}
.kanban-aux-body{padding:0 12px 12px}
.kanban-aux-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 4px;border-top:1px solid var(--line)}
.kanban-board{display:grid;grid-template-columns:repeat(6,minmax(210px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px;align-items:start}
.client-kanban-board{grid-template-columns:repeat(4,minmax(235px,1fr))}
.client-board-filters{flex-wrap:wrap;justify-content:flex-end}
.client-board-filters .work-metric{min-width:104px}
.client-board-filters .work-metric-label{max-width:130px}
.client-board-card{cursor:default}
.client-board-card .kanban-task-top{align-items:center}
.client-board-card .kanban-task-top .mono{margin-left:auto;color:var(--muted)}
.client-board-card .client-board-detail{font-size:11px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0 8px;color:var(--ink)}
.client-update-badge{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:2px 7px;border-radius:12px;background:rgba(217,38,78,.1);color:var(--bad);font-size:11px;font-weight:700}
.notification-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:10px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;line-height:1}
.notification-center-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:12px;font-weight:700}
.notification-list{max-height:min(62vh,560px);overflow:auto}
.notification-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.notification-row:last-child{border-bottom:0}
.notification-row.unread .notification-row-meta:before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--accent);vertical-align:middle}
.notification-row-main{min-width:0;flex:1 1 auto}
.notification-row-meta,.notification-row-title,.notification-preview{overflow-wrap:anywhere}
.notification-row-title{margin-top:2px;font-weight:700}
.notification-audience{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase}
.conversation-mention-input{position:relative}
.conversation-mention-input>textarea{display:block;width:100%;box-sizing:border-box}
.conversation-mention-suggestions{position:absolute;z-index:30;top:calc(100% - 4px);left:0;right:0;max-height:220px;overflow:auto;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(14,19,48,.18)}
.conversation-mention-option{display:block;width:100%;padding:8px 10px;border:0;border-radius:5px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.conversation-mention-option:hover,.conversation-mention-option[aria-selected="true"]{background:rgba(43,65,230,.1)}
.conversation-mention-chip{display:inline-flex;align-items:center;gap:4px;margin:0 1px;padding:1px 6px 1px 2px;border-radius:100px;background:var(--accent-tint);color:var(--accent-ink);font-size:.94em;font-weight:700;white-space:nowrap;vertical-align:baseline}
.conversation-mention-avatar{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:8px;font-weight:800;line-height:1;letter-spacing:-.02em}
.mention-avatar-tone-0{background:#c7d7ff;color:#23428f}
.mention-avatar-tone-1{background:#c9eddc;color:#176141}
.mention-avatar-tone-2{background:#f5dfb9;color:#815000}
.mention-avatar-tone-3{background:#e8d5f4;color:#643487}
.mention-avatar-tone-4{background:#ffd5d3;color:#973b35}
.client-board-card .kanban-task-foot{margin-top:8px}
.client-kanban-board [data-client-column="review"] .client-board-card{border-left-color:var(--warn)}
.client-kanban-board [data-client-column="done"] .client-board-card{border-left-color:var(--good)}
.kanban-column{min-width:0;box-sizing:border-box;background:var(--paper);border:1px solid var(--line);border-radius:12px;min-height:360px;overflow:hidden}
.kanban-column-head{display:flex;justify-content:space-between;align-items:center;padding:12px 13px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);border-radius:12px 12px 0 0;z-index:1}
.kanban-column-head h2{font-size:13px;margin:0}
.kanban-column-body{min-width:0;padding:10px;min-height:300px;overflow:hidden}
.kanban-column-body.drag-over{background:rgba(43,65,230,.08);outline:2px dashed var(--blue);outline-offset:-5px;border-radius:8px}
.kanban-task{min-width:0;max-width:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:9px;padding:8px 9px;margin-bottom:7px;cursor:grab;box-shadow:0 2px 7px rgba(14,19,48,.05)}
.kanban-story-group{width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden;margin-bottom:8px;padding:6px;border:1px solid rgba(43,65,230,.24);border-radius:10px;background:linear-gradient(145deg,rgba(43,65,230,.055),rgba(255,255,255,.72));box-shadow:0 2px 7px rgba(26,38,91,.045)}
.kanban-story-group>.kanban-task{margin-bottom:0;border-color:rgba(43,65,230,.3)}
.kanban-story-context{display:flex;align-items:flex-start;gap:7px;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden;margin:-1px -1px 6px;padding:7px 8px;border-bottom:1px solid rgba(43,65,230,.15);border-radius:6px;color:var(--ink);font-size:11px;line-height:1.35}
.kanban-story-context-type{flex:0 0 auto;padding:2px 6px;border-radius:5px;background:rgba(43,65,230,.12);color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.045em;text-transform:uppercase}
.kanban-story-context>a{min-width:0;overflow-wrap:anywhere;color:inherit;text-decoration:none}
.kanban-story-context>a:hover{text-decoration:underline;color:var(--blue)}
.kanban-subtask-stack{display:grid;grid-template-columns:minmax(0,1fr);width:calc(100% - 12px);min-width:0;box-sizing:border-box;gap:5px;margin:5px 0 0 12px;padding-left:9px;border-left:2px solid rgba(43,65,230,.22)}
.kanban-subtask-stack>.kanban-task{margin:0;background:linear-gradient(90deg,rgba(43,65,230,.035),var(--card) 30%)}
.kanban-card-key-link{color:inherit;text-decoration:none}
.kanban-card-key-link:hover{text-decoration:underline;color:var(--blue)}
.work-item-code[href]{color:var(--blue);text-decoration:none}
.work-item-code[href]:hover{text-decoration:underline}
.kanban-card-relationship{display:flex;align-items:baseline;gap:4px;min-width:0;margin:2px 0 6px;color:var(--muted);font-size:10px;line-height:1.3}
.kanban-card-relationship>span{flex:0 0 auto}
.kanban-card-relationship a{min-width:0;overflow:hidden;color:var(--blue);font:inherit;font-weight:750;text-align:left;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.kanban-card-relationship a:hover{text-decoration:underline}
.kanban-card-compact .kanban-card-relationship{margin:4px 0 0;font-size:9px;white-space:nowrap}
.kanban-card-compact .kanban-card-relationship strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket-kanban-card{cursor:default}
.ticket-kanban-card[draggable="true"]{cursor:grab}
.ticket-kanban-card[draggable="true"]:active,.ticket-kanban-card.dragging{cursor:grabbing;opacity:.55}
.support-ticket-work-card{border-left-color:#f59e0b;background:linear-gradient(90deg,rgba(245,158,11,.06),var(--card) 28%)}
.support-ticket-marker{background:#fff7ed;color:#7c2d12;border:1px solid #fed7aa;font-weight:900;letter-spacing:.04em}
.kanban-task.kanban-readonly{cursor:default;opacity:.92}
.kanban-task[draggable="true"],.kanban-task[draggable="true"] *{user-select:none;-webkit-user-select:none}
.kanban-task[draggable="true"] input,.kanban-task[draggable="true"] textarea,.kanban-task[draggable="true"] [contenteditable="true"]{user-select:text;-webkit-user-select:text}
.kanban-task:active,.kanban-task.dragging{cursor:grabbing;opacity:.55}
.kanban-task.kanban-done{border-left-color:var(--good)}
.kanban-task:has(.kanban-exception.flagged){border:1px solid #f1c45f;border-left:4px solid #c6283d;background:linear-gradient(115deg,#fff0c2 0%,#fff8e8 48%,var(--card) 100%);box-shadow:0 3px 10px rgba(151,36,48,.13)}
.kanban-task .kanban-exception.flagged{background:#c6283d;color:#fff}
.kanban-task .kanban-exception.flagged::before{content:'⚑';margin-right:4px;font-size:11px}
.kanban-task-top,.kanban-task-foot{display:flex;min-width:0;justify-content:space-between;align-items:center;gap:6px}
.kanban-task-top>span:first-child{min-width:0;max-width:100%;overflow:hidden}
.kanban-card-top-right{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;flex:0 0 auto}
.kanban-attention-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:100px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;line-height:1.35;white-space:nowrap}
.kanban-task-title{display:block;width:100%;padding:4px 0 3px;border:0;background:transparent;color:var(--ink);font-size:13px;font-weight:800;text-align:left;cursor:pointer;line-height:1.25}
.kanban-task-title:hover{text-decoration:underline}
.kanban-task-meta{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:4px}
.kanban-assignee-chip{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;padding:3px 7px;margin:0 0 4px;border-radius:999px;background:rgba(43,65,230,.09);color:var(--blue);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kanban-assignee-chip strong{overflow:hidden;text-overflow:ellipsis}
.kanban-task-context{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:5px}
.kanban-task-foot{font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding-top:5px;min-height:25px;flex-wrap:wrap;row-gap:5px}
.kanban-task-foot .work-due-badge{white-space:nowrap}
.kanban-task-foot-main{display:flex;align-items:center;justify-content:space-between;gap:6px;flex:1 1 100%}
.kanban-task-foot .support-ticket-marker{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 70px);text-align:left}
.kanban-task-top .support-ticket-marker{display:none}
.kanban-task-meta [data-action="open-ticket"]{display:none}
.kanban-task-foot .sm{font-size:10px;padding:3px 7px;margin-left:4px;white-space:nowrap}
.kanban-task-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;margin-left:auto;flex:0 0 auto;flex-wrap:wrap}
.kanban-task-foot strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.kanban-view-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kanban-density-toggle{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--card);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.kanban-density-toggle input{margin:0;accent-color:var(--blue)}
.kanban-exception{display:inline-flex;align-items:center;border-radius:999px;padding:2px 6px;font-size:9px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.kanban-exception.warn{background:#fff4d6;color:#805b00}.kanban-exception.bad{background:#fee2e2;color:#991b1b}.kanban-exception.good{background:#dcfce7;color:#166534}
.kanban-card-compact{padding:6px 7px;margin-bottom:5px;min-height:0}
.kanban-card-compact .kanban-task-top{min-height:17px;margin-bottom:2px}
.kanban-compact-controls{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.kanban-card-compact .kanban-compact-accept{min-height:22px;padding:3px 7px;font-size:10px}
.task-estimate-allocation{padding:8px 10px;margin:0 0 12px;border:1px solid var(--line);border-left:3px solid var(--good);border-radius:7px;background:rgba(10,165,118,.05);font-size:12px}
.task-estimate-allocation.over{border-left-color:var(--bad);background:rgba(217,38,78,.06);color:var(--bad)}
.story-estimate-hint{margin-top:4px;line-height:1.4}
.kanban-compact-clock{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:var(--blue);color:#fff;font-size:9px;line-height:1;cursor:pointer;box-shadow:0 1px 3px rgba(43,65,230,.28)}
.kanban-compact-clock:hover,.kanban-compact-clock:focus-visible{background:#1831c8;outline:2px solid rgba(43,65,230,.28);outline-offset:2px}
.kanban-compact-clock.is-running{background:var(--bad)}
.kanban-card-compact .kanban-task-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:2px 0 4px;font-size:12px;line-height:1.2}
.kanban-compact-meta{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-width:0;color:var(--muted);font-size:10px;line-height:1.25}
.kanban-compact-meta .kanban-compact-context,.kanban-compact-meta strong{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kanban-compact-meta .kanban-compact-separator{flex:0 0 auto}
.kanban-compact-meta strong{color:var(--ink)}
.kanban-compact-meta .work-due-badge{flex:0 0 auto;white-space:nowrap}
.kanban-card-compact .work-due-badge{padding:0;border:0;background:transparent;font-size:10px}
.kanban-card-compact .work-due-badge.bad{color:var(--bad)}.kanban-card-compact .work-due-badge.warn{color:#9a6700}.kanban-card-compact .work-due-badge.good{color:var(--muted)}
/* empty kanban column — still the dashed drop target, now holding the shared .empty.compact block */
.kanban-empty{display:flex;flex-direction:column;justify-content:center;min-height:120px;border:1px dashed var(--border);border-radius:var(--radius-md);color:var(--text-3);font-size:12px}
.ticket-hero{margin-bottom:12px}
.ticket-workflow-filters{justify-content:flex-end}
.ticket-workflow-filters .work-metric{min-width:78px;padding:8px 10px}
.ticket-workflow-filters .work-metric-label{font-size:10px}
.ticket-register-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.ticket-register-tools .project-search-wrap{min-width:240px;flex:1 1 360px}
.ticket-register-tools select{min-width:170px;flex:0 1 230px}
.ticket-filter-summary{margin-left:auto;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
@media (max-width:900px){
  .kanban-aux-grid{grid-template-columns:1fr}
  .work-hero-right{justify-content:flex-start}
  .ticket-workflow-filters{justify-content:flex-start}
}
@media (max-width:700px){
  .ticket-list-item{grid-template-columns:minmax(0,1fr) auto}
  .ticket-list-date{grid-column:1;grid-row:2;justify-self:start;margin-top:-4px}
  .ticket-list-item .work-item-actions{grid-column:2;grid-row:1 / span 2}
  .ticket-register-tools select{flex:1 1 160px}
  .ticket-filter-summary{margin-left:0}
}
.project-detail-pill-tabs{display:none !important}
[data-pill-section="standing"],[data-pill-section="tickets"]{display:none !important}
.project-type-chip,.project-type-inline,#mp-project-type{font-weight:700}
.project-type-client{background:#eef4ff !important;color:#315b91 !important;border-color:#c9d9f2 !important}
.project-type-internal{background:#f1f3f6 !important;color:#536174 !important;border-color:#d7dee8 !important}
.project-type-support{background:#fff7d6 !important;color:#806000 !important;border-color:#f0d477 !important}
.readonly-field{min-height:38px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);}
.inline-change-reason{margin-top:9px;padding:10px 12px;border:1px solid #cbd6ff;border-radius:8px;background:#f6f8ff}
.inline-change-reason label{display:block;margin-bottom:5px;font-size:12px;font-weight:700;color:var(--ink)}
.inline-change-reason textarea{width:100%;resize:vertical;min-height:52px}
.ticket-detail-change-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:8px}
.ticket-detail-change-fields .field{margin-bottom:0}
.ticket-detail-change-fields .date-picker{width:100%}
.ticket-detail-change-reason{margin:0 0 12px}
.ticket-detail-properties{display:grid;gap:10px;margin:12px 0}
.ticket-title-field{display:grid;gap:5px;margin:8px 0 12px}
.ticket-title-field label{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.ticket-title-field input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:19px;font-weight:800}
.ticket-title-readonly{margin:8px 0 12px;font-size:19px}
.ticket-detail-field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.ticket-detail-properties .field{display:grid;align-content:start;gap:4px;min-width:0;margin:0}
.ticket-detail-properties .field>label{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.ticket-detail-properties .field>select,.ticket-detail-properties .field .datepick-display,.ticket-detail-properties .field .combobox-input{width:100%;min-height:34px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:12px}
.ticket-detail-properties .field .combobox{width:100%;min-width:0}
.ticket-detail-properties .field .small{margin-top:2px}
.ticket-detail-fields{display:grid;gap:10px;min-width:0}
.ticket-detail-fields>.field{display:grid;gap:4px;margin:0}
.ticket-detail-fields>.field>label{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.ticket-detail-fields select{width:100%;min-height:34px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:12px}
.ticket-detail-hint{grid-column:1/-1;margin-top:-4px}
.ticket-detail-change-reason[hidden]{display:none}
.ticket-detail-change-reason label{display:block;margin-bottom:5px;color:var(--muted);font-size:11px;font-weight:700}
.ticket-detail-change-reason textarea{width:100%;min-height:48px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:12px;resize:vertical}
.ticket-detail-change-reason .small{display:block;margin-top:4px}
.ticket-autosave-status{min-height:16px;text-align:right;margin-top:-8px;margin-bottom:8px}
.ticket-readonly-notice{margin:0 0 12px;padding:10px 12px;border:1px solid #cbd6ff;border-radius:8px;background:#f6f8ff;color:#39477a;font-size:12px;font-weight:600}
#tk-state-guidance[data-tone="bad"]{color:var(--bad)}
#tk-state-guidance[data-tone="warn"]{color:var(--warn)}
#tk-state-guidance[data-tone="good"]{color:var(--good)}
.ticket-pill.pill-hold{background:#fff1c2;color:#765400;border:1px solid #edcf69}
.ticket-description-context>label{display:block;margin:0 0 5px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ticket-description-context .ticket-desc{margin-bottom:12px!important}
.ticket-description-editor{width:100%;min-height:90px;padding:10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font:inherit;resize:vertical}
.ticket-field-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.ticket-field-summary .sm{flex:0 0 auto;padding:4px 9px}
.ticket-detail-workspace .task-workspace-main{padding:18px 22px}
.ticket-detail-workspace .task-workspace-identity .support-ticket{background:#fff7d6;color:#806000}
.ticket-activity-panel .task-ticket-conversation{display:flex;flex-direction:column}
.ticket-activity-panel .ticket-replies{flex:1 1 auto;min-height:80px;overflow-y:auto;margin:0;padding:10px 4px}
.ticket-activity-panel .ticket-reply{flex:0 0 auto;border:1px solid var(--line);border-left:3px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 10px;box-shadow:0 1px 2px rgba(14,19,48,.04)}
.ticket-activity-panel .ticket-reply-client{border-left-color:#edbf45}
.ticket-activity-panel .ticket-reply-staff{border-left-color:var(--blue)}
.ticket-activity-panel .ticket-reply-requester-change{border-left-color:#7295dd}
.ticket-activity-panel .field{flex:0 0 auto}
@media (max-width:560px){.ticket-detail-field-pair{grid-template-columns:1fr}.ticket-detail-change-fields{grid-template-columns:1fr}}

/* ── DESIGN.md: motion + icon helpers ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){ :root{ --dur-fast:0ms; --dur-base:0ms } }
.i{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.i-20{width:20px;height:20px;vertical-align:-4px}

/* ── DESIGN.md P1 · table system + Projects register (reference page) ─────── */
.main{max-width:var(--max-content);margin:0 auto}
.card{border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.card-title h2{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em}
.card-title .count{background:transparent;border:0;padding:0;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-3)}
table{font-size:var(--fs-base)}
th{font-size:var(--fs-xs);letter-spacing:.04em;color:var(--text-3);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 12px;height:40px;vertical-align:middle;color:var(--text-1)}
tr:hover td{background:var(--hover-tint)}
.filter-tabs{gap:2px}
.filter-tabs .tab{padding:8px 10px;font-size:var(--fs-base);font-weight:600;color:var(--text-2)}
.filter-tabs .tab-count{background:transparent;border:0;padding:0;margin-left:4px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3)}
.filter-tabs .tab.on .tab-count{background:transparent;color:var(--accent)}
.project-register-tools{gap:var(--sp-2);margin:0 0 var(--sp-3)}
.project-register-tools input:not([type=checkbox]),.project-register-tools select{height:36px;padding-top:0;padding-bottom:0;font-size:var(--fs-base);border-radius:var(--r-sm)}
td .project-link{font-weight:600;font-size:var(--fs-md);color:var(--text-1);text-decoration:none}
td .project-link:hover{color:var(--accent)}
td .project-link strong{font-weight:600}
td .small.muted{font-size:var(--fs-xs);color:var(--text-3)}
.project-status-inline,.project-type-inline{appearance:none;-webkit-appearance:none;height:auto;min-width:0;border-radius:var(--r-xs);padding:3px 20px 3px 8px;font:inherit;font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.3;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7194' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 5px center;background-size:10px}
.project-type-inline{text-transform:none;letter-spacing:0;font-weight:600;background-color:var(--paper);color:var(--text-2);border:1px solid var(--line)}
.project-type-inline.project-type-support{background-color:var(--yellow-tint);color:#7a5a00;border-color:#efe0a6}
.chip.project-type-chip,.chip[class*="project-status-"]{border-radius:var(--r-xs);font-size:var(--fs-xs);padding:3px 8px}
.project-progress{min-width:110px;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:400;color:var(--text-3)}
.project-progress-bar{height:6px;margin-bottom:5px}
.date-wrap{position:relative;display:inline-block}
.date-text{border:0;background:transparent;padding:0;font:inherit;font-family:var(--font-mono);font-size:var(--fs-base);color:var(--text-1);cursor:pointer;text-align:left}
.date-text:hover{color:var(--accent);transform:none}
.date-text .muted{font-family:var(--font-ui);font-weight:500}
.date-hidden{position:absolute;inset:0;width:100%;height:100%;min-width:0;opacity:0;pointer-events:none;border:0;padding:0;margin:0}
.project-active-toggle{white-space:nowrap}
.row-actions{display:flex;gap:2px;justify-content:flex-end}
.row-actions .icon-btn{opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.row-actions .icon-btn[class*="health-"],tr:hover .row-actions .icon-btn,tr:focus-within .row-actions .icon-btn{opacity:1}
button.icon-btn svg{stroke-width:1.75}
/* P1 fix-ups: status chips as tint+ink, no wrapping in data cells, flat view selector */
.chip.project-status-backlog,.project-status-inline.project-status-backlog{background:var(--paper);color:var(--text-2);border:1px solid var(--line)}
.chip.project-status-quote,.project-status-inline.project-status-quote{background:var(--pink-tint);color:var(--pink-ink);border:1px solid transparent}
.chip.project-status-scheduled,.project-status-inline.project-status-scheduled{background:var(--yellow-tint);color:#7a5a00;border:1px solid transparent}
.chip.project-status-active,.project-status-inline.project-status-active{background:var(--accent-tint);color:var(--blue);border:1px solid transparent}
.chip.project-status-paused,.project-status-inline.project-status-paused{background:var(--warn-tint);color:var(--warn-ink);border:1px solid transparent}
.chip.project-status-signoff,.project-status-inline.project-status-signoff{background:#efe7fb;color:#5d2a91;border:1px solid transparent}
.chip.project-status-complete,.project-status-inline.project-status-complete{background:var(--good-tint);color:var(--good-ink);border:1px solid transparent}
.chip.project-status-cancelled,.project-status-inline.project-status-cancelled{background:var(--bad-tint);color:var(--bad-ink);border:1px solid transparent}
tr[data-project-row] td:nth-child(2),tr[data-project-row] td:nth-child(4),tr[data-project-row] td:nth-child(7),tr[data-project-row] td:nth-child(8),tr[data-project-row] td:nth-child(9),tr[data-project-row] td:nth-child(10){white-space:nowrap}
.date-text,.date-wrap{white-space:nowrap}
.project-visibility-filter{border:0;background:transparent;box-shadow:none;padding:0;gap:6px}
.project-visibility-filter select{height:36px;min-width:120px;padding:0 28px 0 10px;border-color:var(--line);background:#fff;color:var(--text-1);font-size:var(--fs-base);font-weight:500;border-radius:var(--r-sm)}
tr[data-project-row] td:first-child{min-width:180px;white-space:normal}
tr[data-project-row] td:nth-child(6){white-space:normal;min-width:120px}
/* P1: row actions collapse to info + ⋯ menu (fits the register inside the content cap) */
.row-actions{position:relative;gap:0}
.row-actions .icon-btn{width:28px;height:28px}
.row-actions .icon-btn.more{opacity:0}
tr:hover .row-actions .icon-btn.more,tr:focus-within .row-actions .icon-btn.more,.row-actions .icon-btn.more[aria-expanded="true"]{opacity:1}
.row-more{position:relative;display:inline-flex}
.row-menu{position:absolute;right:0;top:calc(100% + 4px);min-width:188px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-2);z-index:var(--z-dropdown);display:flex;flex-direction:column;text-align:left}
.row-menu[hidden]{display:none}
.row-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:var(--r-xs);font:inherit;font-size:var(--fs-base);font-weight:500;color:var(--text-1);text-align:left;cursor:pointer;white-space:nowrap}
.row-menu-item:hover{background:var(--hover-tint);transform:none}
.row-menu-item.danger{color:var(--bad)}
.row-menu-item.danger:hover{background:var(--bad-tint)}
.row-menu-item svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.row-menu-sep{height:1px;margin:4px 6px;background:var(--line)}
/* P1: register column collapse — the table always fits its card; never page-level x-scroll.
   Column order: 1 Name · 2 Type · 3 Client · 4 Status · 5 Progress · 6 Project admin · 7 Start · 8 Due · 9 Active · 10 actions */
@media (max-width:1180px){
  .card:has(tr[data-project-row]) th:nth-child(6),.card:has(tr[data-project-row]) th:nth-child(7),
  tr[data-project-row] td:nth-child(6),tr[data-project-row] td:nth-child(7){display:none}
  tr[data-project-row] td{padding-left:10px;padding-right:10px}
}
@media (max-width:1000px){
  .card:has(tr[data-project-row]) th:nth-child(2),.card:has(tr[data-project-row]) th:nth-child(5),
  tr[data-project-row] td:nth-child(2),tr[data-project-row] td:nth-child(5){display:none}
}
@media (max-width:800px){
  .card:has(tr[data-project-row]) th:nth-child(3),.card:has(tr[data-project-row]) th:nth-child(8),
  tr[data-project-row] td:nth-child(3),tr[data-project-row] td:nth-child(8){display:none}
  .project-active-toggle em{display:none}
}
@media (max-width:620px){
  tr[data-project-row] td{white-space:normal}
  tr[data-project-row] td:first-child{min-width:0}
}
/* P1: .main must never exceed the viewport — explicit width (not shrink-to-fit) under the content cap; lifecycle tabs wrap on narrow viewports */
.main{width:min(100%,var(--max-content));max-width:none;margin:0 auto;min-width:0}
@media (max-width:1180px){
  .project-status-tabs{flex-wrap:wrap;overflow:visible;row-gap:4px}
  .project-visibility-filter{position:static;margin-left:auto}
}

/* ── DESIGN.md P2 · Work: list + Kanban card pattern (applied via Codex's shared renderers) ──────── */
/* hero: the gradient panel + stat tiles + view controls are defined once, in the
   "Work hero — consolidated" block at the end of this file. */
/* bands: section titles, rows as lines inside one panel (rule 6) */
.card:has(.work-list) .card-title h2{font-size:var(--fs-lg)}
.work-list{gap:0}
.work-item{background:transparent;border:0;border-bottom:1px solid var(--line);border-left:3px solid transparent;border-radius:0;padding:10px 6px 10px 10px}
.work-item:last-child{border-bottom:0}
.work-item:hover{background:var(--hover-tint)}
.work-item.kind-released{border-left-width:3px}
.work-item.overdue{border-left:3px solid var(--bad);background:transparent}
.work-item.sent-back{border-left:3px solid var(--warn)}
.work-item.signed{border-left-color:transparent;opacity:.8}
.work-item.clocking{border-color:transparent;border-bottom-color:var(--line);box-shadow:none;background:var(--good-tint)}
.work-item.clocking::before{display:none}
.ticket-list-item,.support-ticket-list-card{background:transparent;border-left-color:transparent}
.work-item-topline{font-size:var(--fs-xs);color:var(--text-3)}
.work-item-project,.work-parent-trail{font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.work-item-code{font-family:var(--font-mono);font-weight:400;color:var(--text-2)}
.work-item-title{font-size:var(--fs-md);font-weight:600;line-height:1.3}
.work-item-context{font-size:var(--fs-sm);color:var(--text-3);margin-top:3px}
.work-item-context strong{font-weight:600;color:var(--text-2)}
.work-type-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.03em;color:var(--text-3)}
.work-item-est{font-family:var(--font-mono);font-weight:400;min-width:76px}
.work-item-est .wie-logged{font-size:var(--fs-md);font-weight:700}
.work-item-est .wie-sub{font-size:var(--fs-xs);font-weight:400}
.work-review-note{font-size:var(--fs-sm);border-radius:var(--r-sm);background:var(--warn-tint);color:var(--text-1)}
.work-review-note strong{color:var(--warn-ink);font-weight:700}
.age-badge{font-size:10px}
/* type / level badges → tint + ink rectangles (rule 3) */
.work-level-badge,.kanban-type-badge{border-radius:var(--r-xs);padding:2px 7px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em;border:1px solid transparent;color:var(--text-2);background:var(--paper)}
.work-level-badge.epic{background:#efe7fb;color:#5d2a91}
.work-level-badge.story,.work-level-badge.feature,.kanban-type-badge.feature{background:var(--accent-tint);color:var(--blue)}
.work-level-badge.sub-task{background:var(--good-tint);color:var(--good-ink)}
.work-level-badge.bug,.kanban-type-badge.bug{background:var(--bad-tint);color:var(--bad-ink)}
.work-level-badge.request,.kanban-type-badge.request{background:var(--yellow-tint);color:#7a5a00}
.support-ticket-marker{border-radius:var(--r-xs)}
/* due → semantic colour on the text, not a pill */
.work-due-badge{background:transparent;padding:0;border-radius:0;font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;letter-spacing:0;color:var(--text-2)}
.work-due-badge.good{color:var(--text-2)}
.work-due-badge.warn{color:var(--warn-ink)}
.work-due-badge.bad{color:var(--bad-ink);font-weight:700}
.work-due-badge.muted{color:var(--text-3);font-weight:400}
.work-item-due-wrap{min-width:120px;text-align:right}
/* chips → rectangles, tint + ink (system-wide; pills stay only for counts/people/nav) */
.chip{border-radius:var(--r-xs);padding:2px 7px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em}
.chip.blue{background:var(--accent-tint);color:var(--blue)}
.chip.pink{background:var(--pink-tint);color:var(--pink-ink)}
.chip.purple{background:#efe7fb;color:#5d2a91}
.chip.yellow{background:var(--yellow-tint);color:#7a5a00}
.chip.muted{background:var(--paper);border:1px solid var(--line);color:var(--text-3)}
.chip.good{background:var(--good-tint);color:var(--good-ink)}
.chip.warn{background:var(--warn-tint);color:var(--warn-ink)}
.chip.bad{background:var(--bad-tint);color:var(--bad-ink);border:1px solid transparent;padding:2px 7px;font-size:var(--fs-xs);border-radius:var(--r-xs)}
.chip.clocking-chip{background:var(--good-tint);color:var(--good-ink);border:1px solid transparent}
.kanban-exception{border-radius:var(--r-xs);padding:2px 7px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em}
.kanban-exception.warn{background:var(--warn-tint);color:var(--warn-ink)}
.kanban-exception.bad{background:var(--bad-tint);color:var(--bad-ink)}
.kanban-exception.good{background:var(--good-tint);color:var(--good-ink)}
/* Kanban board */
.kanban-board{gap:10px}
.kanban-column{border-radius:var(--r-md)}
.kanban-column-head{padding:10px 12px;border-radius:var(--r-md) var(--r-md) 0 0}
.kanban-column-head h2{font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.kanban-column-head .count{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-3);background:transparent;border:0;padding:0}
.kanban-column-body{padding:8px}
.kanban-task{border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-3);margin-bottom:8px;box-shadow:var(--shadow-1)}
.kanban-task.kanban-done{border-left:1px solid var(--line);opacity:.85}
.kanban-task:has(.kanban-exception.bad),.kanban-task:has(.work-due-badge.bad){border-left:3px solid var(--bad)}
.kanban-task:has(.kanban-exception.warn){border-left:3px solid var(--warn)}
.kanban-task-top{font-size:var(--fs-xs);color:var(--text-3)}
.kanban-task-top .mono{font-family:var(--font-mono);color:var(--text-2)}
.kanban-task-title{font-size:var(--fs-md);font-weight:600;line-height:1.3;padding:6px 0 4px;white-space:normal}
.kanban-assignee-chip{background:transparent;padding:0;margin:0 0 2px;border-radius:0;color:var(--text-2);font-size:var(--fs-sm);gap:6px;width:auto}
.kanban-assignee-chip strong{font-weight:600;color:var(--text-1)}
.kanban-assignee-chip .i{width:14px;height:14px;color:var(--text-3)}
.kanban-task-meta,.kanban-task-context{font-size:var(--fs-xs);color:var(--text-3)}
.kanban-task-foot{margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.kanban-task-foot-main strong{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-sm);color:var(--text-2)}
.kanban-compact-meta{font-size:var(--fs-xs)}
/* small buttons (card actions) + motion: no hover lift (functional motion only) */
button.sm,.btn.sm{padding:4px 10px;font-size:var(--fs-sm);font-weight:600;border-radius:var(--r-sm);min-height:28px;display:inline-flex;align-items:center;gap:6px;line-height:1}
button .i{width:14px;height:14px;vertical-align:-2px}
button:hover,.btn:hover{transform:none}
button.danger{border-color:#f5b8c4;color:var(--bad-ink)}
button.ghost{color:var(--accent)}
/* P2.1: due badges — tone classes outrank the base rule, so clear their fills explicitly */
.work-due-badge.good,.work-due-badge.warn,.work-due-badge.bad,.work-due-badge.muted{background:transparent;padding:0;border-radius:0}
.kanban-task-foot-main .work-due-badge,.work-item-due-wrap .work-due-badge{white-space:nowrap}

/* ── Dark theme (Agile Admin, designed navy family). Opt-in via <html data-theme="dark">. ── */
:root[data-theme="dark"]{
  --blue:#60A5FA; --blue-ink:#3B82F6; --pink:#60A5FA; --yellow:#FBBF24;
  --ink:#F1F5F9; --paper:#0F1A30; --card:#1E2A4A; --line:#34435F; --muted:#94A3B8;
  --good:#4ADE80; --warn:#F59E0B; --bad:#FB7185;
  --text-1:#F1F5F9; --text-2:#CBD5E1; --text-3:#94A3B8;
  --accent:#60A5FA; --accent-hover:#3B82F6; --accent-active:#2563EB; --accent-tint:#27406E; --accent-ink:#DBEAFE; --on-accent:#0F1A30;
  --hover-tint:rgba(96,165,250,.10);
  --good-tint:#14321F; --good-ink:#4ADE80;
  --warn-tint:#F59E0B; --warn-ink:#1E2A4A;
  --bad-tint:#3B1A22; --bad-ink:#FB7185;
  --info-tint:#273655; --info-ink:#94A3B8;
  --border-strong:#4A5B7A;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 12px rgba(0,0,0,.5); --shadow-3:0 12px 32px rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.5);
  --focus-ring:0 0 0 3px rgba(96,165,250,.35),0 0 0 1px var(--accent);
}
:root[data-theme="dark"] body, :root[data-theme="dark"] .main{background:var(--paper)}


/* ── reskin-2: Phosphor icons are fill-based (not stroke) ───────────────── */
:root{ --warn-solid:#F59E0B }
.i,.i-20{fill:currentColor!important;stroke:none!important}
button.icon-btn svg,.row-menu-item svg{fill:currentColor!important;stroke:none!important}

/* ── reskin-2: exception RAILS → status DOTS (warning stays solid) ───────── */
/* flatten the coloured left rails on list rows and kanban cards */
.work-item,.work-item.overdue,.work-item.sent-back,.work-item.kind-released{border-left-color:transparent}
.work-item.clocking::before{display:none}
.kanban-task,.kanban-task.kanban-done,
.kanban-task:has(.kanban-exception.bad),.kanban-task:has(.kanban-exception.warn),.kanban-task:has(.work-due-badge.bad){border-left:1px solid var(--line)}
/* a dot at the start of the identity line, coloured by the critical exception */
.work-item.overdue .work-item-topline::before,.work-item.sent-back .work-item-topline::before,
.kanban-task:has(.kanban-exception.bad) .kanban-task-top::before,
.kanban-task:has(.work-due-badge.bad) .kanban-task-top::before,
.kanban-task:has(.kanban-exception.warn) .kanban-task-top::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;flex:0 0 auto}
.work-item.overdue .work-item-topline::before,
.kanban-task:has(.kanban-exception.bad) .kanban-task-top::before,
.kanban-task:has(.work-due-badge.bad) .kanban-task-top::before{background:var(--bad)}
.work-item.sent-back .work-item-topline::before,
.kanban-task:has(.kanban-exception.warn) .kanban-task-top::before{background:var(--warn-solid)}
/* clocking row keeps its green-tint background; add a signal dot instead of a rail */
.work-item.clocking .work-item-topline::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--signal)}

/* ── reskin-2: neutralize the old pink WBS rails + status gradients (P3 not restyled yet) ── */
.wbs-row[data-depth="0"]{border-left-color:var(--line)!important;background:var(--card)!important}
.wbs-row.status-done,.wbs-row.status-progress,.wbs-row.status-rework,.wbs-row.status-todo{background:var(--card)!important}
.wbs-row.status-done{border-left-color:var(--good)!important}
.wbs-row.status-progress{border-left-color:var(--accent)!important}
.wbs-row.status-rework{border-left-color:var(--warn-solid)!important}

/* ========================================================================
   Option C — port to the UI-guide component anatomy.
   (1) alias-token bridge so guide token names resolve to our values
   (2) chip/badge system app-wide  (3) Projects register
   ======================================================================== */
:root{
  --border:var(--line); --surface:var(--card); --surface-2:#F1F3F7; --bg:var(--paper);
  --success:var(--good); --success-tint:var(--good-tint); --success-strong:var(--good-ink);
  --warning:var(--warn-tint); --on-warning:var(--warn-ink);          /* --warn-tint is the solid #F59E0B */
  --warning-tint:#FEF3C7; --warning-strong:var(--warn);              /* soft amber wash + its ink (notification banner) */
  --error:var(--bad); --error-tint:var(--bad-tint); --error-strong:var(--bad-ink);
  --info:var(--info-ink); --info-strong:var(--info-ink);
  --accent-ink:var(--accent-active);
  --font-body:var(--font-ui);
  --text-body:var(--fs-base); --text-caption:var(--fs-sm); --text-code:var(--fs-sm); --text-overline:var(--fs-xs);
  --text-h3:18px; --icon-md:20px;
  --radius-sm:var(--r-xs); --radius-md:var(--r-sm); --radius-lg:var(--r-md); --radius-full:999px;
  --shadow-sm:var(--shadow-1); --shadow-md:var(--shadow-2); --shadow-lg:var(--shadow-3);
  --duration-fast:var(--dur-fast); --duration-base:var(--dur-base);
  --z-shell:40; --z-drawer:80; --z-tooltip:800;                       /* shell sits under the modal scrim (100) */
}
:root[data-theme="dark"]{ --surface-2:#273655; --border:var(--line); --warning-tint:#3A2A08; --warning-strong:#F59E0B; }

/* --- (2) Chips → guide .badge (tint + ink, Geist 600, soft radius). No ALLCAPS. --- */
.chip{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--font-body);letter-spacing:.02em;
  padding:4px 8px;border-radius:var(--radius-sm);white-space:nowrap;border:1px solid transparent;text-transform:none;vertical-align:middle}
.chip.blue,.chip.pink{background:var(--accent-tint);color:var(--accent-ink)}
.chip.purple{background:#EFE7FB;color:#5D2A91}
.chip.yellow{background:var(--warning);color:var(--on-warning)}
.chip.muted{background:var(--surface-2);color:var(--text-2);border-color:transparent}
.chip.good{background:var(--success-tint);color:var(--success-strong)}
.chip.warn{background:var(--warning);color:var(--on-warning)}
.chip.bad{background:var(--error-tint);color:var(--error-strong)}
.chip.clocking-chip{background:var(--signal);color:var(--ink)}
/* type/level badge (Epic/Story/Sub-task/Bug/Feature/Request) → neutral/tinted, no dot */
.work-level-badge{display:inline-flex;align-items:center;font:600 11px/1 var(--font-body);letter-spacing:.02em;
  padding:4px 8px;border-radius:var(--radius-sm);text-transform:none;border:1px solid transparent}
.kanban-type-badge{gap:4px;border-radius:var(--radius-sm);border:1px solid transparent;font-weight:600;letter-spacing:.02em;text-transform:none}

/* --- (3) Register (Projects/People/Clients/Tickets) → guide .reg treatment --- */
.card table{border-collapse:collapse}
.card table th{background:var(--surface-2);text-align:left;font:600 var(--text-caption) var(--font-display);
  letter-spacing:.03em;text-transform:none;color:var(--text-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border)}
.card table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);color:var(--text-1);vertical-align:middle}
.card table tr:hover td{background:var(--hover-tint)}

/* status: borderless inline select, coloured text, border reveals on row hover (not a filled chip) */
.project-status-inline{appearance:none;-webkit-appearance:none;background:transparent!important;background-image:none!important;
  border:1px solid transparent!important;font:600 var(--text-body) var(--font-body)!important;letter-spacing:0!important;text-transform:none!important;
  cursor:pointer;border-radius:var(--radius-sm);padding:3px 6px!important;min-width:0}
tr:hover .project-status-inline{border-color:var(--border)!important}
.project-status-inline.project-status-active{color:var(--accent-active)}
.project-status-inline.project-status-signoff{color:var(--info-strong)}
.project-status-inline.project-status-complete{color:var(--good-ink)}
.project-status-inline.project-status-paused{color:var(--warn-strong,#B45309)}
.project-status-inline.project-status-cancelled{color:var(--bad-ink)}
.project-status-inline.project-status-backlog,.project-status-inline.project-status-quote,.project-status-inline.project-status-scheduled{color:var(--text-2)}

/* project type: quiet neutral badge */
.chip.project-type-chip,.project-type-inline{background:var(--surface-2);color:var(--text-2);border:1px solid transparent;
  font:600 11px/1 var(--font-body);border-radius:var(--radius-sm);padding:4px 8px;text-transform:none;letter-spacing:.02em}
.project-type-inline.project-type-support{background:var(--warning);color:var(--on-warning)}

/* progress: single clean accent bar + mono caption (drop the 3-segment clutter) */
.project-progress{font-family:var(--font-mono);font-size:var(--text-code);color:var(--text-2);font-weight:400}
.project-progress-bar{height:8px;background:var(--surface-2);border-radius:var(--radius-full);margin-bottom:5px;overflow:hidden}
.project-progress-bar .done{background:var(--accent)}
.project-progress-bar .doing,.project-progress-bar .todo{display:none}

/* date cell: mono, dashed-underline reveal on hover */
.date-text{font-family:var(--font-mono);font-size:var(--text-code);color:var(--text-2);border-bottom:1px dashed transparent;padding:0}
tr:hover .date-text{border-bottom-color:var(--border-strong)}
.date-text .muted{font-family:var(--font-body);color:var(--text-3)}

/* active toggle → guide switch (40×22) */
.project-active-toggle span{width:40px;height:22px;border-radius:var(--radius-full);background:var(--border-strong)}
.project-active-toggle span:after{width:18px;height:18px;top:2px;left:2px}
.project-active-toggle.on span{background:var(--accent)}
.project-active-toggle.on span:after{transform:translateX(18px)}

/* row actions: borderless, text-3, hover-reveal (keep info + ⋯) */
.row-actions .icon-btn{background:none!important;border:0!important;color:var(--text-3)!important;width:28px;height:28px;border-radius:var(--radius-sm)}
.row-actions .icon-btn:hover{background:var(--surface-2)!important;color:var(--text-1)!important}
.row-actions .icon-btn.danger:hover{color:var(--bad-ink)!important}

/* section/card title + count → guide eyebrow/h2 feel */
.card-title h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}
.card-title .count{font-family:var(--font-mono);color:var(--text-3)}

/* ===== Option C — Work: list rows (refine) + Kanban card → guide .wi anatomy ===== */

/* --- Work LIST: keep hairline rows in one band; refine type to guide treatment --- */
.work-item-topline{font-size:var(--text-caption);color:var(--text-3)}
.work-item-code{font-family:var(--font-mono);color:var(--text-2);font-weight:400}
.work-item-project,.work-parent-trail{font-weight:500;color:var(--text-3)}
.work-item-title{font-weight:500;font-size:var(--text-body);color:var(--text-1);line-height:1.35}
.work-item-context{font-size:var(--text-caption);color:var(--text-2)}
.work-item-context strong{font-weight:600;color:var(--text-1)}
.work-item-est{font-family:var(--font-mono);font-size:var(--text-code);color:var(--text-2)}
.work-item-est .wie-logged{font-weight:500;font-size:var(--text-body);color:var(--text-1)}
.work-item-est .wie-logged.over{color:var(--error-strong)}
.work-item-est .wie-sub{font-size:var(--text-caption);color:var(--text-3);font-weight:400}
.work-due-badge{font-family:var(--font-mono);font-size:var(--text-code);background:transparent;padding:0;font-weight:600}
.work-due-badge.good{color:var(--text-2)} .work-due-badge.warn{color:var(--warn-strong,#B45309)} .work-due-badge.bad{color:var(--bad-ink);font-weight:600}
.work-review-note{font-size:var(--text-caption);color:var(--text-2);background:var(--error-tint);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3)}
.work-review-note strong{color:var(--error-strong)}

/* --- Kanban COLUMN → guide .kcol (card sits on a grey column) --- */
.kanban-column{background:var(--surface-2);border:0;border-radius:var(--radius-md)}
.kanban-column-head{background:var(--surface-2);border-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:var(--space-3);
  font:600 var(--text-caption) var(--font-display);letter-spacing:.03em;text-transform:none;color:var(--text-2)}
.kanban-column-head h2{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.kanban-column-head .count{background:var(--surface);border:0;border-radius:var(--radius-full);padding:1px 8px;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-2)}
.kanban-column-body{padding:0 var(--space-2) var(--space-2)}

/* --- Kanban CARD → guide .wi (white, border, flat, vertical flow) --- */
.kanban-task{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);box-shadow:none}
.kanban-task:hover{box-shadow:none;border-color:var(--border-strong)}
.kanban-task.kanban-readonly{border-style:dashed;opacity:1;background:var(--surface)}
.kanban-task-top{font-size:var(--text-caption);color:var(--text-3);align-items:center}
.kanban-task-top .mono{font-family:var(--font-mono);color:var(--text-2)}
.kanban-task-title{font-weight:500;font-size:var(--text-body);color:var(--text-1);line-height:1.35;padding:0}
.kanban-task-title:hover{text-decoration:none;color:var(--accent)}
.kanban-assignee-chip{font-size:var(--text-caption);color:var(--text-2);gap:6px}
.kanban-assignee-chip strong{font-weight:600;color:var(--text-1)}
.kanban-assignee-chip .i{color:var(--text-3)}
.kanban-task-meta,.kanban-task-context{font-size:var(--text-caption);color:var(--text-3)}
.kanban-task-foot{margin-top:2px;padding-top:var(--space-2);border-top:1px solid var(--border)}
.kanban-task-foot-main{font-family:var(--font-mono);font-size:var(--text-code);color:var(--text-2)}
.kanban-task-foot-main strong{font-weight:600;color:var(--text-1)}
.kanban-compact-meta{font-size:var(--text-caption);color:var(--text-3)}

/* Work hero counters → stat-tile type treatment */
.work-metric-value{font-family:var(--font-display);font-variant-numeric:tabular-nums}
.work-metric-label{font-family:var(--font-body);letter-spacing:.03em;text-transform:none;color:var(--text-3)}

/* ===== Option C — Project detail: WBS rows + metric tiles + lifecycle → guide ===== */

/* --- WBS tree rows → guide .wbsrow (hairline rows, 8px status dot, mono code/date/pct) --- */
.wbs-tree{gap:0}
.wbs-row{background:var(--surface)!important;border:0!important;border-bottom:1px solid var(--border)!important;
  border-radius:0!important;min-height:40px;padding:var(--space-2) var(--space-3);box-shadow:none!important}
.wbs-row:hover{background:var(--hover-tint)!important}
.wbs-row[data-depth="0"]{background:var(--surface)!important}
/* status indicator → 8px dot (drop the 24px icon circle) */
.wbs-status-dot{width:8px!important;height:8px!important;border:0!important;background:var(--border-strong)!important;place-items:unset!important;box-shadow:none!important}
.wbs-status-dot svg{display:none!important}
.wbs-row.status-done .wbs-status-dot{background:var(--good)!important}
.wbs-row.status-progress .wbs-status-dot{background:var(--accent)!important}
.wbs-row.status-rework .wbs-status-dot{background:var(--warn-solid)!important}
.wbs-row.status-todo .wbs-status-dot{background:var(--border-strong)!important}
/* code / title / dates / pct */
.wbs-code,.wbs-row .wbs-code{font-family:var(--font-mono);font-size:var(--text-code);color:var(--text-3);font-weight:400}
.wbs-title{color:var(--text-1)}
.wbs-row[data-depth="0"] .wbs-title strong{font-size:var(--text-body);font-weight:600}
.wbs-row[data-depth="1"] .wbs-title strong{font-size:var(--text-body);font-weight:600}
.wbs-date-chip{border:0!important;background:transparent!important;padding:0!important;margin-right:var(--space-3)!important;
  font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-3)}
.wbs-date-chip:hover{color:var(--text-2);border:0!important}
.wbs-date-chip.projected{font-style:italic;opacity:.8}
.wbs-date-chip.placeholder{color:var(--accent);opacity:1;border:0!important;font-weight:500}
.wbs-progress,.wbs-row .wbs-pct,.wbs-progress .wbs-pct{font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
.wbs-chevron{color:var(--text-2)} .wbs-drag-handle{color:var(--text-3)}
/* row actions borderless hover-reveal */
.wbs-row .row-actions .icon-btn,.wbs-actions button,.wbs-row-actions button{background:none!important;border:0!important;color:var(--text-3)!important}
.wbs-row .row-actions .icon-btn:hover,.wbs-actions button:hover{background:var(--surface-2)!important;color:var(--text-1)!important}
/* owner avatars → guide .av.sm feel */
.wbs-avatar{width:24px;height:24px;font:600 10px var(--font-body)}

/* --- Metric tiles (overview + project five-up) → guide stat tile --- */
.metric,.pm-metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.metric .label,.pm-metric-label{font-family:var(--font-body);font-size:var(--text-caption);text-transform:none;
  letter-spacing:.02em;color:var(--text-3);font-weight:600}
.metric .value,.pm-metric-value{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric .sub,.pm-metric-sub{font-size:var(--text-caption);color:var(--text-3)}

/* --- Lifecycle strip → guide .lseg (text segments + hairline connector, not pills) --- */
.lifecycle-strip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.lc-pip{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption);color:var(--text-3);
  padding:var(--space-2) var(--space-3);background:transparent!important;border:0!important;border-radius:0!important;font-weight:500}
.lc-pip.on{color:var(--good-ink)}
.lc-pip.now{color:var(--accent);font-weight:600}
.lc-arrow{color:var(--border-strong)}

/* AI "break this down" banner → quiet accent-tint strip (was a loud gradient/box) */
.ai-banner,.ai-break,[class*="ai-prompt"]{background:var(--accent-tint)!important;border:1px solid transparent!important;color:var(--accent-ink)!important;border-radius:var(--radius-lg)}

/* ===== Option C — register fit-ups (progress track + tab row) ===== */
.project-progress-bar{background:var(--border)!important}            /* visible empty track on white */
.project-progress-bar .done{background:var(--accent)!important}
@media(max-width:1180px){
  .project-status-tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
  .project-status-tabs::-webkit-scrollbar{display:none}
  .project-visibility-filter{margin-left:auto;flex:0 0 auto}
}
/* let the trailing actions column absorb slack so data columns pack left (less sparse) */
tr[data-project-row] td:last-child,.project-status-tabs ~ table th:last-child{width:1%;white-space:nowrap}
.card table th:last-child{width:100%}

/* revert the column-packing (it over-compressed Client); keep natural table layout */
tr[data-project-row] td:last-child,.card table th:last-child{width:auto!important}
tr[data-project-row] td:nth-child(3){white-space:normal;min-width:84px}
/* lifecycle tab labels never wrap; the row scrolls if narrow */
.project-status-tabs .tab{white-space:nowrap;flex:0 0 auto}
.project-status-tabs .tab .tab-count{white-space:nowrap}

/* VIEW selector: pin top-right of the tab block; tabs scroll in the space left of it */
@media(max-width:1180px){
  .project-status-tabs{position:relative;padding-right:150px}
  .project-visibility-filter{position:absolute!important;right:0;top:50%;transform:translateY(-50%);margin:0!important;background:var(--surface);padding-left:8px}
}

/* ===== register: surface the action icons (visible at rest, not hover-only) ===== */
.row-actions{gap:1px}
.row-actions .icon-btn{opacity:1!important;width:28px;height:28px}
.row-actions .icon-btn.more{opacity:1!important}

/* ===== inline selects: re-add a subtle down caret so they read as dropdowns ===== */
.project-status-inline,.project-type-inline{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")!important;
  background-repeat:no-repeat!important;background-position:right 5px center!important;background-size:11px!important;
  padding-right:20px!important}
.project-status-inline{background-color:transparent!important}
.project-type-inline{background-color:var(--surface-2)!important}

/* ===== register: collapse low-value columns earlier (less cramped at laptop widths) ===== */
@media (max-width:1400px){
  .card:has(tr[data-project-row]) th:nth-child(6),.card:has(tr[data-project-row]) th:nth-child(7),
  tr[data-project-row] td:nth-child(6),tr[data-project-row] td:nth-child(7){display:none}   /* Project Admin + Start Date */
}
@media (max-width:1150px){
  .card:has(tr[data-project-row]) th:nth-child(2),.card:has(tr[data-project-row]) th:nth-child(5),
  tr[data-project-row] td:nth-child(2),tr[data-project-row] td:nth-child(5){display:none}   /* Type + Progress */
}
/* dates never touch on wide screens */
.card table th:nth-child(7),.card table th:nth-child(8),
tr[data-project-row] td:nth-child(7),tr[data-project-row] td:nth-child(8){white-space:nowrap;min-width:96px}

/* ===== FIX: define the --space-* scale the ported guide CSS relies on (branch uses --sp-*) ===== */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px}

/* ===== FIX: active toggle — handle sits inside the track ===== */
.project-active-toggle{display:inline-flex;align-items:center;gap:8px}
.project-active-toggle span{position:relative;display:inline-block;width:40px;height:22px;border-radius:999px;
  background:var(--border-strong);transition:background .15s;flex:0 0 40px}
.project-active-toggle span:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.project-active-toggle.on span{background:var(--accent)}
.project-active-toggle.on span:after{transform:translateX(18px)}

/* ===== WBS polish: avatar circle (no pill), progress as plain mono, quiet age badge ===== */
/* owner: drop the pill wrapper → bare circular avatar */
.wbs-owners-pill{background:transparent!important;border:0!important;padding:0!important;width:auto!important;box-shadow:none!important}
.wbs-avatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 10px/1 var(--font-body)}
.wbs-owners-pill.nobody{color:var(--text-3)}
.wbs-owners-pill.nobody .wbs-avatar,.wbs-owners-pill.nobody svg{opacity:.7}
/* progress: plain mono, not a pill */
.wbs-pill{background:transparent!important;border:0!important;padding:0!important;font-family:var(--font-mono)!important;
  font-weight:400!important;font-size:11px!important;color:var(--text-2)!important}
/* age badge: subtle neutral marker instead of a loud green circle (override inline bg) */
.age-badge{background:var(--surface-2)!important;color:var(--text-3)!important;font-family:var(--font-mono);
  font-weight:600;font-size:10px;border:1px solid var(--border);box-shadow:none}

/* ===== WBS: age badge inline next to title (was absolute, collided with trash) ===== */
.wbs-title .age-badge{position:static!important;display:inline-flex;align-items:center;justify-content:center;
  margin-left:6px;width:18px;height:18px;vertical-align:middle;top:auto;right:auto}
/* ===== WBS: avatar must be a true circle (was squeezed to an ellipse) ===== */
.wbs-avatar{width:26px!important;height:26px!important;flex:0 0 26px!important;min-width:26px!important;aspect-ratio:1}
.wbs-owners-pill{flex:0 0 auto}


/* ======================================================================
   SHELL — light rail (aside.sidebar.appnav) + top navbar (.topnav) + content.
   Ported from design/ui-guide.html #p-sidebar, #p-topnav and #p-shell; token
   names resolve through the alias bridge above. One source of truth for the
   shell — the old navy sidebar / white top bar rules are gone.

     ┌ rail (--sidebar-w) ┬ .topnav  (row 1)                          ┐
     │ logo               │ .dock.docked (row 2, see the DOCK block)   │
     │ groups + items     │ .impbanner (row 3, admin viewing-as only)  │
     │ …                  │ .main     (row 4)                          │
     │ collapse toggle    │                                            │
     └────────────────────┴────────────────────────────────────────────┘

   Collapsed state = `html.nav-rail` (persisted in localStorage aa.nav.rail,
   applied before first paint by the inline <head> script). It shrinks
   --sidebar-w, so the grid track, #version-badge and anything else keyed
   on that token reclaim the width — the real-app equivalent of the guide's
   `.shell:has(.appnav.rail)`.
   ====================================================================== */
:root{--sidebar-w:232px;--sidebar-rail-w:60px;--topnav-h:52px;--topbar-h:var(--topnav-h)}

/* -- utilities the guide ships (used by the shell only) -- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.light-only{display:block}.dark-only{display:none}
:root[data-theme="dark"] .light-only{display:none}
:root[data-theme="dark"] .dark-only{display:block}
.appnav .ico,.topnav .ico,.nbanner .ico{width:var(--icon-md);height:var(--icon-md);display:inline-block;fill:currentColor;stroke:none;flex-shrink:0}
/* chips — guide .badge (counts on rail items + the bell) */
.badge{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--font-body);letter-spacing:.02em;
  padding:4px 8px;border-radius:var(--radius-sm);white-space:nowrap;border:1px solid transparent;font-variant-numeric:tabular-nums}
.badge-neutral{background:var(--surface-2);color:var(--text-2)}
.badge-warning{background:var(--warning);color:var(--on-warning)}
.badge-accent{background:var(--accent-tint);color:var(--accent-ink)}
.badge-pill{border-radius:var(--radius-full)}
/* role-hidden items/groups/actions stay hidden (display:flex would beat native [hidden]) */
.appnav [hidden],.topnav [hidden]{display:none!important}

/* -- grid -- */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;min-height:100vh;
  transition:grid-template-columns var(--duration-base) var(--ease-out)}
.app-header{display:contents}                 /* promotes rail, navbar, banner (+ docked #dock) into the grid */
.sidebar{grid-column:1;grid-row:1 / -1}
.topnav{grid-column:2;grid-row:1}
.impbanner{grid-column:2;grid-row:3}
.main{grid-column:2;grid-row:4;min-width:0}

/* ---------------------------------------------------------------- rail */
.sidebar.appnav{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;min-width:0;
  background:var(--surface);border-right:1px solid var(--border);color:var(--text-2);z-index:var(--z-shell);
  transition:width var(--duration-base) var(--ease-out)}
.appnav-top{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border);min-height:var(--topnav-h);flex:0 0 auto}
.appnav-brand{display:inline-flex;align-items:center;min-width:0;border-radius:var(--radius-sm)}
.appnav-brand:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.appnav-top .full{height:30px;width:auto}
.appnav-top .mk{height:24px;width:auto;display:none}
.appnav-top .appnav-close{display:none;margin-left:auto}   /* drawer-only (mobile block below) */
.appnav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--space-2) 0;
  display:flex;flex-direction:column;scrollbar-width:thin}
.appnav-group{font-family:var(--font-display);font-size:var(--text-overline);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);padding:var(--space-3) var(--space-4) var(--space-1);flex:0 0 auto}
.appnav-item{position:relative;display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4);min-height:40px;
  color:var(--text-2);border-left:2px solid transparent;text-decoration:none;font-size:var(--text-body);font-weight:500;
  flex:0 0 auto;white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast)}
.appnav-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.appnav-item:hover{background:var(--hover-tint);color:var(--text-1)}
.appnav-item.active{color:var(--accent);background:var(--accent-tint);border-left-color:var(--accent);font-weight:500}
.appnav-item:focus-visible{outline:none;box-shadow:inset var(--focus-ring)}
.appnav-item .cnt{margin-left:auto;flex-shrink:0}
/* Workspace order for developer/designer: Work, Calendar, Projects (, Recurring) — the DOM is in manager order */
body.role-developer .appnav-item[data-route="projects"],
body.role-designer  .appnav-item[data-route="projects"]{order:1}
body.role-designer  .appnav-item[data-route="calendar"]{order:2}
.appnav-foot{border-top:1px solid var(--border);padding:var(--space-2) var(--space-3);display:flex;align-items:center;
  justify-content:flex-end;gap:var(--space-2);flex:0 0 auto}
.appnav-toggle{border:0;background:none;color:var(--text-3);cursor:pointer;padding:8px;border-radius:var(--radius-sm);
  min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;font-family:inherit}
.appnav-toggle:hover{background:var(--hover-tint);color:var(--text-1);transform:none}
.appnav-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.appnav-toggle .ico{transition:transform var(--duration-base) var(--ease-out)}

/* -- collapsed icon rail (desktop only) -- */
@media (min-width:821px){
  html.nav-rail{--sidebar-w:var(--sidebar-rail-w)}
  html.nav-rail .sidebar.appnav,html.nav-rail .appnav-scroll{overflow:visible}      /* right-side tooltips escape */
  html.nav-rail .appnav-top{justify-content:center;padding:var(--space-3) 0}
  html.nav-rail .appnav-top .full{display:none}
  html.nav-rail .appnav-top .mk{display:block}
  html.nav-rail .appnav-top .sr-only{display:none}
  /* group labels become a 1px divider — only where a visible item precedes them */
  html.nav-rail .appnav-group{display:none}
  html.nav-rail .appnav-item:not([hidden]) ~ .appnav-group:not([hidden]){display:block;font-size:0;line-height:0;height:1px;
    padding:0;margin:var(--space-2) 14px;background:var(--border);overflow:hidden}
  html.nav-rail .appnav-item{justify-content:center;padding:0;gap:0}
  html.nav-rail .appnav-item .lbl,html.nav-rail .appnav-item .cnt{display:none}
  html.nav-rail .appnav-foot{justify-content:center;padding:var(--space-2) 0}
  html.nav-rail .appnav-toggle .ico{transform:rotate(180deg)}
  /* label → tooltip on the right (guide [data-tip][data-tip-pos=right]) */
  html.nav-rail .appnav-item::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
    background:var(--ink);color:var(--paper);font:500 var(--text-caption)/1.3 var(--font-body);padding:5px 9px;
    border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;
    transition:opacity var(--duration-fast) var(--ease-out);z-index:var(--z-tooltip)}
  html.nav-rail .appnav-item:hover::after,html.nav-rail .appnav-item:focus-visible::after{opacity:1}
  html.nav-rail[data-theme="dark"] .appnav-item::after{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border)}
}

/* ---------------------------------------------------------------- top navbar */
.topnav{position:sticky;top:0;z-index:var(--z-shell);display:flex;align-items:center;gap:var(--space-3);
  height:var(--topnav-h);min-height:var(--topnav-h);padding:0 var(--space-4);min-width:0;
  background:var(--surface);border-bottom:1px solid var(--border)}
.topnav .tn-ham{display:none}
.tn-title{min-width:0;flex:0 1 auto;display:flex;flex-direction:column;justify-content:center;margin-right:var(--space-2)}
.tn-title .t{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);color:var(--text-1);line-height:1.1;
  letter-spacing:-.01em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-title .tn-crumb{display:block;font:500 11px/1.3 var(--font-body);color:var(--text-3);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-title .tn-crumb:empty{display:none}
.tn-search{flex:1 1 auto;max-width:440px;display:flex;align-items:center;gap:var(--space-2);height:34px;margin:0;
  padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);
  color:var(--text-3);cursor:text;
  transition:border-color var(--duration-base),box-shadow var(--duration-base),background var(--duration-base)}
.tn-search .ico{width:16px;height:16px}
.tn-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:var(--text-body);color:var(--text-1);
  outline:none;padding:0;border-radius:0;box-shadow:none;height:100%}
.tn-search input:focus{border:0;box-shadow:none}
.tn-search input::placeholder{color:var(--text-3)}
.tn-search input::-webkit-search-cancel-button,.tn-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.tn-search:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:var(--focus-ring);color:var(--text-2)}
.tn-kbd{font:600 10px/1 var(--font-mono);color:var(--text-3);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:3px 5px;background:var(--surface);flex:none;transition:opacity var(--duration-fast)}
.tn-search:focus-within .tn-kbd{opacity:.45}
.tn-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}
.tn-new,.tn-account{position:relative}
/* primary action — guide .btn.btn-primary.btn-sm */
.topnav .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:32px;min-width:32px;
  padding:0 var(--space-3);border-radius:var(--radius-md);font:600 11px/1 var(--font-body);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--duration-fast) var(--ease-out)}
.topnav .btn:hover{transform:none}
.topnav .btn-primary{background:var(--accent);color:var(--on-accent)}
.topnav .btn-primary:hover{background:var(--accent-hover)}
.topnav .btn-primary:active{background:var(--accent-active)}
.topnav .btn .ico{width:18px;height:18px}
.topnav .btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* icon buttons (bell, hamburger, drawer close) */
.tn-iconbtn{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border:0;
  border-radius:var(--radius-md);background:transparent;color:var(--text-2);cursor:pointer;font-family:inherit;
  transition:background var(--duration-fast),color var(--duration-fast)}
.tn-iconbtn:hover{background:var(--hover-tint);color:var(--text-1);transform:none}
.tn-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tn-badge{position:absolute;top:3px;right:3px;pointer-events:none}
.tn-badge .badge{padding:1px 5px;box-shadow:0 0 0 2px var(--surface)}
/* account button */
.tn-acctbtn{display:inline-flex;align-items:center;gap:var(--space-2);padding:3px 8px 3px 3px;border:1px solid transparent;
  border-radius:var(--radius-full);background:transparent;cursor:pointer;font-family:inherit;min-width:0;
  transition:background var(--duration-fast)}
.tn-acctbtn:hover,.tn-account.open .tn-acctbtn{background:var(--hover-tint);transform:none}
.tn-acctbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tn-acctbtn .caret{width:14px;height:14px;color:var(--text-3);transition:transform var(--duration-base) var(--ease-out)}
.tn-account.open .tn-acctbtn .caret{transform:rotate(180deg)}
.tn-acctmeta{display:flex;flex-direction:column;gap:1px;text-align:left;min-width:0;max-width:160px}
.tn-acctmeta .nm{font:600 var(--text-caption)/1.1 var(--font-body);color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-acctmeta .role-chip{font:500 10px/1 var(--font-body);color:var(--text-3);background:none;padding:0;border:0;border-radius:0;
  text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* avatars — guide .av */
.topnav .av{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--font-body);
  color:var(--on-accent);flex-shrink:0;overflow:hidden;background:var(--accent);background-size:cover;background-position:center}
.topnav .av.sm{width:28px;height:28px;font-size:11px}
.topnav .av.md{width:40px;height:40px;font-size:var(--text-caption)}
/* dropdown menus (account + "+ New") */
.tn-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-1);z-index:var(--z-dropdown)}
.tn-mhead{padding:var(--space-2) var(--space-3) var(--space-3);display:flex;align-items:center;gap:var(--space-2);
  border-bottom:1px solid var(--border);margin-bottom:var(--space-1)}
.tn-mhead .who{min-width:0;display:flex;flex-direction:column}
.tn-mhead .nm{font:600 var(--text-body)/1.2 var(--font-body);color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-mhead .rl{font-size:var(--text-caption);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-menu button{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);border:0;
  border-radius:var(--radius-sm);background:transparent;color:var(--text-1);font:500 var(--text-body)/1.2 var(--font-body);
  text-align:left;cursor:pointer}
.tn-menu button:hover,.tn-menu button:focus-visible{background:var(--hover-tint);transform:none;box-shadow:none;outline:none}
.tn-menu button .ico{width:16px;height:16px;color:var(--text-3)}
.tn-menu button.danger,.tn-menu button.danger .ico{color:var(--error-strong)}
.tn-menu hr{border:0;border-top:1px solid var(--border);margin:var(--space-1) 0}
.tn-mrow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;
  padding:var(--space-2) var(--space-3);font:500 var(--text-body)/1.2 var(--font-body);color:var(--text-1)}
.tn-mlabel{display:flex;align-items:center;gap:var(--space-2)}
.tn-mlabel .ico{width:16px;height:16px;color:var(--text-3)}
/* toggle switch — guide .toggle (scoped to the menu; the global label rule is uppercase/overline) */
.tn-menu .toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;margin:0;min-height:0;
  font:inherit;text-transform:none;letter-spacing:0;color:inherit}
.tn-menu .toggle input{position:absolute;opacity:0;width:0;height:0;margin:0}
.tn-menu .toggle .track{display:block;width:40px;height:22px;border-radius:var(--radius-full);background:var(--border-strong);
  position:relative;transition:background var(--duration-base)}
.tn-menu .toggle .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-out)}
.tn-menu .toggle input:checked + .track{background:var(--accent)}
.tn-menu .toggle input:checked + .track::after{transform:translateX(18px)}
.tn-menu .toggle input:focus-visible + .track{box-shadow:var(--focus-ring)}

/* ------------------------------------------------- impersonation banner */
/* guide .nbanner.warning — sits between the navbar and the content while an admin is viewing as someone */
.nbanner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);
  border-left:3px solid transparent;font-size:var(--text-body);color:var(--text-1)}
.nbanner .ico{width:18px;height:18px}
.nbanner .close{margin-left:auto;background:none;border:0;cursor:pointer;color:inherit;opacity:.7;padding:2px 4px;
  font:600 var(--text-caption)/1 var(--font-body);border-radius:var(--radius-sm)}
.nbanner .close:hover{opacity:1;transform:none;background:var(--hover-tint)}
.nbanner .close:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.nbanner.warning{background:var(--warning-tint);border-left-color:var(--warning)}
.nbanner.warning .ico{color:var(--warning-strong)}
.impbanner{border-bottom:1px solid var(--border)}

/* ------------------------------------------------- mobile: off-canvas rail */
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .topnav,.impbanner,.main{grid-column:1}
  .sidebar.appnav{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);height:100vh;height:100dvh;z-index:var(--z-drawer);
    transform:translateX(-100%);transition:transform var(--duration-base) var(--ease-out)}
  body.nav-open .sidebar.appnav{transform:none;box-shadow:var(--shadow-lg)}
  .appnav-top .appnav-close{display:inline-grid}
  .appnav-backdrop{position:fixed;inset:0;background:rgba(15,26,48,.5);z-index:calc(var(--z-drawer) - 1);display:none}
  body.nav-open .appnav-backdrop{display:block}
  .topnav .tn-ham{display:inline-grid}
  .tn-acctmeta{display:none}
}
@media (max-width:640px){
  .topnav{padding:0 var(--space-3);gap:var(--space-2)}
  .topnav .tn-search{display:none}
  .topnav .btn .lbl{display:none}                     /* action cluster condenses to icons */
  .topnav .btn{padding:0 var(--space-2)}
  .tn-menu{min-width:200px}
}

/* VIEW filter: always pin top-right of the tabs block (content width < viewport due to sidebar) */
.project-status-tabs{position:relative;padding-right:158px}
.project-status-tabs .project-visibility-filter{position:absolute!important;right:0;top:0;transform:none!important;
  margin:0!important;background:var(--surface);padding-left:8px;z-index:2}

/* ======================================================================
   Flatter content (registers aren't cards). The page title lives in the
   top navbar (.tn-title) — see SHELL above.
   ====================================================================== */
/* flatten: no card drop-shadows anywhere */
.card{box-shadow:none}

/* register pages sit in a normal (flat, shadowless) card with the usual gutter — not flush */
/* the page title now lives in the top bar → drop the redundant in-card heading */
.view-projects > .card > .card-header .card-title h2,
.view-clients > .card > .card-header .card-title h2,
.view-users > .card > .card-header .card-title h2{display:none}
/* Work board hero repeats the navbar's "Today, Dan" verbatim right under it → hide that one h1
   (the client Inbox hero says "Hi Chris" under an "Inbox" title, so it stays). Other in-view
   headers are left for the per-role screen pass. */
body:not(.role-client) .view-work .work-hero h1{display:none}

/* ======================================================================
   Register status tabs: wrap cleanly at every width (was forced to a
   single scrolling line that clipped behind the pinned VIEW selector).
   ====================================================================== */
.project-status-tabs{flex-wrap:wrap!important;overflow:visible!important;padding-right:0!important;position:static!important;row-gap:6px}
.project-status-tabs .project-visibility-filter{position:static!important;right:auto!important;top:auto!important;
  transform:none!important;margin:0 0 0 auto!important;background:transparent!important;flex:0 0 auto}
@media(max-width:1180px){
  .project-status-tabs{flex-wrap:wrap!important;overflow:visible!important}
}

/* ======================================================================
   Work hero — consolidated (single source of truth for the hero panel,
   its view controls and the stat tiles; supersedes the base rules near
   the top of the file). Used by Work (list + Kanban), Tickets, Inbox and
   Calendar.

     ┌ breadcrumb / title / summary ─────────── [List|Kanban] [Compact] ┐
     ├ stat band: equal-width tiles, edge to edge ──────────────────────┤
     └──────────────────────────────────────────────────────────────────┘

   Row 1 pairs the page identity with its view controls (the familiar
   "header + actions" slot); row 2 gives the counters their own
   full-width band so they never cluster to one side. `.work-hero-right`
   is only a markup wrapper around controls + strip: display:contents
   lets both place themselves directly on the hero grid.
   ====================================================================== */
.work-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title side" "band band";
  align-items:center;column-gap:24px;row-gap:16px;
  background:transparent;border:0;border-radius:0;
  padding:0;margin-bottom:16px}
.work-hero > div:first-child{grid-area:title;min-width:0}
.work-hero .breadcrumbs{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.work-hero h1{font-family:var(--font-display);font-size:22px;line-height:1.2;font-weight:800;letter-spacing:-.01em;color:var(--text-1)}
.work-hero-right{display:contents}

/* view controls: segmented toggle (+ Compact switch on Kanban) */
.work-hero .kanban-view-controls,
.work-hero-right > .work-view-toggle{grid-area:side;justify-self:end;align-self:center}
.work-hero .kanban-view-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.work-view-toggle{display:inline-flex;gap:2px;padding:2px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.work-view-toggle .sm{min-height:28px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--text-2);
  font-size:var(--fs-sm);font-weight:600;opacity:1;box-shadow:none}
.work-view-toggle .sm:hover{background:var(--hover-tint);color:var(--text-1)}
.work-view-toggle .sm.is-active{background:var(--blue);color:var(--on-accent,#fff)}
.kanban-density-toggle{min-height:32px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  color:var(--text-2);font-size:var(--fs-sm);font-weight:600;text-transform:none;letter-spacing:0}
.kanban-density-toggle:hover{color:var(--text-1);border-color:var(--text-3)}

/* stat band: tiles share the row equally; on narrow screens they wrap */
.work-strip{grid-area:band;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.work-metric{
  flex:1 1 120px;min-width:0;display:flex;flex-direction:column;gap:0;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;color:var(--text-1);box-shadow:none}
.work-metric-value{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1;color:inherit;font-variant-numeric:tabular-nums}
.work-metric-label{margin-top:6px;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-metric-button{font:inherit;text-align:left;cursor:pointer;transition:border-color var(--dur-base),background var(--dur-base),color var(--dur-base)}
.work-metric-button:hover{border-color:var(--blue);background:var(--surface);box-shadow:none}
.work-metric-button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.work-metric-button.is-active{background:var(--blue);border-color:var(--blue);color:var(--on-accent,#fff);box-shadow:none}
.work-metric-button.is-active .work-metric-value{color:inherit}
.work-metric-button.is-active .work-metric-label{color:inherit;opacity:.82}

/* heroes without view controls (Inbox, Calendar) carry only 2–3 counters:
   keep those compact beside the title instead of stretching them across */
.work-hero:not(:has(.work-hero-right)) .work-strip{grid-area:side;justify-self:end}
.work-hero:not(:has(.work-hero-right)) .work-metric{flex:0 0 auto;min-width:116px}

/* Tickets hero carries 7 workflow filters: tighter tiles */
.ticket-workflow-filters .work-metric{flex-basis:96px;padding:10px 12px}

@media (max-width:900px){
  .work-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "side" "band"}
  .work-hero .kanban-view-controls,
  .work-hero-right > .work-view-toggle,
  .work-hero:not(:has(.work-hero-right)) .work-strip{justify-self:start}
  .work-hero .kanban-view-controls{justify-content:flex-start}
  /* tiles wrap onto a uniform grid instead of a lone stretched flex row */
  .work-hero:has(.work-hero-right) .work-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* ======================================================================
   EXPERIMENT — floating bottom-right DOCK.
   #dock is the fixed, draggable card. Inside it: the running-timer puck
   (#clock-strip — same ids/classes, admin.js behaviour untouched) stacked
   above a slim bar with the drag grip, reset and the "+ New" quick-add.
   The puck only renders while clocking; the bar is always there.
   ====================================================================== */
body.clock-on .main{padding-top:16px}        /* the old top strip is gone — no extra room needed */
body.dock-dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
/* the toast used to own the bottom-right corner; the dock lives there now → toast goes bottom-centre */
.toast{right:auto;left:50%;transform:translate(-50%,0)}
.toast[hidden]{transform:translate(-50%,20px)}
/* …and the release-notes version badge (inline-styled bottom-right by admin.js) → bottom-left of the content column */
#version-badge{right:auto!important;left:10px!important}
@media (min-width:821px){#version-badge{left:calc(var(--sidebar-w) + 12px)!important}}

.dock[hidden]{display:none!important}   /* role-gated away from clients */
.dock{position:fixed;right:16px;bottom:16px;z-index:60;
  max-width:calc(100vw - 32px);
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 16px 40px rgba(30,42,74,.18), 0 2px 6px rgba(30,42,74,.08)}
.dock.snap{transition:right .25s var(--ease-out),bottom .25s var(--ease-out)}
.dock.dragging{box-shadow:0 24px 56px rgba(30,42,74,.26), 0 2px 6px rgba(30,42,74,.10)}
.dock.dragging .dock-grip{cursor:grabbing;color:var(--text-1)}

/* --- the timer puck -------------------------------------------------- */
.dock .clock-strip{
  position:static;margin:0;border:0;border-radius:14px 14px 0 0;box-shadow:none;background:transparent;
  width:336px;max-width:calc(100vw - 32px);        /* FIXED width: the card never resizes between states */
  padding:12px 14px 12px;
  display:grid;align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  grid-template-rows:auto auto auto minmax(17px,auto) auto;   /* eyebrow · dot+title · time · total (row kept even when hidden) · note */
  column-gap:8px;row-gap:0}
.dock .clock-copy,.dock .clock-elapsed-wrap{display:contents}   /* flatten wrappers into the grid */

.dock .clock-label{grid-column:1 / -1;grid-row:1;
  font:800 10px/1 var(--font-ui);color:var(--good);text-transform:uppercase;letter-spacing:.09em}
.dock .clock-dot{grid-column:1;grid-row:2;align-self:center;
  width:8px;height:8px;flex:none;margin-top:5px;background:var(--good);
  box-shadow:0 0 0 3px var(--good-tint)}
.dock .clock-task{grid-column:2 / -1;grid-row:2;min-width:0;margin-top:5px;
  font:600 13px/1.35 var(--font-ui);color:var(--text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dock .clock-elapsed{grid-column:1 / 3;grid-row:3;margin-top:9px;white-space:nowrap;
  font:600 24px/1.1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-1);letter-spacing:-.02em}
.dock .clock-total{grid-column:1 / 3;grid-row:4;margin-top:3px;min-width:0;
  height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;   /* one line, always — never wraps */
  font:500 11px/14px var(--font-mono);color:var(--text-3)}
.dock .clock-total.over{color:var(--bad)}
.dock .clock-total[hidden]{display:none}

.dock .clock-resume{grid-column:3;grid-row:3 / 5;align-self:center;justify-self:end;margin-top:9px}
.dock .clock-stop  {grid-column:4;grid-row:3 / 5;align-self:center;justify-self:end;margin-top:9px}
.dock .clock-stop,.dock .clock-resume{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  height:28px;padding:0 13px;border-radius:999px;border:1px solid transparent;   /* fixed height: never drives the row */
  font:700 12px/1 var(--font-ui);color:#fff;transition:background .12s,transform .05s}
.dock .clock-stop{background:var(--bad)}
.dock .clock-stop:hover{background:#A3103A;transform:translateY(-1px)}
.dock .clock-resume{background:var(--good)}
.dock .clock-resume:hover{background:#166534;transform:translateY(-1px)}
.dock .clock-stop .i,.dock .clock-resume .i{width:13px;height:13px;vertical-align:0}
.dock .clock-stop:focus-visible,.dock .clock-resume:focus-visible,
.dock .dock-add:focus-visible,.dock .dock-grip:focus-visible,.dock .dock-reset:focus-visible,
.dock .dock-menu [role="menuitem"]:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.dock .clock-note{grid-column:1 / -1;grid-row:5;margin-top:10px;
  flex:none;width:100%;max-width:none;min-width:0;
  padding:7px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface-2);font:400 12px/1.4 var(--font-ui);color:var(--text-1);outline:none}
.dock .clock-note::placeholder{color:var(--text-3)}
.dock .clock-note:focus{border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 3px var(--accent-tint)}

/* stopped (resumable) state: grey signal, Resume + Dismiss */
.dock .clock-strip.stopped{background:transparent;border:0;box-shadow:none}
.dock .clock-strip.stopped .clock-dot{background:var(--text-3);box-shadow:0 0 0 3px var(--surface-2);animation:none}
.dock .clock-strip.stopped .clock-label{color:var(--text-3)}
.dock .clock-strip.stopped .clock-elapsed{color:var(--text-2)}
.dock .clock-strip.stopped .clock-stop{background:var(--surface);color:var(--text-2);border-color:var(--border)}
.dock .clock-strip.stopped .clock-stop:hover{background:var(--surface-2);color:var(--text-1)}
.dock .clock-strip.stopped .clock-note{background:var(--surface-2)}
/* Resume + Dismiss together take the same footprint as the lone Stop would allow:
   compact 11px pills, no icon, so the time + total block keeps its width and the card its height */
.dock .clock-strip.stopped .clock-resume,.dock .clock-strip.stopped .clock-stop{font-size:11px;padding:0 10px}
.dock .clock-strip.stopped .clock-resume .i{display:none}

/* --- the bar: grip · reset · + New ------------------------------------ */
.dock-bar{display:flex;align-items:center;gap:4px;height:42px;padding:0 6px 0 5px;touch-action:none}   /* fixed height in every state */
.dock .clock-strip:not([hidden]) + .dock-bar{border-top:1px solid var(--border);padding:0 8px 0 7px}
.dock-grip,.dock-reset,.dock-mode{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;
  border:0;border-radius:7px;background:transparent;color:var(--text-3);transition:background .12s,color .12s}
.dock-grip{cursor:grab;touch-action:none}
.dock-grip svg{fill:currentColor;pointer-events:none}
.dock-grip:hover,.dock-reset:hover,.dock-mode:hover{background:var(--surface-2);color:var(--text-1);transform:none}
.dock-reset .i{width:14px;height:14px;vertical-align:0}
.dock-reset[hidden]{display:none}
.dock-mode svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;pointer-events:none}
.dock-mode .ic-float{display:none}
.dock.docked .dock-mode .ic-dock{display:none}
.dock.docked .dock-mode .ic-float{display:block}
.dock-hint{display:none;font:500 12px/1 var(--font-ui);color:var(--text-3);white-space:nowrap}
.dock-quick{position:relative;margin-left:auto;padding-left:6px}
.dock-add{display:inline-flex;align-items:center;gap:4px;padding:7px 12px 7px 9px;
  border:1px solid var(--blue);border-radius:999px;background:var(--blue);color:#fff;
  font:600 12px/1 var(--font-ui);white-space:nowrap;transition:background .12s,transform .05s}
.dock-add .i{width:14px;height:14px;vertical-align:0}
.dock-add:hover,.dock.menu-open .dock-add{background:var(--accent-hover);border-color:var(--accent-hover);transform:none}

/* quick-add menu: opens upward (the dock lives at the bottom), flips when dragged to an edge */
.dock-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:1;min-width:196px;padding:5px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-3)}
.dock-menu.below{bottom:auto;top:calc(100% + 8px)}
.dock-menu.align-left{right:auto;left:0}
.dock-menu[hidden]{display:none}
.dock-menu [role="menuitem"]{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
  border:0;border-radius:6px;background:transparent;color:var(--text-1);text-align:left;
  font:500 13px/1.2 var(--font-ui);white-space:nowrap;transition:background .1s}
.dock-menu [role="menuitem"] .i{width:15px;height:15px;color:var(--text-3);vertical-align:0}
.dock-menu [role="menuitem"]:hover,.dock-menu [role="menuitem"]:focus-visible{background:var(--hover-tint);color:var(--accent-active);transform:none}
.dock-menu [role="menuitem"]:hover .i,.dock-menu [role="menuitem"]:focus-visible .i{color:var(--accent)}

/* --- DOCKED mode: #dock is moved into header.app-header by the inline script and
       takes the shell grid's row 2 (under .topbar, right of the sidebar) as a flat,
       full-width toolbar. It is in flow, so .main is pushed down — never covered. --- */
.dock.docked{position:relative;z-index:30;right:auto;bottom:auto;width:auto;max-width:none;
  display:flex;align-items:stretch;
  border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;background:var(--surface)}
@media (min-width:821px){.dock.docked{grid-column:2;grid-row:2}}
.dock.docked .clock-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  flex:1 1 auto;min-width:0;width:auto;max-width:none;padding:8px 20px;border-radius:0}
.dock.docked .clock-copy{display:flex;flex-direction:column;gap:2px;flex:0 1 auto;min-width:0;max-width:380px}
.dock.docked .clock-label,.dock.docked .clock-task,.dock.docked .clock-dot,
.dock.docked .clock-elapsed,.dock.docked .clock-total,.dock.docked .clock-note,
.dock.docked .clock-resume,.dock.docked .clock-stop{margin:0}
.dock.docked .clock-note{flex:1 1 220px;width:auto;min-width:160px;max-width:480px}
.dock.docked .clock-elapsed-wrap{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;margin-left:auto}
.dock.docked .clock-elapsed{font-size:20px}
.dock.docked .clock-resume,.dock.docked .clock-stop{flex:0 0 auto}
.dock.docked .dock-bar{height:auto;flex:0 0 auto;border-top:0;border-left:1px solid var(--border);padding:0 20px 0 12px}
.dock.docked .clock-strip[hidden] + .dock-bar{flex:1 1 auto;border-left:0;height:42px;padding:0 20px}
.dock.docked .dock-grip,.dock.docked .dock-reset{display:none}
.dock.docked .clock-strip[hidden] + .dock-bar .dock-hint{display:inline;margin-right:auto}
.dock.docked .dock-quick{padding-left:8px}
.dock.docked.snap{transition:none}

/* ======================================================================
   CLIENT PORTAL — the client's Inbox (ui-guide #p-portal "Client inbox").
   Rendered by clientInbox() in admin.js for role=client. One bg-coloured
   panel (.portal) holding a quiet hero, then bands of surface items:

     .portal
       .hero            "Hi Chris" + one summary line
       .pband           .band label (overline) + .col-wrap of items
         .psignoff      [.av.md] .meta(.pt title / .ps plain line) [.pactions]
         .pticket       [.badge] title [.note ref]   (a <button>: opens it)
         .empty         graceful empty state — the shared component (icon · h4 · p · secondary btn)

   Token names are the guide's; they resolve through the alias bridge.
   ====================================================================== */
.portal{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.portal .hero h3{font-family:var(--font-display);font-size:var(--text-h2,26px);font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--text-1);margin:0}
.portal .hero p{margin:4px 0 0;font-size:var(--text-body);color:var(--text-2)}
.portal .band{font-family:var(--font-display);font-size:var(--text-overline);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--space-2)}
.portal .col-wrap{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}

/* sign-off request */
.psignoff{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);min-width:0}
.psignoff .meta{flex:1;min-width:0}
.psignoff .pt{font-weight:500;color:var(--text-1);font-size:var(--text-body);line-height:1.35}
.psignoff .ps{font-size:var(--text-caption);color:var(--text-2);margin-top:1px}
.psignoff .pactions{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto;margin-left:auto}

/* ticket row — a real <button> so it is keyboard-reachable; reset the base button look */
.pticket{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);
  font:400 var(--text-body)/1.4 var(--font-body);color:var(--text-1);text-align:left;cursor:pointer;min-width:0;
  transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}
.pticket:hover{border-color:var(--border-strong);background:var(--surface);transform:none}
.pticket:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.pticket .ptitle{flex:1;min-width:0}
.pticket .note{font-size:var(--text-caption);color:var(--text-3);margin:0;flex:0 0 auto;white-space:nowrap}
.pmore{display:contents}
.pmore[hidden]{display:none}
.pmore-btn{align-self:flex-start;color:var(--text-2)}

/* avatar — guide .av (solid accent disc with initials) */
.portal .av{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 var(--text-caption)/1 var(--font-body);
  color:var(--on-accent);flex-shrink:0;overflow:hidden;background:var(--accent)}
.portal .av.md{width:40px;height:40px}

/* status badges the portal uses (guide .badge variants not yet in the shell block) */
.badge-success{background:var(--success-tint);color:var(--success-strong)}
.badge-info{background:var(--info-tint);color:var(--info-strong)}
.badge-error{background:var(--error-tint);color:var(--error-strong)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* buttons — guide .btn / .btn-sm / -primary / -ghost / -secondary (base `button` look reset).
   Shared with the empty-state action (.empty .btn) so the two read identically. */
.portal .btn,.empty .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:32px;min-width:32px;
  padding:0 var(--space-3);border-radius:var(--radius-md);font:600 11px/1 var(--font-body);border:1px solid transparent;
  background:transparent;color:var(--text-1);cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast),box-shadow var(--duration-fast)}
.portal .btn:hover,.empty .btn:hover{transform:none}
.portal .btn:focus-visible,.empty .btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.portal .btn-primary,.empty .btn-primary{background:var(--accent);color:var(--on-accent)}
.portal .btn-primary:hover,.empty .btn-primary:hover{background:var(--accent-hover)}
.portal .btn-primary:active,.empty .btn-primary:active{background:var(--accent-active)}
.portal .btn-ghost,.empty .btn-ghost{background:transparent;color:var(--text-1)}
.portal .btn-ghost:hover,.empty .btn-ghost:hover{background:var(--hover-tint)}
.portal .btn-secondary,.empty .btn-secondary{background:var(--surface);color:var(--text-1);border-color:var(--border-strong)}
.portal .btn-secondary:hover,.empty .btn-secondary:hover{background:var(--hover-tint);border-color:var(--accent)}

/* empty state — the shared .empty component (EMPTY STATE block near the top); flat and centered, no portal override needed */

/* Projects register as the client sees it: their company is the only client, nobody
   on their side is a "Project Admin", and every row is active — those columns are noise.
   (Same nth-child approach as the responsive column collapse above.) */
body.role-client .view-projects .card:has(tr[data-project-row]) th:nth-child(3),
body.role-client .view-projects .card:has(tr[data-project-row]) th:nth-child(6),
body.role-client .view-projects .card:has(tr[data-project-row]) th:nth-child(9),
body.role-client .view-projects tr[data-project-row] td:nth-child(3),
body.role-client .view-projects tr[data-project-row] td:nth-child(6),
body.role-client .view-projects tr[data-project-row] td:nth-child(9){display:none}

@media (max-width:640px){
  .portal{padding:var(--space-4)}
  .psignoff{flex-wrap:wrap}
  .psignoff .pactions{flex-basis:100%;justify-content:flex-end;margin-left:0}
  .pticket{flex-wrap:wrap}
  .pticket .ptitle{flex-basis:100%;order:3}
  .pticket .note{margin-left:auto}
}

/* ---- Client portal as a WHITE panel (user pref): one white card; inner items
   become flat divided rows instead of nested white cards. ---- */
.portal{background:var(--surface)}
.portal .col-wrap{gap:0}
.portal .col-wrap > *{border-bottom:1px solid var(--border);border-radius:0}
.portal .col-wrap > :last-child{border-bottom:0}
.psignoff{background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;
  padding:var(--space-3) 0}
.pticket{background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;
  padding:var(--space-3) 0}
.pticket:hover{background:var(--hover-tint);border-color:transparent;border-bottom-color:var(--border)}
.pticket:hover .ptitle{color:var(--accent)}

/* Status badges in the client portal: muted but DISTINCT. By default badge-info
   resolves to slate (--info-tint), which reads identical to neutral "Closed",
   and badge-warning is a solid amber fill — louder than the soft green/grey it
   sits beside. Scoped to .cinbox so the rest of the app's badges are untouched:
   soft blue (received / in progress) · amber (needs you) · green (resolved) ·
   grey (closed) — one low saturation across the set, so no state shouts. */
.cinbox .badge-info{background:var(--accent-tint);color:var(--accent-ink)}
.cinbox .badge-warning{background:var(--warning-tint);color:var(--warning-strong)}

/* ---- Client inbox: hero lifted onto the page; the bands sit in the white panel below (flush) ---- */
.cinbox-hero{margin:0 0 16px}
.cinbox-hero h3{font-family:var(--font-display);font-size:var(--text-h2,26px);font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--text-1);margin:0}
.cinbox-hero p{margin:4px 0 0;font-size:var(--text-body);color:var(--text-2)}