/* Linux MDM design tokens. Dark-first: dark values on bare :root, light derived below.
   Neutral near-black greys, one cyan accent used sparingly, inverted (fg-on-bg) primary buttons.
   See docs/19-design-system.md. Every text/state pair is AA (>= 4.5:1); --fg-faint is decoration only. */
/* Inter (SIL OFL 1.1, static/fonts/Inter-OFL.txt), one variable file for every weight, served by
   mdm-web itself under font-src 'self'. The system stack in --font-sans stays as the fallback. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/static/inter-5.2.8-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:dark;
  --bg:#0b0b0c;--surface:#121214;--surface-sunk:#0e0e10;--surface-sel:#1c1c20;--surface-hover:#17171a;
  --line:#232326;--line-strong:#2f2f34;
  --fg:#ededef;--fg-muted:#8f8f96;--fg-faint:#4a4a50;
  --primary:#ededef;--primary-hover:#ffffff;--on-primary:#0b0b0c;
  --accent:#4fd8eb;--accent-ink:#4fd8eb;--accent-soft:#0f2a30;
  --ok:#6fd28a;--ok-bg:#12291a;
  --attn:#f0b24a;--attn-bg:#33270f;
  --blocked:#ff7a72;--blocked-bg:#3a1614;--on-blocked:#0b0b0c;

  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","JetBrains Mono","DejaVu Sans Mono",monospace;
  --text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:15px;--text-lg:18px;--text-xl:24px;
  --leading:1.5;--leading-tight:1.25;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;
  --radius:6px;--radius-lg:8px;--radius-full:999px;
  --hairline:1px solid var(--line);

  --w-column:48rem;--w-wide:72rem;--w-tasks:16.5rem;--w-panel:30rem;
  --ease:cubic-bezier(.2,0,0,1);--dur:120ms;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  color-scheme:light;
  --bg:#ffffff;--surface:#ffffff;--surface-sunk:#fafafa;--surface-sel:#f0f0f2;--surface-hover:#f5f5f6;
  --line:#ebebed;--line-strong:#d9d9dc;
  --fg:#171717;--fg-muted:#67676c;--fg-faint:#c4c4c8;
  --primary:#171717;--primary-hover:#383838;--on-primary:#ffffff;
  --accent:#0e7d91;--accent-ink:#0b6b7c;--accent-soft:#e3f3f6;
  --ok:#2b6e39;--ok-bg:#e7f2e9;--attn:#8a4f00;--attn-bg:#faefd9;--blocked:#a8261f;--blocked-bg:#fbe8e6;--on-blocked:#ffffff;
}}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#ffffff;--surface:#ffffff;--surface-sunk:#fafafa;--surface-sel:#f0f0f2;--surface-hover:#f5f5f6;
  --line:#ebebed;--line-strong:#d9d9dc;
  --fg:#171717;--fg-muted:#67676c;--fg-faint:#c4c4c8;
  --primary:#171717;--primary-hover:#383838;--on-primary:#ffffff;
  --accent:#0e7d91;--accent-ink:#0b6b7c;--accent-soft:#e3f3f6;
  --ok:#2b6e39;--ok-bg:#e7f2e9;--attn:#8a4f00;--attn-bg:#faefd9;--blocked:#a8261f;--blocked-bg:#fbe8e6;--on-blocked:#ffffff;
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}

/* Aliases: old variable names, kept until every rule has moved to the new tokens. */
:root{--card:var(--surface);--muted:var(--fg-muted);--bad:var(--blocked);--warn:var(--attn);
  --okbg:var(--ok-bg);--badbg:var(--blocked-bg);--warnbg:var(--attn-bg);--graybg:var(--surface-sel)}

