/* Vendored woff2 under the SIL Open Font License; texts in fonts/OFL-*.txt. */
@font-face{font-family:'Inter';font-weight:400;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;src:url('fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;src:url('fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'JBM';font-weight:400;src:url('fonts/jbmono-400.woff2') format('woff2')}
@font-face{font-family:'JBM';font-weight:500;src:url('fonts/jbmono-500.woff2') format('woff2')}
@font-face{font-family:'SS4';font-weight:400;src:url('fonts/serif-400.woff2') format('woff2')}
@font-face{font-family:'SS4';font-weight:400;font-style:italic;src:url('fonts/serif-400i.woff2') format('woff2')}
@font-face{font-family:'SS4';font-weight:600;src:url('fonts/serif-600.woff2') format('woff2')}
@font-face{font-family:'SpaceG';font-weight:300 700;src:url('fonts/spacegrotesk.woff2') format('woff2')}
/* The theme fonts: Latin subsets only, fetched by a browser when its theme asks for them. */
@font-face{font-family:'VT323';font-weight:400;font-display:swap;src:url('fonts/vt323-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url('fonts/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url('fonts/plexmono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400 600;font-display:swap;src:url('fonts/plexsans.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-weight:500;font-display:swap;src:url('fonts/plexcond-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-weight:600;font-display:swap;src:url('fonts/plexcond-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url('fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url('fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url('fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:500;font-display:swap;src:url('fonts/barlowcond-500.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url('fonts/barlowcond-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url('fonts/barlowcond-700.woff2') format('woff2')}
@font-face{font-family:'Marcellus';font-weight:400;font-display:swap;src:url('fonts/marcellus-400.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:400 800;font-display:swap;src:url('fonts/bricolage.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-weight:400;font-display:swap;src:url('fonts/spacemono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-weight:700;font-display:swap;src:url('fonts/spacemono-700.woff2') format('woff2')}
@font-face{font-family:'Shippori Mincho';font-weight:400;font-display:swap;src:url('fonts/shippori-400.woff2') format('woff2')}
@font-face{font-family:'Shippori Mincho';font-weight:600;font-display:swap;src:url('fonts/shippori-600.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-weight:400;font-display:swap;src:url('fonts/zenkaku-400.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-weight:500;font-display:swap;src:url('fonts/zenkaku-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('fonts/archivo.woff2') format('woff2')}
/* Base styles. They read only the variables a theme sets (themes/*.css), so a
   new theme is a copy of one variable block plus a few overrides. */
*{box-sizing:border-box}
.a2 [hidden]{display:none !important}

/* Scrollbars in the theme's colors: thin, a thumb in the rule color that
   brightens under the pointer, no track. */
.a2 *{scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.a2 *:hover{scrollbar-color:var(--faint) transparent}
.a2 ::-webkit-scrollbar{width:8px;height:8px}
.a2 ::-webkit-scrollbar-track{background:transparent}
.a2 ::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.a2 ::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box}
.a2 ::-webkit-scrollbar-corner{background:transparent}
html,body{margin:0;height:100%}
body{background:#000}
.a2{height:100dvh;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);overflow:hidden;
  background:var(--bg);color:var(--ink);font-family:var(--font-ui)}
.a2 button,.a2 input,.a2 select,.a2 textarea{font:inherit;color:inherit}
/* The connection banner (app.js): while it shows, .a2 gains a row above the
   tab bar for it; hidden, the grid is the two rows above. */
.a2:has(> .netbanner:not([hidden])){grid-template-rows:auto auto 1fr}
.a2 .netbanner{position:sticky;top:0;z-index:45;display:flex;gap:10px;align-items:center;padding:6px 12px;border-left:2px solid var(--accent);background:var(--accent-soft);font-family:var(--font-chrome);font-size:11.5px;color:var(--strong)}
.a2 .netbanner[hidden]{display:none}
.a2 .netbanner .lbl{color:var(--accent);flex:none}
.a2 .netbanner #netbanner-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .netbanner .btn{margin-left:auto;flex:none;padding:2px 10px;font-size:11.5px}
/* The banner says it already: on a phone the words would wrap the tab bar. */
@media (max-width:640px){.a2:has(> .netbanner:not([hidden])) #conn-text{display:none}}

/* top bar */
.a2 .tabs{display:flex;align-items:stretch;gap:2px;padding:6px 8px 0;background:var(--chrome);border-bottom:1px solid var(--rule);font-family:var(--font-chrome)}
.a2 .tab{position:relative;display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12.5px;white-space:nowrap;color:var(--muted);border-radius:var(--r) var(--r) 0 0}
.a2 .tab.on{background:var(--bg);color:var(--strong);box-shadow:inset 0 2px 0 var(--accent)}
.a2 .tabs .gap{flex:1}
.a2 .tabs{min-width:0}
.a2 .tablist{display:flex;gap:2px;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.a2 .tablist::-webkit-scrollbar{display:none}
.a2 .tab-more{flex:none;align-self:center;margin:0 4px 6px;padding:2px 8px;font:12px var(--font-chrome);color:var(--muted);background:none;border:1px solid transparent;border-radius:var(--r);cursor:pointer}
.a2 .tab-more:hover{color:var(--strong);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.a2 .tab-more[hidden]{display:none}
/* Groups in the bar (#586, tabs.js): a block per group, its tabs on a wash of
   the group's colour with a rule under them; the head folds it to one tab. */
.a2{--group-0:#d9a066;--group-1:#8a7fd0;--group-2:#5aa3a0;--group-3:#c76f8f}
.a2 .tblock{display:flex;gap:2px;flex:none}
.a2 .tblock.grp{gap:1px;padding:0 2px;margin:0 3px;border-radius:var(--r) var(--r) 0 0;background:color-mix(in srgb,var(--g) 9%,transparent);box-shadow:inset 0 -2px 0 var(--g)}
.a2 .tblock.dragging{opacity:.35}
.a2 .tab.head .hn{font-weight:600}
.a2 .tab .cnt{flex:none;font:10.5px/1 var(--font-mono);padding:3px 6px;border-radius:9px;background:color-mix(in srgb,var(--g) 30%,transparent);color:var(--strong);cursor:pointer}
.a2 .tab .cnt.alert{box-shadow:0 0 0 1.5px var(--accent);animation:a2blink 1.2s steps(2,start) infinite}
.a2 .tab.nodrop{cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.a2 .tab .cnt.alert{animation:none}}
/* The tab card (#586, tabcard.js): the session's Fleet card under its tab, and
   the tab menu's items as a row of icon buttons. It lives on <body>. */
.tabcard{position:fixed;z-index:60;width:360px;max-width:calc(100vw - 16px);background:var(--bg);border:1px solid var(--rule);border-radius:calc(var(--r) + 2px);box-shadow:0 10px 30px rgba(0,0,0,.35);font-family:var(--font-chrome)}
.tabcard[hidden]{display:none}
.tabcard .card{border:0;margin:0;box-shadow:none;cursor:pointer}
.tabcard .acts{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px 8px;border-top:1px solid var(--rule)}
.tabcard .acts button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--r);background:none;color:var(--muted);cursor:pointer}
.tabcard .acts button:hover{color:var(--strong);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.tabcard .acts button.danger{margin-left:auto}
.tabcard .acts button.danger~button.danger{margin-left:0}
.tabcard .acts button.danger:hover{color:var(--err)}
.tabcard .acts button:disabled{opacity:.4;cursor:default}
/* A sprite icon is a letter tall unless its place sizes it (glyphs.js). */
:where(svg.ic){width:1em;height:1em;vertical-align:-.125em;flex:none}
/* The icons help page: each symbol before its name, at a size its strokes read at. */
.a2 .glyph-sample .ic{width:20px;height:20px;vertical-align:-5px;margin-right:8px;color:var(--strong)}
/* A harness, effort or permission before its word (glyphs.js factIcon). */
.a2 :is(#s-harness,#s-effort,#s-perm,#chip-model,#chip-effort,#chip-perm,.card .ln)>svg.ic:first-child{margin-right:5px;color:var(--muted)}
.tabcard .acts .ic{width:15px;height:15px}
.tabcard.tabsheet{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:14px 14px 0 0;padding-bottom:env(safe-area-inset-bottom)}
@media (pointer:coarse){.tabcard .acts button{width:44px;height:44px}}
.a2 .tab{cursor:pointer;user-select:none}
.a2 .tab .tname{max-width:22ch;overflow:hidden;text-overflow:ellipsis}
.a2 .tab.home{font-weight:500}
.a2 .tab.add{font-size:15px;padding:4px 12px}
.a2 .tab.asleep{opacity:.6}
.a2 .tab.dragging{opacity:.35}
.a2 .tab.drop{box-shadow:inset 2px 0 0 var(--accent)}
.a2 .tabs .servers{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--faint);padding:0 10px}
/* The header's buttons are bare icons at every width (#586): no box, a tint on hover. */
.a2 .keys-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:30px;height:28px;background:none;border:1px solid transparent;border-radius:var(--r);color:var(--muted);font-family:var(--font-mono);font-size:11.5px;padding:0 4px;margin:0 1px 6px;cursor:pointer}
.a2 .keys-btn:hover{color:var(--strong);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.a2 .bell[data-state=granted]{color:var(--accent)}
.a2 .set-btn .lbl{display:none}
.a2 .set-btn .ic{width:15px;height:15px}
.a2 .keymap{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.45)}
.a2 .keymap[hidden]{display:none}
.a2 .keymap .panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:6px 22px 14px;max-height:85vh;overflow:auto;font-size:12.5px;display:grid;grid-template-columns:auto auto;column-gap:36px;align-items:start}
.a2 .keymap th{text-align:left;color:var(--faint);font-family:var(--font-chrome);font-size:11.5px;font-weight:500;padding:12px 0 4px}
.a2 .keymap td{padding:3px 18px 3px 0;color:var(--ink)}
.a2 .keymap td:first-child{font-family:var(--font-mono);color:var(--strong);white-space:pre}
/* the command palette (js/palette.js): the ? list's backdrop, the command menu's rows */
.a2 .palette{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;background:rgba(0,0,0,.45)}
.a2 .palette[hidden]{display:none}
.a2 .palette .panel{width:min(560px,92vw);max-height:70vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:6px;font-family:var(--font-chrome);font-size:12.5px}
.a2 .palette input{padding:7px 9px;margin-bottom:4px;background:var(--bg);border:1px solid var(--accent);border-radius:4px;color:var(--strong);font:inherit;outline:none}
.a2 .palette .rows{overflow:auto}
.a2 .palette .cmd-row{grid-template-columns:1fr auto}
.a2 .palette .keys{display:flex;gap:14px}
.a2 .palette kbd{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);white-space:pre}
.a2 .palette .cmd-row.on kbd{color:var(--muted)}
.a2 .palette .empty{padding:6px 8px;color:var(--faint)}
.a2 .dialog{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.45);padding:16px}
.a2 .dialog[hidden]{display:none}
.a2 .dialog .panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:18px 20px;max-width:420px;width:100%}
.a2 .dialog .q{margin:0 0 16px;color:var(--strong);font-size:14px;line-height:1.45}
.a2 .dialog .acts{display:flex;gap:10px;justify-content:flex-end}
.a2 .dialog .panel.wide{max-width:560px}
.a2 .set-vtag{display:inline-block;margin-left:6px}
.a2 .set-vtag summary{cursor:pointer;list-style:none;display:inline;color:var(--muted)}
.a2 .set-vtag summary::-webkit-details-marker{display:none}
.a2 .set-vtag.warn summary{color:var(--warn)}
.a2 #s-harness.warn{color:var(--warn)}
.a2 .set-vtag .set-vline{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin-top:4px}
.a2 .dialog .b{margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--ink)}
.a2 .untested .range{color:var(--muted);margin:0 0 8px}
.a2 .untested .found{font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere;margin:0 0 8px}
.a2 .untested .cmd{display:flex;gap:8px;align-items:flex-start;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:8px 10px;margin:0 0 8px}
.a2 .untested .cmd code{flex:1;font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere;white-space:pre-wrap}
.a2 .untested .note{color:var(--muted);margin:0 0 4px}
@media (max-width:520px){.a2 .dialog .acts{flex-direction:column-reverse;align-items:stretch}}
/* Installing (install.js): the offer at the top of the Fleet, and the dialog's
   three steps, each with its real state and, for a download, a bar. */
.a2 .install-offer{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--rule));border-radius:var(--r-lg);padding:10px 14px;margin:12px 20px}
.a2 .install-offer[hidden]{display:none}
.a2 .install-offer .t{flex:1;min-width:160px;color:var(--strong);font-size:13px}
.a2 .install-offer .t span{display:block;color:var(--muted);font-size:12px}
.a2 .irow{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 10px;padding:10px 0;border-top:1px solid var(--rule)}
.a2 .irow .num{font-family:var(--font-mono);font-size:12px;color:var(--faint);padding-top:1px}
.a2 .irow.done .num{color:var(--ok)}
.a2 .irow h5{margin:0;font:500 12.5px var(--font-ui);color:var(--strong)}
.a2 .irow .sub{font:11.5px var(--font-mono);color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.a2 .irow .ctl{grid-column:2;margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.a2 .irow+.acts{margin-top:12px}
/* Under .irow: the Fleet's plan segments are a .pbar too (further down). */
.a2 .irow .pbar{display:block;position:relative;width:auto;height:6px;background:var(--raised);border-radius:3px;overflow:hidden;grid-column:2;margin-top:6px}
.a2 .irow .pbar[hidden]{display:none}
.a2 .irow .pbar i{display:block;height:100%;width:0;background:var(--ok);border-radius:3px;transition:width .12s linear}
.a2 .irow .pbar.ind i{width:30%;animation:ind 1.1s ease-in-out infinite}
@keyframes ind{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.a2 .irow .pbar.ind i{animation:none;width:100%;opacity:.4}}
/* The bell's panel (pushpanel.js): this device's push and its sources. */
.a2 .pop{position:fixed;right:12px;z-index:55;width:min(320px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px 14px;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.a2 .pop h5{margin:0 0 2px;font:500 12.5px var(--font-ui);color:var(--strong)}
.a2 .pop .dev{font:11px var(--font-mono);color:var(--muted);margin-bottom:8px;overflow-wrap:anywhere}
.a2 .pop label{display:flex;gap:8px;align-items:center;padding:6px 0;font-size:12.5px;color:var(--ink);cursor:pointer;border-top:1px solid var(--rule)}
.a2 .pop label span{margin-left:auto;font:10.5px var(--font-mono);color:var(--faint)}
.a2 .pop input{accent-color:var(--accent);margin:0}
.a2 .pop label:has(input:disabled){color:var(--faint);cursor:default}
.a2 .pop .acts{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:10px}
.a2 .pop .st{font:11px var(--font-mono);color:var(--ok);margin-right:auto;overflow-wrap:anywhere}
.a2 .pop .btn.sm{font-size:11.5px;padding:3px 10px}
.a2 .bell[data-push=on]{color:var(--accent)}
@media (pointer:coarse){.a2 .pop label,.a2 .pop .btn.sm{min-height:44px}.a2 .pop{right:8px;width:calc(100vw - 16px)}}
@media (max-width:640px){.a2 .install-offer .t{flex-basis:100%}}
.a2 .set-app-v{font-family:var(--font-mono);font-size:12px;color:var(--ink)}
/* pick-chip: the chip is the host; the input inside sizes to its text and the
   list hangs under it (js/pick.js). */
.a2 pick-chip{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.a2 pick-chip:focus-within{border-color:var(--accent)}
.a2 pick-chip input{field-sizing:content;min-width:3ch;max-width:30ch;background:none;border:none;outline:none;padding:0 14px 0 0;color:inherit;font:inherit;cursor:inherit}
.a2 pick-chip:after{content:"";position:absolute;right:7px;top:50%;width:5px;height:5px;border:solid currentColor;border-width:0 1px 1px 0;transform:translateY(-70%) rotate(45deg);opacity:.55;pointer-events:none}
.a2 pick-chip .menu{position:absolute;left:-1px;top:calc(100% + 4px);min-width:calc(100% + 2px);max-height:240px;overflow:auto;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:4px;z-index:6;box-shadow:0 6px 18px rgba(0,0,0,.25);font-family:var(--font-chrome);font-size:12px;color:var(--strong);cursor:default}
.a2 pick-chip .menu[hidden]{display:none}
.a2 pick-chip .opt{padding:4px 8px;border-radius:4px;white-space:nowrap;cursor:pointer}
.a2 pick-chip .opt.on{background:var(--accent-soft)}
.a2 pick-chip .opt b{color:var(--accent);font-weight:600}
.a2 pick-chip .opt.free{color:var(--muted);font-style:italic}
.a2 pick-chip .opt[aria-disabled=true]{color:var(--faint);cursor:default}
/* A model's rank, Coding Index and price beside its name (js/models.js). */
.a2 pick-chip .opt .meta{font-family:var(--font-mono);font-size:10px;color:var(--muted);border-left:1px solid var(--rule);margin-left:6px;padding-left:6px}
/* On a phone the chip goes under the name, so the list is no wider for it. */
@media (max-width:640px){.a2 pick-chip .opt:has(.meta){display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.a2 pick-chip .opt .meta{border-left:0;margin-left:0;padding-left:0}}
.a2 .dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.a2 .dot.ready{background:var(--ok)}.a2 .dot.err{background:var(--err)}.a2 .dot.ghost{background:var(--faint)}

/* views */
.a2 .view{display:none;min-height:0}
.a2[data-view=boot] .v-boot{display:grid;place-items:center}
.a2[data-view=spawn] .v-spawn{display:grid;place-items:center;overflow:auto;padding:48px 20px}
.a2[data-view=session] .v-session{display:grid;grid-template-columns:minmax(0,1fr) var(--side-w,260px);position:relative}
/* a window tab (#w=<n>:<key>): window n's panes alone, with no tabs, panel or transcript */
.a2[data-view=window]{grid-template-rows:minmax(0,1fr)}
.a2[data-view=window]:has(> .netbanner:not([hidden])){grid-template-rows:auto minmax(0,1fr)}
.a2[data-view=window] .v-session{display:grid;grid-template-columns:minmax(0,1fr);position:relative}
.a2[data-view=window] .tabs,.a2[data-view=window] .v-session>.side,.a2[data-view=window] .v-session>.grip,.a2[data-view=window] #tr-pane{display:none}
.a2 .canvas>.wempty{display:none}
.a2[data-view=window] .canvas[data-docked="0"]>.wempty{display:block;margin:48px auto}
.a2[data-view=fleet] .v-fleet{display:block;overflow:auto}
.a2[data-mode=read] .composer,.a2[data-mode=read] .side .live-only{display:none}
.a2:not([data-mode=read]) .read-only{display:none}
.a2 .notice{color:var(--muted);font-size:14px;max-width:520px;text-align:center;line-height:1.5}
.a2 .tr-offline{margin:48px auto}
.a2[data-offline] .needs-net{opacity:.45;cursor:default}
.a2 .boot{display:grid;gap:14px;justify-items:center;padding:16px}
.a2 .login{display:grid;gap:10px;width:min(360px,100%)}
.a2 .login[hidden]{display:none}
.a2 .login label{color:var(--muted);font-size:13px;line-height:1.45}
.a2 .login input{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:10px 12px;font-size:15px;color:var(--strong)}

/* the new-tab composer */
.a2 .spawn{width:min(640px,100%);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;justify-items:center}
/* The brand, the same in every theme: the Gorgoneion in the accent, and ægis
   in Source Serif 4 whatever the theme's heading font. */
.a2 .spawn .mark{display:flex;align-items:center;gap:12px;font-family:'SS4',serif;font-weight:600;font-size:30px;line-height:1;color:var(--strong)}
.a2 .gorgon{flex:none;color:var(--accent);overflow:visible}
.a2 .spawn .mark .gorgon{width:50px;height:50px}
.a2 .boot .gorgon{width:96px;height:96px}
/* The eye (glyphs.js): the pupil looks left and right, then the eye and the
   pupil's lid squash to a slit and open. Each pivots on the eye's centre, or
   the blink pulls the pupil toward the top of the box. */
.a2 .gorgon :is(.eye,.pupil,.lid){transform-box:view-box;transform-origin:32px 32px}
.a2 .gorgon .pupil{animation:gorgon-look 5s ease-in-out infinite}
.a2 .gorgon :is(.eye,.lid){animation:gorgon-blink 5s ease-in-out infinite}
@keyframes gorgon-look{0%,8%{transform:translateX(0)}16%,32%{transform:translateX(-4.5px)}42%,58%{transform:translateX(4.5px)}66%,100%{transform:translateX(0)}}
@keyframes gorgon-blink{0%,72%,82%,100%{transform:scaleY(1)}77%{transform:scaleY(.08)}}
@media (prefers-reduced-motion:reduce){.a2 .gorgon :is(.eye,.pupil,.lid){animation:none}}
.a2 .spawn .cwd{width:100%;background:none;border:none;border-bottom:1px dashed transparent;outline:none;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.a2 .spawn .cwd:hover,.a2 .spawn .cwd:focus{border-bottom-color:var(--faint);color:var(--ink)}
.a2 .spawn .box{width:100%;display:flex;align-items:flex-end;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg)}
.a2 .spawn .box:focus-within{border-color:var(--accent)}
.a2 .spawn textarea{flex:1;min-width:0;width:0;resize:none;padding:12px 14px;background:none;border:none;outline:none;color:var(--strong);font-family:var(--font-ui);font-size:14px;line-height:1.45}
/* As in a session: attach, mic and send inside the box, bottom right, and the
   chips on a line below it, wrapping however long a model id gets (#207, #315). */
.a2 .spawn .acts{flex:none;display:flex;gap:6px;align-items:center;padding:8px 8px 8px 0}
.a2 .spawn .chips{width:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.a2 .spawn .pick{max-width:30ch;background:var(--bg);border:1px solid var(--rule);border-radius:5px;padding:3px 8px;font-family:var(--font-chrome);font-size:11.5px;color:var(--ink);cursor:pointer}
.a2 .spawn .pick.agent{border-color:var(--accent);color:var(--accent)}
.a2 .spawn .pick.diff{color:var(--accent)}
.a2 .spawn .reset{background:none;border:none;padding:0;color:var(--muted);font-size:11px;text-decoration:underline;cursor:pointer}
.a2 .spawn .send{background:var(--accent);color:var(--on-accent);border:none;border-radius:6px;font-size:15px;line-height:1;padding:6px 12px;font-weight:600;cursor:pointer}
.a2 .spawn .send .ic,.a2 .composer .acts .send .ic{width:15px;height:15px;vertical-align:middle}
.a2 .spawn .err-text{margin:0}
.a2 .spawn .err-text:empty{display:none}
/* The new tab's hints (help.state): a line each under the chips, run by a
   click, dismissed by the cross. No hint, no row and no gap. */
.a2 .spawn .hints{width:100%;display:flex;flex-direction:column;gap:2px}
.a2 .spawn .hints:not(:has(.hint:not([hidden]))){display:none}
.a2 .spawn .hint{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:12px;color:var(--muted)}
.a2 .spawn .hint[hidden]{display:none}
.a2 .spawn .hint .go{flex:1;min-width:0;text-align:left;background:none;border:0;padding:4px 0;color:inherit;font:inherit;cursor:pointer}
.a2 .spawn .hint .go:hover{color:var(--strong)}
.a2 .spawn .hint .go:hover code{color:var(--accent)}
.a2 .spawn .hint .x{flex:none;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--faint);padding:4px 6px;cursor:pointer}
.a2 .spawn .hint .x:hover{color:var(--err)}
.a2 .spawn .hint .x .ic{width:12px;height:12px}
/* The doctor row: a summary in the worst level's colour, /doctor, and the
   findings folded under the caret (app.js drawDoctor). */
.a2 .spawn .doc{margin:2px 0 4px;border:1px solid var(--rule);border-left:2px solid var(--lvl);border-radius:var(--r);background:var(--surface)}
.a2 .spawn .doc.warn{--lvl:var(--warn)}
.a2 .spawn .doc.err{--lvl:var(--err)}
.a2 .spawn .doc .row{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 10px;font-family:var(--font-ui);font-size:12.5px;color:var(--ink)}
.a2 .spawn .doc .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--lvl);box-shadow:0 0 0 3px color-mix(in srgb,var(--lvl) 18%,transparent)}
.a2 .spawn .doc .sum{flex:1;min-width:0}
.a2 .spawn .doc .sum b{font-weight:500;color:var(--lvl)}
.a2 .spawn .doc .run{flex:none;font-family:var(--font-mono);font-size:11.5px;background:var(--lvl);color:var(--on-accent);border:0;border-radius:var(--r);padding:4px 10px;cursor:pointer}
.a2 .spawn .doc .run:disabled{opacity:.5;cursor:default}
.a2 .spawn .doc .more{flex:none;display:flex;align-items:center;background:none;border:0;color:var(--faint);cursor:pointer;padding:4px 6px;transition:transform .15s}
.a2 .spawn .doc .more:hover{color:var(--strong)}
.a2 .spawn .doc .more .ic{width:12px;height:12px}
.a2 .spawn .doc.open .more{transform:rotate(90deg)}
.a2 .spawn .doc ul{list-style:none;margin:0;padding:2px 12px 8px 27px;border-top:1px solid var(--rule)}
.a2 .spawn .doc li{font-family:var(--font-ui);font-size:12.5px;line-height:1.45;margin:7px 0 0;color:var(--ink)}
.a2 .spawn .doc li .w{display:block;font-family:var(--font-mono);font-size:10.5px;color:var(--faint)}
.a2 .spawn .doc li.error .w::before{content:"error · ";color:var(--err)}
.a2 .spawn .doc li.warn .w::before{content:"warning · ";color:var(--warn)}
.a2 .spawn .doc li.tail{font-size:11.5px;color:var(--muted)}
.a2 .spawn .doc li.tail a{color:var(--accent)}
/* The tip: one help-page hint at a time (app.js rotateTip). It and /feedback
   give their room to the first message once it has text. */
.a2 .spawn .hints[data-typing] :is(.tip,#hint-feedback){display:none}
.a2 .spawn .hint.tip{margin-top:4px;border-top:1px solid var(--rule);padding-top:4px}
.a2 .spawn .hint.tip .lab{flex:none;display:flex;color:var(--faint)}
.a2 .spawn .hint.tip .lab .ic{width:12px;height:12px}
.a2 .spawn .hint.tip .go{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .3s}
.a2 .spawn .hint.tip .go.fade{opacity:0}
@media (prefers-reduced-motion:reduce){.a2 .spawn .hint.tip .go,.a2 .spawn .doc .more{transition:none}}
.a2 .pa{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.a2 .err-text{color:var(--err);font-size:12px;font-family:var(--font-chrome);margin-right:auto}

/* transcript */
.a2 .col{display:grid;grid-template-rows:1fr auto;min-height:0;position:relative}
/* The bottom padding is the navigator's room: it floats over the transcript's
   foot, and without it covers the last row. */
.a2 .tr{overflow-y:auto;padding:18px 22px 52px;position:relative}
.a2 .tr:before{content:"";display:var(--thread);position:absolute;left:32px;top:24px;bottom:0;width:1px;background:var(--rule)}
.a2 .row{display:grid;grid-template-columns:var(--row-cols);column-gap:10px;margin:0 0 9px;min-width:0}
.a2 .row .t{display:var(--time);width:38px;font-family:var(--font-mono);font-size:11px;color:var(--faint);line-height:1.9}
.a2 .row .g{text-align:center;line-height:1.6;color:var(--faint);font-size:13px;position:relative;z-index:1;background:var(--bg);align-self:start}
.a2 .row .g .ic{width:14px;height:14px;vertical-align:-2px}
.a2 .row .body{min-width:0}
/* Off-screen rows skip layout and paint, and keep their last height once drawn (#157). */
.a2 #entries>.row{content-visibility:auto;contain-intrinsic-size:auto 40px}
.a2 .row.user .body{color:var(--strong);background:var(--raised);padding:9px 12px;border-radius:var(--r);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.a2 .row.user .body .md{white-space:normal}
.a2 .row.user .g{color:var(--accent)}
.a2 .row.sel{background:var(--accent-soft);position:relative}
.a2 .row.sel:after{content:"";position:absolute;left:-8px;top:0;bottom:0;width:2px;background:var(--accent)}
.a2 .row.sel .g{background:none}
.a2 .row.user.pending .body{opacity:.55;border:1px dashed var(--rule)}
.a2 .row.user.pending .body:after{content:"not read yet";display:block;font-size:11px;color:var(--faint);margin-top:4px;font-family:var(--font-chrome)}
.a2 .row.user .body .dictated{font-size:11px;color:var(--faint);margin-top:4px;font-family:var(--font-chrome)}
.a2 .row.prose .body{font-family:var(--font-prose);font-size:var(--prose-size);line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.a2 .row.prose .g{color:var(--ink)}
/* reading: the margin mark on agent messages */
.a2 .row.prose{grid-template-columns:var(--row-cols) 16px}
.a2 .row.prose .rm{line-height:1.9;text-align:center}
.a2 .row.prose .rm .ic{width:12px;height:12px}
.a2 .row.prose .rm .ic.i-unread{color:var(--accent)}
.a2 .row.prose .rm .ic.i-read{color:var(--faint)}
/* the read-aloud chip under the read mark (speak.js): shown on hover like a
   copy button, always on a touch screen, which has no hover */
.a2 .row.prose .rm .speak{position:relative;display:grid;place-items:center;width:16px;height:18px;margin:2px auto 0;padding:0;border:none;background:none;color:var(--faint);cursor:pointer;opacity:0;transition:opacity .12s}
.a2 .row.prose .rm .speak .ic{width:13px;height:13px}
.a2 .row.prose:hover .rm .speak,.a2 .row.prose .rm .speak:focus-visible,.a2 .row.prose .rm .speak.on{opacity:1}
.a2 .row.prose .rm .speak:hover{color:var(--strong)}
.a2 .row.prose .rm .speak.on{color:var(--accent)}
.a2 .row.prose .rm .speak.load{animation:speak-load .8s ease-in-out infinite alternate}
@keyframes speak-load{from{opacity:.3}to{opacity:1}}
.a2 .row.prose.speaking>.g{color:var(--accent)}
.a2 .mic.speak-follow.on{color:var(--accent);background:var(--accent-soft)}
@media (pointer:coarse){.a2 .row.prose .rm .speak{opacity:.7}.a2 .row.prose .rm .speak::before{content:"";position:absolute;inset:-10px -8px}}
.a2 .card .ft .unr{color:var(--accent)}
/* Tables query the transcript's scroller, not their row: a size container
   inside the scroller stops Chromium's scroll anchoring, so rows drawn above
   the view would push the text being read (#323). */
.a2 #tr,.a2 .vbody,.a2 .pbody{container:md/inline-size}
.a2 .md>:first-child{margin-top:0}.a2 .md>:last-child{margin-bottom:0}
.a2 .md p,.a2 .md ul,.a2 .md ol{margin:0 0 .65em}
.a2 .md ul,.a2 .md ol{padding-left:1.4em}
.a2 .md li{margin:.15em 0}
.a2 .md li.task{list-style:none;margin-left:-1.3em}
.a2 .md li.task input{accent-color:var(--accent);margin:0 .4em 0 0;vertical-align:-.1em}
.a2 .md h1,.a2 .md h2,.a2 .md h3,.a2 .md h4{font-family:var(--font-head);color:var(--strong);font-weight:600;line-height:1.3}
.a2 .md h1{font-size:1.25em;margin:1.1em 0 .5em}
.a2 .md h2{font-size:1.15em;margin:1.1em 0 .45em}
.a2 .md h3{font-size:1.02em;margin:1em 0 .4em}
.a2 .md h4{font-size:1em;margin:.9em 0 .35em;color:var(--ink)}
.a2 .md a{color:var(--accent);text-underline-offset:2px}
.a2 .md :not(pre)>code{font:.84em var(--font-mono);font-variant-ligatures:none;background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:.05em .35em}
.a2 .md blockquote{margin:.6em 0;padding:.35em 12px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r) var(--r) 0;color:var(--ink)}
.a2 .md blockquote>:last-child{margin-bottom:0}
.a2 .md hr{border:0;border-top:1px solid var(--rule);margin:1em 0}
.a2 .md pre{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:8px 10px;overflow-x:auto;font-size:12.5px;line-height:1.45}
.a2 .md pre code{background:none;border:0;padding:0;font-size:inherit}
.a2 .md .fence{margin:.7em 0;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.a2 .md .fh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 4px 0 12px;min-height:20px}
.a2 .md .fh .lang{font:10.5px/1 var(--font-ui);letter-spacing:.04em;color:var(--faint);text-transform:uppercase}
.a2 .md .fh .lang.guessed::after{content:" ?"}
.a2 .md .fence pre{margin:0;padding:2px 12px 10px;background:none;border:0;border-radius:0;font:12.5px/1.55 var(--font-mono);font-variant-ligatures:none;tab-size:4}
.a2 .md .tblk{position:relative;margin:.8em 0;width:max-content;max-width:100%}
.a2 .md .tw{overflow-x:auto;max-width:100%;padding-right:22px}
.a2 .md .tw.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.a2 .md table{border-collapse:collapse;font:13px/1.45 var(--font-ui);width:max-content}
.a2 .md th,.a2 .md td{padding:5px 10px;text-align:left;vertical-align:top;max-width:30ch;overflow-wrap:normal;word-break:normal}
.a2 .md th{white-space:nowrap;font-weight:600;font-size:11.5px;letter-spacing:.03em;color:var(--muted);border-bottom:1.5px solid var(--muted)}
.a2 .md td{border-bottom:1px solid var(--rule)}
.a2 .md td[style*=right],.a2 .md th[style*=right]{font-variant-numeric:tabular-nums;white-space:nowrap}
.a2 .md tr:hover td{background:var(--accent-soft)}
.a2 .md td:first-child,.a2 .md th:first-child{position:sticky;left:0;background:var(--bg);z-index:1}
.a2 .md tr:hover td:first-child{background:color-mix(in srgb,var(--accent) 16%,var(--bg))} /* opaque: it covers the cells scrolled under it */
/* 600 px of #tr's content box, which is a row's whole width (its padding
   does not count): 542 px of Markdown in an agent's row, 498 px in logbook's. */
@container md (max-width:600px){
  .a2 .md .tblk{width:auto}
  .a2 .md .tw{overflow:visible;padding-right:0}
  .a2 .md .tw.more-r{-webkit-mask-image:none;mask-image:none}
  .a2 .md table,.a2 .md tbody,.a2 .md tr,.a2 .md td{display:block;width:auto;max-width:none}
  .a2 .md thead{display:none}
  .a2 .md tr{border:1px solid var(--rule);border-radius:var(--r);padding:6px 10px;margin:0 0 8px;background:var(--surface)}
  .a2 .md td{border:0;padding:2px 0 2px 42%;position:relative;text-align:left!important;white-space:normal;background:none!important}
  .a2 .md td::before{content:attr(data-label);position:absolute;left:0;width:40%;color:var(--muted);font-size:11.5px;line-height:1.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .a2 .md td:first-child{font-weight:600;color:var(--strong);padding-left:0;position:relative}
  .a2 .md td:first-child::before{display:none}
}
.a2 code{font-family:var(--font-mono);font-size:.82em;background:var(--raised);padding:1px 5px;border-radius:4px}
/* Copy (js/copy.js): a person's message's and a bare code block's sit in their
   top-right corner, a fence's at the end of its header, a table's at its
   top-right corner, a tool's at the end of its line. Each shows while its row
   or block is hovered, its row selected, or itself focused or confirming; a
   screen without hover always shows them, faint. A reply has no button: `c`
   on it marks its glyph instead (.g[data-copied]). */
.a2 button.copy{display:inline-flex;align-items:center;gap:4px;padding:2px 5px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);color:var(--faint);font:400 11px/1 var(--font-chrome);font-style:normal;cursor:pointer;opacity:0;transition:opacity .12s}
.a2 button.copy .ic{width:12px;height:12px;vertical-align:0}
.a2 button.copy span:empty{display:none}
.a2 button.copy:hover{color:var(--strong);border-color:var(--faint)}
.a2 button.copy:focus-visible{opacity:1;outline:1px solid var(--accent);outline-offset:1px}
.a2 button.copy[data-state=done]{opacity:1;color:var(--ok)}
.a2 button.copy[data-state=err]{opacity:1;color:var(--err)}
.a2 .row>.body:has(>button.copy),.a2 .md pre:not(.fence pre){position:relative}
.a2 .row>.body>button.copy,.a2 .md pre:not(.fence pre)>button.copy{position:absolute;top:4px;right:4px;z-index:1}
.a2 .md .tblk>button.copy{position:absolute;top:-2px;right:0;z-index:2}
.a2 .row:hover>.body>button.copy,.a2 .row.sel>.body>button.copy,.a2 .md pre:hover>button.copy,.a2 .md .fence:hover .fh>button.copy,.a2 .row.sel .md .fh>button.copy,.a2 .md .tblk:hover>button.copy,.a2 .row.sel .md .tblk>button.copy,.a2 .row.tool:hover .line>button.copy,.a2 .row.tool.sel .line>button.copy{opacity:1}
.a2 .row>.g[data-copied=done]{color:var(--ok)}.a2 .row>.g[data-copied=err]{color:var(--err)}
.a2 .row.tool .line>button.copy{flex:none;align-self:center}
@media (hover:none){.a2 button.copy{opacity:.6}}

.a2 .row.tool,.a2 .row.think,.a2 .row.sys,.a2 .row.error,.a2 .row.working{font-family:var(--font-mono);font-size:12.5px}
.a2 .row.tool details>summary{list-style:none;cursor:pointer}
.a2 .row.tool details>summary::-webkit-details-marker{display:none}
.a2 .row.tool .line{display:flex;column-gap:12px;align-items:baseline}
.a2 .row .loading{font-family:var(--font-mono);font-size:12px;color:var(--faint);padding:4px 0}
.a2 .tn{color:var(--strong);font-weight:500;flex:none}
/* The description and the verdict share the row 30:70 and each stops at its own
   width, so either one takes the room the other leaves. */
.a2 .ta{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:3 1 0;min-width:0;max-width:max-content}
.a2 .tr2{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:7 1 0;min-width:0;max-width:max-content;margin-left:auto}
.a2 .row.tool.ok .tr2,.a2 .row.tool.ok .g{color:var(--ok)}
.a2 .row.tool.err .tr2,.a2 .row.tool.err .g,.a2 .row.error,.a2 .row.error .g{color:var(--err)}
.a2 .row.tool.running .tr2{color:var(--accent)}
.a2 .row.tool.running .tr2:after{content:"running";animation:a2pulse 1.4s ease-in-out infinite}
@keyframes a2pulse{50%{opacity:.35}}
.a2 .more{margin:6px 0 2px;display:grid;gap:6px}
.a2 .more pre,.a2 pre.out{margin:0;padding:7px 10px;font-size:11.5px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-mono);background:var(--surface);border-left:2px solid var(--rule);color:var(--muted);max-height:420px;overflow:auto}
.a2 .row.tool.err pre.out,.a2 .row.error pre.out{background:var(--err-bg);color:var(--err);border-left-color:var(--err)}
.a2 .lines,.a2 .diff{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);font:12px/1.55 var(--font-mono);margin:6px 0 0}
.a2 .lines{display:grid;grid-template-columns:auto minmax(0,1fr);overflow:auto;max-height:60vh}
.a2 .lines .n,.a2 .diff .n{color:var(--faint);text-align:right;padding:0 8px 0 10px;user-select:none;font-size:11px}
.a2 .lines .c,.a2 .diff .c{white-space:pre;padding-right:12px;min-height:1.55em}
.a2 .diff{overflow:hidden}
.a2 .diff .hunk{background:var(--raised);color:var(--faint);font-size:11px;padding:1px 10px}
.a2 .diff .split{display:none;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)}
.a2 .diff .split .c{white-space:pre-wrap;overflow-wrap:anywhere}
.a2 .diff .unified{display:grid;grid-template-columns:auto auto minmax(max-content,1fr);overflow-x:auto}
/* An edit side by side from 680 px of #tr's content box, a row's whole width:
   the spec's 640 px of body plus the row's gutter (#323). */
@container md (min-width:680px){.a2 .diff .split{display:grid}.a2 .diff .unified{display:none}}
.a2 .diff .s{user-select:none;padding:0 6px 0 2px;color:var(--faint)}
.a2 .diff .del{background:var(--del-bg)}.a2 .diff .add{background:var(--add-bg)}
.a2 .diff .s.del{color:var(--err)}.a2 .diff .s.add{color:var(--ok)}
.a2 .diff .n.del,.a2 .diff .n.add{color:var(--muted)}
.a2 .diff .del mark{background:color-mix(in srgb,var(--err) 32%,transparent);color:inherit;border-radius:2px}
.a2 .diff .add mark{background:color-mix(in srgb,var(--ok) 32%,transparent);color:inherit;border-radius:2px}
.a2 .diff .nil{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--rule) 5px 6px);opacity:.5}
.a2 .diff .elided{color:var(--faint);font-size:11px;padding:2px 10px}
.a2 .row.tool .md.args{margin-top:6px}
.a2 .row.tool .md.args .fence{margin:0}
.a2 .row.think{color:var(--faint);font-style:italic}
.a2 .row.think summary{cursor:pointer}
.a2 .row.think .md{font-family:var(--font-prose);font-size:14px;color:var(--muted);margin-top:4px}
.a2 .row.sys{color:var(--faint);font-size:11.5px}
/* the prose view: a run of work as one line, on the run's first row (js/transcript.js) */
.a2 #entries.prose-view .row[data-fold=in]:not(.run-open){display:none}
.a2 #entries.prose-view .row[data-fold=head]:not(.run-open)>:not(.runline){display:none}
.a2 .runline{grid-column:1/-1;display:grid;grid-template-columns:var(--row-cols);column-gap:10px;width:100%;padding:0;border:none;background:none;text-align:left;cursor:pointer;font:inherit;font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--faint)}
.a2 .row.run-open>.runline{margin-bottom:6px}
.a2 .runline .rs{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .runline:hover .rs{color:var(--muted)}
.a2 .runline.running .rs{color:var(--accent)}
.a2 .row.working,.a2 .row.working .g{color:var(--accent)}
.a2 .meta{color:var(--faint);margin-left:10px}
.a2 .steps{color:var(--faint);margin-left:8px}
/* the divider and the navigator */
.a2 .row.since::before{content:attr(data-since);grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:6px 0 10px;font-family:var(--font-chrome);font-size:11px;color:var(--accent);background:linear-gradient(var(--accent),var(--accent)) left 50%/calc(50% - 15ch) 1px no-repeat,linear-gradient(var(--accent),var(--accent)) right 50%/calc(50% - 15ch) 1px no-repeat;justify-content:center}
/* Small enough for a phone (#299): no visible overflow clip, so a touch
   pointer's taller hit area (below) reaches past the pill's edge. */
.a2 .nav{position:absolute;right:14px;bottom:calc(var(--composer-h,94px) + 10px);z-index:3;display:flex;align-items:center;border:1px solid var(--rule);background:var(--raised);border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25);font-family:var(--font-chrome)}
.a2 .nav[hidden]{display:none}
.a2 .nav button{position:relative;border:none;background:none;color:var(--strong);height:30px;min-width:30px;padding:0 7px;cursor:pointer;display:grid;place-items:center}
.a2 .nav button+button{border-left:1px solid var(--rule)}
.a2 .nav .pos{display:flex;align-items:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.a2 .nav .pos:empty{display:none}
.a2 .nav .pos.unread{color:var(--accent)}
.a2 .nav .pos.unread::after{content:"";display:inline-block;width:5px;height:5px;margin-left:4px;border-radius:50%;background:var(--accent);vertical-align:2px}
.a2 .nav button:disabled{opacity:.4;cursor:default}
.a2 .nav .latest.new{color:var(--accent)}
.a2 .nav .ic{width:15px;height:15px}
.a2 .nav .needs:disabled .ic.need{color:var(--muted)}
.a2 .nav .needs .n{position:absolute;top:1px;right:1px;min-width:13px;height:13px;padding:0 3px;border-radius:7px;background:var(--accent);color:var(--on-accent);font-size:9.5px;line-height:13px;font-weight:600}
.a2 .nav .needs .n:empty{display:none}
.a2 .nav .spark{color:var(--accent)}
.a2 .nav .fold[data-level="1"]{color:var(--accent)}
.a2 .nav .fold[data-level="2"]{color:var(--accent);background:var(--accent-soft)}
/* the find bar (js/find.js): the navigator's pill, at the top */
.a2 .find{position:absolute;right:14px;top:10px;z-index:3;display:flex;align-items:center;border:1px solid var(--rule);background:var(--raised);border-radius:999px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.25);font-family:var(--font-chrome)}
.a2 .find input{width:24ch;height:30px;padding:0 4px 0 14px;background:none;border:none;outline:none;color:var(--strong);font-size:12.5px}
.a2 .find .count{font-size:12px;color:var(--muted);padding:0 8px;white-space:nowrap}
.a2 .find .count:empty{display:none}
.a2 .find button{border:none;border-left:1px solid var(--rule);background:none;color:var(--strong);height:30px;padding:0 10px;cursor:pointer;display:grid;place-items:center}
.a2 .find button:disabled{opacity:.4;cursor:default}
.a2 .find .ic{width:15px;height:15px}
.a2 ::highlight(find){background-color:var(--accent-soft);color:var(--strong)}
.a2 ::highlight(find-now){background-color:var(--accent);color:var(--on-accent)}

/* composer */
.a2 .composer{padding:10px 22px 16px}
.a2 .composer .box{display:flex;align-items:flex-end;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg)}
.a2 .composer .box:focus-within{border-color:var(--accent)}
.a2 .composer textarea{flex:1;min-width:0;resize:none;padding:12px 14px;font-size:13.5px;line-height:1.45;background:none;border:none;color:var(--strong);font-family:var(--font-ui);max-height:40vh;outline:none}
/* A placeholder left to the browser is its own grey on every theme. */
.a2 .composer textarea::placeholder,.a2 .spawn textarea::placeholder{color:var(--faint);opacity:1}
/* Buttons inside the box, bottom right: send, and the mic when it comes. */
.a2 .composer .acts{display:flex;gap:6px;align-items:center;padding:8px 8px 8px 0}
/* Text longer than a line takes the whole width, and the buttons a row of their
   own under it (#575): beside it they narrowed every line, not only the last. */
.a2 :is(.composer,.spawn) .box.stacked{flex-wrap:wrap}
.a2 :is(.composer,.spawn) .box.stacked textarea{flex:1 0 100%;padding-bottom:0}
.a2 :is(.composer,.spawn) .box.stacked .acts{margin-left:auto;padding-top:4px}
/* A touch screen opens the focused box two lines tall at once (#707): 16 px
   of top padding over two 24 px lines. */
@media (pointer:coarse){.a2 .composer .box.stacked textarea{min-height:64px}}
.a2 .composer .acts .send{font-size:15px;line-height:1;padding:6px 12px;font-weight:600}
.a2 .composer.sending .acts .send{position:relative;opacity:1;cursor:progress}.a2 .composer.sending .acts .send .ic{visibility:hidden}
.a2 .composer.sending .acts .send::after{content:"";position:absolute;inset:0;margin:auto;width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:a2spin .8s linear infinite}
.a2 .composer.sending textarea{opacity:.6}
.a2 .composer .acts .int{background:none;border:1px solid var(--rule);border-radius:6px;color:var(--err);font-size:12px;line-height:1;padding:7px 9px;cursor:pointer}
.a2 .composer .acts .int .ic{width:11px;height:11px;vertical-align:middle}
.a2 .composer .acts .int[hidden]{display:none}
/* The mic: idle, loading (capturing while the model loads), listening (its
   ring follows the input level, --level from app.js) and finishing. */
.a2 .mic{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--rule);border-radius:6px;color:var(--ink);padding:5px 8px;cursor:pointer}
.a2 .mic svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1.3}
.a2 .mic[data-state=loading]{opacity:.6;animation:mic-pulse 1s ease-in-out infinite}
.a2 .mic[data-state=listening]{color:var(--on-accent);background:var(--err);border-color:transparent;box-shadow:0 0 0 calc(var(--level,0) * 6px) color-mix(in srgb,var(--err) 35%,transparent)}
.a2 .mic[data-state=finishing]{color:var(--err);border-color:var(--err)}
.a2 .mic:disabled{opacity:.35;cursor:default}
@keyframes mic-pulse{50%{opacity:.25}}
.a2 .composer .chips{display:flex;gap:8px;margin-top:8px;align-items:center}
/* the command menu, drawn above the composer */
.a2 .composer{position:relative}
.a2 .cmd-menu{position:absolute;left:22px;right:22px;bottom:calc(100% - 6px);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:4px;max-height:280px;overflow:auto;font-family:var(--font-chrome);font-size:12.5px;z-index:5}
/* the new tab's menu (#632): in the form's flow, under its box */
.a2 .spawn .cmd-menu{position:static;margin-top:6px}
.a2 .cmd-menu input{width:100%;margin-bottom:4px;padding:6px 8px;background:var(--bg);border:1px solid var(--accent);border-radius:4px;color:var(--strong);font:inherit;outline:none}
.a2 .cmd-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;padding:4px 8px;border-radius:4px;cursor:pointer;align-items:baseline}
.a2 .cmd-row.on{background:var(--accent-soft)}
.a2 .cmd-row .nm{color:var(--strong)}.a2 .cmd-row .nm b{color:var(--accent)}
.a2 .cmd-row .hn,.a2 .cmd-row .dc{color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.a2 .cmd-row .src{color:var(--faint);font-size:11px}
.a2 .composer.bad .box{border-color:var(--err)}
/* attachments: a tray of chips above the message box (js/attach.js) */
.a2 .composer .atts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.a2 .composer .atts[hidden]{display:none}
/* The new tab's tray holds its files until the session exists. */
.a2 .spawn .atts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.a2 .spawn .atts[hidden]{display:none}
.a2 .spawn.dropping .box{border-color:var(--accent);border-style:dashed}
.a2 .chip.att.held .ab{display:none}
.a2 .chip.att{position:relative;display:inline-flex;align-items:center;gap:6px;overflow:hidden;color:var(--ink);max-width:260px}
.a2 .chip.att .an{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.a2 .chip.att .as{color:var(--faint)}
.a2 .chip.att .ab{position:absolute;left:0;bottom:0;height:2px;width:calc(var(--p,0) * 100%);background:var(--accent)}
.a2 .chip.att.done .ab{display:none}
.a2 .chip.att.failed{border-color:var(--err);color:var(--err);cursor:pointer}
.a2 .chip.att .ax{background:none;border:none;color:var(--muted);cursor:pointer;padding:0 2px;font-size:13px;line-height:1}
.a2 .chip.att .ax .ic{width:11px;height:11px;vertical-align:-1px}
.a2 .chip.att .ax:hover{color:var(--strong)}
.a2 .composer.dropping .box{border-color:var(--accent);border-style:dashed}
/* With the paperclip, three 44 px touch buttons and the textarea's own width
   (from its cols) outgrew a 390 px phone: the textarea takes only what is left. */
.a2 .composer textarea{width:0}
.a2 .row.user .body .fcard.att{white-space:normal;font-size:13px}
.a2 .row.user .body .fcard.after{margin-top:8px}
/* The bubble makes this card narrower than a file_send's: the actions wrap
   under the name instead of squeezing it to nothing on a phone. */
.a2 .row.user .fcard.att .fbar{flex-wrap:wrap}
.a2 .chip.click{cursor:pointer}.a2 .chip.click:hover{border-color:var(--accent);color:var(--strong)}
.a2 .row.command .cmd{font-family:var(--font-chrome);color:var(--strong)}
.a2 .chip{font-size:11.5px;padding:3px 9px;border:1px solid var(--rule);border-radius:5px;color:var(--muted);font-family:var(--font-chrome)}
.a2 .chip:empty{display:none}
.a2 .send,.a2 .btn{font-size:12px;padding:6px 14px;border-radius:var(--r);border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer}
.a2 .send,.a2 .btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:500}
.a2 .send:disabled,.a2 .btn:disabled{opacity:.45;cursor:default}

/* sidebar: compact rows, each with a card that opens on hover (js/side.js) */
.a2 .side{padding:14px 14px 10px;overflow:auto;background:var(--side);border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:16px;min-width:0}
.a2 .side h4{margin:0 0 7px;font-weight:500;font-size:11.5px;color:var(--faint);font-family:var(--font-head);display:flex;justify-content:space-between;gap:8px}
.a2 .side h4 .aside{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .side .title{font-size:14px;color:var(--strong);line-height:1.3;font-family:var(--font-head);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.a2 .side .sline{display:flex;align-items:center;gap:8px;margin-top:5px;font-family:var(--font-chrome);font-size:11.5px;color:var(--muted)}
.a2 .side .sline .handle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.a2 .side .sline .st{margin-left:auto;white-space:nowrap}
.a2 .side .sline .at{margin-left:-8px;opacity:.7;white-space:nowrap;flex-shrink:0}
.a2 .side .sline .badge{white-space:nowrap;flex-shrink:0}
.a2 .prow{position:relative;margin:-6px -8px;padding:6px 8px;border-radius:var(--r);outline:none;cursor:default}
.a2 .prow:hover,.a2 .prow.open,.a2 .prow:focus-visible{background:var(--raised)}
.a2 .prow.more{margin:3px -8px -4px;padding:3px 8px 3px 30px;font-family:var(--font-mono);font-size:11px;color:var(--faint)}
/* the card: fixed to the left of the panel, level with its row */
.a2 .pcard{position:fixed;left:0;top:0;z-index:20;width:340px;max-height:calc(100vh - 24px);overflow:auto;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:0 18px 48px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.2);font-family:var(--font-chrome);font-size:12px;color:var(--muted);cursor:auto;
  display:none;transition:opacity .12s ease,transform .12s ease}
/* A closed card is out of layout, so it costs a keystroke nothing. */
.a2 .prow.open>.pcard{display:block}
@starting-style{.a2 .prow.open>.pcard{opacity:0;transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.a2 .pcard{transition:none}}
.a2 .pcard .chd{padding:12px 16px 10px;border-bottom:1px solid var(--rule)}
.a2 .pcard .chd .t{color:var(--strong);font-family:var(--font-ui);font-size:13.5px;font-weight:500;line-height:1.35}
.a2 .pcard .chd .sub{margin-top:4px;color:var(--faint);font-size:11px;font-family:var(--font-mono)}
.a2 .pcard .csec{padding:11px 16px 12px}
.a2 .pcard .csec+.csec{border-top:1px solid var(--rule)}
.a2 .pcard h5{margin:0 0 8px;font-weight:500;font-size:11px;color:var(--faint);font-family:var(--font-head);display:flex;justify-content:space-between;gap:10px}
.a2 .pcard h5>span+span{font-weight:400;text-align:right}
.a2 .pcard .kv{margin:4px 0}
.a2 .pcard .kv>span:first-child{color:var(--faint);flex:none}
.a2 .pcard .kv>span:last-child{color:var(--ink);text-align:right;min-width:0;overflow-wrap:anywhere}
/* the Repos row: one line per repo or worktree the session wrote to */
.a2 .rp-line{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11.5px;line-height:20px;color:var(--ink);min-width:0}
.a2 .rp-line>.n{flex:none}
.a2 .rp-br{color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .rp-r{margin-left:auto;display:flex;gap:7px;flex-shrink:0}
.a2 .rp-more{color:var(--faint);font-family:var(--font-mono);font-size:11px}
.a2 .rp-dirty,.a2 .rp-op{color:var(--warn)}
.a2 .rp-ahead{color:var(--comms)}
.a2 .rp-clean,.a2 a.rp-pr{color:var(--ok)}
.a2 .rp-gone{color:var(--faint)}
.a2 .rp-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--comms);flex:none}
.a2 .pcard h5.rp-h{justify-content:flex-start;flex-wrap:wrap;align-items:baseline;color:var(--strong);font-size:12px}
.a2 .pcard h5.rp-h .p{margin-left:auto;color:var(--faint);font-weight:400;font-size:10.5px;overflow-wrap:anywhere}
.a2 .pcard .rp-files{margin:2px 0 6px;padding:0;list-style:none;font-family:var(--font-mono);font-size:11px;color:var(--ink)}
.a2 .pcard .rp-files li{display:flex;gap:6px;line-height:1.5;min-width:0}
.a2 .pcard .rp-files li>span:first-child{min-width:0;overflow-wrap:anywhere}
.a2 .pcard .rp-files li>.x{margin-left:auto;color:var(--faint);flex:none}
.a2 .pcard .rp-files li.more{color:var(--faint)}
.a2 .pcard .rp-peer{margin-top:6px;color:var(--comms);font-size:11px}
.a2 .pcard .rp-co{margin:4px 0 2px 2px;padding-left:8px;border-left:2px solid var(--rule)}
.a2 .pcard .rp-co h6{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin:0 0 2px;font-size:11.5px;font-family:var(--font-mono);color:var(--strong);font-weight:600}
.a2 .pcard .rp-co h6 .p{margin-left:auto;color:var(--faint);font-weight:400;font-size:10.5px;overflow-wrap:anywhere}
@media (pointer:coarse){.a2 .rp-line a.rp-pr{padding:12px 4px;margin:-12px -4px}}
.a2 .pcard .cnote{margin:8px 0 0;color:var(--faint);font-size:11px;line-height:1.45}
.a2 .pcard .cnote:empty{display:none}
.a2 .pcard .big{display:flex;align-items:baseline;gap:8px;margin:2px 0 8px}
.a2 .pcard .big .p{font-family:var(--font-mono);font-size:24px;color:var(--strong);font-weight:500;letter-spacing:-.5px;line-height:1}
.a2 .pcard .big .of{color:var(--muted)}
.a2 .pcard .big .c{margin-left:auto;font-family:var(--font-mono);font-size:15px;color:var(--strong)}
.a2 .pcard .gauge{grid-template-columns:66px minmax(40px,1fr) auto}
.a2 .pcard .plan{font-family:var(--font-ui)}
/* the Journal row: the newest two entries in the plan's type, then the count;
   its card is the Journal view's timeline, smaller */
.a2 .side .jpeek{display:grid;gap:5px;font-size:12.5px;margin-bottom:8px}
.a2 .side .jpeek>div{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;align-items:baseline;color:var(--muted)}
.a2 .side .jpeek .g{text-align:center;font-size:11px;color:var(--faint)}
.a2 .side .jpeek .g .ic{width:12px;height:12px;vertical-align:-2px}
.a2 .side .jpeek .x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .side .jpeek .t{font-family:var(--font-chrome);font-size:11.5px;color:var(--faint)}
.a2 #p-journal .foot{margin-top:0}
.a2 .pcard .jthread{--jt:46px}
.a2 .pcard .jent{grid-template-columns:34px 16px minmax(0,1fr);column-gap:5px;padding:4px 8px 5px 0}
.a2 .pcard .jent .t{font-size:10.5px;line-height:18px}
.a2 .pcard .jent .g{font-size:11px;line-height:18px}
.a2 .pcard .jent .g span{background:var(--surface)}
.a2 .pcard .jent .g .ic{width:11px;height:11px}
.a2 .pcard .jent .x{font-size:12.5px;line-height:18px}
.a2 .pcard .jent .ps{margin-top:3px}
.a2 .side #s-plan-h{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* tiles: the numbers a glance needs */
.a2 .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.a2 .tile{min-width:0}
.a2 .tile .k{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2 .tile .v{font-family:var(--font-mono);font-size:15px;color:var(--strong);font-weight:500;margin:1px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2 .tile .v small{font-size:10.5px;font-weight:400;margin-left:3px}
.a2 .tile .bar{height:3px;margin:0;position:relative;overflow:visible}
.a2 .tile .bar .tick{top:-2px;bottom:-2px}
.a2 .tile.warning .v{color:var(--warn)}
.a2 .tile.critical .v{color:var(--err)}
.a2 .tile.stale .v{color:var(--faint)}
.a2 .side .foot{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-family:var(--font-mono);font-size:11px;color:var(--faint);white-space:nowrap}
.a2 .side .foot>span{overflow:hidden;text-overflow:ellipsis}
.a2 .side .foot .ic,.a2 .gauge .val .ic,.a2 .qrow .sv .ic,.a2 .tile .v small .ic{width:11px;height:11px;vertical-align:-1px}
/* the actions: one row of equal cells, labels dropped on a narrow panel */
.a2 .side-acts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin-top:auto}
.a2 .side-acts.read-only{grid-template-columns:minmax(0,1fr)}
/* Six live actions: two rows of three, so each label fits (#691). */
.a2 .side-acts.live-only{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
.a2 .act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:8px 4px 7px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:11.5px;cursor:pointer}
.a2 .act svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.a2 .act:hover:not(:disabled){border-color:var(--faint);color:var(--strong)}
.a2 .act:hover:not(:disabled) svg{color:var(--strong)}
.a2 .act.stop:hover:not(:disabled),.a2 .act.stop:hover:not(:disabled) svg{border-color:var(--err);color:var(--err)}
.a2 .act:disabled{opacity:.4;cursor:default}
/* A toggle that is on (Autoclose, #691): accent tile, accent icon. */
.a2 .act[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--strong)}
.a2 .act[aria-pressed=true] svg{color:var(--accent)}
/* An archived session's one action: the same tile, its icon in the accent. */
.a2 .act.reopen svg{color:var(--accent)}
.a2 .side.narrow .side-acts .act{padding:9px 4px}
.a2 .side.narrow .side-acts .act span{display:none}
.a2 .kv{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin:3px 0;color:var(--muted);font-family:var(--font-chrome)}
.a2 .kv.dim{color:var(--faint)}
.a2 .kv .path{overflow-wrap:anywhere;font-family:var(--font-mono);font-size:11px}
.a2 .bar{height:6px;margin:6px 0 4px;overflow:hidden;background:var(--raised);border-radius:3px}
.a2 .bar i{display:block;height:100%;background:var(--fill);border-radius:3px}
.a2 .st{color:var(--accent)}
.a2 .st.at-error{color:var(--err)}.a2 .st.at-done{color:var(--ok)}

/* the running aegis and the latest release, in the sidebar and the top bar */
.a2 .side .ver{border-top:1px solid var(--rule);padding-top:8px;font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.a2 .side .ver>.prow{display:flex;gap:6px;align-items:center;margin:-4px -8px;padding:4px 8px}
.a2 .side .ver>.prow>span{display:flex;gap:6px;align-items:center}
.a2 .ver .v{font-family:var(--font-mono);color:var(--ink)}
.a2 .ver .kv.dim .v{color:var(--faint)}
.a2 .tag{font-size:10.5px;padding:0 6px;border-radius:4px;margin-left:6px;border:1px solid var(--comms);color:var(--comms)}
.a2 .ver .ok{color:var(--ok);margin-left:6px}
.a2 .upd{color:var(--warn);margin-left:6px}
.a2 .ver .ok .ic,.a2 .upd .ic{width:12px;height:12px;vertical-align:-2px}
.a2 .tabs .ver-top{font-family:var(--font-mono);color:var(--faint);margin-left:4px;cursor:default}

/* fleet */
.a2 .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding:18px 20px}
/* The Fleet's groups (#586, fleet.js): a stack of cards in one cell, the edges
   of two more behind the head's card in the group's colour; a click unfolds it
   across the grid in a frame of that colour. */
.a2 .stack{position:relative;margin:0 12px 12px 0;cursor:pointer}
.a2 .stack>.ghost{position:absolute;inset:0;border:1px solid var(--g);border-radius:var(--r);background:var(--surface);transition:transform .2s ease}
.a2 .stack>.g1{transform:translate(6px,6px);opacity:.75}
.a2 .stack>.g2{transform:translate(12px,12px);opacity:.45}
.a2 .stack:hover>.g1{transform:translate(8px,8px)}
.a2 .stack:hover>.g2{transform:translate(16px,16px)}
.a2 .stack.need>.ghost{border-color:var(--accent)}
.a2 .stack>.card{position:relative;border-color:var(--g);box-shadow:inset 3px 0 0 var(--g);height:100%;box-sizing:border-box}
.a2 .stack>.badge{position:absolute;top:-9px;right:-9px;z-index:2;font:600 11px var(--font-mono);background:var(--g);color:#111;border-radius:10px;padding:2px 7px}
.a2 .stack .mrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:7px;border-top:1px dashed var(--rule);color:var(--muted);font-size:11px}
.a2 .stack .mrow .ic{width:12px;height:12px}
.a2 .stack .mrow .alert{color:var(--accent)}
.a2 .gopen{grid-column:1/-1;border:1px solid var(--g);border-radius:calc(var(--r) + 4px);padding:10px 12px 14px;background:color-mix(in srgb,var(--g) 6%,transparent)}
.a2 .gopen .gh{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}
.a2 .gopen .gh b{color:var(--strong)}
.a2 .gopen .gh button{margin-left:auto;font:12px var(--font-ui);padding:4px 10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--strong);cursor:pointer}
.a2 .gopen .gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.a2 .gopen .card{box-shadow:inset 3px 0 0 var(--g)}
.a2 .gopen .card .by{margin-top:6px;color:var(--faint);font-size:10.5px;font-family:var(--font-mono)}
@media (pointer:coarse){.a2 .gopen .gh button{min-height:44px}}
.a2 .tr:focus,.a2 .cards:focus{outline:none}
.a2 .card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px 14px;font-size:12.5px;display:flex;flex-direction:column;gap:7px;cursor:pointer;min-width:0}
.a2 .card:hover{border-color:var(--faint)}
.a2 .card.working{border-color:var(--accent)}
.a2 .card.sel{outline:2px solid var(--accent);outline-offset:1px}
.a2 .card.error{border-color:var(--err)}
.a2 .card.asleep{opacity:.6}
.a2 .card.quiet{opacity:.55;border-style:dashed}
.a2 .card.quiet:hover,.a2 .card.quiet:focus-within,.a2 .card.quiet.sel{opacity:1}
.a2 .card .hd .zz{font-family:var(--font-chrome);font-size:10.5px;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:0 6px}
.a2 .card .hd .zz.pk{color:var(--comms);border-color:var(--comms)}
.a2 .card .hd .quiet{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-chrome);font-size:10.5px;color:var(--muted)}
.a2 .card .hd .quiet svg{width:12px;height:12px}
.a2 .parked-count{font-family:var(--font-chrome);font-size:11px;color:var(--comms)}
.a2 .card.finished{opacity:.5}
.a2 .card.finished:hover,.a2 .card.finished:focus-within,.a2 .card.finished.sel{opacity:1}
.a2 .card.asleep.at-error{opacity:1}
.a2 .card .hd{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.a2 .card .hd>*{white-space:nowrap}
.a2 .card .hd .badge{max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}
.a2 .card .hd .badge.wf{display:inline-flex;white-space:pre}
.a2 .card .hd .badge.wf .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.a2 .card .hd .h{font-family:var(--font-chrome);color:var(--strong);font-weight:500}
.a2 .card .hd .s{color:var(--faint);font-family:var(--font-chrome);margin-left:auto}
/* A card waiting on many sessions names them all here (#738): shrink and cut it, or it widens the Fleet past a phone. */
.a2 .card .hd .s{min-width:0;overflow:hidden;text-overflow:ellipsis}
.a2 .card .hd .btn.archive{padding:2px 9px;font-size:11.5px;font-family:var(--font-chrome);flex:none}
.a2 .card .hd .btn.archive:hover{border-color:var(--faint)}
.a2 .card .ttl{font-family:var(--font-head);color:var(--strong);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2[data-theme=ink] .card .ttl,[data-theme=ink] .a2 .card .ttl{font-family:var(--font-ui)}
.a2 .card .ln{color:var(--muted);font-family:var(--font-chrome);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .card .ln b{color:var(--faint);font-weight:500;margin-right:6px}
.a2 .card .act{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);min-height:1.4em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .card .bar.thin{height:4px;margin:0}
.a2 .card .ft{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--font-chrome);font-size:11.5px;color:var(--faint);border-top:1px solid var(--rule);padding-top:7px}
.a2 .card .ft .ctx{margin-left:auto}
.a2 .card .ft>*{white-space:nowrap}
.a2 .empty{color:var(--faint);font-size:13px;padding:6px 2px}

/* archive */
.a2 .archive{padding:4px 20px 24px}
.a2 .archive-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.a2 .archive-head h3{margin:0;font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--strong)}
.a2 .archive-head input{flex:1;max-width:420px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:6px 10px;font-size:12.5px}
.a2 .arch-more{display:flex;align-items:center;gap:14px;padding:14px 8px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.a2 .arch-more[hidden]{display:none}
.a2 .tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.a2 .tbl th{text-align:left;font-weight:500;color:var(--faint);padding:6px 8px;border-bottom:1px solid var(--rule);font-family:var(--font-chrome);font-size:11.5px}
.a2 .tbl td{padding:7px 8px;border-bottom:1px solid var(--rule);color:var(--ink)}
.a2 .tbl td.m{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.a2 .tbl tr.sel td{background:var(--accent-soft)}
.a2 #arch-list tr[data-id]{cursor:pointer}
.a2 .tbl td.acts{text-align:right;white-space:nowrap}
/* Read and Reopen as icons; Reopen's arrow in the accent, as on the side panel's tile. */
.a2 .tbl td.acts .btn{display:inline-grid;place-items:center;width:30px;height:26px;margin-left:6px;padding:0;vertical-align:middle}
.a2 .tbl td.acts .ic{vertical-align:0;color:var(--muted)}
.a2 .tbl td.acts .reopen .ic{color:var(--accent)}
.a2 .tbl td.acts .btn:hover{border-color:var(--faint)}
.a2 .tbl td.acts .btn:hover .ic{color:var(--strong)}

/* rename in place */
.a2 .editable{cursor:text;border-radius:4px}
.a2 .editable:hover{background:var(--raised)}
.a2 input.rename{width:100%;background:var(--bg);border:1px solid var(--accent);border-radius:4px;padding:2px 6px;font:inherit;color:var(--strong)}
.a2 .side .sub{color:var(--faint);font-size:12px;margin:0 0 8px}

/* files an agent sent: a card, a bar of actions, the preview below */
.a2 .row.file .g{color:var(--accent)}
.a2 .row.file .cap{font-family:var(--font-prose);font-size:var(--prose-size);color:var(--ink);margin-bottom:8px}
.a2 .fcard{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.a2 .fbar{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;background:var(--raised);font-family:var(--font-chrome)}
.a2 .fbar>.ic{color:var(--accent);font-size:15px}
.a2 .fbar .fn{color:var(--strong);font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}
.a2 .fbar .fs{color:var(--faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:3}
.a2 .fbar .acts{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.a2 .fbar .btn{padding:5px 11px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;font-family:var(--font-ui)}
.a2 .fbar .btn,.a2 .peekbar .btn{gap:5px}
.a2 .fbar .btn .ic,.a2 .peekbar .btn .ic{width:13px;height:13px}
.a2 .fbar .pager{margin-left:auto;display:flex;align-items:center;gap:4px;flex-shrink:0}
.a2 .fbar .pager+.acts{margin-left:0}
.a2 .fbar .pager .btn{padding:3px 9px;font-size:14px;line-height:1}
.a2 .fbar .count{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:center}
.a2 .fbar .native{display:none}
.a2[data-native] .fbar .native{display:inline-flex}
.a2 .peekbar{display:flex;align-items:center;gap:10px;margin:6px 0}
.a2 .peekbar .btn{display:inline-flex;align-items:center;padding:3px 10px;font-size:11.5px}
.a2 .peekerr{color:var(--err);font-size:11.5px}
.a2 .peekcap{color:var(--faint);font-size:11px;margin:4px 0}
.a2 .more .fcard{margin-bottom:8px}
.a2 .apcard[data-state=waiting]{border-color:var(--warn)}
.a2 .apcard .apkv{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 12px;margin:8px 12px;font-size:12.5px}
.a2 .apcard .apkv dt{color:var(--muted);font-family:var(--font-mono);font-size:11.5px}
.a2 .apcard .apkv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.a2 .apcard .apkv dd.pre{white-space:pre-wrap;font-family:var(--font-mono);font-size:12px}
.a2 .apcard .apbar{display:flex;gap:8px;padding:8px 12px;border-top:1px solid var(--rule)}
@media (max-width:640px){.a2 .apcard .apkv{grid-template-columns:1fr}.a2 .apcard .apkv dt{margin-top:4px}}
.a2 .apcard .aprun,.a2 .sch-wf .aprun{padding:4px 12px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.a2 .apcard .aprun b,.a2 .sch-wf .aprun b{color:var(--ink);font-weight:600}
.a2 .apcard .apchanged,.a2 .sch-wf .apchanged{color:var(--accent)}
.a2 .apcard .wflede,.a2 .sch-wf .wflede{padding:2px 12px 4px;font-family:var(--font-prose);font-size:14px}
.a2 .apcard .apsteps,.a2 .sch-wf .apsteps{margin:2px 12px 8px;padding-left:20px;font-size:13px}
.a2 .apcard .apsteps li,.a2 .sch-wf .apsteps li{overflow-wrap:anywhere;padding:1px 0}
.a2 .apcard>.edit,.a2 .sch-wf>.edit{padding:2px 12px 8px}
.a2 .apcard .apcmds,.a2 .sch-wf .apcmds{margin:2px 12px 8px;font-size:12.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.a2 .apcard>.runs,.a2 .sch-wf>.runs{display:block;padding:2px 12px;font-size:12.5px;color:var(--muted)}
.a2 .wfcard .wfwho{padding:6px 12px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere;border-bottom:1px solid var(--rule)}
.a2 .wfcard .wfargs{margin:0;padding:6px 12px;font-size:12.5px;border-bottom:1px solid var(--rule)}
.a2 .wfcard .wfarg{min-width:0}
.a2 .wfcard .wfarg.inline,.a2 .wfcard .wfarg>summary{display:flex;gap:10px;align-items:baseline;padding:2px 0;min-width:0}
.a2 .wfcard .wfarg>summary{cursor:pointer;list-style:none}
.a2 .wfcard .wfarg>summary::-webkit-details-marker{display:none}
.a2 .wfcard .wfarg>summary>svg{color:var(--muted);width:12px;height:12px;flex:none;align-self:center}
.a2 .wfcard .wfarg.inline::before{content:"";width:12px;flex:none}
.a2 .wfcard .wfarg .k{color:var(--muted);font-family:var(--font-mono);font-size:11.5px;flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .wfcard .wfarg .v{min-width:0;overflow-wrap:anywhere}
.a2 .wfcard .wfarg>summary .v{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.a2 .wfcard .wfarg>.text{white-space:pre-wrap;overflow-wrap:anywhere;margin:2px 0 8px 18px;max-height:24em;overflow:auto}
.a2 .wfcard .wfarg>.md .fence{margin:2px 0 8px 18px}
.a2 .wfcard .wfarg>.md .fence pre{max-height:24em;overflow:auto}
.a2 .wfcard[data-status=armed]{border-color:var(--warn)}
.a2 .wfcard .wflede{padding:8px 12px;font-family:var(--font-prose);font-size:14.5px;border-bottom:1px solid var(--rule)}
.a2 .wfcard .story{padding:8px 12px;border-bottom:1px solid var(--rule);font-size:13px}
.a2 .wfcard .story .line{display:flex;gap:8px;padding:2px 0}
.a2 .wfcard .story .tm{font-family:var(--font-mono);font-size:11px;color:var(--faint);flex:none;width:38px}
.a2 .wfcard .story [data-mark=ok] .mk{color:var(--ok)}
.a2 .wfcard .story [data-mark=bad] .mk{color:var(--err)}
.a2 .wfcard .wftree{padding:4px 0 8px}
.a2 .wfcard .wfrow{display:flex;gap:8px;align-items:flex-start;padding:5px 12px}
.a2 .wfcard .wfrow .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px;border:1.5px solid var(--faint)}
.a2 .wfcard .wfrow[data-state=done] .dot{background:var(--ok);border-color:var(--ok)}
.a2 .wfcard .wfrow[data-state=running] .dot{background:var(--accent);border-color:var(--accent)}
.a2 .wfcard .wfrow[data-state=failed] .dot{background:var(--err);border-color:var(--err)}
.a2 .wfcard .wfrow[data-state=stopped] .dot{border-color:var(--err)}
.a2 .wfcard .wfrow[data-state=queued] .dot{border-style:dashed;border-color:var(--accent)}
.a2 .wfcard .wfrow.each{opacity:.6}
.a2 .wfcard .tags .after{border:1px dashed var(--faint);border-radius:3px;padding:0 4px}
.a2 .wfcard .tags .after.met{border-style:solid;border-color:var(--ok);color:var(--ok)}
.a2 .wfcard .wfb{flex:1;min-width:0}
.a2 .wfcard .say{font-size:13.5px}
.a2 .wfcard .tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-family:var(--font-mono);font-size:10.5px;color:var(--faint)}
.a2 .wfcard .tog{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer}
.a2 .wfcard pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11.5px;margin:6px 0 0}
.a2 .wfcard .out{margin-top:3px;padding-left:8px;border-left:2px solid var(--ok);font-size:12.5px}
.a2 .wfcard .out.bad{border-left-color:var(--err)}
.a2 .wfcard .apbar{display:flex;gap:8px;padding:8px 12px;border-top:1px solid var(--rule)}
.a2 .wfcard .dur{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);flex:none;padding-top:3px}
.a2 .wfcard pre.cmd{color:var(--strong);background:var(--chrome);border:1px solid var(--rule);border-radius:4px;padding:3px 6px}
.a2 .wfcard .wfrow[data-state=skipped]{opacity:.45}
.a2 .wfcard .wfrow[data-state=skipped] .dot{border-style:dotted}
.a2 .wfcard .apbar{flex-wrap:wrap}
.a2 .wfcard .apbar .runs{flex-basis:100%;font-size:12.5px;color:var(--muted)}
@media (pointer:coarse){.a2 .wfcard .tog{min-height:44px}}
.a2 .wfcard .wfopen{padding:6px 12px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--rule)}
.a2 .wfcard .wfopen.you{color:var(--warn)}
.a2 .wfcard .story [data-mark=ask] .mk{color:var(--warn)}
.a2 .wfcard .story [data-mark=note]{color:var(--muted)}
.a2 .wfcard .story .line.folded{color:var(--muted)}
.a2 .wfcard .story .line.folded .fold{flex:none;margin-left:auto}
.a2 .wfcard .tags .held{color:var(--warn)}
.a2 .wfcard .wfhead{padding:6px 12px 8px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.a2 .wfcard .wfhead .bar{height:4px;background:var(--raised);border-radius:2px;margin-top:5px;overflow:hidden}
.a2 .wfcard .wfhead .bar i{display:block;height:100%;background:var(--ok)}
.a2 .wfcard .wfhead .eta{display:block;margin-top:5px}
.a2 .wfcard .wfnow{padding:6px 12px;border-bottom:1px solid var(--rule)}
.a2 .wfcard .wfnow h5{margin:0 0 4px;font:500 10.5px var(--font-mono);color:var(--faint)}
.a2 .wfcard .nowline{display:flex;gap:8px;align-items:baseline;padding:2px 0;font-size:12.5px;min-width:0}
.a2 .wfcard .nowline .say{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12.5px}
.a2 .wfcard .nowline .w{font-family:var(--font-mono);font-size:10.5px;color:var(--comms);overflow-wrap:anywhere;max-width:40%}
.a2 .wfcard .nowline .dot{width:8px;height:8px;border-radius:50%;flex:none;border:1.5px solid var(--faint)}
.a2 .wfcard .nowline .dot.running{background:var(--accent);border-color:var(--accent)}
.a2 .wfcard .nowline .dot.queued{border-style:dashed;border-color:var(--accent)}
.a2 .wfcard .nowline .dur{padding-top:0}
.a2 .wfcard .nowline{flex-wrap:wrap}
.a2 .wfcard .nowline .pct{font-family:var(--font-mono);font-size:10.5px;color:var(--strong)}
.a2 .wfcard .nowline .bar{flex-basis:100%;height:4px;margin:2px 0 4px 16px;--fill:var(--ok)}
.a2 .wfcard .wfrow .out .bar{height:4px;margin:4px 0 0;max-width:240px;--fill:var(--ok)}
.a2 .wfcard a.who{color:var(--comms);text-decoration:underline}
.a2 .wfcard .tags .see{background:none;border:1px solid var(--accent-soft);border-radius:3px;padding:0 4px;font:inherit;color:var(--accent);cursor:pointer;overflow-wrap:anywhere;text-align:left}
.a2 .wfcard .tags .see.bad{color:var(--err)}
@media (pointer:coarse){.a2 .wfcard .tags .see{min-height:44px}}
@media (pointer:coarse){.a2 .wfcard a.who{min-height:44px;display:inline-flex;align-items:center}}
.a2 .wfcard .fold{background:none;border:0;padding:0;font:11px var(--font-mono);color:var(--accent);cursor:pointer}
@media (pointer:coarse){.a2 .wfcard .fold{min-height:44px}}
.a2 .wfdcard[data-state=waiting]{border-color:var(--warn)}
.a2 .wfdcard>.gate,.a2 .wfdcard>.edit,.a2 .wfdcard>.again,.a2 .wfcard>.edit{padding:8px 12px}
.a2 .wfcard>.edit{border-top:1px solid var(--rule)}
.a2 .wfcard .wfb .gate{margin-top:6px}
.a2 .wfdcard pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11.5px;margin:6px 0 0}
.a2 .wfdcard pre.cmd{color:var(--strong);background:var(--chrome);border:1px solid var(--rule);border-radius:4px;padding:3px 6px}
.a2 .wfdcard .out{margin-top:6px;padding-left:8px;border-left:2px solid var(--ok);font-size:12.5px}
.a2 .wfdcard .out.bad{border-left-color:var(--err)}
.a2 .gate .q,.a2 .again .q{font-family:var(--font-prose);font-size:14.5px;overflow-wrap:anywhere}
.a2 .gate textarea{display:block;box-sizing:border-box;width:100%;margin-top:8px;padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r);background:var(--chrome);resize:vertical}
.a2 .gate .btns,.a2 .edit .btns,.a2 .again .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.a2 .edit .d{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:2px 0;font-size:13px;min-width:0}
.a2 .edit .d .op{font-family:var(--font-mono);flex:none;width:12px;text-align:center}
.a2 .edit .d .w{min-width:0;overflow-wrap:anywhere}
.a2 .edit .d.add .op{color:var(--ok)}
.a2 .edit .d.remove .op{color:var(--err)}
.a2 .edit .d.remove .w{text-decoration:line-through;color:var(--muted)}
.a2 .edit .d.change .op,.a2 .edit .d.move .op{color:var(--accent)}
.a2 .edit .d .f{font-family:var(--font-mono);font-size:10.5px;color:var(--faint)}
.a2 .edit .d pre.cmd{flex-basis:100%;margin:2px 0 0 20px}
.a2 .edit .runs{margin-top:6px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
@media (pointer:coarse){.a2 .gate .btn,.a2 .edit .btn,.a2 .again .btn{min-height:44px}}
/* A secret's card (entries.js fillSecret, fillRequest): the value only ever in this DOM. */
.a2 .scard .fbar{flex-wrap:wrap}
.a2 .scard .sbody{border-top:1px solid var(--rule);background:var(--bg);padding:10px 12px;font-size:13px}
.a2 .scard .sbody.val{font-family:var(--font-mono);font-size:14px;color:var(--strong);overflow-wrap:anywhere}
.a2 .scard .sbody.dim{color:var(--muted);font-size:12.5px}
.a2 .scard .prompt{color:var(--ink);overflow-wrap:anywhere}
.a2 .scard .hint{display:block;margin-top:6px;font-family:var(--font-ui);font-size:11.5px;color:var(--faint)}
.a2 .scard .hint.err{color:var(--err)}
.a2 .scard .sform{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.a2 .scard .sform input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:6px 9px;font-family:var(--font-mono);font-size:12px;color:var(--strong)}
.a2 .scard .sform input:focus{outline:none;border-color:var(--accent)}
.a2 .scard.gone .fbar>.ic,.a2 .scard.gone .fn{color:var(--muted)}
.a2 .lcard .steps{margin:0 0 4px;padding-left:20px;color:var(--ink)}
.a2 .lcard .steps li{margin:2px 0}
.a2 .ccard .cdiff{margin:0;border-top:1px solid var(--rule);background:var(--bg);padding:8px 12px;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
.a2 .ccard .cdiff .add{color:var(--ok)}
.a2 .ccard .cdiff .del{color:var(--err)}
.a2 .ccard .cdiff .at,.a2 .ccard .cdiff .h{color:var(--faint)}
.a2 .ccard .sbody.why{color:var(--ink)}
.a2 .kcard .kbody{color:var(--ink);max-height:240px}
.a2 .kcard .krow{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--rule);background:var(--bg);font-size:13px}
.a2 .kcard .krow .kwhat{flex:1;min-width:0;overflow-wrap:anywhere}
@media (pointer:coarse){.a2 .scard .btn,.a2 .scard .sform input{min-height:44px}}
.a2 .fcard .stage{border-top:1px solid var(--rule);background:var(--bg)}
.a2 .fcard .stage.image{display:flex;justify-content:center;padding:12px}
.a2 .fcard .stage img{max-width:100%;max-height:360px;border-radius:4px;cursor:zoom-in}
.a2 .fcard .stage iframe{display:block;width:100%;height:480px;border:0;background:#fff}
.a2 .fcard .stage .excerpt{margin:0;padding:10px 12px;max-height:360px;overflow:auto}
.a2 .fcard .stage pre.excerpt{font-family:var(--font-mono);font-size:12px;line-height:1.45;white-space:pre;color:var(--ink)}
.a2 .fcard .stage video{display:block;max-width:100%;max-height:360px;margin:0 auto}
.a2 .fcard .stage audio{display:block;width:100%;padding:8px}
.a2 .acard .stage iframe{height:240px;background:var(--bg)}
/* Phone width: the frame at a phone's viewport, centred on the fill; a screen
   already that narrow has nothing to preview, so the button goes. */
.a2 .stage.phone{display:flex;justify-content:center;background:var(--fill)}
.a2 .stage.phone>iframe[data-artifact]{width:390px;max-width:100%;flex:none;border-inline:1px solid var(--rule)}
.a2 .btn.phone[aria-pressed=true]{color:var(--accent);background:var(--accent-soft)}
@media (max-width:480px){.a2 .btn.phone{display:none}}
.a2 .acard .done{padding:10px 12px;color:var(--muted);font-family:var(--font-chrome);font-size:12.5px;border-top:1px solid var(--rule)}
.a2 :is(.acard,.docked,.viewer) .refused{padding:8px 12px;color:var(--err);background:var(--err-bg);font-family:var(--font-chrome);font-size:12.5px;border-top:1px solid var(--rule);overflow-wrap:anywhere}
.a2 .acard[data-status=submitted] .fbar>.ic{color:var(--ok)}
.a2 .fbar .btn.icon{padding:5px 7px}
.a2 .fcard>.held{padding:10px 12px;color:var(--faint);font-family:var(--font-chrome);font-size:12.5px;border-top:1px solid var(--rule)}
.a2 .fcard>.held .locate{background:none;border:none;padding:0;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer}
.a2 .fcard>.held .locate:hover{color:var(--accent)}
/* The viewer (js/viewer.js): a file or a page over the session's column. What it covers is hidden, so neither the eye nor Tab reaches it. */
.a2 .viewer{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;background:var(--bg);min-width:0}
.a2 .viewer[hidden]{display:none}
.a2 .col.viewing>:not(.viewer){visibility:hidden}
.a2 .viewer .vbar{border-bottom:1px solid var(--rule);flex:none}
.a2 .viewer .vbar .acts{margin-left:auto}
.a2 .viewer .vbar .pager+.acts{margin-left:0}
.a2 .viewer .vbar .vclose{margin-left:6px}
.a2 .viewer .vbody{flex:1;min-height:0;overflow:auto;outline:none}
.a2 :is(.viewer,.docked) .vnote{padding:18px 22px;color:var(--muted);font-family:var(--font-chrome);font-size:12.5px}
.a2 :is(.viewer,.docked) .vnote a{color:var(--accent)}
.a2 :is(.viewer,.docked) .stage{height:100%;box-sizing:border-box}
.a2 :is(.viewer,.docked) .stage iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.a2 :is(.viewer,.docked) .stage iframe[data-artifact]{background:var(--bg)}
.a2 :is(.viewer,.docked) .stage.image,.a2 :is(.viewer,.docked) .stage.video{display:flex;align-items:center;justify-content:center;padding:16px}
.a2 :is(.viewer,.docked) .stage img,.a2 :is(.viewer,.docked) .stage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.a2 :is(.viewer,.docked) .stage.audio{height:auto;padding:40px 22px}
.a2 :is(.viewer,.docked) .stage audio{display:block;width:min(640px,100%);margin:0 auto}
.a2 :is(.viewer,.docked) .doc{max-width:780px;margin:0 auto;padding:24px 28px 56px;font-family:var(--font-prose);font-size:var(--prose-size);line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.a2 :is(.viewer,.docked) .doc h1{font-size:1.6em}.a2 :is(.viewer,.docked) .doc h2{font-size:1.3em}.a2 :is(.viewer,.docked) .doc h3{font-size:1.12em}
.a2 :is(.viewer,.docked) .doc img{max-width:100%}
.a2 :is(.viewer,.docked) .code{display:flex;min-width:max-content;min-height:100%;box-sizing:border-box;font-family:var(--font-mono);font-size:12.5px;line-height:1.55}
.a2 :is(.viewer,.docked) .code pre{margin:0;padding:14px 0 40px;white-space:pre}
.a2 :is(.viewer,.docked) .code .ln{position:sticky;left:0;padding:14px 12px 40px 16px;text-align:right;color:var(--faint);background:var(--bg);border-right:1px solid var(--rule);user-select:none}
.a2 :is(.viewer,.docked) .code .src{padding-left:14px;padding-right:24px;color:var(--ink)}
.a2 :is(.viewer,.docked) .code code{font-size:inherit;background:none;padding:0;border-radius:0}
/* The canvas (js/canvas.js): the session's column and its docked panes, each
   placed in percent of the canvas. With nothing docked the column fills it,
   and the session view is what it always was. */
.a2 .canvas{position:relative;min-width:0;min-height:0}
.a2 .canvas>.pane{position:absolute;inset:0;box-sizing:border-box;min-width:0;min-height:0}
.a2 .canvas>.pane.lx{border-left:1px solid var(--rule)}
.a2 .canvas>.pane.ty{border-top:1px solid var(--rule)}
.a2 .canvas>.pane.docked{display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.a2 .canvas>.pane>.pbar{display:flex;width:auto;height:auto;gap:10px;flex:none;border-bottom:1px solid var(--rule)}
.a2 .canvas>.pane>.pbar .acts{margin-left:auto}
/* A pane under 300 px keeps its name and ×: open and download stay on the
   item's card in the transcript. */
.a2 .canvas>.pane.docked{container:pane/inline-size}
@container pane (max-width:300px){.a2 .canvas>.pane>.pbar .acts>:not(.undock){display:none}}
.a2 .canvas>.pane>.pbar .ver{color:var(--faint);font-family:var(--font-chrome);font-size:12px;white-space:nowrap}
.a2 .canvas>.pane>.pbody{flex:1;min-height:0;overflow:auto;outline:none}
/* A refused submit's note, under a frame that fills the body: kept in view,
   in a pane and in the viewer. */
.a2 .canvas>.pane>.pbody>.refused,.a2 .viewer .vbody>.refused{position:sticky;bottom:0}
.a2 .canvas>.pane.flash{outline:2px solid var(--accent);outline-offset:-2px}
/* The person's handles: a pane's bar is what drags it, the transcript's is a
   thin strip over its top edge, and the grips sit on the boundaries. While
   something is dragged, frames take no pointer, or they would swallow it. */
.a2 .canvas[data-writable]>.pane>.pbar{cursor:grab;touch-action:none}
.a2 .canvas[data-writable]>.pane>.pbar .btn{cursor:pointer}
.a2 .canvas:not([data-writable]) .undock,.a2 .canvas:not([data-writable]) .move{display:none}
/* a phone has one window: no Move to window */
.a2 .canvas[data-merged] .move{display:none}
/* window 1's chips, one per other window, in a row over the canvas */
.a2 .canvas{--wchips-h:34px}
.a2 .canvas[data-chips]{margin-top:var(--wchips-h)}
.a2 .canvas>.wchips{position:absolute;left:0;right:0;top:calc(-1 * var(--wchips-h));height:var(--wchips-h);box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule);background:var(--bg);font:11.5px var(--font-chrome);color:var(--muted)}
.a2 .canvas>.wchips::-webkit-scrollbar{display:none}
.a2 .canvas>.wchips .wchip{flex:none;border:1px solid var(--rule);border-radius:999px;padding:2px 10px;white-space:nowrap}
.a2 .canvas>.wchips .btn.link{display:inline;width:auto;height:auto;background:none;border:none;padding:0;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer}
.a2 .canvas>.wchips .btn.link:hover{color:var(--accent)}
.a2 .canvas>.pbar.tr-handle{position:absolute;display:block;width:auto;height:7px;gap:0;z-index:8;cursor:grab;touch-action:none;background:var(--rule);opacity:.5}
.a2 .canvas>.pbar.tr-handle:hover{background:var(--accent);opacity:1}
.a2 .canvas>.col.viewing~.pbar.tr-handle{display:none}
.a2 .canvas.dragging,.a2 .canvas.dragging *{cursor:grabbing;user-select:none}
.a2 .canvas.dragging iframe{pointer-events:none}
.a2 .canvas>.droptarget{position:absolute;z-index:9;box-sizing:border-box;background:var(--accent-soft);border:2px solid var(--accent);border-radius:var(--r);pointer-events:none}
.a2 .canvas>.cgrip{position:absolute;z-index:8;touch-action:none}
.a2 .canvas>.cgrip.x{top:0;bottom:0;width:9px;margin-left:-4px;cursor:col-resize}
/* A row grip sits wholly above its boundary: the bar below it is the pane's
   handle, and a press on the bar's top edge must drag, not resize. */
.a2 .canvas>.cgrip.y{height:6px;margin-top:-6px;cursor:row-resize}
.a2 .canvas>.cgrip:after{content:"";position:absolute;transition:background .12s}
.a2 .canvas>.cgrip.x:after{left:4px;top:0;bottom:0;width:1px}
.a2 .canvas>.cgrip.y:after{top:5px;left:0;right:0;height:1px}
.a2 .canvas>.cgrip:hover:after,.a2 .canvas>.cgrip.on:after{background:var(--accent)}
.a2 .canvas>.cgrip.x:hover:after{left:3px;width:2px}
.a2 .canvas>.cgrip.y:hover:after{top:4px;height:2px}
/* Tabs (a phone, or columns under their minimums): a strip over one pane at a
   time. The others are hidden, not removed, so their pages keep running; the
   transcript's pane fills the canvas under every tab, and its composer stays
   in view at the foot whichever tab is open. */
.a2 .canvas{--ptabs-h:36px}
.a2 .canvas[data-mode=tabs]>.pane:not(.on){visibility:hidden}
.a2 .canvas[data-mode=tabs]>#tr-pane:not(.on) .composer{visibility:visible}
.a2 .canvas>.ptabs{position:absolute;top:0;left:0;right:0;height:var(--ptabs-h);box-sizing:border-box;display:flex;gap:2px;padding:0 6px;overflow-x:auto;scrollbar-width:none;background:var(--surface);border-bottom:1px solid var(--rule);font-family:var(--font-chrome);z-index:8}
.a2 .canvas>.ptabs::-webkit-scrollbar{display:none}
.a2 .canvas>.ptabs button{position:relative;display:block;flex:none;width:auto;height:auto;max-width:18ch;border-radius:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 12px;background:none;border:none;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.a2 .canvas>.ptabs button.on{background:var(--bg);color:var(--strong);box-shadow:inset 0 -2px 0 var(--accent)}
.a2 .canvas>.ptabs button.dot:after{content:"";position:absolute;top:7px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (pointer:coarse){.a2 .canvas{--ptabs-h:44px}}
.a2 .md code.ref{color:var(--accent);cursor:pointer;border-style:dashed}
.a2 .md code.ref:hover{border-style:solid}
.a2 .md code .ic,.a2 .md a.web .ic{width:1em;height:1em;vertical-align:-.14em;margin-right:.3em;opacity:.75}
.a2 .md code.ref[data-kind=dir]{color:var(--strong);border-style:solid;cursor:default}
.a2 .md code.ref[data-kind=missing]{color:var(--err);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--err) 50%,transparent)}
.a2 .md code.ref[data-kind=missing] .ic{opacity:1}
.a2 .md a.repo{text-decoration:none}
.a2 .md a.repo code{color:var(--accent)}
.a2 .md a.repo:hover code{border-color:var(--accent)}
.a2 .md a.web.auto{font-family:var(--font-mono);font-size:.86em}
@media (max-width:640px){.a2 .md code.ref,.a2 .md a.repo code{display:inline-block;max-width:100%;overflow-wrap:anywhere}}
.a2 .row .patherr{font:12px var(--font-ui);color:var(--err);margin-top:4px}
.a2 .row .patherr .btn{margin:6px 6px 0 0}
.a2 #viewer .code{position:relative}
.a2 #viewer .code .mark{position:absolute;left:0;right:0;background:var(--accent-soft);border-left:2px solid var(--accent);pointer-events:none}
@media (max-width:760px){.a2 .viewer .vbar .fs{display:none}}
/* highlight.js's classes, coloured from the theme so every theme reads its own way. */
.a2 .hljs-comment,.a2 .hljs-quote{color:var(--h-com);font-style:italic}
.a2 .hljs-keyword,.a2 .hljs-selector-tag,.a2 .hljs-literal,.a2 .hljs-name,.a2 .hljs-meta .hljs-keyword{color:var(--h-kw)}
.a2 .hljs-string,.a2 .hljs-regexp,.a2 .hljs-doctag,.a2 .hljs-meta .hljs-string{color:var(--h-str)}
.a2 .hljs-number,.a2 .hljs-symbol,.a2 .hljs-bullet{color:var(--h-num)}
.a2 .hljs-title,.a2 .hljs-section,.a2 .hljs-title.function_{color:var(--h-fn)}
.a2 .hljs-type,.a2 .hljs-title.class_,.a2 .hljs-built_in,.a2 .hljs-selector-class,.a2 .hljs-selector-id{color:var(--h-type)}
.a2 .hljs-attr,.a2 .hljs-attribute,.a2 .hljs-property,.a2 .hljs-variable,.a2 .hljs-template-variable,.a2 .hljs-params{color:var(--h-var)}
.a2 .hljs-meta,.a2 .hljs-subst,.a2 .hljs-punctuation,.a2 .hljs-tag{color:var(--h-meta)}
.a2 .hljs-addition{color:var(--ok)}.a2 .hljs-deletion{color:var(--err)}
.a2 .hljs-emphasis{font-style:italic}.a2 .hljs-strong{font-weight:600}
.a2 code,.a2 pre,.a2 .diff,.a2 .lines{font-variant-ligatures:none}
#probes{position:fixed;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* inbox rows, monitors, workers */
.a2 .row.inbox .g{color:var(--comms)}
.a2 .row.inbox .body{border-left:2px solid var(--comms);padding:2px 0 2px 12px}
.a2 .row.inbox .from{font-family:var(--font-mono);font-size:11.5px;color:var(--comms);margin-bottom:4px}
.a2 .row.inbox .from .steered{display:inline-block;margin-left:8px;font-size:10.5px;color:var(--accent);border:1px solid var(--rule);border-radius:999px;padding:0 7px}
.a2 .row.inbox .md{font-size:14px;color:var(--ink)}
.a2 .row.inbox.err .g,.a2 .row.inbox.err .from{color:var(--err)}
.a2 .row.inbox.err .body{border-left-color:var(--err)}
.a2 .row.inbox details>summary{cursor:pointer;font-family:var(--font-mono);font-size:11.5px;color:var(--faint);margin-top:4px}
.a2 .row.inbox .outfile{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);margin-top:4px;overflow-wrap:anywhere}
.a2 .mon .kv>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a monitor's row: ETA on the right, a broken check in red; its card opens on hover (js/monitors.js) */
.a2 .mon{margin:0 -8px 4px;padding:4px 8px 6px;border-radius:var(--r);cursor:default;outline:none}
.a2 .mon:hover,.a2 .mon.open,.a2 .mon:focus-visible{background:var(--raised)}
.a2 .mon .kv .r{white-space:nowrap;color:var(--muted)}
.a2 .mon .kv .r .eta{color:var(--faint)}
.a2 .mon.bad .kv .r{color:var(--err)}
/* a session this one waits on (app.js drawWaiting): a click opens it */
.a2 .kv.wait>span:first-child{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .kv.wait .r{white-space:nowrap}
.a2 .kv.wait.go{margin:0 -8px;padding:3px 8px;border-radius:var(--r);cursor:pointer;outline:none}
.a2 .kv.wait.go:hover,.a2 .kv.wait.go:focus-visible{background:var(--raised)}
.a2 .mon.late .kv .r .eta{color:var(--warn)}
.a2 .mon.bad .bar i{background:var(--err)}

/* the card: fixed, to the left of the sidebar, level with its row */
.a2 .mcard{position:fixed;z-index:20;width:392px;max-height:calc(100vh - 24px);overflow:auto;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:0 18px 48px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.2);
  font-family:var(--font-chrome);font-size:12px;color:var(--muted);
  opacity:0;transform:translateX(6px);transition:opacity .12s ease,transform .12s ease;pointer-events:none}
.a2 .mcard.show{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.a2 .mcard{transition:none}}

.a2 .mcard .hd{padding:13px 16px 10px;border-bottom:1px solid var(--rule)}
.a2 .mcard .hd .t{display:flex;gap:10px;align-items:flex-start}
.a2 .mcard .hd .d{flex:1;color:var(--strong);font-family:var(--font-ui);font-size:13.5px;font-weight:500;line-height:1.35}
.a2 .mcard .pill{flex:none;font-size:10.5px;padding:2px 8px;border-radius:9px;background:var(--accent-soft);color:var(--accent);margin-top:1px}
.a2 .mcard .pill.bad{background:var(--err-bg);color:var(--err)}
.a2 .mcard .pill.late{background:transparent;border:1px solid var(--warn);color:var(--warn);padding:1px 7px}
.a2 .mcard .pill::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px;animation:a2pulse 1.6s ease-in-out infinite}
.a2 .mcard .sub{margin-top:5px;color:var(--faint);font-family:var(--font-mono);font-size:11px}

/* the headline: percentage and ETA */
.a2 .mcard .now{padding:12px 16px 4px}
.a2 .mcard .big{display:flex;align-items:baseline;gap:10px}
.a2 .mcard .big .p{font-family:var(--font-mono);font-size:26px;color:var(--strong);font-weight:500;letter-spacing:-.5px;line-height:1}
.a2 .mcard .big .p small{font-size:14px;color:var(--muted);margin-left:1px}
.a2 .mcard .big .p.unk{font-size:15px;color:var(--muted);letter-spacing:0;font-family:var(--font-chrome)}
.a2 .mcard .big .e{margin-left:auto;text-align:right;line-height:1.3}
.a2 .mcard .big .e .at{color:var(--strong);font-family:var(--font-mono);font-size:13px}
.a2 .mcard .big .e .in{color:var(--faint);font-size:11px}
.a2 .mcard .big .e.late .at{color:var(--warn)}
.a2 .mcard .big .e.none .at{color:var(--muted);font-family:var(--font-chrome);font-size:12px}

/* the reading chart */
.a2 .mcard .chart{position:relative;margin:10px 0 2px}
.a2 .mcard .chart svg{display:block;width:100%;height:78px;overflow:visible}
.a2 .mcard .chart .grid{stroke:var(--rule);stroke-width:1}
.a2 .mcard .chart .area{fill:var(--accent-soft)}
.a2 .mcard .chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.a2 .mcard .chart .proj{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:3 4;opacity:.55}
.a2 .mcard .chart .dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.a2 .mcard .chart .nowl{stroke:var(--faint);stroke-width:1;stroke-dasharray:2 3}
.a2 .mcard .chart .tgt{fill:none;stroke:var(--accent);stroke-width:2;opacity:.55}
.a2 .mcard .chart .hx{stroke:var(--muted);stroke-width:1}
.a2 .mcard .chart .ax{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;color:var(--faint);margin-top:5px}
.a2 .mcard .chart .tip{position:absolute;top:-6px;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;
  background:var(--raised);border:1px solid var(--rule);border-radius:5px;padding:3px 7px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink)}
.a2 .mcard .chart .basis{font-size:10.5px;color:var(--faint);margin-top:4px}

/* time budget, for monitors with nothing to chart */
.a2 .mcard .budget{margin:12px 0 4px}
.a2 .mcard .budget .track{position:relative;height:6px;border-radius:3px;background:var(--raised)}
.a2 .mcard .budget .track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--faint);opacity:.6}
.a2 .mcard .budget .ax{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;color:var(--faint);margin-top:5px}

/* facts */
.a2 .mcard .facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:10px 16px 12px}
.a2 .mcard .facts dt{color:var(--faint)}
.a2 .mcard .facts dd{margin:0;color:var(--ink);font-family:var(--font-mono);font-size:11.5px;text-align:right}
.a2 .mcard .facts dd span{color:var(--faint)}

/* checks */
.a2 .mcard .checks{border-top:1px solid var(--rule);padding:10px 16px 12px}
.a2 .mcard h5{margin:0 0 8px;font-weight:500;font-size:11px;color:var(--faint);font-family:var(--font-head);text-transform:none}
.a2 .mcard .ck{margin-bottom:10px}
.a2 .mcard .ck:last-child{margin-bottom:0}
.a2 .mcard .ck .h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.a2 .mcard .ck .k{font-family:var(--font-mono);font-size:11px;color:var(--ink);min-width:58px}
.a2 .mcard .ck .res{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.a2 .mcard .ck .res b{font-weight:500;color:var(--ink)}
.a2 .mcard .ck .ago{margin-left:auto;font-size:10.5px;color:var(--faint);white-space:nowrap}
.a2 .mcard .ck.bad .res,.a2 .mcard .ck.bad .res b{color:var(--err)}
.a2 .mcard .ck.off .k,.a2 .mcard .ck.off .res{color:var(--faint)}
.a2 .mcard .ck pre{margin:0;padding:7px 9px;border-radius:5px;background:var(--bg);border:1px solid var(--rule);
  font-family:var(--font-mono);font-size:10.5px;line-height:1.5;color:var(--muted);white-space:pre-wrap;word-break:break-all;
  max-height:4.6em;overflow:hidden;position:relative;cursor:text;user-select:text}
.a2 .mcard .ck pre.x{max-height:none}
.a2 .mcard .ck pre:not(.x)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.6em;background:linear-gradient(transparent,var(--bg))}
.a2 .mcard .ck .err{margin-top:4px;padding:5px 9px;border-radius:5px;background:var(--raised);color:var(--muted);font-family:var(--font-mono);font-size:10.5px;white-space:pre-wrap;word-break:break-all}

.a2 .mcard .ck.bad .err{background:var(--err-bg);color:var(--err)}
.a2 .mcard .ft{border-top:1px solid var(--rule);padding:8px 16px 10px;display:flex;gap:8px;align-items:center;color:var(--faint);font-size:11px}
.a2 .mcard .ft .path{font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .mcard .ft .hint{margin-left:auto;white-space:nowrap}
.a2 .bar.indet i{width:30%;animation:a2slide 1.6s ease-in-out infinite}
@keyframes a2slide{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.a2 .bar.indet i{width:100%;animation:a2pulse 1.6s ease-in-out infinite}}
.a2 .badge{font-size:10.5px;padding:1px 7px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-family:var(--font-chrome)}
.a2 .card .ft .mons{color:var(--accent)}
.a2 .row.tool.comms .tn,.a2 .row.tool .g.comms{color:var(--comms)}

/* gauges: the Fleet band and the sidebar's Quota section (js/gauges.js).
   Quota bars are --ok when calm, never --fill: in Ink --fill and --warn are
   the same amber, so a calm bar would read as a warning. */
.a2 .band{display:grid;grid-template-columns:minmax(170px,.55fr) 1fr 1.35fr;gap:28px;padding:16px 20px 14px;border-bottom:1px solid var(--rule);background:var(--side)}
/* This server's band carries the Gorgoneion in its left margin (#348); a
   linked server's copy of the band does not. */
.a2 #band{position:relative;padding-left:84px}
.a2 #band .band-mark{position:absolute;left:20px;top:50%;translate:0 -50%;display:flex}
.a2 #band .gorgon{width:44px;height:44px;--bg:var(--side)}
.a2 .band h5{margin:0 0 8px;font-size:12px;font-weight:500;color:var(--faint);font-family:var(--font-head);display:flex;justify-content:space-between;gap:8px}
.a2 .band h5 .age{font-weight:400;font-family:var(--font-chrome);font-size:11px}
.a2 .band .counts{display:grid;gap:5px;font-size:12.5px;font-family:var(--font-chrome);color:var(--muted)}
.a2 .band .counts div{display:flex;align-items:center;gap:8px}
.a2 .band .counts b{color:var(--strong);font-weight:600;min-width:1.6ch;text-align:right}
.a2 .band .prov{font-size:11px;color:var(--faint);font-family:var(--font-chrome);margin:8px 0 2px}
.a2 .band .prov:first-child{margin-top:0}
@media (max-width:1100px){.a2 .band{grid-template-columns:1fr 1fr}.a2 .band>.q{grid-column:1/-1}}
.a2 .gauge{display:grid;grid-template-columns:70px minmax(60px,1fr) 150px;gap:10px;align-items:center;font-size:12px;font-family:var(--font-chrome);color:var(--muted);margin:4px 0}
.a2 .gauge>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .gauge .bar{margin:0;position:relative}
.a2 .gauge .val{display:flex;gap:8px;justify-content:flex-end;white-space:nowrap}
.a2 .gauge .val b{font-weight:500;color:var(--ink)}
.a2 .gauge .val .rst{color:var(--faint)}
.a2 .gauge .note{grid-column:2/-1;color:var(--warn)}
/* the network rows: a value with no bar, across the bar's column and the value's */
.a2 .gauge.net .val{grid-column:2/-1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.a2 .gauge.net.stale .val b{color:var(--muted)}
.a2 .gauge.net.measure{cursor:pointer}
.a2 .gauge.net.measure:hover .val b{color:var(--strong);text-decoration:underline dotted}
.a2 .bar.q i{background:var(--ok)}
.a2 .bar.h i{background:var(--muted)}
.a2 .bar.warning i{background:var(--warn)}
.a2 .bar.critical i{background:var(--err)}
.a2 .warning .val b,.a2 .warning .val .proj,.a2 .sv.warning{color:var(--warn)}
.a2 .critical .val b,.a2 .critical .val .proj,.a2 .sv.critical{color:var(--err);font-weight:600}
.a2 .bar .tick{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--strong);opacity:.7;border-radius:1px}
.a2 .stale .bar i{background:var(--faint)}
.a2 .stale .val b{color:var(--faint);font-weight:500}
.a2 .side .qrow{margin-bottom:9px}
.a2 .side .qrow .bar{position:relative;overflow:visible;margin:4px 0 0}
.a2 .side .qrow .bar .tick{top:-1px;bottom:-1px}
/* A member's own quota lines on its gauge (gauges.js). */
.a2 .bar .tick.lim{opacity:1}
.a2 .bar .tick.lim.l{background:var(--ok)}
.a2 .bar .tick.lim.s{background:var(--err)}
.a2 .side .gnote{color:var(--warn)}
.a2 .pcard .qrow{margin-bottom:10px}

/* attention: glyphs, cards, groups, the order switch (js/glyphs.js) */
.a2{--knock:var(--bg)}
.a2 .ic{width:15px;height:15px;flex:none;display:inline-block;vertical-align:-3px}
.a2 .ic.need{color:var(--accent)}.a2 .ic.err{color:var(--err)}.a2 .ic.rev{color:var(--strong)}
.a2 .ic.wait{color:var(--muted)}.a2 .ic.done{color:var(--ok)}.a2 .ic.work{color:var(--accent);animation:a2spin 1.1s linear infinite}
@keyframes a2spin{to{transform:rotate(360deg)}}
@keyframes a2blink{to{visibility:hidden}}
.a2 .tab.blink:not(.on) .ic.need{animation:a2blink 1.2s steps(2,start) infinite}
@media (prefers-reduced-motion:reduce){.a2 .ic.work,.a2 .tab.blink:not(.on) .ic.need{animation:none}}
.a2 .card.at-needs_you{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.a2 .card.at-error{border-color:var(--err);box-shadow:inset 3px 0 0 var(--err)}
.a2 .card .hd .s.at-needs_you{color:var(--accent)}.a2 .card .hd .s.at-error{color:var(--err)}
.a2 .card .ask{font-size:13px;color:var(--strong);line-height:1.4}
.a2 .card .ask.at-error{color:var(--err)}
.a2 .card .pl{display:grid;gap:3px;font-size:12px;font-family:var(--font-chrome)}
.a2 .card .pl div{display:grid;grid-template-columns:44px 1fr;gap:6px;color:var(--muted);overflow:hidden}
.a2 .card .pl div span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .card .pl .k{color:var(--faint)}
.a2 .card .pl .now span:last-child{color:var(--strong)}
.a2 .card .ft .prog{color:var(--faint)}
.a2 .card .ft .prog{display:inline-flex;align-items:center;gap:6px}
.a2 .pbar{display:inline-flex;gap:1px;width:48px;height:6px}
.a2 .pbar i{flex:1;min-width:0;background:var(--rule);border-radius:1px}
.a2 .pbar i.done{background:var(--ok)}.a2 .pbar i.doing{background:var(--accent)}
.a2 .pbar.live i.doing{animation:a2pulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.a2 .pbar.live i.doing{animation:none}}
.a2 .grp-h{grid-column:1/-1;font-family:var(--font-head);font-size:12px;color:var(--faint);margin-top:4px}
.a2 .order{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 0}
.a2 .order h3{margin:0;font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--strong)}
.a2 .seg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;font-family:var(--font-chrome);font-size:11.5px}
.a2 .seg button{background:none;border:none;padding:4px 10px;color:var(--muted);cursor:pointer}
.a2 .seg button+button{border-left:1px solid var(--rule)}
.a2 .seg button.on{background:var(--accent-soft);color:var(--strong)}
.a2 .band .counts .ic{width:14px;height:14px}
.a2 .askbox{font-size:12.5px;color:var(--strong);background:var(--accent-soft);border-left:2px solid var(--accent);padding:6px 8px;border-radius:4px;margin-top:6px}
.a2 .askbox.at-error{background:var(--err-bg);border-left-color:var(--err);color:var(--err)}
.a2 .st .ic{width:13px;height:13px}
.a2 .plan{display:grid;gap:5px;font-size:12.5px}
.a2 .plan div{display:grid;grid-template-columns:16px 1fr auto;gap:6px;color:var(--muted)}
.a2 .plan div>span{min-width:0;overflow-wrap:anywhere}
.a2 .plan>.done{color:var(--faint)}.a2 .plan>.doing{color:var(--strong)}
.a2 .plan .ic{width:12px;height:12px;margin-top:3px}.a2 .plan:not(.live) .ic.work{animation:none}
.a2 .plan .t{color:var(--faint);font-family:var(--font-chrome);font-size:11.5px}
.a2 #replies-pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.a2 .rp{font-family:var(--font-ui);font-size:13px;color:var(--strong);background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:5px 13px;cursor:pointer;line-height:1.3;text-align:left}
.a2 .rp:hover{border-color:var(--accent);background:var(--accent-soft)}
.a2 #s-counters .bad{color:var(--err)}
.a2 .rp.hand{color:var(--accent);border-color:var(--accent)}
.a2 .coldnote .btn{display:block;margin-top:8px}
@media (pointer:coarse){.a2 .rp.hand,.a2 .coldnote .btn{min-height:44px}}
.a2 .coldnote .cold{border-left:2px solid var(--warn);background:var(--accent-soft);border-radius:0 var(--r) var(--r) 0;padding:8px 12px;font-family:var(--font-chrome);font-size:11.5px;color:var(--strong);overflow-wrap:anywhere}
.a2 .coldnote .lbl{display:block;color:var(--accent);font-size:10.5px;margin-bottom:3px}
.a2 .row.closing{display:none}
/* A message written offline (outbox.js): a dashed user row after the last
   entry, whose label and buttons follow its state. */
.a2 .row.queued .g{color:var(--accent)}
.a2 .row.queued .body{border:1px dashed var(--faint);border-radius:var(--r);padding:8px 12px;background:var(--surface)}
.a2 .row.queued .lbl{display:block;font-family:var(--font-chrome);font-size:11.5px;color:var(--accent);margin-bottom:4px}
.a2 .row.queued .text{color:var(--strong);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.a2 .row.queued .ctl{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.a2 .row.queued:is(.stale,.gone,.error) .body{border-color:var(--err)}
.a2 .row.queued:is(.stale,.gone,.error) :is(.g,.lbl){color:var(--err)}
.a2 .row.queued:not(.stale):not(.error) [data-act=send],.a2 .row.queued:not(.gone) [data-act=copy],.a2 .row.queued:is(.stale,.gone,.error) [data-act=edit]{display:none}
.a2 .row.queued.sending .ctl{display:none}
/* Settings: agents are cards carrying the composer's chips; queues are one
   sentence each; the doctor is one line until it finds something. */
.a2[data-view=settings] .v-settings{display:flex;flex-direction:column;overflow:auto}
.a2 .settings{flex:1;display:flex;flex-direction:column;font-family:var(--font-ui);color:var(--ink)}
.a2 .set-page{width:min(880px,100%);box-sizing:border-box;margin:0 auto;padding:28px 24px 24px;flex:1}
.a2 .set-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.a2 .set-head h2,.a2 .set-empty h2{margin:0 0 4px;font-family:var(--font-head);font-weight:500;font-size:20px;color:var(--strong)}
.a2 #set-path{font-family:var(--font-mono);font-size:11.5px;color:var(--faint)}
.a2 .set-harnesses{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-chrome);font-size:11.5px;color:var(--muted)}
.a2 .set-harness b{font-weight:500;color:var(--ink)}
.a2 .set-harness::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:1px}
.a2 .set-harness.off{color:var(--faint)}
.a2 .set-harness.off::before{background:var(--faint)}
.a2 .set-alert{margin:16px 0 0;padding:9px 12px;border-radius:var(--r);border:1px solid var(--rule);background:var(--surface);font-size:13px;color:var(--ink);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.a2 .set-alert.err{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.a2 .set-checks{margin-top:14px}
.a2 .set-summary{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.a2 .set-summary .ok{color:var(--ok)}
.a2 .set-summary .warn{color:var(--warn)}
.a2 .set-summary .err{color:var(--err)}
.a2 .set-summary #set-doctor{margin-left:auto}
.a2 .set-findings{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px}
.a2 .set-findings:empty{display:none}
.a2 .set-findings li{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:12px;padding:4px 0;border-top:1px solid var(--rule);color:var(--ink)}
.a2 .set-findings li code{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);background:none;padding:0}
.a2 .set-findings li.ok span{color:var(--muted)}
.a2 .set-findings li.warn code{color:var(--warn)}
.a2 .set-findings li.error code{color:var(--err)}
.a2 .set-section-head{display:flex;align-items:baseline;justify-content:space-between;margin:30px 0 10px}
.a2 .set-section-head h3{margin:0;font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--strong)}
.a2 .set-agents{display:grid;gap:8px}
.a2 .set-agent{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px 14px;display:grid;grid-template-columns:120px 1fr;gap:6px 12px;align-items:center}
.a2 .set-card-foot{grid-column:2;display:flex;align-items:flex-start;gap:12px}
.a2 .set-card-foot .set-priming{flex:1}
.a2 .set-agent > .set-why{grid-column:2}
.a2 .set-agent:focus-within{border-color:var(--faint)}
.a2 .set-agent.is-default{border-color:var(--accent)}
.a2 .set-agent.warn{box-shadow:inset 3px 0 var(--warn)}
.a2 .set-agent.error{box-shadow:inset 3px 0 var(--err)}

.a2 .set-name{min-width:0;background:none;border:none;border-bottom:1px solid transparent;outline:none;padding:1px 0;font-family:var(--font-head);font-weight:500;font-size:14px;color:var(--strong)}
.a2 .set-name:hover{border-bottom-color:var(--rule)}
.a2 .set-name:focus{border-bottom-color:var(--accent)}
.a2 .set-name::placeholder{color:var(--faint)}
.a2 .settings .picks{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.a2 .settings .pick{max-width:36ch;background:var(--bg);border:1px solid var(--rule);border-radius:5px;padding:3px 8px;font-family:var(--font-chrome);font-size:11.5px;color:var(--ink);cursor:pointer}
.a2 .settings input.pick{field-sizing:content;min-width:10ch;cursor:text}
.a2 .settings pick-chip input{max-width:36ch}
.a2 .settings .pick:hover{border-color:var(--faint)}
.a2 .settings .pick:focus{outline:none;border-color:var(--accent)}
.a2 .set-default{background:none;border:1px solid transparent;border-radius:5px;padding:1px 7px;font-family:var(--font-chrome);font-size:11px;color:var(--faint);cursor:pointer}
.a2 .set-default:hover:not(:disabled){color:var(--accent);border-color:var(--rule)}
.a2 .set-default.on{color:var(--accent);border-color:var(--accent);cursor:default}
.a2 .set-default:disabled:not(.on){opacity:0}
.a2 .settings .link{background:none;border:none;padding:0;font-family:var(--font-ui);font-size:12.5px;color:var(--muted);cursor:pointer}
.a2 .settings .link:hover{color:var(--accent)}
.a2 .settings .link.danger:hover{color:var(--err)}
.a2 .set-agent .link.danger{opacity:0}
.a2 .set-agent:hover .link.danger,.a2 .set-agent:focus-within .link.danger{opacity:1}
.a2 .set-priming summary{font-size:12px;color:var(--faint);cursor:pointer;list-style:none}
.a2 .set-priming summary::before{content:"+ "}
.a2 .set-priming[open] summary::before{content:"\2212  "}
.a2 .set-priming textarea{margin-top:6px;width:100%;box-sizing:border-box;resize:vertical;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:7px 9px;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--ink)}
.a2 .set-priming textarea:focus{outline:none;border-color:var(--accent)}
.a2 .set-why{margin:0;font-size:12px;line-height:1.45}
.a2 .set-why.warn{color:var(--warn)}
.a2 .set-why.error{color:var(--err)}
.a2 .set-section-head .set-why{margin-left:12px;flex:1}
.a2 .set-queues{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.a2 .set-queue{padding:9px 14px;border-top:1px solid var(--rule)}
.a2 .set-queue:first-child{border-top:none}
.a2 .set-queue.warn{box-shadow:inset 3px 0 var(--warn)}
.a2 .set-queue.error{box-shadow:inset 3px 0 var(--err)}
.a2 .set-queue-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.a2 .set-queue .set-name{flex:0 0 120px;font-size:13px}
.a2 .set-queue .link.danger{margin-left:auto;opacity:0}
.a2 .set-queue:hover .link.danger,.a2 .set-queue:focus-within .link.danger{opacity:1}
.a2 .set-limit{width:5ch;min-width:0;text-align:right}
.a2 .set-num{width:12ch;min-width:0}
.a2 .set-cmd{flex:1 1 18ch;min-width:12ch}
.a2 .set-cwd{width:12ch;min-width:0}
.a2 .set-field+.set-field{margin-top:6px}
.a2 .set-queue .set-field .set-name{flex-basis:190px;font-weight:400;color:var(--ink)}
.a2 .set-queue .set-priming{margin-top:6px}
.a2 .set-tools{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.a2 .set-tool{font-family:var(--font-mono);font-size:11px;border:1px solid var(--rule);border-radius:4px;padding:2px 6px;background:none;color:var(--muted);cursor:pointer}
.a2 .set-tool[aria-pressed=true]{color:var(--strong);border-color:var(--accent)}
.a2 #set-wf-list{margin-top:12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.a2 #set-wf-list:empty{display:none}
.a2 .set-wf{padding:9px 14px;border-top:1px solid var(--rule)}
.a2 .set-wf:first-child{border-top:none}
.a2 .set-wf-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;min-width:0}
.a2 .set-wf-line .set-name{color:var(--ink);overflow-wrap:anywhere}
.a2 .set-wf-line code{font:11.5px var(--font-mono);color:var(--muted);overflow-wrap:anywhere}
.a2 .set-wf-acts{display:flex;gap:6px;margin-left:auto}
.a2 .set-wf-steps{margin:8px 0 0;padding:0;list-style:none;font-size:12.5px;line-height:1.6;color:var(--muted)}
.a2 #set-wf-status{margin-top:10px}
.a2 #set-wf-status:empty{display:none}
.a2 .set-wf-err{margin:4px 0 0;font:11.5px var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--err)}
@media (max-width:640px){.a2 .set-wf-acts{margin-left:0;flex-basis:100%}}
.a2 .set-none{margin:0;font-size:13px;color:var(--faint)}
/* Settings' Models view: one row per model, in-use rows marked; on a phone a
   row stacks name and rank, score and price, then who uses it. */
.a2 .set-mtools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.a2 .set-mrows{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.a2 .set-mrow{display:grid;grid-template-columns:minmax(0,1.6fr) 90px 44px 60px 52px 110px minmax(0,1.2fr);gap:8px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:6px 10px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.a2 .set-mrow.use{border-color:var(--accent)}
.a2 .set-mrow.hd{background:none;border:0;font-size:10.5px;color:var(--faint);padding-top:0;padding-bottom:0}
.a2 .set-mrow .nm{color:var(--strong);overflow-wrap:anywhere}
.a2 .set-mrow .by{color:var(--accent);overflow-wrap:anywhere}
.a2 .set-mrow.hd .nm,.a2 .set-mrow.hd .by{color:inherit}
.a2 .set-attr{margin:8px 0 0;font-family:var(--font-mono);font-size:10.5px;color:var(--faint)}
.a2 .set-attr a{color:var(--muted)}
/* An agent's cascade: its models in order, each with its Coding Index and
   buttons to move or remove it (the spec's section 10 mockup). */
.a2 .set-casc{grid-column:2;min-width:0}
.a2 .set-casc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.a2 .set-casc li{display:grid;grid-template-columns:22px minmax(0,1fr) 64px auto;gap:8px;align-items:center;background:var(--bg);border:1px solid var(--rule);border-radius:5px;padding:4px 8px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink)}
.a2 .set-casc li.cool{opacity:.55}
.a2 .set-casc .i{color:var(--faint)}
.a2 .set-casc .m{color:var(--strong);overflow-wrap:anywhere}
.a2 .set-casc .sc{color:var(--muted);text-align:right}
.a2 .set-casc .sc.none{color:var(--faint)}
.a2 .set-casc .mv{display:flex;gap:4px}
.a2 .set-casc-btn{font:11px var(--font-mono);background:none;border:1px solid var(--rule);color:var(--muted);border-radius:4px;padding:0 6px;cursor:pointer;min-width:24px}
.a2 .set-casc-btn:hover:not(:disabled){color:var(--strong);border-color:var(--faint)}
.a2 .set-casc-btn:focus-visible{outline:none;border-color:var(--accent)}
.a2 .set-casc-btn:disabled{opacity:.35;cursor:default}
.a2 .set-casc-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.a2 .set-casc-warn{margin:6px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--warn);overflow-wrap:anywhere}
.a2 .set-casc .set-attr{margin-top:6px}
@media (max-width:640px){
  .a2 .set-casc{grid-column:1}
  .a2 .set-casc li{grid-template-columns:22px minmax(0,1fr) auto}
  .a2 .set-casc .m{grid-column:2/-1}
  .a2 .set-casc .sc{grid-column:2;text-align:left}
}
@media (pointer:coarse){.a2 .set-casc-btn{min-width:44px;min-height:44px;font-size:14px}.a2 .set-casc-sort{min-height:44px}.a2 .set-casc pick-chip input{min-height:44px}}
@media (max-width:640px){
  .a2 .set-mrow{grid-template-columns:minmax(0,1fr) auto;gap:2px 8px}
  .a2 .set-mrow.hd,.a2 .set-mrow .h,.a2 .set-mrow .ii,.a2 .set-mrow .by:empty{display:none}
  .a2 .set-mrow .rk,.a2 .set-mrow .pr{text-align:right}
  .a2 .set-mrow .by{grid-column:1/-1}
}
.a2 .set-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px max(24px,calc((100% - 880px) / 2 + 24px));border-top:1px solid var(--rule);background:var(--side)}
.a2 .set-bar #set-status{margin-right:auto;font-size:12.5px;color:var(--muted)}
.a2 .set-bar.dirty #set-status{color:var(--accent)}
.a2 .set-bar .btn[hidden]{display:none}
.a2 .set-empty{width:min(520px,100%);margin:12vh auto 0;padding:0 24px;display:grid;gap:14px;justify-items:start;font-size:14px;line-height:1.55;color:var(--ink)}
.a2 .set-empty p{margin:0}
.a2 .set-empty code{font-family:var(--font-mono);font-size:12.5px;color:var(--strong)}
.a2 #settings-btn.on,.a2 #journal-btn.on,.a2 #knowledge-btn.on,.a2 #usage-btn.on,.a2 #files-btn.on,.a2 #schedules-btn.on,.a2 #help-btn.on{color:var(--accent)}
@media (max-width:640px){.a2 .set-agent{grid-template-columns:1fr}.a2 .set-card-foot,.a2 .set-agent > .set-why{grid-column:1}.a2 .set-findings li{grid-template-columns:1fr;gap:2px}}

/* the Files view (js/files.js): a bar with the path and Save, the folder tree
   on the left (a drawer behind ☰ on a phone), the conflict's banner, and the
   editor filling the rest; Alt+O's picker is the palette's panel */
.a2[data-view=files] .v-files{display:flex;flex-direction:column;overflow:hidden}
.a2 .files{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.a2 .fbar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--rule);font-family:var(--font-chrome);font-size:12.5px;min-width:0}
.a2 .fbar .crumbs{display:flex;align-items:baseline;min-width:0;overflow:hidden;white-space:nowrap}
.a2 .fbar .crumbs .dir{color:var(--muted)}.a2 .fbar .crumbs .sep{color:var(--faint);padding:0 4px}
.a2 .fbar .crumbs .here{color:var(--strong);overflow:hidden;text-overflow:ellipsis}
.a2 .fbar .dirty{color:var(--accent)}
.a2 .fbar .gap{flex:1}
.a2 .fbar .pick{font-family:var(--font-mono);font-size:11.5px}
.a2 .fbanner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;background:var(--raised);border-bottom:1px solid var(--rule);font-size:12.5px}
.a2 .fbanner[hidden]{display:none}
.a2 .fbanner .t{flex:1 1 240px;color:var(--warn)}
.a2 .fbanner .acts{display:flex;gap:6px;flex-wrap:wrap}
.a2 .fbanner[data-kind=changed] [data-act=recreate],.a2 .fbanner[data-kind=changed] [data-act=close],.a2 .fbanner[data-kind=deleted] [data-act=diff],.a2 .fbanner[data-kind=deleted] [data-act=reload],.a2 .fbanner[data-kind=deleted] [data-act=keep]{display:none}
.a2 .fbanner .fdiff{flex:1 0 100%;max-height:40vh;overflow:auto;container:md/inline-size}
.a2 .fbanner .fdiff[hidden]{display:none}
.a2 .fpane{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.a2 .fpane .notice{margin:24px auto;max-width:560px;padding:0 16px;text-align:center}
.a2 .fpane .fnote{margin:0;padding:4px 12px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--rule)}
.a2 .fed{flex:1;min-height:0;overflow:hidden}
.a2 .fstrip{display:flex;justify-content:flex-end;gap:4px;padding:4px 12px;border-bottom:1px solid var(--rule)}
.a2 .fstrip .btn{padding:2px 10px;font-size:12px}
.a2 .fstrip .btn[aria-pressed=true]{background:var(--raised);color:var(--strong);border-color:var(--accent)}
.a2 .fview{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;container:md/inline-size}
.a2 .fview[hidden],.a2 .fed[hidden]{display:none}
.a2 .fview>.md{flex-shrink:0;width:100%;max-width:860px;margin:0 auto;padding:22px 32px 56px;box-sizing:border-box}
.a2 .fview>.md img{max-width:100%}
@container md (max-width:600px){.a2 .fview>.md{padding:14px 14px 40px}}
.a2 .fstage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.a2 .fstage img,.a2 .fstage video{max-width:100%;max-height:100%;object-fit:contain}
.a2 .fstage audio{width:min(640px,100%)}
.a2 .fstage.html,.a2 .fstage.pdf{padding:0;align-items:stretch}
.a2 .fstage iframe{flex:1;width:100%;border:0;background:#fff}
.a2 .fother .acts{display:flex;justify-content:center;gap:8px}
.a2 .fother .fnative{display:none}
.a2[data-native] .fother .fnative{display:inline-flex}
.a2 .fbody{flex:1;min-height:0;display:flex;position:relative}
.a2 .fmain{flex:1;min-width:0;display:flex;flex-direction:column}
.a2 .ftree{width:260px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--rule);background:var(--bg);font-family:var(--font-chrome);font-size:12.5px}
.a2 .ftree .trows{flex:1;min-height:0;overflow:auto;padding:4px 0}
.a2 .ftree .trow{display:flex;align-items:center;gap:4px;padding:2px 8px 2px calc(8px + var(--depth,0) * 14px);color:var(--ink);cursor:pointer;white-space:nowrap;user-select:none;-webkit-touch-callout:none}
.a2 .ftree .trow:hover{background:var(--raised)}
.a2 .ftree .trow.on{background:var(--raised);color:var(--strong)}
.a2 .ftree .trow.ign{opacity:.5}
.a2 .ftree .trow.drop{outline:1px dashed var(--accent);outline-offset:-1px}
.a2 .ftree .tw{width:12px;flex-shrink:0;color:var(--faint);font-size:10px}
.a2 .ftree .nm{overflow:hidden;text-overflow:ellipsis}
.a2 .ftree .tag{margin-left:auto;padding-left:6px;color:var(--faint);font-size:10.5px}
.a2 .ftree .tname{flex:1;min-width:0;padding:1px 4px;background:var(--surface);border:1px solid var(--accent);border-radius:3px;color:var(--strong);font:inherit;outline:none}
.a2 .ftree .tfoot{display:flex;gap:6px;align-items:center;padding:6px 10px;border-top:1px solid var(--rule);color:var(--muted);font-size:11.5px;cursor:pointer}
.a2 .ftree .tfoot input{accent-color:var(--accent);margin:0}
.a2 .cmenu{position:fixed;z-index:60;min-width:170px;max-width:min(320px,calc(100vw - 8px));padding:4px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.a2 .cmenu .head{padding:3px 8px 5px;color:var(--muted);font-family:var(--font-mono);font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.a2 .cmenu .grp{height:1px;margin:4px 2px;background:var(--rule)}
.a2 .cmenu .btn{display:flex;gap:8px;align-items:center;width:100%;text-align:left;border:0}
.a2 .cmenu .btn .ic{flex-shrink:0;width:14px;height:14px;color:var(--muted)}
.a2 .cmenu .btn .k{margin-left:auto;padding-left:12px;color:var(--faint);font-family:var(--font-mono);font-size:11px}
.a2 .cmenu .btn.danger,.a2 .cmenu .btn.danger .ic{color:var(--err)}
.a2 .cmenu .btn:disabled{opacity:.45}
.a2 .fbar .tbtn{display:none;padding:3px 9px}
.a2 .fpick .file-row{grid-template-columns:auto auto minmax(0,1fr) auto}
.a2 .fpick .file-row .dir{color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.a2 .fpick .file-row b{color:var(--accent)}
.a2 .fpick .file-row .age{color:var(--faint);font-size:11px;white-space:nowrap}
@media (max-width:640px){
  .a2 .fbar .crumbs .dir,.a2 .fbar .crumbs .sep,.a2 .fbar .pick{display:none}
  .a2 .fbar .tbtn{display:inline-flex}
  .a2 .ftree{display:none;position:absolute;inset:0 auto 0 0;z-index:5;width:min(320px,85vw);box-shadow:0 8px 22px rgba(0,0,0,.4)}
  .a2 .files[data-drawer] .ftree{display:flex}
  .a2 .fpick{padding-top:0}
  .a2 .fpick .panel{width:100vw;max-height:100%;border-radius:0}
}
@media (pointer:coarse){.a2 .fbar .btn,.a2 .fbanner .btn{min-height:44px}.a2 .fpick .file-row,.a2 .ftree .trow,.a2 .cmenu .btn{min-height:44px;align-items:center}}

/* the journal view (js/journal.js): one box shaped like the composer's, the
   kind chips, and the entries as a timeline on the transcript's thread */
.a2[data-view=journal] .v-journal{display:flex;flex-direction:column;overflow:auto}
.a2 .journal{max-width:920px;width:100%;margin:0 auto;padding:22px 28px 32px}
.a2 .jsearch{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:5px 6px 5px 13px;cursor:text}
.a2 .jsearch:focus-within{border-color:var(--accent)}
.a2 .jsearch .ic{width:15px;height:15px;flex:none;color:var(--faint)}
.a2 .jsearch:focus-within .ic{color:var(--accent)}
.a2 .jsearch .jq{flex:1;min-width:0;background:none;border:0;outline:none;padding:7px 0;color:var(--strong);font-family:var(--font-ui);font-size:14px;text-overflow:ellipsis}
.a2 .jsearch .jq::placeholder{color:var(--faint);opacity:1}
.a2 .jwhen{flex:none;font-family:var(--font-mono);font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--rule);border-radius:999px;padding:3px 11px;cursor:pointer;white-space:nowrap}
.a2 .jwhen:hover,.a2 .jwhen:focus-visible{color:var(--strong);border-color:var(--faint);outline:none}
.a2 .jfiles{display:none}
.a2 .jkinds{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.a2 .jkind{font-family:var(--font-mono);font-size:11px;color:var(--muted);background:none;border:1px solid var(--rule);border-radius:999px;padding:3px 11px;cursor:pointer}
.a2 .jkind:hover,.a2 .jkind:focus-visible{color:var(--strong);border-color:var(--faint);outline:none}
.a2 .jkind[aria-pressed=true]{color:var(--strong);background:var(--accent-soft);border-color:transparent}
.a2 .jcount{font-family:var(--font-mono);font-size:11px;color:var(--faint);margin:16px 2px 0}
.a2 .jcount:empty{display:none}
.a2 .journal .empty{padding:36px 2px;text-align:center}
.a2 .journal .jmore{display:block;margin:16px auto 0}
/* usage: the usage page (js/usage.js). The server decides every number,
   width and shade; colours c0..c7 are its series, l0..l4 its heat levels.
   Below 640 px the panels stack in the spec's order and the heat grids
   scroll inside their panel. */
.a2[data-view=usage] .v-usage{display:flex;flex-direction:column;overflow:auto}
.a2 .usage{--u0:var(--accent);--u1:var(--ok);--u2:var(--warn);--u3:var(--comms);--u4:var(--err);--u5:color-mix(in oklab,var(--accent) 50%,var(--ok));--u6:color-mix(in oklab,var(--warn) 50%,var(--err));--u7:var(--muted);max-width:1180px;width:100%;margin:0 auto;padding:18px 24px 32px;font-family:var(--font-ui);font-size:13px;box-sizing:border-box}
.a2 .usage .c0{background:var(--u0)}.a2 .usage .c1{background:var(--u1)}.a2 .usage .c2{background:var(--u2)}.a2 .usage .c3{background:var(--u3)}
.a2 .usage .c4{background:var(--u4)}.a2 .usage .c5{background:var(--u5)}.a2 .usage .c6{background:var(--u6)}.a2 .usage .c7{background:var(--u7)}
.a2 .usage .l1{background:color-mix(in oklab,var(--accent) 18%,var(--bg))}.a2 .usage .l2{background:color-mix(in oklab,var(--accent) 38%,var(--bg))}
.a2 .usage .l3{background:color-mix(in oklab,var(--accent) 62%,var(--bg))}.a2 .usage .l4{background:color-mix(in oklab,var(--accent) 88%,var(--bg));color:var(--on-accent)}
.a2 .uhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.a2 .uhead b{font:500 15px var(--font-mono);color:var(--strong)}
.a2 .ulive{font:11px var(--font-mono);color:var(--ok);display:inline-flex;align-items:center;gap:6px}
.a2 .ulive i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.a2 .uctl{display:flex;flex-wrap:wrap;gap:10px 16px;padding:10px 0 12px}
.a2 .uctl label{font:10.5px var(--font-mono);color:var(--faint);text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.a2 .useg{display:inline-flex;flex-wrap:wrap}
.a2 .useg button{font:11.5px var(--font-mono);background:var(--bg);color:var(--muted);border:1px solid var(--rule);padding:3px 9px;cursor:pointer;text-transform:none;letter-spacing:0;margin:0 -1px -1px 0}
.a2 .useg button.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.a2 .uchips{display:inline-flex;gap:5px;flex-wrap:wrap}
.a2 .uchip{font:11px var(--font-mono);border:1px solid var(--rule);border-radius:999px;padding:1px 8px;color:var(--faint);text-transform:none;letter-spacing:0;background:none;cursor:pointer}
.a2 .uchip.on{color:var(--strong);border-color:var(--faint)}
.a2 .utiles,.a2 .ugrid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-bottom:0}
.a2 .utiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.a2 .ugrid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.a2 .utile{background:var(--bg);padding:10px 14px;min-width:0}
.a2 .utile .k{font:10.5px var(--font-mono);color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.a2 .utile .v{font:500 20px var(--font-mono);color:var(--strong);margin:2px 0;white-space:nowrap}
.a2 .utile .chg{font-size:12px;color:var(--muted)}
.a2 .utile .d{font-size:11.5px;color:var(--muted);line-height:1.35}
.a2 .usage .pane{background:var(--bg);padding:12px 14px;min-width:0}
.a2 .usage>.pane{border:1px solid var(--rule);border-bottom:0}
.a2 .usage .pane h5{margin:0 0 2px;font:500 12px var(--font-mono);color:var(--strong);display:flex;align-items:center;gap:8px}
.a2 .usage .pane .h{font-size:11.5px;color:var(--faint);margin-bottom:8px}
.a2 .uclose{margin-left:auto;background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:0 4px}
.a2 .ulegend{display:flex;flex-wrap:wrap;gap:4px 10px;font:11px var(--font-mono);color:var(--muted);margin:0 0 8px}
.a2 .ulegend span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.a2 .ulegend i{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.a2 .utrend{display:flex;gap:3px;height:140px;align-items:stretch}
.a2 .ucol{flex:1;min-width:0;display:flex;flex-direction:column}
.a2 .ubar{flex:1;display:flex;flex-direction:column-reverse;gap:1px;background:var(--surface);border-radius:3px 3px 0 0;overflow:hidden}
.a2 .ulab{font:10px var(--font-mono);color:var(--faint);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:clip;margin-top:3px}
.a2 .uhb{display:grid;grid-template-columns:180px minmax(0,1fr) 72px;gap:8px;align-items:center;margin:5px 0;font:11.5px var(--font-mono)}
.a2 .uhb .nm{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .uhb .vv{color:var(--strong);text-align:right;white-space:nowrap}
.a2 .ustack{display:flex;height:12px;border-radius:3px;overflow:hidden;gap:1px;background:var(--surface)}
.a2 .ustack div{height:100%}
.a2 .usage table{width:100%;border-collapse:collapse;font:11.5px var(--font-mono)}
.a2 .usage th{color:var(--faint);font-weight:400;text-align:right;padding:4px 6px;border-bottom:1px solid var(--rule);white-space:nowrap}
.a2 .usage td{text-align:right;padding:4px 6px;border-bottom:1px solid var(--rule);white-space:nowrap;color:var(--ink)}
.a2 .usage th:first-child,.a2 .usage td:first-child{text-align:left}
.a2 .uheat td{text-align:center}
.a2 .uheat td:first-child,.a2 .uheat td.tot{text-align:left}
.a2 .uwhen{table-layout:fixed}
.a2 .uwhen td{padding:0;height:14px;border:1px solid var(--bg)}
.a2 .uwhen th{padding:2px;font-size:10px;border:0;text-align:left}
.a2 .uwhen tr>th:first-child{width:32px}
.a2 .uscroll{overflow-x:auto}
.a2 .uhit,.a2 .qlink{cursor:pointer}
.a2 .qlink:hover{color:var(--accent)}
.a2 .uhit:hover,.a2 .uhit:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
.a2 .ufoot{padding:8px 14px;font:11px var(--font-mono);color:var(--faint);border:1px solid var(--rule)}
.a2 .unote{color:var(--faint);font-size:12px;margin:4px 0}
.a2 .udrill{border:1px solid var(--accent)!important}
.a2 .ulist{display:flex;flex-direction:column}
.a2 .urow{display:flex;justify-content:space-between;gap:10px;padding:5px 2px;border-bottom:1px solid var(--rule);font:11.5px var(--font-mono);color:var(--ink);text-decoration:none}
.a2 .urow:hover{color:var(--strong)}
.a2 .urow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.a2 .urow .vv{white-space:nowrap;color:var(--muted)}
.a2 .usage .urest{background:color-mix(in oklab,var(--muted) 70%,var(--bg))}
.a2 .usub+.usub{margin-top:14px}
.a2 .usub .uhd{display:flex;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;font:11.5px var(--font-mono);color:var(--strong);margin-bottom:6px}
.a2 .usub .ulegend{margin:6px 0 0}
.a2 .ucx{display:flex;flex-direction:column;gap:2px;min-width:0}
.a2 .ucx .ustack{height:6px}
.a2 .uhb.mark .nm{color:var(--accent)}
@media (max-width:640px){
  .a2 .usage{padding:12px 10px 24px}
  .a2 .utiles{grid-template-columns:1fr 1fr}
  .a2 .utile:last-child:nth-child(odd){grid-column:1/-1}
  .a2 .ugrid{grid-template-columns:1fr}
  .a2 .uhb{grid-template-columns:86px minmax(0,1fr) 62px}
  .a2 .useg button{min-height:34px;padding:6px 11px}
  .a2 .uwhen th{font-size:9px;padding:1px}
  .a2 .utile .v{font-size:17px}
}

/* The Knowledge view (js/knowledge.js): the Journal's box and chips, rows as
   in the spec's mockup, and beside them the open item: its text in the
   editor, Save and Delete, and its history. Below 640 px the rows drop the
   usage column and the open item takes the list's place. */
.a2[data-view=knowledge] .v-knowledge{display:flex;flex-direction:column;overflow:auto}
.a2 .knowledge{max-width:1180px;width:100%;margin:0 auto;padding:22px 28px 32px;font-size:13px}
.a2 .knowledge .kpanes{display:flex;gap:18px;align-items:flex-start;margin-top:14px}
.a2 .knowledge .klist{flex:1 1 0;min-width:0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--bg)}
.a2 .knowledge .klist .empty{padding:24px 14px;color:var(--muted);text-align:center}
.a2 .krow{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:3px 12px;padding:9px 12px;border-bottom:1px solid var(--rule);align-items:baseline;cursor:pointer}
.a2 .krow:last-child{border-bottom:0}
.a2 .krow:hover,.a2 .krow:focus-visible{background:color-mix(in srgb,var(--ink) 5%,transparent);outline:none}
.a2 .krow.on{background:var(--accent-soft)}
.a2 .krow .ic{align-self:center;color:var(--faint);display:grid;place-items:center}
.a2 .krow .ic .ic,.a2 .krow .ic svg{width:14px;height:14px}
.a2 .krow .nm{font-family:var(--font-mono);color:var(--strong);overflow-wrap:anywhere}
.a2 .krow .ds{grid-column:2 / -1;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.a2 .krow .use{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-align:right;white-space:nowrap}
.a2 .knowledge .fl{font-family:var(--font-mono);font-size:10.5px;text-align:right;white-space:nowrap}
.a2 .knowledge .fl.ok{color:var(--ok)}
.a2 .knowledge .fl.prop{color:var(--comms)}
.a2 .knowledge .fl.stale{color:var(--warn)}
.a2 .knowledge .fl.exp{color:var(--err)}
.a2 .knowledge .kdetail{flex:1.4 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:12px 14px}
.a2 .knowledge .khead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.a2 .knowledge .kback{display:none}
.a2 .knowledge .kback .ic{width:14px;height:14px;margin-right:4px}
.a2 .knowledge .ktitle{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.a2 .knowledge .kname{font-family:var(--font-mono);font-size:14px;color:var(--strong);overflow-wrap:anywhere}
.a2 .knowledge .kkind{font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.a2 .knowledge .kdesc{color:var(--ink)}
.a2 .knowledge .kmeta{font-family:var(--font-mono);font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.a2 .knowledge .err{color:var(--err)}
.a2 .knowledge .ked{height:340px;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.a2 .knowledge .kacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.a2 .knowledge .kdel .ic{width:13px;height:13px;margin-right:4px}
.a2 .knowledge .knote{font-size:12px;color:var(--muted)}
.a2 .knowledge .knote.err{color:var(--err)}
.a2 .knowledge .khist h4{margin:8px 0 4px;font-size:11px;font-family:var(--font-mono);font-weight:500;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.a2 .knowledge .kver{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--rule)}
.a2 .knowledge .kvw{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.a2 .knowledge .kvm{font-family:var(--font-mono);font-size:12px;color:var(--ink);overflow-wrap:anywhere}
.a2 .knowledge .kvt{font-family:var(--font-mono);font-size:10.5px;color:var(--faint)}
.a2 .knowledge .kvnow{font-family:var(--font-mono);font-size:10.5px;color:var(--ok)}
@media (max-width:640px){
  .a2 .knowledge{padding:12px 12px 24px}
  .a2 .krow{grid-template-columns:18px minmax(0,1fr) auto}
  .a2 .krow .use{display:none}
  .a2 .knowledge[data-open="1"] .ktop,.a2 .knowledge[data-open="1"] .klist{display:none}
  .a2 .knowledge[data-open="1"] .kpanes{margin-top:0}
  .a2 .knowledge .kback{display:inline-flex;align-items:center}
  .a2 .knowledge .kdetail{padding:10px}
  .a2 .knowledge .ked{height:52vh}
}
@media (pointer:coarse){.a2 .krow{min-height:44px;align-content:center}.a2 .knowledge :is(.jkind,.btn){min-height:44px}.a2 .knowledge .jsearch .jq{min-height:32px}}
/* The Schedules view (js/schedules.js): the list, a schedule's four layers and
   its runs, and the editor laid out as the same layers. */
.a2[data-view=schedules] .v-schedules{display:flex;flex-direction:column;overflow:auto}
.a2 .schedules{max-width:1100px;width:100%;margin:0 auto;padding:22px 28px 32px;font-size:13px}
.a2 .sch-btn .n{margin-left:5px;color:var(--muted)}
.a2 .sch-btn .n:empty{display:none}
.a2 .sch-btn .n.err{color:var(--err)}
.a2 .schedules .sch-top{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.a2 .schedules .sch-top h2{margin:0;font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--strong)}
.a2 .schedules .sch-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.a2 .schedules .sch-row{border:1px solid var(--rule);border-radius:var(--r);padding:8px 10px;margin-bottom:6px;cursor:pointer;background:var(--surface)}
.a2 .schedules .sch-row.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.a2 .schedules .sch-row:focus-visible{outline:1px solid var(--accent)}
.a2 .schedules .nm{display:flex;align-items:center;gap:6px;color:var(--strong);font-weight:500}
.a2 .schedules .nm .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .schedules .sp{flex:1}
.a2 .schedules .sch-row .m{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.a2 .schedules .sch-new{width:100%}
.a2 .schedules .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:var(--muted);margin-right:4px}
.a2 .schedules .s-ok,.a2 .schedules .s-done{background:var(--ok)}
.a2 .schedules .s-work,.a2 .schedules .s-working,.a2 .schedules .s-needs_you,.a2 .schedules .s-review{background:var(--accent)}
.a2 .schedules .s-err,.a2 .schedules .s-error{background:var(--err)}
.a2 .schedules .chip{white-space:nowrap}
.a2 .schedules .chip.a{color:var(--accent);border-color:var(--accent)}
.a2 .schedules .chip.e{color:var(--err);border-color:var(--err)}
.a2 .schedules .sch-dhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.a2 .schedules .sch-dhead h3{margin:0;font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--strong)}
.a2 .schedules .cnote{color:var(--muted);font-size:12.5px;margin:4px 0 10px}
.a2 .schedules .cnote.err{color:var(--err)}
.a2 .schedules .layer{border:1px solid var(--rule);border-radius:var(--r);padding:8px 10px;background:var(--surface);display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:start}
.a2 .schedules .layer .k{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);padding-top:3px}
.a2 .schedules .layer .b{min-width:0}
.a2 .schedules .layer.off{opacity:.5}
.a2 .schedules .layer pre{margin:4px 0 0;background:var(--raised);padding:6px 8px;border-radius:4px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-mono);font-size:12px}
.a2 .schedules .layer .cnote{margin:0}
.a2 .schedules .arrow{text-align:center;color:var(--muted);font-size:12px;line-height:16px}
.a2 .schedules h4{margin:16px 0 6px;font-size:13px;display:flex;align-items:center;gap:10px;color:var(--strong);font-weight:500}
.a2 .schedules .sch-quiet{font-weight:400;color:var(--muted);display:flex;gap:4px;align-items:center}
.a2 .schedules table.runs{width:100%;border-collapse:collapse;font-size:12.5px}
.a2 .schedules table.runs td{padding:5px 6px;border-top:1px solid var(--rule);vertical-align:top}
.a2 .schedules table.runs td.t{font-family:var(--font-mono);color:var(--muted);white-space:nowrap}
.a2 .schedules table.runs td.r{text-align:right;font-family:var(--font-mono);color:var(--muted);white-space:nowrap}
.a2 .schedules table.runs tr.k-quiet td{color:var(--muted)}
.a2 .schedules a.sess{font-family:var(--font-mono);color:var(--accent);text-underline-offset:2px}
.a2 .schedules .why{color:var(--muted);font-size:11.5px;overflow-wrap:anywhere}
.a2 .schedules .seg{margin-bottom:6px}
.a2 .schedules .seg button:disabled{opacity:.35;cursor:not-allowed}
.a2 .schedules .sch-form label{display:block;margin:8px 0 3px;color:var(--muted);font-size:12.5px}
.a2 .schedules .sch-form .inl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0}
.a2 .schedules .sch-form .inl label{margin:0;display:flex;gap:4px;align-items:center;color:var(--ink)}
.a2 .schedules .sch-in{width:100%;font-family:var(--font-mono);font-size:12.5px;color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:6px 8px}
.a2 .schedules .sch-in:focus{border-color:var(--accent);outline:none}
.a2 .schedules textarea.sch-in{min-height:58px;resize:vertical}
.a2 .schedules #sch-timeout{width:64px}
.a2 .schedules .hint{color:var(--muted);font-size:11.5px;margin-top:3px}
.a2 .schedules .hint:empty{display:none}
.a2 .schedules .hint.bad{color:var(--err)}
.a2 .schedules .sch-tested{margin:6px 0 0;background:var(--raised);border-radius:4px;padding:6px 8px;font-family:var(--font-mono);font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.a2 .schedules .sch-foot{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.a2 .schedules .sch-pool{margin:6px 0}
.a2 .schedules .sch-pool .pl{color:var(--strong);font-size:12.5px}
.a2 .schedules .sch-q .seg{margin-bottom:0}
.a2 .schedules .sch-form .sch-pct{width:56px}
/* A day: its pill sticks under the top while its entries scroll. */
.a2 .jday-h{position:sticky;top:0;z-index:2;background:var(--bg);padding:14px 0 8px;font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.a2 .jday-h span{display:inline-block;border:1px solid var(--rule);border-radius:999px;padding:2px 10px}
/* An entry: time | glyph on the thread | body. --jt is the thread's x, the
   middle of the glyph column, in whole pixels so the line stays crisp. */
.a2 .jthread{position:relative;--jt:58px}
.a2 .jthread::before{content:"";position:absolute;left:var(--jt);top:6px;bottom:6px;width:1px;background:var(--rule)}
.a2 .jent{display:grid;grid-template-columns:40px 22px minmax(0,1fr);column-gap:8px;padding:6px 10px 7px 0;border-radius:var(--r);cursor:pointer;outline:none}
.a2 .jent:hover,.a2 .jent:focus-visible{background:var(--raised)}
.a2 .jent:focus-visible{box-shadow:inset 0 0 0 1px var(--accent)}
.a2 .jent .t{font-family:var(--font-mono);font-size:11px;line-height:20px;color:var(--faint);text-align:right}
.a2 .jent .g{position:relative;z-index:1;text-align:center;font-size:13px;line-height:20px;color:var(--muted)}
.a2 .jent .g span{background:var(--bg);padding:2px 0}
.a2 .jent .g .ic{width:13px;height:13px;vertical-align:-2px}
.a2 .jent:hover .g span,.a2 .jent:focus-visible .g span{background:var(--raised)}
.a2 .jent .b{min-width:0}
.a2 .jent .who{display:flex;gap:8px;align-items:baseline;line-height:20px;min-width:0}
.a2 .jent .h{font-family:var(--font-mono);font-size:11.5px;color:var(--comms);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .jent .x{font-family:var(--font-ui);font-size:13.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.a2 .jent:hover .x{color:var(--strong)}
.a2 .jent mark{background:var(--accent-soft);color:var(--strong);border-radius:2px;box-shadow:inset 0 -1px 0 var(--accent)}
.a2 .jent .hash{font-family:var(--font-mono);font-size:12px;color:var(--ok)}
.a2 .jent .jtag{display:inline-block;font-family:var(--font-mono);font-size:9.5px;font-weight:600;line-height:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--on-accent);background:var(--accent);border-radius:3px;padding:0 5px;margin-right:7px;vertical-align:1px}
.a2 .jent .ps{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;margin-top:5px}
.a2 .jent .pchip{max-width:100%;font-family:var(--font-mono);font-size:10.5px;line-height:16px;color:var(--muted);background:var(--raised);border-radius:4px;padding:1px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .jent:hover .pchip,.a2 .jent:focus-visible .pchip{background:var(--surface)}
.a2 .jent .pmore{color:var(--faint)}
.a2 :is(.jent,.jpeek>div).k-commit .g,.a2 :is(.jent,.jpeek>div).k-plan .g{color:var(--ok)}
.a2 :is(.jent,.jpeek>div).k-note .g{color:var(--accent)}
.a2 :is(.jent,.jpeek>div).k-pr .g,.a2 :is(.jent,.jpeek>div).k-issue .g{color:var(--comms)}
.a2 :is(.jent,.jpeek>div).k-session .g{color:var(--faint)}

/* the Help tab (js/help.js): the pages and the search box on the left, the
   page on the right, each scrolling on its own. The page is the Markdown's
   size container, as #tr and .vbody are (DESIGN.md). */
.a2[data-view=help] .v-help{display:flex;flex-direction:column;min-height:0}
.a2 .helpv{flex:1;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.a2 .hlist{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;padding:12px 10px 16px;background:var(--side);border-right:1px solid var(--rule)}
.a2 .hlist .jsearch{margin-bottom:8px}
.a2 .hgrp{font:500 10.5px var(--font-mono);color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:10px 8px 4px}
.a2 .hrow{display:block;width:100%;text-align:left;background:none;border:0;border-radius:var(--r);padding:6px 8px;cursor:pointer;color:var(--ink)}
.a2 .hrow:hover,.a2 .hrow:focus-visible{background:var(--raised);outline:none}
.a2 .hrow.on{background:var(--raised);box-shadow:inset 2px 0 0 var(--accent)}
.a2 .hrow b{display:block;font:500 12.5px var(--font-ui);color:var(--strong)}
.a2 .hrow span{display:block;font:11px/1.4 var(--font-mono);color:var(--muted);margin-top:1px}
.a2 .hrow mark{background:var(--accent-soft);color:var(--accent)}
.a2 .hnone{font:12px var(--font-mono);color:var(--faint);padding:6px 8px}
.a2 .hkeys{margin-top:auto;align-self:flex-start;background:none;border:0;padding:12px 8px 0;font:11.5px var(--font-mono);color:var(--faint);cursor:pointer}
.a2 .hkeys:hover{color:var(--strong)}
.a2 .hkeys kbd{margin-left:8px;border:1px solid var(--rule);border-radius:4px;padding:0 5px;font:inherit}
.a2 .hask{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:var(--accent-soft);border:1px solid var(--rule);border-radius:var(--r);padding:7px 8px;margin-bottom:6px;cursor:pointer;color:var(--strong);font:12.5px var(--font-ui)}
.a2 .hask:hover,.a2 .hask:focus-visible{border-color:var(--accent);outline:none}
.a2 .hask i{flex:none;font:normal 11px var(--font-mono);color:var(--accent)}
.a2 .hask span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (pointer:coarse){.a2 .hask{min-height:44px}}
.a2 .hpage{min-height:0;overflow:auto;outline:none;padding:22px 32px 56px;container:md/inline-size}
.a2 .hpage .hback{display:none}
.a2 .hpage .hstart{margin:0 0 12px}
.a2 .htitle{margin:0;font:500 20px var(--font-head);color:var(--strong)}
.a2 .hwhen{font:11.5px var(--font-mono);color:var(--faint);margin:4px 0 18px}
.a2 .hbody .doc{max-width:760px;font-family:var(--font-prose);font-size:var(--prose-size);line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.a2 .hbody .doc h2{font-size:1.3em;scroll-margin-top:12px}
/* The Help tab below 640 px, Settings' breakpoint: the list, then the page
   with a back arrow (data-screen, set from the URL by help.js). */
@media (max-width:640px){
  .a2 .helpv{grid-template-columns:minmax(0,1fr)}
  .a2 .hlist{border-right:0;padding:10px 12px 20px}
  .a2 .helpv[data-screen=page] .hlist,.a2 .helpv[data-screen=list] .hpage{display:none}
  .a2 .hpage{padding:12px 14px 40px}
  /* the back arrow stays at the top of the column while the page scrolls */
  .a2 .hpage .hback{display:inline-block;margin:0 8px 12px 0;position:sticky;top:0;z-index:2}
  .a2 .hbody .doc h2{scroll-margin-top:68px}  /* .hpage padding 12 + sticky .hback 44 + 12 */
}
@media (pointer:coarse){
  .a2 .hrow{padding:10px 8px}
  .a2 .hkeys{min-height:44px}
}

/* the recap: aegis's own two sentences, last in the transcript */
.a2 .row.recap .g{color:var(--accent)}
.a2 .row.recap .g .ic{width:14px;height:14px}
.a2 .row.recap .body{font-size:12.5px;color:var(--muted)}
.a2 .row.recap .lbl{color:var(--accent);font-family:var(--font-chrome)}
/* a side note: the recap's box in the comms colour, so the two never read as one */
.a2 .row.btw .g{color:var(--comms)}
.a2 .row.btw .g .ic{width:14px;height:14px}
.a2 .row.btw:not(.folded) .body{border:1px solid var(--rule);border-left:3px solid var(--comms);border-radius:var(--r);background:color-mix(in srgb,var(--comms) 8%,transparent);padding:10px 14px}
.a2 .row.btw .hd{display:flex;gap:8px;align-items:baseline;font-family:var(--font-chrome);font-size:11.5px;color:var(--comms);margin-bottom:6px;cursor:pointer}
.a2 .row.btw .hd .q{color:var(--strong);font-family:var(--font-ui);font-size:13.5px;min-width:0;overflow-wrap:anywhere}
.a2 .row.btw .ans{font-size:14.5px;color:var(--strong);line-height:1.5}
.a2 .row.btw .ans.wait{color:var(--muted);font-family:var(--font-mono);font-size:12px}
.a2 .row.btw .more{margin-top:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--warn)}
.a2 .row.btw .why{font-family:var(--font-mono);font-size:12px;color:var(--err)}
.a2 .row.btw .ft{font-family:var(--font-mono);font-size:11px;color:var(--faint);margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.a2 .row.btw .btn.link{background:none;border:none;padding:0;color:var(--muted);text-decoration:underline;font-size:11px}
.a2 .row.btw .sum{display:none}
.a2 .row.btw.folded .sum{display:inline;font-size:12.5px;color:var(--muted);cursor:pointer;overflow-wrap:anywhere}
.a2 .row.btw.folded .lbl{color:var(--comms);font-family:var(--font-chrome)}
.a2 .row.btw.folded .hd,.a2 .row.btw.folded .full{display:none}
@media (pointer:coarse){.a2 .row.btw .btn.link{padding:12px 4px}}

/* narrow and touch: last, so these win over the rules above */
/* the panel's button: collapses it on a desktop, opens the drawer on a phone */
/* the Journal's button: the same icon button, in every view */
.a2 .jr-btn{display:grid;place-items:center;width:30px;height:28px;padding:0;margin:0 1px 6px;background:none;border:1px solid transparent;border-radius:var(--r);color:var(--muted);cursor:pointer}
.a2 .jr-btn:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.a2 .side-btn{display:none}
/* The panel's toggle (#586, #631): the navigation pill's last button, on a
   phone too. The open drawer covers the pill, and a tap on the dimmed page or
   on a tab closes it, so the header keeps its one row. */
.a2 .nav .side-btn{display:grid}
.a2 .side-btn svg,.a2 .jr-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.a2 .side-btn:hover,.a2 .jr-btn:hover{color:var(--strong)}
.a2 .grip{display:none}
@media (min-width:761px){
  .a2:not([data-side=closed]) .side-btn{color:var(--accent)}
  .a2[data-side=closed] .v-session{grid-template-columns:minmax(0,1fr)}
  .a2[data-side=closed] .v-session>.side,.a2[data-side=closed] .v-session>.grip{display:none}
  /* the resize grip: on the panel's left edge, wider than the line it draws */
  .a2 .v-session>.grip{display:block;position:absolute;top:0;bottom:0;right:calc(var(--side-w,260px) - 4px);width:9px;cursor:col-resize;z-index:6;touch-action:none}
  .a2 .grip:after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;transition:background .12s}
  .a2 .grip:hover:after,.a2[data-resizing] .grip:after{background:var(--accent);left:3px;width:2px}
  .a2[data-resizing],.a2[data-resizing] *{cursor:col-resize !important;user-select:none}
}
/* A phone: the desktop markup, wrapped. Tabs take their own scrolling row, the
   side panel slides in as a drawer (data-side=open), the band stacks. */
@media (max-width:760px){
  .a2 .tabs{flex-wrap:wrap;padding:4px 6px 0;padding-top:max(4px,env(safe-area-inset-top))}
  /* Two rows (#631): the server and the buttons, then Fleet, the tabs, the
     overflow menu and + on the tab row. The spacer is the line between. */
  .a2 .tabs .gap{order:7;flex:1 0 100%;height:0;margin:2px -2px 0;border-top:1px solid var(--rule)}
  .a2 .tabs .tab.home{order:8}
  .a2 .tablist{order:9;flex:1 1 0;padding:0 2px}
  .a2 .tabs .tab-more{order:10}
  .a2 .tabs .tab.add{order:11}
  /* the name takes the row's free width with a zero basis, and shrinks first */
  .a2 .tabs .servers{flex:1 1 0;justify-content:flex-start;padding:0 6px;margin-bottom:4px;min-width:0;overflow:hidden}
  /* the server's name gives way first, so the header's buttons keep their row */
  .a2 #conn-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .a2 .tabs .ver-top{display:none}
  .a2 .keys-btn:not(.bell):not(.set-btn):not(.help-btn){display:none}
  /* the header's buttons: bare icons, the tap target kept by (pointer:coarse) */
  .a2 .tabs .keys-btn.bell,.a2 .tabs .set-btn,.a2 .tabs .jr-btn,.a2 .tabs .help-btn{display:grid;place-items:center;background:none;border-color:transparent;margin:0 0 4px;padding:0}
  /* Files joins this row (#586): the 40 px targets stay, and the row gives up
     a pixel of each gap and most of its side padding instead. */
  .a2 .tabs .set-btn,.a2 .tabs .jr-btn,.a2 .tabs .help-btn{min-width:40px}
  .a2 .tabs{gap:1px;padding-left:2px;padding-right:2px}
  .a2 .tabs .tab.home,.a2 .tabs .tab.add{padding-left:8px;padding-right:8px}
  .a2 .tabs .servers{padding:0 2px}
  .a2 .tabs .help-btn{font-size:16px}
  .a2 .tabs .keys-btn.bell .ic,.a2 .tabs .set-btn .ic,.a2 .tabs .jr-btn svg{width:18px;height:18px}
  .a2 .set-btn .lbl{display:none}
  .a2 .set-btn .ic{display:inline-block}
  .a2 .journal{padding:12px 12px 24px}
  .a2 .jfiles{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 8px;padding:0 14px;font-family:var(--font-mono);font-size:12px;color:var(--muted);border:1px solid var(--rule);border-radius:999px;text-decoration:none}
  .a2 .jfiles .ic{width:15px;height:15px}
  .a2 .jfiles:hover,.a2 .jfiles:focus-visible{color:var(--strong);border-color:var(--faint);outline:none}
  .a2 .schedules{padding:12px 12px 24px}
  .a2 .schedules .sch-grid{grid-template-columns:1fr}
  .a2 .schedules .layer{grid-template-columns:1fr;gap:2px}
  .a2 .schedules table.runs tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;border-top:1px solid var(--rule);padding:5px 0}
  .a2 .schedules table.runs td{border:0;padding:0}
  .a2 .schedules table.runs td.what{grid-column:1/-1}
  .a2 .schedules .sch-dhead .btn{flex:1}
  .a2 .schedules .sch-in{font-size:16px}
  /* 16 px: iOS Safari does not zoom the page when the box takes focus. */
  .a2 .jsearch .jq{font-size:16px;padding:6px 0}
  /* the kind chips: one row that scrolls sideways, edge to edge */
  .a2 .jkinds{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px -12px 0;padding:0 12px}
  .a2 .jkinds::-webkit-scrollbar{display:none}
  .a2 .jkind{flex:none}
  .a2 .journal .jthread{--jt:54px}
  .a2 .journal .jent{grid-template-columns:38px 20px minmax(0,1fr);column-gap:7px;padding-right:6px}
  /* the tab row scrolls sideways, so a tab keeps its title instead of shrinking */
  .a2 .tablist .tab{flex:none}
  /* no hover in the drawer: a tap opens a row's card under it */
  .a2 .pcard{position:static;width:auto;max-height:none;margin:8px 0 2px;box-shadow:none;transition:none}
  .a2 .prow.open>.pcard{display:block}
  .a2[data-view=session] .v-session{grid-template-columns:minmax(0,1fr)}
  /* The drawer and its dimmed page start under the header (--hdr, its height,
     kept by app.js), so ☰ and the tabs stay tappable while it is open. */
  .a2 .side{position:fixed;top:var(--hdr,0px);right:0;bottom:0;width:min(330px,88vw);z-index:30;
    transform:translateX(100%);transition:transform .18s ease;box-shadow:-8px 0 24px rgba(0,0,0,.5);
    padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .a2[data-side=open] .side{transform:none}
  .a2[data-side=open] .v-session:after{content:"";position:fixed;inset:var(--hdr,0px) 0 0 0;z-index:29;background:rgba(0,0,0,.5)}
  .a2 .tr{padding:12px 12px 52px}
  .a2 .tr:before{left:22px}
  .a2 .composer{padding:6px 8px max(8px,env(safe-area-inset-bottom))}
  /* One line of text centred on the 44 px buttons: 16+24+16 = 6+44+6. At 16 px
     iOS Safari does not zoom the page when the field takes focus. */
  .a2 :is(.composer,.spawn) textarea{font-size:16px;line-height:24px;padding:16px 12px}
  .a2 :is(.composer,.spawn) .acts{padding:6px 6px 6px 0}
  /* The monitor card: a sheet over the drawer, not beside it. */
  .a2 .mcard{left:8px;right:8px;top:auto;bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-height:70vh;z-index:35}
  .a2 .band{grid-template-columns:minmax(0,1fr);gap:14px;padding:12px 14px}
  .a2 #band{padding-left:58px}
  .a2 #band .band-mark{left:14px;top:12px;translate:none}
  .a2 #band .gorgon{width:32px;height:32px}
  .a2 .gauge{grid-template-columns:62px minmax(0,1fr) max-content;gap:8px}
  .a2 .cards{padding:12px;gap:10px}
  /* The archive (#295): a row is its title over handle · where · age · cost,
     with Reopen on the right, and a tap on the row reads it. The server filter
     keeps its width and wraps under the search box rather than shrinking. */
  .a2 .archive{padding:4px 12px 24px}
  .a2 .archive-head{flex-wrap:wrap;gap:8px 12px}
  .a2 .archive-head input{flex:1 1 180px;min-width:0;max-width:none}
  .a2 .arch-servers{flex:none;max-width:100%;overflow-x:auto}
  .a2 #arch-list .tbl,.a2 #arch-list tbody{display:block}
  .a2 #arch-list tr:not([data-id]){display:none}
  /* The meta line's cells start at 0 wide (min-width:0) and fill up to their
     text, short ones first, so the handle and the directory are the ones cut. */
  .a2 #arch-list tr[data-id]{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;align-content:center;row-gap:2px;position:relative;min-height:60px;padding:8px 60px 8px 4px;border-bottom:1px solid var(--rule)}
  .a2 #arch-list tr.sel{background:var(--accent-soft)}
  .a2 #arch-list td{display:block;padding:0;border:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none}
  .a2 #arch-list td:first-child{grid-column:1/-1;contain:inline-size;font-size:13.5px}
  .a2 #arch-list td.m{font-size:11.5px}
  .a2 #arch-list td.m+td.m:before{content:"·";margin:0 6px;color:var(--faint)}
  .a2 #arch-list td.acts{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;overflow:visible}
  .a2 #arch-list td.acts .read{display:none}
  .a2[data-view=spawn] .v-spawn{padding:16px 10px;place-items:start stretch}
  .a2 .row.closing{display:grid}
  .a2 .row.closing .g{color:var(--ok)}
  .a2 #closing-btn{min-height:44px;padding:10px 18px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.a2 .side{transition:none}}
/* Touch, at any width: 44 px targets. */
@media (pointer:coarse){
  .a2 .spawn .hint .go,.a2 .spawn .hint .x,.a2 .spawn .doc .run,.a2 .spawn .doc .more{min-height:44px}
  .a2 .spawn .doc .more{min-width:44px;justify-content:center}
  .a2 .spawn .hint .x{min-width:44px}
  .a2 .rp{min-height:44px;padding:10px 14px;font-size:14.5px}
  .a2 .row.queued .ctl .btn{min-height:44px;padding:10px 16px;font-size:14.5px}
  .a2 :is(.composer,.spawn) .acts .send,.a2 .composer .acts .int,.a2 .mic{min-width:44px;min-height:44px}
  .a2 pick-chip .opt{min-height:44px;display:flex;align-items:center}
  .a2 .tab{min-height:40px}
  /* every header icon one size, so their icons share a line (#631) */
  .a2 .tabs :is(.keys-btn.bell,.set-btn,.jr-btn,.help-btn){min-width:40px;min-height:40px}
  .a2 .nav button{height:34px;min-width:36px}
  .a2 .nav button::before{content:"";position:absolute;inset:-5px 0}
  .a2 .tr{padding-bottom:66px}
  .a2 .row.tool details>summary{padding:9px 0}
  .a2 .btn{min-height:44px}
  .a2 .tbl td.acts .btn{width:44px;height:44px}
}
/* Toasts (toast.js): cards in the bottom-right; in a session toast.js lifts
   them above the message box. Full width on a phone. */
.a2 .toasts{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-direction:column;gap:6px;width:min(320px,calc(100vw - 32px));pointer-events:none}
.a2 .toast{pointer-events:auto;position:relative;overflow:hidden;padding:8px 30px 10px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 8px 22px rgba(0,0,0,.4);animation:toast-in .24s cubic-bezier(.2,.8,.2,1)}
.a2 .toast .hd{display:flex;gap:6px;align-items:center;font-family:var(--font-chrome);font-size:11px;color:var(--muted)}
.a2 .toast .hd .ic{width:12px;height:12px;flex:none}
.a2 .toast .hd .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .toast .hd .go{color:var(--faint);flex:none}
.a2 .toast .msg{font-family:var(--font-ui);font-size:12.5px;line-height:1.4;color:var(--strong);margin-top:3px;overflow-wrap:anywhere}
.a2 .toast.error .hd{color:var(--err)}
.a2 .toast.from{cursor:pointer}
.a2 .toast.from .hd{color:var(--accent)}
.a2 .toast .x{position:absolute;top:4px;right:4px;width:22px;height:22px;display:grid;place-items:center;border:0;background:none;color:var(--faint);cursor:pointer;border-radius:4px;padding:0}
.a2 .toast .x .ic{width:12px;height:12px}
.a2 .toast .x:hover{color:var(--strong);background:var(--raised)}
.a2 .toast .life{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--muted);opacity:.5;transform-origin:left;animation:toast-life linear forwards}
.a2 .toast.error .life{background:var(--err)}
.a2 .toast.from .life{background:var(--accent)}
.a2 .toast:hover .life{animation-play-state:paused}
.a2 .toast.out{animation:toast-out .18s ease-in forwards}
.a2 .toast .act{margin-top:6px;padding:3px 10px;font-size:11.5px}
.a2 .toast.sticky .life{display:none}
@keyframes toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(12px)}}
@keyframes toast-life{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.a2 .toast,.a2 .toast.out{animation:none}.a2 .toast .life{display:none}}
@media (max-width:640px){.a2 .toasts{left:8px;right:8px;width:auto}}
@media (pointer:coarse){.a2 .toast{padding-right:42px}.a2 .toast .x{width:40px;height:40px;top:0;right:0}}

/* Linked servers (links.py): a server's tag, its band and cards under this
   server's, and what goes grey while its link is down. */
.a2 .where{font:500 10px/1 var(--font-mono);letter-spacing:.02em;color:var(--faint);margin-left:2px;flex:none;align-self:center}
.a2 .band .band-link{font-weight:400;color:var(--faint);margin-left:8px;text-transform:none;letter-spacing:0}
.a2 .band.off .band-link{color:var(--err)}
.a2 .band.off .band-counts,.a2 .band.off .band-host,.a2 .band.off .q{opacity:.45}
.a2 #remotes .remote > .band{border-top:1px solid var(--rule)}
.a2 .card.off{opacity:.5;filter:grayscale(.6)}
.a2 .tab.off{opacity:.45}
/* A full bar scrolls sideways; a tab gives up its title first, then its handle,
   and keeps its server's tag. */
/* A tab keeps its whole handle and never shrinks; a full strip scrolls sideways
   and fades at its right edge (#586). The title is cut to the handle's width. */
.a2 .tablist .tab{flex:none;padding-top:4px;padding-bottom:4px}
.a2 .tablist{mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.a2 .tab .l2{display:grid;line-height:1.2}
.a2 .tab .tt{font:10.5px/1.25 var(--font-ui);opacity:.75;width:0;min-width:100%;overflow:hidden;text-overflow:ellipsis}
.a2 .tab .tt:empty{display:none}
/* The new tab's directory line names the server once one is linked. */
.a2 .spawn .cwdline{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
.a2 .spawn .cwdline .cwd{flex:1;min-width:0}
.a2 .spawn .cwdline .srvpick:not([hidden]) + .srvsep + .cwd{text-align:left}
.a2 .spawn .srvpick{background:none;border:none;font-family:var(--font-mono);font-size:12px;color:var(--accent);cursor:pointer}
.a2 .spawn .srvsep{font-family:var(--font-mono);font-size:12px;color:var(--faint)}
/* Settings: what this browser alone keeps. */
.a2 .set-browser{margin:24px 0 26px}
/* Loading and no config: the same page, the message where the title goes. */
.a2 .set-page>.notice{margin:0;text-align:left}
.a2 .set-page>.set-empty{margin:4vh 0 0;padding:0}
.a2 .set-page>.set-empty+.set-browser,.a2 .set-page>.notice+.set-browser{margin-top:36px}
.a2 .set-knowledge h3,.a2 .set-browser h3,.a2 .set-servers h3{margin:0 0 4px;font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--strong)}
.a2 .set-browser-row{display:flex;align-items:center;gap:12px;margin:10px 0 8px}
.a2 .set-knowledge{margin:0 0 26px}
.a2 .set-native{cursor:pointer;font-size:14px;color:var(--ink)}
.a2 .set-native input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent)}
.a2 #set-native-note.err{color:var(--err)}
.a2 .set-browser-k{font-family:var(--font-chrome);font-size:12px;color:var(--muted);min-width:64px}
.a2 .set-speak-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.a2 .set-speak-note{color:var(--muted);overflow-wrap:anywhere}
.a2 .set-push-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--rule)}
.a2 .set-push-row .btn{grid-row:span 2}
.a2 .set-push-dev{font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.a2 .set-push-here{color:var(--accent);font-family:var(--font-mono);font-size:11px}
.a2 .set-push-facts{grid-column:1;font-family:var(--font-mono);font-size:11px;color:var(--muted);overflow-wrap:anywhere}
/* Settings: the servers this one links. */
.a2 .set-servers{margin:0 0 22px}
.a2 .set-pill{font-family:var(--font-mono);font-size:11px;border:1px solid var(--rule);border-radius:4px;padding:2px 6px}
.a2 .set-pill.ok{color:var(--ok)}
.a2 .set-pill.bad{color:var(--err)}
.a2 .set-linkrow{display:flex;gap:8px;margin-top:10px}
.a2 .set-link-trust{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
/* Whose a session is, when it is not this browser's (tokens.py). */
.a2 .tab .who,.a2 .card .who{font-family:var(--font-mono);font-size:10.5px;color:var(--comms);border:1px solid var(--rule);border-radius:999px;padding:0 7px;margin-left:6px;white-space:nowrap}
.a2 .set-once{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.a2 .set-once code{font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
/* Settings: the tokens and their quota policies (quota_gate.py), from the
   multi-user spec's editor mockup. A card is a .set-agent; a window's track
   is drawn like a quota gauge, with a green launch handle and a red stop one. */
.a2 .set-tokens{margin:0 0 22px}
.a2 .set-tokens h3{margin:0 0 4px;font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--strong)}
.a2 .set-tokens>.set-none{margin:0 0 10px}
.a2 .set-pill.warn{color:var(--warn)}
.a2 .set-tok .set-pill{flex:none}
.a2 .set-tok .set-used{font-size:11.5px}
.a2 .set-tok .set-gap{margin-left:auto}
.a2 .set-tok .link.danger{opacity:1}
.a2 .set-tokens .poolnow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 24px;padding:10px 14px;background:var(--side);border:1px solid var(--rule);border-radius:var(--r-lg);margin-bottom:10px}
.a2 .set-tokens .poolnow h5{margin:0 0 2px;font:500 11.5px var(--font-chrome);color:var(--faint)}
.a2 .set-tokens .poolnow .bar{position:relative;overflow:visible;margin:4px 0 6px}
.a2 .set-tokens .pol{grid-column:1/-1;display:grid;gap:10px;margin-top:4px;padding-top:10px;border-top:1px dashed var(--rule)}
.a2 .set-tokens .poolrow{display:grid;grid-template-columns:108px minmax(0,1fr);gap:8px 12px;align-items:start}
.a2 .set-tokens .poolrow .pl{font:500 12px var(--font-chrome);color:var(--strong);padding-top:4px}
.a2 .set-tokens .modeline{display:flex;gap:10px;align-items:center;margin-bottom:2px}
.a2 .set-tokens .winrow{display:grid;grid-template-columns:96px minmax(0,1fr) 230px;grid-template-areas:"name track read";gap:4px 12px;align-items:center;margin:2px 0}
.a2 .set-tokens .winrow .wl{grid-area:name;display:flex;flex-direction:column;gap:3px}
.a2 .set-tokens .winrow .track{grid-area:track}
.a2 .set-tokens .winrow .wv{grid-area:read}
.a2 .set-tokens .winrow label{font:11.5px var(--font-chrome);color:var(--muted);display:flex;gap:5px;align-items:center;cursor:pointer}
.a2 .set-tokens .winrow input[type=checkbox]{accent-color:var(--accent);margin:0}
.a2 .set-tokens .track{position:relative;height:6px;background:var(--raised);border-radius:3px;margin:18px 7px 8px;touch-action:none}
.a2 .set-tokens .winrow.off .track{opacity:.35;margin-top:8px}
.a2 .set-tokens .track>i{position:absolute;left:0;top:0;bottom:0;background:var(--ok);opacity:.55;border-radius:3px}
.a2 .set-tokens .zone{position:absolute;top:0;bottom:0}
.a2 .set-tokens .zone.closed{background:color-mix(in srgb,var(--warn) 22%,transparent)}
.a2 .set-tokens .zone.stop{background:color-mix(in srgb,var(--err) 32%,transparent);border-radius:0 3px 3px 0}
.a2 .set-tokens .h{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--surface);padding:0;cursor:grab;z-index:2}
.a2 .set-tokens .h:active{cursor:grabbing}
.a2 .set-tokens .h.l{background:var(--ok)}
.a2 .set-tokens .h.s{background:var(--err)}
.a2 .set-tokens .h:focus-visible{outline:2px solid var(--strong);outline-offset:1px}
.a2 .set-tokens .h span,.a2 .set-tokens .pace span{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font:10.5px var(--font-chrome);white-space:nowrap;pointer-events:none}
.a2 .set-tokens .h.l span,.a2 .set-tokens .pace span{color:var(--ok)}
.a2 .set-tokens .h.s span{color:var(--err)}
.a2 .set-tokens .pace{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--ok);z-index:1}
.a2 .set-tokens .wv{font:11px var(--font-chrome);color:var(--faint);display:flex;flex-direction:column;gap:3px}
@media (max-width:640px){
  .a2 .set-tokens .set-linkrow{flex-wrap:wrap}
  .a2 .set-tokens .set-linkrow .set-in{flex-basis:100%}
  .a2 .set-tokens .set-linkrow .btn{flex:1}
  .a2 .set-servers .set-linkrow{flex-wrap:wrap}
  .a2 .set-servers .set-linkrow .set-in{flex-basis:100%}
  .a2 .set-servers .set-linkrow .btn{flex:1}
  .a2 .set-tokens .poolnow{grid-template-columns:1fr 1fr;padding:8px 10px;gap:6px 16px}
  .a2 .set-tokens .poolrow{grid-template-columns:1fr;gap:4px}
  .a2 .set-tokens .poolrow .pl{padding-top:0}
  .a2 .set-tokens .modeline{flex-wrap:wrap}
  .a2 .set-tokens .winrow{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "track" "read";margin:6px 0 2px}
  .a2 .set-tokens .winrow .wl{flex-direction:row;gap:14px}
  .a2 .set-tokens .track{margin:20px 11px 10px}
  .a2 .set-tokens .winrow.off .track{display:none}
}
/* Fingers: a bigger dot, and a hit area wider than the dot. */
@media (pointer:coarse){
  .a2 .set-tokens .h{width:20px;height:20px;margin:-10px 0 0 -10px}
  .a2 .set-tokens .h::before{content:"";position:absolute;inset:-12px}
  .a2 .set-tokens .h span{bottom:18px}
}
.a2 .set-linkrow .set-in{flex:1;min-width:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:6px 9px;font-family:var(--font-mono);font-size:12px;color:var(--ink)}
.a2 .set-srvpick{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.a2 .band .prov.same{color:var(--faint)}
/* The archive's server filter. */
.a2 .arch-servers{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;font-family:var(--font-mono);font-size:12px}
.a2 .arch-servers[hidden]{display:none}
.a2 .arch-servers button{background:var(--surface);color:var(--muted);border:0;border-right:1px solid var(--rule);padding:5px 10px;cursor:pointer;font:inherit}
.a2 .arch-servers button.on{background:var(--accent-soft);color:var(--strong)}
.a2 .arch-servers button b{margin-left:6px;color:var(--faint);font-weight:500}
.a2 .arch-servers .off{padding:5px 10px;color:var(--err)}
.a2 .arch-workers{flex:none;background:var(--surface);color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:3px 10px;cursor:pointer;font-family:var(--font-mono);font-size:11.5px}
.a2 .arch-workers[hidden]{display:none}
.a2 .arch-workers:hover{border-color:var(--faint)}
.a2 .arch-workers.on{background:var(--accent-soft);color:var(--strong)}
.a2 .arch-workers b{margin-left:6px;color:var(--faint);font-weight:500}
@media (pointer:coarse){.a2 .schedules .seg button{padding:10px 14px}.a2 .schedules .sch-row{padding:11px 12px}.a2 .schedules .sch-dhead .btn{min-height:44px}}

/* Terminals (#362): xterm.js reads these through js/terminal.js. */
.a2 {
  --term-bg: var(--surface);
  --term-fg: var(--ink);
  --term-cursor: var(--accent);
  --term-cursor-text: var(--surface);
  --term-selection: var(--accent-soft);
  --term-selection-inactive: var(--accent-soft);
  --ansi-black: var(--chrome);
  --ansi-red: var(--err);
  --ansi-green: var(--ok);
  --ansi-yellow: var(--warn);
  --ansi-blue: var(--accent);
  --ansi-magenta: var(--comms);
  --ansi-cyan: color-mix(in oklab, var(--accent) 50%, var(--ok));
  --ansi-white: var(--ink);
  --ansi-bright-black: var(--muted);
  --ansi-bright-red: color-mix(in oklab, var(--ansi-red) 75%, var(--strong));
  --ansi-bright-green: color-mix(in oklab, var(--ansi-green) 75%, var(--strong));
  --ansi-bright-yellow: color-mix(in oklab, var(--ansi-yellow) 75%, var(--strong));
  --ansi-bright-blue: color-mix(in oklab, var(--ansi-blue) 75%, var(--strong));
  --ansi-bright-magenta: color-mix(in oklab, var(--ansi-magenta) 75%, var(--strong));
  --ansi-bright-cyan: color-mix(in oklab, var(--ansi-cyan) 75%, var(--strong));
  --ansi-bright-white: var(--strong);
  --term-font: var(--font-mono);
}
.a2 .term-host { flex: 1; min-height: 0; overflow-x: auto; background: var(--term-bg); padding: 6px 8px; border-radius: var(--r); cursor: text; }
.a2 .term-host.direct { outline: 1px solid var(--accent); }
/* A terminal's tab: the pane, and the 300 px panel beside it; a column on a phone. */
.a2[data-view=term] .v-term{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0}
.a2 .term-pane{display:flex;flex-direction:column;min-width:0;min-height:0;padding:10px 22px 16px;gap:8px}
.a2 .term-hd{display:flex;gap:10px;align-items:baseline;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.a2 .term-hd .term-name{color:var(--strong);font-weight:600}
.a2 .term-hd .term-mode{margin-left:auto}
.a2 .term-host .xterm{height:auto}
.a2 .term-box{display:flex;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg)}
.a2 .term-box:focus-within{border-color:var(--accent)}
.a2 .term-box textarea{flex:1;min-width:0;resize:none;padding:10px 14px;font-size:13px;line-height:1.45;background:none;border:none;color:var(--strong);font-family:var(--font-mono);outline:none}
.a2 .term-box textarea::placeholder{color:var(--faint);opacity:1}
.a2 .term-keys{display:flex;gap:6px;overflow-x:auto}
.a2 .term-keys[hidden]{display:none}
.a2 .term-keys button{flex:1 0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r);font-family:var(--font-mono);font-size:13px;padding:4px 8px}
.a2 .term-side{border-left:1px solid var(--rule);padding:16px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.a2 .term-proc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:12.5px}
.a2 .term-proc dt{color:var(--muted)}
.a2 .term-proc dd{margin:0;font-family:var(--font-mono);overflow-wrap:anywhere;color:var(--ink)}
.a2 .term-act{display:flex;gap:8px}
.a2 .term-act [hidden]{display:none}
@media (pointer:coarse){.a2 .term-keys button{min-height:44px;min-width:44px}}
@media (max-width:760px){
  .a2[data-view=term] .v-term{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;overflow:auto}
  .a2 .term-pane{padding:6px 8px max(8px,env(safe-area-inset-bottom))}
  .a2 .term-side{border-left:none;border-top:1px solid var(--rule);padding:10px 12px}
}
/* A browser's tab (#564): a bar, the agent's request, and the page's stream. */
.a2[data-view=browser] .v-browser{display:flex;flex-direction:column;min-height:0;padding:8px 16px 12px}
.a2 .br-host{flex:1;min-height:0;display:flex;flex-direction:column}
.a2 .br-view{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.a2 .pbody > .br-host{height:100%;padding:6px}
.a2 .pbody .br-name{display:none} /* the pane's own bar names it */
.a2 .br-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.a2 .br-bar [hidden]{display:none}
.a2 .br-name{color:var(--strong);font-weight:600;white-space:nowrap}
.a2 .br-nav{background:none;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink);font-size:14px;width:28px;height:28px;cursor:pointer}
.a2 .br-nav:disabled{color:var(--faint);cursor:default}
.a2 .br-url{flex:1 1 160px;min-width:0;background:var(--raised);border:1px solid var(--rule);border-radius:var(--r);padding:4px 10px;color:var(--strong);font-family:var(--font-mono);font-size:12px}
.a2 .br-url:read-only{color:var(--muted)}
.a2 .br-holder{border:1px solid var(--rule);border-radius:999px;padding:1px 9px;white-space:nowrap}
.a2 .br-holder.agent{color:var(--comms)}
.a2 .br-holder.person{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.a2 .btn.acc{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.a2 .br-give-wrap{position:relative}
.a2 .br-give-list{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;min-width:160px;background:var(--raised);border:1px solid var(--rule);border-radius:var(--r);padding:4px}
.a2 .br-give-list[hidden]{display:none}
.a2 .br-give-list button{background:none;border:none;color:var(--ink);text-align:left;padding:6px 10px;font-family:var(--font-mono);cursor:pointer}
.a2 .br-give-list button:hover{background:var(--surface)}
.a2 .br-ask{display:flex;gap:10px;align-items:center;padding:8px 12px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r);color:var(--strong)}
.a2 .br-ask[hidden],.a2 .br-bar [hidden]{display:none}
.a2 .br-ask span{flex:1}
.a2 .br-act{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);min-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .br-stage{position:relative;flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;overflow:auto}
.a2 .br-screen{max-width:100%;max-height:100%;background:#fff;border:1px solid var(--rule);border-radius:var(--r);touch-action:none;outline:none}
.a2 .br-screen:focus{border-color:var(--accent)}
.a2 .br-screen.locked{cursor:not-allowed}
.a2 .br-wait{position:absolute;top:40%;color:var(--muted);font-family:var(--font-mono);font-size:12px}
.a2 .br-wait[hidden]{display:none}
@media (max-width:760px){
  .a2[data-view=browser] .v-browser{padding:6px 6px max(8px,env(safe-area-inset-bottom))}
  .a2 .br-url{order:9;flex-basis:100%}
  .a2 .br-nav{width:44px;height:36px}
}
/* The + view's two groups, agents and terminals, and the Fleet's kind filter. */
.a2 .spawn .sp-head,.a2 .sp-terms h3{justify-self:start;margin:6px 0 0;font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--strong)}
.a2 .sp-terms{width:100%;display:grid;gap:8px}
.a2 .sp-terms[hidden]{display:none}
/* Typing a first message is choosing an agent: the box takes the room the
   two groups and their headings held (#384). */
.a2 .spawn:has(#sp-text:not(:placeholder-shown)) :is(.sp-terms,.sp-head){display:none}
.a2 .sp-term-list{display:flex;flex-wrap:wrap;gap:6px}
.a2 .sp-term-list button{display:flex;gap:8px;align-items:baseline;min-width:0;max-width:100%;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:6px 10px;color:var(--muted);font-family:var(--font-mono);font-size:12.5px;cursor:pointer;text-align:left}
.a2 .sp-term-list button b{color:var(--strong);font-weight:600}
.a2 .sp-term-list button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2 .sp-term-list button:hover:not(:disabled){border-color:var(--accent)}
.a2 .sp-term-list button:disabled{cursor:not-allowed;opacity:.7}
.a2 .sp-term-list button:disabled span{color:var(--err)}
.a2 .order{gap:10px;flex-wrap:wrap}
.a2 .order h3{flex:1}
.a2 .seg button[aria-checked=true]{background:var(--accent-soft);color:var(--strong)}
.a2 .arch-terms{margin-top:16px}
.a2 .arch-terms[hidden]{display:none}
.a2 .arch-terms h4{margin:0 0 8px;font-family:var(--font-head);font-weight:500;font-size:13.5px;color:var(--strong)}
.a2 .card.term .ln{font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (pointer:coarse){.a2 .sp-term-list button,.a2 .kinds button{min-height:44px}}
/* The selection bar (js/menu.js bar): over a transcript selection; on a coarse pointer under it, icons only. */
.a2 .sbar{position:fixed;z-index:60;display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.a2 .sbar .btn{display:flex;gap:6px;align-items:center;border:0;white-space:nowrap}
.a2 .sbar .btn .ic{flex-shrink:0;width:14px;height:14px;color:var(--muted)}
@media (pointer:coarse){.a2 .sbar .btn{min-height:44px;min-width:44px;justify-content:center}.a2 .sbar .btn .lb{display:none}}
/* The comment tray at the bottom of the viewer or the Files pane, and its pins (#479). */
.a2 .ctray{flex:none;max-height:40%;overflow:auto;border-top:1px solid var(--rule);background:var(--surface);font-family:var(--font-chrome);font-size:12.5px}
.a2 .ctray[hidden]{display:none}
.a2 .ctray .chead{display:flex;align-items:center;gap:6px;padding:6px 12px}
.a2 .ctray .cn{margin-right:auto;color:var(--muted)}
.a2 .ctray .clist{list-style:none;margin:0;padding:0 12px 8px}
.a2 .ctray li{display:flex;align-items:center;gap:8px;padding:2px 0}
.a2 .ctray li .n{min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--on-accent);text-align:center;line-height:18px;font-size:11px}
.a2 .ctray li .loc{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-family:var(--font-mono)}
.a2 .ctray li .note{flex:1;min-width:0;padding:3px 8px;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);color:var(--strong);outline:none}
.a2 .ctray li .note:focus{border-color:var(--accent)}
.a2 .pin{position:absolute;transform:translate(-110%,-20%);user-select:none;pointer-events:none}
.a2 .pin::before{content:attr(data-n);display:block;min-width:16px;height:16px;border-radius:8px;background:var(--accent);color:var(--on-accent);text-align:center;font:600 10px/16px var(--font-chrome)}
/* Aizome: indigo-dyed cloth; cotton-white sashiko stitches for the thread and rules, seigaiha waves in the panel. */
[data-theme=aizome] .a2{
  --bg:#15213f;--chrome:#0f1832;--side:#121d39;--surface:#1b2a4f;--raised:#22335d;--rule:#33477a;
  --ink:#e8e1cf;--strong:#f7f1e3;--muted:#aab2c9;--faint:#7883a6;
  --accent:#f1e7cf;--accent-soft:rgba(241,231,207,.12);--on-accent:#15213f;
  --ok:#a9d4a0;--err:#f39a86;--err-bg:#2c2440;--warn:#e9a75a;--comms:#c0b4f0;
  --add-bg:#1d3b47;--del-bg:#3a2a46;
  --h-kw:#e9a75a;--h-str:#a9d4a0;--h-num:#f39a86;--h-com:#7883a6;--h-fn:#f7f1e3;--h-type:#c0b4f0;--h-var:#d8d2c2;--h-meta:#aab2c9;
  --font-ui:'Zen Kaku Gothic New',sans-serif;--font-prose:'Shippori Mincho',serif;--font-mono:'JBM',monospace;
  --font-chrome:'Zen Kaku Gothic New',sans-serif;--font-head:'Shippori Mincho',serif;
  --prose-size:16.5px;--r:4px;--r-lg:6px;--time:none;--thread:block;--row-cols:22px 1fr;--fill:var(--accent);
  --stitch:rgba(241,231,207,.42);
}
[data-theme=aizome] .a2 .tr:before{width:2px;left:31.5px;background:repeating-linear-gradient(180deg,var(--stitch) 0 9px,transparent 9px 15px)}
[data-theme=aizome] .a2 .tabs{border-bottom:none;background:linear-gradient(90deg,var(--stitch) 0 9px,transparent 9px 15px) left bottom/15px 2px repeat-x,var(--chrome)}
[data-theme=aizome] .a2 .tab.on{box-shadow:none}
[data-theme=aizome] .a2 .side{border-left:none;background:linear-gradient(180deg,var(--stitch) 0 9px,transparent 9px 15px) left top/2px 15px repeat-y,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23f1e7cf' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M0 20a20 20 0 0 1 40 0M-20 20a20 20 0 0 1 40 0M20 20a20 20 0 0 1 40 0'/%3E%3Cpath d='M6 20a14 14 0 0 1 28 0M14 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M-20 10a20 20 0 0 1 40 0M20 10a20 20 0 0 1 40 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/40px 20px,var(--side)}
[data-theme=aizome] .a2 .row.user .body{outline:1.5px dashed rgba(241,231,207,.32);outline-offset:-5px;padding:11px 14px}
[data-theme=aizome] .a2 .composer .box{border:1.5px dashed rgba(241,231,207,.35)}
[data-theme=aizome] .a2 .md h1,[data-theme=aizome] .a2 .md h2,[data-theme=aizome] .a2 .md h3{font-size:1.25em}
[data-theme=aizome] .a2 .side .title{font-family:var(--font-head);font-weight:600;font-size:17px}
[data-theme=aizome] .a2 .md pre,[data-theme=aizome] .a2 .diff{border:1px dashed var(--rule)}
/* Amphora: black-figure pottery; fired clay, black glaze, a meander under the tab bar, your turns as glazed plaques. */
[data-theme=amphora] .a2{
  --bg:#e6a571;--chrome:#16100c;--side:#dc9a64;--surface:#edb688;--raised:#d38c57;--rule:#b8703e;
  --ink:#22140b;--strong:#100905;--muted:#5e3519;--faint:#84502b;
  --accent:#16100c;--accent-soft:rgba(22,16,12,.12);--on-accent:#efbb88;
  --ok:#36480f;--err:#8a1c10;--err-bg:#f0bf95;--warn:#7d2a12;--comms:#4f2a52;
  --add-bg:#d2b679;--del-bg:#e48b6a;
  --h-kw:#6e1f1a;--h-str:#36480f;--h-num:#8a4a00;--h-com:#84502b;--h-fn:#100905;--h-type:#4f2a52;--h-var:#4a2a14;--h-meta:#5e3519;
  --font-ui:'Inter',sans-serif;--font-prose:'SS4',serif;--font-mono:'JBM',monospace;
  --font-chrome:'Marcellus',serif;--font-head:'Marcellus',serif;
  --prose-size:16.5px;--r:3px;--r-lg:6px;--time:none;--thread:block;--row-cols:22px 1fr;--fill:#16100c;
  --meander:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 10.5h3.5v-9h9v6h-4.5v-3h-1.5v4.5h7.5v-9h-3' fill='none' stroke='%23e6a571' stroke-width='1.3'/%3E%3Cpath d='M15 1.5h9' stroke='%23e6a571' stroke-width='1.3'/%3E%3Cpath d='M0 11.4h24' stroke='%23e6a571' stroke-width='.6' opacity='.6'/%3E%3C/svg%3E");
}
[data-theme=amphora] .a2 .tabs{--muted:#c4946a;--faint:#94704f;--strong:#f3c896;--ink:#e9bc8e;--surface:#241a13;--rule:#3a2b20;--bg:#16100c;
  position:relative;margin-bottom:14px;border-bottom:none;font-size:13px}
[data-theme=amphora] .a2 .tabs:before{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:var(--meander) 0 1px/24px 12px repeat-x,#16100c}
[data-theme=amphora] .a2 .tab.on{background:none;box-shadow:inset 0 -2px 0 #efbb88;color:#f3c896}
[data-theme=amphora] .a2 .row.user .body{background:#16100c;color:#efbb88;border-radius:3px}
[data-theme=amphora] .a2 .row.user .g{color:#16100c}
[data-theme=amphora] .a2 .tr:before{background:#16100c;opacity:.35}
[data-theme=amphora] .a2 .md h1,[data-theme=amphora] .a2 .md h2,[data-theme=amphora] .a2 .md h3{font-size:1.3em;font-weight:400}
[data-theme=amphora] .a2 .side{border-left-color:#b8703e}
[data-theme=amphora] .a2 .side .title{font-family:var(--font-head);font-size:18px}
[data-theme=amphora] .a2 .side h4{font-family:var(--font-head);font-size:12.5px;color:var(--muted)}
[data-theme=amphora] .a2 .tn{font-weight:600}
/* Blueprint: a drafting sheet; white linework on a grid, square corners, the panel as a title block. */
[data-theme=blueprint] .a2{
  --bg:#0e3d78;--chrome:#0a3060;--side:#0c376c;--surface:#114583;--raised:#164e92;--rule:#5b88c4;
  --ink:#e4eeff;--strong:#ffffff;--muted:#a8c2e8;--faint:#7c9dce;
  --accent:#ffffff;--accent-soft:rgba(255,255,255,.13);--on-accent:#0e3d78;
  --ok:#9ef0c4;--err:#ff9c8f;--err-bg:#40305e;--warn:#ffe08a;--comms:#c9b8ff;
  --add-bg:#165c6e;--del-bg:#4a3264;
  --h-kw:#ffe08a;--h-str:#9ef0c4;--h-num:#ffb8a8;--h-com:#7c9dce;--h-fn:#ffffff;--h-type:#c9b8ff;--h-var:#d6e6ff;--h-meta:#a8c2e8;
  --font-ui:'IBM Plex Sans',sans-serif;--font-prose:'IBM Plex Sans',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --font-chrome:'IBM Plex Sans Condensed',sans-serif;--font-head:'IBM Plex Sans Condensed',sans-serif;
  --prose-size:15px;--r:0;--r-lg:0;--time:block;--thread:none;--row-cols:38px 18px 1fr;--fill:#fff;
  --grid:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
}
[data-theme=blueprint] .a2 .tr{background-image:var(--grid);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-attachment:local}
[data-theme=blueprint] .a2 .row .g{background:none}
[data-theme=blueprint] .a2 .row.user .body{background:rgba(14,61,120,.75);border:1px solid #fff}
[data-theme=blueprint] .a2 .row.tool .line{border-bottom:1px dashed rgba(255,255,255,.2)}
[data-theme=blueprint] .a2 .tab.on{box-shadow:inset 0 -2px 0 #fff;background:var(--bg)}
[data-theme=blueprint] .a2 .tabs{border-bottom-color:#fff}
[data-theme=blueprint] .a2 .side{gap:0;border-left:1px solid #fff}
[data-theme=blueprint] .a2 .side>.sec{border:1px solid var(--rule);padding:9px 11px 11px;margin-top:-1px}
[data-theme=blueprint] .a2 .side h4{font-size:11px;letter-spacing:.04em}
[data-theme=blueprint] .a2 .side .title{font-size:17px;font-weight:600}
[data-theme=blueprint] .a2 .md h1,[data-theme=blueprint] .a2 .md h2,[data-theme=blueprint] .a2 .md h3{font-size:1.2em;border-bottom:1px solid var(--rule);padding-bottom:3px}
[data-theme=blueprint] .a2 .composer .box{border-color:#fff;background:rgba(14,61,120,.6)}
[data-theme=blueprint] .a2 .md pre,[data-theme=blueprint] .a2 .diff{border:1px solid var(--rule);background:rgba(10,48,96,.6)}
/* Electric: ultraviolet night; the thread is a lit trace and the glyphs are its nodes. */
[data-theme=electric] .a2{
  --bg:#07071c;--chrome:#050514;--side:#06061a;--surface:#0d0d2b;--raised:#14143a;--rule:#23235a;
  --ink:#d6dcff;--strong:#f5f7ff;--muted:#8d93cf;--faint:#5c62a0;
  --accent:#38e8ff;--accent-soft:rgba(56,232,255,.13);--on-accent:#04041a;
  --ok:#5cffc8;--err:#ff5c9a;--err-bg:#1f0a22;--warn:#ffd25c;--comms:#b18cff;
  --add-bg:#0a2430;--del-bg:#2a0b26;
  --h-kw:#b18cff;--h-str:#5cffc8;--h-num:#ffd25c;--h-com:#5c62a0;--h-fn:#38e8ff;--h-type:#ff7ad9;--h-var:#c9d0ff;--h-meta:#8d93cf;
  --font-ui:'Inter',sans-serif;--font-prose:'Inter',sans-serif;--font-mono:'JBM',monospace;
  --font-chrome:'SpaceG',sans-serif;--font-head:'SpaceG',sans-serif;
  --prose-size:15px;--r:8px;--r-lg:12px;--time:none;--thread:block;--row-cols:22px 1fr;
  --fill:linear-gradient(90deg,#38e8ff,#7b6bff,#ff4fd8);
  --volt:linear-gradient(120deg,#38e8ff,#7b6bff 55%,#ff4fd8);
}
[data-theme=electric] .a2 .tr:before{width:2px;background:linear-gradient(180deg,#38e8ff,#7b6bff 45%,#ff4fd8 85%,transparent);box-shadow:0 0 8px rgba(56,232,255,.6),0 0 22px rgba(123,107,255,.35)}
[data-theme=electric] .a2 .row.tool .g,[data-theme=electric] .a2 .row.prose .g{color:var(--accent)}
[data-theme=electric] .a2 .tabs{border-bottom-color:#1a1a48}
[data-theme=electric] .a2 .tab.on{box-shadow:none;border-radius:8px 8px 0 0}
[data-theme=electric] .a2 .tab.on:after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--volt);box-shadow:0 0 10px rgba(56,232,255,.8)}
[data-theme=electric] .a2 .row.user .body{border:1px solid transparent;border-radius:12px;background:linear-gradient(var(--raised),var(--raised)) padding-box,var(--volt) border-box}
[data-theme=electric] .a2 .tn{font-family:var(--font-chrome);font-weight:600;color:var(--accent)}
[data-theme=electric] .a2 .send,[data-theme=electric] .a2 .btn.primary,[data-theme=electric] .a2 .act.primary{background:var(--volt);color:#fff;border-radius:999px;box-shadow:0 0 16px rgba(123,107,255,.45)}
[data-theme=electric] .a2 .chip{border-radius:999px}
[data-theme=electric] .a2 .composer .box:focus-within,[data-theme=electric] .a2 .composer .box{box-shadow:0 0 0 1px rgba(56,232,255,.18),0 0 28px rgba(56,232,255,.08)}
[data-theme=electric] .a2 .row.working .body{background:linear-gradient(90deg,#38e8ff,#ff4fd8,#38e8ff) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:el-arc 2.4s linear infinite}
[data-theme=electric] .a2 .side .title{font-family:var(--font-head);font-weight:600;font-size:16px}
[data-theme=electric] .a2 .bar i{box-shadow:0 0 8px rgba(56,232,255,.6)}
@keyframes el-arc{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){[data-theme=electric] .a2 .row.working .body{animation:none}}
/* Ink: the TUI's warm dark palette and amber accent; glyphs on a thread. */
[data-theme=ink] .a2{
  --bg:#11100e;--chrome:#0b0a09;--side:#0d0c0b;--surface:#191814;--raised:#1d1b17;--rule:#2a2721;
  --ink:#dcd9cf;--strong:#f1ede2;--muted:#8a867b;--faint:#6f6b62;
  --accent:#e0a872;--accent-soft:rgba(224,168,114,.16);--on-accent:#1a140d;
  --ok:#9db07e;--err:#d9806f;--err-bg:#221512;--warn:#e0a872;--comms:#9fb4d0;
  --add-bg:#18200f;--del-bg:#2a1512;
  --h-kw:#c9a27a;--h-str:#a9b78c;--h-num:#d4a58e;--h-com:#6f6b62;--h-fn:#e6d6b0;--h-type:#a9b9cf;--h-var:#d2c7b4;--h-meta:#8a867b;
  --font-ui:'Inter',sans-serif;--font-prose:'SS4',serif;--font-mono:'JBM',monospace;
  --font-chrome:'JBM',monospace;--font-head:'JBM',monospace;
  --prose-size:16.5px;--r:6px;--r-lg:10px;--time:none;--thread:block;--row-cols:22px 1fr;--fill:var(--accent);
}
[data-theme=ink] .a2 .side .title{font-family:var(--font-ui)}
/* Logbook: daylight lab notebook; times in the margin, a rule between turns. */
[data-theme=logbook] .a2{
  --bg:#fbfbfa;--chrome:#eef0f2;--side:#f3f4f6;--surface:#ffffff;--raised:#eef0f2;--rule:#dfe2e6;
  --ink:#262d38;--strong:#1d2430;--muted:#5d6672;--faint:#9aa1ab;
  --accent:#2f5ba8;--accent-soft:rgba(47,91,168,.10);--on-accent:#fff;
  --ok:#3e7d5a;--err:#b3412e;--err-bg:#fbeeea;--warn:#a8641a;--comms:#6a4fb3;
  --add-bg:#eaf5ee;--del-bg:#fbeeea;
  --h-kw:#2f5ba8;--h-str:#3e7d5a;--h-num:#a8641a;--h-com:#9aa1ab;--h-fn:#1d2430;--h-type:#6a4fb3;--h-var:#4b5563;--h-meta:#7a828d;
  --font-ui:'Inter',sans-serif;--font-prose:'SS4',serif;--font-mono:'JBM',monospace;
  --font-chrome:'Inter',sans-serif;--font-head:'SS4',serif;
  --prose-size:16.5px;--r:6px;--r-lg:10px;--time:block;--thread:none;--row-cols:38px 18px 1fr;--fill:var(--accent);
}
[data-theme=logbook] .a2 .row.user{border-top:1px solid var(--rule);padding-top:12px;margin-top:6px}
[data-theme=logbook] .a2 .row.user .body{background:none;border-left:3px solid var(--accent);border-radius:0;padding:0 0 0 12px;font-weight:500}
[data-theme=logbook] .a2 .row.tool .line{border-bottom:1px dotted var(--rule)}
/* Phosphor: a green CRT; scanlines and bloom, errors in inverse video, a block cursor while working. */
[data-theme=phosphor] .a2{
  --bg:#020c06;--chrome:#010703;--side:#020a05;--surface:#03140a;--raised:#062012;--rule:#0f3d20;
  --ink:#5dff8f;--strong:#c9ffd9;--muted:#36bd69;--faint:#227f46;
  --accent:#b3ffcb;--accent-soft:rgba(93,255,143,.14);--on-accent:#021008;
  --ok:#5dff8f;--err:#ffb000;--err-bg:#1a1203;--warn:#ffb000;--comms:#8cffd0;
  --add-bg:#063015;--del-bg:#2a1a04;
  --h-kw:#c9ffd9;--h-str:#8cffb0;--h-num:#ffb000;--h-com:#227f46;--h-fn:#e6fff0;--h-type:#b3ffcb;--h-var:#5dff8f;--h-meta:#36bd69;
  --font-ui:'IBM Plex Mono',monospace;--font-prose:'IBM Plex Mono',monospace;--font-mono:'IBM Plex Mono',monospace;
  --font-chrome:'IBM Plex Mono',monospace;--font-head:'VT323',monospace;
  --prose-size:14.5px;--r:0;--r-lg:0;--time:block;--thread:none;--row-cols:38px 18px 1fr;--fill:var(--ink);
  text-shadow:0 0 5px rgba(93,255,143,.45);
}
[data-theme=phosphor] .a2{position:relative}
[data-theme=phosphor] .a2:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:100;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5))}
[data-theme=phosphor] .a2 .tab.on{background:var(--ink);color:var(--bg);box-shadow:none;text-shadow:none}
[data-theme=phosphor] .a2 .tab.on .srv{opacity:.7}
[data-theme=phosphor] .a2 .row.user .body{background:none;border:1px solid var(--rule);color:var(--strong)}
[data-theme=phosphor] .a2 .row.tool.err .tn,[data-theme=phosphor] .a2 .row.error .body{background:var(--err);color:var(--bg);padding:0 5px;text-shadow:none}
[data-theme=phosphor] .a2 .row.working .body:after{content:"█";margin-left:6px;animation:ph-blink 1s steps(1) infinite}
[data-theme=phosphor] .a2 .md h1,[data-theme=phosphor] .a2 .md h2,[data-theme=phosphor] .a2 .md h3{font-size:1.75em;font-weight:400;line-height:1}
[data-theme=phosphor] .a2 .side .title{font-family:var(--font-head);font-size:24px;line-height:1}
[data-theme=phosphor] .a2 .side h4{font-family:var(--font-chrome)}
[data-theme=phosphor] .a2 .send,[data-theme=phosphor] .a2 .act.primary{background:var(--ink);color:var(--bg);text-shadow:none}
[data-theme=phosphor] .a2 code{background:none;color:var(--strong)}
@keyframes ph-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){[data-theme=phosphor] .a2 .row.working .body:after{animation:none}}
/* Poster: brutalist print; black 2 px borders, hard offset shadows, wide heavy headings, your turns on yellow. */
[data-theme=poster] .a2{
  --bg:#f2f2f0;--chrome:#ffffff;--side:#ffffff;--surface:#ffffff;--raised:#ffe94d;--rule:#1a1a1a;
  --ink:#141414;--strong:#000;--muted:#444;--faint:#777;
  --accent:#2d3dff;--accent-soft:rgba(45,61,255,.12);--on-accent:#fff;
  --ok:#00873c;--err:#e3001b;--err-bg:#ffe3e3;--warn:#b86200;--comms:#7a2dff;
  --add-bg:#d7f5df;--del-bg:#ffdcdc;
  --h-kw:#2d3dff;--h-str:#00873c;--h-num:#b86200;--h-com:#777777;--h-fn:#000000;--h-type:#7a2dff;--h-var:#141414;--h-meta:#444444;
  --font-ui:'Archivo',sans-serif;--font-prose:'Archivo',sans-serif;--font-mono:'JBM',monospace;
  --font-chrome:'Archivo',sans-serif;--font-head:'Archivo',sans-serif;
  --prose-size:15.5px;--r:0;--r-lg:0;--time:none;--thread:none;--row-cols:22px 1fr;--fill:var(--accent);
}
[data-theme=poster] .a2 .tabs{border-bottom:3px solid #000}
[data-theme=poster] .a2 .tab{font-weight:500}
[data-theme=poster] .a2 .tab.on{background:#000;color:#fff;box-shadow:none}
[data-theme=poster] .a2 .row.user .body{border:2px solid #000;box-shadow:4px 4px 0 #000;font-weight:500;color:#000}
[data-theme=poster] .a2 .composer .box{border:2px solid #000;box-shadow:5px 5px 0 #000}
[data-theme=poster] .a2 .composer .box:focus-within{box-shadow:5px 5px 0 var(--accent);border-color:#000}
[data-theme=poster] .a2 .send,[data-theme=poster] .a2 .act.primary{border:2px solid #000;box-shadow:2px 2px 0 #000}
[data-theme=poster] .a2 .md h1,[data-theme=poster] .a2 .md h2,[data-theme=poster] .a2 .md h3{font-stretch:125%;font-weight:800;font-size:1.3em;letter-spacing:-.01em}
[data-theme=poster] .a2 .side{border-left:3px solid #000;gap:0}
[data-theme=poster] .a2 .side>.sec{border-bottom:2px solid #000;padding:10px 0 14px}
[data-theme=poster] .a2 .side h4{color:#000;font-weight:700;font-stretch:115%}
[data-theme=poster] .a2 .side .title{font-stretch:125%;font-weight:800;font-size:19px;line-height:1.1}
[data-theme=poster] .a2 .tn{font-weight:700}
[data-theme=poster] .a2 .md pre,[data-theme=poster] .a2 .diff{border:2px solid #000}
[data-theme=poster] .a2 .chip,[data-theme=poster] .a2 .act{border:2px solid #000;color:#000}
[data-theme=poster] .a2 .row.user{padding:0 5px 5px 0}
/* Riso: a two-ink risograph print; blue ink on paper, fluoro pink printed a little off register, grain over it all. */
[data-theme=riso] .a2{
  --bg:#efeee8;--chrome:#e5e3dc;--side:#e9e7e0;--surface:#f7f6f1;--raised:#e3e4ee;--rule:#c3c8e0;
  --ink:#2440a8;--strong:#16298a;--muted:#5468b8;--faint:#8b96c8;
  --accent:#ff3d9a;--accent-soft:rgba(255,61,154,.16);--on-accent:#16298a;
  --ok:#00866b;--err:#e8312f;--err-bg:#fde1e6;--warn:#c56a00;--comms:#8a3fd1;
  --add-bg:#d8f0e6;--del-bg:#ffd9e6;
  --h-kw:#e0267f;--h-str:#00866b;--h-num:#c56a00;--h-com:#8b96c8;--h-fn:#16298a;--h-type:#8a3fd1;--h-var:#2440a8;--h-meta:#5468b8;
  --font-ui:'Bricolage Grotesque',sans-serif;--font-prose:'Bricolage Grotesque',sans-serif;--font-mono:'Space Mono',monospace;
  --font-chrome:'Space Mono',monospace;--font-head:'Bricolage Grotesque',sans-serif;
  --prose-size:15.5px;--r:2px;--r-lg:4px;--time:none;--thread:none;--row-cols:22px 1fr;--fill:var(--accent);
}
[data-theme=riso] .a2{position:relative}
[data-theme=riso] .a2:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:100;opacity:.32;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .25 0 0 0 0 .66 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme=riso] .a2 .row.user .body{background:var(--surface);border:1.5px solid var(--strong);box-shadow:4px 3px 0 var(--accent);border-radius:2px}
[data-theme=riso] .a2 .md h1,[data-theme=riso] .a2 .md h2,[data-theme=riso] .a2 .md h3,[data-theme=riso] .a2 .side .title{font-weight:800;text-shadow:2px 1px 0 rgba(255,61,154,.75)}
[data-theme=riso] .a2 .md h1,[data-theme=riso] .a2 .md h2,[data-theme=riso] .a2 .md h3{font-size:1.35em;letter-spacing:-.01em}
[data-theme=riso] .a2 .side .title{font-size:19px}
[data-theme=riso] .a2 .tab.on{background:var(--accent);color:var(--strong);box-shadow:none}
[data-theme=riso] .a2 .tn{font-weight:700}
[data-theme=riso] .a2 .composer .box{border:1.5px solid var(--strong)}
[data-theme=riso] .a2 .send,[data-theme=riso] .a2 .act.primary{border:1.5px solid var(--strong)}
[data-theme=riso] .a2 .md pre,[data-theme=riso] .a2 .diff{background:#e8e9f2}
[data-theme=riso] .a2 .row.user{padding:0 5px 5px 0}
/* Solari: a departure board; times in signal yellow, each tool name on a split-flap tile. */
[data-theme=solari] .a2{
  --bg:#0f1012;--chrome:#060607;--side:#0b0c0d;--surface:#1a1b1e;--raised:#222327;--rule:#2b2d31;
  --ink:#e8e5da;--strong:#ffffff;--muted:#9b988e;--faint:#6a6860;
  --accent:#ffc905;--accent-soft:rgba(255,201,5,.13);--on-accent:#111;
  --ok:#7fd88a;--err:#ff5b47;--err-bg:#2a1210;--warn:#ffc905;--comms:#8fc4ff;
  --add-bg:#12261a;--del-bg:#2c1412;
  --h-kw:#ffc905;--h-str:#7fd88a;--h-num:#ff9e7a;--h-com:#6a6860;--h-fn:#ffffff;--h-type:#8fc4ff;--h-var:#e8e5da;--h-meta:#9b988e;
  --font-ui:'Barlow',sans-serif;--font-prose:'Barlow',sans-serif;--font-mono:'JBM',monospace;
  --font-chrome:'Barlow Condensed',sans-serif;--font-head:'Barlow Condensed',sans-serif;
  --prose-size:16px;--r:3px;--r-lg:4px;--time:block;--thread:none;--row-cols:44px 18px 1fr;--fill:var(--accent);
}
[data-theme=solari] .a2 .row .t{width:44px;color:var(--accent);font-family:var(--font-chrome);font-size:13.5px;font-weight:600}
[data-theme=solari] .a2 .tn{font-family:var(--font-chrome);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:#fff;
  background:linear-gradient(#26272b 0 48%,#050505 48% 53%,#1b1c1f 53%);padding:1px 7px;border-radius:2px;min-width:68px;text-align:center;box-shadow:0 1px 0 #000}
[data-theme=solari] .a2 .row.tool .line{align-items:center}
[data-theme=solari] .a2 .row.user .body{background:var(--surface);border-left:3px solid var(--accent);border-radius:0;font-size:14.5px}
[data-theme=solari] .a2 .tabs{font-size:14px}
[data-theme=solari] .a2 .tab.on{box-shadow:inset 0 -3px 0 var(--accent);border-radius:0;background:none}
[data-theme=solari] .a2 .side .title{font-family:var(--font-head);font-size:21px;font-weight:600;line-height:1.1}
[data-theme=solari] .a2 .side h4{font-family:var(--font-chrome);font-size:12.5px;color:var(--accent)}
[data-theme=solari] .a2 .md h1,[data-theme=solari] .a2 .md h2,[data-theme=solari] .a2 .md h3{font-size:1.3em}