/* The look of the dev platform. Tokens first (docs/ui-design.md), then one set of components used by every page.
   Light and dark share the same names; the contrast of the pairs is checked by tests/test_contrast.py. */
/* The visual contract is the approved design reference (docs/ui-design.md): its palette, spacing, radii and composition.
   Text sizes keep the production floor (16 body, 14 secondary, 12 badges), where the reference is smaller. */
:root{
  /* colour: graphite greys, one blue, and a soft tint per state (amber = needs you, red = failed, blue = working, violet = review, green = done) */
  --bg:#f5f5f7;--surface:#fff;--surface-2:#f0f0f3;--ink:#1d1d1f;--muted:#6a6a70;--line:#e3e3e8;--border:#86868b;
  --accent:#1f6fe0;--on-accent:#fff;--accent-hover:#1a5fc4;--accent-text:#1a5fc4;--accent-soft:#e8f0fc;
  --violet:#6355c8;--violet-line:#6f60c8;--violet-edge:#9d8ee2;--violet-ink:#5a4bc4;--violet-on:#fff;--violet-soft:#eeebfb;--violet-text:#5848c2;
  --ok:#1f6e53;--ok-soft:#e6f4ec;--warn:#85540b;--warn-soft:#fcf1dc;--bad:#ad2339;--bad-soft:#fceef0;--info:#2b5c9b;--info-soft:#e9f1fc;
  /* the side bar: a source list that follows the theme (light grey here, graphite in the dark theme) */
  --night:#e9e9ee;--night-ink:#1d1d1f;--night-muted:#5f5f66;--night-line:#00000014;--night-hover:#0000000a;--night-active:#d9d9e0;--night-nav:#2c2c31;--night-label:#5f5f66;
  --term-bg:#162133;--term-ink:#d4dfec;--term-muted:#9fb0c9;--term-line:#2d3a50;--term-button:#22314a;
  --raised:#fff;--dash:#cdd3e1;--overlay:#1d1d1f99;--shadow:none;--shadow-pop:0 8px 28px #1d1d1f33;
  /* spacing on a 4 px grid */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;
  /* shape */
  --radius:10px;--radius-sm:8px;--radius-pill:999px;
  /* type: the system font, body 16, secondary 14, nothing under 12 */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:20px;--text-xl:24px;--text-2xl:30px;
  --control:36px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1a1a1c;--surface:#232326;--surface-2:#2c2c30;--ink:#ededf0;--muted:#a9a9b3;--line:#38383e;--border:#7c7c85;
  --accent:#2f6fd8;--on-accent:#fff;--accent-hover:#2a63c2;--accent-text:#8ab4f8;--accent-soft:#22304a;
  --violet:#6355c8;--violet-line:#8678e0;--violet-edge:#8678e0;--violet-ink:#c5bbff;--violet-on:#35295c;--violet-soft:#2f2a4a;--violet-text:#c3b8ff;
  --ok:#8cd0ad;--ok-soft:#1d3d35;--warn:#e4bd79;--warn-soft:#3d3528;--bad:#f3a4b2;--bad-soft:#402936;--info:#a5c5f3;--info-soft:#25374d;
  --night:#222226;--night-ink:#ededf0;--night-muted:#a9a9b3;--night-line:#ffffff14;--night-hover:#ffffff0f;--night-active:#ffffff1f;--night-nav:#c8c8cf;--night-label:#8d8d96;
  --raised:#4a4a50;--dash:#46546e;--overlay:#000000b3;--shadow:none;--shadow-pop:0 8px 28px #000a;
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#1a1a1c;--surface:#232326;--surface-2:#2c2c30;--ink:#ededf0;--muted:#a9a9b3;--line:#38383e;--border:#7c7c85;
  --accent:#2f6fd8;--on-accent:#fff;--accent-hover:#2a63c2;--accent-text:#8ab4f8;--accent-soft:#22304a;
  --violet:#6355c8;--violet-line:#8678e0;--violet-edge:#8678e0;--violet-ink:#c5bbff;--violet-on:#35295c;--violet-soft:#2f2a4a;--violet-text:#c3b8ff;
  --ok:#8cd0ad;--ok-soft:#1d3d35;--warn:#e4bd79;--warn-soft:#3d3528;--bad:#f3a4b2;--bad-soft:#402936;--info:#a5c5f3;--info-soft:#25374d;
  --night:#222226;--night-ink:#ededf0;--night-muted:#a9a9b3;--night-line:#ffffff14;--night-hover:#ffffff0f;--night-active:#ffffff1f;--night-nav:#c8c8cf;--night-label:#8d8d96;
  --raised:#4a4a50;--dash:#46546e;--overlay:#000000b3;--shadow:none;--shadow-pop:0 8px 28px #000a;
  color-scheme:dark;}

/* base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--bg);font:var(--text-md)/1.5 var(--font);overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0}
h1{font-size:var(--text-xl);line-height:1.25;font-weight:700;letter-spacing:-.4px}
h2{font-size:var(--text-md);line-height:1.3;font-weight:650;letter-spacing:-.2px}
h3{font-size:var(--text-md);line-height:1.4;font-weight:650}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
code{font:var(--text-sm) var(--mono)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.hidden{display:none!important}.muted{color:var(--muted)}.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}.grow{flex:1;min-width:0}
.skip-link{position:absolute;left:var(--s4);top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:var(--s2) var(--s4);border-radius:var(--radius-sm);font-weight:600}.skip-link:focus{top:var(--s2)}

/* buttons: primary, secondary (default), quiet, danger; small, big; disabled; loading */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--control);padding:0 14px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:var(--text-sm);font-weight:600;line-height:1.2;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:var(--surface-2)}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.quiet{border-color:transparent;background:none;color:var(--muted)}.btn.quiet:hover{background:var(--surface-2);color:var(--ink)}
.btn.danger,.danger{color:var(--bad)}.btn.danger{border-color:var(--bad)}.btn.danger:hover{background:var(--bad-soft)}
/* the one gesture of a row that needs you: amber for an answer, red for something that failed; the hover fills it */
.btn.tone-amber,.btn.tone-red{border-color:transparent}
.btn.tone-amber{background:var(--warn-soft);color:var(--warn)}.btn.tone-amber:hover{background:var(--warn);color:var(--warn-soft)}
.btn.tone-red{background:var(--bad-soft);color:var(--bad)}.btn.tone-red:hover{background:var(--bad);color:var(--bad-soft)}
.btn.small{min-height:30px;padding:0 var(--s3)}.btn.big{min-height:44px;padding:0 var(--s6);font-size:var(--text-md)}
.btn:disabled,.btn.disabled{opacity:.55;cursor:default;pointer-events:none}
.btn.loading{position:relative;color:transparent!important;pointer-events:none}
.btn.loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--on-accent);border-top-color:transparent;animation:spin .8s linear infinite}
.btn:not(.primary).loading::after{border-color:var(--ink);border-top-color:transparent}
a.btn{text-decoration:none}

/* inputs and textareas: a label above, an error text below */
input,textarea{width:100%;min-height:var(--control);border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);padding:var(--s2) var(--s3)}
textarea{resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[readonly]{background:var(--surface-2)}
.field{margin-bottom:var(--s4)}.field label,.label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--s2)}
.field.invalid input,.field.invalid textarea{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.field-error{display:block;font-size:var(--text-sm);color:var(--bad);margin-top:var(--s1);min-height:0}.field-error:empty{display:none}
.error{font-size:var(--text-sm);color:var(--bad)}

/* badges */
.status{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);line-height:1.4;padding:2px 9px;border-radius:var(--radius-pill);font-weight:600;white-space:nowrap;margin-left:var(--s2);vertical-align:middle}
.tone-green{background:var(--ok-soft);color:var(--ok)}.tone-blue{background:var(--info-soft);color:var(--info)}.tone-purple{background:var(--violet-soft);color:var(--violet-text)}
.tone-amber{background:var(--warn-soft);color:var(--warn)}.tone-red{background:var(--bad-soft);color:var(--bad)}.tone-gray{background:var(--surface-2);color:var(--muted)}
.status::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}.status:has(svg)::before{display:none}.status svg{width:12px;height:12px}
.badges{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}.badges .status{margin-left:0}