/* Base */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--text-base)/var(--leading) var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.inline-link,.changed>a,.muted a,.activity>li>a{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}
/* The blank hop after SSO sign-in (#1108): the link appears only if the refresh has not happened. */
.hop-fallback{display:block;margin:var(--space-6);visibility:hidden;animation:hop-reveal 0s 2s forwards}
@keyframes hop-reveal{to{visibility:visible}}
code,pre,.mono{font-family:var(--font-mono);font-size:var(--text-sm)}
.muted{color:var(--fg-muted)}
.sol-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.sol-controls button:disabled{background:var(--surface-sunk);color:var(--fg-muted);border:var(--hairline);cursor:not-allowed}
.sol-output{height:22rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-sunk);border:var(--hairline);border-radius:var(--radius);padding:var(--space-3);unicode-bidi:plaintext}
#sol-input{width:100%;min-height:4rem;font-family:var(--font-mono)}
.label{font:500 var(--text-xs)/1.4 var(--font-sans);color:var(--fg-muted)}
.meta{font:var(--text-xs)/1.5 var(--font-mono);color:var(--fg-muted)}

/* Page */
.notice{margin:0;padding:var(--space-2) var(--space-4);font-size:var(--text-xs);border-bottom:var(--hairline);color:var(--attn);background:var(--attn-bg)}
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.shell:has(>.tasks){grid-template-columns:var(--w-tasks) minmax(0,1fr)}
main{width:100%;max-width:var(--w-column);margin:0 auto;padding:var(--space-5) var(--space-4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Task sidebar */
.tasks{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;overflow-y:auto;background:var(--surface-sunk);border-right:var(--hairline);padding:var(--space-4) var(--space-2);display:flex;flex-direction:column;gap:var(--space-3)}
.tasks .brand{padding:0 var(--space-2)}
.tgroup h2{font:500 var(--text-xs)/1.4 var(--font-sans);letter-spacing:0;color:var(--fg-muted);margin:0 0 var(--space-1);padding:0 var(--space-2)}
.tgroup summary{font:500 var(--text-xs)/1.4 var(--font-sans);color:var(--fg-muted);padding:0 var(--space-2);cursor:pointer}
.tgroup .count{margin-left:4px;font-variant-numeric:tabular-nums}
.tgroup ul{list-style:none;margin:0;padding:0}
.t-none{margin:0;padding:0 var(--space-2);font-size:var(--text-xs);color:var(--fg-muted)}
a.task{display:grid;grid-template-columns:14px minmax(0,1fr) auto;column-gap:var(--space-2);row-gap:2px;align-items:center;padding:var(--space-2);border-radius:var(--radius);color:var(--fg)}
a.task:hover{background:var(--surface-hover);text-decoration:none}
a.task.current{background:var(--surface-sel);box-shadow:inset 2px 0 0 var(--accent)}
a.task .t-title{font-size:var(--text-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.task .t-age{display:inline-flex;align-items:center;gap:6px;font:var(--text-xs)/1.4 var(--font-mono);color:var(--fg-muted)}
a.task .t-why{grid-column:2/-1;font-size:var(--text-xs);color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.task .t-bar{grid-column:2/-1}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tasks nav{display:flex;flex-direction:column;gap:2px;border-top:var(--hairline);padding-top:var(--space-3);margin-top:auto}
.tasks nav a,.tasks nav summary{display:block;padding:6px var(--space-2);border-radius:var(--radius);font-size:var(--text-sm);color:var(--fg-muted);cursor:pointer}
.tasks nav a:hover,.tasks nav summary:hover{background:var(--surface-hover);color:var(--fg);text-decoration:none}
.tasks nav a[aria-current=page]{color:var(--fg);background:var(--surface-sel)}
.tasks nav a.sub{padding-left:var(--space-5)}
.tasks .who{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2);margin:0;padding:0 var(--space-2);font-size:var(--text-xs);color:var(--fg-muted)}
.tasks .who .persona{flex-basis:100%;order:1}
@media (max-width:47.99rem){
  .shell:has(>.tasks){grid-template-columns:minmax(0,1fr)}
  .tasks{position:static;height:auto;border-right:0;border-bottom:var(--hairline)}
  .tasks .g-wait,.tasks .g-done{display:none}
  .tasks nav{flex-direction:row;flex-wrap:wrap;gap:2px var(--space-2);margin-top:0}
  .tasks nav details{display:contents}
}
h1{font:600 var(--text-xl)/var(--leading-tight) var(--font-sans);letter-spacing:-.02em;margin:var(--space-2) 0 var(--space-4);text-wrap:balance}
h2{font:600 var(--text-lg)/var(--leading-tight) var(--font-sans);letter-spacing:-.01em;margin:var(--space-5) 0 var(--space-2)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3)}
.card,.tile{background:var(--surface);border:var(--hairline);border-radius:var(--radius-lg);padding:var(--space-3)}
a.tile{color:inherit}a.tile:hover{text-decoration:none}
.tile .n{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}
.tile .l{color:var(--fg-muted);font-size:var(--text-sm)}

/* The card (docs/19-design-system.md): title, status, one sentence, impact, one button,
   Details / Settings / Evidence disclosures, footer. Cards that sit together are one bordered list. */
.stack{border:var(--hairline);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.stack>article.card{border:0;border-radius:0;border-top:var(--hairline)}
.stack>article.card:first-child{border-top:0}
article.card{padding:var(--space-4)}
article.card.draft{border-style:dashed;border-color:var(--line-strong)}
.stack>article.card.draft{border-style:solid;border-width:0;border-top:1px dashed var(--line-strong)}
.stack>article.card.draft:first-child{border-top:0}
article.card.closed,article.card.exception{background:var(--surface-sunk)}
.card-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
.card-title{font:600 var(--text-base)/var(--leading-tight) var(--font-sans);margin:0;letter-spacing:0}
.card-title a{color:var(--fg)}
.card-state{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.sentence{margin:var(--space-2) 0 0;font-size:var(--text-md);color:var(--fg)}
.impact{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--fg-muted)}
.card-bar{margin-top:var(--space-2)}
.card-act{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.card-act form{margin:0}
.who-can{margin:0;font-size:var(--text-sm);color:var(--fg-muted)}
.card-foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-3);font-size:var(--text-sm)}
.card-foot form{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin:0}
.card-foot label{display:flex;align-items:center;gap:var(--space-2);color:var(--fg-muted)}
.stale{border:1px solid var(--attn);background:var(--attn-bg);color:var(--attn);border-radius:var(--radius);padding:var(--space-2) var(--space-3);margin-top:var(--space-3);font-size:var(--text-sm)}
.stale a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tag.draft,.tag.exception,.tag.unverified{background:var(--surface-sunk)}
.tag.unverified{border-color:var(--attn);color:var(--attn)}

/* Disclosure: the progressive-disclosure primitive. Persona only decides which start open. */
details.activity{margin-top:var(--space-6);border-top:var(--hairline)}
details.activity>summary{cursor:pointer;padding:var(--space-2) 0;font:500 var(--text-sm)/1.4 var(--font-sans);color:var(--fg-muted)}
details.activity>summary:hover{color:var(--fg)}
ol.activity{list-style:none;margin:0;padding:0}
ol.activity>li{padding:var(--space-2) 0;border-top:var(--hairline)}
ol.activity>li:first-child{border-top:0}
ol.activity>li.danger .what{color:var(--bad)}
details.more{border-top:var(--hairline);margin-top:var(--space-4)}
details.more+details.more{margin-top:0}
details.more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0;font:500 var(--text-sm)/1.4 var(--font-sans);color:var(--fg-muted)}
details.more>summary:hover{color:var(--fg)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"";width:5px;height:5px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform var(--dur) var(--ease)}
details.more[open]>summary::before{transform:rotate(45deg)}
details.more>.body{padding:0 0 var(--space-2);overflow-x:auto}
details.more dd.mono{font:var(--text-xs)/1.6 var(--font-mono)}

/* First-sign-in question and the account page */
article.card.ask{margin-bottom:var(--space-5)}
ul.personas{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:var(--space-3)}
ul.personas li{display:grid;grid-template-columns:10rem minmax(0,1fr);align-items:center;gap:var(--space-1) var(--space-3)}
ul.personas li .tag{justify-self:start;grid-column:1}
ul.personas li .muted{grid-column:2;grid-row:1/3;font-size:var(--text-sm)}
ul.personas li button[aria-current]{border-color:var(--accent)}
@media (max-width:40rem){ul.personas li{grid-template-columns:minmax(0,1fr)}ul.personas li .muted{grid-column:1;grid-row:auto}}

/* Tables */
.table-wrap{overflow-x:auto}
.benchmark-summary{overflow-wrap:anywhere}
/* Pages whose table is the content get the wide column; every other page stays one column. */
main:has(.wide){max-width:var(--w-wide)}
main:has(.split){max-width:var(--w-wide)}
.split{display:grid;grid-template-columns:minmax(0,1fr) var(--w-panel);gap:var(--space-5);align-items:start}
.split>.panel{border-left:var(--hairline);padding-left:var(--space-5)}
.panel-nav{display:flex;gap:var(--space-2);font-size:var(--text-sm)}
.device-list{list-style:none;padding:0;margin:0}.device-list li{padding:var(--space-2) 0;border-bottom:var(--hairline)}.device-list a[aria-current]{font-weight:600}
.wide-only{display:none}
.device-serial{display:inline-flex;align-items:center;min-height:24px}
@media (min-width:72rem){.wide-only{display:inline-flex;align-items:center;min-height:24px}}
@media (max-width:71.99rem){.split{display:block}.split>.work{display:none}.split>.panel{border-left:0;padding-left:0}}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm);background:var(--surface);border:var(--hairline);border-radius:var(--radius-lg)}
th,td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:var(--hairline);vertical-align:top}
th{color:var(--fg-muted);font-weight:500;font-size:var(--text-xs)}

