/* Piper GUI. Colours are the dashboard's theme tokens (dashboard/themes.json,
   applied to <html> by theme.ts); the fallbacks below are the dark theme. The terminal
   is the content: no decoration around it (PIPER.md 9.5). */
:root {
  --page: #0c0d0f; --card: #151619; --well: #111214; --tile: #1c1d21; --line: #26282c;
  --fg: #ececed; --mut: #9a9ba0; --faint: #6a6b70; --ok: #47b954; --ok-bg: #213d29;
  --on-ok: #0c1f12; --ok-dot: #47b954; --warn: #ce9a2e; --warn-bg: #392d12; --bad: #ea605a;
  --bad-bg: #351a1a; --neutral-bg: #2a2b2f; --dim-dot: #6f7075; --link: #64a5fd; --tilebtn: #202125;
  --acc: #e6e6e6; --acc-fg: #141414;
  color-scheme: dark;
}
:root[data-scheme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--fg);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
/* 9.62 (Orca, quietly): buttons are a fill without a frame, the primary one is light on dark (--acc); green is
   only for state (switches, dots, pipeline passed) */
button { font: inherit; color: var(--fg); background: var(--tilebtn); border: 1px solid transparent;
  border-radius: 6px; padding: 4px 10px; cursor: pointer; }
button:not(:disabled):hover { background: color-mix(in srgb, var(--fg) 9%, var(--tilebtn)); }
button.primary { background: var(--acc); color: var(--acc-fg); border-color: var(--acc); }
button.primary:not(:disabled):hover { background: color-mix(in srgb, var(--acc) 88%, var(--page)); }
button.primary kbd { color: inherit; background: transparent; border-color: color-mix(in srgb, var(--acc-fg) 30%, transparent); opacity: .7; margin-left: 6px; }
button.danger { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
a.btn { display: inline-flex; align-items: center; color: var(--link); text-decoration: none; background: var(--tilebtn);
  border: 1px solid transparent; border-radius: 6px; padding: 4px 10px; }
a.btn:hover { background: color-mix(in srgb, var(--fg) 9%, var(--tilebtn)); }
input, textarea { font: inherit; color: var(--fg); background: var(--well); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; width: 100%; }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; margin: 0 4px 0 0; accent-color: var(--ok); }
code, .mono, pre { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 12px; }
pre { white-space: pre-wrap; word-break: break-word; }
.mut { color: var(--mut); }
.ok { color: var(--ok); } .bad { color: var(--bad); } p.warn { color: var(--warn); }
.hidden { display: none !important; }

/* the shell (9.16): activity bar · queue · detail · context panel; the columns are set at the end */
#app { display: grid; grid-template-columns: var(--ab-w) var(--q-w) minmax(0, 1fr) var(--ctx-w); height: 100vh; }
body.no-queue { --q-w: 0px; }
body.no-queue #queue { display: none; }
body.no-inspector { --ctx-w: 0px; }
body.no-inspector #inspector { display: none; }

/* state marks: colour AND shape/text (accessibility) */
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dim-dot); display: inline-block; }
.dot.st-working { background: var(--ok-dot); animation: pulse 1.4s ease-in-out infinite; }
.dot.st-ready { background: var(--ok-dot); }
.dot.st-waiting { background: var(--warn); border-radius: 2px; }
.dot.st-attention, .dot.st-trust { background: var(--warn); border-radius: 2px; transform: rotate(45deg); }
.dot.st-error, .dot.st-blocked { background: var(--bad); border-radius: 2px; }
.dot.st-starting, .dot.st-attesting, .dot.st-spawning, .dot.st-preparing, .dot.st-preflight {
  background: transparent; border: 2px solid var(--mut); }
.dot.st-exited { background: transparent; border: 2px solid var(--dim-dot); }
@keyframes pulse { 50% { opacity: .35; } }

/* main */
#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.head .titles { flex: 1; min-width: 0; }
.head .title { font-weight: 600; }
.head .sub { color: var(--mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head .actions { display: flex; gap: 6px; }
.body { position: relative; flex: 1; min-height: 0; padding: 10px; display: flex; flex-direction: column; }
/* isolation: xterm's layers (z-index 1-11) stay inside the terminal - they covered the start progress' Cancel */
.term { flex: 1; min-height: 0; background: var(--well); border-radius: 10px; padding: 14px 18px; isolation: isolate; }
.term .xterm { height: 100%; }
.term .xterm .xterm-viewport { background-color: var(--well); }   /* xterm.css paints it #000: the strip under the last row */
.empty { margin: auto; text-align: center; color: var(--mut); }
.panel { position: absolute; z-index: 1; inset: 24px; margin: auto; max-width: 720px; height: max-content; max-height: calc(100% - 48px);
  overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; }
.panel.bad { border-color: var(--bad); z-index: 100 }
.panel.ended { top: auto; bottom: 24px; }
.protected-callout { margin: 12px 0; padding: 12px 14px; border: 1.5px solid var(--bad); border-radius: 8px; background: var(--bad-bg); }
.protected-callout strong { color: var(--bad); font-size: 14px; }
.protected-callout p { margin: 8px 0 0; overflow-wrap: anywhere; }
.protected-callout p.mut { color: var(--mut); font-size: 12px; }
.findings { padding-left: 18px; }
.findings code { overflow-wrap: anywhere; }   /* a long checkout path wraps inside the blocked panel */
.findings .kind { color: var(--warn); font-size: 11px; text-transform: uppercase; }
.progress { position: absolute; left: 16px; right: 16px; bottom: 16px; max-width: 640px; margin-inline: auto;
  padding: 18px 20px 16px; z-index: 12; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 28px #0003; container-type: inline-size; }
.startup-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.startup-head .spinner { width: 18px; height: 18px; flex: none; }
.startup-heading { flex: 1; min-width: 130px; }
.startup-eyebrow { font-size: 10px; letter-spacing: .12em; color: var(--mut); margin-bottom: 3px; }
.startup-heading strong { font-size: 16px; font-weight: 600; }
.startup-clock { color: var(--mut); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.startup-hint { color: var(--mut); margin: 12px 0 18px; font-size: 12px; }
.startup-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }
.progress .step { flex: 1; border-top: 2px solid var(--line); padding-top: 9px; color: var(--mut); font-size: 11px; }
.progress .step.done { color: var(--ok); border-color: var(--ok); }
.progress .step.now { color: var(--fg); border-color: var(--link); }
.step-mark { display: inline-block; margin-right: 5px; font-variant-numeric: tabular-nums; }
@container (max-width: 350px) {
  .startup-clock { flex-basis: 100%; padding-left: 30px; order: 1; }
  .startup-steps { gap: 5px; }
  .step-mark { display: block; }
}
@media (prefers-reduced-motion: reduce) { .progress .spinner { animation: none; } }
.row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* inspector */
#inspector { background: var(--card); border-left: 1px solid var(--line); padding: 12px 14px; overflow-y: auto; }
#inspector section { margin-bottom: 18px; }
#inspector h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin: 0 0 6px; }
#inspector dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12px; }
#inspector dt { color: var(--mut); } #inspector dd { margin: 0; overflow-wrap: anywhere; }
.plain { list-style: none; padding: 0; margin: 0; }

/* overlays */
#overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: none; z-index: 20; }
#overlay.open { display: flex; }
/* W11: dialog layers - each .olayer holds one .modal; a layer over another dims it (the lower one is inert) */
.olayer { position: absolute; inset: 0; display: flex; }
.olayer + .olayer { background: rgba(11, 14, 18, .55); }
.modal { margin: auto; width: min(560px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 32px); overflow-y: auto; }
.modal h2 { margin: 0; font-size: 15px; }
.plist { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
/* Database chooser: a quiet list action; Show remains the primary action. */
.grid-db-add { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 36px;
  padding: 7px 8px; margin-top: 4px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--mut); text-align: left; font-size: 13px; }
.grid-db-add-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none; font-size: 18px; line-height: 1; }
.grid-db-add:hover:not(:disabled) { background: var(--tile); border-color: transparent; color: var(--fg); }
.grid-db-add:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; color: var(--fg); }
.pitem { display: flex; justify-content: space-between; gap: 12px; text-align: left; background: transparent; border-color: transparent; }
.pitem.active { background: var(--tile); border-color: var(--ok); }
.pitem.mine { border-color: var(--line); }
.pitem.mine .name { font-weight: 600; }
.pitem .tag { font-size: 10px; flex: none; border: 1px solid var(--ok); border-radius: 8px; padding: 0 5px; align-self: center; }
.pitem .mut { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem:not(.col) > .name + .mut { flex: 1 1 0; min-width: 0; text-align: right; }   /* a long path gives way to the project name */
/* N10-A-10: the grid chooser's state is no path - a long session name squeezed "ready" to 0 px; the name gives way (…) instead */
.pitem:not(.col) > .name + .mut.gstate { flex: none; }
/* Keep chooser rows inside the scrollport, including long titles and host paths. */
.gridchooser { max-height: min(520px, 60vh); min-width: 0; scrollbar-gutter: stable; }
.gridchooser .pitem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); width: 100%; min-width: 0; flex-shrink: 0; }
.gridchooser .pitem > .mut { min-width: 0; }

#pending { position: fixed; right: 16px; bottom: 16px; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; z-index: 5; }
.pending pre { max-height: 320px; overflow: auto; background: var(--well); padding: 8px; border-radius: 6px; }
.pending pre .add { color: var(--ok); }
.pending pre .del { color: var(--bad); }
.pending pre .hunk { color: var(--mut); }
.pending pre .w { color: var(--warn); font-weight: 600; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; background: var(--tile);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; cursor: pointer; z-index: 21; }
/* N9: the banner takes its own line above the app (it lay over the session header: title, chips, Stop) */
#banner { flex: none; background: var(--bad-bg); color: var(--bad); padding: 4px 12px; z-index: 22; }
body:has(> #banner) { display: flex; flex-direction: column; }
body:has(> #banner) > #app { height: auto; flex: 1; min-height: 0; }


/* inspector: git, network, L5 */
button.mini { padding: 0 6px; font-size: 11px; margin-left: 4px; }
button.link { background: none; border: 0; padding: 0; color: var(--link); text-align: left; overflow-wrap: anywhere; }
.gitfiles { list-style: none; padding: 0; margin: 6px 0; font-size: 12px; }
.gitfiles li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; gap: 6px; align-items: center; padding: 2px 4px;
  margin: 0 -4px; border-radius: var(--r-sm); min-height: 22px; }
.gitfiles li:hover { background: var(--tile); }
.gitfiles li.sensitive button.link .fn { color: var(--warn); }
.gitfiles li.off .fn { color: var(--mut); }
.gitfiles li.ch-del .fn { text-decoration: line-through; text-decoration-color: var(--faint); }
#inspector textarea { font-size: 12px; margin-top: 4px; }
#inspector details { margin: 4px 0; font-size: 12px; }
#inspector details ul { max-height: 180px; overflow: auto; }
#inspector .watch-path code { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inspector .watch-findings { max-height: 160px; overflow: auto; }
#inspector section.alert { border: 1px solid var(--bad); border-radius: 8px; padding: 8px 10px; background: var(--bad-bg); }
pre.diff { max-height: 70vh; overflow: auto; background: var(--well); padding: 10px; border-radius: 6px; }
pre.diff .add { color: var(--ok); } pre.diff .del { color: var(--bad); } pre.diff .hunk { color: var(--link); }
.modal:has(pre.diff) { width: min(1000px, calc(100vw - 32px)); }
.palette { display: flex; flex-direction: column; gap: 8px; }
.palette .plist { max-height: 50vh; }
.pitem .psub { flex: none; padding: 0 6px; border-radius: 4px; color: var(--mut); }   /* D12: a session's actions */
.pitem .psub:hover, .pitem.active .psub { background: var(--line); color: var(--fg); }
.pcrumb { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.notfound { border-color: var(--bad) !important; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--ok-dot);
  border-radius: 50%; animation: spin 0.9s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.panel details { margin: 6px 0; } .panel summary { cursor: pointer; }

/* workbench views (PIPER.md 9.6): they share .body with the terminals */
.head .tabs { display: flex; gap: 2px; }
button.tab { background: transparent; border-color: transparent; color: var(--mut); padding: 3px 9px; }
button.tab.on { color: var(--fg); background: var(--tile); border-color: var(--line); }
.view { flex: 1; min-height: 0; display: flex; }
.view > * { flex: 1; min-width: 0; min-height: 0; }
.small { font-size: 11px; } .nowrap { white-space: nowrap; }
.row.left { justify-content: flex-start; margin-top: 0; }

/* files */
.files { display: grid; grid-template-columns: minmax(220px, 30%) 1fr; gap: 10px; }
.fleft, .fright { background: var(--well); border-radius: 10px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.fleft { padding: 8px; gap: 6px; }
.fleft select, .fleft input { font-size: 12px; }
select { font: inherit; color: var(--fg); background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.fleft .tabs { display: flex; gap: 4px; }
.fleft .tabs button { font-size: 12px; padding: 2px 8px; }
.fleft .tabs button.on { border-color: var(--ok); }
.tree { overflow: auto; flex: 1; min-height: 0; font-size: 12.5px; }
.tnode { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 4px; padding: 2px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.tnode:hover { background: var(--tile); }
.tnode.active { background: var(--tile); color: var(--link); }
.tnode.changed { color: var(--warn); }
.tnode.hit { font-size: 11.5px; } .tnode .no, .ln .no { color: var(--faint); }
.fright.empty { align-items: center; justify-content: center; }
.fhead { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.fhead .fpath { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fhead .actions { display: flex; gap: 6px; }
.code { overflow: auto; flex: 1; min-height: 0; padding: 6px 0; font-size: 12.5px; line-height: 1.5; }
.ln { display: grid; grid-template-columns: 56px 1fr; cursor: pointer; }
.ln:hover { background: var(--tile); }
.ln.sel { background: var(--warn-bg); }
.ln .no { text-align: right; padding-right: 12px; user-select: none; }
.ln .tx { white-space: pre; }
.fright .row { padding: 0 12px 10px; }

/* conversation */
.convo { display: flex; flex-direction: column; background: var(--well); border-radius: 10px; }
.modal:has(.resume-picker) { width: min(1160px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); padding: 16px; }
.modal:has(.resume-picker) > h2 { display: none; }
.resume-picker { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.resume-head, .resume-footer, .resume-filters, .resume-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resume-head h2 { flex: 1; margin: 0; }
.resume-filters > input { flex: 1; min-width: 220px; }
.resume-project-wrap { position: relative; display: flex; min-width: 0; }
.resume-project { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-project-menu { position: absolute; z-index: 5; right: 0; top: calc(100% + 4px); width: min(340px, 80vw); padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px #0006; }
.resume-project-menu input { width: 100%; box-sizing: border-box; }
.resume-project-options { max-height: min(280px, 35dvh); overflow: auto; margin-top: 8px; }
.resume-project-options button { display: flex; justify-content: space-between; width: 100%; text-align: left; margin: 2px 0; }
.resume-status { min-height: 22px; }
.resume-external { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
.resume-external input { width: auto; margin: 0; }
.resume-status progress { width: 140px; height: 6px; accent-color: var(--link); }
.resume-body { display: grid; grid-template-columns: minmax(260px, 38%) minmax(0, 1fr); flex: 1; min-height: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.resume-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.resume-results, .resume-detail { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px; }
.resume-results { flex: 1; }
.resume-result { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-bottom: 5px; padding: 10px; text-align: left; background: transparent; border: 1px solid transparent; }
.resume-result[aria-selected="true"] { background: var(--well); border-color: var(--link); }
.resume-title { font-weight: 600; overflow-wrap: anywhere; }
.resume-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--mut); }
.resume-result .small, .resume-detail p { overflow-wrap: anywhere; }
.resume-detail h3 { margin: 0 0 8px; }
.resume-detail h4 { margin: 18px 0 6px; }
.resume-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; }
.resume-detail details { margin-top: 18px; }
.resume-message { border-left: 2px solid var(--line); margin: 10px 0; padding: 8px; }
.resume-picker > [role="alert"]:empty { display: none; }
.resume-footer { border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 700px) {
  .resume-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 40% minmax(0, 1fr); }
  .resume-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .resume-footer .grow { display: none; }
}
.chead { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.chead input { max-width: 320px; }
.turns { overflow: auto; flex: 1; min-height: 0; padding: 8px 14px; }
.turn { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--card); border-left: 3px solid var(--line); }
.turn.user { border-left-color: var(--link); }
.turn.assistant { border-left-color: var(--ok); }
.turn.target { outline: 1px solid var(--warn); }
.turn .who { font-size: 11px; color: var(--mut); margin-bottom: 4px; }
.turn pre { margin: 0; font-family: inherit; font-size: 13px; }
mark { background: var(--warn-bg); color: var(--fg); border-radius: 2px; }
.plist.tall { max-height: 60vh; }
.pitem.col { flex-direction: column; gap: 2px; }
.pitem .snippet { white-space: normal; overflow: visible; }

/* board + audit */
.board, .audit { overflow: auto; background: var(--well); border-radius: 10px; padding: 12px 16px; }
.bhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bhead h2 { margin: 0; font-size: 15px; flex: 0 0 auto; }
.bhead input { max-width: 320px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }


.audit table { width: 100%; border-collapse: collapse; font-size: 12px; }
.audit td { padding: 3px 8px 3px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.audit td.mono { overflow-wrap: anywhere; }
.audit tr.ev-attest td:nth-child(2), .audit tr.ev-gui-send td:nth-child(2) { color: var(--ok); }
.audit tr.ev-preflight td:nth-child(2), .audit tr.ev-allow-domain td:nth-child(2) { color: var(--warn); }
.audit tr td:nth-child(2) { font-weight: 600; }   /* D16 (Pencil mNJFA E): an action reads first */
.audit tr.internal td:nth-child(2) { color: var(--mut); font-weight: 400; }   /* D16: piperd's housekeeping */
.audit tr.folds { cursor: pointer; }
.audit .amode { display: flex; gap: 2px; padding: 2px; background: var(--page); border-radius: 6px; flex: none; }
.audit .amode button { background: none; border: 1px solid transparent; border-radius: 4px; padding: 2px 8px; font-size: 11.5px; color: var(--mut); }
.audit .amode button.on { background: var(--tile); border-color: var(--line); color: var(--fg); font-weight: 600; }
.usage .bhead[hidden], .usage .bhead label[hidden] { display: none; }   /* [hidden] loses to the display rules */
.usage .uempty { max-width: 640px; }
.usage .uempty p { margin: 0 0 8px; }

/* composer (under the terminal) */
.composer { margin: 0 10px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.composer textarea { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 12.5px; resize: vertical; }
.composer .crow { display: flex; gap: 6px; justify-content: flex-end; }
.composer .crow select { margin-right: auto; }
pre.confirm { max-height: 40vh; overflow: auto; background: var(--well); padding: 8px; border-radius: 6px; }

/* review notes in the diff */
pre.diff.review > span { display: block; }
pre.diff.review > span.notable { cursor: pointer; }
pre.diff.review > span.notable:hover { background: var(--tile); }
pre.diff .lno { display: inline-block; width: 44px; color: var(--faint); user-select: none; }
pre.diff .note { display: block; color: var(--warn); padding-left: 44px; }
pre.diff .note-edit { display: block; padding: 4px 0 4px 44px; }
pre.diff .note-edit textarea { font-size: 12px; }
#inspector .notes { border: 1px solid var(--warn); border-radius: 8px; padding: 6px 8px; margin: 8px 0; font-size: 12px; }
.issues .plist { max-height: 340px; }
.issues .plist.busy { opacity: .6; }
.issues .pitem.cursor { background: var(--tile); }
.startopts, .startopts > .so-body { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
/* W15: Options folded under one line naming what is on; the Defaults link at its right end */
.startopts > summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; padding: 2px 0; }
.startopts > summary::-webkit-details-marker { display: none; }
.startopts > summary::before { content: '▸'; color: var(--mut); font-size: 10px; }
.startopts[open] > summary::before { content: '▾'; }
.startopts > summary .so-title { font-weight: 600; }
.startopts > summary .so-project { min-width: 0; max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.startopts > summary .so-sum { color: var(--mut); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.startopts > summary .so-sum.warn { color: var(--warn); }
.startopts > summary .so-rebuild { white-space: nowrap; } .startopts > summary .so-rebuild .link { margin-left: 2px; }
.startopts[open] > summary { margin-bottom: 6px; }
.startopts label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.startopts p { margin: 2px 0 0 22px; }
.isplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; margin-top: 6px; }
.ipreview { max-height: 340px; overflow: auto; background: var(--well); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.ipreview .ihead { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ipreview p { margin: 4px 0; }
.ipreview .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ipreview .inote { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 4px; }
@media (max-width: 720px) { .isplit { grid-template-columns: minmax(0, 1fr); } }
/* N8: a long issue title squeezed its labels to a 4 px cut glyph (flex shrinks by size); the labels keep up to a third, then … */
.isplit .pitem > .mut { flex-shrink: 0; max-width: 33%; }
/* N9: a window under ~1000 px high with the issue picker open squeezed the chosen project's row to a cut half row (19 of 34 px):
   the project list keeps its height, the dialog scrolls */
.modal:has(.startopts) > .plist, .wk-pane > .plist { flex-shrink: 0; }
/* N10-A-4: 1024 x 768 with the issue picker open squeezed the task box (where the issue link goes) to 14 px - it keeps its rows too */
.modal:has(.startopts) > textarea, .modal:has(.startopts) > .issues, .wk-pane > textarea, .wk-pane > .issues { flex-shrink: 0; }

/* syntax highlighting (highlight.ts): dark defaults, light scheme below */
:root { --hl-k: #c792ea; --hl-s: #a5d6a7; --hl-c: #7d8590; --hl-n: #f0a868; --hl-t: #7fd1e8; --hl-f: #82aaff;
  --hl-a: #e6c07b; --hl-g: #ff7b9c; --hl-p: #9cdcfe; --hl-v: #f78c6c; }
:root[data-scheme="light"] { --hl-k: #8e44ad; --hl-s: #2e7d32; --hl-c: #6e7781; --hl-n: #b35900; --hl-t: #00759a;
  --hl-f: #2f5bb7; --hl-a: #8a6d00; --hl-g: #c2185b; --hl-p: #0550ae; --hl-v: #b33f00; }
.hl-k { color: var(--hl-k); } .hl-s { color: var(--hl-s); } .hl-c { color: var(--hl-c); font-style: italic; }
.hl-n { color: var(--hl-n); } .hl-t { color: var(--hl-t); } .hl-f { color: var(--hl-f); } .hl-a { color: var(--hl-a); }
.hl-g { color: var(--hl-g); } .hl-p { color: var(--hl-p); } .hl-v { color: var(--hl-v); }

/* file browser polish */
.tnode .ic { display: inline-block; width: 12px; color: var(--faint); }
.tnode.changed .ic { color: var(--warn); }
.fhead .crumbs { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; overflow: hidden; gap: 2px; align-items: baseline;
  justify-content: flex-end; }   /* too long: the start is cut, the file name stays */
.fhead .crumbs > :first-child { margin-right: auto; }
.fhead .crumbs button.link { white-space: nowrap; font-size: 12px; }
.fhead .crumbs strong { white-space: nowrap; }
.fleft .tabs button:last-child:not(:nth-child(2)) { margin-left: auto; }
.grow { flex: 1; align-self: center; }
kbd { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 11.5px; background: var(--tile);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.turns .tools { margin: 2px 0 2px 14px; }
/* one line per file: the name keeps its room, the directory shrinks and is cut from the left */
.gitfiles button.gf { display: flex; align-items: baseline; gap: 6px; min-width: 0; text-align: left; text-decoration: none; }
.gitfiles .gf .fn { flex: 0 1 auto; min-width: 4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.gitfiles .gf:hover .fn { color: var(--link); text-decoration: underline; }
.gitfiles .gf .dir { flex: 1 0 3.5em; max-width: max-content; color: var(--faint-t); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: rtl; text-align: left; }
/* the change mark: one letter, colour + letter (never colour alone) */
.gmark { font: 600 10px/16px "JetBrains Mono", "SF Mono", Menlo, monospace; min-width: 16px; text-align: center; border-radius: 3px; padding: 0 3px;
  color: var(--mut); background: var(--neutral-bg); }
.gmark.ch-mod { color: var(--warn); background: var(--warn-bg); }
.gmark.ch-new, .gmark.ch-add { color: var(--ok); background: var(--ok-bg); }
.gmark.ch-del, .gmark.ch-bad { color: var(--bad); background: var(--bad-bg); }
.gmark.ch-ren { color: var(--link); background: color-mix(in srgb, var(--link) 15%, transparent); }

/* grid (⌘G): up to GRID_MAX (9) panes - sessions, host shells, DB - each with its own bar; the focused pane is the active session */
.term { display: flex; flex-direction: column; }
.thost { flex: 1; min-height: 0; }
/* Claude mobile-terminal-keys.fig. Only the selected live touch terminal gets this region. */
.termkeys[hidden] { display: none; }
.termkeys { flex: none; min-width: 0; container-type: inline-size; padding: 6px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.termkeys-info { min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 0 8px;
  padding: 0 4px; font-size: 12px; color: var(--mut); }
.termkeys-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.termkeys-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termkeys-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.termkeys-status { flex: none; color: var(--fg); }
.termkeys.disconnected .termkeys-info { flex-wrap: wrap; }
.termkeys.disconnected .termkeys-who { color: var(--warn); }
.termkeys.disconnected .termkeys-dot { background: var(--warn); }
.termkeys-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.termkeys button { height: 44px; min-width: 0; padding: 0 2px; touch-action: manipulation; }
.termkeys button.termkeys-arrow { font-size: 16px; }
.termkeys button[aria-disabled="true"] { background: var(--well); border-color: var(--tile); color: var(--faint); cursor: default; }
@container (max-width: 270px) { .termkeys-row { gap: 4px; } .termkeys-info { padding: 0; } }
@media (pointer: coarse), (hover: none) {
  /* Preserve the terminal's padding inside its own surface; give the keys the pane's full width. */
  #main > .body:not(.grid):has(> .term:not(.hidden) > .termkeys:not([hidden])) { padding: 8px; background: var(--page); }
  #main .body .term:not(.hidden):has(> .termkeys:not([hidden])) { padding: 0; background: transparent; border-radius: 10px; }
  .term:has(> .termkeys:not([hidden])) > .thostwrap { padding: 14px 18px; background: var(--well); border-radius: 10px; }
  #app:has(.termkeys:not([hidden])) { height: var(--term-viewport-height, 100dvh); }
}
.tlabel { display: none; align-items: center; gap: 8px; padding: 0 0 8px; font-size: 12px; flex: none; min-width: 0; }
/* #13: a native terminal (piper attach) sizes the PTY: hold its size, scroll, say so */
.thostwrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; }   /* xterm's helper textarea follows the cursor past the last column: never a page scroll */
.term.ttyon .thost { overflow: hidden; }
.term.ttyon .thost.overflow { overflow: auto; }
.term.ttyon .xterm { height: auto; overflow: hidden; }   /* xterm's own scrollbar keeps the old height a while */
.ttybar { font-size: 12px; color: var(--mut); padding: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttybar b { color: var(--fg); font-weight: 600; }
.ttycard { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--well) 88%, transparent); border-radius: inherit; z-index: 3; }
.ttycard-box { max-width: 34em; padding: 16px 18px; text-align: left; }
.ttycard-box p { margin: 0 0 12px; line-height: 1.45; }
.ttycard-box .row { display: flex; gap: 8px; }
.tlabel .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlabel button.mini { margin-left: auto; }
.body.grid .tlabel { display: flex; }
.body.grid .term { min-width: 0; min-height: 0; padding: 10px 12px; border: 1px solid transparent; }
.body.grid .term.focused { border-color: var(--ok); }
.sessionpane > .sessionstatus { position: relative; flex: 1; overflow: auto; min-height: 0; }
.sessionpane .endbar { flex-wrap: wrap; white-space: normal; }
/* G-N11-5: a narrow tile (768 px + the drawer: 151 px) - the dot and the name were 0 px; the state words go (the dot says it) */
.body.grid .term { container: gt / inline-size; }
.tlabel .dot { flex: none; }
@container gt (max-width: 360px) { .tlabel > .mut { display: none; } }
p.warn.small { font-size: 11.5px; margin: 4px 0; }
.pitem .chip { color: var(--warn); font-size: 11px; }

/* W11: a pressed toggle (IntelliJ: tile + a lighter frame, not a colour - green is the primary action) */
button.on { background: var(--tile); border-color: var(--mut); color: var(--fg); }

/* grid: pane tools and the "add" cell */
.tlabel .pane-tools { margin-left: auto; display: flex; gap: 2px; flex: none; }
.tlabel .pane-tools button.mini { margin: 0; }
.tlabel .pane-tools button:disabled { opacity: .35; cursor: default; }
.term.slot { border: 1px dashed var(--line) !important; background: transparent; display: flex; flex-direction: column;
  gap: 6px; align-items: flex-start; justify-content: center; padding: 16px 20px; }
/* N10-A-9: a long session name ran the button out of the slot and the window (reach OFFVIEW at 1920) */
.term.slot button { text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* grid: absolutely placed panes (gridlayout.ts) and draggable splitters in the gaps */
.body.grid { display: block; position: relative; padding: 0; margin: 10px; }
.body.grid .gcell { position: absolute; }
.gsplit { position: absolute; z-index: 3; }
.gsplit.v { cursor: col-resize; }
.gsplit.h { cursor: row-resize; }
.gsplit::after { content: ""; position: absolute; border-radius: 2px; background: transparent; transition: background .12s; }
.gsplit.v::after { left: 6px; width: 2px; top: 0; bottom: 0; }
.gsplit.h::after { top: 6px; height: 2px; left: 0; right: 0; }
.gsplit:hover::after, .gsplit.drag::after { background: var(--ok); }
.tlabel[draggable="true"] { cursor: grab; }
.term.droptarget { outline: 2px dashed var(--link); outline-offset: -2px; }
.pane-tools .pinbtn .fi { --fic: var(--faint); width: 12px; height: 12px; }
.pane-tools .pinbtn.on .fi { --fic: var(--link); }
.tlabel:has(.pinbtn.on) .pane-tools .pinbtn { opacity: 1; visibility: visible; }
/* W26 grid panes beyond sessions: a host shell keeps the red HOST frame + pill (never looks like a session),
   a Database pane is its own compact Database view; the Add cell is grouped by kind */
.body.grid .term.hostpane { border-color: var(--bad); }
.body.grid .term.hostpane.focused { box-shadow: inset 0 0 0 1px var(--bad); }
.tlabel .ht-pill.dead, .term.slot .ht-pill.dead { background: var(--dim-dot); }
.tlabel .ht-rc { flex: none; }
.tlabel > button.mini { flex: none; white-space: nowrap; }   /* an ended shell's New shell here / Close */
.tlabel:has(.ht-pill.dead) { flex-wrap: wrap; row-gap: 4px; }   /* no cwd then: the tools may take a second line, never the next pane */
.body.grid .term.hostpane:has(.ht-pill.dead) { border-color: var(--line); }   /* ended: grey, nothing runs on the host */
.tlabel > .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.ht-pill.mini { padding: 0 6px; font-size: 10px; }
/* W26: a narrow pane - the cwd / connection hint gives way first (one line, ellipsis), the name keeps 5em ("Database") */
.tlabel > .mut { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 20; }
.tlabel .name { min-width: 5em; }
@container gt (max-width: 360px) {
  .tlabel { flex-wrap: wrap; gap: 4px; }
  .tlabel .name { min-width: 0; flex: 1; }
  .tlabel .pane-tools { flex-basis: 100%; justify-content: flex-end; }
}
@container gt (max-width: 160px) {
  .tlabel .pane-tools button:not([aria-label="pane menu"]):not(:last-child) { display: none; }
}
@container gt (max-width: 440px) {
  .term.hostpane .tlabel { flex-wrap: wrap; }
  .term.hostpane .tlabel > .mono { display: none; }
  .term.hostpane .tlabel .pane-tools { flex-basis: 100%; justify-content: flex-end; }
}
.term.dbpane { background: var(--page); }
/* D1: the grid's Files pane - the Files view's browser lent to it */
.term.filespane { background: var(--page); }
.term.filespane > .files { flex: 1; min-width: 0; min-height: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
/* A small pane scrolls its controls instead of cutting them off. */
.term.filespane .files.narrow { grid-template-columns: min(150px, 36%) minmax(0, 1fr); }
.term.filespane .files.narrow.tree-off { grid-template-columns: minmax(0, 1fr); }
.term.filespane .fleft, .term.filespane .fright { min-width: 0; overflow: auto; }
.term.filespane .fleft > :not(.tree) { flex-shrink: 0; }
.term.filespane .fright > :not(.fbody) { flex-shrink: 0; }
.term.filespane .fbody { min-height: 80px; }
.term.filespane .fpanel .pbody { max-height: 160px; }
.term.filespane .fstatus { flex-wrap: wrap; }
.term.filespane .fstatus .wstate { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.term.filespane .fleft .tree { min-width: 150px; min-height: 80px; }
.term.filespane .ftop { flex-wrap: wrap; }
.term.filespane .ftop .pchip { flex-basis: 100%; }
/* 9.42: the grid's HTTP pane - the HTTP tab's panel lent to it; a narrow one stacks the file list over the request */
.term.httppane { background: var(--page); }
.term.httppane > .httppanel { flex: 1; min-width: 0; min-height: 0; height: auto; }
@container gt (max-width: 640px) { .term.httppane > .httppanel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(90px, 32%) minmax(0, 1fr); } }
.term.httppane .hpleft, .term.httppane .hpright { min-width: 0; overflow: auto; }
.term.httppane .hpright > :not(.hpreqs) { flex-shrink: 0; }
.term.httppane .hpreqs { min-height: 80px; }
@container (max-width: 220px) {
  .term.httppane .hpreq-h { grid-template-columns: 22px minmax(0, 1fr); gap: 4px; }
  .term.httppane .hpreq-toggle { flex-wrap: wrap; gap: 2px; }
  .term.httppane .hpreqname { flex-basis: 100%; }
  .term.httppane .hpreq-h > span:last-child { display: none; }
  .term.httppane .hpreq-h > .httpcode { grid-column: 2; justify-self: start; }
}
.term.dbpane > .dbview { flex: 1; height: auto; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
/* a narrow Database pane (3 columns: ~370 px) - the tree gives the console room: 210 px tree + 160 px editor was unusable */
/* a grid pane is short: the console bar and editor give the result grid room (bar 171 + editor 150 px left none of it) */
.term.dbpane .db-bar { padding: 6px 8px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.term.dbpane .db-bar > * { flex: none; }
.term.dbpane .db-bar > .primary { order: -1; }   /* one row that scrolls: Run stays in view, the title says dev/test/prod */
.term.dbpane .db-rhead { flex-wrap: nowrap; padding-bottom: 0; }
.term.dbpane .db-rhead > .db-rtabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.term.dbpane .db-editor { height: 28%; min-height: 64px; }
@container gt (max-width: 720px) {
  .term.dbpane > .dbview.compact:not(.wide) { grid-template-columns: minmax(165px, 38%) minmax(0, 1fr); }   /* .wide = the connection list, full width */
  /* an open console takes the whole narrow pane; its connection picker switches, the tree is back with no tab */
  .term.dbpane > .dbview.compact:has(.db-tab):not(.db-treeon) { grid-template-columns: 0 minmax(0, 1fr); }
  .term.dbpane > .dbview.compact:has(.db-tab):not(.db-treeon) > .db-left { visibility: hidden; border: 0; }
  /* 9.39: ▤ Tables - the tab strip stays on top, the tree takes the pane under it, the open tab waits */
  .term.dbpane .db-tab-tree { display: inline-flex; }
  .term.dbpane > .dbview.compact.db-treeon:has(.db-tab) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .term.dbpane > .dbview.compact.db-treeon:has(.db-tab) > .db-main { display: contents; }
  .term.dbpane > .dbview.compact.db-treeon:has(.db-tab) > .db-main > .db-tabs { grid-row: 1; grid-column: 1; }
  .term.dbpane > .dbview.compact.db-treeon:has(.db-tab) > .db-left { grid-row: 2; grid-column: 1; border-right: 0; }
  .term.dbpane > .dbview.compact.db-treeon:has(.db-tab) > .db-main > .db-body { display: none; }
  .term.dbpane .db-lhead > .db-pchip { display: none; }   /* the pane title names the project; Switch keeps its room */
  .term.dbpane .db-empty { max-width: 100%; padding: 16px 10px; }
  .term.dbpane .db-empty .row { flex-wrap: wrap; justify-content: center; }
}
.term.slot { overflow: auto; justify-content: flex-start; }
.term.slot .shead { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.term.slot .sgroup, .plist .sgroup { margin-top: 6px; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
/* W12 the layout control at the session bar's right (board ZANt0): Single / Split / Grid, the grid's preset, the context panel */
.layoutctl { margin-left: auto; display: flex; align-items: center; gap: 6px; padding-bottom: 5px; flex: none;
  flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.layoutctl button.icon .fi { --fic: var(--mut); }
.layoutctl button.icon.on .fi { --fic: var(--fg); }
.layoutmenu .lfoot { display: flex; gap: 8px; align-items: center; }
/* ⇧⌘F12: every panel hidden - the pill brings them back (board ZANt0 L6) */
.zenpill { position: fixed; left: 76px; bottom: 20px; z-index: 14; border-radius: 999px; padding: 3px 10px; font-size: var(--t-xs);
  color: var(--mut); background: var(--tile); border: 1px solid var(--line); }
.zenpill[hidden] { display: none; }
.zenpill kbd { font-size: var(--t-xs); }
/* W3 layout picker (Pencil G1) */
.layoutmenu { position: fixed; z-index: 30; width: 400px; padding: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 12px; }
.layoutmenu .lhead { display: flex; align-items: baseline; gap: 10px; }
.layoutmenu .lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.layoutmenu .lcard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 7px; background: none;
  border: 1px solid var(--line); border-radius: 7px; color: var(--fg); font-size: 12px; cursor: pointer; }
.layoutmenu .lcard:hover, .layoutmenu .lcard:focus-visible { border-color: var(--mut); outline: none; }
.layoutmenu .lcard.on { border-color: var(--link); background: color-mix(in srgb, var(--link) 12%, transparent); }
.layoutmenu .lcard .small { margin-top: -4px; font-size: 10.5px; }
.lthumb { display: flex; gap: 3px; width: 100%; height: 50px; }
.lthumb.row { flex-direction: column; }
.lthumb .lgroup { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.lthumb.row .lgroup { flex-direction: row; }
.lthumb .lcell { flex: 1; border: 1px solid var(--line); border-radius: 3px; }
.lcard.on .lthumb .lcell { background: var(--link); border-color: var(--link); }
.layoutmenu .lpin { display: flex; gap: 8px; align-items: flex-start; margin: 0; line-height: 1.4; }
.layoutmenu .lpin .fi { --fic: var(--faint); margin-top: 1px; }

/* ---- 9.7 OPS: turns, history/blame/graph, CI + MR, stack, diagnostics, usage */
#inspector .tbody { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.tbody .trow { margin-top: 0; align-items: center; }
.tbody .trow select { flex: 1; min-width: 0; font-size: 11.5px; }
.tbody p.small { margin: 3px 0; }
.turnfiles { margin: 2px 0; }
.turnfiles li { grid-template-columns: auto minmax(0, 1fr) auto auto; }
/* Open · Diff · History of a changed file (C6): on hover / keyboard focus only */
.gitfiles .gact { display: none; gap: 4px; }
.gitfiles li:hover .gact, .gitfiles li:focus-within .gact { display: flex; }
.gitfiles .gact button.mini { font-size: 10.5px; padding: 0 6px; }
/* a path or line number that opens the file (K3/K4): diffs and the transcript keep their monospace */
pre.diff button.link, .turn pre button.link { font: inherit; display: inline; }
pre.diff button.lno { text-align: left; }
.ci { margin: 2px 0 6px; flex-wrap: wrap; align-items: center; gap: 6px; }
a.chip { font-size: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; text-decoration: none; color: var(--link); }
a.chip.ci-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
a.chip.ci-bad { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
a.chip.ci-run { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
a.chip.ci-mut { color: var(--mut); }
.ci button.mini { margin-left: 0; }
.mrtarget { margin-top: 0; align-items: center; } .mrtarget input { max-width: 260px; }
label.small { display: inline-flex; align-items: center; gap: 4px; }
.jump { flex-wrap: wrap; gap: 4px; max-height: 64px; overflow: auto; }
.jump button.mini { margin-left: 0; }

/* history / graph: list left, diff right */
.modal:has(.hist), .modal:has(.blame) { width: min(1240px, calc(100vw - 32px)); }
.hist { display: grid; grid-template-columns: minmax(260px, 38%) minmax(0, 1fr); gap: 10px; min-height: 0; }
.hlist { max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 1px; background: var(--well); border-radius: 6px; padding: 4px; outline: none; }
.hlist:focus-visible { box-shadow: 0 0 0 1px var(--ok); }
.hrow { display: flex; flex-direction: column; gap: 1px; text-align: left; background: transparent; border-color: transparent; padding: 3px 6px; min-width: 0; }
.hrow.active { background: var(--tile); border-color: var(--ok); }
.hrow .hline { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.hhash { color: var(--hl-n); flex: none; }
.hsubj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
pre.diff.hdiff { max-height: 70vh; margin: 0; }
.ref { font-size: 10.5px; border: 1px solid var(--line); border-radius: 8px; padding: 0 5px; flex: none; white-space: nowrap; }
.ref-head { color: var(--ok); border-color: var(--ok); font-weight: 600; }
.ref-local { color: var(--link); border-color: var(--link); }
.ref-remote { color: var(--hl-k); border-color: var(--hl-k); }
.ref-tag { color: var(--warn); border-color: var(--warn); }
.hlist.graph { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 12px; }
.hlist.graph .gline { display: flex; flex-direction: row; align-items: baseline; gap: 0; white-space: pre; padding: 0 6px; line-height: 1.5; }
.hlist.graph .gline .hhash { margin-right: 4px; } .hlist.graph .gline .ref { margin-right: 4px; }
.lane.l0 { color: var(--link); } .lane.l1 { color: var(--ok); } .lane.l2 { color: var(--warn); }
.lane.l3 { color: var(--bad); } .lane.l4 { color: var(--hl-k); } .lane.l5 { color: var(--hl-t); }
.htabs { margin-top: 0; }

/* the Git window (W4/W5): branches | log | commit (files + details over the diff) */
.modal:has(.gw) { width: min(1440px, calc(100vw - 32px)); height: min(900px, calc(100vh - 32px)); padding: 0; overflow: hidden; }
.modal:has(.gw) > h2 { display: none; }
.gw { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.gw-tools { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.gw-tools button.mini { margin: 0; }
.gw-branch { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; font-size: 12px; }
.gw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(300px, 500px) minmax(440px, 1fr); }   /* 440: the commit column keeps its file pane (270) + toolbar at 1024 px */
.gw-side { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding: 8px; min-height: 0; }
.gw-blist { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.gw-sec { display: flex; align-items: center; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin: 8px 0 2px; }
.gw-sec button.mini { margin: 0; }
.gw-rname { padding: 2px 4px; }
.gw-b { display: flex; align-items: center; gap: 4px; border-radius: 5px; padding: 0 4px; min-width: 0; }
.gw-b:hover, .gw-b.on { background: var(--tile); }
.gw-b.cur .nm { font-weight: 600; color: var(--ok); }
.gw-bn { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; background: transparent; border-color: transparent; padding: 2px 0; text-align: left; }
.gw-bn .nm, .gw-wt .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-mark { flex: none; }
.gw-acts { display: none; flex: none; } .gw-acts button.mini { margin: 0 0 0 2px; }
.gw-b:hover .gw-acts, .gw-b:focus-within .gw-acts, .gw-wt:hover .gw-acts, .gw-wt:focus-within .gw-acts { display: inline-flex; }
.gw-wt { border-radius: 5px; padding: 3px 4px; }
.gw-wt:hover { background: var(--tile); }
.gw-wtop, .gw-wsub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gw-wsub { padding-left: 20px; }
.gw-foot { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.gw-foot button.mini { margin: 0; flex: 1; }
.gw-log { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.gw-filter { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); }
.gw-filter input { flex: 1; min-width: 0; } .gw-filter select { max-width: 130px; }
.gw-rows { flex: 1; overflow: auto; outline: none; font-size: 12px; }
.gw-rows:focus-visible { box-shadow: inset 0 0 0 1px var(--ok); }
.gw-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 0; padding: 0 8px; line-height: 22px; min-width: 0; }
.gw-row.lane-only { line-height: 14px; }
.gw-row.active { background: var(--tile); box-shadow: inset 2px 0 0 var(--ok); }
.gw-g { flex: none; font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; white-space: pre; }
.gw-subj { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
.gw-subj .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-au { flex: none; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-age { flex: none; width: 42px; text-align: right; }
.gw-h { flex: none; font-size: 11px; }
.gw-status { padding: 4px 8px; border-top: 1px solid var(--line); }
.gw-commit { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.gw-top { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: 230px; flex: none; border-bottom: 1px solid var(--line); }
.gw-fpane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.gw-fhead { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; }
.gw-fhead button.mini { margin: 0; } .gw-fhead button.mini.on, .gw-dhead button.mini.on { border-color: var(--ok); color: var(--fg); }
.gw-files { flex: 1; overflow: auto; font-size: 12px; }
.gw-dir { display: flex; align-items: center; gap: 5px; padding: 2px 8px; }
.gw-f { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: 0; border-radius: 0; padding: 1px 8px; text-align: left; min-width: 0; }
.gw-f.in { padding-left: 26px; }
.gw-f.active { background: var(--tile); box-shadow: inset 2px 0 0 var(--ok); }
.gw-f .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-st { flex: none; width: 12px; font-weight: 700; font-size: 11px; }
.gw-st.st-M { color: var(--link); } .gw-st.st-A { color: var(--ok); } .gw-st.st-D { color: var(--bad); } .gw-st.st-R, .gw-st.st-C { color: var(--warn); }
.gw-stat { flex: none; color: var(--mut); white-space: nowrap; }
.gw-details { overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.gw-subject { font-size: 14px; }
.gw-body-text { margin: 0; white-space: pre-wrap; color: var(--mut); font-size: 12.5px; }
.gw-meta { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 3px 10px; margin-top: 4px; }
.gw-meta > span { overflow-wrap: anywhere; }
.gw-dhead { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.gw-dhead button.mini { margin: 0; }
.gw-dhead .seg { display: inline-flex; } .gw-dhead .seg button.mini { border-radius: 0; } .gw-dhead .seg button.mini:first-child { border-radius: 4px 0 0 4px; } .gw-dhead .seg button.mini:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
.gw-diff { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.gw-diff > p { padding: 10px 12px; }
.gw-diff > .cmhost { flex: 1; min-height: 0; }
.gw-diff .cm-editor { height: 100%; }
.gw-diff .review-merge .cm-mergeView { height: 100%; }
.gw-sheet { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; z-index: 2; }
.gw-card { width: min(440px, calc(100% - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.gw-chead { display: flex; align-items: center; }
.gw-cbody { display: flex; flex-direction: column; gap: 8px; }
.gw-field { display: flex; flex-direction: column; gap: 4px; }
.gw-field > span:first-child { font-size: 11.5px; color: var(--mut); }
.gw-cbody p { margin: 0; }
.gw-lost { display: flex; flex-direction: column; gap: 2px; background: var(--well); border-radius: 6px; padding: 6px 8px; font-size: 12px; max-height: 200px; overflow: auto; }
.gw-lost code { color: var(--link); }
/* S3c: the commits a forced delete loses - a red box, not a passing remark */
.gw-danger { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 10px; color: var(--bad); background: var(--bad-bg);
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); border-radius: 6px; }
.gw-danger .fi { margin-top: 2px; flex: none; }
/* S5: the Push dialog (IntelliJ's Push Commits) - target, checks, commits | files, the file's diff */
.modal:has(.pd) { width: min(1040px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); padding: 0; overflow: hidden; }
.modal:has(.pd) > h2 { display: none; }
.pd { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pd-target { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; min-width: 0; }
.pd-target code { font-size: 12.5px; } .pd-b { font-weight: 600; } .pd-to { color: var(--link); }
.pd-new { color: var(--ok); background: var(--ok-bg); border-radius: 4px; padding: 0 6px; font-size: 11px; }
.pd-checks { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 0; }
.pd-checks:empty { display: none; }
.pd-check { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 4px; font-size: 12px; background: var(--well); }
.pd-check .fi { flex: none; margin-top: 2px; }
.pd-check.warn { color: var(--warn); background: var(--warn-bg); } .pd-check.warn .fi { --fic: var(--warn); }
.pd-check.block { color: var(--bad); background: var(--bad-bg); }
.pd-check.info .fi { --fic: var(--mut); }
.pd-body { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 12px; padding: 10px 16px; height: 250px; flex: none; }
.pd-pane { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.pd-phead { background: var(--well); border-bottom: 1px solid var(--line); min-height: 31px; }
.pd-commits { flex: 1; overflow: auto; font-size: 12px; }
.pd-commits .gw-row { line-height: 26px; }
.pd-all { font-weight: 600; }
.pd-commits code.gw-h { color: var(--link); } .pd-phead .gw-stat { color: var(--ok); }
.pd-empty { padding: 8px 10px; margin: 0; }
.pd .gw-dhead { border-top: 1px solid var(--line); padding: 6px 16px; }
.pd-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.pd-foot button { margin: 0; }
.blame { max-height: 72vh; overflow: auto; background: var(--well); border-radius: 6px; padding: 4px 0;
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; }
.blame .bl { display: grid; grid-template-columns: 250px 48px 1fr; }
.blame .bg { display: flex; gap: 8px; padding: 0 8px; overflow: hidden; white-space: nowrap; border-right: 2px solid transparent; }
.blame .bg.first { border-top: 1px solid var(--line); }
.blame .bg .hhash { flex: none; }
.blame .bauth { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mut); }
.blame .bage { flex: none; color: var(--faint); }
.blame .no { text-align: right; padding-right: 10px; color: var(--faint); user-select: none; }
.blame .tx { white-space: pre; }
.bg.age-0 { background: color-mix(in srgb, var(--ok) 30%, transparent); border-right-color: var(--ok); }
.bg.age-1 { background: color-mix(in srgb, var(--ok) 20%, transparent); }
.bg.age-2 { background: color-mix(in srgb, var(--ok) 13%, transparent); }
.bg.age-3 { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.bg.age-4 { background: color-mix(in srgb, var(--ok) 4%, transparent); }
.bg.age-5 { background: transparent; }
.bg.age-new { background: var(--warn-bg); border-right-color: var(--warn); }
@media (max-width: 800px) { .hist { grid-template-columns: minmax(0, 1fr); } .blame .bl { grid-template-columns: 150px 40px 1fr; } }

/* stack (taskd) */
/* one row per service: dot · name + state · actions (Logs, ⋯ always; a problem row adds its fix);
   healthy rows show their actions on hover/focus only, so the list reads as states */
.services { margin: 2px 0 0 -6px; }
.services li.svc { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 7px; align-items: center;
  min-height: 24px; padding: 0 2px 0 6px; border-radius: var(--r-sm); font-size: 12px; }
.services li.svc:hover, .services li.svc:focus-within { background: var(--tile); }
.services .sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.services .sstate { font-size: 11px; color: var(--faint-t); }
.services .sstate.bad { color: var(--bad); } .services .sstate.warn { color: var(--warn); }
.services .sacts { display: flex; align-items: center; gap: 2px; }
.services button.mini { margin-left: 0; }
.services .ic, .stackjob .ic { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--mut); font-size: 12px; line-height: 1; text-decoration: none; cursor: pointer; }
.services .ic:hover, .stackjob .ic:hover { background: var(--line); color: var(--fg); }
.services .ic:focus-visible, .stackjob .ic:focus-visible { outline: 1px solid var(--link); }
@media (hover: hover) {
  .services li.svc:not(.problem):not(:hover):not(:focus-within) .sacts button { opacity: 0; }
  .services li.svc:not(:hover):not(:focus-within) .sacts a.ic { color: var(--faint); }
}
.services .spinner.sdot-spin { width: 8px; height: 8px; border-width: 1.5px; border-top-color: var(--warn); }
.services button.fix { padding: 0 6px; }
.stack .faint { color: var(--faint-t); }
.stack-meta { margin: 0 0 2px; }
.stack-err { color: var(--bad); margin: 2px 0; overflow-wrap: anywhere; }
.oneshots { margin: 4px 0 0; }
.oneshots > summary { cursor: pointer; list-style: none; padding: 2px 0; }
.oneshots > summary::-webkit-details-marker { display: none; }
.oneshots > summary::before { content: '+ '; }
.oneshots[open] > summary::before { content: '− '; }
button.mini.stack-primary.go { color: var(--ok); }
button.mini.stack-primary:disabled { opacity: .5; }
/* the job box: running amber, done green (8 s), failed red until dismissed */
.stackjob { margin: 6px 0 8px -6px; padding: 6px 8px 7px; border-radius: var(--r-sm); border-left: 2px solid var(--warn); background: var(--warn-soft); }
.stackjob.ok { border-left-color: var(--ok); background: var(--well); }
.stackjob.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.stackjob .jh { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.stackjob .jt { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stackjob .jacts { display: flex; gap: 4px; align-items: center; flex: none; }
.stackjob .jacts .mini { margin: 0; }
.stackjob .spinner { width: 10px; height: 10px; border-width: 1.5px; border-top-color: var(--warn); flex: none; }
.stackjob .jdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stackjob .jdot.ok { background: var(--ok-dot); } .stackjob .jdot.bad { background: var(--bad); }
.stackjob .jm { margin: 1px 0 0 16px; }
.stackjob pre.jtail { margin: 5px 0 0; padding: 4px 6px; border-radius: var(--r-sm); background: var(--well); color: var(--faint-t);
  font-size: 10.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; max-height: 6.5em; overflow: hidden; }
.stackjob.bad pre.jtail { color: var(--bad); }
.sdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--dim-dot); }
.sdot.ok { background: var(--ok-dot); }
.sdot.warn { background: var(--warn); border-radius: 2px; }
.sdot.bad { background: var(--bad); border-radius: 1px; transform: rotate(45deg); }
.sdot.off { background: transparent; border: 2px solid var(--dim-dot); }
.modal:has(pre.logs) { width: min(1200px, calc(100vw - 32px)); }
pre.logs { max-height: 70vh; min-height: 30vh; overflow: auto; background: var(--well); padding: 10px; border-radius: 6px; margin: 0;
  white-space: pre-wrap; word-break: break-all; font-size: 11.5px; }
.modal:has(pre.logs) .row.left input[type="search"] { flex: 1; min-width: 0; }

/* diagnostics */
.diagbody .dgroup { margin: 4px 0 6px; }
.diagbody .dfile { font-size: 12px; display: flex; gap: 4px; min-width: 0; }
.diagbody .dfile .fn { font-weight: 600; flex: none; }
.diagbody .dfile .dir { color: var(--faint); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; }
.diagbody .ditem { display: block; font-size: 11.5px; padding-left: 8px; overflow-wrap: anywhere; }
.diagbody .ditem.error { color: var(--bad); } .diagbody .ditem.warning { color: var(--warn); }
.diagbody .ditem:disabled { cursor: default; }
.diagbody .ditem .no { color: var(--faint); font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; }

/* usage view */
.usage { overflow: auto; background: var(--well); border-radius: 10px; padding: 12px 16px; }
.usage h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin: 16px 0 6px; }
.utable { width: 100%; border-collapse: collapse; font-size: 12px; }
.utable th { text-align: left; color: var(--mut); font-weight: 500; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--line); }
.utable td { padding: 2px 8px 2px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.utable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.utable tr.mut td { color: var(--faint); }
.utable tr.utotal td { font-weight: 600; border-top: 1px solid var(--line); }
.utable .ubarcell { width: 34%; min-width: 120px; }
.ubar { display: flex; height: 10px; background: var(--card); border-radius: 3px; overflow: hidden; }
.ubar > span { display: block; height: 100%; }
.u-input { background: var(--link); } .u-output { background: var(--ok); } .u-cache_write { background: var(--warn); } .u-cache_read { background: var(--hl-k); }
.ulegend { display: flex; gap: 12px; color: var(--mut); }
.ulegend > span { display: inline-flex; align-items: center; gap: 4px; }
.usw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
#inspector h3 button.mini { text-transform: none; letter-spacing: 0; }

/* ---- 9.7 EDITOR: tabs, narrow side pane, change markers, side-by-side diff, notes, find, menu, markdown, image, edit */
.files.tree-off { grid-template-columns: minmax(0, 1fr); }
.files.tree-off .fleft { display: none; }
.files.narrow { grid-template-columns: minmax(150px, 36%) minmax(0, 1fr); gap: 6px; }
.files.narrow.tree-off { grid-template-columns: minmax(0, 1fr); }
.files.narrow .fhead { flex-wrap: wrap; gap: 4px 8px; padding: 6px 8px; }
.files.narrow .fhead .crumbs { flex-basis: 100%; }
.fhead .actions { flex-wrap: wrap; justify-content: flex-end; }
.fhead .actions button { font-size: 12px; padding: 2px 8px; }
.fhead .actions button:disabled { opacity: .45; cursor: default; }
.fhead .actions button.probs { color: var(--warn); } .fhead .actions button.probs.none { color: var(--mut); }
.fempty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; text-align: center; }
.tnode.opened:not(.active) { color: var(--fg); font-weight: 500; }
button.tnode:focus-visible { outline: 1px solid var(--ok); outline-offset: -1px; background: var(--tile); }

/* tabs of opened files */
.ftabs { display: flex; align-items: stretch; gap: 1px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; flex: none; min-height: 28px; }
.ftabs > button.ftree { flex: none; background: none; border: 0; border-right: 1px solid var(--line); border-radius: 0; color: var(--mut); padding: 0 9px; }
.ftabs > button.ftree.on { color: var(--ok); }
.ftab { display: flex; align-items: center; flex: none; max-width: 220px; border-right: 1px solid var(--line); color: var(--mut); }
.ftab button { background: none; border: 0; border-radius: 0; font-size: 12px; }
.ftab .fname { padding: 4px 4px 4px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.ftab .fclose { padding: 2px 7px; color: var(--faint); visibility: hidden; }
.ftab:hover .fclose, .ftab.on .fclose { visibility: visible; }
.ftab .fclose:hover { color: var(--bad); }
.ftab.on { color: var(--fg); background: var(--card); box-shadow: inset 0 -2px 0 var(--ok); }
.ftab.dirty .fname { color: var(--warn); }

/* the code pane: focusable for ↑↓, ⌘/⌥ held = identifiers are links */
.code:focus { outline: none; }
.code:focus-visible { box-shadow: inset 0 0 0 1px var(--line); }
.files.navkey .code .tx { cursor: pointer; }
.files.navkey .code .tx span:hover { text-decoration: underline; }
.ln .no { position: relative; }

/* change markers against HEAD (gutter, right edge of the line number) */
.ln.m-add .no { box-shadow: inset -3px 0 var(--ok); }
.ln.m-chg .no { box-shadow: inset -3px 0 var(--link); }
.ln.m-del .no::after, .ln.m-del0 .no::before { content: ""; position: absolute; right: 0; width: 0; height: 0;
  border-style: solid; border-color: transparent var(--bad) transparent transparent; border-width: 4px 6px 4px 0; }
.ln.m-del .no::after { bottom: -4px; z-index: 1; }
.ln.m-del0 .no::before { top: -4px; }
/* IntelliJ problems */
.ln.p-err .no { color: var(--bad); font-weight: 600; text-decoration: underline wavy var(--bad); }
::highlight(piper-cur) { background-color: var(--warn); color: var(--page); }

/* W11: the one popup menu (menu.ts, Pencil "Components · W11"): groups, shortcuts right, disabled with a reason, speed search */
.cmenu { position: fixed; z-index: 100; min-width: 200px; max-width: 420px; display: flex; flex-direction: column; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.cmenu:focus { outline: none; }
.cmenu .mlist { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.cmenu .mlist > * { flex: none; }   /* 9.37: a long list scrolls - the rows never squeeze into each other */
.cmenu button { display: flex; align-items: center; gap: 16px; text-align: left; background: none; border: 0; border-radius: 4px; padding: 5px 10px;
  font-size: 12.5px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmenu button > .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cmenu button:hover, .cmenu button:focus-visible, .cmenu button:focus { background: var(--tile); outline: none; }
.cmenu button[aria-disabled="true"] { color: var(--faint); cursor: default; }
.cmenu button[aria-disabled="true"]:hover { background: none; }
.cmenu button.danger { color: var(--bad); }
.cmenu button kbd { font-family: var(--mono); font-size: 10px; color: var(--faint); background: none; border: 0; padding: 0; }
.cmenu .mhint { font-size: 11px; color: var(--mut); flex: 0 1 auto; min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 9.37: a long path gives way, the name stays */
.cmenu .mcheck { color: var(--link); font-size: 12px; }
.cmenu .mrow { display: flex; align-items: center; gap: 4px; }
.cmenu .mrow > button:first-child { flex: 1; min-width: 0; }
.cmenu .msecondary { flex: none; width: 28px; height: 28px; justify-content: center; padding: 5px; color: var(--mut); }
.cmenu .msecondary[aria-checked="true"] { color: var(--nav-accent); background: var(--nav-selected); }
.cmenu .msecondary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-tools { width: 264px; max-width: calc(100vw - 8px); padding: 8px; border-radius: 10px; }
.nav-tools .mlist { max-height: min(65vh, 440px); }
.nav-tool-label { display: flex; align-items: center; gap: 11px; }
.nav-tool-label > svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-tool-count { margin-left: auto; color: var(--warn); font-variant-numeric: tabular-nums; }
.cmenu mark { background: none; color: var(--link); font-weight: 700; }
.cmenu .sep { height: 1px; background: var(--line); margin: 4px 6px; flex: none; }
.cmenu .mtitle { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--mut); padding: 6px 10px 2px; text-transform: uppercase; }
.cmenu .msearch { display: flex; align-items: center; gap: 6px; padding: 5px 10px; margin-bottom: 2px; border-bottom: 1px solid var(--line-soft, var(--line)); }
.cmenu .msearch::before { content: '⌕'; color: var(--mut); }
.cmenu .msearch .mq { font-family: var(--mono); font-size: 12px; border-right: 1px solid var(--link); padding-right: 1px; }
.cmenu .msearch .mcount { margin-left: auto; font-size: 11px; color: var(--faint); }
.cmenu .mnone { padding: 6px 10px; font-size: 12px; color: var(--faint); }
.cmenu .mfoot { font-size: 10.5px; color: var(--faint); padding: 5px 10px 2px; border-top: 1px solid var(--line); margin-top: 4px; }

/* pickers (⌘P symbols, outline, definitions, problems) */
.pitem .kind { font-size: 10px; color: var(--mut); border: 1px solid var(--line); border-radius: 6px; padding: 0 4px; margin-right: 6px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; }
pre.idea-info { max-height: 60vh; overflow: auto; background: var(--well); padding: 10px; border-radius: 6px; font-size: 12px; }

/* side-by-side diff */
.fdiff { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 0 0; }
.fdiff > p { padding: 0 12px; }
.sbs-head { display: flex; align-items: center; gap: 10px; padding: 0 12px 6px; border-bottom: 1px solid var(--line); }
.sbs-head .add { color: var(--ok); } .sbs-head .del { color: var(--bad); }
.sbs-head button.mini { margin-left: auto; }
.sbs { overflow: auto; flex: 1; min-height: 0; font-size: 12px; line-height: 1.5; }
.sbs-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px minmax(0, 1fr); }
.sbs-row .no { text-align: right; padding-right: 8px; color: var(--faint); user-select: none; }
.sbs-row .no.go { cursor: pointer; } .sbs-row .no.go:hover { color: var(--link); }
.sbs-row .cell { white-space: pre; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.sbs-row .cell.del, .sbs-row .no.del { background: var(--bad-bg); }
.sbs-row .cell.add, .sbs-row .no.add { background: var(--ok-bg); }
.sbs-row .cell.void { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--tile) 6px 7px); }
.sbs-row .cell:nth-child(2) { border-right: 1px solid var(--line); }
.sbs-hunk { color: var(--link); background: var(--card); padding: 2px 12px; margin-top: 4px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.sbs-file { font-weight: 600; padding: 8px 12px 2px; border-top: 1px solid var(--line); }

/* Markdown preview */
.fmd { overflow: auto; flex: 1; min-height: 0; padding: 12px 20px 24px; }
.mdv { max-width: 860px; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.mdv h1, .mdv h2, .mdv h3, .mdv h4, .mdv h5, .mdv h6 { line-height: 1.3; margin: 1.2em 0 .5em; }
.mdv h1 { font-size: 1.6em; border-bottom: 1px solid var(--line); padding-bottom: .2em; }
.mdv h2 { font-size: 1.3em; border-bottom: 1px solid var(--line); padding-bottom: .15em; }
.mdv h3 { font-size: 1.12em; } .mdv h4, .mdv h5, .mdv h6 { font-size: 1em; }
.mdv > :first-child { margin-top: 0; }
.mdv p { margin: .5em 0; }
.mdv ul, .mdv ol { padding-left: 1.6em; margin: .4em 0; }
.mdv li { margin: .15em 0; } .mdv li > p { margin: .2em 0; }
.mdv li.task { list-style: none; margin-left: -1.3em; }
.mdv li.task input { margin-right: 6px; vertical-align: -1px; }
.mdv code { background: var(--tile); border-radius: 4px; padding: 0 4px; font-size: .88em; }
.mdv pre.mdcode { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; white-space: pre; overflow-x: auto; }
.mdv blockquote { margin: .5em 0; padding: 0 12px; border-left: 3px solid var(--line); color: var(--mut); }
.mdv hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.mdv a { color: var(--link); }
.mdv button.link { font: inherit; display: inline; }
.mdv .mdtable { overflow-x: auto; margin: .6em 0; }
.mdv table { border-collapse: collapse; font-size: 12.5px; }
.mdv th, .mdv td { border: 1px solid var(--line); padding: 3px 8px; vertical-align: top; }
.mdv th { background: var(--card); }

/* image preview */
.fimg { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: repeating-conic-gradient(var(--tile) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.fimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fimg + .small { padding: 4px 12px 8px; }

.ferr { display: flex; align-items: center; gap: 8px; color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad);
  border-radius: 6px; padding: 4px 8px; font-size: 12px; }
.ferr span { flex: 1; }

/* ---------------------------------------------------------------- GitLab inbox (9.8): top of Overview */
.inbox { --ibx-a: var(--link); container-type: inline-size; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px 8px; margin-bottom: 16px; }
.ibx-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ibx-title { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.ibx-counts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ibx-updated { white-space: nowrap; }
button.icon .g { display: inline-block; }
button.icon.spin { border-color: var(--ok); }
button.icon.spin .g { animation: spin 0.9s linear infinite; }
.ibx-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.ibx-chips { display: flex; gap: 4px; flex-wrap: wrap; }
/* 9.43: All · GitLab · GitHub - one framed segment in front of the chips */
.ibx-forge { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
button.pill .n { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
button.pill.on .n { color: var(--ok); }
.ibx-proj { font: inherit; font-size: 12px; color: var(--fg); background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; max-width: 220px; }
.inbox input.ibx-search { flex: 1 1 180px; min-width: 0; max-width: 360px; padding: 3px 8px; font-size: 12.5px; }
.ibx-status:empty { display: none; }
.ibx-status { font-size: 12.5px; margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--well); border: 1px solid var(--line); }
.ibx-status p { margin: 4px 0; }
.ibx-status.bad { border-color: var(--bad); background: var(--bad-bg); color: var(--fg); }
.ibx-status.bad > span:first-child { color: var(--bad); }
.ibx-status.info { border-color: var(--warn); }
.ibx-cmd { display: flex; align-items: center; gap: 8px; background: var(--page); border: 1px solid var(--line); border-radius: 6px; padding: 4px 4px 4px 10px; margin: 6px 0; }
.ibx-cmd code { flex: 1; min-width: 0; overflow-wrap: anywhere; user-select: all; }

/* groups */
.ibx-group { margin-top: 4px; }
button.ibx-ghead { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 0; border-radius: 4px;
  padding: 4px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
button.ibx-ghead:hover { color: var(--fg); }
button.ibx-ghead:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
button.ibx-ghead .n { color: var(--faint); letter-spacing: 0; }
button.ibx-ghead .caret { width: 10px; }
.g-new > button.ibx-ghead { color: var(--warn); }
.ibx-rows { display: flex; flex-direction: column; }

/* rows */
.irow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 5px 6px 5px 4px;
  border-radius: 7px; border: 1px solid transparent; outline: none; }
.irow + .irow { border-top-color: color-mix(in srgb, var(--line) 55%, transparent); border-top-left-radius: 0; border-top-right-radius: 0; }
.irow:hover { background: color-mix(in srgb, var(--tile) 60%, transparent); }
.irow:focus-visible { box-shadow: 0 0 0 2px var(--link); background: var(--tile); }
.irow[aria-expanded="true"] { background: var(--well); border-color: var(--line); margin: 3px 0; }
.irow.busy { opacity: .75; }
.irow-main { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; cursor: pointer; min-width: 0; }
.iglyph { font-size: 12px; line-height: 20px; text-align: center; color: var(--faint); }
.iglyph.mr { color: var(--link); }
.irow.fresh .iglyph.issue { color: var(--warn); }
.irow-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.irow-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; line-height: 20px; }
.ibx-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); align-self: center; }
.iproj { flex: none; font-size: 11px; color: var(--mut); background: var(--neutral-bg); border-radius: 4px; padding: 0 5px; max-width: 16ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iref { flex: none; color: var(--mut); font-variant-numeric: tabular-nums; }
/* W23: a GitHub row's mark next to its #n */
.iforge { flex: none; font: 600 10px/1 "JetBrains Mono", "SF Mono", Menlo, monospace; color: var(--mut); border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; }
.ititle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irow.fresh .ititle { font-weight: 600; }
.irow-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.irow-l2:empty { display: none; }
.iage { line-height: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.irow-act { display: flex; align-items: center; gap: 4px; justify-self: end; }
.irow .ipv { grid-column: 1 / -1; }

/* chips on a row: reason (distinct hue, subtle fill, both themes via tokens), labels, badges */
.ibx-reason, .ibx-label, .ibx-badge, .ibx-due, .ibx-pill { font-size: 10.5px; line-height: 16px; border-radius: 8px; padding: 0 6px; white-space: nowrap; border: 1px solid transparent; }
.ibx-reason { --c: var(--mut); color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.ibx-reason.r-assigned { --c: var(--link); }
.ibx-reason.r-mention { --c: var(--warn); }
.ibx-reason.r-addr { --c: var(--warn); background: color-mix(in srgb, var(--warn) 24%, transparent); font-weight: 600; }
.ibx-reason.r-bad { --c: var(--bad); }
.ibx-reason.r-review { --c: var(--ok); }
.ibx-reason.r-mine { --c: var(--mut); border-style: dashed; }
.ibx-reason.r-mut { --c: var(--faint); }
.ibx-label { color: var(--mut); border-color: var(--line); }
.ibx-label.more { color: var(--faint); border-style: dashed; }
.ibx-badge { color: var(--on-ok); background: var(--warn); font-weight: 600; }
.ibx-due { color: var(--mut); border-color: var(--line); }
.ibx-due.over { color: var(--bad); border-color: var(--bad); }
button.ibx-sess, button.ibx-auto { font-size: 11px; line-height: 16px; padding: 0 7px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; white-space: nowrap; background: var(--tilebtn); }
button.ibx-sess .dot { width: 8px; height: 8px; }
button.ibx-auto { color: var(--link); border-style: dashed; border-color: var(--link); background: transparent; }
button.ibx-auto::before { content: "⚙"; font-size: 10px; }

/* primary action */
button.trunc { white-space: nowrap; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; }
/* a wall of green buttons hides what matters: outlined at rest, filled on the row you point at or move to */
.irow button.trunc.primary { background: transparent; color: var(--fg); }
.irow:hover button.trunc.primary, .irow:focus-within button.trunc.primary, .irow:focus-visible button.trunc.primary,
.irow[aria-expanded="true"] button.trunc.primary { background: var(--acc); color: var(--acc-fg); }
.ibx-showmore { margin: 4px 0 2px 26px; }
button.trunc .spinner { width: 10px; height: 10px; border-top-color: currentColor; }
.ibx-choose { display: inline-flex; gap: 4px; align-items: center; }
select.ibx-cand { font: inherit; font-size: 11.5px; color: var(--fg); background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; max-width: 200px; }
.ibx-nocheck { border-bottom: 1px dotted var(--faint); cursor: help; white-space: nowrap; }
.ibx-nocheck:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* skeleton while piperd makes its first pass */
.iskel { display: grid; grid-template-columns: 18px minmax(0, 1fr) 90px; gap: 10px; align-items: center; padding: 9px 6px; }
.iskel span { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--tile) 0%, var(--line) 50%, var(--tile) 100%);
  background-size: 200% 100%; animation: ibx-shimmer 1.3s ease-in-out infinite; }
.iskel span:nth-child(2) { width: 70%; }
@keyframes ibx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .iskel span, button.icon.spin .g { animation: none; } }
.ibx-empty { font-size: 12.5px; padding: 8px 4px; }
.ibx-keys { margin: 6px 2px 0; color: var(--faint); }

/* inline preview */
.ipv { margin: 6px 0 2px 26px; max-height: min(60vh, 560px); overflow: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; cursor: auto; overscroll-behavior: contain; }
.ipv-meta { margin-bottom: 6px; }
.ipv-mr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.ipv-state { margin: 0 0 8px; padding: 6px 8px; border-left: 3px solid var(--warn); white-space: pre-wrap; overflow-wrap: anywhere; }
.ipv-state .ipv-ceka { margin-top: 4px; }
.ibx-pill { border-color: var(--line); color: var(--mut); }
.ibx-pill.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.ibx-pill.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
.ibx-pill.run { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.ipv .mdv { font-size: 13px; max-width: none; }
.ipv-desc { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ipv-nhead { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.ipv-note { padding: 6px 10px; margin: 6px 0; border-left: 3px solid var(--line); border-radius: 0 6px 6px 0; }
.ipv-note.new { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.ipv-note.mine { border-left-color: var(--link); }
.ipv-nmeta { margin-bottom: 2px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.ibx-you { font-size: 10px; color: var(--link); border: 1px solid var(--link); border-radius: 6px; padding: 0 4px; }
.ibx-newtag { font-size: 10px; color: var(--on-ok); background: var(--warn); border-radius: 6px; padding: 0 5px; margin-left: 4px; font-weight: 600; }
.ipv-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; position: sticky; bottom: -10px; padding: 6px 0 2px; background: var(--card); }
.mdv details.mddetails { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; margin: .5em 0; }
.mdv details.mddetails > summary { cursor: pointer; color: var(--mut); }
.mdv details.mddetails[open] > summary { margin-bottom: 4px; }

/* ⋯ menu, confirm list */
.ibx-todos { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ibx-todo-body { margin-top: 2px; overflow-wrap: anywhere; }

/* narrow main area: the row's actions go under the text; 16 px gutters */
@container (max-width: 560px) {
  .irow { grid-template-columns: minmax(0, 1fr); }
  .irow-act { justify-self: start; padding-left: 26px; }
  .ipv { margin-left: 0; }
  .inbox input.ibx-search { max-width: none; flex-basis: 100%; }
  .ibx-keys { display: none; }
}
@media (max-width: 600px) {
  .board { padding: 10px 16px; }
  .inbox { padding: 8px 10px; }
  .board .grid { grid-template-columns: minmax(0, 1fr); }
}

/* automation rules */
.modal:has(.rules) { width: min(680px, calc(100vw - 32px)); }
.rules-intro p { margin: 0 0 6px; }
.rules-intro ul { margin: 0; padding-left: 18px; color: var(--mut); }
.rules { display: flex; flex-direction: column; gap: 8px; }
.rule { border: 1px solid var(--ok); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--well); }
.rule.off { border-color: var(--line); }
.rule.off .rule-events { opacity: .7; }
.rule-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rule-top .rule-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rule.all { border-style: dashed; }
.modal:has(.rules) .rules { max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.rule-events { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.rule-events label { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
label.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
label.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.switch .track { width: 28px; height: 16px; border-radius: 8px; background: var(--line); position: relative; transition: background .15s; }
label.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg); transition: transform .15s; }
label.switch input:checked + .track { background: var(--ok); }
label.switch input:checked + .track::after { transform: translateX(12px); background: var(--on-ok); }
label.switch input:focus-visible + .track { box-shadow: 0 0 0 2px var(--link); }
.ibx-secnote { margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--warn); background: var(--warn-bg); color: var(--fg); }
p.warn.small, p.bad.small { margin: 2px 0; }
p.bad.small:empty, p.warn.small:empty { display: none; }

/* board cards: issue chip + workflow strip + draft (9.8 #7, #8) */
.cflow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 10.5px; }
.cflow .fstep { padding: 0 6px; line-height: 16px; border-radius: 8px; color: var(--faint); border: 1px solid transparent; cursor: help; white-space: nowrap; }
.cflow .fstep + .fstep::before { content: "→"; color: var(--faint); margin: 0 4px 0 -4px; }
.cflow .fstep.done { color: var(--ok); }
.cflow .fstep.skipped { opacity: .55; }
.cflow .fstep.next { color: var(--fg); border-color: var(--warn); background: var(--warn-bg); font-weight: 600; }
.cflow .fstep.partial { color: var(--warn); }
button.cdraft { align-self: flex-start; font-size: 12px; padding: 3px 10px; color: var(--on-ok); background: var(--warn); border-color: var(--warn); font-weight: 600; }

/* comment dialog - F24 (Pencil tOl5g): 600 px, sized by its text; Write | Preview tabs, side by side only as an option */
.modal:has(.cdlg) { width: min(600px, calc(100vw - 32px)); padding: 0; }
.modal:has(.cdlg.wide) { width: min(1180px, calc(100vw - 32px)); }
.modal:has(.cdlg) > h2 { display: none; }   /* the header line names the target */
.cdlg { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ctarget { display: flex; align-items: baseline; gap: 6px; padding: 12px 12px 4px 16px; font-size: var(--t-md); }
.ctarget a { color: var(--fg); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.ctarget a:hover { text-decoration: underline; }
.ctarget .cx { align-self: center; }
.ctabs { display: flex; align-items: flex-end; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.ctabs .ctab { background: none; border: 0; border-radius: 0; padding: 6px 0 7px; color: var(--mut); box-shadow: none; }
.ctabs .ctab[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }
.ctabs .ctab:not(:disabled):hover { background: none; color: var(--fg); }
.ctabnote { padding-bottom: 8px; font-size: var(--t-xs); color: var(--faint-t); }
.ctabs .cside { align-self: center; }
.cdlg > .warn.small { margin: 8px 16px 0; }
.cbody { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.cdlg.wide .cbody { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cbody textarea { border: 0; border-radius: 0; background: transparent; resize: vertical; min-height: 140px; padding: 12px 16px;
  font-size: var(--t-sm); line-height: 1.55; outline: none; }
.cpreview { min-height: 140px; max-height: 55vh; overflow: auto; padding: 12px 16px; }
.cdlg.wide .cpreview { border-left: 1px solid var(--line); }
.cpreview .mdv { font-size: var(--t-md); }
.cfoot { border-top: 1px solid var(--line); }
.cfoot .row { align-items: center; margin: 0; padding: 10px 12px 10px 16px; border-top: 1px solid var(--line); gap: 8px; }
.cfoot .row button kbd { margin-left: 6px; }
.ccount { font-variant-numeric: tabular-nums; }
.ccount:empty { display: none; }
.ccount.bad { color: var(--bad); }
.chcount.ok { color: var(--ok); }
.chints { list-style: none; margin: 0; padding: 6px 12px 6px 16px; font-size: var(--t-sm); display: flex; flex-direction: column; gap: 4px; }
.chints:empty { display: none; }
.chints li { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.chints .chdot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.chints li.error .chdot { background: var(--bad); }
.chints .chtext { flex: 1; min-width: 0; color: var(--fg); }
.chints li.error .chtext { color: var(--bad); }
.chints li button { flex: none; }
.cstatus:empty { display: none; }
.cstatus { font-size: var(--t-sm); padding: 6px 16px; }
.cguard { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 12px 12px; padding: 8px 10px; border: 1px solid var(--warn); background: var(--warn-bg); border-radius: var(--r-md); font-size: var(--t-sm); }
.cguard span { flex: 1 1 260px; }
.cdone { padding: 16px; }
.cdone p.big { font-size: var(--t-lg); font-weight: 600; margin: 0 0 6px; }
.cdone a { color: var(--link); }
@media (max-width: 760px) {
  .cdlg.wide .cbody { grid-template-columns: minmax(0, 1fr); }
}

/* stacked toasts */
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 21; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
#toasts .toast { position: static; transform: none; display: flex; align-items: center; gap: 10px; pointer-events: auto; max-width: 100%;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); }
#toasts .toast > span { overflow-wrap: anywhere; }
/* Notification setup help waits for a decision or dialog; action errors still show immediately. */
body.pending-open #toasts .notification-help,
body:has(#overlay.open) #toasts .notification-help { display: none; }
button.tact { font-size: 12px; padding: 1px 9px; color: var(--link); border-color: var(--link); background: transparent; flex: none; }

/* ---- shell (PIPER.md 9.9): rail = navigation + session state, fixed header controls,
   inspector ordered by what you act on, one button vocabulary */
kbd { font: 10.5px/1 "JetBrains Mono", "SF Mono", Menlo, monospace; color: var(--faint); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 4px; background: var(--well); }
button.icon { padding: 2px 7px; min-width: 26px; line-height: 18px; color: var(--mut); }
button.icon.on { color: var(--fg); background: var(--tile); }
button:disabled { opacity: .45; cursor: default; }
button.tab:disabled:hover { border-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.chip { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 7px; border-radius: 8px; border: 1px solid var(--line);
  color: var(--mut); background: transparent; vertical-align: 1px; margin-left: 4px; white-space: nowrap; max-width: 40ch;
  overflow: hidden; text-overflow: ellipsis; }
button.chip { cursor: pointer; }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.chip.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-bg); }
.grow { flex: 1; }


.head { min-height: 52px; }
.head .sub .chip { vertical-align: 0; }
.head .sub .st-waiting, .head .sub .st-attention, .head .sub .st-trust { color: var(--warn); }
.head .sub .st-error, .head .sub .st-blocked { color: var(--bad); }
.head .sub .st-working { color: var(--ok); }
.head .tabs { align-items: center; }
.tabsep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.head .actions { align-items: center; }

.endbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin: 0 0 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); font-size: 12.5px; }
.endbar .grow { flex: 1; }
.composer .ctarget-label { color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.composer .ctarget-label.warn { color: var(--warn); }
.composer .ctarget-label.pin { color: var(--link); }
.composer.compact .cfull, .composer.compact select { display: none; }   /* D7: collapsed = target, text, ⤢, Send */
.composer .ckeys { display: none; color: var(--mut); align-self: center; }
/* collapsed (Pencil mNJFA A / C): target … ⤢ ⌘E above the text, keys … Send under it */
.composer.compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "target size" "text text" "keys send"; }
.composer.compact .crow { display: contents; }
.composer.compact .ctarget-label { grid-area: target; max-width: 100%; align-self: center; justify-self: start; border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }
.composer.compact .csize { grid-area: size; }
.composer.compact textarea { grid-area: text; }
.composer.compact .ckeys { display: block; grid-area: keys; }
.composer.compact .primary { grid-area: send; }
.composer.compact textarea { min-height: 44px; }
.composer textarea:focus { border-color: var(--link); }

#inspector h4 { font-size: 11px; color: var(--mut); margin: 12px 0 4px; font-weight: 600; }
#inspector section.alert { border-color: var(--warn); background: var(--warn-bg); }
#inspector section.alert h3 { color: var(--warn); }
.audit td.asess { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit td.asess button.link { white-space: nowrap; overflow-wrap: normal; display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }   /* a long title must not run into the next column */
/* 9.12 A Timesheet */
.tsheet .num-in { width: 64px; }
.tsheet .bhead { flex-wrap: wrap; }
.tsheet .bhead button, .tsheet .bhead strong { white-space: nowrap; }
.tsheet .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.tsheet .row input[type=text] { flex: 1 1 180px; min-width: 120px; }
.tstable td.on { background: color-mix(in srgb, var(--link) 16%, transparent); }
.tstable .ts-edited { font-weight: 600; }
/* N10-D-6: a long unbroken label / issue title wraps inside the card (it ran past it) */
.tsheet ul.small li,
.tstable td:first-child {
  overflow-wrap: anywhere;
}
.tsheet .ts-detail { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.tsheet .ts-detail ul { margin: 4px 0; padding-left: 18px; }

/* Settings (9.13): sections on the left, one at a time on the right */
.settings { overflow: hidden; display: flex; min-height: 0; container: st / inline-size; }
.settings .st-layout { display: grid; grid-template-columns: 210px 1fr; gap: 14px; width: 100%; min-height: 0; }
.settings .st-side { display: flex; flex-direction: column; gap: 1px; overflow: auto; padding: 4px 0; }
.settings .st-gtitle { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 12px 10px 4px; }
.settings .st-gtitle:first-child { padding-top: 2px; }
.settings .st-navi { text-align: left; background: none; border: 0; border-radius: 7px; padding: 6px 10px; color: var(--fg);
  display: flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; }
.settings .st-navi:hover { background: var(--well); }
.settings .st-navi.on { background: var(--card); box-shadow: inset 2px 0 0 var(--link); }
.settings .st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); display: none; margin-left: auto; }
.settings .st-navi.dirty .st-dot { display: inline-block; }
.settings .st-searchbox { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; height: 30px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--well); color: var(--faint); flex: none; }
.settings .st-searchbox:focus-within { border-color: var(--link); }
.settings .st-search { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0; color: var(--fg); font-size: 13px; }
.st-sic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.settings .st-found { color: var(--faint); padding: 6px 10px 0; font-size: 11px; display: flex; flex-direction: column; gap: 4px; }
.settings .st-cnt { margin-left: auto; color: var(--faint); font-size: 11px; }
.settings .st-cnt + .st-dot { margin-left: 0; }
.settings .st-sec > p.st-shown { color: var(--faint); margin: 0 0 8px; }
.settings .st-sec { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px 0;
  overflow: auto; min-height: 0; display: flex; flex-direction: column; }
.settings .st-crumb { font-size: 12px; color: var(--mut); margin: 0 0 4px; }
.settings .st-crumb .link { font-size: 12px; padding: 0; }
.settings .st-crumb-sep { color: var(--faint); }
.settings .st-sec h2 { font-size: 16px; margin: 0 0 4px; }
.settings .st-sec > p { margin: 0 0 8px; max-width: 760px; }
.settings .st-field { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.settings .st-field.wide { grid-template-columns: 1fr; }
.settings .st-label { padding-top: 4px; }
.settings .st-badge { margin-left: 6px; font-size: 10px; padding: 0 5px; border-radius: 8px; color: var(--warn); border: 1px solid var(--warn); }
.settings .st-label .st-badge { display: table; margin: 4px 0 0; padding: 1px 6px; border: 0; border-radius: 4px; background: var(--warn-bg); }   /* W14: under the label, like the board */
.settings .st-ctl { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.settings .st-ctl > input.st-wide, .settings .st-secret input { width: min(520px, 100%); }
.settings .st-list { width: min(520px, 100%); font-size: 12px; }
.settings .st-ctl > input[type=number] { width: 120px; }
.settings .st-ctl > input[type=time] { width: 140px; }
.settings .st-choices { display: flex; gap: 4px; flex-wrap: wrap; }
.settings .st-chip { min-width: 40px; padding: 4px 8px; }
.settings .st-chip.on { background: var(--ok-bg); border-color: var(--ok); color: var(--fg); }
.settings .st-ctl > input:not([type]), .settings .st-ctl > input[type=text]:not(.st-wide) { width: 140px; }
.settings .st-secret { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; width: 100%; }
.settings .st-err { color: var(--bad); font-size: 12px; }
.settings .st-err:empty { display: none; }
.settings .st-apply { color: var(--faint); }
.settings .st-more summary { cursor: pointer; color: var(--mut); }
.settings .st-env { color: var(--fg); overflow-wrap: anywhere; }
.settings .st-note { color: var(--ok); }
.settings .st-bar { position: sticky; bottom: 0; margin-top: auto; background: var(--card); border-top: 1px solid var(--line);
  display: flex; gap: 8px; align-items: center; padding: 10px 0 12px; flex-wrap: wrap; }
.settings .st-bar .grow { flex: 1; }
.settings .st-projects { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.settings .st-ptools { gap: 8px; align-items: center; }
.settings .st-ptools .grow { flex: 1; }
.settings .st-psearch { width: min(320px, 100%); }
.settings .st-pwrap { max-height: 58vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.settings .st-ptable { border-collapse: collapse; width: 100%; }
.settings .st-ptable th { position: sticky; top: 0; background: var(--card); text-align: left; font-weight: normal; color: var(--mut);
  font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); z-index: 1; }
.settings .st-ptable td { padding: 5px 8px; vertical-align: top; border-bottom: 1px solid var(--line); }
.settings .st-ptable tr:last-child td { border-bottom: 0; }
.settings .st-ptable tr.explicit td:first-child { box-shadow: inset 2px 0 0 var(--link); }
.settings .st-ptable input { width: 100%; min-width: 90px; }
.settings .st-ptable .st-path { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings .st-ptable .st-obs { min-width: 200px; }
.settings .st-sugg { margin-top: 3px; color: var(--mut); }
@media (max-width: 900px) { .settings .st-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .settings .st-side { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  .settings .st-searchbox, .settings .st-found { flex-basis: 100%; } }
@media (max-width: 700px) { .settings .st-field { grid-template-columns: 1fr; } }
/* N10: the same by the view's own width - beside the agent drawer (a column since N10) Settings is 590 px at 1024 */
@container st (max-width: 820px) { .settings .st-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .settings .st-side { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  .settings .st-searchbox, .settings .st-found { flex-basis: 100%; } }
@container st (max-width: 620px) { .settings .st-field { grid-template-columns: 1fr; } }
.st-warn li { margin: 4px 0; }
.st-ack { display: flex; gap: 6px; align-items: center; margin-top: 10px; }

/* ---- 9.14 Feed: actions (cards), events (grey lines), chat (bubbles) - three looks that never mix */
.feed { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.feed-head { padding: 8px 12px 6px; border-bottom: 1px solid var(--line); }
.feed-title { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.feed-since { font-size: 11px; }
.feed-filters { display: flex; flex-wrap: wrap; gap: 2px; }
.feed-filters button.tab { font-size: 12px; padding: 1px 8px; }
.feed-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 12px; }
.feed-empty, .feed-note { font-size: 12px; margin: 6px 2px; }
.feed-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.feed-card { background: var(--tile); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 8px;
  padding: 8px 10px; outline: none; }
.feed-card:focus-visible, .feed-ev:focus-visible { box-shadow: 0 0 0 2px var(--link); }
.feed-card.lv-security, .feed-card.lv-ci, .feed-card.lv-blocked { border-left-color: var(--bad); }
.feed-card.lv-waiting { border-left-color: var(--link); }
.feed-card.lv-gitlab, .feed-card.lv-prod { border-left-color: var(--mut); }
.feed-card-head { display: flex; gap: 6px; align-items: baseline; }
.feed-card-title { font-weight: 600; flex: 1; overflow-wrap: anywhere; }
.feed-card.lv-security .feed-card-title { color: var(--bad); }
.feed-age, .feed-time { font-size: 11px; white-space: nowrap; }
.feed-ico { width: 14px; text-align: center; flex: none; color: var(--mut); }
.feed-card.lv-permission .feed-ico, .feed-card.lv-confirm .feed-ico { color: var(--warn); }
.feed-card.lv-security .feed-ico, .feed-card.lv-ci .feed-ico { color: var(--bad); }
.feed-subj { background: none; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font-size: 11px; color: var(--link);
  margin: 4px 0 0 20px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-body { margin: 6px 0 0; padding: 6px 8px; background: var(--well); border-radius: 6px; font-size: 11.5px; max-height: 320px; overflow: auto; }
.feed-body { line-height: 1.45; }
.feed-body.clamp { max-height: 6.5em; overflow: hidden;   /* the cut fades: clearly "more below" */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.feed-msg-text.clamp { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.feed-quote { margin: 6px 0 0; padding: 4px 8px; border-left: 2px solid var(--line); color: var(--fg); font-size: 12px; overflow-wrap: anywhere; }
.feed-card-acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; }
.feed-card-acts button.mini { margin: 0; }
.feed-card-acts button.mini.link { font-size: 11px; color: var(--mut); opacity: .45; }
.feed-card:hover .feed-card-acts button.mini.link, .feed-card:focus-within .feed-card-acts button.mini.link { opacity: 1; }
.feed-card-acts button.mini.link:hover { color: var(--link); }
.feed-spacer { flex: 1; }
.feed-reply { margin-top: 8px; border: 1px solid var(--link); border-radius: 6px; padding: 6px; }
.feed-reply-to { font-size: 11px; color: var(--link); }
.feed-reply textarea { margin-top: 4px; }
.feed-day { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 4px; }
.feed-new { font-size: 11px; color: var(--warn); border-top: 1px solid var(--warn); margin: 8px 0 4px; padding-top: 2px; text-align: right; }
.feed-ev { display: grid; grid-template-columns: 14px 1fr auto 18px; gap: 6px; align-items: baseline; padding: 3px 4px;
  border-radius: 4px; color: var(--mut); font-size: 12px; cursor: pointer; outline: none; }
.feed-ev:hover { background: var(--well); color: var(--fg); }
.feed-ev-title { overflow-wrap: anywhere; }
.feed-ev-agent { visibility: hidden; margin: 0; }
.feed-ev:hover .feed-ev-agent, .feed-ev:focus .feed-ev-agent { visibility: visible; }
.feed-tools { font-size: 11px; margin: 2px 0 2px 4px; }
.feed-msg { max-width: 88%; margin: 6px 0; padding: 6px 10px; border-radius: 10px; }
.feed-msg.agent { background: var(--tile); border: 1px solid var(--line); border-bottom-left-radius: 3px; margin-right: auto; }
.feed-msg.you { background: var(--neutral-bg); border-bottom-right-radius: 3px; margin-left: auto; }
.feed-msg.queued { border: 1px dashed var(--mut); background: transparent; }
.feed-msg-who { display: flex; gap: 6px; font-size: 11px; margin-bottom: 2px; align-items: baseline; }
.feed-msg.agent .feed-msg-who { color: var(--link); }
.feed-msg-who button.mini { margin: 0 0 0 auto; }
.feed-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-msg-text.clamp { max-height: 16em; overflow: hidden; }
.feed-compose { border-top: 1px solid var(--line); padding: 8px 10px 10px; background: var(--card); }
.feed-agent { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.feed-agent button.mini { margin: 0; }
.feed-refs { display: flex; flex-wrap: wrap; gap: 4px; }
.feed-ref { font-size: 11px; font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; background: var(--well); border: 1px solid var(--line);
  border-radius: 6px; padding: 0 4px 0 6px; margin-bottom: 4px; }
.feed-input { resize: none; }
.feed-warn { color: var(--warn); font-weight: 600; font-size: 12px; margin: 4px 0; }

/* ---------------------------------------------------------------- 9.16 Overview: one visual system
   type 11 / 12 / 13 / 15 / 18 · space 4 / 8 / 12 / 16 / 24 · radius 4 / 6 / 10 · a state is shape +
   colour + word · amber only for "waits for you" · buttons: default, primary, ghost, danger */
:root {
  --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-lg: 15px; --t-xl: 18px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --ab-w: 64px; --q-w: 360px; --ctx-w: 300px;
  --drawer-w: min(420px, max(320px, 36vw), 94vw);   /* N10: the agent drawer's column - 369 px at 1024, so the detail beside it keeps its tabs */
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  /* themes.json's faint is under 4.5:1 as text: text uses this mix (both themes), marks keep --faint */
  --faint-t: color-mix(in srgb, var(--mut) 65%, var(--faint));
  --run: var(--link);
  --ok-soft: color-mix(in srgb, var(--ok) 14%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 16%, transparent);
  --bad-soft: color-mix(in srgb, var(--bad) 14%, transparent);
  --link-soft: color-mix(in srgb, var(--link) 14%, transparent);
}
@media (max-width: 1400px) { :root { --q-w: 320px; --ctx-w: 272px; } }
/* N10 (CI-2): the context panel is a column at every width. Up to 1100 px it had none (N9: hidden, then laid over the detail's
   right edge - it covered Conversation's Send, HTTP's Open in Files, the grid tiles' buttons); ⌘I / ◧ close it for the room */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

button.ghost { background: transparent; border-color: transparent; color: var(--mut); }
button.ghost:not(:disabled):hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
button.primary { font-weight: 600; }
/* 9.62 shared patterns. Row actions (Z4): a list row's buttons show on hover and while focus is inside the row -
   opacity, not visibility, so Tab still reaches them; always shown where there is no hover (touch). */
.ra-row .row-actions { opacity: 0; transition: opacity .12s; }
.ra-row:hover .row-actions, .ra-row:focus-within .row-actions, .ra-row.sel .row-actions, .ra-row[aria-expanded="true"] .row-actions { opacity: 1; }
@media (hover: none) { .ra-row .row-actions { opacity: 1; } }
/* Section heading (Z5): 11 px capitals in --faint-t (faint alone is 3.4:1); a selected row = tile + a 2 px stripe */
.sec-h { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--faint-t); }
.sel-row { background: var(--tile); box-shadow: inset 2px 0 0 var(--sel-c, var(--link)); }
button.mini, button.small, a.btn.small { font-size: var(--t-xs); padding: 1px 8px; border-radius: var(--r-sm); }

/* state marks (queue, detail header): ◆ waits · spinning ring works · ● idle · ■ stuck / blocked · ○ ended */
.st { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dim-dot); }
.st.wait { background: var(--warn); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.st.run { background: transparent; border: 2px solid color-mix(in srgb, var(--run) 30%, transparent); border-top-color: var(--run); animation: spin 1s linear infinite; }
.st.idle { background: var(--ok-dot); }
.st.stuck { background: var(--bad); border-radius: 2px; }
.st.off { background: transparent; border: 2px solid var(--dim-dot); }
.st.new { background: transparent; border: 2px solid var(--link); }

/* pills (filters, chips) and counts */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); line-height: 20px; padding: 1px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--mut); white-space: nowrap; flex: none; }
button.pill:hover { color: var(--fg); }
.pill.on { color: var(--fg); background: var(--tile); border-color: var(--mut); }
.pill.icon { padding: 1px 8px; }
.pill.tiny { font-size: var(--t-xs); line-height: 16px; padding: 0 7px; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
/* N8: text only - a flex box (.pill) never draws the ellipsis, the text was cut mid-letter */
.pill.tiny { display: inline-block; }
.pill.link { color: var(--link); border-color: color-mix(in srgb, var(--link) 45%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-soft); }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: var(--bad-soft); }
.count { font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--mut); }
.pill.on .count { color: var(--fg); }
.pill .count.wait, .pill.on .count.wait { color: var(--warn); font-weight: 600; }   /* 9.37: waits for you, not the row count */

/* activity bar: the places of the tool */
:root { --nav-accent: #9ccbd4; --nav-selected: color-mix(in srgb, var(--nav-accent) 14%, var(--page)); }
:root[data-scheme="light"] { --nav-accent: #296c79; }
#actbar { background: var(--page); border-right: 1px solid var(--line-soft, var(--line)); display: flex; flex-direction: column; align-items: stretch;
  gap: 5px; padding: 12px 0; overflow: hidden; min-height: 0; }
.ab-main, .ab-foot { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ab-main { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 4px 0; }
.ab-foot { flex: none; padding-top: 6px; }
.ab-sep { width: 18px; height: 1px; background: var(--line); margin: 6px 0; flex: none; }
.ab-brand { display: flex; justify-content: center; padding: 2px 0 10px; }
.ab-brand img { width: 26px; height: 26px; border-radius: var(--r-md); }
.ab-item { position: relative; display: flex; align-items: center; justify-content: center; align-self: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; background: transparent; border: 1.5px solid transparent; padding: 0; color: var(--mut); text-decoration: none; }
.ab-item:hover, .ab-item.expanded { color: var(--fg); background: var(--tile); border-color: var(--line); }
.ab-item.on { color: var(--nav-accent); background: var(--nav-selected); border-color: var(--nav-accent); }
.ab-item:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }
.ab-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ab-badge { position: absolute; top: -1px; right: -1px; min-width: 16px; padding: 0 3px; border: 1.5px solid var(--page); border-radius: 9px; font-size: 9px; line-height: 14px;
  font-weight: 600; text-align: center; background: var(--nav-accent); color: var(--page); font-variant-numeric: tabular-nums; }
.ab-badge.warn { background: var(--warn); color: var(--on-ok); }
.ab-dot.off { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--dim-dot); }

/* the queue */
#queue { background: var(--card); border-right: 1px solid var(--line); min-height: 0; min-width: 0; overflow: hidden; }
.q-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.q-head { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.q-title { display: flex; align-items: center; gap: 8px; }
.q-title h2 { margin: 0; font-size: var(--t-md); font-weight: 600; }
.q-title > button { flex: none; white-space: nowrap; color: var(--mut); }
.q-title > button:hover { color: var(--fg); }
.q-searchbox { display: flex; align-items: center; min-width: 0; height: 32px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--well); }
.q-searchbox:focus-within { border-color: var(--link); }
.q-searchbox > svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--mut); stroke-width: 1.8; stroke-linecap: round; }
.q-search { min-width: 0; flex: 1; font-size: var(--t-sm); padding: 4px 6px; border: 0; background: transparent; outline: none; }
.q-search::placeholder { color: var(--mut); }
.q-cmdk { padding: 3px 0; }
.q-cmdk kbd { color: inherit; }
.q-new { padding: 3px 5px; font-size: var(--t-sm); }
.q-collapse { padding: 4px; }
.q-collapse svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.q-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 var(--s3); }
.q-sec { padding-top: var(--s2); }
.q-sechead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding: 6px 16px; font-size: var(--t-xs); color: var(--faint-t);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
/* N9: the hint wraps (right-aligned) - with "dismissed · restore" and "muted · unmute" the unmute link was behind the … */
.q-sechead .q-hint { text-transform: none; letter-spacing: 0; font-weight: 400; min-width: 0; text-align: right; }
.q-sechead button.link { font-size: var(--t-xs); text-transform: none; letter-spacing: 0; }
.q-heading, .q-sechead .q-fold { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.q-count { font-variant-numeric: tabular-nums; }
.q-sec.ended { border-top: 1px solid var(--line); margin-top: 12px; }
.q-sec.running .q-sectitle::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 1px; }
.q-fold { background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; gap: 6px; }
/* N8: beside a long hint (dismissed · restore · muted · unmute) the label wrapped - "Recently ·" / "21" on two lines; the hint gives way (ellipsis) */
.q-sechead .q-fold { flex: none; white-space: nowrap; }
.q-empty { margin: 2px var(--s3) 6px 34px; font-size: var(--t-sm); color: var(--faint-t); }
.q-empty button.link { font-size: var(--t-sm); }
.qi { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center;
  padding: 10px 16px 10px 14px; border-left: 2px solid transparent; cursor: pointer; outline: none; }
.qi:hover { background: color-mix(in srgb, var(--tile) 70%, transparent); }
.qi.sel { background: var(--tile); border-left-color: var(--accent, var(--ok)); }
.qi:focus-visible { box-shadow: inset 0 0 0 2px var(--link); }
.qi > .st { grid-row: 1; align-self: start; margin-top: 5px; }
.qi-title { grid-column: 2; font-weight: 600; font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.qi-src { color: var(--mut); font-weight: 400; margin-right: 6px; font-size: var(--t-sm); }
.qi-age { grid-column: 3; align-self: start; padding-top: 2px; font-size: var(--t-xs); color: var(--faint-t); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qi-sub { grid-column: 2 / 4; font-size: var(--t-sm); color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qi-chips { grid-column: 2 / 4; display: flex; gap: 4px 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.qi-meta { font-size: var(--t-sm); color: var(--mut); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.qi-meta.warn { color: var(--warn); }
.qi-meta.bad { color: var(--bad); }
.qi-meta.ok { color: var(--ok); }
.qi-ops { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; max-width: 100%; }
/* 9.50's fourth decision button broke "Deny n" over two lines in the 360 px queue: whole buttons wrap, never their words */
.qi-ops button.mini { margin: 0; white-space: nowrap; }
.qi.g-wait .qi-title, .q-sec.needs .qi .qi-title { color: var(--fg); }
.qi.g-stuck .qi-sub { color: var(--bad); }
/* a confirmation is approved from the row: its whole title (the kind - PROTECTED, PRODUCTION - is at its end) */
.qi.confirm .qi-title { display: block; -webkit-line-clamp: unset; }
.q-sec.ended .qi-title { color: var(--fg); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qi.unread .qi-title::after, .qe.unread .qe-text::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--link); margin-left: 6px; vertical-align: 2px; }
.qe.unread .qe-text::before { margin: 0 6px 0 0; }
.qi.dragging { opacity: .45; }
.qi.drop-before { box-shadow: inset 0 2px 0 var(--ok); }
.qi.drop-after { box-shadow: inset 0 -2px 0 var(--ok); }
.qe { display: flex; gap: var(--s2); align-items: baseline; padding: 3px var(--s3) 3px 34px; font-size: var(--t-sm); color: var(--mut); cursor: pointer; outline: none; }
.qe:hover { background: color-mix(in srgb, var(--tile) 70%, transparent); color: var(--fg); }
.qe:focus-visible { box-shadow: inset 0 0 0 2px var(--link); }
.qe-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-time { font-size: var(--t-xs); color: var(--faint-t); font-variant-numeric: tabular-nums; }
/* Compact plan usage: one row per provider, details in the existing queue peek. */
.q-limits { display: flex; flex-direction: column; gap: 5px; padding: 8px 12px; border-top: 1px solid var(--line); }
.q-limits[hidden], .ql-provider[hidden], .ql-state[hidden] { display: none; }
.ql-columns, .ql-provider { display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.ql-columns { font-size: 10px; line-height: 12px; color: var(--faint); }
.ql-columns > :first-child { text-transform: uppercase; }
.ql-provider { flex: none; width: 100%; height: 22px; min-height: 22px; padding: 0; border: 0; border-radius: 3px; background: transparent; text-align: left; }
.ql-provider:hover { background: var(--tile); }
.ql-provider:focus-visible { outline: 1px solid var(--link); outline-offset: 2px; }
.ql-name { display: flex; gap: 4px; align-items: center; min-width: 0; color: var(--mut); font: 12px system-ui, sans-serif; }
.ql-state { color: var(--faint); }
.ql-state[data-tone="warn"] { color: var(--warn); }
.ql-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ql-pct { flex: none; width: 36px; text-align: right; font: 600 11px var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.ql-pct[data-tone="warn"] { color: var(--warn); }
.ql-pct[data-tone="bad"] { color: var(--bad); }
.ql-bar { flex: 1; min-width: 8px; height: 4px; border-radius: 2px; background: var(--tile); overflow: hidden; }
.ql-fill { display: block; height: 100%; width: 0; background: var(--link); transition: width .4s; }
.ql-fill[data-tone="warn"] { background: var(--warn); }
.ql-fill[data-tone="bad"] { background: var(--bad); }
.ql-provider.dim .ql-pct { color: var(--faint); }
.ql-provider.dim .ql-fill { background: var(--faint); }


/* the detail header of a session: title, chips, actions · tabs, the state in words, the workflow */
.head.detail { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px var(--s4) 0; min-height: 0; container: dh / inline-size; }
.dh-top { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 29px; }   /* N9: an ended session (no Open in terminal / Stop) had a 24 px row - the tabs and the terminal jumped 5 px */
.dh-top .title { font-size: var(--t-lg); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 10000 auto; min-width: 60px; }   /* shrinks first (weight x width): a long title never cuts the isolation chip (N6) */
.dh-chips { display: flex; gap: 4px; align-items: center; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.dh-chips .chip { margin-left: 0; flex: none; border-radius: 8px; padding: 0 7px; }   /* a.chip too: same shape as the other chips */
/* N8: the text chips (project, branch, detail - ellipsis + title) give way before the isolation chip is cut (1024 px + queue) */
.dh-chips span.chip { flex: 0 1 auto; min-width: 5ch; }
/* the base rule before the @container overrides below (same specificity: placed after them, its flex: none won and the
   four actions of a 390 px window ran 28 px off the header - Linux Chromium, DejaVu) */
.dh-top .actions { display: flex; gap: 6px; align-items: center; flex: none; }
/* N10 (CI-1): a header too narrow even for those (1024 px + the agent drawer) drops them - the title names the session - before the isolation chip is cut ("isc") */
@container dh (max-width: 520px) { .dh-chips span.chip:not(.warn) { display: none; } }
/* N10: narrower still (1024 px + the whole queue + the panel / the drawer) the actions wrap under the title, never off the header */
@container dh (max-width: 440px) { .dh-top, .dh-top .actions { flex-wrap: wrap; } }
/* G-N11-4: ... and the wrapped actions may wrap among themselves (flex: none kept their one-line width: 768 px + the drawer
   left Stop, ⋯ and ◧ under it); the grid's six actions squeezed the chips to 0 px at 1024 px + the drawer (header 591 px),
   the isolation chip was gone - five or more actions go under the title from 700 px */
@container dh (max-width: 440px) { .dh-top .actions { flex: 0 1 auto; min-width: 0; } }
@container dh (max-width: 700px) { .dh-top:has(> .actions > :nth-child(5)), .dh-top:has(> .actions > :nth-child(5)) > .actions { flex-wrap: wrap; } .dh-top:has(> .actions > :nth-child(5)) > .actions { flex: 0 1 auto; min-width: 0; } }
.chip.link { color: var(--link); border-color: color-mix(in srgb, var(--link) 45%, transparent); }
.head:not(.detail) { padding: 10px var(--s4); }
.head .title { font-size: var(--t-lg); }

/* the context panel: one header line per section (title · state · actions), the body opens when
   there is something to do (dom.ts fold); sections are separated by hairlines, not boxes */
#inspector { padding: 4px 0 16px; }
#inspector > section.alert { margin: 8px 10px 4px; }
#inspector .sec { padding: 0 var(--s3) 0 6px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); margin: 0; }
#inspector .sec:first-child, #inspector > section.alert + .sec { border-top: 0; }
.sec-h { display: flex; align-items: center; gap: 4px; min-height: 36px; }
.sec-tg { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 0 8px 2px;
  text-align: left; border-radius: var(--r-sm); white-space: nowrap; overflow: hidden; }
.sec-tg::before { content: ""; flex: none; width: 5px; height: 5px; margin: 0 4px 0 3px; border: solid var(--faint); border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform .12s; }
.sec.open .sec-tg::before { transform: rotate(45deg) translate(-1px, -1px); }
.sec-tg:hover .sec-t { color: var(--fg); } .sec-tg:focus-visible { outline: 1px solid var(--link); }
/* a narrow panel (the 390 px bottom sheet) ends the title with an ellipsis - flex: none cut "Changes" mid-letter beside its
   buttons; the status gives way first (weight x width) */
.sec-t { font-size: var(--t-sm); font-weight: 600; color: var(--fg); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sec-s { font-size: var(--t-sm); color: var(--mut); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 10000 auto; }
.sec-s.ok, .sec-s .ok { color: var(--ok); } .sec-s.warn, .sec-s .warn { color: var(--warn); } .sec-s.bad, .sec-s .bad { color: var(--bad); }
.sec-s.faint { color: var(--faint-t); }
.sec.open .sec-s .cih { display: none; }
/* S2: the Commit header carries the branch + ↑↓ (the status), open or folded; the branch gives way first */
.sec.git .sec-s { display: flex; align-items: baseline; gap: 4px; }
.sec.git .sec-s .gbr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 11.5px; }
.sec.git .sec-s .gsync { color: var(--warn); font-weight: 600; flex: none; font-family: var(--mono); font-size: 11.5px; }
.sec.open .sec-a .folded-only { display: none; }
.sec-a button.mini.icon { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 3px;
  border-color: transparent; background: none; }
.sec-a button.mini.icon:hover { background: var(--tile); }
.sec-a button.mini.icon.on { background: none; }
.sec-a button.mini.icon.on .fi { --fic: var(--link); }
.sec:not(.open) .sec-a .opt { display: none; }
.sec-a { display: flex; gap: 4px; flex: none; align-items: center; }
.sec-a .mini { margin: 0; }
/* N7-3: the 272px panel (≤1400px) - Changes keeps its title beside ↻ Review History Graph (it was clipped to "Char") */
@media (max-width: 1400px) { .sec-a .mini { padding-left: 4px; padding-right: 4px; } }
a.mini { font-size: var(--t-xs); padding: 1px 8px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--tilebtn);
  color: var(--fg); text-decoration: none; line-height: 1.45; }
a.mini:hover { border-color: var(--mut); }
.sec-b { display: none; padding: 0 0 12px 18px; font-size: var(--t-sm); }
.sec.open .sec-b { display: block; }
.sec-b > :first-child { margin-top: 0; }
#inspector .sec-b p { margin: 4px 0; }
#inspector .sec-b h4:first-child { margin-top: 2px; }
/* W16: property rows (IntelliJ's Properties) - label · value · action; the explanation is the label's tooltip */
.prop { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 26px; }
.prop-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); cursor: default; }
.prop-v { max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.prop-v.tail { direction: rtl; } .prop-v.tail > span { direction: ltr; unicode-bidi: embed; }   /* a path: its end shows */
.prop-v.ok { color: var(--ok); } .prop-v.warn { color: var(--warn); } .prop-v.bad { color: var(--bad); } .prop-v.mut { color: var(--mut); }
.prop > button.mini { margin: 0; }
.prop > button.lk { color: var(--link); }
.prop-h { margin: 10px 0 2px; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--faint-t); }
.sec-b > .prop-h:first-child { margin-top: 2px; }
#inspector .sec-b p.faint { color: var(--faint-t); margin: 6px 0 2px; }
.prop-list > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 26px; align-items: center; cursor: pointer; list-style: none; }
.prop-list > summary::-webkit-details-marker { display: none; }
.prop-list > summary > .mut { color: var(--link); }
.prop-list > summary > .mut::after { content: ' ▸'; font-size: 9px; }
.prop-list[open] > summary > .mut::after { content: ' ▾'; }
.prop-list > ul { margin: 2px 0 6px; font-size: var(--t-xs); color: var(--mut); }
/* issue: the workflow as one bar of segments + one line of words */
.wk-issue { overflow-wrap: anywhere; color: var(--mut); }
.fbox { margin: 2px 0 6px; }
.fbar { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; }
.fbar li { flex: 1; height: 5px; border-radius: 2px; background: var(--line); cursor: help; }
.fbar li.done { background: var(--ok); }
.fbar li.next { background: var(--warn); }
.fbar li.skipped { background: color-mix(in srgb, var(--faint) 55%, transparent); }
.fbar li.partial { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, transparent 3px 6px); }
#inspector p.fwords { margin: 6px 0 0; color: var(--mut); font-size: var(--t-xs); }
.fwords b { color: var(--warn); font-weight: 600; }
#inspector .sec-b button.cdraft { margin: 6px 0; }
/* last turn: You / Claude rows, the answer's last paragraph (3 lines) */
#inspector p.wk-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; margin: 3px 0; }
.wk-k { color: var(--faint-t); }
.wk-asked { color: var(--fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.wk-last { color: var(--mut); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
details.junk { margin: 2px 0 6px; }
details.junk > summary { cursor: pointer; color: var(--mut); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.junk .gitfiles { opacity: .8; }
/* diagnostics: the source command on one line */
#inspector p.dsrc { color: var(--faint-t); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.dsrc code { font-size: 10.5px; }

/* GitLab / Production as the detail */
.gl-view, .prod-view { overflow: auto; background: var(--well); border-radius: var(--r-lg); padding: var(--s3) var(--s4); }
.view-off { margin: var(--s4) 0; }

/* the Global agent's chat: a drawer in the context panel's column (N10) */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer-w); z-index: 15; background: var(--card);
  border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s3); border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: var(--t-lg); }
.drawer .feed { flex: 1; min-height: 0; }
.drawer .feed-head:empty { display: none; }
/* per-row buttons of Running show where you are, not on every row */
.q-sec.running .qi-ops { visibility: hidden; }
.q-sec.running .qi:hover .qi-ops, .q-sec.running .qi:focus-within .qi-ops, .q-sec.running .qi.sel .qi-ops,
.q-sec.ended .qi:hover .qi-ops, .q-sec.ended .qi:focus-within .qi-ops { visibility: visible; }
.gl-view .ibx-title, .prod-view .ibx-title { display: none; }   /* the page header names it */
/* each column keeps its track when a neighbour is hidden (display: none takes it out of the grid) */
#actbar { grid-column: 1; grid-row: 1; } #queue { grid-column: 2; grid-row: 1; }
#main { grid-column: 3; grid-row: 1; } #inspector { grid-column: 4; grid-row: 1; }
/* Conversation: the reply under it */
.endbar { margin: 8px 10px 0; }
@media (max-width: 1000px) { :root { --q-w: 280px; } }
.qi-body { grid-column: 2 / 4; margin: 4px 0 2px; padding: 6px 8px; background: var(--well); border-radius: var(--r-md); font-size: var(--t-xs);
  line-height: 1.45; max-height: 9.5em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.q-legacy { margin: 0; padding: 6px 8px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: var(--t-sm); }
/* confirmations float above the agent drawer, beside it (never under it) */
#pending { z-index: 16; }
body.drawer-open #pending { right: calc(var(--drawer-w) + 16px); }
/* the floating confirmations sit bottom right, where Settings has Save / Revert: those move left of them */
body.pending-open .settings .st-bar { padding-right: calc(min(460px, 100vw - 32px) + 8px); }
/* N10-A-6: with the drawer in its column a 460 px card fits the detail beside the whole queue only from ~1300 px (64 + 320 + 420 + 492);
   below that it lay over the queue's rows (1024: card 180-639 px, detail 271 px) - it sits in the drawer's column instead, above its composer */
@media (max-width: 1299px) { body.drawer-open:not(.queue-mini):not(.no-queue) #pending { right: 16px; bottom: 96px; width: calc(var(--drawer-w) - 32px); max-height: calc(100vh - 112px); } }
@media (max-width: 1000px) { body.drawer-open #pending { right: 16px; bottom: 96px; width: calc(var(--drawer-w) - 32px); max-height: calc(100vh - 112px); } }
/* N10 (CI-3): the open drawer takes the context panel's column (also in a global view), the detail ends left of it - it lay over the
   tabs (Composer) and the whole panel, only the header's actions and Settings' Save were padded out from under it */
body.drawer-open, body.drawer-open.no-inspector { --ctx-w: var(--drawer-w); }
body.drawer-open #inspector { display: none; }
.q-more { margin: 2px 0 4px 34px; }

/* .http files: environment bar, ▶ per request, results (httpview.ts) */
.httpbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.httpbar select { font-size: 12px; padding: 2px 6px; background: var(--tile); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-sm, 4px); }
.httpbar .httpenv { font-weight: 600; }
.httpenv.c-dev, .httpcls.c-dev { color: var(--ok); border-color: var(--ok); }
.httpenv.c-test, .httpcls.c-test { color: var(--warn); border-color: var(--warn); }
.httpenv.c-prod, .httpcls.c-prod { color: var(--bad); border-color: var(--bad); }
.httpbar .httprun { font-size: 12px; padding: 2px 10px; }
.httpbar .httphist { max-width: 340px; color: var(--mut); }
.httpbar .httperr { flex-basis: 100%; }
.hic { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.httpbar .httprun { display: inline-flex; align-items: center; gap: 6px; }
.httpbar .httprun .hic { width: 11px; height: 11px; }
.httpbar .httprun:disabled { opacity: .45; cursor: default; }
.httpbar .httpcfg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; background: none; color: var(--mut); }
.httpbar .httpcfg:hover { color: var(--fg); }
/* the tunnel chip: the live state, a click opens the popover (open / close / test) */
.httpbar .httptun { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: none; color: var(--mut); }
.httpbar .httptun .hic { width: 12px; height: 12px; }
.httpbar .httptun .mono { font-family: var(--mono); font-size: 11.5px; color: var(--fg); }
.httpbar .httptun > .hic:last-child { width: 11px; height: 11px; }
.httpbar .httptun.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.httpbar .httptun.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.httpsaved, .httpbin { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.httpbin button { font-size: 12px; padding: 2px 10px; }
.httppop-shade { position: fixed; inset: 0; z-index: 90; }
.httppop { position: fixed; z-index: 91; width: 400px; max-width: calc(100vw - 16px); box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); font-size: 12px; }
.httppop:focus { outline: none; }
.httppop-h { display: flex; align-items: center; gap: 8px; }
.httppop-k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.httppop-st { display: inline-flex; align-items: center; gap: 6px; }
.httppop-st .hic { width: 12px; height: 12px; }
.httproute { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--well); border-radius: 6px; }
.httproute .hop { display: flex; align-items: center; gap: 8px; }
.httproute .hop .hic { color: var(--mut); }
.httproute .hop .mono { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.httproute .hop-n { font-size: 11px; color: var(--faint-t); white-space: nowrap; }
.httproute .hop-a { color: var(--faint-t); line-height: 0; }
.httppop-note { font-size: 11px; line-height: 1.45; color: var(--faint-t); }
.httppop-err { display: flex; gap: 8px; padding: 8px 10px; border-radius: 6px; background: var(--bad-bg); color: var(--bad); line-height: 1.45; overflow-wrap: anywhere; }
.httppop-err .hic { margin-top: 2px; }
.httppop-a { display: flex; gap: 8px; }
.httppop-a button { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; }
.httppop-a button .hic { width: 12px; height: 12px; }
.httppop-a .spinner { width: 9px; height: 9px; }
.httppop-test { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.httppop-test .hic { margin-top: 2px; }
.httppop-sep { height: 1px; background: var(--line); }
.httppop-f { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; align-self: flex-start; }
.httppop-f .hic { width: 12px; height: 12px; }
/* ⚙ Environment: the settings dialog (its own header and footer - the modal's h2 and padding are not used) */
.modal:has(.httpenvdlg) { width: min(580px, calc(100vw - 32px)); padding: 0; gap: 0; }
.modal:has(.httpenvdlg) > h2 { display: none; }
.httpenvdlg { display: flex; flex-direction: column; font-size: 12.5px; }
.hed-head { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, var(--card)); }
.hed-title { display: flex; align-items: center; gap: 8px; }
.hed-title h3 { margin: 0; font-size: 15px; font-weight: 600; }
.hed-x { background: none; border: 0; padding: 2px; color: var(--mut); line-height: 0; }
.hed-x .hic { width: 16px; height: 16px; }
.hed-x:hover { color: var(--fg); }
.hed-env { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hed-env .mono { font-family: var(--mono); font-size: 11.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hed-cls { flex: none; font-size: 11px; font-weight: 600; padding: 0 7px; border-radius: 999px; border: 1px solid; }
.hed-cls.c-dev { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.hed-cls.c-test { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.hed-cls.c-prod { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.hed-body { display: flex; flex-direction: column; gap: 22px; padding: 18px 20px 20px; }
.hed-body section { display: flex; flex-direction: column; gap: 10px; }
.hed-body h4 { margin: 0; font-size: 13px; font-weight: 600; }
.hed-body section > h4:has(+ .hed-d) { margin-bottom: -8px; }
.hed-body p { margin: 0; color: var(--mut); font-size: 12px; line-height: 1.45; }
.hed-seg { display: flex; gap: 2px; padding: 3px; border-radius: 7px; background: var(--page); }
.hed-seg button { flex: 1; background: none; border: 1px solid transparent; border-radius: 5px; padding: 5px 0; font-size: 12.5px; color: var(--mut); }
.hed-seg button.on { background: var(--tile); border-color: var(--line); color: var(--fg); font-weight: 600; }
.hed-mode { display: flex; flex-direction: column; gap: 10px; }
.hed-found { display: flex; gap: 10px; padding: 10px 12px; border-radius: 6px; background: var(--well); border: 1px solid color-mix(in srgb, var(--line) 60%, var(--card)); color: var(--mut); }
.hed-found .hic { width: 14px; height: 14px; margin-top: 1px; }
.hed-found > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hed-found .mono { font-family: var(--mono); font-size: 12px; color: var(--fg); overflow-wrap: anywhere; }
.hed-found.bad { color: var(--bad); }
.hed-fields { display: flex; flex-direction: column; gap: 10px; }
.hed-field { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.hed-field > label { padding-top: 6px; color: var(--mut); }
.hed-ctl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hed-ctl input, .hed-ctl select { box-sizing: border-box; width: 100%; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; }
.hed-ctl input.mono { font-family: var(--mono); }
.hed-ctl input.short { width: 120px; }
.hed-ctl select { background: var(--well); color: var(--fg); border: 1px solid var(--line); }
.hed-hint { font-size: 11px; color: var(--faint-t); }
.hed-radios { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.hed-radios button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: none; border: 0; border-radius: 0; text-align: left; font-size: 12.5px; }
.hed-radios button + button { border-top: 1px solid color-mix(in srgb, var(--line) 60%, var(--card)); }
.hed-radios button .hic { width: 14px; height: 14px; color: var(--faint-t); }
.hed-radios button strong { font-weight: 400; white-space: nowrap; }
.hed-radios button span { color: var(--mut); font-size: 12px; }
.hed-radios button.on { background: color-mix(in srgb, var(--link) 9%, var(--card)); color: var(--fg); }
.hed-radios button.on .hic { color: var(--link); }
.hed-radios button.on strong { font-weight: 600; }
.hed-radios button:hover:not(.on) { background: var(--tile); }
.hed-files { display: flex; flex-direction: column; gap: 2px; }
.hed-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; }
.hed-file > .hic { width: 14px; height: 14px; color: var(--mut); }
.hed-file .mono { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hed-file.none, .hed-file.none > .hic { color: var(--faint-t); }
.hed-file button.link { font-size: 12px; white-space: nowrap; }
.hed-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11px; color: var(--mut); padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; }
.hed-tag .hic { width: 11px; height: 11px; }
.hed-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--well); border-top: 1px solid color-mix(in srgb, var(--line) 60%, var(--card)); }
.hed-foot > .hic { width: 12px; height: 12px; color: var(--faint-t); }
.hed-foot > .grow { font-size: 11px; color: var(--faint-t); }
.hed-foot button { padding: 5px 12px; }
.hed-foot button.primary { font-weight: 600; }
.hed-foot button:disabled { opacity: .45; }
.httpres { flex: 0 1 auto; max-height: 45%; overflow: auto; border-top: 1px solid var(--line); padding: 6px 12px 10px; font-size: 12.5px; }
.httpres.idle { flex: 0 0 auto; }
.httpres-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 6px; }
.httpcls { border: 1px solid; border-radius: 999px; padding: 0 7px; font-size: 11px; }
.httpst.ok, .httptests .ok { color: var(--ok); } .httpst.bad, .httptests .bad, .httpres .bad { color: var(--bad); }
.httpreq { border-top: 1px solid var(--line); }
.httpreq-h { display: grid; grid-template-columns: 14px minmax(8ch, 24ch) 44px minmax(0, 1fr) 64px 72px; align-items: center; gap: 8px;
  width: 100%; background: none; border: 0; padding: 5px 0; color: var(--fg); text-align: left; cursor: pointer; }
.httpreq-h > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.httpreq-h > :nth-child(5), .httpreq-h > :nth-child(6) { text-align: right; }
.httpres { container-type: inline-size; }
@container (max-width: 520px) { .httpreq-h { grid-template-columns: 14px minmax(0, 1fr) 44px 64px; } .httpreq-h .httpurl, .httpreq-h > :nth-child(6) { display: none; } }
.httpreq-h:hover { background: var(--tile); }
.httpreq-h .httpurl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); }
.httpcode { font-family: var(--mono); font-size: 11.5px; padding: 0 5px; border-radius: 3px; background: var(--neutral-bg); }
.httpcode.s2 { color: var(--ok); background: var(--ok-bg); } .httpcode.s3 { color: var(--link); }
.httpcode.s4 { color: var(--warn); background: var(--warn-bg); } .httpcode.s5, .httpcode.se { color: var(--bad); background: var(--bad-bg); }
.httpreq.open { padding-bottom: 8px; }
.httptests { list-style: none; margin: 4px 0; padding: 0 0 0 18px; }
.httptests .mono { color: var(--mut); white-space: pre-wrap; margin: 2px 0 4px 14px; }
.httpreq details { margin: 4px 0 0 18px; } .httpreq summary { cursor: pointer; color: var(--mut); }
.httphdr { border-collapse: collapse; font-size: 11.5px; margin: 4px 0; }
.httphdr th { text-align: left; color: var(--hl-p, var(--mut)); font-weight: normal; padding: 1px 16px 1px 0; vertical-align: top; white-space: nowrap; }
.httphdr td { overflow-wrap: anywhere; }
.httpbodybox { margin: 6px 0 0 18px; }
.httpbodybox .row { justify-content: flex-start; margin: 0 0 2px; padding: 0; gap: 10px; }
.httpbody { margin: 0; padding: 6px 8px; background: var(--page); border: 1px solid var(--line); border-radius: 6px; max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.httpconfirm { margin: 8px 0; padding-left: 18px; font-size: 12px; } .httpconfirm li.w { color: var(--bad); }

/* the HTTP tab: every .http file of the project (httppanel.ts) */
.httppanel { display: grid; grid-template-columns: minmax(200px, 26%) 1fr; gap: 10px; height: 100%; min-height: 0; }
.hpleft, .hpright { background: var(--well); border-radius: 10px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.hpright { container-type: inline-size; }
.hphead { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.hphead .hpfilter { flex: 1; min-width: 120px; font-size: 12px; padding: 3px 8px; background: var(--tile); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; }
.hphead button { font-size: 12px; padding: 2px 8px; }
.hplist { overflow: auto; padding: 4px 6px 10px; }
.hpdir { padding: 8px 6px 2px; overflow-wrap: anywhere; }
.hpfile { display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 0; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 4px 8px; color: var(--fg); cursor: pointer; }
.hpfile:hover { background: var(--tile); } .hpfile.on { background: var(--link-soft); }
.hpfile .hpname { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpbadge { font-size: 11px; white-space: nowrap; } .hpbadge.ok { color: var(--ok); } .hpbadge.bad { color: var(--bad); }
.hpreqs { overflow: auto; flex: 1 1 auto; min-height: 40px; padding: 4px 12px; }
.hpreq { border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.hpreq-h { display: grid; grid-template-columns: 22px minmax(12ch, 30ch) minmax(0, 1fr) 46px 14px; align-items: center; gap: 8px;
  padding: 3px 4px; cursor: pointer; border-radius: 4px; }
.hpreq-h:hover { background: var(--tile); }
.hpreq-toggle { display: flex; align-items: center; gap: 6px; min-width: 0; background: none; border: 0; padding: 2px 0; color: var(--fg); text-align: left; cursor: pointer; }
.hpreq-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }
.hpchev { color: var(--mut); width: 14px; font-size: 14px; line-height: 1; flex: none; }
.hpmethod { font-size: 11px; width: 48px; flex: none; color: var(--hl-k, var(--link)); }
.hpreqname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpreq-h .hpurl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpreq-h .httpcode { justify-self: end; }
.hpreq.open { background: color-mix(in srgb, var(--tile) 45%, transparent); }
.hpdetail { padding: 4px 8px 10px 30px; display: flex; flex-direction: column; gap: 6px; }
.hpdetail .hpfull { overflow-wrap: anywhere; color: var(--fg); margin: 4px 0; }
.hpdetail .httphdr, .httpreq .httphdr { align-self: flex-start; }
.hpdetail .hpbody { max-height: 180px; }
.hpdetail .httpbodybox .httpbody { max-height: 300px; }
.hpdetail .httptests, .hpdetail details, .hpdetail .httpbodybox { margin-left: 0; }
.hpdef summary { cursor: pointer; color: var(--mut); }
.hpactions { display: flex; gap: 8px; }
.hpactions button { font-size: 12px; padding: 2px 10px; }
.hpright .httpres { flex: 0 0 auto; max-height: none; }
/* ▶: a real target (18-22 px), green, red on production */
.hpreq .hrun, .ln .no .hrun { display: inline-grid; place-items: center; height: 18px; min-width: 18px; padding: 0; border: 0; border-radius: var(--r-sm, 4px);
  background: none; color: var(--ok); font-size: 11px; cursor: pointer; }
.hpreq .hrun { width: 22px; height: 20px; }
.hpreq .hrun:hover:not(:disabled), .ln .no .hrun:hover { background: var(--ok-soft); }
.hpreq .hrun:disabled { color: var(--faint); cursor: default; }
.hpright.c-prod .hpreq .hrun:not(:disabled), .ln .no .hrun.prod { color: var(--bad); }
.hpright.c-prod .hpreq .hrun:hover:not(:disabled), .ln .no .hrun.prod:hover { background: var(--bad-soft); }
.hrun .spinner, .httpbusy .spinner { width: 10px; height: 10px; border-width: 1.5px; vertical-align: -1px; }
/* results of another environment than the picked one, and the old results while a run is going */
.stale .httpcode, .stale .ok, .stale .bad, .stale .httpst { opacity: .45; }
.httpstale { color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 0 7px; }
.httpres.busy { opacity: .5; pointer-events: none; }
.httpbusy { color: var(--mut); display: inline-flex; align-items: center; gap: 4px; }
.httpack { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; }
.httpconfirm li.w strong { color: var(--bad); }
.httpshare { display: inline-flex; align-items: center; gap: 4px; color: var(--mut); cursor: pointer; }
@container (max-width: 560px) { .hpreq-h .hpurl { display: none; } .hpreq-h { grid-template-columns: 22px minmax(0, 1fr) 46px 14px; } }
@media (max-width: 900px) { .httppanel { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Database view (dbview.ts, Pencil "Database · design") */
.body.flush { padding: 0; }
.dbview { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; height: 100%; min-height: 0; background: var(--page); font-size: 13px; }
.db-left, .db-main, .db-right { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.db-left { background: var(--card); border-right: 1px solid var(--line); }
.db-right { background: var(--card); border-left: 1px solid var(--line); }
.db-main { background: var(--page); container: dbmain / inline-size; }
.db-ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.db-mono { font-family: var(--mono); }
.db-pad { padding: 10px 14px; }
/* W11: the Database view uses the one button set; :where() keeps these at the specificity of a bare button */
:where(.dbview) button { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
:where(.dbview) button.icon { justify-content: center; }
:where(.dbview) button.on:not(.icon) { background: var(--link-soft); border-color: var(--link); }
.db-k { font-size: 11px; opacity: .8; font-weight: 500; }
.db-caret { font-size: 10px; opacity: .8; }
.grow { flex: 1; }
.db-cls { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.db-cls .db-dot { width: 7px; height: 7px; border-radius: 50%; }
.db-cls-dev { background: var(--ok-soft); color: var(--ok); } .db-cls-dev .db-dot { background: var(--ok); }
.db-cls-test { background: var(--warn-soft); color: var(--warn); } .db-cls-test .db-dot { background: var(--warn); }
.db-cls-prod { background: var(--bad-soft); color: var(--bad); } .db-cls-prod .db-dot { background: var(--bad); }
/* left */
.db-lhead { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px; }
.db-pchip { appearance: none; min-width: 0; flex: 0 1 auto; height: 24px; max-width: 150px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--tile); color: var(--mut); font-size: 12px; cursor: pointer; text-overflow: ellipsis; }
.db-switch { flex: none; white-space: nowrap; height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--well); color: var(--fg); font-size: 13px; cursor: pointer; }
.db-cpath { padding: 6px 14px 0; font: 13px/1.5 var(--mono); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-schsel { font: 13px var(--mono); background: none; color: var(--fg); border: 0; padding: 0; cursor: pointer; }
.db-cmeta { padding: 2px 14px 10px; font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line); }
.db-warn { margin: 8px 12px; padding: 8px 10px; border-radius: 7px; background: var(--warn-soft); font-size: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.db-searchbox { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--page); color: var(--mut); }
.db-searchbox:focus-within { border-color: var(--link); }
.db-search { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--fg); font-size: 13px; }
.db-kbd { font-size: 11px; color: var(--faint-t); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 16px; }
.db-tree { overflow: auto; flex: 1; padding: 4px 0 10px; }
.db-tg { padding: 14px 16px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.db-ti { display: flex; align-items: center; gap: 9px; width: 100%; height: 26px; background: none; border: 0; text-align: left; color: var(--fg); padding: 0 16px; cursor: pointer; font: 13px var(--mono); }
.db-ti .db-ic { color: var(--faint-t); width: 14px; height: 14px; }
.db-ti:hover { background: var(--tile); } .db-ti.on { background: color-mix(in srgb, var(--tile) 80%, var(--link) 8%); color: var(--fg); }
.db-ti.ro { cursor: default; color: var(--mut); }
.db-tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-rc { color: var(--faint-t); font: 12px var(--mono); }
.db-tn b, .db-tcol b { color: var(--link); font-weight: 600; }
.db-tcol { flex: 0 1 auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); font-size: 12px; }
.db-tcol .db-tn { display: inline; }
.db-ti.act { background: var(--link-soft); box-shadow: inset 2px 0 0 var(--link); }
.db-tgn { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* menus */
.db-mi-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
.db-mi-d { color: var(--faint-t); font-size: 11.5px; }
/* tabs */
.db-tabs { display: flex; align-items: flex-end; gap: 4px; height: 40px; padding: 0 10px; border-bottom: 1px solid var(--line); overflow-x: auto; flex: none; background: var(--page); }
.db-tab { display: flex; align-items: center; height: 39px; border-bottom: 2px solid transparent; }
.db-tab.on { border-bottom-color: var(--ok); } .db-tab.on.db-tab-test { border-bottom-color: var(--warn); } .db-tab.on.db-tab-prod { border-bottom-color: var(--bad); }
.db-tab-b { background: none; border: 0; color: var(--mut); padding: 0 4px 0 14px; display: flex; gap: 6px; align-items: center; font: 13.5px var(--mono); cursor: pointer; white-space: nowrap; height: 100%; }
.db-tab.on .db-tab-b { color: var(--fg); }
.db-tab-x { background: none; border: 0; color: transparent; padding: 0 10px 0 4px; cursor: pointer; height: 100%; }
.db-tab:hover .db-tab-x, .db-tab.on .db-tab-x { color: var(--faint-t); } .db-tab-x:hover { color: var(--fg) !important; }
.db-dirty { color: var(--warn); font-size: 9px; }
.db-tab-new { background: none; border: 0; color: var(--mut); padding: 0 12px; height: 39px; font-size: 16px; cursor: pointer; }
.db-tab-new:hover { color: var(--fg); }
/* 9.39: only a narrow Database pane hides its tree - the toggle shows there (the container query above) */
.db-tab-tree { display: none; align-items: center; flex: none; align-self: center; margin: 0 4px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--mut); font: inherit; font-size: 12px; cursor: pointer; }
.db-tab-tree:hover { color: var(--fg); }
.db-tab-tree.on { color: var(--fg); background: var(--sel); border-color: var(--link); }
/* body */
.db-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.db-empty { margin: auto; max-width: 440px; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.db-empty > .db-ic { width: 34px; height: 34px; color: var(--faint-t); }
.db-empty .row { display: flex; gap: 8px; }
.db-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.db-where { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.db-where:focus-within { border-color: var(--link); }
.db-where-k { font: 600 11px var(--mono); color: var(--faint-t); letter-spacing: .04em; }
.db-where-in { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--fg); font: 13px var(--mono); }
.db-where-in::placeholder { color: var(--faint); }
.db-where-go { background: var(--tile); border: 1px solid var(--line); color: var(--mut); border-radius: 5px; width: 26px; height: 22px; cursor: pointer; }
.db-count { margin-left: auto; color: var(--mut); font-size: 13px; white-space: nowrap; }
.db-page { display: inline-flex; align-items: center; gap: 4px; }
.db-err { margin: 10px 12px; padding: 10px 12px; background: var(--bad-soft); color: var(--fg); border-radius: 7px; white-space: pre-wrap; font: 12.5px/1.5 var(--mono); }
.db-note { margin: 10px 12px; padding: 10px 12px; background: var(--card); border-radius: 7px; font-size: 13px; align-self: flex-start; }
/* grid */
.db-grid { flex: 1; min-height: 80px; position: relative; outline: none; display: flex; }
.db-gv { flex: 1; overflow: auto; position: relative; }
.db-gh { display: grid; position: sticky; top: 0; z-index: 2; background: var(--card); border-bottom: 1px solid var(--line); min-width: 100%; width: max-content; }
.db-gsp { position: relative; min-width: 100%; width: max-content; }
.db-gl { position: absolute; left: 0; top: 0; min-width: 100%; width: max-content; }
.db-gr { display: grid; height: 28px; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.db-gr:hover { background: color-mix(in srgb, var(--tile) 45%, transparent); }
.db-gr.selrow { background: color-mix(in srgb, var(--link) 9%, var(--page)); }
.db-gr.del { background: var(--bad-soft); } .db-gr.del .db-gc { text-decoration: line-through; color: var(--mut); }
.db-gr.new { background: var(--ok-soft); }
.db-gc { padding: 0 12px; font: 13px/28px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.db-gc.null { color: var(--faint-t); }
.db-gc.edited { background: var(--warn-soft); box-shadow: inset 2px 0 0 var(--warn); }
.db-gc.sel { box-shadow: inset 0 0 0 1.5px var(--link); }
.db-gc.edited.sel { box-shadow: inset 2px 0 0 var(--warn), inset 0 0 0 1.5px var(--link); }
.db-ghc { display: flex; align-items: center; gap: 5px; font: 500 12.5px/32px var(--mono); color: var(--mut); cursor: pointer; user-select: none; }
.db-ghc:hover { color: var(--fg); } .db-ghc.sorted { color: var(--fg); }
.db-ghn { overflow: hidden; text-overflow: ellipsis; }
.db-pk { color: var(--warn); width: 12px; height: 12px; } .db-fkic { color: var(--link); width: 12px; height: 12px; }
.db-sort { color: var(--link); }
.db-gc.fk { padding-right: 4px; }
.db-fkv { color: var(--link); }
.db-fklink { background: none; border: 0; padding: 0 4px 0 0; color: var(--link); font: inherit; cursor: pointer; }
.db-fklink:hover { color: var(--fg); }
.db-chev { margin-left: 2px; }
.db-cedit { width: 100%; font: 13px var(--mono); background: var(--page); color: var(--fg); border: 1px solid var(--link); border-radius: 4px; padding: 0 6px; height: 24px; margin-top: 2px; outline: none; }
.db-gempty { padding: 16px 14px; }
/* pending */
.db-pending { flex: none; border-top: 2px solid var(--warn); background: var(--card); padding: 0 12px; display: flex; flex-direction: column; }
.db-pending.prod { border-top-color: var(--bad); }
/* a toast (Submit failed…) must not lie over the pending bar's Submit / Discard: it rises above the bar */
body:has(.db-pending) #toasts { bottom: 104px; }
.db-pend-h { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; font-size: 13.5px; }
.db-pend-ic { color: var(--warn); width: 17px; height: 17px; }
.db-pend-sql { flex: 1; min-width: 0; color: var(--mut); font: 12.5px/1.45 var(--mono); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.db-sqlbox { margin: 0 0 10px; overflow: auto; font: 12.5px/1.55 var(--mono); background: var(--well); padding: 8px 10px; border-radius: 6px; white-space: pre-wrap; max-height: 220px; }
/* status */
.db-status { flex: none; display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 12px; border-top: 1px solid var(--line); background: var(--card); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.db-status .db-cls { height: 18px; font-size: 11.5px; }
.db-st-path { color: var(--mut); min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.db-status > span:not(.db-cls):not(.grow) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.db-status > .db-cls, .db-status > .mut:last-child { flex: none; }
/* N10-C-2: the console's shortcut hint gives way first - the mode (tx open) and the path were 0 px beside the drawer */
.db-status > .mut.db-st-hint { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.db-status .warn { color: var(--warn); }
.db-ddlbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.db-ddl { flex: 1; overflow: auto; margin: 0; padding: 12px 16px; font: 13px/1.6 var(--mono); }
/* console */
.db-connpick { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--fg); cursor: pointer; font: 13px var(--mono); }
.db-connpick:disabled { opacity: .7; cursor: default; }
.db-segs { display: inline-flex; height: 34px; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.db-seg { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--mut); padding: 0 12px; border-radius: 5px; font-size: 13px; cursor: pointer; }
.db-seg .db-ic { width: 14px; height: 14px; }
.db-seg.on { background: var(--tile); color: var(--fg); }
.db-seg.rw.on { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.db-seg.rw.on.prod { background: var(--bad-soft); color: var(--bad); }
.db-editor { position: relative; height: 38%; min-height: 150px; flex: none; border-bottom: 1px solid var(--line); background: var(--page); display: flex; }
.db-gut { width: 48px; flex: none; overflow: hidden; padding: 8px 0; text-align: right; font: 13px/20px var(--mono); color: var(--faint-t); user-select: none; }
.db-ln { padding-right: 10px; position: relative; height: 20px; }
.db-ln.run { color: var(--fg); }
.db-runmark { position: absolute; left: 8px; color: var(--ok); }
.db-code { position: relative; flex: 1; min-width: 0; }
.db-code textarea, .db-code .db-hl { position: absolute; inset: 0; margin: 0; padding: 8px 12px; font: 13px/20px var(--mono); white-space: pre; overflow: auto; tab-size: 2; border: 0; }
.db-bidi { position: absolute; left: 12px; right: 12px; bottom: 6px; z-index: 2; padding: 4px 8px; border-radius: 6px; background: var(--bad-bg); color: var(--bad); font-size: 12px; }
.db-code textarea { background: transparent; color: transparent; caret-color: var(--fg); resize: none; outline: none; z-index: 1; }
.db-code textarea::selection { background: color-mix(in srgb, var(--link) 35%, transparent); color: transparent; }
.db-code textarea::placeholder { color: var(--faint); }
.db-code .db-hl { color: var(--fg); pointer-events: none; overflow: hidden; }
.db-curline { position: absolute; left: 0; right: 0; height: 20px; background: color-mix(in srgb, var(--link) 7%, transparent); pointer-events: none; }
.db-ac { position: absolute; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); min-width: 300px; max-height: 240px; overflow: auto; padding: 4px; }
.db-aci { display: flex; align-items: center; gap: 9px; font: 13px/28px var(--mono); padding: 0 10px; border-radius: 5px; cursor: pointer; }
.db-aci .db-ic { color: var(--faint-t); width: 14px; height: 14px; }
.db-aci.on { background: var(--tile); }
.db-aci-t { flex: 1; } .db-aci-d { color: var(--faint-t); font: 12px var(--mono); }
.db-rhead { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); flex: none; min-height: 42px; }
.db-rtabs { display: flex; gap: 6px; overflow-x: auto; align-self: stretch; align-items: flex-end; }
.db-rtab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--mut); padding: 0 12px; height: 41px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.db-rtab.on { color: var(--fg); border-bottom-color: var(--ok); } .db-rtab.bad { color: var(--bad); }
.db-tx { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--warn-bg); border-bottom: 1px solid var(--line); }
.db-tx.prod { background: var(--bad-bg); }
.db-tx-ic { color: var(--warn); width: 18px; height: 18px; } .db-tx.prod .db-tx-ic { color: var(--bad); }
.db-tx-t { flex: 1; min-width: 0; font-size: 14px; } .db-tx-s { color: var(--mut); font-size: 13px; margin-top: 2px; }
/* N10-C-4: a narrow console (1024 + drawer: 341 px) - the banner's text takes the row, Rollback / Commit go under it */
@container dbmain (max-width: 560px) {
  .db-tx { flex-wrap: wrap; row-gap: 8px; }
  .db-tx-t { flex: 1 1 calc(100% - 40px); }
  .db-tx > button:first-of-type { margin-left: auto; }
  .db-status > .mut.db-st-hint { display: none; }   /* a 7 px sliver of it otherwise */
  .db-rhead { flex-wrap: wrap; padding-bottom: 6px; }   /* the result tabs a row of their own (96 px beside the pager) */
  .db-rhead > .db-rtabs { flex: 1 0 100%; }
}
/* right */
.db-rscroll { flex: 1; overflow: auto; padding-bottom: 10px; }
.db-rsec { display: flex; align-items: center; padding: 16px 16px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.db-rsec-v { text-transform: none; letter-spacing: 0; color: var(--mut); font-weight: 600; margin-left: 4px; }
.db-rlist { padding: 0 14px 0 16px; }
.db-rcol { display: flex; align-items: baseline; gap: 6px; min-height: 22px; font: 13px var(--mono); min-width: 0; }
.db-rcol > * { flex: none; } .db-rcol > .grow { flex: 1; } .db-rct { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto !important; min-width: 0; }
.db-rcn { color: var(--fg); } .db-rct { color: var(--faint-t); font-size: 12px; white-space: nowrap; }
.db-pkt { color: var(--warn); font: 600 11.5px Inter, system-ui, sans-serif; }
.db-fkt { background: none; border: 0; padding: 0; color: var(--link); font: 12px/1.4 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; flex: 0 1 auto !important; }
.db-rbtn { margin: 10px 16px 0; }
.db-rlink { display: flex; gap: 8px; width: 100%; background: none; border: 0; color: var(--link); font-size: 13px; padding: 3px 16px; cursor: pointer; text-align: left; }
.db-rlink .mut { color: var(--mut); }
.db-cq { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--fg); padding: 5px 16px 7px; cursor: pointer; }
.db-cq:hover { background: var(--tile); }
.db-cq-l { display: flex; gap: 10px; font: 12.5px/1.45 var(--mono); }
.db-cq-l .db-mono { color: var(--fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.db-cq-t { color: var(--mut); flex: none; min-width: 38px; font-family: inherit; }
.db-cq-m { color: var(--mut); font-size: 12.5px; margin-top: 2px; }
.db-cq-m.warn { color: var(--warn); } .db-cq-m.bad { color: var(--bad); }
.db-rscroll p.db-pad, .db-tree p.db-pad { margin: 0; }
.db-rfoot { flex: none; display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.db-pills { display: flex; gap: 6px; padding: 0 16px 8px; }
.db-pill { height: 24px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--mut); font-size: 12.5px; cursor: pointer; }
.db-pill.on { border-color: var(--fg); color: var(--fg); }
.db-hi { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); padding: 10px 16px; cursor: pointer; }
.db-hi:hover { background: var(--tile); }
.db-hm { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.db-hm .db-cls { height: 18px; font-size: 11.5px; }
.db-who { color: var(--mut); width: 14px; height: 14px; }
.db-ins { color: var(--faint-t); }
.db-hs { font: 12.5px/1.5 var(--mono); color: var(--fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 4px; word-break: break-word; }
.db-hmeta { color: var(--mut); font-size: 12.5px; margin-top: 3px; } .db-hmeta.warn { color: var(--warn); } .db-hmeta.bad { color: var(--bad); }
/* connections page */
.db-connpage { overflow: auto; flex: 1; }
.db-cp-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.db-cp-head h2 { margin: 0; font-size: 20px; }
.db-connpage > .db-warn { margin: 12px 20px; }
.db-ctable { display: flex; flex-direction: column; }
.db-crow { display: grid; grid-template-columns: minmax(130px, 1.4fr) 70px 96px minmax(130px, 1.3fr) minmax(150px, 1.6fr) 90px 140px; align-items: center; gap: 10px; padding: 8px 20px; border-bottom: 1px solid var(--line); font-size: 13px; }
.db-chead { background: var(--card); color: var(--mut); font-size: 12.5px; font-weight: 500; padding-top: 10px; padding-bottom: 10px; }
.db-cgroup { display: flex; align-items: center; gap: 10px; padding: 12px 20px 6px; font-size: 14px; }
.db-cgroup .db-ic { color: var(--mut); }
.db-cgroup .warn { color: var(--warn); font-size: 12.5px; }
.db-cname2 { display: flex; align-items: center; gap: 10px; } .db-cname2 .db-ic { color: var(--mut); }
.db-reach { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); }
.db-reach.ok { color: var(--fg); } .db-reach.ok .db-ic { color: var(--ok); }
.db-reach.bad { color: var(--bad); } .db-reach.warn { color: var(--warn); }
.warn { color: var(--warn); } .strong { font-weight: 600; }
.db-cacts { display: flex; gap: 6px; justify-content: flex-end; }
/* N10-C-8: a narrow overview (1024 + drawer) scrolls sideways - the row's actions stay at its right edge */
.db-crow > .db-cacts { position: sticky; right: 0; z-index: 1; background: var(--page); box-shadow: -10px 0 8px -4px var(--page); align-self: stretch; align-items: center; }
.db-cp-foot { padding: 12px 20px; margin: 0; font-size: 12.5px; }
/* Database search and the IDEA project's searchable selector. */
.db-findbar { display: flex; align-items: center; gap: 12px; margin: 16px 20px 12px; }
.db-findbar > .db-find { width: min(420px, 100%); }
.db-find { display: flex; align-items: center; gap: 8px; height: 36px; min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--well); color: var(--mut); }
.db-find:focus-within { border-color: var(--link); box-shadow: 0 0 0 2px var(--link-soft); }
.db-find > svg { flex: none; width: 16px; height: 16px; }
.db-find > input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; font-size: 13px; appearance: none; }
.db-find input::-webkit-search-cancel-button { appearance: none; }
.db-find > .db-find-clear { display: flex; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--mut); font-size: 18px; }
.db-find > .db-find-clear:hover { background: var(--tile); color: var(--fg); }
.modal:has(.db-idea-import) { width: min(608px, calc(100vw - 32px)); padding: 24px; gap: 16px; }
.db-idea-import { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.db-idea-import > p { margin: 0; }
.db-project-field { display: flex; flex-direction: column; gap: 6px; }
.db-project-picker { min-width: 0; }
.db-project-trigger { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 12px; text-align: left; }
.db-project-trigger > .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-project-trigger[aria-expanded=true] { border-color: var(--link); }
.db-project-popup { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--tile); }
.db-project-popup > .db-find { flex: none; }
.db-project-options { max-height: 224px; overflow-y: auto; overscroll-behavior: contain; }
.db-project-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 6px 10px; text-align: left; border: 0; border-radius: 4px; background: transparent; }
.db-project-option:hover, .db-project-option.active { background: var(--link-soft); }
.db-project-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.db-project-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-project-text strong { font-weight: 500; }
.db-project-text .db-mono { font-size: 11px; }
.db-project-check { color: var(--link); }
.db-project-hint { padding: 6px 10px 2px; font-size: 11px; color: var(--mut); }
.db-idea-heading { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 12px; }
.db-idea-import .db-ideal { min-width: 0; }
.db-idea-import .db-ider { padding: 8px 0; border-top: 1px solid var(--line); }
.db-idea-import .db-ider > .grow { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .db-findbar { flex-wrap: wrap; } .db-findbar > .db-find { width: 100%; } }
.db-ideal { display: flex; flex-direction: column; gap: 4px; min-width: 520px; max-height: 50vh; overflow: auto; }
.db-ider { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.db-form { display: flex; flex-direction: column; gap: 8px; min-width: 480px; }
.db-form-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; }
.db-form-2 { grid-template-columns: 90px 1fr 60px 1fr; }
.db-form-row.hidden { display: none; }
.db-form input, .db-form select { height: 30px; padding: 0 10px; background: var(--tile); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
/* beside a terminal: the tree and the work area only */
.dbview.compact { grid-template-columns: 210px minmax(0, 1fr); } .dbview.compact .db-right { display: none; }
/* beside a terminal: a plain list of the project's connections */
.db-pick { display: flex; flex-direction: column; padding: 8px; gap: 4px; }
.db-pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.db-pick-row:hover { border-color: var(--link); }
.db-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dbview.wide { grid-template-columns: 0 minmax(0, 1fr) 0; } .dbview.wide .db-left, .dbview.wide .db-right { visibility: hidden; border: 0; }
@media (max-width: 1300px) { .dbview { grid-template-columns: 250px minmax(0, 1fr); } .db-right { display: none; } }
.db-state { margin: 10px 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--well); font-size: 12.5px; }
.db-state-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.db-state-h .db-ic { width: 16px; height: 16px; color: var(--mut); }
.db-state-key .db-state-h .db-ic, .db-state-shield .db-state-h .db-ic { color: var(--warn); }
.db-state-lock .db-state-h .db-ic { color: var(--bad); }
.db-state-t { color: var(--mut); margin-top: 4px; line-height: 1.45; }
.db-state-a { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* session context panel: Database section (dbsection.ts) */
.dbs-conns { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.dbs-conn { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dbs-conn .db-cls { height: 18px; font-size: 11px; padding: 0 6px; }
.dbs-name { font-family: var(--mono); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbs-st { color: var(--mut); font-size: 11.5px; white-space: nowrap; } .dbs-st.warn { color: var(--warn); }
.dbs-h { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin: 8px 0 4px; }
.dbs-q { margin-bottom: 6px; }
.dbs-ql { display: flex; gap: 8px; font-size: 11.5px; }
.dbs-ql code { font-family: var(--mono); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.dbs-t { color: var(--mut); flex: none; min-width: 30px; }
.dbs-m { color: var(--mut); font-size: 11.5px; } .dbs-m.warn { color: var(--warn); } .dbs-m.bad { color: var(--bad); }
.sec-s .db-cls { height: 17px; font-size: 10.5px; padding: 0 6px; vertical-align: middle; }
/* the approval card of a session's database write (dbview.dbCard, S3) */
/* N8: in the full stack (#pending scrolls) a flex item with overflow: hidden shrank to 89 of 289 px - its Allow / Decline were cut off */
#pending > .pending { flex: none; }
.dbc-h { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.dbc-h .db-ic { color: var(--mut); width: 16px; height: 16px; }
.dbc-prod .dbc-h { background: var(--bad-soft); } .dbc-prod .dbc-h .db-ic { color: var(--bad); }
.dbc-b { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; max-height: min(62vh, 560px); overflow: auto; }
.dbc-w { display: flex; gap: 7px; align-items: flex-start; color: var(--warn); font-weight: 600; }
.dbc-w.prod { color: var(--bad); }
.dbc-w.small { font-weight: 500; font-size: 12.5px; }
.dbc-w .db-ic { width: 15px; height: 15px; margin-top: 1px; }
.dbc-lead { color: var(--mut); line-height: 1.45; }
.pending .dbc-sql { margin: 0; max-height: 200px; overflow: auto; background: var(--well); padding: 8px 10px; border-radius: 6px; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; }
.dbc-pv { font-weight: 500; } .dbc-pv.ok { color: var(--ok); } .dbc-pv.warn { color: var(--warn); }
.dbc-rows { border: 1px solid var(--line); border-radius: 6px; overflow: auto; font: 12px/1.5 var(--mono); }
.dbc-tr { display: grid; gap: 12px; padding: 3px 10px; border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.dbc-tr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbc-th { color: var(--mut); border-top: 0; background: var(--well); }
.dbc-tr .chg { color: var(--warn); } .dbc-tr.del span { text-decoration: line-through; color: var(--mut); }
.dbc-more { padding: 2px 10px; color: var(--mut); }
.dbc-reason { color: var(--mut); }
.dbc-note { color: var(--faint-t); font-size: 12px; }
.db-csv { min-width: 520px; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.db-chg { color: var(--warn); } .db-gone { color: var(--mut); text-decoration: line-through; }
/* S1 left header (one connection), the Switch menu, the overview's connection names */
.db-pchip { display: inline-flex; align-items: center; cursor: default; line-height: 22px; overflow: hidden; white-space: nowrap; }
.db-mi-c { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
button.db-cname2 { background: none; border: 0; padding: 0; color: var(--fg); cursor: pointer; text-align: left; font: inherit; }
button.db-cname2:hover .db-mono { color: var(--link); text-decoration: underline; }
.db-gc.editing { padding: 0 2px; }
.db-tree > .db-conn { margin: 0 6px; width: calc(100% - 12px); padding: 5px 8px; }
.db-cacts2 { display: flex; align-items: center; gap: 6px; padding: 4px 8px; flex-wrap: wrap; min-width: 0; }
.db-cacts2 > .db-mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-cacts2 button { padding: 1px 8px; font-size: 12px; }
.db-conn { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: 0; border-radius: 6px; color: var(--fg); cursor: pointer; font: 13px var(--mono); }
.db-conn:hover { background: var(--tile); } .db-conn.on { background: color-mix(in srgb, var(--tile) 80%, var(--link) 8%); }
.db-conn .db-cls { font-family: Inter, system-ui, sans-serif; }
.db-cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-tun { font-size: 11px; color: var(--mut); } .db-tun-open { color: var(--ok); } .db-tun-signin, .db-tun-connecting { color: var(--warn); } .db-tun-failed { color: var(--bad); }
.db-lhead .small { white-space: nowrap; }

/* ---------------------------------------------------------------- Files redesign (FILES.md, 2026-10-06)
   tree 264 px (scope, filter, icons, git letters, tooling noise folded) | tabs · one-line header ·
   CodeMirror · bottom tool panel · status bar. Overrides the older .files rules above. */
.files { grid-template-columns: min(var(--tree-w, 264px), 36%) minmax(0, 1fr); gap: 0; background: var(--well); border-radius: 10px; overflow: hidden; }
.fleft { border-radius: 0; padding: 0; gap: 0; background: var(--well); border-right: 1px solid var(--line); }
.fright { border-radius: 0; background: var(--page); container: fright / inline-size; }
/* N10-B-3: Files beside the context panel (a column at every width since N10; 1024 px left the editor 340 px): the tree
   takes at most 36 % (above), a narrow editor wraps its header - the actions took it all, the path was 0 px wide - and
   the status bar drops the branch (the header chip names it) and the legend */
@container fright (max-width: 520px) {
  .fright .fhead { flex-wrap: wrap; row-gap: 0; padding-top: 2px; padding-bottom: 2px; }
  .fright .fhead .crumbs { flex-basis: 100%; min-height: 24px; }
  .fright .fhead .actions { margin-left: auto; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .fright .fhead .ib.wide { display: none; }   /* N10-B-8: as beside the terminal (.files.narrow) */
  .fright .fstatus { gap: 8px; padding: 0 8px; }
  .fright .fstatus .br, .fright .fstatus .legend { display: none; }
}
.files.narrow { grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); gap: 0; }
.files.narrow .fhead { flex-wrap: nowrap; gap: 6px; padding: 0 8px; }
.files.narrow .fhead .crumbs { flex-basis: auto; }

.ftop { display: flex; align-items: center; gap: 4px; padding: 8px 8px 6px; }
.ftop .pchip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; padding: 3px 6px;
  font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ftop .pchip:hover { border-color: var(--line); }
/* G-N11-2: the chip is a flex box - the name in a span ends in … (768 px + the context panel cut it bare) */
.ftop .pchip .pl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ftop .pchip .fi, .ftop .pchip .mut { flex: none; }
.ftop button.icon { background: none; border: 0; color: var(--faint); padding: 2px 6px; }
.ftop button.icon:hover { color: var(--fg); }
/* Claude Pen j31iu: adapt to the tree column, retaining the full accessible project name. */
.fleft { container: fleft / inline-size; }
@container fleft (max-width: 167px) {
  .ftop { flex-wrap: wrap; row-gap: 2px; }
  .ftop .pchip { flex: 1 0 100%; }
}
@container fleft (max-width: 111px) {
  .ftop button.icon { width: 22px; min-width: 22px; padding: 2px 0; }
  .ftop .pchip { position: relative; }
  .ftop .pchip .pl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.fleft .tfilter { margin: 0 8px 6px; width: calc(100% - 16px); padding: 4px 8px; font-size: 12px; background: var(--page); }
.scope { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; margin: 0 8px 6px; background: var(--page); border-radius: 6px; }
.scope button { flex: 1 1 auto; min-width: 0; background: none; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; font-size: 11.5px; color: var(--mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* G-N11-3: "Changed 10" was cut bare in a narrow tree */
.scope button.on { background: var(--tile); border-color: var(--line); color: var(--fg); font-weight: 600; }
.scope button .n { margin-left: 4px; font-size: 10.5px; color: var(--faint); font-weight: 400; }
.scope button.on .n { color: var(--warn); }
.fleft .tree { border-top: 1px solid var(--line); padding: 4px 0; font-size: 12.5px; }
.tnode { display: flex; align-items: center; gap: 5px; border-radius: 0; padding-top: 2px; padding-bottom: 2px; padding-right: 8px; min-height: 22px; }
.tnode .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.tnode .chev { flex: none; width: 10px; height: 10px; position: relative; }
.tnode.dir .chev::before { content: ""; position: absolute; left: 2px; top: 2px; width: 4px; height: 4px; border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint); transform: rotate(-45deg); transition: transform .12s; }
.tnode.dir .chev.open::before { transform: rotate(45deg); top: 1px; }
.tnode.active { background: color-mix(in srgb, var(--link) 9%, var(--card)); color: var(--fg); box-shadow: inset 2px 0 var(--link); }
.tnode:focus-visible { outline: none; background: var(--tile); box-shadow: inset 0 0 0 1px var(--link); }
.tnode.gs-mod .nm { color: var(--warn); } .tnode.gs-new .nm, .tnode.gs-add .nm { color: var(--ok); }
.tnode.gs-del .nm { color: var(--bad); text-decoration: line-through; } .tnode.gs-ren .nm { color: var(--link); } .tnode.gs-bad .nm { color: var(--bad); }
.tnode .gm { flex: none; font: 600 10.5px "JetBrains Mono", Menlo, monospace; width: 12px; text-align: center; }
.gm-mod { color: var(--warn); } .gm-new, .gm-add { color: var(--ok); } .gm-del, .gm-bad { color: var(--bad); } .gm-ren { color: var(--link); }
.tnode .cnt { flex: none; display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--faint); }
.tnode .cnt i { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.hid-mark { width: 12px; height: 12px; margin-left: 4px; flex: none; }   /* hidden from Claude, an ordinary entry here */
.tnode.noise { color: var(--faint); font-size: 11px; display: block; }
.tnode.noise:hover { color: var(--mut); }
.tnode b.hit, .pitem b.hit { color: var(--link); font-weight: 700; }
/* development/ scratch and OS files in the Changed scope, dimmed like the Git panel's folded list (K8) */
.tnode.scratch, .tdir.scratch { opacity: .6; }
.tdir { font-size: 10.5px; color: var(--faint); padding: 8px 10px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tedit-row { gap: 6px; }
.tedit-row input.tedit { flex: 1; min-width: 60px; padding: 1px 6px; font-size: 12px; border-color: var(--link); background: var(--page); }
.tkeys { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 10px 8px; border-top: 1px solid var(--line); font-size: 10.5px; }
.tkeys kbd { font-size: 9.5px; padding: 0 4px; }

/* file type icons (lucide outlines as masks) */
.fi { flex: none; display: inline-block; width: 14px; height: 14px; background-color: var(--fic, var(--faint));
  -webkit-mask-size: 14px 14px; mask-size: 14px 14px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.fi-square { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3C/svg%3E"); }
.fi-columns { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E"); }
.fi-grid { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E"); }
.fi-panel-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E"); }
.fi-pin { --fic: var(--link); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
.fi-sparkles { --fic: var(--link); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.14 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.14 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3C/svg%3E"); }
.fi-alert { --fic: var(--bad); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.fi-info { --fic: var(--mut); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.fi-layout { --fic: var(--link); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M9 12h12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M9 12h12'/%3E%3C/svg%3E"); }
.fi-branch { --fic: var(--link); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='6' y1='3' y2='15'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M18 9a9 9 0 0 1-9 9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='6' y1='3' y2='15'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M18 9a9 9 0 0 1-9 9'/%3E%3C/svg%3E"); }
.fi-cloud { --fic: var(--hl-k); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E"); }
.fi-dir { --fic: var(--faint); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.fi-diro { --fic: var(--mut); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.fi-file { --fic: var(--faint); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); }
.fi-code { --fic: var(--hl-n); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E"); }
.fi-web { --fic: var(--hl-g); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E"); }
.fi-doc { --fic: var(--mut); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E"); }
.fi-data { --fic: var(--hl-a); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1'/%3E%3Cpath d='M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1'/%3E%3Cpath d='M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1'/%3E%3C/svg%3E"); }
.fi-conf { --fic: var(--hl-t); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Ccircle cx='12' cy='15' r='2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Ccircle cx='12' cy='15' r='2.5'/%3E%3C/svg%3E"); }
.fi-http { --fic: var(--link); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); }
.fi-img { --fic: var(--hl-k); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); }
.fi-hidden { --fic: var(--faint); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20'/%3E%3Cpath d='M6.7 6.7A10.8 10.8 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.3-1.7'/%3E%3Cpath d='M10.6 5.1A10 10 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20'/%3E%3Cpath d='M6.7 6.7A10.8 10.8 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.3-1.7'/%3E%3Cpath d='M10.6 5.1A10 10 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7'/%3E%3C/svg%3E"); }
.fi-refresh { --fic: var(--mut); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); }
.fi-tree { --fic: var(--mut); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8'/%3E%3Cpath d='M21 6H8'/%3E%3Cpath d='M21 18h-8'/%3E%3Cpath d='M3 6v4c0 1.1.9 2 2 2h3'/%3E%3Cpath d='M3 10v6c0 1.1.9 2 2 2h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8'/%3E%3Cpath d='M21 6H8'/%3E%3Cpath d='M21 18h-8'/%3E%3Cpath d='M3 6v4c0 1.1.9 2 2 2h3'/%3E%3Cpath d='M3 10v6c0 1.1.9 2 2 2h3'/%3E%3C/svg%3E"); }
.fi-history { --fic: var(--mut); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); }
.fi-lock { --fic: var(--faint); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.fi-check { --fic: var(--ok); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.fi-eye { --fic: var(--mut); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.fi-new { --fic: var(--ok); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E"); }
.fi-proj { --fic: var(--mut); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }

/* tabs */
.ftabs { background: var(--well); border-bottom: 1px solid var(--line); min-height: 34px; gap: 0; }
.ftab { gap: 0; border-right: 1px solid var(--line); max-width: 240px; }
.ftab .fname { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 4px 7px 12px; font-size: 12px; }
/* N10-B-1: the label in a span - text-overflow does not reach a bare text node of a flex box (cut, the git dot pushed out) */
.ftab .fname .tl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.ftab .fname .fi, .ftab .fname .hid-mark { flex: none; }
.ftab .gdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ftab .gdot.gm-mod { color: var(--warn); } .ftab .gdot.gm-new, .ftab .gdot.gm-add { color: var(--ok); }
.ftab.on { background: var(--page); box-shadow: inset 0 2px var(--link); }
.ftab.dirty .fclose { visibility: visible; color: var(--fg); }
.ftab.claude:not(.on) .fname { color: #c9b3f5; }

/* one-line header: breadcrumbs (path › class › method) + icon actions */
.fhead { min-height: 32px; padding: 0 8px 0 14px; gap: 8px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.fhead .crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; font-size: 12px; }
.fhead .crumbs > :first-child { margin-right: 0; }
.fhead .crumbs .sep { color: var(--faint); }
.fhead .crumbs button.link { background: none; border: 0; padding: 0; color: var(--mut); font-size: 12px; white-space: nowrap; }
.fhead .crumbs button.link:hover { color: var(--fg); text-decoration: underline; }
.fhead .crumbs strong { font-weight: 600; white-space: pre; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fhead .crumbs .sym-type { color: var(--hl-t); } .fhead .crumbs .sym-fn { color: var(--hl-f); }
.fhead .actions { flex: none; display: flex; gap: 2px; flex-wrap: nowrap; }
.fhead .ib { width: 26px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent;
  border-radius: 5px; color: var(--mut); font-size: 13px; }
.fhead .ib:hover { color: var(--fg); background: var(--tile); }
.fhead .ib.on { color: var(--link); background: color-mix(in srgb, var(--link) 14%, transparent); }
.fhead .ib.at { color: var(--link); font-weight: 700; background: color-mix(in srgb, var(--link) 14%, transparent); }
.fhead .ib.ij { font-size: 10.5px; font-weight: 700; letter-spacing: -.5px; }

/* banners: Claude changed it · read-only · conflict */
.fbanners:empty { display: none; }
.fbanner { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12px; border-bottom: 1px solid var(--line); }
.fbanner .grow { flex: 1; min-width: 0; }
.fbanner.b-claude { background: color-mix(in srgb, #b392f0 13%, transparent); color: #d2bdf7; border-bottom-color: color-mix(in srgb, #b392f0 35%, transparent); }
.fbanner.b-ro { background: var(--warn-bg); color: var(--warn); }
.fbanner.b-conflict, .fbanner.b-error { background: var(--bad-bg); color: var(--bad); }
.fbanner button.mini { font-size: 11px; padding: 1px 8px; background: none; color: inherit; border-color: currentColor; opacity: .9; }

/* the body: CodeMirror fills it */
.fbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fcode { flex: 1; min-height: 0; position: relative; display: flex; }
.cmhost { flex: 1; min-width: 0; min-height: 0; display: flex; }
.cmhost .cm-editor { flex: 1; min-width: 0; }
.files.navkey .cm-content { cursor: pointer; }
.cmk { width: 3px; height: 100%; margin-left: 4px; }
.cm-marks .cm-gutterElement { padding: 0 3px 0 0; cursor: pointer; }
.cmk-add { background: var(--ok); } .cmk-chg { background: var(--warn); }
.cmk-del { background: linear-gradient(to bottom, transparent 70%, var(--bad) 70%); }
.cmk-claude { background: #b392f0; }
.cmk-note { width: 7px; margin-left: 2px; border-radius: 2px; background: var(--warn); }
.cmk-http { width: auto; background: none; color: var(--ok); font-size: 10px; margin-left: 0; }
.cm-claude-flash { animation: claudeflash 2.4s ease-out; }
@keyframes claudeflash { 0%, 30% { background: color-mix(in srgb, #b392f0 30%, transparent); } 100% { background: transparent; } }
.cm-blame { color: var(--faint); opacity: .75; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 11px; margin-left: 3em; font-style: normal; }
.cm-sticky { position: absolute; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none; display: none; }
.cm-sticky.on { display: block; }
.cm-sticky-row { pointer-events: auto; cursor: pointer; display: flex; background: var(--card); border-bottom: 1px solid var(--line);
  font: 12.5px/1.55 "JetBrains Mono", "SF Mono", Menlo, monospace; white-space: pre; overflow: hidden; }
.cm-sticky-row:last-child { box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.cm-sticky-row .no { width: 58px; flex: none; text-align: right; padding-right: 22px; color: var(--faint); }
.cm-sticky-row:hover .tx { text-decoration: underline; }
.cmhost.ro .cm-cursor { border-left-color: var(--faint); }
.cm-panel.cm-search { font-size: 12px; padding: 4px 8px; }
.cm-panel.cm-search input, .cm-panel.cm-search button { font-size: 12px; }
.cm-panel.cm-search input[type=checkbox] { vertical-align: middle; }
.cm-panel.cm-search label { font-size: 11.5px; color: var(--mut); }
.cm-textfield { width: auto; padding: 2px 6px; }
.cm-button { background-image: none !important; background: var(--tilebtn) !important; border: 1px solid var(--line) !important; color: var(--fg) !important; border-radius: 4px !important; }
.fnotebar { padding: 8px 14px; border-top: 1px solid var(--warn); background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.fnotebar textarea { font-size: 12px; }
.fempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--mut); }
.fimg { flex: 1; overflow: auto; padding: 16px; text-align: center; }
.fimg img { max-width: 100%; }
.fbody .fmd, .fbody .fdiff { flex: 1; min-height: 0; overflow: auto; }

/* bottom tool panel */
.fpanel { flex: none; border-top: 1px solid var(--line); background: var(--well); display: flex; flex-direction: column; container: fpanel / inline-size; }
/* N10: Files beside the context panel at 1024 px - the hint was cut; a narrow panel drops it and packs its tabs (as the side pane does) */
@container fpanel (max-width: 440px) { .fpanel .pstrip > .mut { display: none; } .fpanel .ptab { padding: 1px 5px; } .fpanel .pstrip { flex-wrap: wrap; } }
.fpanel .pstrip { display: flex; align-items: center; gap: 2px; padding: 2px 8px; min-height: 28px; cursor: row-resize; }
.fpanel:not(.open) .pstrip { cursor: default; }
.fpanel .ptab { background: none; border: 1px solid transparent; border-radius: 4px; padding: 1px 8px; font-size: 11.5px; color: var(--mut); cursor: pointer; }
.fpanel .ptab.on { background: var(--tile); border-color: var(--line); color: var(--fg); font-weight: 600; }
.fpanel .ptab .n { margin-left: 5px; font-size: 10.5px; color: var(--faint); }
.fpanel .ptab.on .n { color: var(--link); } .fpanel .ptab.warn .n { color: var(--warn); }
.fpanel .grow { flex: 1; }
.fpanel .pbody { overflow: auto; border-top: 1px solid var(--line); }
.fpanel .phead { display: flex; align-items: center; gap: 8px; padding: 6px 12px; position: sticky; top: 0; background: var(--well); z-index: 1; border-bottom: 1px solid var(--line); }
.fpanel .phead input { padding: 3px 8px; font-size: 12px; }
.fpanel .phead input.sq { flex: 2; } .fpanel .phead input.sg { flex: 1; }
.fpanel .phead .prec { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: var(--tile); color: var(--mut); }
.fpanel .phead .prec.ok { background: var(--ok-bg); color: var(--ok); }
.fpanel .pad { padding: 8px 12px; margin: 0; }
.hits { padding: 2px 0 8px; }
.hgroup { padding: 6px 12px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--mut); text-transform: uppercase; }
.hfile { display: flex; align-items: center; gap: 6px; padding: 3px 12px 1px 22px; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; }
/* N10-B-4: a long name ends in …, the folder keeps its width up to 40 % (then …), the count stays */
.hfile .hn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.hfile .hd { flex: none; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.hfile .hc, .hfile .fi { flex: none; }
.fpanel button.hit { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 0;
  padding: 2px 12px 2px 42px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.fpanel button.hit:hover, .fpanel button.hit:focus-visible { background: var(--tile); outline: none; }
.fpanel button.hit.on { background: color-mix(in srgb, var(--link) 9%, var(--card)); box-shadow: inset 2px 0 var(--link); }
.fpanel .hit .lno { flex: none; width: 34px; text-align: right; color: var(--faint); }
.fpanel .hit .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mut); }
.fpanel .hit .tx mark { background: color-mix(in srgb, var(--hl-a) 30%, transparent); color: var(--fg); }
.fpanel .hit .sev { flex: none; font-size: 10.5px; text-transform: uppercase; }
.fpanel .hit .sev.warn { color: var(--warn); }
.fpanel .add { color: var(--ok); } .fpanel .del { color: var(--bad); }

/* status bar */
.fstatus { flex: none; display: flex; align-items: center; gap: 14px; padding: 0 12px; min-height: 24px; font-size: 11px; color: var(--mut);
  border-top: 1px solid var(--line); background: var(--well); white-space: nowrap; overflow: hidden; }
.fstatus .grow { flex: 1; }
.fstatus .legend { display: flex; align-items: center; gap: 5px; color: var(--faint); }
.fstatus .lg-claude { width: 3px; height: 10px; background: #b392f0; display: inline-block; }
.fstatus .idea { display: flex; align-items: center; gap: 4px; }
.fstatus .idea i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.fstatus .wstate { padding: 1px 8px; border-radius: 4px; }
.fstatus .wstate.rw { color: var(--ok); background: var(--ok-bg); }
.fstatus .wstate.ro { color: var(--warn); background: var(--warn-bg); }
.fstatus .wstate.dirty { color: var(--warn); background: var(--warn-bg); font-weight: 600; }
.fstatus.hidden, .fhead.hidden { display: none; }

/* Search everywhere ⌘P, menus */
.plist .psec { font-size: 10.5px; font-weight: 700; letter-spacing: .7px; color: var(--faint); padding: 8px 10px 2px; }
.pitem .pbadge { flex: none; font: 600 10.5px "JetBrains Mono", Menlo, monospace; color: var(--warn); padding: 0 5px; border-radius: 4px; background: var(--warn-bg); }
.pitem .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem .mut.mono { font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.pfoot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.ftoast { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); font-size: 12.5px; }

/* the strip (Pencil "Session strip · v3", F): project tiles instead of the whole queue - Files / HTTP by default, ⌘B anywhere */
body.queue-mini { --q-w: 0px; }   /* F01: folded = the rail alone, the sessions are in it */
body.queue-mini #queue, body.queue-mini .queue { display: none; }

#qmini button.qm { position: relative; flex: none; width: 40px; height: 40px; padding: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; border-radius: 10px; border: 1px solid transparent; overflow: visible;
  background: color-mix(in srgb, var(--pc) 16%, var(--card)); transition: background .12s, border-color .12s; }
#qmini button.qm:hover { background: color-mix(in srgb, var(--pc) 26%, var(--card)); }
#qmini .qm-mono { font-size: 15px; font-weight: 700; line-height: 1; color: var(--pc); }
#qmini .qm-num { max-width: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 8.5px/1.1 var(--mono); color: var(--mut); }
#qmini button.qm.unseen .qm-num, #qmini button.qm.on .qm-num { color: var(--fg); }
#qmini button.qm.on { border-color: color-mix(in srgb, var(--fg) 85%, transparent); }
#qmini button.qm.on::before { content: ""; position: absolute; left: -13px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--link); }
/* the state as a presence badge on the corner (the queue's glyphs) */
#qmini button.qm > .st { position: absolute; right: -4px; bottom: -4px; width: 11px; height: 11px; box-shadow: 0 0 0 2.5px var(--well); }
#qmini button.qm > .st.run, #qmini button.qm > .st.off { width: 10px; height: 10px; }
#qmini button.qm > .st.wait { box-shadow: none; outline: 2px solid var(--well); }
#qmini .qm-n { display: none; position: absolute; left: -5px; top: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 4px;
  background: var(--tilebtn); border: 1px solid var(--line); color: var(--fg); font: 600 9.5px/13px var(--mono); text-align: center; }
body.cmd-held #qmini .qm-n:not(:empty) { display: block; }
#qmini .grow { flex: 1; min-height: 8px; }
#qmini button.qm[hidden] { display: none; }
#actbar .qm-limits { display: flex; flex-direction: column; gap: 5px; flex: none; }
#actbar .qm-limits[hidden] { display: none; }
#actbar .qml-name { font: 600 8px/1 system-ui, sans-serif; color: var(--mut); }
/* One labelled strip tile per provider: session percent + two bars; hover/focus = details. */
#actbar .qm-lim { flex: none; width: 40px; padding: 5px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; border-radius: 8px;
  background: var(--tile); color: var(--fg); cursor: pointer; }
#actbar .qm-lim:hover { background: color-mix(in srgb, var(--link) 18%, var(--tile)); }
#actbar .qm-lim[hidden] { display: none; }
#actbar .qm-lim.dim { opacity: .55; }
#actbar .qml-pct { font: 700 11px var(--mono); line-height: 1.1; color: var(--fg); }
#actbar .qml-pct[data-tone="warn"] { color: var(--warn); }
#actbar .qml-pct[data-tone="bad"] { color: var(--bad); }
#actbar .qml-bar { display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--well); overflow: hidden; }
#actbar .qml-bar b { display: block; height: 100%; width: 0; background: var(--link); }
#actbar .qml-bar b[data-tone="warn"] { background: var(--warn); }
#actbar .qml-bar b[data-tone="bad"] { background: var(--bad); }
.qm-peek .qp-lim { display: flex; align-items: center; gap: 8px; min-width: 250px; font-size: 11.5px; color: var(--mut); }
.qm-peek .qp-lim b { flex: none; width: 40px; text-align: right; font: 600 11.5px var(--mono); color: var(--fg); }
.qm-peek .qp-reset { font: 11px var(--mono); color: var(--mut); white-space: nowrap; }
.qm-peek { position: fixed; z-index: 60; width: max-content; max-width: 320px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); pointer-events: none; display: flex; flex-direction: column; gap: 4px; }
.qm-peek[hidden] { display: none; }
.qm-peek .qp-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--fg); }
.qm-peek .qp-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut); }
.qm-peek .qp-sub i { width: 7px; height: 7px; border-radius: 50%; }
.qm-peek .qp-detail { font-size: 11.5px; color: var(--mut); }
.qm-peek .qp-keys { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--faint); }
/* the whole queue: fold to the strip, and its width by dragging its right edge (like the grid's splitters) */
#qsplit { position: fixed; z-index: 20; top: 0; bottom: 0; left: calc(var(--ab-w) + var(--q-w) - 5px); width: 10px; cursor: col-resize; }
#qsplit[hidden] { display: none; }
#qsplit::after { content: ""; position: absolute; left: 4px; width: 2px; top: 0; bottom: 0; border-radius: 2px; background: transparent; transition: background .12s; }
#qsplit:hover::after, #qsplit.drag::after { background: var(--link); }
#qsplit .qs-tip { display: none; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 4px 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; font: 11px var(--mono); color: var(--fg); }
#qsplit.drag .qs-tip:not(:empty) { display: block; }
.modal:has(.pfoot) { width: min(780px, calc(100vw - 32px)); }
.modal:has(.pfoot) .pitem .name { flex: none; max-width: 62%; }
.modal:has(.pfoot) .pitem .mut.mono { flex: 1; text-align: left; }
.fhead .crumbs { justify-content: flex-start; }
.fhead .crumbs > :first-child { margin-right: 0; }
.cm-anno, .cm-anno * { color: var(--hl-a) !important; }
.cm-const, .cm-const * { color: var(--hl-v) !important; }
.scope button { padding: 2px 3px; }
.modal:has(.sbs) { width: min(1100px, calc(100vw - 32px)); }
.files.narrow .fhead .ib.wide, .files.narrow .fpanel .pstrip > .mut, .files.narrow .fstatus .legend { display: none; }
.files.narrow .fpanel .ptab { padding: 1px 5px; }

/* Setup (PIPER.md 9.20, ONBOARDING.md): why Piper · one readiness line · presets · a gallery of modules · the
   first session - in the empty main area or the Setup view */
.panel.setup-panel { max-width: 1040px; }
.setup { max-width: 1040px; display: flex; flex-direction: column; gap: 22px; container-type: inline-size; }
.view > .setup { max-width: none; overflow: auto; padding: 20px max(16px, calc((100% - 1040px) / 2)) 32px; }   /* scrolls inside the view, not the page */
.setup h1 { font-size: 20px; margin: 0; }
.view > .setup > h1 { display: none; }
.setup .su-sec h3, .setup .su-first h3 { font-size: 15px; margin: 0 0 2px; }
.setup .su-sec > p { margin: 0 0 10px; }
/* hero: the pitch (only while not onboarded) */
.setup .su-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: center; padding: 8px 0 4px; }
.setup .su-hero h1 { font-size: 28px; line-height: 1.15; margin: 0 0 10px; }
.setup .su-hero p { margin: 0; font-size: 14px; line-height: 1.45; }
.setup .su-values { display: flex; flex-direction: column; gap: 8px; }
.setup .su-value { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.setup .su-value-ic { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--ok-soft); color: var(--ok);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.setup .su-value b { display: block; margin-bottom: 2px; }
/* readiness: one line while green; problems open themselves and come first */
.setup .su-ready { padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.setup .su-ready.su-fail { border-color: var(--bad); } .setup .su-ready.su-warn { border-color: var(--warn); }
.setup .su-ready-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setup .su-ready-head b { font-size: 14px; }
.setup .su-ready-acts { margin-left: auto; display: flex; gap: 6px; }
.setup .su-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; }
.setup .su-fail .su-dot { background: var(--bad); } .setup .su-warn .su-dot { background: var(--warn); }
.setup .su-fail .su-ready-head b { color: var(--bad); }
/* 9.54: hole's agent image under the readiness line - "Rebuild at next start" is an action, not an Options checkbox */
.setup .su-image { padding: 10px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.setup .su-image.armed { border-color: var(--warn); }
.setup .su-image-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.setup .su-image-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup .su-image .su-dot.su-warn { background: var(--warn); } .setup .su-image .su-dot.su-mut { background: var(--faint); }
.setup .su-image-hint { margin: 0; padding-left: 20px; }
.setup .su-image-note { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--warn-bg, rgba(206, 154, 46, .16)); }
.setup .su-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.setup .su-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 8px 10px;
  border-radius: 7px; background: var(--well); }
.setup .su-mark { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; margin-top: 1px; background: var(--neutral-bg); color: var(--mut); flex: none; }
.setup .su-row.su-ok .su-mark { background: var(--ok-bg); color: var(--ok); }
.setup .su-fail .su-mark, .setup .su-tile-fail .su-mark { background: var(--bad-bg); color: var(--bad); }
.setup .su-warn .su-mark, .setup .su-tile-warn .su-mark { background: var(--warn-bg); color: var(--warn); }
.setup .su-row.su-fail .su-title { color: var(--bad); }
.setup .su-fix { margin-top: 3px; color: var(--fg); }
.setup .su-fix code { white-space: pre-wrap; word-break: break-word; background: var(--tile); padding: 1px 6px; border-radius: 4px; }
.setup .su-fix .mini { margin-left: 6px; }
.setup .su-acts { display: flex; gap: 4px; }
.setup .su-passed { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; color: var(--mut); font-size: 12px; }
.setup .su-passed li { break-inside: avoid; padding: 1px 0; }
/* presets: three cards that say what you gain */
:is(.setup, .st-feat) .su-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
:is(.setup, .st-feat) .su-preset { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 8px; background: var(--card); }
:is(.setup, .st-feat) .su-preset:hover { background: var(--tile); }
:is(.setup, .st-feat) .su-preset.on { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); background: var(--sel, var(--card)); }
:is(.setup, .st-feat) .su-preset.on > .su-preset-head b { color: var(--ok); }
:is(.setup, .st-feat) .su-preset-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
:is(.setup, .st-feat) .su-chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* gallery: a screen per module, dimmed when off */
:is(.setup, .st-feat) .su-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
:is(.setup, .st-feat) .su-tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
:is(.setup, .st-feat) .su-tile.off { opacity: 0.55; }
:is(.setup, .st-feat) .su-tile.off:hover { opacity: 0.85; }
:is(.setup, .st-feat) .su-tile-warn { border-color: var(--warn); }
:is(.setup, .st-feat) .su-shot { aspect-ratio: 5 / 3; background: var(--tile); position: relative; display: flex; align-items: center; justify-content: center; }
:is(.setup, .st-feat) .su-shot-ph { color: var(--faint); font-size: 15px; font-weight: 600; padding: 0 12px; text-align: center; }
:is(.setup, .st-feat) .su-shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
:is(.setup, .st-feat) .su-tile-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
:is(.setup, .st-feat) .su-tile-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
:is(.setup, .st-feat) .su-switch { flex: none; width: 28px; height: 16px; padding: 2px; border-radius: 999px; border: 0; background: var(--line); display: inline-flex; align-items: center; }
:is(.setup, .st-feat) .su-switch .su-knob { width: 12px; height: 12px; border-radius: 50%; background: var(--fg); transition: transform .15s; }
:is(.setup, .st-feat) .su-switch[aria-checked="true"] { background: var(--ok); }
:is(.setup, .st-feat) .su-switch[aria-checked="true"] .su-knob { background: var(--on-ok); transform: translateX(12px); }
/* 9.40: Settings › Features shows the same presets and tiles (st-feat); its own column count, no container query */
.st-feat { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 8px; }
.st-feat .su-presets, .st-feat .su-gallery { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.st-feat .su-tile.changed { border-color: var(--link); }
.st-feat .su-tile-head .st-badge { margin-right: auto; }
.setup .su-tile-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 8px; border-radius: 6px; background: var(--warn-soft); }
.setup .su-tile-note .su-mark { width: 16px; height: 16px; font-size: 10px; margin: 0; }
.setup .su-tile-note .mini { margin: 0; }
.setup .su-tile-note .grow { flex: 1 1 140px; }
/* the first session: three steps and the one button */
.setup .su-first { display: flex; gap: 24px; align-items: center; padding: 18px 20px; background: var(--card); border: 1px solid var(--ok); border-radius: 10px; }
.setup .su-first.blocked { border-color: var(--line); }
.setup .su-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 20px; counter-reset: step; }
.setup .su-steps li { flex: 1; display: grid; grid-template-columns: 22px 1fr; gap: 1px 8px; align-items: start; align-content: start; counter-increment: step; }
.setup .su-steps li::before { content: counter(step); grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.setup .su-steps li span { grid-column: 2; }
.setup .su-first-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.setup .su-first-acts .primary { padding: 7px 16px; font-weight: 600; }
.setup .su-done { margin-top: 0; align-items: center; }
/* by the card's own width: the empty main area between the queue and the context panel is far narrower than the view */
@container (max-width: 960px) { .setup .su-gallery { grid-template-columns: repeat(3, 1fr); } .setup .su-hero { grid-template-columns: 1fr; } }
@container (max-width: 720px) { .setup .su-presets, .setup .su-gallery { grid-template-columns: 1fr 1fr; } .setup .su-steps { flex-direction: column; }
  .setup .su-first { flex-direction: column; align-items: stretch; } .setup .su-first-acts { align-items: stretch; } }
@container (max-width: 460px) { .setup .su-presets, .setup .su-gallery { grid-template-columns: 1fr; } .setup .su-passed { columns: 1; } }
/* the empty main area as a hub (ONBOARDING.md O3): a project to start in, the first steps, what is off */
.empty.hub { max-width: 720px; padding: 0 24px; }
.empty.hub h1 { font-size: 24px; margin: 0 0 10px; color: var(--fg); }
.empty.hub .hub-projects { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 16px; }
.empty.hub .hub-projects .pill { padding: 5px 12px; line-height: 20px; background: var(--card); color: var(--fg); cursor: pointer; }
.empty.hub .hub-projects .pill:hover { border-color: var(--mut); }
.empty.hub .hub-tips { margin-top: 26px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, var(--card)); text-align: left; }
.empty.hub .hub-tips .tlabel-text { font-size: 11px; font-weight: 600; letter-spacing: 0.9px; color: var(--mut); margin-bottom: 10px; }
.empty.hub .hub-tip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.empty.hub .hub-tip { padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.empty.hub .hub-tip b { display: block; color: var(--fg); margin-bottom: 4px; }
.empty.hub .hub-links { margin-top: 18px; display: flex; justify-content: center; gap: 12px; }
/* W15: Resume next to New session - the first thing in the morning is often yesterday's conversation */
.empty.hub .hub-start { display: flex; align-items: center; justify-content: center; gap: 14px; }
@media (max-width: 900px) { .empty.hub .hub-tip-row { grid-template-columns: 1fr; } }
.settings .st-gfold { background: none; border: 0; text-align: left; cursor: pointer; }
.settings .st-gfold:hover { color: var(--mut); }
.fbanner.b-work { background: color-mix(in srgb, var(--link) 10%, transparent); color: var(--mut); }
.fbanner.b-hidden { background: color-mix(in srgb, var(--faint) 16%, transparent); color: var(--mut); }
.fbanner.b-hidden .fi { flex: none; }
/* file names coloured by status, IntelliJ's palette (Darcula / light) */
:root { --vcs-mod: #6897bb; --vcs-add: #629755; --vcs-new: #d1675a; --vcs-del: #8c8c8c; --vcs-ren: #3a9a9a; --vcs-bad: #ff5c5c; }
:root[data-scheme="light"] { --vcs-mod: #0032a0; --vcs-add: #0a7700; --vcs-new: #993300; --vcs-del: #616161; --vcs-ren: #007c7c; --vcs-bad: #e00000; }
.gitfiles.vcs li.ch-mod .fn { color: var(--vcs-mod); } .gitfiles.vcs li.ch-add .fn { color: var(--vcs-add); }
.gitfiles.vcs li.ch-new .fn { color: var(--vcs-new); } .gitfiles.vcs li.ch-del .fn { color: var(--vcs-del); text-decoration: line-through; }
.gitfiles.vcs li.ch-ren .fn { color: var(--vcs-ren); } .gitfiles.vcs li.ch-bad .fn { color: var(--vcs-bad); }
/* the two groups (Changes / Unversioned Files): ▸ ☐ name count, the files indented under the box */
details.vgroup { margin: 2px 0 4px; }
details.vgroup > summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: var(--t-xs); color: var(--mut); min-height: 22px; }
details.vgroup > summary::-webkit-details-marker { display: none; }
details.vgroup > summary::before, .gdir-t::before { content: ''; width: 12px; height: 12px; flex: none; background: var(--faint); transition: transform .1s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 12px no-repeat; }
details.vgroup[open] > summary::before { transform: rotate(90deg); }
details.vgroup > summary .vg-name { color: var(--fg); font-weight: 500; }
details.vgroup > summary .grow { flex: 1; }
details.vgroup > summary > input { order: -1; margin: 0; }
details.vgroup > summary .vg-name { font-weight: 600; }
details.vgroup > summary .vg-n { color: var(--faint-t); }
/* S2 tree: a directory row (box, chevron, folder, short path), its files indented under it */
.gitfiles.tree li.gdir { grid-template-columns: auto minmax(0, 1fr); }
.gitfiles.tree li.gdir > input { margin: 0; }
.gdir-t { display: flex; align-items: center; gap: 5px; color: var(--mut) !important; min-width: 0; white-space: nowrap; }
li.gdir.open .gdir-t::before { transform: rotate(90deg); }
.gdir-t > span { overflow: hidden; text-overflow: ellipsis; }
.gitfiles.tree li.in { padding-left: 22px; }
.gitfiles.vcs .gmark { background: none; min-width: 10px; padding: 0; }
.gitfiles.vcs .gmark.ch-mod { color: var(--vcs-mod); } .gitfiles.vcs .gmark.ch-add { color: var(--vcs-add); } .gitfiles.vcs .gmark.ch-new { color: var(--vcs-new); }
.gitfiles.vcs .gmark.ch-del { color: var(--vcs-del); } .gitfiles.vcs .gmark.ch-ren { color: var(--vcs-ren); } .gitfiles.vcs .gmark.ch-bad { color: var(--vcs-bad); }
.gitfiles.vcs .hid-mark { --fic: var(--warn); }
.gstat { font-family: var(--mono); font-size: 10.5px; color: var(--faint-t); white-space: nowrap; }
.gstat:empty { display: none; }
/* the commit area: Amend + Generate, the message, notes, N of M + Commit + Commit & Push; the push line under it */
.gmsg { margin-top: 8px; border-top: 1px solid var(--line-soft, var(--line)); padding-top: 8px; }
.gfoot { gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.gfoot button { margin: 0; }
.gfoot.gpush { margin-top: 4px; }
.gfoot.gpush.solo { border-top: 1px solid var(--line-soft, var(--line)); padding-top: 8px; }
.gfoot.gpush.solo button.primary { padding: 3px 14px; font-size: var(--t-sm); }
/* commit A: Commit ▾ is one split button (the menu: Commit & Push, Amend, Review before commit) */
.split { display: inline-flex; }
/* Keep the reason a commit is disabled readable even in the phone's narrow context panel. */
.gfoot > .grow { flex-basis: 8em; white-space: normal; overflow-wrap: anywhere; }
.gfoot .split > button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gfoot .split > .split-more { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: color-mix(in srgb, currentColor 30%, transparent); padding: 0 6px; }
p.amendline, p.unviewed { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; }
p.amendline { color: var(--warn); }
p.unviewed.warn { color: var(--warn); }
p.gclean { display: flex; align-items: center; gap: 6px; color: var(--mut); margin: 6px 0 !important; }
p.gclean .fi { --fic: var(--ok); }
details.vgroup > .gitfiles, #inspector details.vgroup > .gitfiles { margin: 2px 0 4px 16px; overflow: visible; max-height: none; }
details.vgroup > .gitfiles li { margin: 0; }
/* a file only the sandbox has (term_click_opens_files): read-only, tall enough to read */
.modal:has(.sbfile) { width: min(1240px, calc(100vw - 32px)); }
.sbfile { height: min(72vh, 820px); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sbpath { margin: 0; overflow-wrap: anywhere; }
.sbfile { display: flex; }
.sbfile > * { flex: 1; min-width: 0; min-height: 0; height: 100%; }

/* A review keeps the pinned file list, both versions and note history in view. */
.modal:has(.reviewpane) { width: min(1800px, 98vw); max-width: none; height: 92vh; display: flex; flex-direction: column; }
.modal:has(.reviewpane.review-fullscreen) { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 10px; }
.review-files-hidden .review-list, .review-files-hidden .review-splitter, .review-actions-hidden .review-notes { display: none; }
.review-working-focus .cm-mergeViewEditor:has(.cm-merge-a) { flex: 0 0 34%; }
.review-working-focus .review-additions .cm-mergeViewEditor:has(.cm-merge-a) { flex-basis: 22%; }
.review-working-focus .review-removals .cm-mergeViewEditor:has(.cm-merge-a) { flex: 1; }
.review-working-focus .cm-mergeViewEditor:has(.cm-merge-b) { flex: 1; }
.review-working-focus .review-removals .cm-mergeViewEditor:has(.cm-merge-b) { flex: 0 0 22%; }
.review-close { width: 32px; height: 32px; padding: 0; font-size: 24px; line-height: 1; }
.review-action { display: inline-flex; align-items: center; gap: 6px; }
.review-action kbd { white-space: nowrap; }
.reviewpane { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
.review-toolbar { flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-top: 0; }
.review-toolbar button { padding: 5px 7px; font-size: 12px; }
.review-toolbar select { width: 175px; }
.review-nav { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-left: 1px solid var(--line); }
.review-banner { min-height: 18px; }
.review-loading progress { width: 160px; height: 5px; accent-color: var(--link); }
.review-merge .cm-line.cm-review-active-chunk { box-shadow: inset 3px 0 var(--link); }
.review-merge .cm-mergeSpacer.cm-review-active-spacer { background: color-mix(in srgb, var(--link) 10%, transparent); box-shadow: inset 3px 0 var(--link); }
.review-merge .cm-merge-a .cm-changedLine { background-color: color-mix(in srgb, var(--bad) 12%, transparent); }
.review-merge .cm-merge-b .cm-changedLine { background-color: color-mix(in srgb, var(--vcs-add) 14%, transparent); }
.review-merge .cm-changedText, .review-merge .cm-deletedText, .review-merge .cm-insertedText { background-image: none !important; text-decoration: none !important; border-radius: 2px; }
.review-merge .cm-merge-a .cm-changedText { background-color: color-mix(in srgb, var(--bad) 32%, transparent) !important; }
.review-merge .cm-merge-b .cm-changedText { background-color: color-mix(in srgb, var(--vcs-add) 32%, transparent) !important; }
.review-merge .cm-deletedText { background-color: color-mix(in srgb, var(--bad) 32%, transparent) !important; }
.review-merge .cm-insertedText { background-color: color-mix(in srgb, var(--vcs-add) 32%, transparent) !important; }
.review-merge .cm-line.cm-review-context, .review-merge .cm-line.cm-review-whitespace, .review-merge .cm-review-whitespace .cm-deletedText,
.review-merge .cm-review-whitespace .cm-insertedText, .review-merge .cm-review-whitespace .cm-changedText { background-color: transparent !important; }
.review-merge .cm-review-whitespace::after { content: 'whitespace'; color: var(--faint-t, var(--mut)); background: var(--tile); border-radius: 3px; font: 10px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; margin-left: 10px; padding: 0 3px; }
.review-chunk-actions[aria-current="true"] { outline: 1px solid var(--link); border-radius: 4px; }
.review-body { display: flex; flex: 1; min-height: 0; gap: 10px; }
.review-list { width: 200px; flex-shrink: 0; overflow: auto; border-right: 1px solid var(--line); padding-right: 8px; }
.review-group summary { padding: 8px 0; cursor: pointer; }
.review-file { display: grid; grid-template-columns: 18px 18px minmax(0, 1fr) auto minmax(20px, auto); gap: 4px; align-items: center; padding: 6px 3px; border-radius: 4px; }
.review-file.active { background: var(--hover); outline: 1px solid var(--line); }
.review-file.stale { opacity: .65; }
.review-file-name { border: 0; background: transparent; text-align: left; padding: 0; overflow-wrap: anywhere; font-size: 12px; }
.review-numstat { grid-column: 3 / 6; }
.review-file-state { grid-column: 5; }   /* after the optional hidden-from-Claude eye (column 4); "Changed" fits */
.review-file.ch-mod .review-file-name { color: var(--vcs-mod); }
.review-file.ch-add .review-file-name { color: var(--vcs-add); }
.review-file.ch-new .review-file-name { color: var(--vcs-new); }
.review-file.ch-del .review-file-name { color: var(--vcs-del); text-decoration: line-through; }
.review-file.ch-ren .review-file-name { color: var(--vcs-ren); }
.gitfiles.vcs .gmark.ch-new, .review-list .gmark.ch-new { color: var(--vcs-new); background: none; }
.review-center { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; gap: 6px; }
.review-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; overflow-wrap: anywhere; }
.review-meta:empty { display: none; }
.review-meta { display: flex; flex-wrap: wrap; gap: 12px; }
.review-code { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.review-merge { width: 100%; min-height: 0; }
.review-merge .cm-mergeView { width: 100%; min-width: 0; }
.review-merge .cm-mergeView, .review-merge .cm-mergeViewEditors, .review-merge .cm-editor { height: 100%; }
.review-merge .cm-mergeViewEditor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.review-merge .cm-editor { min-height: 0; }
.review-merge .cm-scroller { overflow: auto; }
.review-notes { width: 245px; flex-shrink: 0; overflow: auto; border-left: 1px solid var(--line); padding-left: 8px; }
.review-palette > .row { margin-top: 0; }
.review-target-controls { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.review-selection-hint { margin: 0 0 8px; }
.review-action-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 8px 0 12px; }
.review-action-menu button { display: flex; align-items: center; gap: 7px; text-align: left; padding: 6px; font-size: 12px; }
.review-action-menu button[aria-pressed="true"] { border-color: var(--accent); background: var(--tile); }
.review-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.review-badge { font-size: 11px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; }
.review-excerpt { white-space: pre-wrap; overflow: auto; max-height: 160px; font-size: 12px; }
.review-note-edit { overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin: 8px 0; }
.modal:has(.review-task), .modal:has(.review-selection) { width: min(1000px, calc(100vw - 32px)); }
.review-task, .review-selection { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.review-task textarea { width: 100%; min-height: 200px; max-height: 60vh; resize: vertical; }
.review-selection textarea { width: 100%; }
.st-review-actions { display: flex; gap: 14px; width: min(850px, 100%); }
.st-review-list { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.st-review-list button { display: flex; align-items: center; gap: 7px; text-align: left; }
.st-review-list button.active { border-color: var(--accent); }
.st-review-detail { flex: 1; min-width: 0; }
.st-review-detail label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.st-review-detail textarea { width: 100%; resize: vertical; }
.st-review-detail .row { flex-wrap: wrap; }
.review-note { border-bottom: 1px solid var(--line); padding: 8px 0; overflow-wrap: anywhere; }
.review-note pre, .review-note-edit pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.review-note.note-resolved { opacity: .6; }
.review-note-edit textarea { width: 100%; }
.review-note-edit .row { flex-wrap: wrap; justify-content: flex-start; }
.review-footer { flex-wrap: wrap; margin-top: 0; }
.review-footer input { min-width: 200px; flex: 1; }
@media (max-width: 1100px) { .review-list { width: 180px; } .review-notes { width: 220px; } }
@media (max-width: 800px) { .review-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 150px; overflow: hidden; } .review-list { width: auto; min-height: 0; } .review-splitter { display: none; } .review-center { min-width: 0; } .review-notes { grid-column: 1 / -1; width: auto; min-height: 0; max-height: 150px; border-left: 0; border-top: 1px solid var(--line); } .review-actions-hidden .review-body { grid-template-rows: minmax(0, 1fr); } .review-files-hidden .review-body { grid-template-columns: minmax(0, 1fr); } .review-action-menu { grid-template-columns: repeat(4, 1fr); } .st-review-actions { flex-direction: column; } }

.review-merge .cmk-review-add { width: 12px; opacity: .2; color: var(--mut); text-align: center; line-height: 18px; }
.review-merge .cm-marks:hover .cmk-review-add { opacity: 1; color: var(--link); }

.review-merge .cm-merge-revert { flex: 0 0 78px; overflow: hidden; }
.review-chunk-actions { position: absolute; display: flex; gap: 2px; padding: 1px 3px; }
.review-chunk-actions button { width: 22px; height: 22px; padding: 0; line-height: 20px; font-size: 14px; }

.review-merge .cm-merge-revert .review-chunk-actions button { position: static; }

/* G-N11-1: a phone-width window (≤ 640 px) has no room for a second column - the open context panel (a column at every
   width since N10) left the detail 0 px wide, its header toggle under the panel and the page 10 px wider than the window.
   There the panel lies in the detail's cell as a bottom sheet (the header and its toggle stay above it), and the agent
   drawer takes the detail's width, never the queue strip (its 320 px floor covered it) */
@media (max-width: 640px) {
  body, body.no-inspector, body.drawer-open, body.drawer-open.no-inspector { --ctx-w: 0px; }
  #inspector { grid-column: 3; align-self: end; height: 55vh; z-index: 14; border-left: 0; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px #0006; }
  body { --drawer-w: max(240px, calc(100vw - var(--ab-w) - var(--q-w))); }
  /* the whole queue beside a detail left it 46 px: there it takes the detail's place (a list, then its item);
     picking an item folds it to the strip (main.ts foldNarrowQueue) */
  body:not(.queue-mini):not(.no-queue) #queue { grid-column: 2 / 5; }
  body:not(.queue-mini):not(.no-queue) #main, body:not(.queue-mini):not(.no-queue) #inspector,
  body:not(.queue-mini):not(.no-queue) #qsplit { display: none; }
}

/* W6 (S2): Generate with its icon, the drafted note a warning when hidden files were left out */
.msghead .mini, .mrtarget .mini { display: inline-flex; align-items: center; gap: 5px; }
.gennote.held { display: flex; gap: 6px; align-items: flex-start; color: var(--warn); background: var(--warn-bg); border-radius: 6px; padding: 6px 8px; }
.gennote.held .fi, .gennote.held svg { --fic: var(--warn); color: var(--warn); margin-top: 1px; }
.gw-field.gw-tile { background: var(--tile); border-radius: 6px; padding: 8px 10px; }
.gw-field.gw-tile code { word-break: break-all; }
/* R1: the resume dialog - the session that goes on, then the task, a fresh session on the left */
.ibx-resume-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--tile); border-radius: 4px; }
.ibx-resume-foot { justify-content: space-between; }

/* W13 (PIPER.md 9.29): a toast closes with ×, the Notifications list under the bell, the compact card's Show */
button.tclose { background: none; border: 0; padding: 0 2px; color: var(--mut); font-size: 16px; line-height: 1; flex: none; }
button.tclose:hover { color: var(--fg); }
#notices { position: fixed; z-index: 22; width: min(460px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); overflow: hidden; }
#notices:focus { outline: none; }
.nt-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft, var(--line)); }
.nt-head b { font-weight: 600; }
.nt-head .nt-keep { font-size: 10px; color: var(--faint); }
.nt-new { color: var(--warn); font-size: 11px; }
.nt-list { overflow-y: auto; min-height: 0; }
.nt-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 12px; }
.nt-item.unread { background: var(--tile); }
.nt-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.nt-item.unread .nt-dot { background: var(--warn); }
.nt-time { color: var(--faint); font: 11px "JetBrains Mono", "SF Mono", Menlo, monospace; flex: none; }
.nt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nt-empty { padding: 12px; margin: 0; }
.nt-foot { margin-top: auto; display: flex; justify-content: flex-end; padding: 6px 12px; border-top: 1px solid var(--line-soft, var(--line)); }
.nt-foot button.link { font-size: 12px; }

/* W2 host terminal (Pencil "Host terminal · W2"): tabs over host shells; the red HOST strip never scrolls away -
   nothing in this view is sandboxed */
.ab-item.host.on { color: var(--bad); background: var(--tile); border-color: var(--bad); }
.hostterm { display: flex; flex-direction: column; min-height: 0; background: var(--well); border-radius: var(--r-lg); overflow: hidden; }
.ht-bar { flex: none; display: flex; align-items: center; gap: var(--s1); padding: 0 var(--s2) 0 var(--s3); height: 36px; background: var(--card); border-bottom: 1px solid var(--line); }
.ht-title { font-weight: 600; margin-right: var(--s2); }
.ht-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ht-tab { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--r-md); color: var(--mut); cursor: pointer; white-space: nowrap; }
.ht-tab:hover { background: var(--tile); color: var(--fg); }
.ht-tab.on { background: var(--tile); color: var(--fg); box-shadow: inset 0 -2px 0 var(--bad); }
.ht-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-dot); flex: none; }
.ht-tab.dead .ht-dot { background: var(--dim-dot); }
.ht-tab.dead .ht-name { color: var(--faint-t); }
.ht-rc { font-size: var(--t-xs); color: var(--faint-t); font-family: var(--mono); }
.ht-x { border: 0; background: none; padding: 0 4px; color: var(--faint-t); line-height: 1; font-size: 15px; }
.ht-x:hover { color: var(--fg); }
.ht-add, .ht-pick { border: 0; background: none; padding: 2px 6px; color: var(--mut); }
.ht-add { font-size: 17px; line-height: 1; }
.ht-pick { font-size: 10px; margin-left: -4px; }
.ht-ended { margin-right: 10px; white-space: nowrap; }
.plist .ht-endfold > summary { cursor: pointer; margin: 6px 0 2px; }
.ht-add:hover, .ht-pick:hover { color: var(--fg); background: var(--tile); }
.ht-hint { font-size: var(--t-xs); color: var(--faint-t); white-space: nowrap; }
.ht-banner { flex: none; display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3); background: var(--bad-soft); border-bottom: 1px solid var(--bad); font-size: var(--t-sm); }
.ht-pill { flex: none; font-weight: 700; font-size: var(--t-xs); letter-spacing: .04em; color: var(--page); background: var(--bad); border-radius: 999px; padding: 1px 8px; }
.ht-who { flex: 1; min-width: 0; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-cwd { flex: none; color: var(--mut); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.ht-body { flex: 1; min-height: 0; display: flex; }
.ht-body > .term { border-radius: 0; }
.ht-empty, .ht-off { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s5); text-align: center; }
.ht-empty h2, .ht-off h2 { margin: 0; font-size: var(--t-lg); }
.ht-empty p, .ht-off p { margin: 0; max-width: 46ch; }
.ht-off button, .ht-empty button { margin-top: var(--s2); }

/* Security links keep their shared outline icon. */
.sc-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings .st-field.governed .st-ctl > :not(.sc-governed) { opacity: .55; }
.sc-governed { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; background: var(--tile); color: var(--mut); align-self: stretch; }
.sc-governed .sc-ic { color: var(--mut); }
.sc-governed span { flex: 1; }
.settings .st-cnt.sc-navn { color: var(--ok); background: var(--ok-soft); padding: 0 6px; border-radius: 999px; }

/* The one-time Security screen after the Minimal change (securitynotice.ts, Pencil S6 / S7). */
.modal:has(.sn) { width: min(720px, calc(100vw - 32px)); padding: 24px 28px; gap: 14px; }
.modal:has(.sn) > h2 { display: none; }   /* the title sits next to the shield (.sn-head) */
.sn { display: flex; flex-direction: column; gap: 16px; }
.sn p { margin: 0; line-height: 1.5; }
.sn-head { display: flex; align-items: center; gap: 14px; }
.sn-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sn-title { font-size: 18px; font-weight: 600; }
.sn-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--link-soft); color: var(--link); flex: none; }
.sn-ic { width: 22px; height: 22px; }
.sn-ic, .sn-ok, .sn-info { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sn-kicker { font-size: 11px; color: var(--faint); }
.sn-new { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--well); border-radius: 8px; }
.sn-label { font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--faint); }
.sn-new ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sn-new li { display: flex; align-items: flex-start; gap: 10px; }
.sn-ok { width: 14px; height: 14px; color: var(--ok); margin-top: 2px; }
.sn-choices { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sn-choices legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.sn-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.sn-choice.on { border-color: var(--link); background: var(--link-soft); }
.sn-choice input { accent-color: var(--link); margin: 0; flex: none; }
.sn-choice-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sn-choice-title { display: flex; align-items: center; gap: 10px; }
.sn-current { font-size: 10px; font-weight: 600; color: var(--link); }
.sn-own { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.sn-info { width: 16px; height: 16px; color: var(--link); }
.sn-actions { margin-top: 0; align-items: center; }

/* ==== 9.63 F17 approval card (board BSji2): header · one fact · context · Details · Asks because · Deny n  Allow y ▾ ==== */
.pending { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 8px; font-size: var(--t-md); outline: none; }
.pending:focus-visible, .pending:focus-within { border-color: color-mix(in srgb, var(--fg) 28%, var(--line)); }
/* danger = a red 3 px left edge and the red Allow, not a whole red frame */
.pending.pdanger { box-shadow: inset 3px 0 0 var(--bad), 0 8px 24px rgba(0,0,0,.35); }
.phead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.phead strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phead .mut { font-size: var(--t-sm); white-space: nowrap; }
.pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
.pdanger .pdot { background: var(--bad); }
.prisk { font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; }
.prisk.low { color: var(--faint-t); } .prisk.medium { color: var(--warn); } .prisk.high { color: var(--bad); }
.pbody { display: flex; flex-direction: column; gap: 6px; }
.pfact { font: var(--t-md)/1.45 var(--mono); background: var(--well); border-radius: var(--r-md); padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pctx { color: var(--mut); font-size: var(--t-sm); overflow-wrap: anywhere; }
.pwarn { color: var(--warn); font-weight: 600; font-size: var(--t-sm); }
.pdanger .pwarn { color: var(--bad); }
.pending details { margin: 0; }
.pending details summary { cursor: pointer; color: var(--faint-t); font-size: var(--t-sm); }
.pending details pre { margin: 6px 0 0; }
.pwhy { color: var(--faint-t); font-size: var(--t-sm); }
.pwhy a { color: var(--link); text-decoration: none; }
.pwhy a:hover { text-decoration: underline; }
.pending .pbtns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin: 2px 0 0; }
.pbtns button kbd { margin-left: 6px; font-size: var(--t-xs); padding: 0 4px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, currentColor 35%, transparent); color: inherit; background: transparent; opacity: .8; }
.psplit { display: inline-flex; }
.psplit > button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.psplit > .pcaret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 7px; border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
/* the rest waits under it: one bar, the card swaps on a click, ⌘J lands on the card */
#pending .pmore { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 8px 12px; font-size: var(--t-sm); text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.pmore-k { color: var(--faint-t); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the DB write card keeps its statement, preview and rows (dbview.dbCard); the header is the card's own */
.pending.dbpending .dbc { border: 0; }
.pending.dbpending .dbc-h { display: none; }
.pending.dbpending .dbc-b { padding: 0; }
/* a card that went unanswered: a quiet line in Needs you for 10 s */
.q-gone { display: flex; flex-direction: column; gap: 1px; margin: 2px var(--s3) 6px 34px; font-size: var(--t-sm); color: var(--faint-t); }
.q-gone-t { text-decoration: line-through; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the taller card at 390 px covered the rail's ⋯ / Settings / bell: it never reaches over the rail */
#pending { width: min(460px, calc(100vw - var(--ab-w, 64px) - 32px)); }
/* ==== end F17 ==== */

/* ==== 9.64 F01 navigation: sessions in the rail, Blocked / Your turn ==== */
#qmini { display: flex; flex-direction: column; align-items: center; gap: var(--s2, 6px); flex: none; }
#qmini[hidden], .ab-sess-sep:has(+ #qmini[hidden]) { display: none; }
/* N7 (ZBYTEK): only the sessions scroll - with many tiles the whole rail scrolled and Overview / Agent left the top */
#qmini { flex: 0 1 auto; min-height: 0; overflow-y: auto; align-self: stretch; scrollbar-width: none; padding: 6px 0 4px; }
#qmini::-webkit-scrollbar { display: none; }
#qmini button.qm { width: 40px; height: 40px; gap: 0; border-radius: var(--r-md); border: 1px solid transparent; background: var(--tile); }
#qmini button.qm:hover { background: var(--tilebtn, var(--tile)); border-color: var(--line); }
#qmini .qm-mono { font: 600 var(--t-sm)/1 system-ui, sans-serif; letter-spacing: .02em; color: var(--mut); }
#qmini .qm-num { display: none; }
#qmini button.qm.unseen .qm-mono, #qmini button.qm:hover .qm-mono { color: var(--fg); }
#qmini button.qm.on { background: var(--nav-selected); border-color: var(--nav-accent); }
#qmini button.qm.on .qm-mono { color: var(--nav-accent); }
#qmini button.qm.on::before { left: -12px; }
#qmini button.qm > .st, #qmini button.qm > .st.run, #qmini button.qm > .st.off { right: 3px; bottom: 3px; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--page); }
#qmini button.qm > .st.wait { outline: 0; box-shadow: 0 0 0 2px var(--page); }
#actbar .qm-limits { display: flex; flex-direction: column; gap: var(--s1, 4px); flex: none; }
#actbar .ab-badge.bad { background: var(--bad); color: #fff; }
.q-sec.needs.blocked .qi.confirm { box-shadow: inset 2px 0 0 var(--bad); }
.qi.q2 .qi-title { grid-column: 2 / 4; display: block; white-space: nowrap; font-weight: 400; }
.qi.q2.unread .qi-title { font-weight: 600; }
.qi.q2 .qi-sub { color: var(--faint-t, var(--mut)); font-size: var(--t-xs); }
.qi.q2.ra-row { position: relative; }
.qi.q2.ra-row .qi-ops.row-actions { position: absolute; right: 12px; bottom: 8px; padding-left: 8px; background: var(--tile); }
.qi.q2.ra-row .qi-chips:not(:has(.qi-meta)) { margin-top: 0; }
.q-endline { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; }
.q-endline .q-fold { width: auto; color: var(--mut); text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: 500; }
.q-endline .q-resume { font-size: var(--t-sm); }
/* ==== end F01 ==== */
/* ==== 9.65 F06 Files: scope pills, a hub in the empty editor, a quieter tree (board AKuoy) ==== */
.fleft .tfilter { min-width: 0; font-size: var(--t-sm); border-radius: var(--r-md); }
.fleft .scope { flex-wrap: wrap; gap: 3px; padding: 0; background: none; border-radius: 0; }
.fleft .scope button { flex: 0 1 auto; padding: 1px 6px; font-size: var(--t-sm); border-radius: var(--r-md);
  background: none; border: 1px solid var(--line); color: var(--mut); }
.fleft .scope button.on { background: var(--tile); border-color: transparent; color: var(--fg); font-weight: 600; }
.fleft .scope button .n { font-size: var(--t-xs); color: var(--faint-t); }
.fleft .scope button.on .n { color: var(--mut); }
.fleft .tree { font-size: var(--t-sm); }
.fleft .tnode .gm { font-size: var(--t-xs); }
.fleft .tnode .cnt, .fleft .tdir { font-size: var(--t-xs); color: var(--faint-t); }
.fleft .tnode.dir.has-chg > .nm { color: var(--warn); }
.fempty.fe-hub { margin: 0; align-items: stretch; justify-content: flex-start; overflow: auto; padding: 32px 28px; color: var(--fg); text-align: left; }
.fe-in { display: flex; flex-direction: column; gap: var(--s4); width: 100%; max-width: 560px; }
.fe-title { margin: 0; font-size: var(--t-lg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fe-acts button { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-md); }
.fe-acts kbd { font-size: var(--t-xs); padding: 0 4px; }
.fe-sec { display: flex; flex-direction: column; }
.fe-sec .sec-h { display: block; min-height: 0; margin-bottom: var(--s1); }
.fe-row { display: flex; align-items: baseline; gap: var(--s2); width: 100%; min-height: 28px; padding: 4px 6px; margin: 0 -6px;
  background: none; border: 0; border-radius: var(--r-sm); text-align: left; font-size: var(--t-md); color: var(--link); }
.fe-row:not(:disabled):hover { background: var(--tile); }
.fe-row .nm { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-row .dir { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint-t); font-size: var(--t-sm); }
.fe-row .gm, .fe-row .when { flex: none; font-size: var(--t-xs); color: var(--faint-t); }
.fe-row .gm { font-family: "JetBrains Mono", Menlo, monospace; font-weight: 600; }
.fe-more.link { align-self: flex-start; background: none; border: 0; padding: 4px 0; margin: 0; color: var(--mut); font-size: var(--t-sm); }
.term.filespane .fempty.fe-hub { padding: 20px 16px; }
/* ==== end F06 ==== */

/* ==== 9.66 F09 HTTP: no .http file = one empty state with one action (board H0K15u) ==== */
.httppanel.hp-none { grid-template-columns: minmax(0, 1fr); }
.httppanel.hp-none > .hpleft { display: none; }
.hp-empty { margin: auto; max-width: 480px; gap: var(--s2); padding: var(--s5); text-align: center; }
.hp-empty h3 { margin: 0; font-size: var(--t-lg); font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.hp-empty p { margin: 0; font-size: var(--t-md); line-height: 1.5; }
.hp-empty-acts { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s2); }
/* ==== end F09 ==== */

/* ==== 9.67 F10 Databases: quiet connection list, row actions on hover, one action in the panel (board MeXbn) ==== */
.db-cp-head { gap: var(--s3); padding: var(--s3) var(--s5); }
.db-cp-head h2 { font-size: var(--t-xl); }
.db-cp-head > .db-find { width: min(360px, 100%); height: 32px; }
.db-cp-head .db-cp-count { font-size: var(--t-sm); white-space: nowrap; }
.db-ctable .db-crow { grid-template-columns: minmax(150px, 1.4fr) 76px 92px minmax(130px, 1.3fr) minmax(180px, 1.6fr) 150px;
  padding: 6px var(--s5); min-height: 36px; border-bottom: 0; font-size: var(--t-md); cursor: pointer; }
.db-ctable .db-crow:not(.db-chead):hover { background: var(--tile); }
.db-ctable .db-crow:not(.db-chead):hover > .db-cacts { background: var(--tile); box-shadow: -10px 0 8px -4px var(--tile); }
.db-ctable .db-crow:focus-within { background: var(--tile); }
.db-ctable .db-crow:focus-within > .db-cacts { background: var(--tile); box-shadow: -10px 0 8px -4px var(--tile); }
/* the column heads stay for screen readers only (the board has none) */
.db-ctable .db-chead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; min-height: 0; }
.db-ctable .db-cgroup { padding: var(--s4) var(--s5) var(--s1); font-size: var(--t-md); min-height: 36px; }
.db-ctable .db-cgroup .sec-h { display: block; min-height: 0; }
.db-ctable .db-cgroup .warn { font-size: var(--t-sm); }
.db-creach { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); min-width: 0; font-size: var(--t-sm); }
.db-creach .db-reach { color: var(--faint-t); white-space: nowrap; }
.db-creach .db-reach.ok { color: var(--mut); }
.db-creach .db-reach.bad { color: var(--bad); } .db-creach .db-reach.warn { color: var(--warn); }
.db-nopw { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.db-nopw > svg { width: 13px; height: 13px; }
.db-cacts button { font-size: var(--t-sm); padding: 2px 10px; }
/* the class as a dot and its word, no filled chip; prod's word stays red */
.db-cls.db-cls-dot { background: none; height: auto; padding: 0; border-radius: 0; font-weight: 400; font-size: var(--t-sm); color: var(--mut); gap: 6px; }
.db-cls.db-cls-dot.db-cls-prod { color: var(--bad); }
.sec-s .db-cls.db-cls-dot { height: auto; padding: 0; font-size: var(--t-sm); }
.dbs-conn .db-cls.db-cls-dot { height: auto; padding: 0; font-size: var(--t-xs); min-width: 42px; }
/* ==== end F10 ==== */
/* ==== 9.68 F08 Git window: neutral ref chips with a type dot, Fetch/Pull ghost, Push the one filled action ==== */
.ref { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); border: 0; border-radius: var(--r-sm);
  background: var(--tile); color: var(--mut); padding: 0 6px; line-height: 17px; }
.ref .ref-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--faint); }
.ref.ref-head { color: var(--fg); font-weight: 600; border-color: transparent; }
.ref.ref-head .ref-dot, .ref.ref-local .ref-dot { background: var(--ok); }
.ref.ref-remote .ref-dot { background: var(--hl-k); }
.ref.ref-tag .ref-dot { background: var(--warn); }
.ref.ref-local, .ref.ref-remote, .ref.ref-tag { color: var(--mut); border-color: transparent; }
.gw-tools { gap: var(--s2, 8px); }
.gw-tools .gw-act { display: inline-flex; align-items: center; color: var(--mut); gap: 4px; }
.gw-tools .gw-act:hover { color: var(--fg); }
.gw-tools .gw-arr { font-size: var(--t-sm); }
.gw-tools .gw-push { font-weight: 600; }
.gw-branch { border: 0; background: var(--tile); border-radius: var(--r-sm); font-size: var(--t-sm); }
/* ==== end F08 ==== */

/* ==== 9.69 F03 session header: one 36 px bar, Beside ▾ (board NxMMD) ==== */
.head.detail.one { gap: 0; padding: 0 var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line-soft, var(--line)); }
.head.detail.one .dh-top { height: 36px; min-height: 36px; gap: var(--s2); }
.head.detail.one .dh-top .title { font-size: var(--t-md); font-weight: 600; min-width: 48px; }
.head.detail.one .dh-chips { display: flex; align-items: center; gap: var(--s2); flex: 0 1 auto; min-width: 0; overflow: hidden; }
.head.detail.one .dh-chips .chip { border: 0; background: none; padding: 0 2px; color: var(--mut); font-size: var(--t-sm); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
@container dh (max-width: 800px) { .head.detail.one .dh-chips { display: none; } }   /* the tabs never clip: the chips go first (isolation: the context panel) */
.head.detail.one .dh-chips .chip.ok { color: var(--mut); }
.head.detail.one .dh-chips .chip.ok::first-letter { color: var(--ok); }
.head.detail.one .dh-chips .chip.bad { color: var(--bad); }
.head.detail.one .dh-chips .chip.link { color: var(--link); }
.head.detail.one .dh-chips .chip.warn { color: var(--warn); }
.head.detail.one .tabs { display: flex; align-self: stretch; gap: 0; flex: 0 1 auto; min-width: 0; margin-left: var(--s3); overflow-x: auto; scrollbar-width: none; }
.head.detail.one button.tab { height: 36px; padding: 0 var(--s3); border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none;
  color: var(--mut); font-size: var(--t-md); white-space: nowrap; }
.head.detail.one button.tab:hover { color: var(--fg); }
.head.detail.one button.tab.on { color: var(--fg); border-bottom-color: var(--fg); }
.head.detail.one .cflow { flex: none; }
@container dh (max-width: 1400px) { .head.detail.one .cflow { display: none; } }   /* one bar: the workflow strip only with room to spare (else the context panel) */
.head.detail.one .layoutctl { display: flex; align-items: center; gap: var(--s1); flex: none; }
.layoutctl button.beside { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--s2); border: 0; border-radius: var(--r-md);
  background: none; color: var(--mut); font-size: var(--t-sm); white-space: nowrap; }
.layoutctl button.beside:hover, .layoutctl button.beside[aria-expanded="true"] { background: var(--tile); color: var(--fg); }
.layoutctl button.beside.on { color: var(--fg); background: var(--tile); }
.layoutctl button.beside .fi { --fic: currentColor; }
.layoutctl button.beside .bcount { min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--tile); color: var(--fg); font: 600 var(--t-xs)/16px var(--mono); }
.layoutctl button.beside .chev { font-size: 9px; color: var(--faint-t); }
.head.detail.one .actions button.icon { width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--mut); }
.head.detail.one .actions button.icon:hover { background: var(--tile); color: var(--fg); }
.head.detail.one .actions .dh-stop { font-size: 10px; }
.layoutmenu.besidemenu { width: 300px; padding: var(--s1); display: flex; flex-direction: column; gap: 0; border-radius: var(--r-lg); }
.besidemenu .bitem { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 6px var(--s2); border: 0; border-radius: var(--r-sm);
  background: none; color: var(--fg); font-size: var(--t-md); text-align: left; }
.besidemenu .bitem:hover:not(:disabled), .besidemenu .bitem:focus-visible { background: var(--tile); outline: none; }
.besidemenu .bitem:disabled { color: var(--faint-t); }
.besidemenu .bcheck { width: 12px; flex: none; color: var(--link); }
.besidemenu .bitem kbd { color: var(--faint-t); font-size: var(--t-xs); background: none; border: 0; }
.besidemenu .lsec { margin: var(--s2) var(--s2) var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); }
.besidemenu .lgrid { padding: 0 var(--s1) var(--s1); }
.besidemenu .lgrid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.besidemenu .lcard { border: 1px solid transparent; padding: 4px; gap: 3px; align-items: center; }
.besidemenu .lthumb { width: 40px; height: 26px; }
.besidemenu .lthumb .lcell { background: var(--tile); border-color: var(--line); }
.besidemenu .lcard.on { background: none; border-color: transparent; }
.besidemenu .lcard.on .lthumb { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 3px; }
.besidemenu .lcard.on .lthumb .lcell { background: var(--mut); border-color: var(--mut); }
.besidemenu .lcard.on .llabel { color: var(--fg); }
.besidemenu .llabel { font-size: var(--t-xs); color: var(--mut); white-space: nowrap; }
.besidemenu .lfoot { padding: var(--s1); border-top: 1px solid var(--line); }
/* a narrow detail (the one bar needs ~670 px inside the padding; 1100 px with the queue and the panel open is ~420 px): the tabs take a second row of their own
   instead of wrapping under the fixed 36 px bar over the terminal */
@container dh (max-width: 670px) {
  .head.detail.one .dh-top { height: auto; flex-wrap: wrap; row-gap: 0; }
  .head.detail.one .dh-top .tabs { order: 10; flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
}
/* ==== end F03 ==== */
/* ==== 9.70 F04 terminal without a card: the whole area under the bar, 12 px inside; the path menu (board NxMMD) ==== */
#main > .body:not(.grid):has(> .term:not(.hidden):not(.slot)) { padding: 0; background: var(--well); }
#main > .body:not(.grid) > .term:not(.slot) { border-radius: 0; padding: 12px 16px; }
.cmenu.pathmenu { min-width: 220px; }
.cmenu.pathmenu kbd { color: var(--faint-t); }
/* ==== end F04 ==== */
/* ==== 9.71 F13 context panel: quiet section heads, the value on the right, unused sections in one line (board CgvOq) ==== */
#inspector .sec-tg::before { display: none; }
#inspector .sec-tg { padding-left: var(--s1); }
#inspector .sec-t { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--faint-t); }
#inspector .sec-tg:hover .sec-t, #inspector .sec.open .sec-t { color: var(--mut); }
#inspector .sec-s { margin-left: auto; text-align: right; }
#inspector .sec.git .sec-s, #inspector .sec[data-k="issue"] .sec-s { margin-left: 0; text-align: left; }
#inspector .sec-b { padding-left: var(--s1); }
#inspector .sec.unused { display: none; }
#inspector .notinuse { margin: 0; padding: var(--s2) var(--s3) var(--s2) var(--s2); border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: var(--t-sm); color: var(--faint-t); }
#inspector .notinuse button.link { font-size: inherit; padding: 0; }
/* ==== end F13 ==== */

/* ==== 9.72 F15 Inbox: a row = one thing (Pencil O43Gbx) ==== */
/* header: the filter pills, then time · ↻ · ⋯ (Mark all as read, Automation…); search · project · GitLab/GitHub under it */
.inbox .ibx-head { gap: 6px; }
.inbox .ibx-head .ibx-chips { gap: 2px; }
.inbox button.pill { border-color: transparent; background: transparent; color: var(--mut); }
.inbox button.pill.on { background: var(--tile); color: var(--fg); }
.inbox button.pill .n, .inbox button.pill.on .n { color: var(--faint-t); font-size: var(--t-xs); }
.inbox button.ibx-hmore.on { color: var(--ok); }
.inbox .ibx-tools { margin: 8px 0 6px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.inbox .ibx-sbox { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--well); border-radius: var(--r-md);
  padding: 0 8px; border: 1px solid transparent; }
.inbox .ibx-sbox:focus-within { border-color: var(--line); }
.inbox .ibx-sglyph { color: var(--faint-t); font-size: var(--t-sm); }
.inbox .ibx-sbox input.ibx-search { flex: 1; max-width: none; border: 0; background: transparent; padding: 5px 0; font-size: var(--t-sm); outline: none; }
.inbox .ibx-sbox kbd { flex: none; }
.inbox .ibx-proj { font-size: var(--t-sm); border-radius: var(--r-md); padding: 4px 6px; }
.inbox .ibx-forge { border: 0; background: var(--well); border-radius: var(--r-md); }
.inbox .ibx-forge button.pill { border-radius: var(--r-sm); }
/* groups: NEW · 18 as a section heading; the caret stays (folding) but quiet */
.inbox button.ibx-ghead.sec-h, .inbox .g-new > button.ibx-ghead.sec-h { font-size: var(--t-xs); color: var(--faint-t); padding: 10px 2px 4px; letter-spacing: .04em; }
.inbox button.ibx-ghead.sec-h:hover { color: var(--fg); }
.inbox button.ibx-ghead.sec-h .n { color: inherit; }
.inbox button.ibx-ghead.sec-h .caret { opacity: 0; }
.inbox button.ibx-ghead.sec-h:hover .caret, .inbox button.ibx-ghead.sec-h:focus-visible .caret, .inbox button.ibx-ghead.sec-h[aria-expanded="false"] .caret { opacity: 1; }
/* rows: no frames, hover = tile; new = bold title (no orange dot); actions over the age on hover / focus */
.inbox .irow { position: relative; border: 0; border-radius: var(--r-md); padding: 6px 8px 6px 4px; }
.inbox .irow + .irow { border: 0; }
.inbox .irow:hover { background: var(--tile); }
.inbox .irow[aria-expanded="true"] { background: var(--tile); margin: 2px 0; }
.inbox .iglyph { font-size: var(--t-xs); color: var(--faint); }
.inbox .irow.fresh .iglyph { color: var(--warn); font-size: 8px; }
.inbox .ititle { font-weight: 400; }
.inbox .irow.fresh .ititle { font-weight: 600; }
.inbox .iref { color: var(--faint-t); }
.inbox .irow-l2 { gap: 5px; font-size: var(--t-sm); color: var(--mut); line-height: 18px; }
.inbox .iproj { background: none; padding: 0; font-size: var(--t-sm); color: var(--mut); max-width: 22ch; border-radius: 0; }
.inbox .isep { color: var(--faint); }
.inbox .ireason { color: var(--mut); }
.inbox .imore { color: var(--faint-t); cursor: help; }
.inbox .inotes { color: var(--warn); }
.inbox .ibx-reason { font-size: var(--t-xs); border-radius: var(--r-sm); border-color: transparent; }
.inbox .ibx-reason.r-bad::before { content: "✕ "; }
.inbox .ibx-due { font-size: var(--t-xs); border-radius: var(--r-sm); }
.inbox button.ibx-sess { font-size: var(--t-xs); border-radius: var(--r-lg); background: transparent; border: 1px solid var(--line); color: var(--mut); }
.inbox .irow-act { position: absolute; right: 6px; top: 5px; padding-left: 12px;
  background: linear-gradient(to right, transparent, var(--tile) 12px); }
.inbox .irow .iage { padding-right: 2px; }
.inbox .irow:hover .iage, .inbox .irow:focus-within .iage, .inbox .irow[aria-expanded="true"] .iage { visibility: hidden; }
.inbox .irow button.ibx-main { background: var(--tilebtn); color: var(--fg); font-weight: 400; }
.inbox .irow button.ibx-main.link { background: none; color: var(--mut); padding: 1px 6px; }
.inbox .irow button.ibx-main.link:hover { color: var(--fg); text-decoration: underline; }
.ibx-co-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.ibx-co-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md); background: var(--well); cursor: pointer; }
.ibx-co-path { font: var(--t-sm)/1.4 "JetBrains Mono", "SF Mono", Menlo, monospace; overflow-wrap: anywhere; }
@container (max-width: 560px) {
  .inbox .irow-act { position: static; background: none; padding-left: 26px; }
  .inbox .irow .iage { visibility: visible; }
}
/* ==== end F15 ==== */
/* ==== 9.74 F16 Production: freshness and a quiet list (Pencil luh8W) ==== */
/* the last check is older than 24 h: an amber bar with the date, Check now its primary action */
.prod .prod-stale { display: flex; align-items: center; gap: var(--s2); margin: 4px 0 8px; padding: 8px 8px 8px 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn) 9%, var(--well)); font-size: var(--t-md); font-weight: 400; }
.prod .prod-stale.hidden { display: none; }
.prod .prod-stale-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.prod .prod-stale-t { flex: 1; min-width: 0; }
/* sections: NEW · 37 as a heading, the mapping suggestions a link at its right */
.prod .ibx-ghead.sec-h { display: flex; align-items: center; gap: 4px; min-height: 0; padding: 10px 2px 4px; font-size: var(--t-xs); color: var(--faint-t); }
.prod .ibx-ghead.sec-h .n { color: inherit; background: none; padding: 0; font-size: inherit; }
.prod summary.ibx-ghead.sec-h { cursor: pointer; }
.prod button.prod-sugg { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--t-sm); color: var(--link); }
/* a row: severity dot · title, then project · count · place; the count at the right, the actions over it on hover */
.prod .irow-main { grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; }
.prod .prod-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); justify-self: center; }
.prod .irow.fresh .prod-dot.k-error, .prod .irow.fresh .prod-dot.k-alert { background: var(--bad); }
.prod .irow.fresh .prod-dot.k-rate { background: var(--warn); }
.prod .irow.muted .prod-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--faint); }
.prod .irow.fresh .ititle { font-weight: 400; color: var(--fg); }
.prod .irow:not(.fresh) .ititle { color: var(--mut); }
.prod .irow-l2 { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: var(--t-sm); color: var(--faint-t); }
.prod .irow-l2 > span + span::before { content: "·"; margin-right: 6px; color: var(--faint); }
.prod .prod-place { font: var(--t-sm)/18px "JetBrains Mono", "SF Mono", Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.prod .prod-kind.k-alert { color: var(--bad); }
.prod .prod-kind.k-rate { color: var(--warn); }
.prod .prod-n { font-size: var(--t-sm); color: var(--mut); font-variant-numeric: tabular-nums; padding-right: 2px; }
.prod .irow:hover .prod-n, .prod .irow:focus-within .prod-n { visibility: hidden; }
.prod .irow-act { top: 50%; transform: translateY(-50%); }
.prod .irow:has([aria-expanded="true"]) { background: var(--tile); }   /* Mute ▾ open: the row keeps its actions */
.prod .irow:has([aria-expanded="true"]) .row-actions { opacity: 1; }
.prod .irow:has([aria-expanded="true"]) .prod-n { visibility: hidden; }
.prod .irow-act a.prod-graf { padding: 2px 8px; color: var(--mut); text-decoration: none; }
.prod .irow-act a.prod-graf:hover { color: var(--fg); }
@container (max-width: 560px) {
  .prod .irow-act { transform: none; }
  .prod .irow .prod-n { visibility: visible; }
}
/* ==== end F16 ==== */
/* ==== 9.75 F20 Usage / Audit / History: read like a person (Pencil T9JsSL) ==== */
/* audit + history: one row per action - time · icon · sentence (×n) · project; the raw records unfold under it */
.audit .arows { display: flex; flex-direction: column; }
.audit .arow { display: grid; grid-template-columns: auto 16px minmax(0, 1fr) auto; align-items: baseline; gap: var(--s2); padding: 5px 8px;
  border-radius: var(--r-md); font-size: var(--t-md); cursor: pointer; }
.audit .arow:hover, .audit .arow.open { background: var(--tile); }
.audit .arow:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.audit .atime { min-width: 11ch; font-size: var(--t-sm); color: var(--faint-t); white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit .aicon { text-align: center; color: var(--faint-t); font-size: var(--t-sm); }
.audit .atext { min-width: 0; overflow-wrap: anywhere; color: var(--fg); }
.audit .arep { margin-left: var(--s2); font-size: var(--t-xs); color: var(--mut); background: var(--tilebtn); border-radius: var(--r-sm); padding: 0 5px; white-space: nowrap; }
.audit .aproj { font-size: var(--t-sm); color: var(--faint-t); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; justify-self: end; }
.audit button.link.aproj { color: var(--faint-t); overflow-wrap: normal; }
.audit button.link.aproj:hover { color: var(--fg); }
.audit .arow.risk-push .aicon { color: var(--warn); }
.audit .arow.risk-prod .aicon { color: var(--bad); }
.audit .arow.declined .atext { color: var(--mut); }
.audit .arow.internal .atext { color: var(--mut); }
.audit .araw { margin: 0 8px 6px 24px; padding: 6px 10px; border-radius: var(--r-md); background: var(--page); font-size: var(--t-sm); overflow-wrap: anywhere; }
.audit .araw > div + div { margin-top: 2px; }
/* usage: USAGE · 30 DAYS with the summary; legend + cache switch; a day = day · stacked bar · total; no-use runs folded
   (ZBYTEK N15: the full card width like the project table below - a 760 px cap left half the card empty) */
.usage .usec-h { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s1); }
.usage .usec-h button { padding: 2px 6px; }
.usage .usec-h h3.sec-h { margin: 0; min-height: 0; font-size: var(--t-xs); }
.usage .usum { margin-left: auto; font-size: var(--t-sm); color: var(--mut); }
.usage .ulegrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.usage .ulegrow label { margin-left: auto; color: var(--mut); }
.usage .udays { display: flex; flex-direction: column; gap: 2px; }
.usage .uday { display: grid; grid-template-columns: 64px minmax(0, 1fr) 72px; align-items: center; gap: var(--s3); padding: 3px 0; font-size: var(--t-md); }
.usage .uday-d { color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage .uday-n { text-align: right; font-variant-numeric: tabular-nums; }
.usage .uday .ubar { height: 8px; border-radius: var(--r-sm); }
.usage .ugap { font-size: var(--t-sm); color: var(--faint-t); padding: 3px 0; }
/* ==== end F20 ==== */
/* ==== 9.76 F21 Global agent: start from what waits (Pencil f5SZB2) ==== */
.feed-started { margin-bottom: var(--s2); }
.feed-started:empty { display: none; }
.feed .sec-h { min-height: 0; margin: var(--s2) 2px var(--s1); }
.feed-st { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s2); align-items: baseline; padding: 4px 2px; font-size: var(--t-md); }
.feed-st-ico { text-align: center; font-size: var(--t-sm); color: var(--faint-t); }
.feed-st.t-ok .feed-st-ico { color: var(--ok); }
.feed-st.t-warn .feed-st-ico { color: var(--warn); }
.feed-st.t-bad .feed-st-ico { color: var(--bad); }
.feed-st-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-st-link { font-size: var(--t-sm); white-space: nowrap; overflow-wrap: normal; }
.feed-sugg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); margin: var(--s2) 2px; }
.feed-sugg button.feed-sugg-b { background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px 10px; font-size: var(--t-md); color: var(--fg); text-align: left; }
.feed-sugg button.feed-sugg-b:hover { background: var(--tile); }
.feed-cardline { display: flex; gap: var(--s2); align-items: baseline; margin: 6px 2px; font-size: var(--t-md); color: var(--mut); }
.feed-cardline .feed-msg-who { margin: 0; font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; }
.feed-compose .feed-agent { margin: 0 0 var(--s2); }
.feed-compose .feed-agent.hidden { display: none; }
.feed-compose .feed-input { border-radius: var(--r-md); font-size: var(--t-md); }
.feed-keys { display: flex; align-items: center; gap: 4px; margin-top: var(--s2); font-size: var(--t-sm); }
.feed-keys kbd { font-size: var(--t-xs); }
.feed-keys kbd + kbd { margin-left: 0; }
.feed-keys button.feed-send { margin: 0; }
/* the drawer head: "Agent ● ready" - the dot green while it runs (main.ts drawDrawerState) */
.drawer-head .dr-state { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); font-size: var(--t-sm); }
.drawer-head .dr-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim-dot); }
.drawer-head .dr-state.live::before { background: var(--ok-dot); }
/* ==== end F21 ==== */
/* ==== 9.77 F05 Conversation: a readable transcript (Pencil LnB6W) ==== */
.convo .chead { gap: var(--s2); }
.convo .chead input { max-width: 360px; font-size: var(--t-md); }
.convo .chead .csearch { font-size: var(--t-lg); }
.convo .cusage { margin-left: auto; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo .turn { background: none; border-left: 0; padding: 4px 0; margin: 6px 0; border-radius: var(--r-md); }
.convo .turn .who { font-size: var(--t-xs); }
.convo .turn.user .tmd { display: inline-block; max-width: 100%; background: var(--card); border-radius: var(--r-md); padding: 6px 12px; }
.convo .turn.tonly { margin: 0; padding: 0; }
.convo .turn pre { font-size: var(--t-md); }
.convo .tmd .mdv { font-size: var(--t-md); max-width: 820px; }
.convo .tmd .mdv h1, .convo .tmd .mdv h2 { border-bottom: 0; font-size: var(--t-lg); }
.convo .tmd .mdv h3 { font-size: var(--t-md); }
.convo .tmd .mdv code { font-size: var(--t-sm); border-radius: var(--r-sm); }
.convo .tmd .mdv button.link { font: inherit; display: inline; padding: 0; }
.convo .trow { max-width: 820px; display: grid; grid-template-columns: 12px auto minmax(0, 1fr) auto; gap: var(--s2); align-items: baseline;
  padding: 2px var(--s2); margin: 1px 0; border-radius: var(--r-sm); color: var(--mut); font-size: var(--t-sm); cursor: pointer; }
.convo .trow:hover, .convo .trow:focus-visible { background: var(--card); }
.convo .trow .tcaret { color: var(--faint); font-size: var(--t-xs); }
.convo .trow .tname { font-family: var(--mono); color: var(--fg); opacity: .8; }
.convo .trow .targ { font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo .trow .tmeta { font-size: var(--t-xs); white-space: nowrap; }
.convo .trow.failed .tmeta { color: var(--bad); }
.convo .trow.open .targ { white-space: pre-wrap; overflow-wrap: anywhere; }
.composer .cqueue { display: flex; flex-direction: column; gap: var(--s1); }
.composer.compact:has(.cqueue:not(.hidden)) { grid-template-areas: "queue queue" "target size" "text text" "keys send"; }
.composer.compact .cqueue { grid-area: queue; }
.composer .cq-card { display: flex; align-items: center; gap: var(--s2); padding: 4px var(--s2); border-radius: var(--r-md);
  background: var(--well); font-size: var(--t-sm); }
.composer .cq-label { color: var(--mut); font-size: var(--t-xs); }
.composer .cq-card.failed .cq-label { color: var(--warn); }
.composer .cq-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer .cq-card button { margin: 0; }
/* ==== end F05 ==== */
/* ==== 9.78 F14 grid: a bar without buttons until hover, "+ Add pane" as a popover (board D7FbY) ==== */
.body.grid .tlabel { min-height: 28px; padding: 0 0 6px; font-size: var(--t-sm); }
.body.grid .tlabel .pane-tools { opacity: 0; transition: opacity .12s; }
.body.grid .term:hover .tlabel .pane-tools, .body.grid .term:focus-within .tlabel .pane-tools { opacity: 1; }
@media (hover: none) { .body.grid .tlabel .pane-tools { opacity: 1; } }
.body.grid .tlabel .pane-tools button.mini { background: none; color: var(--mut); padding: 0 5px; }
.body.grid .tlabel .pane-tools button.mini:hover { color: var(--fg); background: var(--tile); }
/* the active pane: a 1 px frame in its state's colour */
.body.grid .term.focused:has(.tlabel .dot.st-waiting, .tlabel .dot.st-attention, .tlabel .dot.st-trust) { border-color: var(--warn); }
.body.grid .term.focused:has(.tlabel .dot.st-error, .tlabel .dot.st-blocked) { border-color: var(--bad); }
.term.slot { align-items: center; justify-content: center; gap: 4px; padding: 12px; position: relative;
  border: 1px solid var(--line-soft, var(--line)) !important; border-radius: var(--r-md); }
.term.slot .slot-add { color: var(--mut); font-size: var(--t-md); }
.term.slot .slot-add:hover { color: var(--fg); }
.term.slot .slot-n { font-size: var(--t-xs); }
.term.slot .slot-x { position: absolute; top: 6px; right: 6px; color: var(--faint-t, var(--mut)); }
.cmenu .msearch .mph { color: var(--faint-t, var(--mut)); font-size: var(--t-sm); }
.cmenu.addpane { min-width: 300px; max-width: min(420px, 90vw); }
.cmenu.addpane button .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmenu.addpane .ap-ic { font-family: var(--mono); font-size: var(--t-xs); color: var(--mut); }
/* a narrow pane: the tools stay in the bar (hover only - a second row would sit empty), the name gives way */
@container gt (max-width: 360px) {
  .body.grid .term:not(.hostpane) .tlabel { flex-wrap: nowrap; }
  .body.grid .term:not(.hostpane) .tlabel .pane-tools { flex-basis: auto; }
}
/* ==== end F14 ==== */
/* ==== 9.79 F18 palette: Sessions · Actions · Go to, the key as a chip, ⇧↵ beside (board IfXvH) ==== */
.palette .pitem { align-items: center; justify-content: flex-start; min-height: 30px; padding: 4px 10px; border-radius: var(--r-md); font-size: var(--t-md); }
.palette .pitem.active { border-color: transparent; background: var(--tile); }
.palette .pitem > .name { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.palette .pitem > .name > .dot { flex: none; align-self: center; }
.palette .pitem > .name > .plabel { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.palette .pitem .pdesc { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--faint-t, var(--mut)); font-size: var(--t-sm); }
.palette .pitem .pgrp { flex: none; color: var(--faint-t, var(--mut)); font-size: var(--t-xs); }
.palette .pitem .pkey { flex: none; font-size: var(--t-xs); }
.palette .plist .psec { font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint-t, var(--faint)); padding: 10px 10px 4px; }
.palette .pal-foot { display: flex; gap: var(--s3, 12px); padding: 8px 4px 0; border-top: 1px solid var(--line-soft, var(--line)); color: var(--faint-t, var(--mut)); font-size: var(--t-xs); }
.palette .pal-foot kbd { font-size: var(--t-xs); }
/* ==== end F18 ==== */
/* ==== 9.80 F28 session menu with icons, alerts in groups with the notification state (board y42CuE) ==== */
.cmenu .micon { flex: none; width: 14px; margin-right: -8px; text-align: center; font-size: var(--t-sm); color: var(--mut); font-family: var(--mono); }
.cmenu button.danger .micon { color: var(--bad); }
.cmenu button[aria-disabled="true"] .micon { color: var(--faint); }
.nt-head b { font-size: var(--t-md); }
.nt-head button.link { font-size: var(--t-sm); }
.nt-sec { padding: 10px 12px 4px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint-t, var(--faint)); }
.nt-item { align-items: center; padding: 6px 12px; }
.nt-item.unread { background: none; }
.nt-item .nt-dot { align-self: flex-start; margin-top: 6px; background: var(--ok-dot, var(--ok)); }
.nt-item.act .nt-dot, .nt-item.unread .nt-dot { background: var(--warn); }
.nt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nt-body .nt-text { font-size: var(--t-md); }
.nt-body .nt-time { font: var(--t-xs)/1.3 system-ui, sans-serif; color: var(--faint-t, var(--faint)); }
.nt-foot { justify-content: flex-start; align-items: center; gap: 8px; font-size: var(--t-sm); }
.nt-perm { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); }
.nt-perm::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dim-dot, var(--faint)); }
.nt-perm.ok::before { background: var(--ok-dot, var(--ok)); }
.nt-perm.warn { color: var(--warn); }
.nt-perm.warn::before { background: var(--warn); }
.nt-foot .nt-keep { font-size: var(--t-xs); color: var(--faint-t, var(--faint)); }
/* ==== end F28 ==== */

/* ==== F02 Start work: compact launcher, using Piper's shared theme and controls ==== */
.modal:has(.workdlg) { width: min(680px, calc(100vw - 32px)); height: auto; max-height: calc(100dvh - 32px); padding: 0; gap: 0; overflow: hidden; }
.modal:has(.workdlg) > h2 { display: none; }
.modal:has(.wk-resume) { height: min(680px, calc(100dvh - 32px)); }
.workdlg { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
/* F02c (9.143, board Kd1T9): the kinds are tabs like the session's Terminal · Conversation row, their keys beside them */
.wk-tabs { display: flex; align-items: stretch; gap: 20px; height: 46px; padding: 0 12px 0 20px; flex: none; border-bottom: 1px solid var(--line); }
.wk-kind { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--mut); font-size: var(--t-md, 13px); white-space: nowrap; }
.wk-kind:not(:disabled):hover { color: var(--fg); background: transparent; }
.wk-kind.on { color: var(--fg); font-weight: 600; border-bottom-color: var(--fg); background: transparent; }
.wk-kind .wk-key { font-weight: 400; }
.wk-heading { margin: 0; align-self: center; font-size: var(--t-md, 13px); font-weight: 600; }
.wk-close { width: 28px; height: 28px; flex: none; align-self: center; margin-left: auto; color: var(--mut); background: transparent; }
.wk-body { display: flex; min-height: 0; min-width: 0; flex: 1; }
.wk-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; overflow: hidden; }
.wk-pane.wk-resume { padding: 0 24px 20px; }
.wk-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 20px 20px; }
.wk-form > * { flex-shrink: 0; }
/* section labels = the app's 11 px capitals (WORKFLOW, COMMIT) */
.wk-label { display: block; font-size: var(--t-xs, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--faint-t); }
.wk-project-row { display: flex; gap: 12px; align-items: flex-start; }
.wk-project-field { position: relative; min-width: 0; flex: 1; }
.wk-project-field > .wk-label, .wk-agent-field > .wk-label { margin-bottom: 6px; }
.wk-project { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); background: var(--well); text-align: left; }
.wk-project[aria-expanded=true], .wk-project:focus-visible { outline: none; border-color: var(--mut); }
.wk-project > .fi { width: 14px; height: 14px; flex: none; --fic: var(--mut); }
.wk-project > .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-project-pop { position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md, 7px); box-shadow: 0 8px 24px #0004; }
.wk-project-pop .wk-search > input[type=search] { height: 30px; }
.wk-project-pop > .plist { max-height: 198px; margin-top: 4px; }
.wk-project-pop .pitem { align-items: center; gap: 8px; min-height: 30px; padding: 5px 8px; border-radius: var(--r-sm, 5px); }
.wk-project-pop .pitem.active { border-color: transparent; }
.wk-project-pop .pitem.cursor { background: var(--tile); }
.wk-project-pop .pitem > .fi { width: 12px; height: 12px; flex: none; visibility: hidden; }
.wk-project-pop .pitem[aria-selected=true] > .fi { visibility: visible; }
.wk-project-pop .pitem > .name { flex: 1; }
.wk-project-pop .pitem > .mut { font-size: var(--t-xs, 11px); color: var(--faint-t); }
.wk-project-pop > .wk-pop-keys { margin: 0; padding: 6px 8px 2px; font-size: var(--t-xs, 11px); color: var(--faint-t); }
.wk-project-pop .pitem > .mut { flex: none !important; }
.wk-project-pop p { padding: 6px; margin: 0; }
.wk-from-field { min-width: 0; }
.wk-from-pop { position: fixed; z-index: 30; top: auto; right: auto; }
.wk-from-pop > .plist { overflow-y: auto; }
.wk-busy { flex: 1; display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-sm, 12px); color: var(--mut); }
.wk-busy > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-busy > .spinner { flex: none; }
.wk-busy:not(.hidden) + .grow { display: none; }
.wk-agent-field { flex: 0 0 176px; }
/* one segment style in the dialog: Settings › Features presets (.fm-seg) - a well, the chosen one a tile */
.wk-agent, .wk-runtime, .where .wseg { display: flex; height: 32px; padding: 2px; gap: 2px; border: 0; border-radius: var(--r-md, 6px); background: var(--well); }
.wk-agent button, .wk-runtime button { flex: 1; border: 0; border-radius: var(--r-sm, 4px); background: transparent; color: var(--mut); padding: 0 12px; }
.wk-agent button:disabled, .wk-runtime button:disabled { color: var(--faint-t); cursor: default; }
.wk-agent button.on, .wk-runtime button.on { background: var(--tile); color: var(--fg); }
.wk-agent button.on:disabled, .wk-runtime button.on:disabled { color: var(--mut); }
.wk-task { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wk-tasklabel { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 22px; }
.wk-tasklabel > .wk-issuelink { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px; margin-right: -6px; background: transparent; color: var(--mut); font-size: var(--t-sm, 12px); }
.wk-tasklabel > .wk-issuelink:not(:disabled):hover { color: var(--fg); background: var(--tile); }
.wk-tasklabel > .wk-issuelink:disabled { color: var(--faint-t); cursor: default; }
.workdlg textarea:focus, .workdlg input[type=search]:focus, .workdlg input[type=text]:focus { outline: none; border-color: var(--mut); }
.wk-task textarea { display: block; width: 100%; min-height: 96px; height: 96px; max-height: 260px; resize: vertical; padding: 9px 11px; line-height: 1.55; }
.wk-task textarea::placeholder { color: var(--faint-t); }
.wk-ref:not(.hidden) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-refchip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border: 0; border-radius: var(--r-sm, 5px); background: var(--tile); font-size: var(--t-sm, 12px); }
.wk-refchip b { color: var(--link); margin-right: 2px; font-weight: 600; }
.wk-ref > .wk-unref { color: var(--mut); }
.wk-ref > .link { flex: none; }
.where:not(.hidden) { display: flex; flex-direction: column; gap: 6px; }
.where .wrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.where .wcard { display: flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--r-sm, 4px); cursor: pointer; color: var(--mut); white-space: nowrap; }
.where .wcard input { position: absolute; opacity: 0; pointer-events: none; }
.where .wcard.on { background: var(--tile); color: var(--fg); }
.where .wcard.off, .where.off .wcard { color: var(--faint-t); cursor: default; }
.where.off .wcard.on { color: var(--mut); }
.where .wcard:has(input:focus-visible) { outline: 2px solid var(--link); }
.where .wbase { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint-t); font-size: var(--t-sm, 12px); }
.where:not(.off) .wbase { font-family: var(--mono); font-size: var(--t-xs, 11px); }
.where .wbase > .fi { width: 12px; height: 12px; flex: none; --fic: var(--faint-t); }
.where .wextra { display: flex; flex-direction: column; gap: 5px; }
.where .wbase > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--mut); }
.where .wnewf:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.where .wnf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.where .wnf > input, .where .wnf > select { height: 32px; min-width: 0; }
.where .wnew { overflow-wrap: anywhere; }
.where .wextra:not(:has(> :not(.hidden))) { display: none; }
.wk-form > .startopts { margin: 0; flex: none; }
.wk-form > .startopts > summary { cursor: default; padding: 0; margin: 0 0 8px; }
.wk-form > .startopts > summary::before { display: none; }
.startopts > .so-body { gap: 8px; margin: 0; }
.so-choices { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.startopts .so-choice { white-space: nowrap; }
.startopts .so-choice:has(input:disabled), .so-remember:has(input:disabled) { color: var(--faint-t); cursor: default; }
.so-remember { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); font-size: var(--t-sm, 12px); cursor: pointer; white-space: nowrap; }
.startopts p { margin: 0; }
.wk-foot { flex: none; margin: 0 !important; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--card); align-items: center; gap: 8px; }
.wk-foot > button { min-height: 32px; }
.wk-start { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wk-start kbd { font-size: var(--t-xs); padding: 0 4px; border-radius: var(--r-sm); background: transparent; color: inherit; }
.wk-task > .issues { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--line); background: var(--well); border-radius: var(--r-md, 6px); }
.wk-task > .issues > .plist { height: 178px; max-height: 178px; }
.wk-task > .issues > p { margin: 0; }
.wk-issue-row { display: flex; gap: 4px; min-width: 0; }
.wk-task > .issues > input[type=search] { height: 30px; background: var(--card); }
.wk-task > .issues > p { padding: 4px 8px 2px; font-size: var(--t-xs, 11px); color: var(--faint-t); }
.wk-issue-row { position: relative; border-radius: var(--r-sm, 5px); }
.wk-issue-row > .pitem { flex: 1; min-width: 0; min-height: 32px; align-items: center; gap: 8px; border: 0; }
.wk-issue-row > .pitem > .wk-iid { flex: none; font-family: var(--mono); font-size: var(--t-sm, 12px); line-height: 1; color: var(--mut); }
.wk-issue-row > .pitem > .name { flex: 1; }
.wk-issue-row > .pitem > .mut { font-size: var(--t-xs, 11px); color: var(--faint-t); }
.wk-issue-row:hover, .wk-issue-row:has(.pitem.cursor) { background: var(--tile); }
.wk-issue-row > .pitem:hover, .wk-issue-row > .pitem.cursor { background: transparent; }
/* the row action shows on the row it belongs to (hover, the keyboard cursor, focus) */
.wk-issue-preview { flex: none; align-self: center; width: 26px; height: 26px; color: var(--mut); background: transparent; opacity: 0; }
.wk-issue-row:hover > .wk-issue-preview, .wk-issue-row:has(.pitem.cursor) > .wk-issue-preview, .wk-issue-preview:focus-visible { opacity: 1; }
@media (max-width: 560px) {
  .modal:has(.workdlg) { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .wk-tabs { padding: 0 8px 0 16px; gap: 14px; }
  .wk-kind .wk-key { display: none; }
  .wk-form { padding: 16px 16px 18px; gap: 16px; }
  .wk-project-row { flex-direction: column; gap: 12px; }
  .wk-project-field, .wk-agent-field { width: 100%; flex: auto; }
  .wk-project-pop .pitem, .wk-project-pop .wk-search > input[type=search], .wk-agent, .wk-runtime, .wk-project, .where .wseg { min-height: 40px; }
  .where .wrow { flex-direction: column; align-items: stretch; gap: 6px; }
  .where .wrow > .grow { display: none; }
  .where .wnewf:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
  .where .wcard { flex: 1; padding: 4px 6px; line-height: 1.3; text-align: center; white-space: normal; }
  .startopts .so-choice { min-height: 32px; }
  .so-choices { gap: 0 16px; }
  .wk-foot { padding: 12px 16px; gap: 8px; flex-wrap: wrap; }
  .wk-busy { flex: 1 0 100%; }
  .wk-busy > span:last-child { white-space: normal; }
  .wk-foot > button { min-height: 40px; }
  .wk-start kbd, .wk-tasklabel > .wk-issuelink kbd { display: none; }
  .so-remember .so-rem-long { display: none; }
  .wk-start { white-space: nowrap; }
}
/* ==== end F02 ==== */
/* Shared level choices used by Servers. */
.sc-levels { display: flex; flex-direction: column; gap: var(--s2, 6px); padding: var(--s3, 10px) var(--s4, 14px) var(--s4, 14px); }
.sc-levels .sc-level { display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%; background: transparent;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; font-size: var(--t-md); }
.sc-levels .sc-level:not(:disabled):hover { background: var(--tile); }
.sc-levels .sc-level.on { border-color: color-mix(in srgb, var(--fg) 55%, var(--line)); background: var(--tile); }
.sc-radio { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--mut); }
.sc-level.on .sc-radio { border: 4px solid var(--fg); }
.sc-level-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-level-body b { font-weight: 600; }
.sc-level-body .mut { font-size: var(--t-sm); }
.settings .st-navi .sc-navn { background: transparent; color: var(--faint-t, var(--faint)); font-size: var(--t-xs); padding: 0; border: 0; }
/* ==== end F26 ==== */
/* ==== 9.84 F19 Settings: modules as rows, the preset as a segment, Save only in a sticky bar while unsaved (board Fpd8w) ==== */
.settings .st-gtitle { color: var(--faint-t, var(--faint)); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; }
.settings .st-navi { border-radius: var(--r-md); }
.settings .st-navi.dirty .st-dot { margin-left: 6px; }
.settings .st-navi:not(:has(.st-cnt)).dirty .st-dot { margin-left: auto; }
/* the section's actions and the last note: in the flow; Save / Revert: their own sticky bar */
.settings .st-bar { position: static; margin-top: 12px; }
.settings .st-savebar { position: sticky; bottom: 0; margin-top: auto; z-index: 2; display: flex; align-items: center; gap: var(--s2, 8px);
  padding: 10px 0 12px; background: var(--card); border-top: 1px solid var(--line); font-size: var(--t-md); }
.settings .st-savebar[hidden] { display: none; }
.settings .st-savebar .grow { flex: 1; }
.settings .st-sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
body.pending-open .settings .st-savebar { padding-right: calc(min(460px, 100vw - 32px) + 8px); }
/* Features: the preset segment, what it amounts to, a row per module */
.st-feat { display: flex; flex-direction: column; gap: var(--s3, 10px); max-width: 860px; margin-top: 4px; }
.fm-seg { display: inline-flex; align-self: flex-start; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--well); }
.fm-seg > button, .fm-seg > .fm-custom { background: transparent; border: 0; border-radius: var(--r-sm); padding: 4px 12px; color: var(--mut); font-size: var(--t-md); }
.fm-seg > .on { background: var(--tile); color: var(--fg); }
.fm-seg > .fm-custom:not(.on) { color: var(--faint-t, var(--faint)); }
.fm-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.fm-chip { padding: 1px 7px; border-radius: var(--r-sm); background: var(--tile); color: var(--mut); font-size: var(--t-xs); }
.fm-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.fm-row { border-bottom: 1px solid var(--line); }
.fm-head { display: flex; align-items: center; gap: 12px; padding: 8px 4px; cursor: pointer; border-radius: var(--r-sm); }
.fm-head:hover { background: var(--well); }
.fm-head:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.fm-thumb { flex: none; width: 64px; height: 40px; border-radius: var(--r-sm); overflow: hidden; background: var(--well); border: 1px solid var(--line); }
.fm-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.fm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fm-title { display: flex; align-items: center; gap: 6px; font-size: var(--t-md); }
.fm-title b { font-weight: 600; }
.fm-title .st-badge { margin: 0; }
.fm-row.off .fm-thumb { opacity: .45; }
.fm-row.changed .fm-title b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-left: 6px; vertical-align: middle; }
.fm-big { padding: 0 4px 12px 80px; }
.fm-big img { width: min(560px, 100%); border-radius: var(--r-md); border: 1px solid var(--line); display: block; }
/* ==== end F19 ==== */
/* ==== 9.85 F25 Setup: three steps to the first session - hero tiles, a stepper, blockers on top (board XgGl5) ==== */
/* the welcome is one card: hero (one sentence + three tiles), the stepper, the step, the footer */
.setup .su-wiz { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; max-width: 760px; width: 100%; align-self: center; }
.setup .su-wiz .su-hero { display: block; padding: var(--s5, 20px) var(--s5, 20px) var(--s3, 12px); }
.setup .su-wiz .su-hero h1 { font-size: var(--t-xl); margin: 0 0 2px; }
.setup .su-wiz .su-hero > p { font-size: var(--t-md); margin: 0 0 var(--s3, 12px); }
.setup .su-wiz .su-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2, 8px); flex-direction: unset; }
.setup .su-wiz .su-value { gap: 8px; padding: 10px 12px; background: var(--well); border-color: transparent; border-radius: var(--r-md); }
.setup .su-wiz .su-value-ic { width: 20px; height: 20px; border-radius: 50%; font-size: var(--t-xs); }
.setup .su-stepper { display: flex; gap: var(--s4, 16px); padding: 4px var(--s5, 20px) var(--s3, 12px); border-bottom: 1px solid var(--line); }
.setup .su-step { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 4px 0; color: var(--mut); font-size: var(--t-md); }
.setup .su-step.on { color: var(--fg); }
.setup .su-step-n { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-xs); background: var(--tile); color: var(--mut); }
.setup .su-step.on .su-step-n { background: var(--fg); color: var(--page); }
.setup .su-step.done .su-step-n { background: var(--ok-bg); color: var(--ok); }
.setup .su-wiz-body { display: flex; flex-direction: column; gap: 0; }
.setup .su-wiz-body > section { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: var(--s3, 12px) var(--s5, 20px); }
.setup .su-wiz-body > section.su-check { border-color: var(--line); }
.setup .su-wiz-body > .su-check.su-fail { background: var(--well); }
.setup .su-foot { display: flex; align-items: center; gap: var(--s2, 8px); padding: var(--s3, 12px) var(--s5, 20px); }
.setup .su-foot .grow { flex: 1; }
/* the check: blockers with one action, one folded line for the optional ones, the mount test inside Details */
.setup .su-check .grow { flex: 1; min-width: 0; }
.setup .su-check .su-ready-head b { color: var(--fg); }
.setup .su-blocker { background: transparent; padding: 6px 0; }
.setup .su-blocker .su-mark { background: transparent; color: var(--bad); font-size: var(--t-md); }
.setup .su-row.su-blocker .su-title { color: var(--fg); font-weight: 600; }
.setup .su-fold { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; padding: 4px 0; color: var(--mut); font-size: var(--t-md); }
.setup .su-fold:hover { color: var(--fg); }
.setup .su-fold .su-dot { width: 7px; height: 7px; background: var(--warn); }
.setup .su-chev { width: 12px; color: var(--faint); }
.setup .su-deep { display: flex; align-items: center; gap: var(--s2, 8px); }
.setup .su-wiz .su-image-row .su-image-hint { padding-left: 0; white-space: nowrap; }
.setup .su-image-row > .su-image-hint { padding-left: 0; }
/* step 2: the segment, what it holds, the gallery behind a link */
.setup .su-pick { display: flex; flex-direction: column; gap: var(--s2, 8px); align-items: flex-start; }
.setup .su-pick > p { margin: 0; }
.setup .su-pick .su-sec { align-self: stretch; margin-top: var(--s2, 8px); }
.setup .su-wiz .su-gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.setup .su-wiz .su-first { border: 0; padding: var(--s4, 16px) var(--s5, 20px); }
.setup .su-wiz .su-steps { margin: 0; }
@container (max-width: 720px) { .setup .su-wiz .su-values { grid-template-columns: 1fr; } .setup .su-stepper { flex-wrap: wrap; gap: var(--s2, 8px); } }
/* ==== end F25 ==== */
/* ==== 9.86 F22 Mattermost: the status line with Send test, three decisions, the rest in Advanced (board M0cIvW) ==== */
.mm-form { display: flex; flex-direction: column; max-width: 760px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); margin-top: 4px; }
.mm-form > * { border-bottom: 1px solid var(--line); }
.mm-form > :last-child { border-bottom: 0; }
.mm-status { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s4); font-size: var(--t-md); }
.mm-status .grow { flex: 1; min-width: 0; }
.mm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
.mm-ok .mm-dot { background: var(--ok); }
.mm-bad .mm-dot { background: var(--bad); }
.mm-bad .grow { color: var(--bad); }
.mm-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: var(--s3); padding: 10px var(--s4); }
.mm-label { font-size: var(--t-md); }
.mm-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.mm-ctl .st-secret { flex: 1; min-width: 0; max-width: 420px; display: flex; gap: var(--s1); }
.mm-ctl .st-secret input { flex: 1; min-width: 0; }
.mm-ctl input[type="time"] { width: 96px; }
.mm-ctl .st-err:empty { display: none; }
.mm-ctl .st-err { flex-basis: 100%; }
.mm-check { display: inline-flex; align-items: center; gap: 6px; }
.mm-adv > summary { padding: 10px var(--s4); color: var(--mut); cursor: pointer; font-size: var(--t-md); }
.mm-adv > summary:hover { color: var(--fg); }
.mm-adv[open] { padding-bottom: var(--s2); }
.mm-adv .st-field { padding-left: var(--s4); padding-right: var(--s4); }
@container (max-width: 640px) { .mm-row { grid-template-columns: 1fr; gap: 4px; } }
/* ==== end F22 ==== */
/* ==== 9.87 F23 Review: the diff first - one header row, ⋯, Ask Claude ▾ under the block, one foot (board DNpsw) ==== */
.reviewpane .review-toolbar { flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; }
.reviewpane .review-toolbar h2 { margin: 0 4px 0 0; font-size: var(--t-lg, 15px); white-space: nowrap; }
.reviewpane .review-toolbar select { width: auto; max-width: 210px; border-color: transparent; background: transparent; font-weight: 500; }
.reviewpane .review-toolbar select:hover, .reviewpane .review-toolbar select:focus-visible { border-color: var(--line); }
.reviewpane .review-nav { gap: 4px; padding: 0 0 0 10px; white-space: nowrap; }
.reviewpane .review-at { color: var(--mut); font-size: var(--t-sm, 12px); margin-right: 2px; }
.reviewpane .review-key { padding: 0; border: 0; background: transparent; }
.reviewpane .review-key kbd { cursor: pointer; }
.reviewpane .review-key:hover kbd { border-color: var(--mut); color: var(--fg); }
.reviewpane .review-key:disabled kbd { opacity: .5; cursor: default; }
.reviewpane .review-viewed { white-space: nowrap; }
.reviewpane .review-close { width: 28px; height: 28px; font-size: 20px; border: 0; background: transparent; color: var(--mut); }
.reviewpane .review-close:hover { color: var(--fg); }
.review-more-wrap { position: relative; }
.review-more-btn { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; font-size: 16px; color: var(--mut); }
.review-more-btn[aria-expanded="true"], .review-more-btn:hover { color: var(--fg); background: var(--hover); }
.review-more { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 250px; display: flex; flex-direction: column;
  padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md, 8px); box-shadow: 0 8px 24px rgb(0 0 0 / .28); }
.review-more > button { display: flex; justify-content: space-between; align-items: center; text-align: left; border: 0; background: transparent;
  padding: 6px 8px; font-size: var(--t-sm, 12px); border-radius: 5px; }
.review-more > button:hover:not(:disabled), .review-more > button:focus-visible { background: var(--hover); }
.review-more > button .review-action { width: 100%; justify-content: space-between; }
.review-more > button[aria-pressed="true"]::after, .review-more > button[aria-expanded="true"]::after { content: "✓"; color: var(--mut); margin-left: 8px; }
.review-more > hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.reviewpane .review-banner { min-height: 0; }
.reviewpane .review-banner:empty { display: none; }
.reviewpane .review-body { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -18px; }
.reviewpane.review-fullscreen .review-body { margin: 0 -10px; }
.reviewpane .review-list { width: var(--rv-w, 190px); padding: 6px 8px 6px 12px; border-right: 0; }
.review-splitter { position: relative; flex: 0 0 10px; width: 10px; touch-action: none; cursor: col-resize; }
.review-splitter::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: var(--line); }
.review-splitter:hover::after, .review-splitter.drag::after, .review-splitter:focus-visible::after { background: var(--link); }
.review-splitter:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; border-radius: 3px; }
.review-resize-tip { display: none; position: absolute; z-index: 20; top: 50%; left: 16px; white-space: nowrap; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: 11px var(--mono); color: var(--fg); pointer-events: none; }
.review-splitter.drag .review-resize-tip { display: block; }
.reviewpane.review-resizing { user-select: none; }
.review-path { display: flex; align-items: baseline; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; }
.review-path-dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; unicode-bidi: plaintext; }
.review-path > strong { flex: none; font-weight: 600; }
.review-block-info { margin-left: auto; white-space: nowrap; }
.reviewpane .review-detail { padding-right: 10px; }
.reviewpane .review-center { padding: 6px 0 0 10px; }
.reviewpane .review-notes { padding: 8px 10px; }
.reviewpane .review-group > summary { padding: 8px 0 4px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); list-style: none; }
.reviewpane .review-group > summary::-webkit-details-marker { display: none; }
.reviewpane .review-group-count { text-transform: none; }
.reviewpane .review-rest > summary { text-transform: none; letter-spacing: 0; font-size: var(--t-sm, 12px); color: var(--faint, var(--mut)); }
.reviewpane .review-rest > summary::before { content: "› "; }
.reviewpane .review-rest[open] > summary::before { content: "⌄ "; }
.reviewpane .review-file { grid-template-columns: 20px 18px minmax(0, 1fr) auto auto auto; gap: 6px; column-gap: 0; padding: 4px 4px; border-radius: 5px; }
.reviewpane .review-file.active { outline: 0; background: var(--tile); }
.reviewpane .review-file input[type=checkbox] { opacity: .55; margin: 0; }
.reviewpane .review-file:hover input[type=checkbox], .reviewpane .review-file input[type=checkbox]:checked { opacity: 1; }
.reviewpane .review-list .gmark { background: none; padding: 0; }
.reviewpane .review-file .review-file-name { color: var(--fg); background: transparent; }
.reviewpane .review-file .review-file-name:not(:disabled):hover { background: transparent; }
.reviewpane .review-file .review-file-name:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.reviewpane .review-file.ch-del .review-file-name { color: var(--mut); }
.reviewpane .review-file-state { color: var(--ok); }
.reviewpane .review-file > input { grid-column: 1; } .reviewpane .review-file > .gmark { grid-column: 2; }
.reviewpane .review-file-name { grid-column: 3; display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; overflow-wrap: normal; }
.review-file-base { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.review-file-base { flex: 0 1 auto; }
.review-file.active .review-file-base { font-weight: 600; }
.review-file-dir { flex: none; white-space: nowrap; font-size: 11px; color: var(--faint-t, var(--mut)); }
.review-file-dir.dir-hidden, .review-file-dir.tail-hidden .review-file-dir-tail { display: none; }
.review-file-dir-key { color: color-mix(in srgb, var(--fg) 80%, transparent); font-weight: 500; }
.review-file-dir.distinguishing { display: flex; min-width: 0; max-width: 50%; }
.review-file-dir-key { overflow: hidden; text-overflow: ellipsis; }
.review-file-dir-tail { flex: none; }
.review-file-meta { display: contents; }
.review-file-dir-compact { display: none !important; }
.reviewpane.review-compact-list .review-file { grid-template-columns: 19px 13px minmax(0, 1fr); grid-template-rows: 15px 13px; padding: 3px 4px; row-gap: 1px; margin-bottom: 2px; }
.review-compact-list .review-file-name > .review-file-dir { display: none; }
.review-compact-list .review-file-name { line-height: 15px; }
.reviewpane.review-compact-list .review-file > input { width: 13px; height: 13px; }
.reviewpane.review-compact-list .review-file > .gmark { min-width: 0; width: 7px; text-align: left; font-size: 11px; line-height: 15px; }
.reviewpane.review-compact-list .review-file-meta { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: 1px; font-size: 11px; line-height: 13px; }
.review-compact-list .review-file-dir-compact { display: flex !important; flex: 1; min-width: 0; max-width: none; overflow: hidden; font-size: 11px; }
.review-compact-list .review-file-dir-compact.dir-hidden { visibility: hidden; }
.reviewpane.review-compact-list .review-numstat { display: none; }
.reviewpane .review-file-meta > .hid-mark { grid-column: 4; grid-row: 1; }
.reviewpane .review-file-meta > .hid-mark, .reviewpane .review-numstat, .reviewpane .review-file-state:not(:empty) { padding-left: 6px; }
.reviewpane.review-compact-list .review-file-meta > .hid-mark, .reviewpane.review-compact-list .review-file-state { padding-left: 0; }
.reviewpane.review-compact-list .review-file-state { margin-left: auto; }
.reviewpane .review-numstat { grid-column: 5; grid-row: 1; white-space: nowrap; font-size: 11px; }
.reviewpane .review-file-state { grid-column: 6; grid-row: 1; }
.reviewpane .review-file:has(.review-file-state:not(:empty)) .review-numstat { display: none; }
.review-code-wrap { position: relative; display: flex; flex: 1; min-height: 0; }
.reviewpane > .review-palette { flex: none; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--card); max-height: 30vh; overflow: auto; }
.reviewpane > .review-palette .review-action-menu { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reviewpane > .review-palette .review-action-menu button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; }
.reviewpane > .review-palette .review-action-menu button[aria-pressed="true"] { background: var(--tile); border-color: var(--accent); }
.reviewpane > .review-palette .review-selection-hint { margin: 6px 0 0; }
.review-directory { margin-left: 10px; border-left: 1px solid var(--line); padding-left: 6px; }
.review-directory > summary { display: flex; align-items: center; gap: 5px; padding: 5px 2px; cursor: pointer; color: var(--mut); font-size: 12px; }
.review-directory > summary::before { content: '›'; width: 8px; }
.review-directory[open] > summary::before { transform: rotate(90deg); }
.review-directory > summary .fi { width: 13px; height: 13px; }
.reviewpane .review-footer { flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 0; min-width: 0; }
.reviewpane .review-footer > .mut { white-space: nowrap; }
.reviewpane .review-items-link { white-space: nowrap; padding: 0; }
.reviewpane .review-progress { width: 80px; height: 4px; accent-color: var(--ok); flex: none; }
.reviewpane .review-footer input { min-width: 140px; max-width: 360px; flex: 1; }
.reviewpane .review-footer > button { white-space: nowrap; }
.reviewpane .review-footer .warn { color: var(--warn); }
@media (max-width: 1100px) { .reviewpane .review-progress { display: none; } }
@media (max-width: 800px) { .reviewpane .review-toolbar { flex-wrap: wrap; } .reviewpane .review-footer { flex-wrap: wrap; } }
/* ==== end F23 ==== */
/* ==== 9.88 F27 Push & MR: one dialog, the commits in sight, the diff folded, the MR rides along (board kpTMe) ==== */
.modal:has(.pd) { width: min(640px, calc(100vw - 32px)); height: auto; max-height: calc(100vh - 32px); }
.modal:has(.pd.pd-open) { width: min(1040px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); }
.pd { overflow: auto; }
.pd-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.pd-hrow { display: flex; align-items: center; gap: 8px; }
.pd-title { font-size: var(--t-lg, 15px); }
.pd-x { border: 0; background: transparent; color: var(--mut); width: 24px; height: 24px; padding: 0; }
.pd-x:hover { color: var(--fg); }
.pd .pd-target { padding: 4px 0 0; border-bottom: 0; }
.pd-checks { padding: 10px 16px; gap: 4px; border-bottom: 1px solid var(--line); }
.pd-check { padding: 0; background: none; }
.pd-check.warn, .pd-check.block { background: none; }
.pd-brief { padding: 10px 16px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--line); }
.pd-brief:empty { display: none; }
.pd-sub { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); margin-bottom: 3px; }
.pd-crow { display: flex; align-items: baseline; gap: 10px; font-size: var(--t-md, 13px); min-width: 0; }
.pd-crow code { font-size: 12px; flex: none; }
.pd-csubj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-cau { flex: none; }
.pd-filesline { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--link); }
.pd-filesline .link { padding: 0; }
.pd-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pd-detail .pd-body { flex: none; }
.pd-mr { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.pd-mron { display: flex; align-items: center; gap: 8px; font-size: var(--t-md, 13px); }
.pd-mron input[type=checkbox] { margin: 0; }
.pd-into { width: 160px; padding: 2px 6px; font-size: 12px; }
.pd-mrbody { display: flex; flex-direction: column; gap: 6px; }
.pd-mrtitle { width: 100%; }
.pd-mrrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pd-mrrow .link { padding: 0; }
.pd-mrrow label { display: inline-flex; align-items: center; gap: 4px; }
.pd-desc { width: 100%; resize: vertical; }
.pd-foot .pd-cmd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-foot button kbd, .modal .row button.primary kbd { margin-left: 6px; }
/* ==== end F27 ==== */
/* ==== 9.92 ZBYTEK N17 ==== */
/* Production's folded Known / Muted: a caret like the Inbox groups, not a bare heading */
details.ibx-group > summary.ibx-ghead { cursor: pointer; list-style: none; }
details.ibx-group > summary.ibx-ghead::-webkit-details-marker { display: none; }
details.ibx-group > summary.ibx-ghead::after { content: '▸'; order: 9; width: 10px; color: var(--faint-t); }
details.ibx-group[open] > summary.ibx-ghead::after { content: '▾'; }
details.ibx-group > summary.ibx-ghead:hover { color: var(--fg); }
/* ==== end N17 ==== */
/* ==== 9.100 ZBYTEK N4: the Keys sheet (F18 / T1) - a fixed header with a filter, groups in columns, keys as chips on the right ==== */
.modal:has(.keysheet) { width: min(940px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 32px)); padding: 0; gap: 0; overflow: hidden; }
.modal:has(.keysheet) > h2 { display: none; }
.keysheet { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.ks-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.ks-head h3 { margin: 0; flex: 1; font-size: var(--t-lg, 15px); font-weight: 600; }
.ks-find { width: 220px; height: 28px; padding: 0 10px; border-radius: var(--r-md, 6px); font-size: var(--t-md, 13px); }
.ks-x { background: none; border: 0; width: 28px; height: 28px; border-radius: var(--r-md, 6px); color: var(--mut); font-size: 18px; line-height: 1; padding: 0; }
.ks-x:hover { color: var(--fg); background: var(--tile); }
.ks-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 20px; }
.ks-cols { columns: 2 360px; column-gap: 36px; }
.ks-group { break-inside: avoid; padding-top: 12px; }
.ks-group h4 { margin: 0 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--faint-t, var(--mut)); }
.ks-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 28px; padding: 3px 6px; margin: 0 -6px;
  border-radius: var(--r-sm, 4px); font-size: var(--t-md, 13px); }
.ks-row:hover { background: var(--tile); }
.ks-d { min-width: 0; color: var(--fg); }
.ks-d::first-letter { text-transform: uppercase; }
.ks-k { flex: none; display: flex; align-items: center; gap: 4px; max-width: 55%; flex-wrap: wrap; justify-content: flex-end; }
.ks-k kbd { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
  font: 11px/1 var(--mono, "JetBrains Mono", Menlo, monospace); color: var(--mut); background: var(--well); border: 1px solid var(--line); border-radius: 4px; }
.ks-sep { color: var(--faint-t, var(--mut)); font-size: var(--t-xs, 11px); }
.ks-t { color: var(--mut); font-size: var(--t-sm, 12px); font-style: italic; }
.ks-none { color: var(--mut); padding: 16px 0; }
/* ==== end N4 ==== */
/* ==== 9.102 the session bar: 44 px, every control on one centre line (user 2026-10-20: "too narrow, items not aligned") ==== */
.head.detail.one .dh-top { height: 44px; min-height: 44px; gap: 10px; }
.head.detail.one .dh-top .title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.005em; }
.head.detail.one .dh-top > .st { align-self: center; }
.head.detail.one .dh-chips { gap: 6px; }
.head.detail.one .dh-chips .chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px;
  background: var(--tile); font-size: var(--t-sm); line-height: 1; }
.head.detail.one .dh-chips button.chip:hover { color: var(--fg); background: var(--neutral-bg, var(--tile)); }
.head.detail.one .tabs { margin-left: var(--s3); }
.head.detail.one button.tab { height: 44px; display: inline-flex; align-items: center; border-bottom-width: 2px; padding-top: 2px;
  transition: color .12s ease, border-color .12s ease; }
.head.detail.one button.tab.on { font-weight: 500; }
.head.detail.one .layoutctl { gap: 4px; padding-bottom: 0; }   /* the pre-F03 bar's 5 px sat the controls 2.5 px high */
.head.detail.one .layoutctl button, .head.detail.one .actions button.icon { display: inline-flex; align-items: center; justify-content: center;
  height: 30px; line-height: 1; transition: background-color .12s ease, color .12s ease; }
.head.detail.one .layoutctl button.icon, .head.detail.one .actions button.icon { width: 30px; min-width: 30px; padding: 0; border: 0;
  border-radius: var(--r-md); background: none; color: var(--mut); }
.head.detail.one .layoutctl button.icon:hover, .head.detail.one .layoutctl button.icon.on { background: var(--tile); color: var(--fg); }
.head.detail.one .layoutctl button.icon .fi { --fic: currentColor; }
.head.detail.one .layoutctl button .fi, .head.detail.one .layoutctl button .chev { display: block; }
.head.detail.one .layoutctl button.beside { padding: 0 10px; }
@container dh (max-width: 670px) { .head.detail.one .dh-top { height: auto; min-height: 44px; } .head.detail.one button.tab { height: 36px; } }   /* the tabs' own row (F03) still wraps */
/* ==== end session bar ==== */
/* ==== 9.103 ZBYTEK N16: Host shells like a session - full bleed, a 44 px bar with underline tabs (F03 / 9.102) ==== */
#main > .body:has(> .view > .hostterm:not(.hidden)) { padding: 0; }
.hostterm { border-radius: 0; }
.ht-bar { height: 44px; gap: 10px; padding: 0 var(--s3) 0 var(--s4); background: var(--page, var(--card)); border-bottom-color: var(--line-soft, var(--line)); }
.ht-title { font-size: var(--t-lg); margin-right: var(--s2); }
.ht-tabs { align-self: stretch; gap: 0; }
.ht-tab { height: 44px; padding: 0 8px 0 12px; border-radius: 0; border-bottom: 2px solid transparent; padding-top: 2px; transition: color .12s ease, border-color .12s ease; }
.ht-tab:hover { background: none; }
.ht-tab.on { background: none; box-shadow: none; border-bottom-color: var(--bad); font-weight: 500; }
.ht-x { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--r-sm); opacity: 0; transition: opacity .12s ease; }
.ht-tab:hover .ht-x, .ht-tab.on .ht-x, .ht-x:focus-visible { opacity: 1; }
.ht-x:hover { background: var(--tile); }
.ht-new { display: inline-flex; align-items: center; height: 30px; border-radius: var(--r-md); }
.ht-new:hover { background: var(--tile); }
.ht-add, .ht-pick { height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); }
.ht-add { width: 30px; padding: 0; font-size: 18px; }
.ht-pick { width: 18px; padding: 0; margin-left: -6px; font-size: 9px; color: var(--faint-t); }
.ht-add:hover, .ht-pick:hover { background: none; }
.ht-banner { padding: 0 var(--s4); height: 32px; gap: 10px; border-bottom-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.ht-pill { padding: 2px 8px; }
.ht-cwd > span { unicode-bidi: isolate; }
/* ==== end N16 ==== */
/* ==== 9.104 design pass: session tabs full bleed under the 44 px bar like the terminal, the queue title on the bar's line, icons for the last glyphs ==== */
#main:has(> .head.detail.one) > .body:not(.grid) { padding: 0; background: var(--well); }
#main:has(> .head.detail.one) > .body:not(.grid) > .view > :is(.convo, .files, .audit, .board) { border-radius: 0; }
.q-head { padding: 0 12px 12px; }
.q-title { height: 44px; margin: 0 -12px 4px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
.fi-search { --fic: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.dh-stop .fi-square { --fic: currentColor; width: 13px; height: 13px; }
.convo .chead .csearch .fi { width: 15px; height: 15px; }
/* ==== end 9.104 ==== */
/* ==== 9.105 design pass: page heads and the Agent drawer on the 44 px line, one search icon ==== */
#main > .head:not(.detail) { min-height: 44px; height: 44px; padding: 0 16px; box-sizing: border-box; }
#main > .head:not(.detail) .titles { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
#main > .head:not(.detail) .title { flex: none; }
.drawer-head { height: 44px; box-sizing: border-box; padding: 0 8px 0 var(--s3); flex: none; }
.drawer-head h2 { font-size: var(--t-md); font-weight: 600; }
.ibx-sglyph, .wk-sico { display: inline-flex; align-items: center; }
.ibx-sglyph .fi, .wk-sico .fi { width: 14px; height: 14px; }
/* ==== end 9.105 ==== */
/* ==== 9.106 design pass: details - the palette keeps command names whole ==== */
.palette .pitem > .name > .plabel { flex: none; max-width: 100%; }
/* Files: with the tree shown its « hides it, so ☰ (show tree) only when hidden; no file open = no empty strip */
.files:not(.narrow) .ftabs > button.ftree.on { display: none; }
.files:not(.narrow) .ftabs:not(:has(> :not(button.ftree.on))) { display: none; }
/* Beside ▾ layouts: the generic .row (margin-top 12px, gap) also hit the row-shaped thumbs - Rows, Big top, 2 × 3 sat 12 px low */
.layoutmenu .lthumb.row { margin: 0; justify-content: normal; }
/* ==== end 9.106 ==== */
/* ==== 9.107 design pass: motion - one set of durations, things arrive instead of popping in (reduced motion: app.css 1440 turns it all off) ==== */
:root { --dur-fast: 120ms; --dur: 180ms; --ease-out: cubic-bezier(.2, .8, .2, 1); }
@keyframes pi-fade { from { opacity: 0; } }
@keyframes pi-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes pi-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes pi-slide { from { opacity: 0; transform: translateX(24px); } }
@keyframes pi-toast { from { opacity: 0; transform: translate(-50%, 8px); } }
#overlay.open { animation: pi-fade var(--dur-fast) ease-out; }
.olayer > .modal { animation: pi-pop var(--dur) var(--ease-out); }
.drawer { animation: pi-slide var(--dur) var(--ease-out); }
.cmenu, #notices { animation: pi-pop var(--dur-fast) var(--ease-out); }
#pending > .pending { animation: pi-rise var(--dur) var(--ease-out); }
.toast { animation: pi-toast var(--dur) var(--ease-out); }
button, .qi, .qm, .ab-item, .pitem, .nt-item { transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease; }
/* ==== end 9.107 ==== */
/* ==== 9.108 ZBYTEK N10: Piper at 300 px (every rule under a phone-width query - 1100 / 1440 stay as they are) ==== */
@media (max-width: 640px) {
  /* the whole queue spans the detail's columns, but its own column stayed 280 px: rail + 280 overflowed a 300 px window
     and clipped "+ Session" / "Find & resume" - there the column is the rest of the window */
  body:not(.queue-mini):not(.no-queue) { --q-w: calc(100vw - var(--ab-w)); }
  .q-cmdk { display: none; }   /* no keyboard to hint at */
  /* the approval card spans the detail with an 8 px margin (the 32 px one left a 204 px column of wrapped text) */
  #pending { right: 8px; bottom: 8px; width: calc(100vw - var(--ab-w) - 16px); max-height: calc(100vh - 16px); }
  .pending pre { max-height: 30vh; }   /* the request scrolls in itself: the card leaves the view above it */
  #pending .phead { flex-wrap: wrap; row-gap: 2px; }   /* who asks stays whole ("Gl…" beside the action and the risk) */
  /* Settings: the nav wrapped into a cloud of chips with the group headings in the middle (it took the whole screen).
     There it is the search over one row of sections that scrolls sideways (the open one scrolled in, settings.ts
     revealNavItem); the headings go, the Advanced fold stays as a chip */
  .settings .st-side { display: block; white-space: nowrap; overflow: auto hidden; scrollbar-width: none; padding: 0 0 4px; }
  .settings .st-side > .st-searchbox, .settings .st-side > .st-found { position: sticky; left: 0; white-space: normal; }
  .settings .st-side > .st-found { padding: 0 2px 4px; }
  .settings .st-side > div.st-gtitle { display: none; }
  .settings .st-side > .st-navi, .settings .st-side > .st-gfold { display: inline-flex; vertical-align: middle; padding: 6px 10px; }
  .settings .st-side > .st-gfold { background: none; border: 0; font: inherit; font-size: var(--t-xs); }
  .settings .st-navi.on { box-shadow: inset 0 -2px 0 var(--link); }
  .settings .st-sec { padding: 12px 12px 0; }
  .fm-seg { flex-wrap: wrap; }                 /* the presets wrap instead of running off the card */
  .fm-thumb { display: none; }                 /* Features: the 64 px picture left the text a 70 px column */
  .fm-big { padding-left: 4px; }
  .settings .st-sec select { max-width: 100%; }   /* a long choice ran 400 px past the card */
  .settings .st-ptools { flex-wrap: wrap; }       /* Projects: the table scrolls in its own box, its tools wrap */
  /* Database: the 250 px tree left the console 0 px. One column like a narrow grid pane (9.39): no tab = the tree over
     the start (New console / All databases), an open tab = the whole width, ▤ Tables brings the tree over it */
  .dbview:not(.wide):not(.compact) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .dbview:not(.wide):not(.compact) > .db-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .dbview:not(.wide):not(.compact):has(.db-tab):not(.db-treeon) { grid-template-rows: 0 minmax(0, 1fr); }
  .dbview:not(.wide):not(.compact):has(.db-tab):not(.db-treeon) > .db-left { visibility: hidden; border: 0; }
  .dbview .db-tab-tree { display: inline-flex; }
  .dbview.db-treeon:has(.db-tab) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .dbview.db-treeon:has(.db-tab) > .db-main { display: contents; }
  .dbview.db-treeon:has(.db-tab) > .db-main > .db-tabs { grid-row: 1; grid-column: 1; }
  .dbview.db-treeon:has(.db-tab) > .db-left { grid-row: 2; grid-column: 1; border-right: 0; }
  .dbview.db-treeon:has(.db-tab) > .db-main > .db-body { display: none; }
  .db-empty { max-width: 100%; padding: 12px 10px; }
  .db-empty > .db-ic { display: none; }   /* under the tree: the start's words and buttons, not its picture */
  .db-empty .row { flex-wrap: wrap; justify-content: center; }
  /* Usage: the days' bars get the width, the project table scrolls in its own box (not the whole card) */
  .usage { padding: 10px; }
  .usage .uday { grid-template-columns: 50px minmax(0, 1fr) 62px; gap: 8px; }
  .usage .utable { display: block; overflow-x: auto; }
  .utable .ubarcell { min-width: 80px; }
  /* ⌘K: the name stays readable, its description / state gives way ("Resu… search saved Claude an…") */
  .palette .pitem > .name { flex: 0 0 auto; max-width: 72%; }
  .palette .pitem > .name > .plabel { flex: none; max-width: 100%; }
  /* Keys sheet: the 220 px filter pushed × off the sheet - the filter takes its own row under the title and × */
  .ks-head { flex-wrap: wrap; padding: 10px 10px 10px 14px; row-gap: 8px; }
  .ks-find { order: 3; flex: 1 1 100%; width: auto; }
  .ks-body { padding: 4px 14px 14px; }
  /* Git window: three columns (990 px) scrolled the sheet sideways - the log over the commit, branches via its
     Branch filter, the toolbar wraps */
  .modal:has(.gw) { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  .gw-tools { flex-wrap: wrap; row-gap: 4px; }
  .gw-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr); }
  .gw-body > .gw-side { display: none; }
  .gw-log { border-right: 0; border-bottom: 1px solid var(--line); }
  .gw-filter { flex-wrap: wrap; }
  .gw-dhead { flex-wrap: wrap; row-gap: 4px; }
  .gw-filter > * { min-width: 0; flex: 1 1 100px; }
  .gw-filter > input { flex-basis: 100%; }
  .gw-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 260px; }
}
@media (max-width: 480px) {
  /* the session bar on one row over the tabs: Beside is its icon (the label went to a row of its own with Stop / ···) */
  .head.detail.one { padding: 0 var(--s2) 0 var(--s3); }
  .head.detail.one .dh-top { column-gap: 4px; }
  .head.detail.one .dh-top .actions { flex: none; flex-wrap: nowrap; gap: 0; }
  .head.detail.one .layoutctl button.beside { font-size: 0; gap: 2px; padding: 0 6px; }
  .head.detail.one .layoutctl button.beside .chev { font-size: 9px; }
  .head.detail.one button.tab { padding: 0 8px; }
}
@media (max-width: 420px) {
  :root { --ab-w: 52px; }   /* the rail's 40 px targets keep a 6 px margin; the detail gets 12 px back */
  /* Inbox / Production: the view's 10 px, the board's 16 px and the card's 10 px left the rows 174 of 248 px */
  .board { padding: 8px 0; }
  .inbox { padding: 8px; }
}
/* ==== end N10 ==== */
/* ==== 9.109 design pass: the Files tab at phone width - one column, the tree slides over the editor ==== */
@media (max-width: 640px) {
  #main .files.narrow { position: relative; grid-template-columns: minmax(0, 1fr); }
  #main .files.narrow > .fright { grid-column: 1; grid-row: 1; }
  #main .files.narrow:not(.tree-off) > .fleft { position: absolute; inset: 0 auto 0 0; width: min(280px, 100%); z-index: 5;
    background: var(--well); border-right: 1px solid var(--line); box-shadow: 6px 0 18px rgb(0 0 0 / .28); animation: pi-slide-in var(--dur) var(--ease-out); }
}
@keyframes pi-slide-in { from { transform: translateX(-16px); opacity: 0; } }
/* ==== end 9.109 ==== */
/* ==== 9.110 design pass: menus under their anchor (placeMenu), the menu search icon, Add pane rows ==== */
.cmenu .msearch::before { content: ""; flex: none; width: 13px; height: 13px; background: var(--mut); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.cmenu.addpane .ap-row { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* ==== end 9.110 ==== */
/* ==== 9.111 design pass: the Git window's lane graph draws its lines (F08) ==== */
.gw-rows .gw-g { align-self: stretch; display: flex; }
.gw-rows .gw-g .gc { position: relative; z-index: 0; width: 1ch; display: inline-flex; align-items: center; justify-content: center; }
.gw-rows .gw-g .gc.node::before, .gw-rows .gw-g .gc.v::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: currentColor; opacity: .45; }
.gw-rows .gw-g .gc.node::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--card); }
.gw-rows > .gw-row:first-child .gc.node::before { top: 50%; }
.gw-rows > .gw-row:last-child .gc.node::before { bottom: 50%; }
.gw-rows .gw-row.active .gc.node::after { box-shadow: 0 0 0 2px var(--tile); }
/* ==== end 9.111 ==== */
/* ==== 9.112 design pass: context panel Push… and the Review file list ==== */
@media (min-width: 1101px) { .reviewpane .review-list { width: var(--rv-w, 248px); } }
@media (max-width: 800px) {
  .reviewpane .review-list { width: 168px; padding: 6px; background: var(--page); box-shadow: inset -1px 0 var(--line); }
  .reviewpane .review-group:not(.review-rest) > summary { font-size: 10px; line-height: 12px; letter-spacing: .4px; padding: 0; margin-bottom: 2px; }
}
.pd-mrbody button.link:has(> .fi) { display: inline-flex; align-items: center; gap: 4px; }
.pd-mrbody button.link > .fi { width: 12px; height: 12px; }
/* ==== end 9.112 ==== */
/* ==== 9.113 design pass: green only for state - Git window toggles and list focus rings in the app's colours ==== */
.gw-fhead button.mini.on, .gw-dhead button.mini.on { border-color: var(--mut); background: var(--tile); }
.hlist:focus-visible, .gw-rows:focus-visible { box-shadow: inset 0 0 0 1px var(--link); }
button.tnode:focus-visible { outline-color: var(--link); }
/* ==== end 9.113 ==== */
/* ==== 9.114 design pass: the editor toolbar draws line icons (lucide), not glyphs ==== */
.fi-back { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); }
.fi-fwd { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.fi-at { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E"); }
.fi-diff { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v14'/%3E%3Cpath d='M5 10h14'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v14'/%3E%3Cpath d='M5 10h14'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); }
.fi-blame { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); }
.fi-outline { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8'/%3E%3Cpath d='M21 6H8'/%3E%3Cpath d='M21 18h-8'/%3E%3Cpath d='M3 6v4c0 1.1.9 2 2 2h3'/%3E%3Cpath d='M3 10v6c0 1.1.9 2 2 2h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8'/%3E%3Cpath d='M21 6H8'/%3E%3Cpath d='M21 18h-8'/%3E%3Cpath d='M3 6v4c0 1.1.9 2 2 2h3'/%3E%3Cpath d='M3 10v6c0 1.1.9 2 2 2h3'/%3E%3C/svg%3E"); }
.fhead .ib > .fi { --fic: currentColor; }
.fhead .ib.on { color: var(--fg); background: var(--tile); border-color: var(--line); }
.fhead .ib.at { color: inherit; background: none; font-weight: normal; }
.fhead .ib.at:hover { color: var(--fg); background: var(--tile); }
/* ==== end 9.114 ==== */
/* ==== 9.115 design pass: a narrow editor keeps path and actions on one line while the path has 160 px ==== */
@container fright (max-width: 520px) {
  .fright .fhead .crumbs { flex-basis: 160px; }
}
/* ==== end 9.115 ==== */
/* ==== 9.117 design pass: a narrow session bar keeps its first row on the 44 px line of the queue title ==== */
@container dh (max-width: 670px) {
  .head.detail.one .dh-top { row-gap: 0; }
  .head.detail.one .dh-top > :is(.layoutctl, .actions) { height: 44px; display: flex; align-items: center; }
}
/* ==== end 9.117 ==== */
/* ==== 9.119 design pass: Beside ▾ items carry their icons; the layout thumbnails read in the dark theme ==== */
.fi-term { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19h8'/%3E%3Cpath d='m4 17 6-6-6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19h8'/%3E%3Cpath d='m4 17 6-6-6-6'/%3E%3C/svg%3E"); }
.fi-pen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/svg%3E"); }
.fi-db { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3s-3.6 3-8 3s-8-1.3-8-3z'/%3E%3Cpath d='M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3s-3.6 3-8 3s-8-1.3-8-3z'/%3E%3Cpath d='M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }
.besidemenu .bitem > .fi { --fic: var(--mut); }
.besidemenu .bitem:disabled > .fi { opacity: .5; }
.besidemenu .lthumb .lcell { background: color-mix(in srgb, var(--mut) 18%, transparent); border-color: color-mix(in srgb, var(--mut) 45%, transparent); }
.besidemenu .lcard:hover:not(:disabled) .lthumb .lcell { border-color: var(--mut); }
/* ==== end 9.119 ==== */
/* ==== 9.120 design pass: context menus draw line icons (lucide) instead of glyphs ==== */
.fi-open { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); }
.fi-square-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E"); }
.fi-square-minus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }
.fi-chat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.fi-attach { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
.fi-up { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); }
.fi-down { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); }
.fi-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.cmenu .micon:has(> .fi) { display: inline-flex; align-items: center; justify-content: center; }
.cmenu .micon > .fi { --fic: currentColor; }
.cmenu.addpane .ap-row > .fi { --fic: var(--mut); }
/* ==== end 9.120 ==== */
/* ==== 9.121 design pass: a plan-usage row with no numbers says why ==== */
.ql-provider > .ql-cell[hidden], .ql-provider > .ql-note[hidden] { display: none; }
.ql-provider > .ql-note { grid-column: 2 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--warn); }
/* ==== end 9.121 ==== */

/* ==== 9.122 pages polish: Settings, Usage, Audit, Production, Database - one control set, mask icons, focus ==== */
:root { --dur-fast: 120ms; }
/* the glyphs these pages drew as text (+ × ⋯ ▾ › ‹ ↗) as mask icons in the .fi idiom */
.fi-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }
.fi-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.fi-more { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3C/svg%3E"); }
.fi-chev-d { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.fi-chev-r { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.fi-chev-l { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.fi-ext { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
:is(.settings, .usage, .audit, .prod-view, .dbview) :is(button, a) .fi { --fic: currentColor; }
:is(.settings, .usage, .audit, .prod-view, .dbview) :is(button, a.btn):has(> .fi) { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.fi.closed { transform: rotate(-90deg); }
.db-caret.fi, .settings .st-gfold .fi { width: 10px; height: 10px; -webkit-mask-size: 10px 10px; mask-size: 10px 10px; opacity: 1; }
.settings .st-gfold { display: flex; align-items: center; gap: 4px; }
.prod .ibx-empty { display: flex; align-items: center; gap: var(--s2); }
.prod .ibx-empty .fi { --fic: var(--ok); }
/* one control set: 28 px inputs / selects / text buttons, 22 px small buttons and chips, 30 px icon buttons */
:is(.settings, .usage, .audit, .prod-view, .dbview) :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select) { height: 28px; padding-block: 0; box-sizing: border-box; }
:is(.settings .st-searchbox, .db-cp-head > .db-find, .db-searchbox) { height: 28px; }
:is(.settings .st-searchbox, .db-find, .db-searchbox) > input { height: 100%; }
:is(.settings, .usage, .audit, .prod-view, .dbview) button:not(.link, .icon, .mini, .small, .su-switch, .st-navi, .st-gtitle, .sc-level, .st-chip, .db-pill, .aproj, .ibx-ghead, .db-cname2,
  .db-find-clear, .db-tab, .db-tab-x, .db-tab-new, .fm-seg > *, .amode > *, .db-crow, .db-pick-row) { min-height: 28px; padding-block: 0; }
:is(.settings, .usage, .audit, .prod-view, .dbview) :is(button.mini, button.small, a.btn.small):not(.link, .icon) { display: inline-flex; align-items: center; min-height: 22px; height: 22px; padding: 0 8px; font-size: var(--t-sm); white-space: nowrap; }
.settings .st-chip, .dbview .db-pill { display: inline-flex; align-items: center; height: 22px; min-height: 22px; padding: 0 8px; font-size: var(--t-sm); }
.fm-seg > button, .audit .amode > button { height: 24px; padding-block: 0; }   /* a segment: 24 px in a 2 px well = the 28 px of an input */
:is(.settings, .usage, .audit, .prod-view, .dbview) button.icon, .settings .st-prm { width: 30px; min-width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-md); background: none; color: var(--mut); }
:is(.settings, .usage, .audit, .prod-view, .dbview) button.icon:not(:disabled):hover, .settings .st-prm:hover { background: var(--tile); color: var(--fg); }
.prod-view .prod .prod-stale button.small { height: 28px; padding: 0 12px; font-size: var(--t-md); }
/* focus: inputs and selects get the ring buttons already have (a wrapped search shows it on its box) */
:is(.settings, .usage, .audit, .prod-view, .dbview) :is(input, select, textarea):focus-visible { outline: 2px solid var(--link); outline-offset: -1px; }
:is(.settings .st-searchbox, .db-find, .db-searchbox) > input:focus-visible { outline: none; }
:is(.settings, .usage, .audit, .prod-view, .dbview) button.link:not(:disabled):hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  :is(.settings, .usage, .audit, .prod-view, .dbview) :is(button, a.btn) { transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
  .fi.closed, .settings .st-gfold .fi { transition: transform var(--dur-fast) ease; }
}
/* Production: one frame - the list sat in a card inside the page's well */
.prod-view > .inbox.prod { background: none; border: 0; padding: 0; }
/* Settings: the label's centre on the control's (28 px), read-only values and switches too; a long option never widens the section */
.settings .st-ctl > .st-env { padding-top: 4px; line-height: 20px; }
.settings .st-ctl > label.switch { margin-top: 6px; }
.settings .st-sec select { max-width: 100%; text-overflow: ellipsis; }
/* Projects: the path column takes its share and ellipsizes (its tooltip has the whole path) - no sideways scroll at 1024 */
.settings .st-ptable .st-path { width: 30%; max-width: 0; }
.settings .st-ptable .st-path > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.settings .st-ptools > .mut, .settings .st-ptools > button { flex: none; white-space: nowrap; }
/* Database: the overview's bar on the 44 px line of the page heads (9.105), its column heads hidden without a clipped text box */
.db-cp-head { min-height: 44px; padding: 0 var(--s4); gap: var(--s3); }
.db-cp-head h2 { font-size: var(--t-md); font-weight: 600; }
.db-ctable .db-chead { overflow: visible; clip: auto; clip-path: inset(50%); }
/* Production: the Known / Muted folds' marker as the chevron icon, turned down while open */
.prod-view details.ibx-group > summary.ibx-ghead::after { content: ''; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 10px 10px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 10px 10px no-repeat; }
.prod-view details.ibx-group[open] > summary.ibx-ghead::after { content: ''; transform: rotate(90deg); }
.settings .st-side button.st-gtitle.st-gfold { justify-content: flex-start; }   /* over the centred icon buttons above */
/* Database, an opened connection: the left head, the tabs and History's heading on one 44 px line */
.view > .dbview .db-lhead { height: 44px; padding: 0 12px; }
.view > .dbview .db-switch { height: 28px; }
.view > .dbview .db-tabs { height: 44px; }
.view > .dbview .db-tab, .view > .dbview .db-tab-new { height: 43px; }
.view > .dbview .db-rscroll > .db-rsec:first-child { height: 44px; padding-block: 0; }
.db-treeerr { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.db-treeerr > p { margin: 0; overflow-wrap: anywhere; }
/* ==== end pages polish: controls ==== */
/* ==== 9.123 design pass: the collapsed usage tile without numbers shows a warning, not "–%" over empty bars ==== */
#actbar .qm-lim .qml-warn { display: none; width: 14px; height: 14px; --fic: var(--warn); }
#actbar .qm-lim.unknown :is(.qml-pct, .qml-bar) { display: none; }
#actbar .qm-lim.unknown .qml-warn { display: block; }
#actbar .qm-lim.unknown.dim { opacity: 1; }
/* ==== end 9.123 ==== */
/* ==== 9.124 design pass: History records draw line icons instead of text glyphs (· ? ↑ ⎇) ==== */
.fi-ask { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.audit .aicon { display: flex; align-items: center; justify-content: center; }
.audit .aicon > .fi { width: 13px; height: 13px; --fic: var(--faint-t); }
.audit .arow.risk-push .aicon > .fi { --fic: var(--warn); }
.audit .aicon > .adot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint-t); }
.audit .arow.risk-prod .aicon > .adot { width: 7px; height: 7px; background: var(--bad); }
/* ==== end 9.124 ==== */
/* ==== 9.126 design pass: a long session-bar chip ends in "…" (inline-flex cut it mid-letter, gui.py clip scan) ==== */
.head.detail.one .dh-chips span.chip { display: inline-block; line-height: 20px; }
/* ==== end 9.126 ==== */
/* ==== 9.127 design pass: the Resume filters are one 30 px control set (search, project, agent, period) ==== */
.resume-filters > input, .resume-filters > select, .resume-project { height: 30px; box-sizing: border-box; }
.resume-project { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line); background: var(--well); color: var(--fg); font-weight: 400; }
.resume-project .rp-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.resume-project > .fi { flex: none; width: 12px; height: 12px; --fic: var(--mut); }
.resume-project-wrap > .icon { height: 30px; }
/* ==== end 9.127 ==== */
/* ==== 9.128 design pass: Start work's project search has its icon inside the field, Options a chevron ==== */
.wk-search { position: relative; }
.wk-search > .wk-sico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.wk-search > .wk-sico > .fi { width: 14px; height: 14px; --fic: var(--mut); }
.wk-search > input[type=search] { height: 32px; box-sizing: border-box; padding-left: 29px; }
.startopts > summary { align-items: center; }
.startopts > summary::before, .startopts[open] > summary::before { content: ''; flex: none; width: 12px; height: 12px; background-color: var(--mut);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-fast, .12s) ease; }
.startopts[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .startopts > summary::before { transition: none; } }
/* ==== end 9.128 ==== */
/* ==== 9.129 design pass: Conversation glyphs - tool rows get a turning chevron, the composer size button icons, 'To <session>' ==== */
.fi-expand { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' x2='14' y1='3' y2='10'/%3E%3Cline x1='3' x2='10' y1='21' y2='14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' x2='14' y1='3' y2='10'/%3E%3Cline x1='3' x2='10' y1='21' y2='14'/%3E%3C/svg%3E"); }
.fi-shrink { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='14' x2='21' y1='10' y2='3'/%3E%3Cline x1='3' x2='10' y1='21' y2='14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='14' x2='21' y1='10' y2='3'/%3E%3Cline x1='3' x2='10' y1='21' y2='14'/%3E%3C/svg%3E"); }
.convo .trow .tcaret { align-self: center; width: 10px; height: 10px; background-color: var(--faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--dur-fast, .12s) ease; }
.convo .trow.open .tcaret { transform: rotate(90deg); }
.composer .csize { display: inline-flex; align-items: center; gap: 5px; }
.composer .csize > .fi { width: 13px; height: 13px; --fic: currentColor; }
@media (prefers-reduced-motion: reduce) { .convo .trow .tcaret { transition: none; } }
/* ==== end 9.129 ==== */
/* ==== 9.130 design pass: the palette's sub-action chevron is an icon; no hole flag in its hints ==== */
.pitem .psub { display: inline-flex; align-items: center; justify-content: center; height: 20px; }
.pitem .psub > .fi { width: 12px; height: 12px; --fic: currentColor; }
/* ==== end 9.130 ==== */

/* ==== 9.131 design pass: the commit split's caret is an icon and dims with a disabled Commit, so the pair reads as one button ==== */
.gfoot .split > .split-more { display: inline-flex; align-items: center; }
.gfoot .split > .split-more .fi { --fic: currentColor; width: 14px; height: 14px; }
.gfoot .split:has(> button:first-child:disabled) > .split-more:not(:hover):not(:focus-visible) { opacity: .45; }
/* Settings: a changed field's reset is a quiet text button under the control, aligned with the help text */
.settings .st-ctl > .st-reset { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0; border: 0; background: none;
  color: var(--mut); font-size: 11.5px; cursor: pointer; }
.settings .st-ctl > .st-reset .fi { --fic: currentColor; width: 12px; height: 12px; }
.settings .st-ctl > .st-reset:hover, .settings .st-ctl > .st-reset:focus-visible { color: var(--fg); }
/* ==== end 9.131 ==== */

/* ==== 9.132 design pass: remaining text glyphs become line icons ==== */
/* a glyph that was a button's text (✕ ↻ ⤢ ⤡ ⋯ ☰ ⎇) is a .fi with .gi: it takes the text's colour and sits on its line */
.fi.gi { width: 12px; height: 12px; --fic: currentColor; vertical-align: -2px; }
button:not(.mini) > .fi.gi { width: 14px; height: 14px; }
.tlabel .pane-tools button.mini { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; }
.chip.dh-branch > .fi.gi, .fstatus .br > .fi.gi { width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; }   /* the chip keeps its ellipsis: no flex */
/* the HTTP request row and the inbox groups fold with the chevron of the Conversation's tool rows (9.129) */
.hpchev, button.ibx-ghead .caret { width: 10px; height: 10px; background-color: var(--faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--dur-fast, .12s) ease; }
.hpchev { margin: 0 2px; }
.hpreq-toggle[aria-expanded="true"] .hpchev, button.ibx-ghead[aria-expanded="true"] .caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .hpchev, button.ibx-ghead .caret { transition: none; } }
/* ==== end 9.132 ==== */

/* ==== 9.133 design pass: the last close / more / caret glyphs are line icons sized to their button ==== */
:is(.ftab .fclose, .ht-x, button.tclose, .slot-x, .review-close, .ks-x, .stackjob .ic) > .fi.fi-x { --fic: currentColor; width: 14px; height: 14px; }
.ftab .fclose { display: inline-flex; align-items: center; }
.ftab .fclose > .fi, .ht-x > .fi, button.tclose > .fi { width: 12px; height: 12px; }
.review-close, .ks-x, .review-more-btn { display: inline-flex; align-items: center; justify-content: center; }
.review-close > .fi { width: 18px; height: 18px; }
button > .fi.fi-x, button > .fi.fi-more, button > .fi.fi-chev-d, button > .fi.fi-chev-l, button > .fi.fi-chev-r { --fic: currentColor; flex: none; }
.mini > .fi:only-child { width: 12px; height: 12px; vertical-align: -2px; }
.ht-pick > .fi, .psplit > .pcaret > .fi { width: 12px; height: 12px; }
.psplit > .pcaret { display: inline-flex; align-items: center; }
.layoutctl button.beside i.chev { width: 12px; height: 12px; --fic: var(--faint-t); }
.bhead > button.icon > .fi { width: 14px; height: 14px; }
/* Timesheet: a session without an issue is one row - name, project, the issue field and Assign, like the manual rows */
.tsheet ul.ts-assigns { list-style: none; margin: 4px 0; padding: 0; }
.tsheet li.ts-assign { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.tsheet li.ts-assign .ts-aname { flex: 0 1 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsheet li.ts-assign input { flex: 0 1 260px; min-width: 120px; }
/* the session bar's button chips ("✓ isolated") squeezed by a blocked session's actions end in "…" like the span chips (9.126) */
.head.detail.one .dh-chips button.chip { display: inline-block; line-height: 20px; }
/* a toast never covers the approval card's Deny / Allow: beside the card it starts at the rail, where there is no room
   (narrow window, the drawer open) it goes under the 44 px session bar */
body.pending-open #toasts { left: calc(var(--ab-w, 64px) + 16px); transform: none; align-items: flex-start;
  max-width: calc(100vw - var(--ab-w, 64px) - min(460px, 100vw) - 64px); }
body.pending-open.drawer-open #toasts { left: 50%; transform: translateX(-50%); align-items: center; max-width: calc(100vw - 32px); top: 56px; bottom: auto; }
@media (max-width: 899px) { body.pending-open #toasts { left: 50%; transform: translateX(-50%); align-items: center; max-width: calc(100vw - 32px); top: 56px; bottom: auto; } }
/* ==== end 9.133 ==== */
/* ==== 9.134 final browser walk ==== */
/* the open context panel is a column like the agent drawer: the approval card sits left of it, never over its commit box
   (at 1440 it lay over the commit message and Commit) - only where the 460 px card fits the detail beside the queue */
body:not(.no-inspector):not(.drawer-open) #pending { right: calc(var(--ctx-w) + 16px); }   /* the drawer has its own rules above */
@media (max-width: 1299px) { body:not(.no-inspector):not(.drawer-open):not(.queue-mini):not(.no-queue) #pending { right: 16px; } }
@media (max-width: 1000px) { body:not(.no-inspector):not(.drawer-open) #pending { right: 16px; } }
/* Settings: the search stays at the top of the side nav while its long list scrolls (it scrolled away from Isolation check on) */
.settings .st-side > .st-searchbox { position: sticky; top: 0; z-index: 1; }
/* ==== end 9.134 ==== */

/* ==== 9.135 grid layout cards ==== */
/* a preset that does not fit this size looked like every other card and a click did nothing */
.besidemenu .lcard:disabled { opacity: .4; cursor: default; }
.besidemenu .lcard:disabled:hover { border-color: transparent; }
/* ==== end 9.135 ==== */

/* ==== 9.136 dead things wait folded ==== */
.feed-st-done > summary { cursor: pointer; padding: 4px 2px; }
.palette .pitem.punfold .plabel { color: var(--mut); }
/* ==== end 9.136 ==== */

/* ==== 9.141 sessions a restart interrupted (restorenotice.ts, Pencil board zez6r) ==== */
.st.intr, .dot.st-intr { background: transparent; border: 2px solid var(--warn); border-right-color: transparent; }
.q-sec.interrupted { border-top: 1px solid var(--line); margin-top: 12px; }
.q-sec.interrupted .qi-title { color: var(--fg); }
.q-intr-acts { display: inline-flex; gap: 12px; }
/* board zez6r S1: one row - the title, Restore… · Dismiss, the count */
.q-sec.interrupted .q-sechead { flex-wrap: nowrap; align-items: center; gap: 10px; }
.q-sec.interrupted .q-heading { display: contents; }
.q-sec.interrupted .q-sectitle { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-sec.interrupted .q-hint { order: 1; flex: none; }
.q-sec.interrupted .q-count { order: 2; }
.q-intr-acts button { font-size: 11px; }
.q-intr-acts button.mut { color: var(--mut); }
.q-sec.interrupted .qi-ops { visibility: hidden; }
.q-sec.interrupted .qi:hover .qi-ops, .q-sec.interrupted .qi:focus-within .qi-ops, .q-sec.interrupted .qi.sel .qi-ops { visibility: visible; }
.endbar.interrupted { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); }
.endbar.interrupted strong { color: var(--warn); }
.rn-tile { background: var(--warn-soft); color: var(--warn); }
.rn-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rn-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.rn-row + .rn-row { border-top: 1px solid var(--line); }
.rn-row:has(input:disabled:not(:checked)) { cursor: default; opacity: .6; }
.rn-row input { accent-color: var(--link); margin: 0; flex: none; }
.rn-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rn-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-proj { font-size: 11px; color: var(--faint-t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-was { font-size: 11px; color: var(--faint-t); flex: none; width: 104px; padding: 2px 0; border-radius: 10px; background: var(--tile); text-align: center; }
.rn-was.warn { color: var(--warn); background: var(--warn-soft); }
.rn-row:has(input:not(:checked)) .rn-text b { color: var(--mut); }
.rn-how { font-size: 11px; color: var(--mut); flex: none; width: 150px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-how.warn { color: var(--warn); } .rn-how.ok { color: var(--ok); } .rn-how.bad { color: var(--bad); }
.rn-slots { font-size: 12px; color: var(--mut); }
.rn-slots.warn { color: var(--warn); }
.rn-esc { font-size: 10px; color: var(--faint-t); }
@media (max-width: 600px) { .rn-row { flex-wrap: wrap; } .rn-how { width: auto; text-align: left; } }
/* ==== end 9.141 ==== */
/* Settings A: quiet navigation, descriptive rows and section-local saving. */
.settings { flex-direction: column; }
.settings .st-layout { grid-template-columns: 218px minmax(0, 1fr); gap: 0; height: 100%; }
.settings .st-side { padding: 16px 14px 24px 6px; gap: 2px; border-right: 1px solid var(--line); }
.settings .st-navtitle { font-size: 18px; font-weight: 600; padding: 0 8px 16px; }
.settings .st-searchbox { flex: none; height: 32px; background: var(--well); border-color: transparent; margin-bottom: 12px; }
.settings .st-gtitle { color: var(--mut); font-size: 10px; padding-top: 20px; }
.settings .st-navi { min-height: 32px; border-radius: var(--r-sm); color: var(--mut); }
.settings .st-navi.on { color: var(--fg); background: var(--tile); box-shadow: none; font-weight: 600; }
.settings .st-sec { background: transparent; border: 0; border-radius: 0; padding: 24px 32px 0; scroll-padding: 24px; }
.settings .st-sec h2 { font-size: 26px; font-weight: 600; letter-spacing: -.025em; margin: 8px 0; }
.settings .st-sec > p { line-height: 1.6; max-width: 800px; }
.settings .st-fieldgroup { flex: none; min-width: 0; }
.settings .st-fieldgroup > h3 { margin: 26px 0 0; padding-bottom: 10px; font-size: 11px; font-weight: 600; color: var(--mut); text-transform: uppercase; letter-spacing: .065em; }
.settings .st-field { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; padding: 20px 0; align-items: start; }
.settings .st-field.wide { grid-template-columns: minmax(0, 1fr); }
.settings .st-description { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.settings .st-label { padding: 0; font-weight: 500; line-height: 1.5; }
.settings .st-help { line-height: 1.6; overflow-wrap: anywhere; }
.settings .st-field.modified > .st-description > .st-label::after { content: ' · Unsaved'; color: var(--warn); font-size: 11px; font-weight: 400; }
.settings .st-description > .st-badge { color: var(--mut); background: transparent; border: 0; border-radius: 0; margin: 2px 0 0; padding: 0; font-size: 11px; }
.settings .st-more summary { font-size: 11px; }
.settings .st-more > div { padding-top: 8px; line-height: 1.6; overflow-wrap: anywhere; }
.settings .st-ctl { gap: 8px; padding-top: 2px; }
.settings .st-ctl select { width: 100%; }
.settings .st-ctl .st-reset { color: var(--mut); }
.settings .st-apply { color: var(--mut); font-size: 11px; overflow-wrap: anywhere; }
.settings .st-savebar { flex: none; padding: 14px 0; background: var(--page); gap: 12px; }
.settings .st-bar { flex: none; background: transparent; padding: 16px 0; flex-wrap: wrap; }
.settings .st-load-error { padding: 12px; }
.settings .st-review-actions { width: 100%; }
@container st (max-width: 850px) {
  .settings .st-layout { grid-template-columns: 186px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .settings .st-side { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: normal; }
  .settings .st-searchbox, .settings .st-found { flex-basis: auto; }
  .settings .st-sec { padding: 18px 20px 0; }
  .settings .st-field { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@container st (max-width: 560px) {
  .settings .st-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings .st-side { display: block; white-space: nowrap; overflow: auto hidden; max-height: 120px; padding: 4px 0 8px; border: 0; }
  .settings .st-navtitle, .settings .st-side > div.st-gtitle { display: none; }
  .settings .st-side > .st-navi, .settings .st-side > .st-gfold { display: inline-flex; vertical-align: middle; }
  .settings .st-side > .st-searchbox, .settings .st-side > .st-found { position: sticky; left: 0; white-space: normal; }
  .settings .st-searchbox { margin-bottom: 6px; }
  .settings .st-sec { padding: 16px 12px 0; }
  .settings .st-savebar { flex-wrap: wrap; gap: 8px; }
  .settings .st-savebar .st-scount { flex-basis: calc(100% - 24px); }
}

/* Remote servers — Claude SFh35 layout, using Piper's existing fonts, theme and controls. */
.server-settings { display:flex; flex-direction:column; flex:1; gap:0; min-height:0; max-width:100%; }
.server-settings>* { flex-shrink:0; }
.server-settings>:not(button):not(.st-savebar) { width:100%; max-width:760px; }
.server-settings .small { font-size:12px; }
.server-list { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.settings button.server-row { display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:12px 16px; border:0; border-radius:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; }
.server-row:last-child { border-bottom:0; } .server-row:hover { background:var(--tile); }
.server-row-main { display:grid; gap:4px; min-width:0; flex:1; } .server-row-main>b { font-size:13px; font-weight:600; } .server-row-main>.mono { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--faint-t); }
.server-row-summary { display:none; font-size:12px; color:var(--mut); }
.server-mode { min-width:90px; } .server-count { width:130px; flex:none; text-align:right; font-size:11px!important; color:var(--faint-t); font-variant-numeric:tabular-nums; }
.server-dot { display:inline-block; width:8px; height:8px; border:1px solid var(--faint-t); border-radius:50%; flex:none; } .server-dot.online { background:var(--ok); border-color:var(--ok); }
.server-empty { display:flex; flex-direction:column; align-items:flex-start; gap:10px; border:1px solid var(--line); background:var(--well); padding:24px; border-radius:8px; }
.server-empty p { margin:0; line-height:1.5; } .server-empty button,.settings button.server-add { display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.settings button.server-add { margin-top:12px; border:1px solid var(--line); background:transparent; color:var(--mut); text-align:left; min-height:33px; padding:8px 12px; align-self:flex-start; }
.server-add>.fi { width:14px; height:14px; } .server-empty button>.fi { width:13px; height:13px; }
.server-list-note { margin:14px 0 0; font-size:12px; color:var(--faint-t); }
.settings button.server-back { display:inline-flex; align-items:center; gap:4px; align-self:flex-start; color:var(--mut); padding:12px 0 6px; margin:0; }
.server-back>.fi { width:13px; height:13px; } .server-title { font-size:16px; font-weight:600; margin:0 0 10px; }
.server-crumb { font-size:11px; color:var(--faint-t); }
.st-sec:has(.server-title)>.st-crumb,.st-sec:has(.server-title)>h2,.st-sec:has(.server-title)>p.mut { display:none; }
.server-status { display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-height:28px; margin-bottom:12px; } .server-status>button { margin-left:auto; }
.server-group { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--faint-t); margin:0; padding:18px 0 6px; }
.server-field label { font-size:13px; } .server-field .mut { margin-top:4px; line-height:1.45; } .server-field input { width:100%; max-width:100%; }
.server-field input[readonly] { background:transparent; border-color:transparent; padding-left:0; } .server-fixed { display:block; margin:8px 0 14px; color:var(--faint-t); }
.server-levels { padding:0; gap:8px; } .server-levels .sc-level { gap:12px; padding:14px; border-radius:8px; }
.server-levels .sc-level:disabled { opacity:1; cursor:default; }
.server-mode-title { display:flex; align-items:center; gap:8px; } .server-mode-title>b { font-weight:600; } .server-recommended { border-radius:4px; padding:1px 6px; color:var(--ok); background:var(--ok-soft); font-size:10px; font-weight:400; }
.server-install { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px; background:var(--well); border:1px solid var(--line); border-radius:8px; margin:12px 0; } .server-install p { margin:0; line-height:1.5; }
.server-install-actions { display:flex; gap:12px; align-items:center; } .server-install-alternative { display:flex; align-items:center; gap:8px; }
.server-root-paths { width:100%; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:10px 12px; box-sizing:border-box; }
.server-root-paths>div { display:grid; grid-template-columns:70px minmax(0,1fr); gap:12px; line-height:1.6; }
.server-root-paths>div>span:last-child { overflow-wrap:anywhere; }
.server-install-error { display:flex; align-items:flex-start; gap:8px; } .server-install-error>.server-error-dot { margin-top:4px; }
.so-choice[hidden] { display:none; }
.server-capabilities { display:flex; gap:20px; flex-wrap:wrap; margin:0; padding:4px 0 10px; } .server-capabilities>span { display:inline-flex; gap:6px; align-items:center; } .server-capabilities .fi { width:13px; height:13px; } .server-capabilities .fi-check { --fic:var(--ok); }
.server-more { border-top:1px solid var(--line); padding:12px 0; } .server-more summary { cursor:pointer; font-size:12px; display:flex; align-items:center; gap:8px; min-height:15px; list-style:none; } .server-more summary>span { color:var(--faint-t); } .server-more p { line-height:1.5; }
.server-more>summary::-webkit-details-marker { display:none; }
.server-more>summary::before { content:''; width:13px; height:13px; flex:none; background:var(--mut); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; } .server-more[open]>summary::before { transform:rotate(90deg); }
.settings button.server-remove { align-self:flex-start; color:var(--bad); margin:20px 0; } .server-remove-row { display:flex; align-items:center; gap:12px; } .server-remove-row .server-remove:disabled { opacity:.4; }
.server-settings .st-savebar { margin-top:auto; width:100%; }
.server-provider-list { margin:12px 0 0; } .server-provider-head { display:grid; grid-template-columns:265px minmax(0,1fr); gap:12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--faint-t); padding-bottom:8px; }
.server-provider { display:grid; grid-template-columns:240px 13px minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 0; min-height:43px; border-top:1px solid var(--line); font-size:12px; } .server-provider>span { min-width:0; overflow-wrap:anywhere; } .server-provider label { min-width:0; } .server-provider input { width:100%; min-width:0; height:32px; } .server-provider-label { display:none; } .server-providers>p { max-width:600px; } .server-providers>p,.server-providers>.server-provider-list { margin-left:21px; } .server-provider-new button:disabled { opacity:.5; }
.wk-running { font-size:11px; color:var(--faint-t); white-space:nowrap; } .wk-running:empty { display:none; }
.wk-host-row { display:grid; grid-template-columns:minmax(0,1fr) 176px; gap:12px; } .wk-host-field,.wk-runtime-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.wk-host>.server-dot { width:7px; height:7px; } .wk-runtime button[hidden],.wk-agent button[hidden] { display:none; }
.wk-runtime.direct-only { background:none; border:0; justify-content:flex-start; padding:0; } .wk-runtime .wk-direct-only { font-size:12px; padding:0 2px; align-self:center; }
.so-line { display:flex; align-items:center; gap:18px; } .so-line>.wk-runtime { width:176px; flex:none; }
.so-native { display:flex; gap:8px; align-items:flex-start; margin:0; line-height:1.45; font-size:12px; flex:1; } .so-native>.fi { width:13px; height:13px; flex:none; --fic:var(--mut); }
.wk-host-status { display:flex; gap:10px; align-items:center; padding:10px 12px; background:var(--well); border:1px solid var(--line); border-radius:6px; } .wk-host-status>span.mut { flex:1; font-size:12px; } .wk-host-status>button { flex:none; }
.server-unavailable { background:var(--well); border-color:var(--line); color:var(--mut); } .qi-host { color:var(--faint-t); } .dh-host .fi { width:11px; height:11px; }
.wk-host-menu { width:452px; max-width:calc(100vw - 32px); }
.wk-host-menu .micon { display:flex; justify-content:center; align-items:center; margin-right:0; }
.wk-host-menu .fi-host-online,.wk-host-menu .fi-host-offline { width:7px; height:7px; mask:none; -webkit-mask:none; border-radius:50%; background:var(--ok); } .wk-host-menu .fi-host-offline { background:transparent; border:1px solid var(--faint-t); }
.wk-worktree-mobile { display:none; }
.server-unknown-dot,.server-error-dot { width:8px; height:8px; border-radius:2px; background:var(--mut); flex:none; } .server-error-dot { background:var(--bad); }
.server-install-progress { height:3px; flex:none; margin:0 0 12px; overflow:hidden; background:var(--line); } .server-install-progress::before { content:''; display:block; width:110px; height:3px; background:var(--mut); animation:server-installing 1.6s ease-in-out infinite alternate; } @keyframes server-installing { to { transform:translateX(250px); } }
.server-install-time { font-size:12px; margin:0 0 12px; }
.server-ssh-command { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:8px 10px; border-radius:6px; background:var(--page); } .server-ssh-command code { overflow-wrap:anywhere; } .server-ssh-command .fi { width:13px; height:13px; }
@media(max-width:600px) {
 .wk-host-row { grid-template-columns:minmax(0,1fr); gap:16px; } .so-line { flex-direction:column; align-items:stretch; gap:10px; } .so-line>.wk-runtime { width:100%; } .so-native { flex:auto; }
 .settings button.server-row { display:grid; grid-template-columns:8px minmax(0,1fr) 14px; padding:12px 14px; gap:12px; } .server-row>.server-mode,.server-row>.server-count { display:none; } .server-row>.fi { display:block; width:14px; height:14px; } .server-row-summary { display:block; }
 .settings button.server-add { width:100%; margin-top:10px; }
 .server-provider-head { display:none; } .server-provider { grid-template-columns:13px minmax(0,1fr) auto; gap:8px; } .server-provider>span:first-child { grid-column:1/-1; } .server-provider-new { display:flex; flex-direction:column; align-items:stretch; gap:12px; } .server-provider-label { display:block; margin-bottom:6px; } .server-provider-arrow { display:none; }
 .server-install { padding:14px; } .server-install-actions { width:100%; flex-direction:column; gap:8px; } .server-install-actions>button { width:100%; } .server-install-alternative { flex-direction:column; align-items:flex-start; gap:2px; }
 .server-status { display:grid; grid-template-columns:12px minmax(0,1fr); align-items:start; }
 .server-status>.server-dot,.server-status>.server-unknown-dot,.server-status>.server-error-dot { margin-top:5px; }
 .server-status>button { grid-column:2; justify-self:start; margin-left:0; } .wk-host-status { flex-wrap:wrap; } .server-unavailable { flex-wrap:wrap; } .server-more summary { flex-wrap:wrap; align-items:flex-start; } .server-remove-row { flex-wrap:wrap; }
 .wk-host-menu { width:calc(100vw - 32px); }
}
@media(max-width:560px) { .so-choices { flex-direction:column; align-items:flex-start; gap:8px; } .wk-where-long,.wk-worktree-desktop,.wk-resume-long { display:none; } .wk-worktree-mobile { display:inline; } }

.fi-server { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%277%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%2718%27%20height%3D%277%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M7%206.5h.01M7%2017.5h.01%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%277%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%2718%27%20height%3D%277%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M7%206.5h.01M7%2017.5h.01%27%2F%3E%3C%2Fsvg%3E"); }

.fi-monitor { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%273%27%20width%3D%2720%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2021h8M12%2017v4%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%273%27%20width%3D%2720%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2021h8M12%2017v4%27%2F%3E%3C%2Fsvg%3E"); }

.qi-offline>.st{background:transparent;border:1px solid var(--faint);box-shadow:none;animation:none}

/* Resume host selection — Claude Pen RS1–RS3 (R402mz/CbS2I/j2jbO). */
.resume-host{display:flex;align-items:center;gap:8px;min-width:120px;max-width:180px;height:30px}.resume-host>.fi{margin-left:auto}.resume-filters.with-host{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(140px,1.6fr) minmax(92px,1fr) auto auto}.resume-filters.with-host>input{min-width:0;width:100%}.resume-filters.with-host>.resume-project-wrap{min-width:0}.resume-filters.with-host .resume-project{max-width:100%;overflow:hidden}.resume-filters.with-host .rp-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.resume-no-history{flex:1;min-height:0;padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--well)}.resume-no-history h3{margin:0 0 12px;font-size:14px}.resume-no-history p{line-height:1.6}.resume-footer:has(.resume-new-direct) .resume-new-direct{margin-left:auto}.resume-footer button[hidden]{display:none}
@media(max-width:700px){.resume-filters.with-host{grid-template-columns:minmax(0,1fr) auto auto}.resume-filters.with-host>.resume-host,.resume-filters.with-host>input{grid-column:1/-1;width:100%;max-width:none}.resume-no-history{padding:18px}.resume-footer:has(.resume-new-direct) .resume-new-direct{width:100%;font-size:12px}}

.server-status{max-width:900px}.server-locked{display:flex;align-items:center;gap:8px;min-height:28px}.server-locked>.fi{color:var(--mut);flex:none}.server-locked>input{flex:1;min-width:0}

.fi-shield-off { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%202%2020%2020%22%2F%3E%3Cpath%20d%3D%22M5%205a1%201%200%200%200-1%201v7c0%205%203.5%207.5%207.67%208.94a1%201%200%200%200%20.67.01c2.35-.82%204.47-1.97%205.86-3.53%22%2F%3E%3Cpath%20d%3D%22M9.309%203.652A12.252%2012.252%200%200%200%2011.24%202.28a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201v7a9.784%209.784%200%200%201-.08%201.264%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%202%2020%2020%22%2F%3E%3Cpath%20d%3D%22M5%205a1%201%200%200%200-1%201v7c0%205%203.5%207.5%207.67%208.94a1%201%200%200%200%20.67.01c2.35-.82%204.47-1.97%205.86-3.53%22%2F%3E%3Cpath%20d%3D%22M9.309%203.652A12.252%2012.252%200%200%200%2011.24%202.28a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201v7a9.784%209.784%200%200%201-.08%201.264%22%2F%3E%3C%2Fsvg%3E"); }
.fi-laptop { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22black%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M20%2016V7a2%202%200%200%200-2-2H6a2%202%200%200%200-2%202v9m16%200H4m16%200%201.28%202.55a1%201%200%200%201-.9%201.45H3.62a1%201%200%200%201-.9-1.45L4%2016%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); mask-image:url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22black%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M20%2016V7a2%202%200%200%200-2-2H6a2%202%200%200%200-2%202v9m16%200H4m16%200%201.28%202.55a1%201%200%200%201-.9%201.45H3.62a1%201%200%200%201-.9-1.45L4%2016%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); }
.fi-settings { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22black%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); mask-image:url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22black%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); }
.fi-minus { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22black%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M5%2012h14%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); mask-image:url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22black%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M5%2012h14%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); }
.fi-copy { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22black%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Crect%20width%3D%2214%22%20height%3D%2214%22%20x%3D%228%22%20y%3D%228%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); mask-image:url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22black%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Crect%20width%3D%2214%22%20height%3D%2214%22%20x%3D%228%22%20y%3D%228%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); }

/* Claude A1–A4: availability stays within the existing Agent row and native host note. */
.wk-agent-heading { display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:6px; }
.wk-agent-status { font-size:11px; white-space:nowrap; }
.wk-agent-note { margin:0; }
.wk-agent button:disabled { opacity:1; }

/* Security — Claude's unified Settings panel (2026-10-24). Shared rows and switches. */
.sc-panel { flex: none; min-width: 0; }
.settings .sc-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.settings .sc-heading > span { text-transform: none; letter-spacing: normal; font-weight: 400; text-align: right; }
.sc-panel .sc-area-actions, .sc-custom-actions, .sc-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.sc-panel .sc-area-actions button { display: inline-flex; align-items: center; gap: 6px; }
.sc-panel .sc-options { padding-bottom: 8px; }
.sc-panel .sc-options .st-description { padding-left: 20px; }
.sc-panel .st-help:empty { display: none; }
.settings .sc-options .st-field { padding-block: 10px; }
.sc-panel .sc-required { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--mut); font-size: 11px; font-weight: 400; }
.sc-panel .sc-plain { align-self: flex-start; color: var(--mut); text-align: left; }
.sc-panel .switch:has(input:disabled) { opacity: .55; cursor: default; }
.sc-panel label.switch.sc-mixed .track { background: var(--line); }
.sc-panel label.switch.sc-mixed .track::after { background: var(--fg); width: 10px; height: 2px; border-radius: 0; top: 7px; left: 9px; transform: none; }
.sc-panel .sc-option.focus { animation: sc-focus 1.6s ease-out; }
@keyframes sc-focus { from { background: var(--link-soft); } to { background: transparent; } }
@container st (max-width: 560px) {
  .sc-panel .sc-options .st-description { padding-left: 0; }
  .settings .sc-panel .sc-options .st-field { grid-template-columns: minmax(0, 1fr) auto; }
  .sc-panel .sc-option .sc-kind-code { display: none; }
  .settings .sc-heading { flex-wrap: wrap; }
}

.sc-panel .sc-area-actions button[aria-expanded="true"] .fi { transform: rotate(180deg); }

.sc-panel .sc-switchline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sc-panel .sc-kind-code, .sc-panel .sc-tag { font-size: 10px; color: var(--faint-t); font-weight: 400; overflow-wrap: anywhere; }
.sc-panel .sc-tag { margin-left: 8px; }
.sc-panel .sc-mobile-code { display: none; }
.sc-panel .sc-own, .sc-panel .sc-off { color: var(--faint-t); line-height: 1.6; }
@container st (max-width: 560px) { .sc-panel .sc-option .sc-mobile-code { display: block; } }

/* Claude's OpenPencil profile block: a page-wide choice above the individual settings. */
.sc-profile-block { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; }
.settings .sc-profile-block > .sc-heading { border-bottom: 1px solid var(--line); margin-bottom: 0; }
.sc-profile-lead { margin: 0; }
.sc-profile-lead strong { font-weight: 600; }
.sc-profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-profiles .sc-profile-card { flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 16px; text-align: left; background: transparent; min-width: 0; }
.sc-profiles .sc-profile-card.on { background: var(--link-soft); }
.sc-profile-card .sn-choice-title, .sc-profile-status .sn-choice-title { flex-wrap: wrap; gap: 6px 10px; }
.sc-profile-card b, .sc-profile-status b { font-size: 14px; font-weight: 600; }
.sc-profile-card .sc-radio, .sc-profile-status .sc-radio { margin-top: 0; }
.sc-profile-card.on .sc-radio, .sc-profile-status .sc-radio { border: 4px solid var(--link); }
.sc-profile-body { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; }
.sc-profile-body > .mut { line-height: 1.45; }
.sc-profile-count { color: var(--faint-t); }
.sc-profile-card.on .sc-profile-count { color: var(--fg); }
.sc-profile-status { gap: 16px; padding: 12px 16px; border-color: var(--link); background: var(--link-soft); }
.sc-profile-status-copy { min-width: 0; flex: 1; }
.sc-profile-status-help { padding-left: 24px; margin-top: 4px; }
.sc-profile-unsaved { color: var(--warn); }
.sc-profile-foot { display: flex; align-items: flex-start; gap: 24px; }
.sc-profile-required { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.sc-profile-required .fi { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.sc-profile-foot > .sc-profile-required { flex: 1; }
.sc-profile-foot > .sc-plain { flex: none; }
.sc-profile-impact { padding: 12px 14px; border-radius: 8px; background: var(--well); }
.sc-profile-impact p { margin: 6px 0; }
@container st (max-width: 560px) {
  .sc-profiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sc-profiles .sc-profile-card { padding: 12px 14px; }
  .sc-profile-status { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .sc-profile-status .sc-custom-actions { padding-left: 24px; }
  .sc-profile-foot { flex-direction: column; gap: 8px; }
}

/* Claude's mobile-settings.fig: local Settings → Mobile access; shared tokens and controls. */
.mobile-settings .mobile-status { margin: 20px 0 18px; }
.mobile-settings .mobile-status .row { margin: 0; gap: 8px; }
.mobile-settings .mobile-status p { margin: 4px 0 0 16px; }
.mobile-phones { list-style: none; padding: 0; }
.mobile-phone { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mobile-phone:last-child { border-bottom: 0; }
.mobile-phone .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.mobile-phone > .fi { color: var(--mut); flex: none; }
.mobile-phone button { font-size: 12px; flex: none; }
.mobile-name, .mobile-pair { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.modal:has(.mobile-name) { width: min(480px, calc(100vw - 32px)); }
.mobile-name p, .mobile-pair p { margin: 0; }
.mobile-name label { margin-bottom: -6px; }
.mobile-name .protected-callout, .mobile-pair .protected-callout { margin: 0; }
.mobile-name .protected-callout p, .mobile-pair .protected-callout p { margin-top: 8px; }
.mobile-name .row, .mobile-pair .row { margin-top: 0; }
.mobile-pair-body { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.mobile-qr { width: 240px; height: 240px; flex: none; border-radius: 8px; overflow: hidden; background: #fff; }
.mobile-qr svg { display: block; width: 240px; height: 240px; }
.mobile-qr.expired { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--well); border: 1px solid var(--line); color: var(--warn); }
.mobile-qr.expired .fi { width: 28px; height: 28px; }
.mobile-pair-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; flex: 1; }
.mobile-pair-side ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 14px; }
.mobile-pair-side li { padding-left: 6px; }
.mobile-wait { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mobile-wait .spinner { width: 14px; height: 14px; }
.mobile-wait .startup-clock { padding: 0; font-size: 12px; flex-basis: auto; }
@media (max-width: 560px) { .mobile-pair-body { flex-direction: column; align-items: center; gap: 14px; } .mobile-pair-side { width: 100%; } }
.mobile-settings { max-width: 760px; }
.mobile-phone b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.mobile-pair-side ol { padding: 0; list-style: none; counter-reset: mobile-step; }
.mobile-pair-side li { padding: 0; display: flex; gap: 10px; align-items: flex-start; counter-increment: mobile-step; }
.mobile-pair-side li::before { content: counter(mobile-step); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--tile); color: var(--mut); text-align: center; font-size: 11px; line-height: 20px; }
.modal:has(.mobile-pair.paired) { width: min(420px, calc(100vw - 32px)); }
.fi-phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2220%22%20x%3D%225%22%20y%3D%222%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2220%22%20x%3D%225%22%20y%3D%222%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3C%2Fsvg%3E"); }
.fi-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); }