/* cards / panels, list rows, tables */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:var(--s5)}
.panel-attention{border-color:var(--warn)}
.panel-head{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap}
.panel-head p{font-size:var(--text-sm);margin-top:var(--s1);color:var(--muted)}
.session-list{list-style:none;margin:0;padding:0}
.session-item,.task-row{padding:12px 16px;border-top:1px solid var(--line)}
.session-item:first-child,.task-row:first-child{border-top:0}
.session-item:hover{background:var(--surface-2)}
.session-item{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.session-item .name{flex:1;min-width:0;font:600 var(--text-sm) var(--mono);overflow-wrap:anywhere}
.item-text{flex:1;min-width:0;font-size:var(--text-md)}.item-text.muted{color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.table th{text-align:left;font-weight:650;color:var(--muted);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}.table td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.body{padding:0 var(--s6) var(--s5);font-size:var(--text-md);color:var(--ink);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}

/* empty, loading and error states, notices, toasts */
.empty{padding:var(--s10) var(--s6);text-align:center;color:var(--muted);font-size:var(--text-md);border-top:1px solid var(--line);list-style:none}
.empty p{margin:0 auto var(--s4);max-width:34em}.empty .btn{margin:0 auto}.empty:first-child{border-top:0}.empty.error-state p{color:var(--ink)}
.skeleton-row{display:grid;gap:var(--s2);padding:var(--s5) var(--s6);border-top:1px solid var(--line);list-style:none}.skeleton-row:first-child{border-top:0}
.skeleton-bar{display:block;height:12px;width:30%;border-radius:6px;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite}.skeleton-bar.wide{width:55%}
.notice{border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);background:var(--warn-soft);color:var(--warn);padding:var(--s3) var(--s4);border-radius:var(--radius);font-size:var(--text-sm);font-weight:500;margin-bottom:var(--s4)}
.preparing{display:flex;align-items:center;gap:var(--s3);background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s5);font-size:var(--text-md);font-weight:600}
.spinner{width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite;flex-shrink:0}
.toasts{position:fixed;right:var(--s4);bottom:var(--s4);z-index:60;display:grid;gap:var(--s2);max-width:calc(100vw - 32px)}
.toast{background:var(--night);color:var(--night-ink);padding:var(--s3) var(--s4);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);font-size:var(--text-sm);font-weight:500}
.link{color:var(--accent-text);font-weight:600;text-decoration:underline}
.guide{margin:0;padding:0 var(--s6) var(--s5);font-size:var(--text-sm);color:var(--muted);line-height:1.7}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{to{background-position:-200% 0}}

/* dialog */
.dialog{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);max-width:440px;width:calc(100% - 32px);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop)}
.dialog::backdrop{background:var(--overlay)}.dialog p{color:var(--muted);margin:var(--s3) 0 var(--s5)}.dialog-actions{justify-content:flex-end}

/* shell: a source-list side bar (218 px), a quiet 52 px title bar with no fill, content up to 1510 px */
.app{display:grid;grid-template-columns:218px minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--night);color:var(--night-nav);position:fixed;inset:0 auto 0 0;width:218px;display:flex;flex-direction:column;padding:18px 12px 12px;z-index:30;overflow-y:auto;border-right:1px solid var(--night-line)}
.brand{display:flex;align-items:center;gap:9px;padding:0 8px 22px;color:var(--night-ink);font-weight:650;font-size:var(--text-md);letter-spacing:-.3px}
.brandmark{width:24px;height:24px;border-radius:6px;flex-shrink:0}
.nav-label{font-size:var(--text-xs);font-weight:600;color:var(--night-label);padding:0 10px;margin:4px 0 6px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border-radius:7px;font-size:var(--text-md);font-weight:500;color:var(--night-nav)}
.nav a svg{width:18px;height:18px;color:var(--accent-text)}
.nav a:hover{background:var(--night-hover);color:var(--night-ink)}.nav a.active{background:var(--night-active);color:var(--night-ink);font-weight:600}
.nav-count{margin-left:auto;font-size:var(--text-xs);font-weight:600;min-width:20px;text-align:center;background:var(--night-line);padding:1px 7px;border-radius:var(--radius-pill);color:var(--night-nav)}.nav-count:empty{display:none}
.nav-count.hot{background:var(--warn-soft);color:var(--warn)}
.sidebar :focus-visible{outline-color:var(--accent)}
.sidebar-section{margin-top:22px}
.side-footer{margin-top:auto;padding-top:20px}
.environment-mini{background:var(--night-hover);border:1px solid var(--night-line);border-radius:8px;padding:10px 12px;margin:0 0 12px;color:var(--night-ink);font-size:var(--text-sm);line-height:1.4}
.environment-mini small{display:block;margin-top:6px;color:var(--night-label);font-size:var(--text-xs)}
.environment-mini .bar{height:3px;background:var(--night-line);margin-top:12px;border-radius:3px}.environment-mini .bar span{display:block;height:3px;background:var(--accent);border-radius:3px;width:0}
.dot{display:inline-block;width:6px;height:6px;background:currentColor;border-radius:50%;margin-right:6px;vertical-align:middle}.online{color:#30a46c}.waking{color:#d08a1a}.offline{color:var(--night-muted)}
.profile{position:relative;padding-top:12px;border-top:1px solid var(--night-line)}
.profile-button{display:flex;gap:9px;align-items:center;width:100%;min-height:44px;padding:var(--s1) 6px;border-radius:7px;text-align:left;color:var(--night-ink)}.profile-button:hover{background:var(--night-hover)}
.profile-button .who{flex:1;min-width:0}.profile-button svg{width:17px;height:17px;color:var(--night-label)}
.profile strong{color:var(--night-ink);font-size:var(--text-sm);font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis}.profile small{display:block;color:var(--night-label);font-size:var(--text-xs)}
.avatar{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font-size:var(--text-xs);font-weight:650;flex-shrink:0;text-transform:uppercase}
.user-menu{position:absolute;bottom:100%;left:0;right:0;margin-bottom:var(--s2);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:var(--s2);z-index:40}
.user-menu button{display:block;width:100%;text-align:left;min-height:40px;padding:0 var(--s3);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500}.user-menu button:hover{background:var(--surface-2)}
.main{grid-column:2;min-width:0}
.topbar{height:52px;display:flex;align-items:center;gap:14px;padding:0 32px;background:transparent}
.topbar .spacer{flex:1}
.breadcrumbs{font-size:var(--text-sm);color:var(--muted);display:flex;gap:8px;align-items:center}.breadcrumbs b{font-weight:600;color:var(--ink)}
.menu{display:none;width:44px;height:44px;border-radius:7px;align-items:center;justify-content:center;color:var(--ink)}.menu:hover{background:var(--surface-2)}.menu svg{width:20px;height:20px}
.backdrop{display:none}
.content{max-width:1510px;margin:auto;padding:12px 32px 40px}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:var(--s5)}.page-head>:first-child{min-width:0;flex:1}.page-head>.btn{flex-shrink:0}.page-head p{color:var(--muted);font-size:var(--text-sm);margin-top:4px}
.head-with-action{align-items:center}
.form{padding:var(--s6)}
.new-session{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;padding:var(--s4) var(--s6);border-top:1px solid var(--line)}.new-session .field{margin:0;flex:1;min-width:200px;max-width:320px}
.new-session #codexHint,.new-session #error{flex:1 0 100%;margin:0}