/* Badge: status icon (14px circle) plus the word. Colour never carries state alone. */
.badge{display:inline-flex;align-items:center;gap:6px;font:500 var(--text-xs)/1.4 var(--font-sans);color:var(--fg-muted);white-space:nowrap}
.badge::before{content:"";flex:none;box-sizing:border-box;width:14px;height:14px;border-radius:50%;border:1.5px dashed var(--fg-muted)}
.badge.ok{color:var(--ok)}
.badge.ok{position:relative}
.badge.ok::before{border:1.5px solid var(--ok);background:var(--ok)}
.badge.ok::after{content:"";position:absolute;left:4.5px;top:calc(50% - 5px);width:3px;height:6px;border:solid var(--bg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.badge.bad{color:var(--blocked)}
.badge.bad::before{border:1.5px solid var(--blocked);background-color:var(--blocked);
  background-image:linear-gradient(var(--bg),var(--bg));background-size:6px 1.5px;background-position:center;background-repeat:no-repeat}
.badge.warn{color:var(--attn)}
.badge.warn::before{border:1.5px solid var(--attn);background:radial-gradient(circle,var(--attn) 0 2.5px,transparent 3px)}

/* Forms */
form.filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}
form.inventory-filters{align-items:flex-end}
.inventory-filters .filter-field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.inventory-filters .inventory-search{flex:1 1 18rem;max-width:28rem}
.inventory-filters .inventory-search input{width:100%}
input,select,textarea{font:var(--text-sm) var(--font-sans);min-height:32px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--fg)}
input:focus,select:focus,textarea:focus{border-color:var(--fg-muted)}
textarea{width:100%;min-height:360px;font:var(--text-sm)/1.45 var(--font-mono)}
input[type=checkbox],input[type=radio]{min-height:0;accent-color:var(--accent)}

/* Buttons: primary is inverted (foreground on background) */
button,.button{font:500 var(--text-sm)/1 var(--font-sans);min-height:32px;padding:0 12px;border-radius:var(--radius);cursor:pointer;
  border:1px solid var(--primary);background:var(--primary);color:var(--on-primary);display:inline-flex;align-items:center;gap:6px;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
button:hover,.button:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary);text-decoration:none}
button.secondary{background:var(--surface);color:var(--fg);border-color:var(--line-strong)}
button.secondary:hover{background:var(--surface-hover);border-color:var(--line-strong);color:var(--fg)}
button.danger,button.danger:hover{background:var(--blocked);border-color:var(--blocked);color:var(--on-blocked)}
button.danger:hover{filter:brightness(.92)}
button.link,button.link:hover{background:none;border:0;min-height:0;height:auto;padding:0;color:var(--accent-ink);font:inherit}
button.link:hover{text-decoration:underline;text-underline-offset:3px}

/* Errors and OK messages */
.error{background:var(--blocked-bg);color:var(--blocked);border:1px solid var(--blocked);padding:var(--space-2) var(--space-3);border-radius:var(--radius);margin:var(--space-2) 0;white-space:pre-wrap}
/* A field's own error (#652): under the field, tied to it by aria-describedby. */
.field-error{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--blocked)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--blocked)}
form.profile-form,form.bind{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:28rem}
form.profile-form .hint{margin:0;font-size:var(--text-xs);color:var(--fg-muted)}
.ok-msg{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok);padding:var(--space-2) var(--space-3);border-radius:var(--radius);margin:var(--space-2) 0}