/* project picker, storage meter, dialog extras */
.combo{position:relative}.field-hint{display:block;font-size:var(--text-sm);color:var(--muted);margin-top:var(--s1)}.field-hint:empty{display:none}.field-hint a{color:var(--accent-text);font-weight:600;text-decoration:underline}
.combo-list{position:absolute;left:0;right:0;top:calc(var(--control) + 28px);z-index:20;list-style:none;margin:0;padding:var(--s1);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);max-height:300px;overflow-y:auto}
.combo-list li{display:grid;gap:2px;padding:var(--s2) var(--s3);border-radius:6px;cursor:pointer}.combo-list li.active,.combo-list li:hover{background:var(--accent-soft)}
.combo-list strong{font-size:var(--text-sm);overflow-wrap:anywhere}.combo-list small{font-size:var(--text-sm);color:var(--muted);overflow-wrap:anywhere}
.meter-wrap{padding:0 var(--s6) var(--s5)}.meter{height:12px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--line);overflow:hidden}.meter span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill)}.meter.full span{background:var(--bad)}
.session-title{flex:1;min-width:0;display:grid;gap:2px}.session-title strong{overflow-wrap:anywhere}.session-title small{font-size:var(--text-sm);color:var(--muted);overflow-wrap:anywhere}
.size{font-size:var(--text-sm);color:var(--muted);white-space:nowrap}
.check{display:flex;gap:var(--s2);align-items:flex-start;margin:0 0 var(--s4);font-size:var(--text-sm)}.check input{width:18px;min-height:18px;margin-top:2px}
.unsaved{border:1px solid var(--warn);background:var(--warn-soft);color:var(--warn);border-radius:var(--radius-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s4);font-size:var(--text-sm)}.unsaved ul{margin:var(--s2) 0 0;padding-left:var(--s5)}
.dialog p.error{margin:0 0 var(--s3)}.dialog p.error:empty{display:none}
.terminal-status{color:#f0c987;margin-left:var(--s2)}
/* session cards, the changes panel and the code view */
.cards{list-style:none;margin:0;padding:0 var(--s6) var(--s6);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
.cards>.empty,.cards>.skeleton-row{grid-column:1/-1}.cards>.skeleton-row{border:1px solid var(--line);border-radius:var(--radius-sm)}
.session-card{display:grid;gap:var(--s3);align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow)}
.session-card.waiting{border-color:var(--warn)}
.session-card .card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}.session-card .card-head .status{margin:0;flex-shrink:0}
.session-card small{display:block;font-size:var(--text-sm);color:var(--muted);overflow-wrap:anywhere}
.preview{margin:0;background:var(--term-bg);color:var(--term-ink);border-radius:var(--radius-sm);padding:var(--s3);font:var(--text-xs)/1.45 var(--mono);height:12.5em;overflow:hidden;white-space:pre;border:1px solid var(--term-line)}
.preview:empty::before{content:"\2026";color:var(--term-muted)}
.card-actions{display:flex;gap:var(--s2);justify-content:flex-end}
.session-tabs{display:inline-flex;gap:2px;padding:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.session-tabs button{min-height:28px;padding:0 var(--s3);border-radius:6px;color:var(--muted);font-size:var(--text-sm);font-weight:600}.session-tabs button:hover{color:var(--ink)}.session-tabs button[aria-selected="true"]{background:var(--surface);color:var(--accent-text);box-shadow:0 1px 3px #19243a1f}
.terminal-body{display:flex;flex-direction:column;min-width:0}.terminal-main{flex:1;min-width:0}
.changes-panel{border-top:1px solid var(--term-line);padding:var(--s4);overflow-y:auto;max-height:240px}
.changes-panel h3{color:#fff}.changes-panel .muted{color:var(--term-muted);font-size:var(--text-sm);margin-bottom:var(--s3)}
.changes-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1) var(--s4);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.changes-list button{display:flex;gap:var(--s2);align-items:center;width:100%;text-align:left;padding:var(--s1) var(--s2);border-radius:6px;color:var(--term-ink);font:var(--text-sm) var(--mono)}.changes-list button:hover{background:var(--term-button)}
.changes-list .path{overflow-wrap:anywhere;flex:1;min-width:0}
.change{font:700 var(--text-xs) var(--font);padding:1px 6px;border-radius:5px;flex-shrink:0;background:var(--term-button);color:var(--term-ink)}
.change.new,.change.added{background:#14261f;color:#9ad7bb}.change.deleted{background:#3a1d26;color:#ffb3c0}.change.modified,.change.renamed{background:#2b2418;color:#f0c987}
.code-view{background:var(--surface);color:var(--ink);height:max(380px,calc(100vh - 360px));display:flex;flex-direction:column;min-height:0}
.code-bar{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);flex-wrap:wrap}
.code-crumbs{font:var(--text-sm) var(--mono);color:var(--muted);overflow-wrap:anywhere}.code-crumbs button{color:var(--accent-text);font:inherit;text-decoration:underline;padding:0}
.code-split{display:flex;flex:1;min-height:0}
.code-tree{list-style:none;margin:0;padding:var(--s2);width:240px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--line)}
.code-tree button{display:flex;gap:var(--s2);width:100%;text-align:left;padding:var(--s1) var(--s2);border-radius:6px;font-size:var(--text-sm);overflow-wrap:anywhere}.code-tree button:hover,.code-tree button.active{background:var(--accent-soft)}
.code-pane{flex:1;min-width:0;display:flex;flex-direction:column}
.code-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);font-size:var(--text-sm);flex-wrap:wrap}.code-head strong{font-family:var(--mono);overflow-wrap:anywhere}
.code-body{flex:1;overflow:auto;background:var(--surface-2);font:var(--text-sm)/1.5 var(--mono)}
.code-body .message{padding:var(--s5);font:var(--text-md) var(--font);color:var(--muted)}
.code-line{display:flex;white-space:pre}.code-line .ln{flex-shrink:0;width:4em;padding-right:var(--s3);text-align:right;color:var(--muted);user-select:none}.code-line .tx{padding-right:var(--s4)}
.code-line.add{background:var(--ok-soft);color:var(--ok)}.code-line.del{background:var(--bad-soft);color:var(--bad)}.code-line.hunk{color:var(--info);background:var(--info-soft)}
.tok-comment{color:var(--muted);font-style:italic}.tok-string{color:var(--ok)}.tok-keyword{color:var(--accent-text);font-weight:600}.tok-number{color:var(--info)}
.commit{display:grid;gap:2px;padding:var(--s3) var(--s4);border-top:1px solid var(--line)}.commit:first-child{border-top:0}.commit small{color:var(--muted);font-size:var(--text-sm)}
.terminal-full .terminal-body{flex:1;min-height:0}.terminal-full .code-view{height:auto;flex:1}.terminal-full .changes-panel{max-height:30vh}
/* the Claude sign-in flow */
.flow{padding:var(--s1) var(--s6) var(--s6);display:grid;gap:var(--s5)}
.flow-step{display:flex;gap:var(--s4);align-items:flex-start}
.step-number{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-grid;place-items:center;font-size:var(--text-sm);font-weight:700;flex-shrink:0}
.step-body{flex:1;min-width:0}.step-body h3{margin-bottom:var(--s1)}.step-body p{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--s3)}
.step-actions{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s2)}.step-actions input{flex:1;min-width:200px}
.link-text{margin-top:var(--s3);font:var(--text-sm) var(--mono)}.device-code{font:700 var(--text-xl) var(--mono);letter-spacing:.12em;user-select:all;overflow-wrap:anywhere}

/* home: next actions and recent tasks on the left, where to pick up the work and the latest activity on the right */
.overview-grid{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:20px;align-items:start}.column{min-width:0}
.number{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted);font-size:var(--text-xs);font-weight:600;min-width:22px;height:22px;padding:0 7px;border-radius:var(--radius-pill);margin-left:8px;vertical-align:middle}
.number.hot{background:var(--warn-soft);color:var(--warn)}
.sync-state{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--muted)}.sync-state svg{width:12px;height:12px}
.link-quiet{color:var(--accent-text);font-weight:600;font-size:var(--text-sm);display:inline-flex;align-items:center;gap:6px}.link-quiet:hover{text-decoration:underline}.link-quiet svg{width:15px;height:15px}

/* one row for a task, wherever it is listed: a chip for the kind of attention, a bold title over one quiet line, and at the end
   the one gesture (the amber or red button when it needs you, else the time and a chevron). The whole row opens the task. */
.task-row,.action-row{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px;border-top:0;list-style:none}
.task-row+.task-row::before,.action-row+.action-row::before,.task-group+.task-row::before{content:"";position:absolute;left:62px;right:0;top:0;height:1px;background:var(--line)}
.task-row:hover,.action-row:hover{background:var(--surface-2)}
.task-row:hover::before,.task-row:hover+.task-row::before,.action-row:hover::before,.action-row:hover+.action-row::before{background:transparent}
.task-chip,.action-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;flex-shrink:0}.task-chip svg,.action-icon svg{width:18px;height:18px}
.task-title{min-width:0}
.task-name,.action-title{font-size:var(--text-md);font-weight:600;line-height:1.35;display:block;overflow-wrap:anywhere;color:var(--ink)}
.task-name::after,.action-title::after{content:"";position:absolute;inset:0}   /* the whole row is the link */
.task-row.done .task-name{color:var(--muted);font-weight:500}
.task-sub,.action-row p{display:block;margin-top:2px;font-size:var(--text-sm);line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.task-sub svg{display:none}
.task-end{position:relative;z-index:1;display:flex;align-items:center;gap:12px;justify-content:flex-end}
.task-end .btn{min-height:32px}
.task-time{font-size:var(--text-sm);color:var(--muted);text-align:right;white-space:nowrap}
.task-chevron{width:16px;height:16px;color:var(--border)}.task-row:hover .task-chevron{color:var(--ink)}
.row-tool{display:grid;place-items:center;width:32px;height:32px;border-radius:7px;color:var(--muted);opacity:0;transition:opacity .12s}.row-tool svg{width:17px;height:17px}
.task-row:hover .row-tool,.row-tool:focus-visible{opacity:1}.row-tool:hover{background:var(--accent-soft);color:var(--accent-text)}
.task-group{list-style:none;display:flex;align-items:center;gap:8px;padding:14px 16px 6px;font-size:var(--text-xs);font-weight:700;letter-spacing:.2px;text-transform:uppercase;color:var(--muted)}
.task-group .number{margin:0;height:20px;min-width:20px}
.task-group.needs{color:var(--warn)}.task-group.needs .number{background:var(--warn-soft);color:var(--warn)}
.task-group+.task-row::before{display:none}
.task-row+.task-group{border-top:1px solid var(--line)}
.merge-progress{font-size:var(--text-sm);color:var(--muted)}.progress-lines{display:flex;gap:3px;margin-bottom:6px;max-width:85px}
.progress-lines i{height:4px;background:var(--line);border-radius:2px;flex:1}.progress-lines i.complete{background:var(--violet-line)}
.action-row>.btn{min-height:32px}
.resume-card{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);position:relative;overflow:hidden;margin-bottom:var(--s5)}
.resume-card h2{margin:10px 0 6px;overflow-wrap:anywhere}.resume-card p{font-size:var(--text-sm);color:var(--muted)}.resume-card .btn{margin-top:14px;width:100%}
.resume-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.2px;text-transform:uppercase;color:var(--muted);display:flex;gap:7px;align-items:center}.resume-label svg,.mini-repo svg{width:14px;height:14px}
.mini-repo{margin-top:12px;font-size:var(--text-sm);display:flex;gap:7px;align-items:center;color:var(--muted);overflow-wrap:anywhere}
.activity{padding:0 16px 16px}.event{display:grid;grid-template-columns:18px 1fr;gap:10px;padding-top:14px;position:relative}
.event:not(:last-child):after{content:"";position:absolute;width:1px;background:var(--line);top:34px;bottom:-10px;left:8px}
.event-icon{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;margin-top:2px;z-index:1}.event-icon svg{width:11px;height:11px}
.event p{font-size:var(--text-sm);line-height:1.45;color:var(--ink);overflow-wrap:anywhere}.event small{color:var(--muted);font-size:var(--text-xs);display:block;margin-top:3px}
.waiting-box{padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--s5)}
.waiting-box h3{font-size:var(--text-sm);display:flex;gap:8px;align-items:center}.waiting-box h3 svg{width:16px;height:16px;color:var(--violet-text)}.waiting-box p{font-size:var(--text-sm);color:var(--muted);margin:6px 0 10px}
.waiting-box .link{display:inline-flex;gap:6px;align-items:center}.waiting-box .link svg{width:14px;height:14px}