/* Key/value */
dl.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px var(--space-4);margin:0;font-size:var(--text-sm)}
dl.kv dt{color:var(--fg-muted)}dl.kv dd{margin:0;overflow-wrap:anywhere}

/* Login */
.login{max-width:420px;margin:var(--space-7) auto}
.login input{width:100%;margin:6px 0 var(--space-3)}

/* Status icon, tag and progress: ready for the markup that adopts them in later steps */
.led{display:inline-block;position:relative;flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--fg-faint)}
.led.attn{border-color:var(--attn);background:radial-gradient(circle,var(--attn) 0 2.5px,transparent 3px)}
.led.run{border-color:var(--accent);padding:2px;background:conic-gradient(var(--accent) 0 180deg,transparent 0) content-box}
.led.wait{border:1.5px dashed var(--fg-muted)}
.led.ok{border-color:var(--ok);background:var(--ok)}
.led.ok::after{content:"";position:absolute;left:3.5px;top:1.5px;width:3px;height:6px;border:solid var(--bg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.led.blocked{border-color:var(--blocked);background:var(--blocked)}
.led.blocked::before,.led.blocked::after{content:"";position:absolute;left:5px;top:2px;width:1.5px;height:7px;background:var(--bg);transform:rotate(45deg)}
.led.blocked::after{transform:rotate(-45deg)}
.status{display:inline-flex;align-items:center;gap:6px;font:500 var(--text-xs)/1 var(--font-sans);color:var(--fg-muted);white-space:nowrap}
.status.attn{color:var(--attn)}.status.ok{color:var(--ok)}.status.blocked{color:var(--blocked)}.status.run{color:var(--accent-ink)}
.tag{display:inline-block;padding:1px 7px;border:var(--hairline);border-radius:var(--radius);background:var(--surface);font:500 var(--text-xs)/1.6 var(--font-sans);color:var(--fg-muted);white-space:nowrap}
.tag.rec{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
progress{appearance:none;-webkit-appearance:none;width:100%;height:3px;border:0;border-radius:2px;background:var(--line-strong);overflow:hidden}
progress::-webkit-progress-bar{background:var(--line-strong)}
progress::-webkit-progress-value{background:var(--accent)}
progress::-moz-progress-bar{background:var(--accent)}

/* Settings rows (docs/19-design-system.md, "Settings rows"): label and reason, the current value,
   its provenance, and the form that opens a draft. */
ul.srows{list-style:none;margin:var(--space-3) 0 0;padding:0;border:var(--hairline);border-radius:var(--radius-lg);background:var(--surface)}
.srow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,3fr);gap:var(--space-2) var(--space-4);align-items:start;padding:var(--space-3) var(--space-4);border-top:var(--hairline)}
.srow:first-child{border-top:0}
.row-text{display:flex;flex-direction:column;gap:2px}
.row-label{font:600 var(--text-sm)/1.4 var(--font-sans)}
.row-reason{font-size:var(--text-xs);line-height:1.5}
.row-value{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:var(--text-sm)}
.row-was{font-size:var(--text-xs)}
.row-prov{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);font-size:var(--text-xs)}
.row-prov form{margin:0}
.row-edit{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin:0}
.tag.state-ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.tag.state-attn{background:var(--attn-bg);border-color:transparent;color:var(--attn)}
.tag.state-bad{background:var(--blocked-bg);border-color:transparent;color:var(--blocked)}
.tag.locked{background:var(--surface-sunk);color:var(--fg)}
form.inline{display:inline;margin:0}
p.pending-note{margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);border:1px dashed var(--line-strong);border-radius:var(--radius);font-size:var(--text-sm)}
ul.changes{margin:var(--space-3) 0 0;padding-left:var(--space-4);font-size:var(--text-sm)}
@media (max-width:47.99rem){.srow{grid-template-columns:minmax(0,1fr)}}