/* tasks: one tool row (filter pills, then search, project and the list/board switch), the grouped list, and the board */
.task-tools{display:flex;justify-content:space-between;gap:10px 16px;align-items:center;flex-wrap:wrap;margin-bottom:var(--s4)}
.filter-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:100%}.filter-tabs::-webkit-scrollbar{display:none}
.filter-tabs button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:600;color:var(--muted);white-space:nowrap}
.filter-tabs button:hover{background:var(--surface-2);color:var(--ink)}.filter-tabs button[aria-current="true"]{background:var(--ink);color:var(--bg)}
.filter-tabs .number{margin:0;height:18px;min-width:18px;padding:0 5px;background:var(--warn-soft);color:var(--warn)}.filter-tabs button[aria-current="true"] .number{background:var(--warn);color:var(--warn-soft)}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.toolbar>.row{gap:8px;flex-wrap:nowrap}
.search-field{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid transparent;border-radius:8px;padding:0 10px;width:220px;min-height:var(--control)}
.search-field svg{width:15px;height:15px;color:var(--muted)}.search-field input{padding:0;border:0;border-radius:0;font-size:var(--text-sm);outline:0;background:transparent;min-width:0;min-height:34px}
.search-field:focus-within{outline:3px solid var(--accent);outline-offset:1px}
.filter-select{font:var(--text-sm) var(--font);font-weight:500;min-height:var(--control);max-width:200px;padding:0 10px;border-radius:8px;border:1px solid transparent;background:var(--surface-2);color:var(--ink);cursor:pointer}
.segmented{display:inline-flex;gap:2px;background:var(--surface-2);padding:2px;border-radius:8px}
.segmented button{min-height:32px;min-width:36px;padding:0 8px;border-radius:6px;font-size:var(--text-sm);font-weight:600;color:var(--muted);display:flex;gap:6px;align-items:center;justify-content:center}.segmented button svg{width:16px;height:16px}.segmented button.active{background:var(--raised);color:var(--ink);box-shadow:0 1px 2px #0000001f}
.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}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;margin-bottom:var(--s6)}
.board-column{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:8px;min-height:290px;min-width:0}
.board-title{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm);font-weight:600;margin:4px 6px 10px;min-height:22px}
.board-task{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}.board-task:hover{border-color:var(--accent)}
.board-task .task-chip{width:28px;height:28px;border-radius:7px;grid-row:1/3}.board-task .task-chip svg{width:16px;height:16px}
.board-task h3{font-size:var(--text-md);font-weight:600;line-height:1.35;overflow-wrap:anywhere}.board-task .task-sub{margin:0}
.board-task .merge-progress{grid-column:2;display:flex;align-items:center;gap:8px;margin-top:6px}.board-task .progress-lines{width:60px;margin:0}
.board-note{font-size:var(--text-sm);color:var(--muted);padding:10px 6px}

/* task page: head, delivery, tabs, overview */
.task-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:24px;flex-wrap:wrap}
.task-head h1{font-size:27px;margin:8px 0 10px;overflow-wrap:anywhere}.task-head .row{font-size:var(--text-sm);color:var(--muted);gap:10px}.task-head .badges .status{margin:0}
.task-actions{display:flex;gap:8px;align-items:center;padding-top:23px}.task-actions .status{margin:0}
.back{font-size:var(--text-sm);font-weight:600;color:var(--accent-text)}.back:hover{text-decoration:underline}
.stages{display:flex;align-items:center;list-style:none;margin:0 0 26px;padding:16px 22px;background:var(--surface);border:1px solid var(--line);border-radius:10px;gap:0}
.stages li{flex:1;min-width:0;display:flex;align-items:center;gap:9px;font-size:var(--text-sm);color:var(--muted)}
.stages li:after{content:"";height:1px;flex:1;background:var(--line);margin:0 18px 0 10px}.stages li:last-child:after{display:none}
.dot-step{width:22px;height:22px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:var(--text-xs);background:var(--bg);flex-shrink:0;color:var(--ink)}
.stages li.done,.wizard-steps li.done{color:var(--accent-text)}.stages li.done .dot-step,.wizard-steps li.done .dot-step{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.stages li.current,.wizard-steps li.current{color:var(--ink);font-weight:650}.stages li.current .dot-step,.wizard-steps li.current .dot-step{background:var(--violet);color:#fff;border-color:var(--violet)}
.tabs{display:flex;gap:23px;margin:0 0 24px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a,.tabs button{display:inline-flex;align-items:center;padding:0 0 13px;font-size:var(--text-md);font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;min-height:44px;align-items:flex-end}
.tabs a:hover,.tabs button:hover{color:var(--ink)}.tabs a[aria-current="page"],.tabs button[aria-current="true"]{color:var(--accent-text);border-bottom-color:var(--accent);font-weight:600}
.tab-number{font-size:var(--text-xs);background:var(--bg);border-radius:5px;padding:1px 6px;margin-left:5px;color:var(--muted)}
.task-overview{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start}.task-overview>div,.task-overview>aside{min-width:0}
.pad{padding:23px}.pad h2{margin-bottom:14px}
.body-copy{font-size:var(--text-md);color:var(--ink);line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.body-copy+h2{margin-top:22px}
.checklist{list-style:none;padding:0;margin:19px 0 0}.checklist li{font-size:var(--text-md);display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.checklist svg{width:16px;height:16px;margin-top:4px;color:var(--ok)}.checklist .unfinished svg{color:var(--muted)}
.info-pair{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-sm);margin:17px 0}.info-pair span:first-child{color:var(--muted)}.info-pair span:last-child{text-align:right;overflow-wrap:anywhere}
.task-next{border-left:3px solid var(--violet-edge)}.task-next h3{font-size:var(--text-md);margin-bottom:8px}.task-next p{font-size:var(--text-sm);color:var(--muted);margin-bottom:16px}
.task-next.panel-attention{border-left-color:var(--warn)}
.session-item p{font-size:var(--text-md);font-weight:550}.session-item p svg{width:16px;height:16px;vertical-align:-2px}.session-item small{color:var(--muted);font-size:var(--text-sm);display:block;margin-top:5px}
.session-item .row-text{flex:1;min-width:0}
.mr-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px;margin-bottom:19px}.mr-card{padding:21px;margin:0}.mr-card h3{font-size:var(--text-md);line-height:1.5;margin:15px 0;overflow-wrap:anywhere}
.mr-card .between{display:flex;justify-content:space-between;align-items:center;gap:10px}.mr-card .between .status{margin:0}.mr-card .tiny{font-size:var(--text-sm);color:var(--muted);display:flex;gap:8px;align-items:center;overflow-wrap:anywhere}.mr-card .tiny svg{width:14px;height:14px}
.branch-line{font:var(--text-xs) var(--mono);background:var(--bg);padding:12px;border-radius:6px;overflow-wrap:anywhere;margin:18px 0}
.task-activity{max-width:800px}.task-activity .event{padding-top:24px}.task-activity .event:not(:last-child):after{top:43px;bottom:-18px}.task-activity .event p{font-size:var(--text-md)}.task-activity .event small{font-size:var(--text-sm)}
.workspace-main>.task-recovery{flex:none;margin:0;border-radius:0;border-width:0 0 1px 3px;box-shadow:none}.tests-body{padding:0 22px 20px}.tests-result{margin:0 0 var(--s3);font-size:var(--text-sm);color:var(--muted);overflow-wrap:anywhere}.tests-result strong{color:var(--ink)}.tests-result .status{margin:0 var(--s2) 0 0}
#taskTestsCommand{font-family:var(--mono);overflow-wrap:anywhere}.tests-ask{margin:0 0 var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:8px}.tests-ask p{margin:0 0 var(--s2);font-size:var(--text-sm)}.tests-ask code{display:block;margin-bottom:var(--s3);font-family:var(--mono);overflow-wrap:anywhere;white-space:pre-wrap}.tests-ask .row{gap:var(--s3);flex-wrap:wrap}.tests-output{height:auto;max-height:22em;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}.tests-output:empty::before{content:"\2026"}
.task-recovery{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;justify-content:space-between;border-left:3px solid var(--warn);margin:0 0 var(--s3);padding:var(--s3) var(--s4)}.task-recovery p{flex:1 1 220px;min-width:0;margin:0;font-size:var(--text-sm);overflow-wrap:anywhere}
.note{font-size:var(--text-sm);color:var(--muted);margin-top:7px}

/* task page: the workspace (sessions on the left, the real terminal on the right) */
.workspace-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.workspace-bar .where{display:flex;gap:8px;align-items:center;font-size:var(--text-sm);color:var(--muted);overflow-wrap:anywhere}.workspace-bar svg{width:15px;height:15px}
.workspace{display:grid;grid-template-columns:190px minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;height:max(420px,calc(100vh - 470px));align-items:stretch}
.workspace.rail-hidden{grid-template-columns:minmax(0,1fr)}.workspace.rail-hidden .workspace-rail{display:none}
.workspace-rail{background:var(--surface);padding:18px 12px;min-width:0;overflow:auto}.workspace-rail h2{font-size:var(--text-sm);margin:0 8px 12px}
.rail-list{list-style:none;margin:0;padding:0}.rail-list>li{margin-bottom:7px}
.rail-item{display:grid;gap:4px;justify-items:start;width:100%;text-align:left;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:var(--text-sm);line-height:1.35}.rail-item:hover{background:var(--bg)}
.rail-item[aria-current="true"]{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-soft)}.rail-item small{font-size:var(--text-xs);color:var(--muted)}.rail-item .status{margin:0}
.rail-new{margin-top:var(--s1);width:100%;justify-content:flex-start;white-space:nowrap;font-weight:500}
.workspace-main{min-width:0;min-height:0;background:var(--term-bg);display:flex;flex-direction:column}.workspace-main>*{flex:1;min-height:0}.workspace-main>#taskWorkspaceSlot{display:flex;flex-direction:column}.workspace-main .terminal{margin-bottom:0;flex:1;min-height:0}.workspace-main .terminal-card{border-radius:0}
.empty-workspace{padding:var(--s8) var(--s6);text-align:center;background:var(--term-bg);color:var(--term-ink);border:0;border-radius:0;box-shadow:none;margin:0}.empty-workspace p{margin-bottom:var(--s4);color:var(--term-muted)}
.workspace #terminal{height:auto}.workspace .code-view{height:auto;flex:1}
.workspace-foot{margin-top:12px;font-size:var(--text-sm);color:var(--muted);display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.workspace-foot .dot{color:var(--ok)}

/* first run */
.app.focus{display:block}.app.focus .sidebar,.app.focus .topbar{display:none}.app.focus .main{grid-column:1}
.welcome{max-width:720px;margin:0 auto;padding:var(--s3) 0 var(--s10)}.welcome .brand{color:var(--ink);padding:0 0 var(--s6)}.welcome h1{margin-bottom:var(--s2)}.welcome-lede{color:var(--muted);margin-bottom:var(--s6)}
.wizard-steps{display:flex;list-style:none;margin:0 0 var(--s6);padding:0;gap:var(--s3);flex-wrap:wrap}
.wizard-steps li{flex:1;min-width:180px;display:flex;align-items:center;gap:var(--s2);font-size:var(--text-sm);color:var(--muted);padding:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.wizard-steps li.current{border-color:var(--accent)}
.welcome-skip{text-align:center}

/* terminal: dark in both themes */
.terminal{margin-bottom:var(--s6);display:flex;flex-direction:column}
.terminal-card{background:var(--term-bg);color:var(--term-ink);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}
.terminal-top{padding:12px 20px;border-bottom:1px solid var(--term-line);color:var(--term-muted);font:var(--text-xs) var(--mono);display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex:none}
.terminal-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.terminal-path-box{flex:0 1 60%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl}.terminal-path-box .terminal-path{direction:ltr;unicode-bidi:embed;white-space:nowrap}
.terminal-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}.terminal-toolbar.in-bar{display:contents}
.terminal-tools{display:flex;gap:var(--s2);flex-wrap:wrap;margin-left:auto}
.workspace-bar .where{flex:1 1 14em;min-width:0}.workspace-bar .where>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-bar .session-tabs{margin-left:var(--s2)}.workspace-bar .terminal-tools{flex:0 1 auto;max-width:100%}.workspace-bar .actions{max-width:100%}.terminal-toolbar.hidden+.actions{margin-left:auto}
.terminal-hint{padding:var(--s3) var(--s5);border-top:1px solid var(--term-line);color:var(--term-muted);font-size:var(--text-sm);line-height:1.6}
.copy-notice{padding:var(--s2) var(--s5);border-top:1px solid var(--term-line);font-size:var(--text-sm);color:#9ad7bb;background:#14261f;overflow-wrap:anywhere}.copy-notice.blocked{color:#f0c987;background:#2b2418}
.terminal-full{position:fixed;inset:0;z-index:50;margin:0;padding:var(--s3);background:var(--bg);display:flex;flex-direction:column}.terminal-full .terminal-card{border-radius:var(--radius-sm)}.terminal-full #terminal{height:auto;flex:1;min-height:0}
#terminal{height:max(380px,calc(100vh - 360px));overflow:hidden}#terminal .xterm{padding:20px 28px;background:var(--term-bg)}#terminal .xterm-viewport{background-color:transparent!important}   /* the padding is on the element the fit addon subtracts (not on #terminal, whose width it takes whole) */.terminal-body{flex:1;min-height:0;overflow:hidden}.terminal-main{display:flex;flex-direction:column;min-height:0}.terminal-card>.terminal-hint,.terminal-card>.copy-notice{flex:none}.terminal-main>#terminal{flex:none}.workspace .terminal-main>#terminal,.terminal-full .terminal-main>#terminal{flex:1;min-height:0}

/* the New task form: a drawer from the right, as in the reference */
.drawer-scrim{position:fixed;inset:0;background:var(--overlay);z-index:45}
.drawer-form{position:fixed;top:0;right:0;bottom:0;width:510px;max-width:100%;background:var(--surface);display:flex;flex-direction:column;box-shadow:-15px 0 50px #0001;z-index:50}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 27px;border-bottom:1px solid var(--line)}
.drawer-body{padding:26px 28px;overflow:auto;flex:1}.drawer-body>p{font-size:var(--text-sm);margin-bottom:var(--s4)}
.drawer-wide{width:min(1180px,100%);z-index:51}
.mrc-notes{padding:0 var(--s5)}.mrc-notes p{font-size:var(--text-sm);margin-top:var(--s3);overflow-wrap:anywhere}.mrc-notes .warn{padding:var(--s2) var(--s3);border-radius:8px;background:var(--warn-soft);color:var(--warn)}
.mrc-split{display:flex;flex:1;min-height:0;margin-top:var(--s3);border-top:1px solid var(--line)}
.mrc-files{list-style:none;margin:0;padding:var(--s2);width:300px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--line)}
.mrc-files button{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);width:100%;text-align:left;padding:var(--s1) var(--s2);border-radius:6px;font:var(--text-sm) var(--mono);align-items:center}.mrc-files button:hover,.mrc-files button.active{background:var(--accent-soft)}
.mrc-files .path{overflow-wrap:anywhere;flex:1 1 100%;min-width:0}.mrc-files .count{color:var(--muted);font-size:var(--text-xs)}
.mrc-files .change{background:var(--surface-2);color:var(--ink)}.mrc-files .change.added{background:var(--ok-soft);color:var(--ok)}.mrc-files .change.deleted{background:var(--bad-soft);color:var(--bad)}.mrc-files .change.modified,.mrc-files .change.renamed{background:var(--warn-soft);color:var(--warn)}
.mrc-pane{flex:1;min-width:0;display:flex;flex-direction:column}.mrc-body .code-line .ln{width:3.5em}.mrc-body .code-line .sign{flex-shrink:0;width:1.5em;text-align:center}.mrc-body .code-line .tx{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.mrc-body .mrc-message{padding:var(--s4);white-space:normal;font-family:var(--font)}
.drawer-foot{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:19px 27px;border-top:1px solid var(--line);flex-wrap:wrap}.drawer-foot .error{flex:1;min-width:0}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:7px;color:var(--muted)}.icon-btn:hover{background:var(--bg);color:var(--ink)}.icon-btn svg{width:19px;height:19px}
svg[data-icon]{width:19px;height:19px;vertical-align:middle;flex-shrink:0}
.btn svg{width:16px;height:16px}.terminal-path{color:var(--term-muted);font:var(--text-xs) var(--mono)}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-story{padding:var(--s12) 64px;background:#222226;color:#fff;display:flex;flex-direction:column}.login-story .brand{padding:0;color:#fff}
.login-headline{font-size:42px;line-height:1.15;letter-spacing:-1.2px;margin-top:100px;max-width:450px}.login-story>p{color:#c9c9d1;font-size:var(--text-md);margin-top:var(--s6);max-width:400px}
.login-form{background:var(--surface);display:flex;align-items:center;justify-content:center;padding:var(--s10)}.login-inner{max-width:360px;width:100%}
.login-inner h1{font-size:var(--text-xl)}.login-inner p{color:var(--muted);margin:var(--s4) 0 var(--s5)}.login-inner .btn{width:100%;min-height:48px}.login-inner .row{margin-top:var(--s3)}

@media (min-width:1600px){.overview-grid{grid-template-columns:minmax(0,1fr) 315px}}
@media (max-width:1250px){
  .content{padding:12px 24px 32px}.topbar{padding:0 24px}.overview-grid{grid-template-columns:minmax(0,1fr) 260px;gap:16px}
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .app{grid-template-columns:190px minmax(0,1fr)}.sidebar{width:190px;padding:18px 10px 12px}
  .overview-grid{grid-template-columns:1fr}.overview-side{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.overview-side>*{margin:0}.overview-side .waiting-box{margin:0}
  .stages{padding:16px 14px}.stages li:after{margin:0 8px 0 6px}.task-overview{grid-template-columns:1fr 250px}.task-head{flex-direction:column;gap:5px}.task-actions{padding-top:5px}
  .workspace{grid-template-columns:155px minmax(0,1fr)}
}
/* a phone or a narrow window: the end of a row (the button, the time) goes under the title; every control is at least 44 px tall */
@media (max-width:900px){
  .content{padding:8px 16px 32px}.topbar{padding:0 16px;height:56px}.nav a{min-height:44px}.btn,.task-end .btn,.action-row>.btn{min-height:44px}.btn.small{min-height:44px}
  .search-field,.filter-select,.segmented button,.filter-tabs button{min-height:44px}.search-field input{min-height:42px}.segmented button{min-width:44px}
  .task-row,.action-row{grid-template-columns:32px minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px}
  .task-end:has(.btn),.action-row>.btn{grid-column:2/-1;justify-self:stretch}.task-end:has(.btn){justify-content:space-between;margin-top:4px}
  .action-row>.btn{justify-self:start;margin-top:4px}
  .task-chevron,.row-tool{display:none}   /* no hover on a phone: the row itself opens the task */
  .task-tools{flex-direction:column;align-items:stretch}.filter-tabs{order:0}.toolbar{order:1;flex-wrap:wrap}
  .toolbar>.row{display:contents}.toolbar .search-field{flex:1 1 100%;width:auto;min-width:0}.toolbar .filter-select{flex:1;min-width:0;max-width:none}.toolbar .segmented{margin-left:auto}
}
@media (max-width:480px){.filter-tabs{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent);padding-right:24px}}

/* merge requests: the list and the detail drawer */
.mr-row{grid-template-columns:minmax(210px,1.6fr) minmax(130px,.9fr) minmax(170px,1.2fr)}
.link-button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;overflow-wrap:anywhere}.link-button:hover{text-decoration:underline}
.mr-row .task-sub svg{flex:none}.mr-next{display:flex;flex-direction:column;gap:3px;min-width:0}.mr-next small{font-size:var(--text-sm);color:var(--muted)}.mr-next .mr-me{font-weight:700}
.facts{display:grid;gap:0;margin:var(--s4) 0}.fact{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:var(--text-sm)}.fact dt{color:var(--muted)}.fact dd{margin:0;overflow-wrap:anywhere}
.mr-next-box h3{font-size:var(--text-md)}.mr-next-box p{font-size:var(--text-sm);margin-top:6px}
/* small screens: the sidebar is a drawer */
@media (max-width:760px){
  .app{display:block}
  .sidebar{width:250px;transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility .2s;box-shadow:var(--shadow-pop);border-right:0}.sidebar.open{transform:none;visibility:visible}
  .backdrop.open{display:block;position:fixed;inset:0;background:var(--overlay);z-index:25}
  .menu{display:inline-flex}.topbar{gap:10px;height:48px;padding:0 10px}.topbar>.avatar,.breadcrumbs{display:none}   /* the h1 under it is the title */
  .page-head{align-items:flex-start;gap:12px;margin-bottom:var(--s4)}
  .overview-side{display:block}.overview-side>*,.overview-side .waiting-box{margin-top:16px}.overview-side>:first-child{margin-top:0}
  .tests-body{padding:0 var(--s4) var(--s4)}
  .tabs{gap:20px}.board{grid-template-columns:1fr}.board-column{min-height:0}
  .task-row.mr-row{grid-template-columns:minmax(0,1fr);gap:10px}.mr-row .task-status{grid-column:auto;grid-row:auto;text-align:left;max-width:none}.mr-row .task-status .badges{justify-content:flex-start}.mr-row .task-status small{max-width:none;margin-left:0}.fact{grid-template-columns:1fr;gap:2px}
  .mr-cards{grid-template-columns:1fr}.task-overview{grid-template-columns:1fr}.task-head h1{font-size:24px}
  .stages{padding:14px 6px;gap:4px}.stages li{flex:1 1 auto;flex-direction:column;gap:7px;font-size:var(--text-xs);text-align:center;overflow-wrap:normal;word-break:normal}.stages li:after{display:none}
  .workspace{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto}.workspace-rail{padding:9px;overflow:visible}.workspace-rail h2{display:none}.rail-list{display:flex;align-items:center;gap:5px;overflow:auto}.rail-list>li{margin:0}.rail-item{white-space:nowrap;min-width:130px;padding:8px 10px}
  .workspace-main{min-height:max(420px,64vh)}.workspace-main>#taskWorkspaceSlot{min-height:max(420px,64vh)}#terminal .xterm{padding:16px}.workspace .terminal-main>#terminal{height:max(380px,62vh);flex:none}.workspace-foot{font-size:var(--text-xs)}
  .session-item,.new-session,.skeleton-row{padding:var(--s3) var(--s4)}
  .form{padding:var(--s4)}.body,.guide{padding-left:var(--s4);padding-right:var(--s4)}.flow{padding:var(--s1) var(--s4) var(--s5)}
  .head-with-action{flex-direction:row}
  .login{grid-template-columns:1fr}.login-story{padding:var(--s8)}.login-headline{margin-top:var(--s10);font-size:32px}.login-form{padding:var(--s10) var(--s8)}
  .changes-list{grid-template-columns:1fr}
  .code-split{flex-direction:column}.code-tree{width:auto;max-height:160px;border-right:0;border-bottom:1px solid var(--line)}
  .cards{padding:0 var(--s4) var(--s4)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}}

.task-more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s4)}.task-more .note,.task-more .error{margin:0}.task-more .error:empty{display:none}
.decision-item{padding:18px 22px;border-top:1px solid var(--line)}.decision-item:first-child{border-top:0}.decision-item h3{font-size:var(--text-md);margin-bottom:6px;overflow-wrap:anywhere}
.decision-item .note{margin:0 0 var(--s3)}.decision-item .field{margin-bottom:var(--s3)}.decision-item .row{gap:var(--s3);flex-wrap:wrap}.decision-item .error:empty{display:none}
.decision-answered{color:var(--muted);font-size:var(--text-sm);overflow-wrap:anywhere}
.task-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}.task-next .note:empty{display:none}

/* ---- Queue + console. The macOS language without the window: hairlines, segmented controls, quiet greys. The terminal card is dark in both themes. ---- */
.terminal-card.mac{--c-bar:#2b2b2e;--c-tabs:#232326;--c-body:#1a1a1c;--c-line:#3a3a3d;--c-ink:#ececf0;--c-muted:#a8a8b0;--c-blue:#0a84ff;--c-orange:#ff9f0a;--c-green:#30d158;--c-lilac:#c9bdff;
  background:var(--c-body);color:var(--c-ink);border:0;border-radius:0;box-shadow:none;overflow:hidden;display:flex;flex-direction:column;min-height:0;flex:1}
.mac-title{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;background:var(--c-bar);border-bottom:1px solid var(--c-line);flex:none}
.mac-name{flex:1;min-width:0}
.mac-name b{display:block;font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mac-name small{display:block;font-size:14px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mac-name .terminal-state{color:var(--c-orange);font-weight:600}
.mac-tools{display:flex;align-items:center;gap:4px;flex:none}
.mac-tools .tb{height:36px;min-height:0;padding:0 10px;border:0;background:transparent;border-radius:8px;display:inline-flex;align-items:center;gap:7px;color:var(--c-muted);font-size:14px;position:relative}
.mac-tools .tb:hover:not([disabled]){background:#ffffff14;color:var(--c-ink)}
.mac-tools .tb[aria-expanded="true"]{background:#ffffff1f;color:var(--c-ink)}
.mac-tools .tb[disabled]{opacity:.45}
.mac-tools .tb svg,.mac-tools .seg button svg{width:18px;height:18px}
.mac-tools .tb:focus-visible,.mac-tools .seg button:focus-visible,.mac-tab:focus-visible,.mac-tab-new:focus-visible{outline:2px solid var(--c-blue);outline-offset:1px}
.mac-tools .tb .n{min-width:18px;height:18px;border-radius:9px;background:var(--c-blue);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.mac-tools .seg{display:flex;background:#ffffff12;border-radius:8px;padding:2px;margin-right:6px}
.mac-tools .seg button{width:38px;height:32px;min-height:0;padding:0;border:0;background:transparent;border-radius:6px;color:var(--c-muted);display:grid;place-items:center}
.mac-tools .seg button[aria-selected="true"]{background:#ffffff26;color:var(--c-ink)}
.mac-more{position:relative}
.mac-menu{position:absolute;right:0;top:40px;min-width:190px;background:var(--c-bar);border:1px solid var(--c-line);border-radius:8px;padding:4px;box-shadow:0 10px 30px #0006;z-index:9}
.mac-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--c-ink);padding:10px 12px;border-radius:6px;font-size:14px;min-height:40px}
.mac-menu button:hover,.mac-menu button:focus-visible{background:var(--c-blue);color:#fff}
.mac-tabs{display:flex;height:40px;background:var(--c-tabs);border-bottom:1px solid var(--c-line);overflow-x:auto;flex:none;scrollbar-width:none}
.mac-tabs:empty{display:none}
.mac-tab{flex:0 1 220px;min-width:130px;display:flex;align-items:center;gap:8px;padding:0 14px;border:0;border-right:1px solid var(--c-line);background:transparent;color:var(--c-muted);font-size:14px;text-align:left;min-height:0;border-radius:0}
.mac-tab[aria-selected="true"]{background:var(--c-body);color:var(--c-ink)}
.mac-tab:hover:not([aria-selected="true"]){background:#ffffff0a}
.mac-tab-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mac-tab-new{width:44px;flex:none;border:0;background:transparent;color:var(--c-muted);display:grid;place-items:center;min-height:0;padding:0;border-radius:0}
.mac-tab-new:hover{background:#ffffff0d;color:var(--c-ink)}
.mac-tab-new svg{width:16px;height:16px}
.mac-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--c-muted)}
.mac-dot.needs{background:var(--c-orange);box-shadow:0 0 0 3px #ff9f0a33}
.mac-dot.working{background:none;border:2px solid #8b7ae666;border-top-color:var(--c-lilac);animation:mac-spin .9s linear infinite}
.mac-dot.plain{border-radius:2px}
@keyframes mac-spin{to{transform:rotate(360deg)}}
.mac .terminal-body{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden}
.mac .terminal-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.mac .changes-panel{width:300px;flex:none;border:0;border-left:1px solid var(--c-line);border-radius:0;background:var(--c-tabs);color:var(--c-ink);max-height:none;overflow:auto;margin:0;font-size:14px}
.mac .changes-panel .muted{color:var(--c-muted)}
.mac-status{min-height:34px;flex:none;display:flex;align-items:center;gap:18px;padding:0 16px;background:var(--c-bar);border-top:1px solid var(--c-line);font-size:14px;color:var(--c-muted);flex-wrap:wrap}
.mac-status #macConn{display:flex;align-items:center;gap:7px}
.mac-status .dot{width:8px;height:8px;border-radius:50%;background:var(--c-green);display:inline-block}
.mac-status .warn .dot{background:var(--c-orange)}
.mac-status .pin{display:flex;align-items:center;gap:7px}
.mac-status .pin svg{width:15px;height:15px}
.mac-status .hint{margin-left:auto}
.mac .copy-notice{margin:0;border-radius:0}
.terminal-full .terminal-card.mac{height:100%}
.terminal-full .mac-tools .lbl{display:inline}
/* the queue: what needs you first, always next to the console */
.work-queue{background:var(--surface);border-right:1px solid var(--line);overflow:auto;display:flex;flex-direction:column;min-height:0;min-width:0}
.queue-head{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line);flex:none;position:sticky;top:0;background:var(--surface);z-index:1}
.queue-next{flex:1;min-height:44px;border-radius:8px;border:1px solid var(--warn);background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;text-align:left}
.queue-next[disabled]{border-color:var(--line);background:transparent;color:var(--muted);font-weight:500}
.queue-next kbd{font:600 12px var(--mono);border:1px solid currentColor;border-radius:5px;padding:1px 6px;opacity:.8}
.work-queue .tb{width:44px;height:44px;border:1px solid var(--line);background:transparent;border-radius:8px;color:var(--muted);display:grid;place-items:center;padding:0}
.work-queue .tb:hover{background:var(--accent-soft);color:var(--accent-text)}
.work-queue .tb svg{width:18px;height:18px}
.queue-list{flex:1}
.queue-group{margin:16px 14px 6px;font-size:12px;font-weight:700;color:var(--muted)}
.queue-group.needs{color:var(--warn)}
.queue-row{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;width:100%;text-align:left;padding:10px 14px 10px 11px;min-height:56px;border:0;border-left:3px solid transparent;background:transparent;color:var(--ink);align-items:start;border-radius:0}
.queue-row:hover{background:var(--accent-soft)}
.queue-row[aria-current="true"]{background:var(--accent-soft);border-left-color:var(--accent)}
.queue-row .q-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--border)}
.queue-row .q-dot.needs{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.queue-row .q-dot.working{background:none;border:2px solid var(--accent);border-top-color:transparent;animation:mac-spin .9s linear infinite}
.queue-row .q-title{display:block;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.queue-row .q-sub{display:block;font-size:14px;color:var(--muted);line-height:1.35;margin-top:2px}
/* the page around the console: one line of header, the console takes the rest of the screen */
#taskView.mode-workspace{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);align-items:center;gap:6px 14px;height:calc(100dvh - 118px);min-height:520px}
#taskView.mode-workspace>.back{margin:0;grid-column:1;grid-row:1}
#taskView.mode-workspace>.task-head{grid-column:2;grid-row:1;margin:0;min-width:0}
#taskView.mode-workspace .task-head h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
#taskView.mode-workspace .task-head .row{display:none}
#taskView.mode-workspace>.stages{display:none}
#taskView.mode-workspace>#taskTabs{grid-column:3;grid-row:1;margin:0;border:0;overflow:visible}
#taskView.mode-workspace>#taskWorkspace{grid-column:1/-1;grid-row:2;min-height:0;height:100%}
.workspace{display:grid;grid-template-columns:288px minmax(0,1fr);height:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.workspace-main{height:100%;min-width:0;min-height:0;background:var(--c-body,#1a1a1c);display:flex;flex-direction:column}
.workspace-main>#taskWorkspaceSlot{display:flex;flex-direction:column;flex:1;min-height:0}
.workspace-main>#taskWorkspaceSlot>.terminal{flex:1;min-height:0;margin:0}
.workspace .terminal-main>#terminal{flex:1;min-height:0;height:auto}
.terminal-full .terminal-main>#terminal{flex:1;min-height:0;height:auto}
.mac-tools .lbl{display:inline}
/* the sheet: a centred dialog, one verb */
@media (max-width:900px){
  .work-queue{display:none}
  .workspace{grid-template-columns:minmax(0,1fr);border-radius:0;border-left:0;border-right:0}
  #taskView.mode-workspace{height:calc(100dvh - 96px);grid-template-columns:auto minmax(0,1fr);}
  #taskView.mode-workspace>#taskTabs{grid-column:1/-1;grid-row:2}
  #taskView.mode-workspace>#taskWorkspace{grid-row:3}
  #taskView.mode-workspace{grid-template-rows:auto auto minmax(0,1fr)}
  .mac-title{flex-wrap:wrap;padding:8px 12px;gap:4px}
  .mac-name{flex:1 1 100%}
  .mac-tools{flex:1 1 100%;justify-content:space-between}
  #taskView.mode-workspace>#taskTabs{overflow-x:auto}
  .mac-name small{display:none}
  .mac-tools .lbl{display:none}
  .mac-tools .tb{width:44px;height:44px;padding:0;justify-content:center}
  .mac-tools .seg button{width:44px;height:36px}
  .mac-tabs{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .mac .changes-panel{position:absolute;left:0;right:0;bottom:34px;top:auto;width:auto;height:45%;border-left:0;border-top:1px solid var(--c-line);box-shadow:0 -10px 30px #0006;z-index:5}
  .terminal-card.mac{position:relative}
  .mac-status .hint{display:none}
}
@media (prefers-reduced-motion:reduce){.mac-dot.working,.queue-row .q-dot.working{animation:none}}

[role="tablist"]{scrollbar-width:none}[role="tablist"]::-webkit-scrollbar{display:none}

@media (max-width:760px){.mrc-split{flex-direction:column}.mrc-files{width:auto;max-height:34%;border-right:0;border-bottom:1px solid var(--line)}.mrc-pane{min-height:50%}.mrc-notes{padding:0 var(--s4)}}
.mac-status .latency{font-variant-numeric:tabular-nums}.mac-status .latency.slow{color:var(--c-orange)}
.btn.soft{border-color:transparent;background:var(--accent-soft);color:var(--accent-text)}.btn.soft:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn.quiet.danger{border-color:transparent;color:var(--bad)}.btn.quiet.danger:hover{background:var(--bad-soft);color:var(--bad)}
.mcp-rows{list-style:none;margin:0;padding:0}
.mcp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2) var(--s4);padding:14px 16px;border-top:1px solid var(--line)}.mcp-row:hover{background:var(--surface-2)}
.mcp-row:first-child{border-top:1px solid var(--line)}
.mcp-info{min-width:0;display:grid;gap:var(--s1)}.mcp-info p{margin:0}
.mcp-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2)}.mcp-head h3{margin:0;font-size:var(--text-md);overflow-wrap:anywhere}.mcp-head .status{margin:0}
.mcp-about{font-size:var(--text-sm);color:var(--muted);overflow-wrap:anywhere}
.mcp-detail{font:var(--text-xs)/1.45 var(--mono);color:var(--muted);overflow-wrap:anywhere;word-break:break-word}
.mcp-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2)}.mcp-actions .btn{min-width:84px}
.mcp-area{grid-column:1/-1;display:grid;gap:var(--s3);padding-top:var(--s2)}.mcp-area .field{margin:0}.mcp-area input{width:100%;max-width:420px;box-sizing:border-box}.mcp-area small,.mcp-area .field-hint{overflow-wrap:anywhere}.mcp-area-actions{gap:var(--s2)}
.mcp-rows>.empty{border-top:1px solid var(--line)}.mcp-rows>.skeleton-row{border-top:1px solid var(--line)}
.mcp-dialog{max-width:520px;max-height:calc(100dvh - 32px);overflow:auto}.mcp-dialog h2{margin:0}.mcp-dialog .dialog-actions{margin-top:var(--s5)}
.mcp-own{display:grid;gap:var(--s4);max-width:100%}.mcp-own p{margin:0}.mcp-own .field{margin:0}.mcp-own input:not([type=radio]),.mcp-own textarea{width:100%;max-width:100%;box-sizing:border-box}.mcp-own-group{display:grid;gap:var(--s4)}.mcp-own-env{display:grid;gap:var(--s2);margin-bottom:var(--s2)}.mcp-own-env-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2)}.mcp-own small,.mcp-own .field-hint{overflow-wrap:anywhere}
.segmented{display:flex;gap:2px;padding:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}.segmented label{flex:1;margin:0;position:relative;min-width:0}
.segmented input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}.segmented span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:32px;padding:0 var(--s2);border-radius:6px;font-size:var(--text-sm);font-weight:600;color:var(--muted)}
.segmented input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}.segmented input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:640px){.mcp-row{grid-template-columns:minmax(0,1fr)}.mcp-actions{justify-content:stretch}.mcp-actions .btn{flex:1}.segmented{flex-direction:column}.mcp-own-env-row{grid-template-columns:minmax(0,1fr)}}
.plugin-rows{list-style:none;margin:0;padding:0}
.plugin-group{border-top:1px solid var(--line)}.plugin-group-body{border-top:1px solid var(--line)}
.plugin-group-head{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:var(--control);padding:12px 16px;background:transparent;border:0;text-align:left;font:inherit;color:var(--ink);cursor:pointer;min-width:0}
.plugin-group-head:hover{background:var(--surface-2)}.plugin-group-head:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.plugin-group-head svg{width:16px;height:16px;flex:none;color:var(--muted);transition:transform .15s}.plugin-group-head[aria-expanded=true] svg{transform:rotate(90deg)}
.plugin-group-name{font-weight:600;overflow-wrap:anywhere;min-width:0}.plugin-group-count{margin-left:auto;font-size:var(--text-sm);color:var(--muted);white-space:nowrap}
.plugin-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2) var(--s4);padding:14px 16px;border-top:1px solid var(--line)}.plugin-row:hover{background:var(--surface-2)}
.plugin-info{min-width:0;display:grid;gap:var(--s1)}.plugin-info p{margin:0}
.plugin-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2)}.plugin-head h3{margin:0;font-size:var(--text-md);overflow-wrap:anywhere}.plugin-head .status{margin:0}
.plugin-about{font-size:var(--text-sm);color:var(--muted);overflow-wrap:anywhere}
.plugin-detail{font-size:var(--text-xs);color:var(--muted);overflow-wrap:anywhere}
.plugin-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2);flex-wrap:wrap}.plugin-actions .btn{min-width:84px}
.plugin-problem{grid-column:1/-1;margin:0;overflow-wrap:anywhere}
.plugin-more{padding:12px 16px;border-top:1px solid var(--line);text-align:center}
.plugin-rows .empty{border-top:1px solid var(--line)}.plugin-rows>.skeleton-row{border-top:1px solid var(--line)}
@media (max-width:640px){.plugin-row{grid-template-columns:minmax(0,1fr)}.plugin-actions{justify-content:stretch}.plugin-actions .btn{flex:1}.plugin-group-head{flex-wrap:wrap}.panel-head>.search-field{width:100%;box-sizing:border-box}.panel-head>.filter-select{width:100%;max-width:none}}