/* Composer and thread (docs/19-design-system.md, "Composer" and "Thread"): one command line that
   starts a task, and a task's turns as rows with a 24px avatar. No bubbles. */
.composer-bar{margin:0 0 var(--space-5)}
form.composer{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-1) var(--space-1) var(--space-1) var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface)}
form.composer:focus-within{border-color:var(--fg-muted)}
form.composer .prompt{font:var(--text-base)/1 var(--font-mono);color:var(--fg-muted)}
form.composer input{flex:1;min-width:0;border:0;background:transparent;padding-left:0}
form.composer input:focus{outline:none}
.composer-bar .hint{margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--fg-muted)}
.templates{margin-top:var(--space-3)}
.templates p.label{margin:0 0 var(--space-2)}
.templates ul,ul.choices{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.templates form,ul.choices form{margin:0}
form.choices{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-2) 0 0}
form.choices label{display:flex;align-items:center;gap:var(--space-2);color:var(--fg-muted);font-size:var(--text-sm)}
ol.thread{list-style:none;margin:0 0 var(--space-5);padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
li.turn{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--space-3);align-items:start}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-full);background:var(--surface-sel);color:var(--fg);font:600 10px/1 var(--font-sans)}
.avatar.sys{background:var(--fg);color:var(--bg);font-size:var(--text-xs)}
li.turn .said{min-width:0}
li.turn .who{display:block;font:500 var(--text-xs)/1.4 var(--font-sans);color:var(--fg-muted)}
li.turn .said>p{margin:2px 0 0;font-size:var(--text-md)}
li.turn .said>article.card,li.turn .said>form.composer{margin-top:var(--space-3)}
.found h3{font:500 var(--text-xs)/1.4 var(--font-sans);color:var(--fg-muted);margin:var(--space-3) 0 var(--space-1)}
.found ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:var(--text-sm)}
ul.closed-cards{margin:var(--space-3) 0 0;padding-left:var(--space-4);font-size:var(--text-sm)}
/* Live sidebar (#449): drawn only by /static/live.js when a group's tasks changed. */
.tgroup .t-reload{display:block;margin:2px 0 4px;font:var(--text-xs)/1.4 var(--font-mono);color:var(--accent)}

/* Overview navigation stays above task work; live.js keeps its existing group selectors. */
.tasks nav.primary{margin-top:0;border-top:0;padding-top:0}
.tasks .who{margin-top:auto}
.overview-unavailable{padding:var(--space-3);margin-top:var(--space-5);border:1px solid var(--attn);border-radius:var(--radius-lg);background:var(--attn-bg)}
.overview-unavailable h2{margin-top:0}
.skip-link{position:fixed;top:var(--space-2);left:var(--space-2);z-index:100;padding:var(--space-2) var(--space-3);color:var(--on-primary);background:var(--primary);border-radius:var(--radius);transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
form.composer input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:47.99rem){.tasks .who{margin-top:0}}
.overview-evidence>summary{min-height:32px;padding:6px 0;cursor:pointer}
.impact a{text-decoration:underline;text-underline-offset:3px}

/* Task activity availability preserves task-link focus and the primary navigation. */
.task-activity{display:flex;flex-direction:column;gap:var(--space-3)}
.task-status{margin:0;padding:0 var(--space-2);font-size:var(--text-xs);color:var(--fg-muted)}
.task-status:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.task-retry{padding:0 var(--space-2);font-size:var(--text-xs)}
[data-task-retry][hidden],.t-none[hidden]{display:none}