.accounts{padding:0 var(--s6) var(--s5);display:grid;gap:var(--s3)}
.account-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.account-list li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--radius)}
.account-list .account-name{flex:1 1 180px;min-width:0;display:grid;gap:2px}.account-list .account-name small{color:var(--muted);font-size:var(--text-sm);overflow-wrap:anywhere}
.account-list .account-buttons{display:flex;flex-wrap:wrap;gap:var(--s2)}
.account-note{margin:0;font-size:var(--text-sm);color:var(--muted);line-height:1.6}.account-note:empty{display:none}
.account-hint{margin:0;font-size:var(--text-sm);color:var(--muted);line-height:1.6}
.accounts>.btn{justify-self:start}
@media (max-width:760px){.accounts{padding:0 var(--s4) var(--s5)}.account-list .account-buttons{width:100%}.account-list .account-buttons .btn{flex:1}}

.service-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);padding:12px 16px;border-top:1px solid var(--line)}.service-row:first-child{border-top:0}
.service-main{flex:1 1 240px;min-width:0;display:grid;gap:2px}.service-name{font:600 var(--text-md) var(--mono);overflow-wrap:anywhere}.service-main small{color:var(--muted);font-size:var(--text-sm)}
.service-reason{margin:0;color:var(--ink);font-size:var(--text-sm);overflow-wrap:anywhere}
.service-badges{display:flex;flex-wrap:wrap;gap:var(--s2)}.service-actions{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end}
.service-group .panel-head h2{overflow-wrap:anywhere}
.service-log{flex:1 1 100%;min-width:0}.service-log-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}.service-log-head small{color:var(--muted);font-size:var(--text-sm)}
.service-log-text{height:auto;max-height:18em;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.empty .muted{margin:0 auto var(--s4);max-width:34em}
@media (max-width:640px){.service-row{padding:var(--s3) var(--s4)}.service-actions{justify-content:flex-start;width:100%}.service-actions .btn{flex:1 1 auto}}

/* which session works now (green: a dot that pulses, and always the words), the groups of the sessions, the menu of a card */
.status.working::before{width:8px;height:8px;background:var(--ok);animation:working-pulse 1.4s ease-in-out infinite}
@keyframes working-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent)}50%{box-shadow:0 0 0 4px transparent}}
.session-card.working{border-color:var(--ok);box-shadow:inset 3px 0 0 var(--ok)}
.mac-tab-state{font-size:var(--text-xs);color:var(--c-green);white-space:nowrap;flex:none}.mac-tab-state:empty{display:none}
.mac-dot.working{background:var(--c-green);border:0;animation:working-pulse 1.4s ease-in-out infinite}
.group-chips{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0 var(--s6) var(--s4)}
.group-chip{min-height:32px;padding:0 var(--s3);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:var(--text-sm);font-weight:600;overflow-wrap:anywhere;max-width:100%}
.group-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.group-heading{grid-column:1/-1;margin-top:var(--s2)}.group-heading:first-child{margin-top:0}
.group-toggle{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:36px;padding:0 var(--s2);border:0;background:transparent;color:var(--ink);font-size:var(--text-md);font-weight:600;text-align:left;border-bottom:1px solid var(--line);border-radius:0}
.group-toggle svg{width:16px;height:16px;flex:none;transform:rotate(90deg)}.group-toggle.collapsed svg{transform:none}
.group-name{overflow-wrap:anywhere;min-width:0}.group-count{margin-left:auto;font-size:var(--text-sm);color:var(--muted);font-weight:500}
.group-heading.drop .group-toggle,.session-card.drop{outline:2px dashed var(--accent);outline-offset:2px}
.session-card .card-head{position:relative}.session-card .card-head .session-title{flex:1;min-width:0}.session-card .card-head .session-title strong{overflow-wrap:anywhere}
.card-menu-btn{width:36px;height:36px;flex:none;margin:-4px -6px 0 0}
.card-menu{position:absolute;right:0;top:34px;z-index:20;min-width:190px;background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);padding:var(--s1);display:grid}
.card-menu button{min-height:36px;padding:0 var(--s3);border:0;background:transparent;color:var(--ink);text-align:left;font-size:var(--text-sm);border-radius:6px;font-weight:600}
.card-menu button:hover,.card-menu button:focus-visible{background:var(--surface-2)}.card-menu button.danger{color:var(--bad)}
.drag-handle{display:none;cursor:grab;color:var(--muted);user-select:none;align-self:flex-start}
@media (hover:hover){.drag-handle{display:inline}}
.group-options{display:grid;gap:var(--s1);margin-top:var(--s3);max-height:50vh;overflow:auto}.group-options .check{margin:0;align-items:center;min-height:36px}.group-new{flex:1;min-width:0}
.dialog p#removeAttached{color:var(--warn)}
@media (max-width:760px){.group-chips{padding:0 var(--s4) var(--s3)}.group-chip{min-height:44px}.card-menu-btn{width:44px;height:44px;margin:-8px -10px 0 0}.card-menu{top:40px}.card-menu button{min-height:44px}.group-toggle{min-height:44px}.group-options .check{min-height:44px}}
@media (prefers-reduced-motion:reduce){.status.working::before,.mac-dot.working{animation:none}}
.session-card .card-head{flex-wrap:wrap;justify-content:flex-start}.session-card .card-head .session-title{flex:1 1 10em}
.session-card .card-head .card-menu-btn{order:1}.session-card .card-head>span:not(.drag-handle){order:2;flex:0 0 100%}.session-card .card-head .status:first-child{margin-left:0}
.row-actions{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}