/* Deskhand product styles: only what the prototype (app.css) does not have. Tokens only — no raw colours,
   no orange/amber, no monospace (docs/spec/UI-SPEC.md §1). */
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url(/assets/vendor/fonts/golos-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url(/assets/vendor/fonts/golos-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url(/assets/vendor/fonts/golos-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url(/assets/vendor/fonts/golos-cyrillic-500.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url(/assets/vendor/fonts/golos-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url(/assets/vendor/fonts/golos-cyrillic-600.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 700; font-display: swap; src: url(/assets/vendor/fonts/golos-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 700; font-display: swap; src: url(/assets/vendor/fonts/golos-cyrillic-700.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ═══ System (docs/DESIGN.md) ═══════════════════════════════════════════════════════════════════════════════
   Scales and primitives every screen is built from. Legacy class families are mapped onto them at the end of this
   file ("System: legacy"). New UI uses only what is here. */
:root {
  --fs-label: 11px; --fs-meta: 11.5px; --fs-sm: 12.5px; --fs-ui: 13px; --fs-read: 13.5px;
  --fs-h3: 14px; --fs-h2: 16px; --fs-h1: 18px; --fs-page: 22px;
  --s-0_5: 2px; --s-1: 4px; --s-1_5: 6px; --s-2: 8px; --s-2_5: 10px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --r-xs: 6px; --r-sm: 7px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-full: 999px;
  /* one height for inputs, selects and default buttons, wherever they stand (Basecoat Mira has 28) */
  --h-control: 32px;
  /* tokens product.css used without defining them */
  --shadow-2: var(--shadow-pop); --shadow-3: var(--shadow-pop); --sb-active: var(--surface);
}

/* section label (+ count, + a quiet hint on the right) */
.sec-label { display: flex; align-items: baseline; gap: var(--s-1_5); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin: 0 0 var(--s-1_5); }
.sec-n { color: var(--fg-2); font-weight: 500; }
.sec-hint { margin-left: auto; font-size: var(--fs-meta); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* controls: one height side by side */
.input:not([type="checkbox"]):not([type="radio"]), .select, .btn:not([data-size]) { height: var(--h-control); }
.input:not([type="checkbox"]):not([type="radio"]), .select { font-size: var(--fs-ui); }
.switch-row { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; font-size: var(--fs-sm); color: var(--fg-2); cursor: pointer; }

/* field */
.field { display: flex; flex-direction: column; gap: var(--s-1_5); }
.field-label { font-size: var(--fs-ui); font-weight: 500; color: var(--foreground); }
.field-hint { font-size: var(--fs-sm); line-height: 1.45; color: var(--fg-3); }
.field .textarea, .dlg-field .textarea { min-height: 84px; font-size: 14px; line-height: 1.5; resize: vertical; }
.field > .select { width: 100%; }

/* search */
.search { position: relative; display: flex; align-items: center; }
.search > .ic { position: absolute; left: 10px; color: var(--fg-3); pointer-events: none; }
.search > .input { padding-left: 30px; }

/* menu (client-built; Basecoat dropdowns share the metrics) */
.menu { background: var(--popover); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: var(--s-1); display: flex; flex-direction: column; min-width: 200px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-1) calc(-1 * var(--s-1)); }
.menu-h { font-size: var(--fs-meta); color: var(--fg-3); padding: var(--s-1_5) var(--s-2) var(--s-1); }
.menu-i { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-1_5) var(--s-2); border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-ui); color: var(--foreground); text-align: left; cursor: pointer; }
.menu-i:hover, .menu-i.hl, .menu-i:focus-visible { background: var(--hover); outline: none; }
.menu-i > .ic { color: var(--fg-3); flex: none; }
.menu-i small { display: block; font-size: var(--fs-meta); color: var(--fg-3); }
.menu-k { margin-left: auto; font-size: var(--fs-meta); color: var(--fg-3); }
.menu-q { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2_5); border-bottom: 1px solid var(--line); margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-1)) var(--s-1); color: var(--fg-3); }
.menu-q input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-ui); color: var(--foreground); }

/* rows */
.rows { display: flex; flex-direction: column; }
.row-i { display: flex; align-items: center; gap: var(--s-2_5); padding: var(--s-1_5) var(--s-2); border-radius: var(--r-sm); font-size: var(--fs-ui); color: var(--foreground); }
.rows:not(.divided) .row-i:hover { background: var(--hover); }
.rows.divided .row-i { border-radius: 0; padding: var(--s-2) var(--s-1); border-top: 1px solid var(--line); }
.rows.divided .row-i:first-child { border-top: 0; }
.row-i > .ic { color: var(--fg-3); flex: none; }
.row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-t > b, .row-t > .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-m { font-size: var(--fs-sm); color: var(--fg-3); }
.row-tools { display: flex; align-items: center; gap: var(--s-1_5); flex: none; opacity: 0; transition: opacity .12s var(--ease); }
.row-i:hover .row-tools, .row-i:focus-within .row-tools, .row-tools.always { opacity: 1; }
.row-m2 { font-size: var(--fs-meta); color: var(--fg-3); }
.rows.divided .row-i { align-items: flex-start; }
.rows.divided .row-i > .ic, .rows.divided .row-i > .pill { margin-top: 2px; }
.rows.divided .row-tools { align-self: center; }
.row-i.off { opacity: .55; }
.row-t > .t a, .row-m a, .row-m2 a { color: inherit; text-decoration: none; }
.row-t > .t a:hover, .row-m a:hover, .row-m2 a:hover { text-decoration: underline; }
a.row-i { color: inherit; text-decoration: none; }
button.row-i { width: 100%; border: 0; background: none; font: inherit; font-size: var(--fs-ui); color: inherit; text-align: left; cursor: pointer; }
/* hover rows reach 8px past the content edge, so their text lines up with the text around them (like .choices) */
.rows:not(.divided) { margin-inline: calc(-1 * var(--s-2)); }
.rows .row-i[aria-current="true"], .rows .row-i[aria-selected="true"], .rows .row-i[aria-current="true"]:hover { background: var(--muted); }
/* row tools: 6 between text buttons, 2 between icon buttons; a form around a button does not count */
.row-tools > [data-size^="icon"] + [data-size^="icon"] { margin-left: calc(var(--s-0_5) - var(--s-1_5)); }
.row-tools > form { display: contents; }
/* a row that opens (kit.rowDetails) */
.row-d > summary { list-style: none; cursor: pointer; }
.row-d > summary::-webkit-details-marker { display: none; }
.row-d > summary:hover { background: var(--hover); }
.row-d > .row-i { align-items: flex-start; }
.row-d > .row-i > .ic { margin-top: 2px; }
.row-chev { flex: none; color: var(--fg-3); transition: transform .15s var(--ease); }
.row-d[open] .row-chev { transform: rotate(180deg); }
.row-d-b { padding: var(--s-1) var(--s-2) var(--s-3) calc(var(--s-2) + 16px + var(--s-2_5)); font-size: var(--fs-read); line-height: 1.55; }
.rows.divided .row-d { border-top: 1px solid var(--line); } .rows.divided .row-d:first-child { border-top: 0; }
.rows.divided .row-d > .row-i { border-top: 0; }
/* a cut: secondary items, closed (kit.cut) */
.disclose > summary { display: inline-flex; align-items: center; gap: var(--s-1_5); padding: var(--s-1) 0; list-style: none; cursor: pointer; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-2); }
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary:hover { color: var(--foreground); }
.disclose > summary > .ic { color: var(--fg-3); transition: transform .15s var(--ease); }
.disclose[open] > summary > .ic { transform: rotate(90deg); }
.disclose > summary > .sec-n { color: var(--fg-3); font-weight: 400; }
.disclose-b { margin-top: var(--s-1); }
/* a numbered how-to (kit.howto) */
.howto-list { margin: 0; padding-left: 18px; list-style: decimal; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-2); }
.howto-list li { padding-left: 2px; }
.howto-list li::marker { color: var(--fg-3); }
.howto-list code { font-family: inherit; background: var(--muted); border-radius: var(--r-xs); padding: 0 4px; overflow-wrap: anywhere; }
/* an input and its buttons side by side: one height */
.inline-form { display: flex; align-items: center; gap: var(--s-2); }
.inline-form > .input, .inline-form > .search, .inline-form > .select { flex: 1; min-width: 0; }
.inline-form > .btn[data-size="icon-sm"] { width: var(--h-control); height: var(--h-control); }
/* a filter line: chips, segments and a search; wraps when narrow (kit.filterBar) */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.filter-bar > .search { flex: 1 1 220px; min-width: 180px; }
/* a one-line composer (kit.askBar) */
.ask-bar { display: flex; align-items: center; gap: var(--s-1_5); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.ask-bar:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.ask-bar > .input { flex: 1; min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: var(--fs-read); }
.ask-bar > .input:focus, .ask-bar > .input:focus-visible { box-shadow: none; outline: none; }
.ask-bar > .btn { flex: none; border-radius: var(--r-full); }
/* media tiles (kit.tiles / tile) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-3); }
.tile { margin: 0; min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.tile-m { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sunk); color: var(--fg-3); }
.tile-m > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-m > .ic { width: 28px; height: 28px; }
.tile figcaption { display: flex; align-items: flex-start; gap: var(--s-1); min-width: 0; padding: var(--s-1_5) var(--s-1) var(--s-2) var(--s-2_5); }
.tile .row-t > .t { font-size: var(--fs-sm); }
.tile .row-m2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-tools { display: flex; flex: none; }
/* icon tile: a rounded square with an icon (kit.iconTile) */
.icon-tile { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--muted); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
.icon-tile-lg { width: 44px; height: 44px; border-radius: var(--r-lg); color: var(--foreground); }
.icon-tile-lg > .ic { width: 20px; height: 20px; }
/* choice cards: radio cards with an icon, a title and a hint (kit.choiceCards) */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-2); }
.choice-card { position: relative; display: flex; flex-direction: column; gap: var(--s-0_5); padding: var(--s-2_5) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-lg); cursor: pointer; }
.choice-card:hover { background: var(--hover); }
.choice-card > input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card > .ic { color: var(--fg-2); margin-bottom: var(--s-1); }
.choice-card > b { font-size: var(--fs-ui); font-weight: 600; }
.choice-card > small { font-size: var(--fs-meta); line-height: 1.4; color: var(--fg-3); }
.choice-card:has(input:checked) { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.choice-card:has(input:checked) > .ic { color: var(--signal); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
/* settings: a page is a stack of panels */
.set-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.panel > .field-hint { margin-top: calc(-1 * var(--s-1)); }
.panel-group { display: flex; flex-direction: column; }
.panel-group + .panel-group { margin-top: var(--s-3); }
.panel .rows.scroll { max-height: 440px; overflow-y: auto; }
.ds-try:empty { display: none; }

/* panel (card) */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3) 14px; display: flex; flex-direction: column; gap: var(--s-2_5); }
.panel-h { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-h3); font-weight: 600; }
.panel-h > .ic { color: var(--fg-3); }
.panel-h .status { font-weight: 400; }
/* a ghost button that starts a line inside a panel: its text lines up with the text above */
.panel > .btn[data-variant="ghost"]:first-child, .panel > :not(.panel-h) > .btn[data-variant="ghost"]:first-child { margin-left: calc(-1 * var(--s-2)); }

/* segmented */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--muted); border-radius: 9px; }
.seg > button, .seg > a { padding: 4px 10px; border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-2); cursor: pointer; text-decoration: none; }
.seg > [aria-pressed="true"], .seg > [aria-current="true"] { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-1); }
.seg > label { display: inline-flex; cursor: pointer; }
.seg > label > input { position: absolute; opacity: 0; pointer-events: none; }
.seg > label > span { padding: 4px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--fg-2); }
.seg > label:has(input:checked) > span { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-1); }

/* filter chip */
.fchip { display: inline-flex; align-items: center; gap: var(--s-1_5); height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface); font-size: var(--fs-sm); color: var(--fg-2); text-decoration: none; cursor: pointer; }
.fchip:hover { background: var(--hover); }
.fchip[aria-current="true"], .fchip[aria-pressed="true"] { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.fchip-n { font-size: var(--fs-meta); opacity: .7; }

/* empty states and banners */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-8) var(--s-5); color: var(--fg-2); font-size: var(--fs-sm); }
.empty > .ic { width: 36px; height: 36px; color: var(--fg-3); }
.empty h3 { margin: 0; font-size: var(--fs-h3); font-weight: 600; color: var(--foreground); }
.empty-line { font-size: var(--fs-sm); color: var(--fg-3); }
.banner { display: flex; align-items: center; gap: var(--s-2_5); padding: var(--s-2) var(--s-3); background: var(--sunk); border-radius: var(--r-md); font-size: var(--fs-ui); color: var(--fg-2); }
.banner > .ic { flex: none; color: var(--fg-3); }
.banner > .grow { flex: 1; min-width: 0; }
.banner b { font-weight: 500; color: var(--foreground); }
.banner.bad { background: var(--bad-soft); color: var(--foreground); }
.banner.bad > .ic { color: var(--bad); }
.banner.one > .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dialog: header → body → footer, 20px apart; sizes */
.dlg-form { display: flex; flex-direction: column; gap: var(--s-5); }
/* plugin dialogs still written by hand (telegram login): a bare header and footer */
.dlg-form > header:not(.dlg-h) h2 { font-size: var(--fs-h2); font-weight: 600; margin: 0; }
.dlg-form > footer:not(.dlg-foot) { display: flex; justify-content: flex-end; gap: var(--s-2); }
.dialog:has(.dlg-md) > div { max-width: 560px; width: calc(100vw - 32px); }
.dialog:has(.dlg-lg) > div { max-width: 720px; width: calc(100vw - 32px); }
.dialog:has(.dlg-xl) > div { max-width: 1100px; width: calc(100vw - 48px); }
.dlg-h { display: flex; align-items: flex-start; gap: var(--s-3); }
.dlg-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.dlg-h h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-h2); font-weight: 600; line-height: 1.35; }
.dlg-h h2 .ic { color: var(--fg-3); }
.dlg-h p { margin: 0; font-size: var(--fs-read); line-height: 1.5; color: var(--fg-2); }
.dlg-h > .btn:last-child { margin: -4px -6px 0 0; }
.dlg-body { display: flex; flex-direction: column; gap: var(--s-4); }
/* a long body scrolls; the header and the footer stay (kit.dialog scroll) */
.dlg-scroll { display: flex; flex-direction: column; gap: var(--s-4); max-height: min(70vh, 640px); overflow-y: auto; margin: 0 calc(-1 * var(--s-2)); padding: 2px var(--s-2); scrollbar-width: thin; }
.dlg-foot { display: flex; align-items: center; gap: var(--s-2); }
.dlg-foot .grow { flex: 1; }
.dlg-foot > .btn[data-variant="ghost"]:first-child { margin-left: calc(-1 * var(--s-2)); }
/* split dialog: a header band, then list | detail, each scrolling on its own (kit.splitDialog) */
.dialog:has(.dlg-split) > div { max-width: 1040px; width: calc(100vw - 32px); height: min(760px, calc(100vh - 32px)); padding: 0; gap: 0; overflow: hidden; }
.dlg-split { display: grid; grid-template-rows: auto minmax(0, 1fr); flex: 1; min-height: 0; }
.dlg-split > .dlg-h { align-items: center; padding: var(--s-4); border-bottom: 1px solid var(--line); }
.dlg-split > .dlg-h > .btn:last-child { margin: 0 calc(-1 * var(--s-1)) 0 0; }
.dlg-split > .dlg-h > .select { width: auto; flex: none; }
.dlg-split-b { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 0; }
.dlg-split-list { display: flex; flex-direction: column; gap: var(--s-4); overflow-y: auto; padding: var(--s-3) var(--s-4) var(--s-4); border-right: 1px solid var(--line); scrollbar-width: thin; }
.dlg-split-detail { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; overflow-y: auto; padding: var(--s-5) var(--s-6) var(--s-6); scrollbar-width: thin; }
@media (max-width: 820px) {
  .dlg-split-b { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .dlg-split-list { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* dots and statuses */
.dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); } .dot.draft { background: var(--signal); }
.sdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--fg-3); }
.sdot.ok { background: var(--ok); } .sdot.bad { background: var(--bad); } .sdot.draft { background: var(--signal); }
.sdot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.sdot.attention { background: var(--foreground); }
.sdot.pulse { background: var(--ok); animation: sdot-live 1.6s var(--ease) infinite; }
@keyframes sdot-live { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .sdot.pulse { animation: none; } }
.status { display: inline-flex; align-items: center; gap: var(--s-1_5); font-size: var(--fs-meta); color: var(--fg-3); }
.status-m { color: var(--fg-3); }

/* a checkbox with a label and a hint, as a row */
.check-row { display: flex; align-items: flex-start; gap: var(--s-2_5); padding: var(--s-1_5) var(--s-2); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-ui); }
.check-row:hover { background: var(--hover); }
.check-row .checkbox { margin-top: 2px; }

/* chip trigger: secondary functions behind a small "label ⌄" */
.chip-trigger { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); color: var(--fg-2); cursor: pointer; }
.chip-trigger:hover, [open] > .chip-trigger, .chip-trigger[aria-expanded="true"] { background: var(--hover); color: var(--foreground); }

/* canvas pages: head, then sections set apart more than the head's own gap (app.css .day gap 14 is off the scale) */
.doc.day { gap: var(--s-3); }
.page-sect { display: flex; flex-direction: column; min-width: 0; margin-top: var(--s-2); }
.page-h { display: flex; align-items: flex-start; gap: var(--s-3); }
.page-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.page-h h2 { margin: 0; font-size: var(--fs-page); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.page-h p { margin: 0; font-size: var(--fs-ui); color: var(--fg-2); }

/* stage without an agent window (not used by the prototype) */
.app[data-chat="none"] .stage { grid-template-columns: var(--cl) minmax(0, 1fr) var(--sw); grid-template-areas: "ctxl canvas side"; }

.canvas-in { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.muted, .muted-note { color: var(--fg-3); }
.muted-note { font-size: 12.5px; }
.small { font-size: 12px; }
.flip { transform: rotate(180deg); }

/* chat additions */
.turn { display: flex; flex-direction: column; gap: 12px; }
.note-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-3); }
.notice { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); padding: 6px 10px; border-radius: 9px; border: 1px dashed var(--line-strong); }
.turn-end { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); }
.turn-end.error { color: var(--bad); }
.worklog > summary { cursor: pointer; list-style: none; }
.worklog > summary::-webkit-details-marker { display: none; }
.worklog-in { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 2px 10px; border-left: 1px solid var(--line); margin-top: 6px; }
.tools-list li { align-items: flex-start; }
.tools-list li.err > .ic { color: var(--bad); }
.tools-list details.call { min-width: 0; flex: 1; }
.tools-list details.call > summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: center; min-width: 0; line-height: 18px; }
/* rows align to the top (details expand below); centre the 12px icon on the 18px first line */
.tools-list li > .ic { margin-top: 3px; }
.tools-list details.call > summary::-webkit-details-marker { display: none; }
.tools-list details.call > summary .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-args, .call-out, .codeblock { font-family: var(--font-ui); font-size: 11.5px; background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; color: var(--fg-2); }
.md pre.codeblock { max-height: none; }
.md a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.md h1, .md h2, .md h3 { font-weight: 600; margin: 10px 0 6px; line-height: 1.3; }
.md h1 { font-size: 17px; } .md h2 { font-size: 15.5px; } .md h3 { font-size: 14px; }
.md table { border-collapse: collapse; margin: 6px 0; font-size: 12.5px; }
.md th, .md td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.md blockquote { border-left: 2px solid var(--line-strong); margin: 6px 0; padding-left: 10px; color: var(--fg-2); }
.md img { max-width: 100%; border-radius: 8px; }
.u-ctx { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
.peer-answer { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.peer-answer .pa-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.peer-answer .pa-h .sub { color: var(--fg-3); font-size: 11.5px; }
.static-link { cursor: default; }
.static-link:hover { transform: none; }
.reqcard { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.reqcard .grow small { display: block; color: var(--fg-3); font-size: 11.5px; }
.plan-review .md { max-height: 360px; overflow: auto; }
.question .q { border: 0; padding: 0; margin: 0 0 6px; display: flex; flex-direction: column; gap: 6px; }
.question .q-opts { display: flex; flex-direction: column; gap: 4px; }
.qdock { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 6px; }
.qdock:empty { display: none; }
.q-head { font-size: 11px; color: var(--fg-3); padding: 2px 2px 0; }
.q-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 9px; padding: 4px 4px 4px 10px; background: var(--surface); }
.q-item.echo { border-style: dashed; color: var(--fg-2); padding-right: 10px; }
.q-item small { color: var(--fg-3); }
.mode-pill { margin-left: 4px; }
.model-btn span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-form { margin: 0; }
.mi-form .mi { width: 100%; }

/* canvas additions */
.tab.page-tab { text-decoration: none; color: inherit; }
.tab-content { min-width: 0; }
.empty-canvas.small { padding: 18px 12px; gap: 8px; }
.empty-canvas.small .ic { width: 22px; height: 22px; color: var(--fg-3); }
.empty-canvas.small h3 { font-size: 13px; }
.sandbox-frame { width: 100%; height: calc(100vh - 200px); border: 1px solid var(--line); border-radius: 10px; background: white; }
/* a page fills the canvas body to its bottom edge (header and banners above it keep their height) */
.cbody > .doc:has(> .tab-content > .sandbox-frame) { height: 100%; box-sizing: border-box; padding-bottom: 14px; }
.tab-content:has(> .sandbox-frame) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tab-content > .sandbox-frame { flex: 1; height: auto; min-height: 420px; }
.doc-edit { display: flex; flex-direction: column; gap: 8px; }
.doc-ta { width: 100%; min-height: 360px; font: inherit; font-size: 13.5px; line-height: 1.55; resize: vertical; }
/* documents on the canvas use the full width of the pane (app.css caps them at 68ch) */
.canvas-doc { max-width: none; }
.canvas-doc.cmp p { margin: 0; padding: 1px 6px; border-radius: 4px; white-space: pre-wrap; }
.canvas-doc.cmp p.ins { background: var(--ok-soft); }
.canvas-doc.cmp p.del { background: var(--bad-soft); text-decoration: line-through; color: var(--fg-3); }
.tbl-note { color: var(--fg-3); font-size: 12px; margin-bottom: 6px; }
td.tone-ok { color: var(--ok); } td.tone-bad { color: var(--bad); font-weight: 600; } td.tone-muted { color: var(--fg-3); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.kpi { padding: 10px 12px; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi .kl { font-size: 11.5px; color: var(--fg-3); }
.kpi .kv { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.kpi .kv small { font-size: 12px; font-weight: 400; color: var(--fg-3); }
.kpi.bad .kv { color: var(--bad); } .kpi.ok .kv { color: var(--ok); }
.chart-wrap { margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.chart-t { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.chart { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--fg-3); margin-top: 4px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend .lg { width: 14px; height: 0; border-top: 2px solid var(--foreground); display: inline-block; }
.chart-legend .lg.dashed { border-top: 1.5px dashed var(--fg-2); }
.chart-legend .lg.muted { border-top-color: var(--fg-3); }
.chart-legend .lg.accent { border-top-color: var(--signal); }
.boardx { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; }
.bblock { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; display: flex; flex-direction: column; }
.bblock-h { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); padding: 10px 12px 0; }
.bblock-b { padding: 8px 12px 12px; min-width: 0; overflow: auto; }
.bblock-b .chart-wrap, .bblock-b .kpis { border: 0; padding: 0; }
.dlist { display: flex; flex-direction: column; }
.dlist .ditem { padding: 8px 0; }
@media (max-width: 1100px) { .boardx { grid-template-columns: minmax(0, 1fr); } .bblock { grid-column: auto !important; } }

/* day additions */
.d-acts { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.d-acts form { display: contents; }
.dico { width: 22px; height: 22px; display: grid; place-items: center; color: var(--fg-3); flex: none; }
.day-ask .btn { flex: none; }

/* saved, connections */
.svlist { display: flex; flex-direction: column; }
.sv-i { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sv-i .sv-ic { color: var(--fg-3); padding-top: 2px; display: inline-flex; }
.sv-t { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); align-items: stretch; }
/* connection card = panel: header · 2-line description · accounts · footer pinned to the bottom */
.conn-card { display: flex; flex-direction: column; gap: var(--s-2_5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.cc-h { display: flex; align-items: center; gap: var(--s-2_5); }
.cc-h .pi { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; flex: none; color: var(--fg-2); }
.cc-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cc-t b { font-size: var(--fs-h3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-st { display: inline-flex; align-items: center; gap: var(--s-1_5); font-size: var(--fs-meta); color: var(--fg-3); }
.cc-st .dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.cc-st .dot.ok { background: var(--ok); box-shadow: none; } .cc-st .dot.bad { background: var(--bad); box-shadow: none; }
.cc-d { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-acc { border-top: 1px solid var(--line); padding-top: var(--s-1_5); margin: 0 calc(-1 * var(--s-2)); }
.cc-acc .row-i { padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); }
.cc-acc .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; } .cc-acc .dot.ok { background: var(--ok); } .cc-acc .dot.bad { background: var(--bad); }
.cc-acc .row-m.bad { color: var(--bad); }
.cc-f { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1_5); margin-top: auto; padding-top: var(--s-1); }
.cc-f .grow { flex: 1; }
.cc-tools { font-size: var(--fs-meta); color: var(--fg-3); white-space: nowrap; }


/* plain pages: sign-in, setup, welcome, settings */
body.plain { overflow: auto; background: var(--app); }
.plain-main { min-height: 100%; display: grid; place-items: center; padding: 32px 16px; }
.plain-main.wide { place-items: start center; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.label { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 6px; font-weight: 500; font-size: 12.5px; }
.label > .select, .label > select { width: 100%; }
.label small { font-weight: 400; }
.probe { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); }
.probe.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, var(--line)); }
.probe.bad { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 40%, var(--line)); }

.settings { width: min(1080px, 100%); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.set-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.set-nav a { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; color: var(--fg-2); text-decoration: none; font-size: 13px; }
.set-nav a:hover { background: var(--hover); color: var(--foreground); }
.set-nav a[aria-current="true"] { background: var(--surface); border: 1px solid var(--line); color: var(--foreground); font-weight: 500; }
.set-nav .back { color: var(--fg-3); margin-bottom: 8px; }
.set-h { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); padding: 12px 8px 4px; }
.set-main { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.set-main > h2 { margin: 0; font-size: 18px; font-weight: 600; }
.set-form { display: flex; flex-direction: column; gap: 12px; }
table.audit td { font-size: 12px; }
table.audit small { color: var(--fg-3); }
@media (max-width: 820px) { .settings { grid-template-columns: 1fr; } .set-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

.toast-lite { background: var(--foreground); color: var(--background); padding: 8px 12px; border-radius: 8px; margin: 6px; font-size: 12.5px; }
.pp-row.muted { opacity: .55; }
a.pp-row { color: inherit; text-decoration: none; }

.bblock-b .canvas-doc { border: 0; padding: 0; box-shadow: none; background: none; }
.bblock-b .tbl-wrap { margin: 0; }

.dev-badge { color: var(--bad); font-weight: 500; }

/* attachments */
.cchip.att img { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; }
.composer.drop .cbox { border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); }
.u-files { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-bottom: 4px; }
.u-img img { display: block; max-width: 220px; max-height: 180px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; }
.u-file { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--fg-2); text-decoration: none; }

/* the live browser canvas */
.rbrowser { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rb-bar { display: flex; gap: 2px; align-items: center; width: 100%; padding: 0 2px 6px; }
.rb-addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin: 0 4px; border-radius: 8px; color: var(--fg-3); cursor: text; transition: background-color .12s; }
.rb-addr:hover { background: var(--hover); }
.rb-addr:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.rb-lock[data-secure="false"] { color: var(--fg-3); }
.rb-url { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--foreground); text-overflow: ellipsis; }
.rb-url::placeholder { color: var(--fg-3); }
.rb-view { position: relative; flex: 1; min-height: 240px; border-top: 1px solid var(--line); overflow: hidden; background: var(--surface); outline: none; }
.rb-view:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); }
.rb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; cursor: default; user-select: none; -webkit-user-drag: none; }
.rb-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-3); }
.rb-wait .ic { width: 28px; height: 28px; animation: rot 2.4s linear infinite; }
.rbrowser.rb-live .rb-wait { display: none; }
.rb-err { position: absolute; left: 12px; right: 12px; top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); color: var(--bad); font-size: 12.5px; }
.tab-bare { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 8px 10px 10px; }
.tab-bare:has(.rbrowser) { padding: 6px 0 0; }
.tab-bare .rbrowser { flex: 1; }
/* a full-bleed canvas with versions (the design canvas): the version chip and the banners float over it */
.tab-bare.versioned { position: relative; }
.bare-ver { position: absolute; top: 18px; left: 20px; z-index: 8; padding: 2px; background: var(--popover); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.bare-ver .vp-panel { left: 0; right: auto; }
.bare-banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 8; max-width: min(640px, calc(100% - 220px)); display: flex; flex-direction: column; gap: var(--s-1_5); }
.bare-banner .ver-banner { background: var(--popover); border-color: var(--line-strong); box-shadow: var(--shadow-pop); }
.tab-bare.versioned:has(.dcc) { overflow: auto; }

/* sidebar search across chats */
.sb-scroll[hidden] { display: none; }
.sr-list { display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; }
.sr-item { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: 7px; color: var(--fg-2); font: inherit; font-size: 13px; text-align: left; background: none; border: 0; cursor: pointer; width: 100%; }
.sr-item:hover, .sr-item:focus-visible { background: var(--hover); color: var(--foreground); }
.sr-t { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--foreground); font-weight: 500; }
.sr-t .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-t .ic { color: var(--fg-3); flex: none; }
.sr-snip { font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-snip b { font-weight: 500; color: var(--fg-3); }
.sr-meta { font-size: 11px; color: var(--fg-3); }
.sr-item mark { background: color-mix(in oklab, var(--primary) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.sr-empty { font-size: 12.5px; color: var(--fg-3); padding: 10px 12px; }
#log .e.found { animation: found-flash 2.4s ease-out; border-radius: 10px; }
@keyframes found-flash { 0%, 40% { background: color-mix(in oklab, var(--primary) 12%, transparent); } 100% { background: transparent; } }
/* developer (admin) chat mark in lists */
.dev-mark { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; color: var(--bad); background: color-mix(in oklab, var(--bad) 12%, transparent); }
.sess .st-t .dev-mark .ic, .sr-t .dev-mark .ic { color: var(--bad); }
/* the stop button must read as "stop" at a glance: a solid square */
.send[data-busy="true"] .i-stop { width: 22px; height: 22px; }
.sr-meaning { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.sr-wait { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--fg-3); }
.sr-why { color: var(--fg-2); }

/* the few layout utilities views use (there is no Tailwind build) */
.grid { display: grid; }
.flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 14px; }
.gap-4 { gap: 18px; }

.field-hint { font-size: 12px; color: var(--fg-3); font-weight: 400; }
.sb-archived { margin-top: 8px; }
.sb-archived > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.sb-archived > summary::-webkit-details-marker { display: none; }
.sess.arch-proj { padding-left: 14px; cursor: default; }
.sess.arch-proj .btn { height: 24px; font-size: 12px; }
.tools-list li.unknown > .ic, .tools-list li.skipped > .ic { color: var(--fg-3); }
/* an attachment mentioned inside the message text */
.u-ref { display: inline-flex; align-items: center; gap: 5px; vertical-align: -3px; max-width: 220px; padding: 1px 7px 1px 2px; margin: 0 1px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--foreground); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-ref-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.u-ref img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; }
.u-ref .ic { margin-left: 4px; }
/* the agent's permissions menu: fits the composer, hints wrap */
[id^="perm-"][id$="-popover"] { width: min(330px, calc(100vw - 24px)); }
[id^="perm-"][id$="-popover"] [role^=menuitem] small { white-space: normal; display: block; line-height: 1.35; }
[id^="perm-"][id$="-popover"] [role^=menuitem] > span { min-width: 0; }
/* in a narrow chat the hint gives way first; the send button never moves off the edge */
.cbar { min-width: 0; }
.cbar .hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbar .send { flex: none; }
.cbar .perm span, .cbar .model-btn span { white-space: nowrap; }

/* the morning brief on My day: clipped until "more" (app.js data-act="brief-more") */
.brief-body { position: relative; max-height: 340px; overflow: hidden; }
.brief-body[data-open="true"] { max-height: none; }
.brief-body[data-open="false"]::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.brief-body .md h2 { font-size: 13.5px; margin: 12px 0 4px; }
.brief-body .md h2:first-child { margin-top: 2px; }
.brief-body .md { font-size: 13.5px; }

/* sidebar: full ↔ narrow rail (tiles with tooltips) */
.sb-hide { flex: none; }
.sb-rail-wrap { display: none; }
.app[data-sb="rail"] .sb-rail-wrap { display: block; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }  /* many projects: the rail scrolls, never the page */
.app[data-sb="rail"] #sbList, .app[data-sb="rail"] #sbResults, .app[data-sb="rail"] #sbplus { display: none !important; }
.app[data-sb="rail"] .sb-head { flex-direction: column; gap: 4px; }
.sb-rail a.rp, .sb-rail a.rs { text-decoration: none; color: inherit; }
.sb-rail .rs .ic { width: 13px; height: 13px; }
/* chats outside projects start at the group's edge, not at the project tree's indent */
.loose-sess .sess { padding-left: 10px; }
.loose-sess .ses-more, .loose-sess .more-sess > summary { padding-left: 10px; }
.sb-menu { flex: none; }
#sbmenu [role=menu] a[role=menuitem] { text-decoration: none; color: inherit; }

/* markdown tables and code in chat: own sideways scroll, actions below (like T3) */
.md .md-table { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.md .mt-scroll { overflow-x: auto; scrollbar-width: thin; }
.md .md-table table { border-collapse: collapse; margin: 0; width: max-content; min-width: 100%; font-size: 13px; }
.md .md-table th { background: var(--sunk); font-weight: 600; text-align: left; white-space: nowrap; }
.md .md-table th, .md .md-table td { border: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; vertical-align: top; max-width: 420px; }
.md .md-table tr:last-child td { border-bottom: 0; }
.md .md-table td + td, .md .md-table th + th { border-left: 1px solid var(--line); }
.mt-foot { display: flex; align-items: center; padding: 2px 4px; border-top: 1px solid var(--line); background: var(--surface); }
.md-btn { border: 0; background: none; width: 28px; height: 26px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--fg-3); cursor: pointer; }
.md-btn:hover { background: var(--hover); color: var(--foreground); }
.md .md-code { position: relative; }
.md .md-code .md-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.md .md-code .md-acts .md-btn { opacity: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: opacity .12s; }
.md .md-code:hover .md-acts .md-btn, .md .md-code .md-acts .md-btn:focus-visible { opacity: 1; }
/* ▶ stays in sight: it is the way to do what the block says */
.md .md-code .md-acts .md-run { opacity: 1; }
.dialog.wide > div { max-width: 1200px; width: calc(100vw - 48px); }
.md-table-full table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13.5px; }
.md-table-full th, .md-table-full td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.md-table-full th { background: var(--sunk); }
.md-table-full .mt-scroll { max-height: calc(100vh - 140px); overflow: auto; }

/* subagents: cards in the parent chat, the side list */
/* cards in the chat have the panel's padding (app.css .appr has 12 all round) */
.appr { padding: var(--s-3) 14px; }
.subcard { display: flex; flex-direction: column; gap: var(--s-1_5); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3) 14px; background: var(--surface); }
.subcard .sc-h { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.subcard .sc-h b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subcard .sc-h .pill { flex: none; }
.subcard .sc-task { font-size: 12.5px; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subcard .sc-meta { font-size: 11.5px; color: var(--fg-3); }
.subcard .sc-appr { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: var(--sunk); font-size: 12.5px; }
.subres { border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); }
.subres > summary { display: flex; align-items: center; gap: 6px; padding: 8px 0; cursor: pointer; list-style: none; font-size: 13px; }
.subres > summary::-webkit-details-marker { display: none; }
.subres > summary .chev { margin-left: auto; transition: transform .15s; }
.subres[open] > summary .chev { transform: rotate(180deg); }
.subres > .md { padding-bottom: 10px; font-size: 13.5px; }
.sub-list { display: flex; flex-direction: column; gap: 2px; }
.sub-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 13px; }
.sub-row:hover { background: var(--hover); }
.sub-row small { display: block; color: var(--fg-3); font-size: 11.5px; }
.sub-row .spin { width: 10px; height: 10px; }
.subcard .sc-h b { flex: 1; min-width: 0; }
.subcard .sc-foot { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.subcard .sc-foot .sc-meta { white-space: nowrap; }

/* coordinator pages and the meetings canvas */
.coord-page .talk-a { margin: 4px 0 6px 34px; padding: 8px 12px; border-left: 2px solid var(--line); font-size: 13px; }
.coord-page .talk-link { text-decoration: none; color: inherit; }
.share-body { font-size: 14px; margin-top: 8px; }
.cb-page .cb-meet { border-bottom: 1px solid var(--line); }
.cb-page .cb-meet > summary { display: flex; align-items: center; gap: 10px; padding: 10px 2px; list-style: none; cursor: pointer; }
.cb-page .cb-meet > summary::-webkit-details-marker { display: none; }
.cb-page .cb-meet > summary .chev { transition: transform .15s; color: var(--fg-3); }
.cb-page .cb-meet[open] > summary .chev { transform: rotate(180deg); }
.cb-page .cb-notes { padding: 0 4px 6px 34px; font-size: 13px; }
.cb-page .cb-acts { display: flex; gap: 6px; padding: 0 0 12px 34px; flex-wrap: wrap; }
.cb-page { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
.cb-page > .dgrp { width: 100%; min-width: 0; }
.cb-page details.cb-more > summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--fg-2); padding: 6px 2px; }
.cb-page details.cb-more > summary::-webkit-details-marker { display: none; }
.cb-page details.cb-meet { display: block; width: 100%; min-width: 0; }
.cb-page .cb-notes { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.cb-page .cb-notes li { white-space: normal; }
/* shared chats */
.shared-pill { display: inline-flex; align-items: center; gap: 4px; }
.shared-mark { display: inline-grid; place-items: center; color: var(--fg-3); flex: none; }
.u-who { font-weight: 600; color: var(--fg-2); }


/* Files */
.md img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
/* the live line of a running turn */
.e.live { flex-wrap: wrap; }
.e.live .act-warn { color: var(--fg-2); font-size: 12px; }
.e.live .act-bad { display: inline-flex; align-items: center; gap: 6px; color: var(--bad); }
.e.live .btn { height: 26px; font-size: 12px; }

/* Artifacts */
.art-view { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.art-view-h { display: flex; align-items: center; gap: 6px; }
/* a dedicated section: full width, no tab strip */
.canvas-in.standalone > .cbody { padding-top: 6px; }
.canvas-in.standalone .art-page { max-width: 1180px; }
.canvas-in.standalone .art-view { padding: 10px 14px; }
/* Artifacts in a modal (from the tab bar) */
.dialog:has(.art-dlg) > div { height: min(820px, calc(100vh - 48px)); display: flex; flex-direction: column; padding: 16px 18px 0; overflow: hidden; }
.art-dlg { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 8px; }
.art-dlg .art-embed { flex: 1; min-height: 0; overflow: auto; padding-bottom: 16px; scrollbar-width: thin; }
.art-page.embedded { max-width: none; padding: 0; }

/* a chat row's "⋯" (on hover) and the shared menu */
.sess { position: relative; }
.sess .row-more { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; border-radius: 6px; border: 0; display: none; place-items: center; background: var(--surface); color: var(--fg-2); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); z-index: 2; }
.sess:hover .row-more, .sess:focus-within .row-more { display: grid; }
.sess:hover .ind { visibility: hidden; }
.sess .row-more:hover { color: var(--foreground); }
.rowmenu { position: fixed; z-index: 90; min-width: 220px; max-height: calc(100vh - 16px); overflow: auto; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2, 0 8px 24px rgb(0 0 0 / .12)); display: flex; flex-direction: column; }
.rowmenu[hidden] { display: none; }
.rowmenu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: 7px; font: inherit; font-size: 13px; color: var(--foreground); text-align: left; cursor: pointer; }
.rowmenu button:hover { background: var(--hover); }
.rowmenu button[hidden] { display: none; }
.rowmenu .ic { color: var(--fg-3); flex: none; }
.rowmenu .rm-h { display: flex; align-items: center; gap: 8px; padding: 7px 8px 3px; font-size: 11.5px; color: var(--fg-3); }
.rowmenu .rm-sub button { padding-left: 14px; }
.rowmenu .pav { width: 18px; height: 18px; font-size: 10px; flex: none; }
.rowmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.rowmenu .rm-del, .rowmenu .rm-del .ic { color: var(--bad); }
/* while the chat width is dragged, frames and live views do not take the pointer */
.app.dragging iframe, .app.dragging .rb-view, .app.dragging .rb-img { pointer-events: none; }
.app.dragging { user-select: none; cursor: col-resize; }
/* "Screen view" menu */
.vmenu .cm-i { align-items: flex-start; }
.vmenu .cm-i small { display: block; color: var(--fg-3); font-size: 11.5px; }
.vmenu .vm-ok { display: none; }
.vmenu .cm-i[aria-checked="true"] .vm-ic { display: none; }
.vmenu .cm-i[aria-checked="true"] .vm-ok { display: inline-flex; }
.vmenu .cm-i[aria-checked="true"] .vm-ok .ic { color: var(--foreground); }
.vmenu .cm-i > span:first-child, .vmenu .cm-i .vm-ok { padding-top: 2px; }
.vmenu .cm-h { display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px; font-size: 11.5px; color: var(--fg-3); }
/* composer bar: model | effort | access, separated like T3 Code */
.cbar .cbar-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 4px; flex: none; }
.cbar .eff-wrap { display: contents; }
.cbar .eff-wrap[hidden] { display: none; }
/* the model picker */
.mp-wrap { position: relative; display: inline-flex; }
.mpick { position: fixed; z-index: 60; display: flex; width: 380px; max-width: calc(100vw - 32px); max-height: 420px; background: var(--popover, var(--surface)); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-3, 0 12px 32px rgb(0 0 0 / .14)); overflow: hidden; }
.mpick[hidden] { display: none; }
.mp-rail { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; border-right: 1px solid var(--line); }
.mp-src { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--fg-2); background: none; border: 0; cursor: pointer; }
.mp-src:hover { background: var(--hover, color-mix(in oklab, var(--foreground) 6%, transparent)); }
.mp-src[aria-current="true"] { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 9%, transparent); }
.mp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--fg-3); }
.mp-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--foreground); }
.mp-list { flex: 1; overflow-y: auto; padding: 6px; }
.mp-i { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; color: var(--foreground); font: inherit; }
.mp-i[hidden] { display: none; }
.mp-i.hl, .mp-i:hover { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
.mp-i .grow { display: flex; flex-direction: column; min-width: 0; }
.mp-n { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-s { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-3); }
.mp-k { font: inherit; font-size: 11.5px; color: var(--fg-3); background: color-mix(in oklab, var(--foreground) 6%, transparent); border-radius: 6px; padding: 1px 6px; }
.mp-k:empty { display: none; }
.mp-ok { width: 16px; display: inline-flex; visibility: hidden; color: var(--foreground); }
.mp-i[aria-selected="true"] .mp-ok { visibility: visible; }
.mp-none { padding: 14px 10px; font-size: 13px; color: var(--fg-3); }
.mp-add { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-2); text-decoration: none; }
.mp-add:hover { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 4%, transparent); }
.mp-h { padding: 10px 10px 4px; font-size: 11.5px; color: var(--fg-3); }
.mp-h[hidden] { display: none; }
.mp-conn .mp-n { color: var(--fg-2); }
/* a narrow chat: the access button keeps its icon, the send button never leaves */
.cbar { min-width: 0; }
.cbar .send { flex: none; }
.cbar .perm { min-width: 0; flex-shrink: 1; }
.cbar .perm > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.composer { container-type: inline-size; }
@container (max-width: 470px) { .cbar .perm:not(.model-btn):not(.eff-btn) > span { display: none; } }
/* messages waiting for the agent: a dashed bubble on the person's side (T3 Code look) */
.qdock .q-bubble { margin: 6px 0 6px auto; max-width: min(78%, 520px); border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 10px 12px 6px; background: var(--surface); }
.qdock .q-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.qdock .q-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--fg-3); font-size: 12px; }
/* composer: a slash command is highlighted behind the text; suggestions above the box */
.cin-wrap { position: relative; }
.cin-wrap textarea { position: relative; z-index: 1; }
.cin-hl { position: absolute; inset: 0; z-index: 0; padding: 9px 12px 4px; font: inherit; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; color: transparent; pointer-events: none; overflow: hidden; }
.cin-hl mark { color: transparent; background: var(--signal-soft); border-radius: 5px; box-shadow: 0 0 0 2px var(--signal-soft); }
.slash-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 18px); z-index: 30; display: flex; flex-direction: column; padding: 6px; background: var(--popover, var(--surface)); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-3, 0 12px 32px rgb(0 0 0 / .14)); max-height: 320px; overflow-y: auto; }
.slash-pop[hidden] { display: none; }
.sp-i { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font: inherit; font-size: 13px; color: var(--foreground); }
.sp-i.hl, .sp-i:hover { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
.sp-i b { font-weight: 600; }
.sp-a { color: var(--fg-3); font-size: 12px; }
.sp-a::before { content: "‹"; } .sp-a::after { content: "›"; }
.sp-d { margin-left: auto; color: var(--fg-2); font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
/* "/btw": a side answer, visibly outside the agent's flow */
.btw-a { margin-top: 6px; font-size: 13.5px; }
.btw-a.err { color: var(--destructive, #c22); }
.btw-wait { color: var(--fg-3); }
/* new project: the kind decides which fields show */
.proj-new .pn-only { display: none; }
.proj-new:has(input[name=kind][value=folder]:checked) .pn-folder, .proj-new:has(input[name=kind][value=repo]:checked) .pn-repo, .proj-new:has(input[name=kind][value=computer]:checked) .pn-computer { display: block; }
/* my computers (settings) */
.comp-list { display: flex; flex-direction: column; gap: 2px; }
.comp-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-1); border-radius: var(--r-md); }
.comp-row:hover { background: var(--hover); }
.comp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.comp-t .muted { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-made { border-color: var(--signal); }
.comp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); flex: none; }
.comp-dot.on { background: var(--ok); }
.proj-new .pn-busy { display: none; margin-right: auto; color: var(--fg-3); font-size: 13px; }
.proj-new .pn-busy.htmx-request { display: inline; }
.fs-pick { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fs-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--foreground) 3%, transparent); }
.fs-path { font-size: 12.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.fs-list { max-height: 220px; overflow-y: auto; padding: var(--s-1) var(--s-3); display: flex; flex-direction: column; }
/* the dev run in the chat head */
.run-ctl { display: inline-flex; align-items: center; }
.run-on .run-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok, oklch(0.62 0.15 150)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok, oklch(0.62 0.15 150)) 22%, transparent); }
.run-dlg { width: 100%; }
.run-dlg h2 small { font-size: 12px; font-weight: 400; margin-left: 8px; }
.run-log { margin: 0; max-height: 60vh; overflow: auto; padding: 12px 14px; font-family: inherit; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: color-mix(in oklab, var(--foreground) 4%, transparent); border-radius: 10px; }
.code-empty .code-where { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); padding: 3px 10px; border-radius: 999px; background: color-mix(in oklab, var(--foreground) 5%, transparent); margin: 2px 0 8px; }
/* settings opened over a chat */
.mp-rail { align-items: center; }
.mp-rail .grow { flex: 1; }
.mp-src .ic { width: 20px; height: 20px; }
.mp-plus { border: 1px dashed var(--line-strong); }
.mp-plus:hover { border-style: solid; }
/* canvas: the draft and saving a version */
.ver { flex-wrap: wrap; }
.ver-draft { border-style: dashed; }
.ver-draft .draft-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-right: 2px; }
.commit-f { display: inline-flex; align-items: center; gap: 6px; }
.commit-f .input { height: 30px; width: 220px; font-size: 13px; }
/* canvas compare: changed blocks with line numbers (git-style), in the UI font */
.diffv { display: flex; flex-direction: column; gap: 10px; }
.dv-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dv-what { font-weight: 600; }
.dv-n { font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 6px; }
.dv-n.ins { color: oklch(0.45 0.13 150); background: oklch(0.62 0.15 150 / .12); }
.dv-n.del { color: oklch(0.5 0.17 25); background: oklch(0.6 0.2 25 / .1); }
.dv-hunk { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 12.5px; line-height: 1.55; }
.dv-at { padding: 4px 10px; color: var(--fg-3); background: color-mix(in oklab, var(--foreground) 4%, transparent); border-bottom: 1px solid var(--line); }
.dv-l { display: grid; grid-template-columns: 44px 44px 16px 1fr; }
.dv-l.ins { background: oklch(0.62 0.15 150 / .1); }
.dv-l.del { background: oklch(0.6 0.2 25 / .09); }
.dv-no { color: var(--fg-3); text-align: right; padding-right: 8px; user-select: none; font-variant-numeric: tabular-nums; }
.dv-s { color: var(--fg-2); user-select: none; }
.dv-t { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 10px; tab-size: 2; }
/* the canvas journal: dense one-line rows; actions on hover */
.jr-dlg { gap: 10px; }
.jr-save { display: flex; gap: 8px; }
.jr-save .input { flex: 1; height: 32px; }
.jr-save .btn { height: 32px; }
.jr-body { max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.jr-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-3); padding: 8px 2px 2px; }
.jr-sub .draft-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.jr-list { display: flex; flex-direction: column; }
.jr-row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px 0 8px; border-radius: 7px; font-size: 13px; }
.jr-row:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.jr-v { width: 26px; flex: none; font-weight: 600; font-size: 12.5px; }
.jr-note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-row small { color: var(--fg-3); font-size: 11.5px; white-space: nowrap; }
.jr-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.jr-row:hover .jr-acts, .jr-row:focus-within .jr-acts { opacity: 1; }
/* canvas tabs like Chrome: they shrink to fit, the title fades out, × sits over it on a fade (always on the active one) */
.tab { --tbg: var(--sunk); flex: 0 1 210px; min-width: 38px; padding-right: 8px; container-type: inline-size; }
.tab:hover { --tbg: color-mix(in oklab, var(--hover) 70%, var(--sunk)); background: var(--tbg); }
.tab[aria-selected="true"] { --tbg: var(--surface); flex-shrink: 0.4; min-width: 64px; }
.tab .tl { flex: 1; min-width: 0; text-overflow: clip; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); }
.tab .tx { position: absolute; right: 6px; top: 50%; translate: 0 -50%; z-index: 1; background: var(--tbg); }
.tab .tx::before { content: ""; position: absolute; right: 100%; top: -4px; bottom: -4px; width: 18px; background: linear-gradient(to right, transparent, var(--tbg)); pointer-events: none; }
.tab .tx:hover { background: color-mix(in oklab, var(--foreground) 10%, var(--tbg)); }
.tab:not(:hover):not([aria-selected="true"]) .tx { opacity: 0; pointer-events: none; }
@container (max-width: 64px) { .tab .tl { display: none; } }
@container (max-width: 52px) { .tab .tico { margin-inline: auto; } }
/* the list of all tabs */
.tabsmenu { width: 320px; padding: 6px; }
.tabsmenu .tm-q input { width: 100%; border: 0; outline: 0; background: color-mix(in oklab, var(--foreground) 5%, transparent); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--foreground); }
.tabsmenu .tm-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; margin-top: 6px; }
.tm-i { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.tm-i[hidden] { display: none; }
.tm-i:hover, .tm-i.on { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
.tm-i .ic { color: var(--fg-3); flex: none; }
.tm-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tm-t b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-t small { font-size: 11.5px; color: var(--fg-3); }
.tm-x { border: 0; background: none; color: var(--fg-3); font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; opacity: 0; }
.tm-i:hover .tm-x { opacity: 1; }
.tm-x:hover { background: color-mix(in oklab, var(--foreground) 10%, transparent); color: var(--foreground); }
.tm-none { padding: 10px; font-size: 13px; color: var(--fg-3); }
/* canvas versions: one small chip in the title line; the panel opens from it */
.doc-h { flex-wrap: nowrap; }
/* a canvas's own controls in the header line (canvas head()) */
.doc-h .path { min-width: 0; overflow: hidden; } 
.doc-h-tools { display: flex; align-items: center; gap: 4px; flex: none; min-width: 0; }
/* the canvas kind is the icon before the title, named in a tooltip */
.doc-h .kind-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -2px 0; border-radius: 6px; color: var(--fg-2); cursor: default; }
.doc-h .kind-ic:hover, .doc-h .kind-ic:focus-visible { background: var(--surface); color: var(--foreground); outline: 0; box-shadow: 0 0 0 1px var(--line); }
.doc-h .grow { flex: 1; }
.verpop { position: relative; flex: none; }
.verpop > summary { list-style: none; }
.verpop > summary::-webkit-details-marker { display: none; }
.vp-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 12px; color: var(--fg-2); cursor: pointer; user-select: none; }
.vp-chip:hover, .verpop[open] .vp-chip { background: color-mix(in oklab, var(--foreground) 7%, transparent); color: var(--foreground); }
.vp-chip.draft { color: var(--foreground); }
.verpop .draft-dot, .vp-h .draft-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); display: inline-block; }
.vp-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; padding: 6px; background: var(--popover, var(--surface)); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-3, 0 12px 32px rgb(0 0 0 / .14)); display: flex; flex-direction: column; }
.vp-panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px -6px; }
.vp-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px 8px; font-size: 13px; font-weight: 500; }
.vp-save { width: calc(100% - 4px); margin: 0 2px; height: 30px; justify-content: center; }
.vp-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px; color: var(--foreground); text-align: left; }
.vp-item:hover { background: color-mix(in oklab, var(--foreground) 6%, transparent); }
.vp-item > .ic { color: var(--fg-3); }
.vp-l { flex: 1; min-width: 0; }
.vp-sub { font-size: 11.5px; color: var(--fg-3); padding: 0 8px 4px; }
.vp-v small { color: var(--fg-3); font-size: 11.5px; }
.vp-v .vp-ok { width: 14px; display: inline-flex; visibility: hidden; }
.vp-v.on .vp-ok { visibility: visible; }
.ver-banner.slim { padding-block: 4px; }
/* Settings → Design */
.ds-sources { display: flex; flex-direction: column; gap: 10px; }
.ds-sources .pp-row.off { opacity: .55; }
.ds-add { display: flex; gap: 8px; }
.ds-sub { font-size: 12px; color: var(--fg-3); margin: 6px 0 4px; }
.ds-g { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ds-g > small { font-size: 11.5px; color: var(--fg-3); padding: 4px 0; }
.ds-s { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; border-top: 1px solid var(--line); }
.ds-entries, .ds-picks { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; margin-top: 8px; }
.ds-e { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--line); font-size: 13px; }
.ds-e:first-child { border-top: 0; }
.ds-e.off { opacity: .5; }
.ds-e .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-e small { font-size: 12px; color: var(--fg-2); }
.ds-e small.muted { color: var(--fg-3); font-size: 11.5px; }
.ds-e .pill { flex: none; margin-top: 1px; }
.ds-try { margin-top: 6px; }
.ds-try.htmx-request { opacity: .5; }
/* Compare canvas: variants side by side */
.cmp-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; }
.cmp-cell { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.cmp-cell figcaption { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.cmp-cell figcaption small { color: var(--fg-3); font-size: 12px; }
.cmp-frame { width: 100%; height: 560px; border: 0; background: #fff; }
.cmp-doc { padding: 12px; max-height: 560px; overflow: auto; }
.cmp-missing { padding: 24px; color: var(--fg-3); font-size: 13px; }
.cmp-acts { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
@container (max-width: 760px) { .cmp-grid { grid-template-columns: 1fr; } }
/* Experiments */
.lab-picks { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.lab-picks.htmx-request { opacity: .5; }
.lab-busy { display: none; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--fg-3); font-size: var(--fs-sm); }
.lab-busy.htmx-request { display: flex; }

/* documents and files on the canvas (.md.prose): reading typography, not chat bubbles */
.md.prose { font-size: 14.5px; line-height: 1.7; color: var(--foreground); }
.md.prose > :first-child { margin-top: 0; }
.md.prose h1 { font-size: 24px; letter-spacing: -.015em; margin: 4px 0 14px; }
.md.prose h2 { font-size: 19px; letter-spacing: -.01em; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.md.prose h3 { font-size: 16px; margin: 20px 0 8px; }
.md.prose h4 { font-size: 14.5px; margin: 16px 0 6px; }
.md.prose p { margin: 0 0 12px; }
.md.prose ul, .md.prose ol { margin: 0 0 12px; padding-left: 24px; }
.md.prose li { margin: 3px 0; }
.md.prose li > p { margin: 0 0 6px; }
.md.prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: -22px; }
.md.prose li > input[type="checkbox"] { margin: 0 8px 0 0; vertical-align: -2px; accent-color: var(--primary, currentColor); }
.md.prose blockquote { margin: 12px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-strong); color: var(--fg-2); }
.md.prose hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.md.prose code:not(pre code) { font-size: .9em; padding: 1px 5px; border-radius: 5px; background: var(--sunk); border: 1px solid var(--line); }
.md.prose pre.codeblock { font-size: 12.5px; line-height: 1.55; padding: 12px 14px; color: var(--foreground); }
.md.prose img { margin: 6px 0; }

/* syntax colors (highlight.js classes); no orange/amber */
:root { --hl-key: oklch(0.5 0.17 290); --hl-str: oklch(0.5 0.13 150); --hl-num: oklch(0.52 0.15 250); --hl-fn: oklch(0.5 0.14 220); --hl-com: var(--fg-3); --hl-del: oklch(0.52 0.17 25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl-key: oklch(0.78 0.12 290); --hl-str: oklch(0.8 0.12 150); --hl-num: oklch(0.8 0.1 250); --hl-fn: oklch(0.8 0.1 220); --hl-del: oklch(0.75 0.14 25); } }
:root[data-theme="dark"] { --hl-key: oklch(0.78 0.12 290); --hl-str: oklch(0.8 0.12 150); --hl-num: oklch(0.8 0.1 250); --hl-fn: oklch(0.8 0.1 220); --hl-del: oklch(0.75 0.14 25); }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type, .hljs-literal, .hljs-meta .hljs-keyword { color: var(--hl-key); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attr-value, .hljs-template-tag { color: var(--hl-str); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable.constant_ { color: var(--hl-num); }
.hljs-title, .hljs-title.function_, .hljs-section, .hljs-attr, .hljs-attribute, .hljs-name, .hljs-selector-class, .hljs-selector-id { color: var(--hl-fn); }
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--hl-com); font-style: italic; }
.hljs-deletion { color: var(--hl-del); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 600; }

/* ═══ System: legacy ══════════════════════════════════════════════════════════════════════════════════════════
   Older class families mapped onto the primitives (docs/DESIGN.md §6), so every menu, row, card and label already
   follows one set of metrics. Rename to the system names when that code is touched; then drop the name here. */

/* menus: one container, one item */
.cm, .rowmenu, .mpick, .slash-pop, .vp-panel { background: var(--popover); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); }
.cm, .rowmenu, .slash-pop, .vp-panel, .tabsmenu { border-radius: var(--r-lg); padding: var(--s-1); }
.mpick { border-radius: var(--r-xl); }
.cm hr, .rowmenu hr, .vp-panel hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-1) calc(-1 * var(--s-1)); }
.cm-i, .rowmenu button, .tm-i, .vp-item, .sp-i, .mp-i { padding: var(--s-1_5) var(--s-2); border-radius: var(--r-sm); font-size: var(--fs-ui); }
.cm-i:hover, .rowmenu button:hover, .tm-i:hover, .tm-i.on, .vp-item:hover, .vp-v.on, .sp-i:hover, .sp-i.hl, .mp-i:hover, .mp-i.hl, .mp-src:hover { background: var(--hover); }
.cm-h, .rm-h, .vp-sub, .mp-h, .menu-h { font-size: var(--fs-meta); color: var(--fg-3); }
.mp-src[aria-current="true"] { background: var(--muted); }
.mp-k, .tm-q input, .tm-x:hover, .code-where, .vp-chip:hover, .verpop[open] .vp-chip { background: var(--muted); }

/* rows: hover rows and divided rows */
.jr-row, .sub-row, .sr-item { border-radius: var(--r-sm); }
.jr-row:hover { background: var(--hover); }
.ds-e, .ditem, .pp-row { font-size: var(--fs-ui); }
.ds-e small:not(.muted) { color: var(--fg-3); }

/* cards: one radius and padding */
.conn-card, .peer-answer, .subcard, .subres, .reqcard, .cmp-cell { border-radius: var(--r-lg); }

/* section labels */
.sb-label, .set-h, .dgh, .chart-t, .bblock-h { letter-spacing: .05em; }

/* segmented and filter chips */
.stepchip { height: 26px; font-size: var(--fs-sm); }

/* hints and empty lines */
.muted-note, .empty-line, .sr-empty, .tm-none, .mp-none { font-size: var(--fs-sm); color: var(--fg-3); }

/* meaning colours from tokens only (diffs, live, connected) */
.dv-n.ins { color: var(--ok); background: var(--ok-soft); } .dv-n.del { color: var(--bad); background: var(--bad-soft); }
.dv-l.ins { background: var(--ok-soft); } .dv-l.del { background: var(--bad-soft); }
.run-on .run-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.btw-a.err { color: var(--bad); }

/* class-name collisions with the prototype (app.css), fixed here:
   .label — a form label in product UI, but also the sidebar's group-header text */
.grp-h .label, .folder.grp > .row .label { display: inline; flex-direction: row; gap: 0; font-size: inherit; font-weight: inherit; }
/* .fv — the prototype's funnel value, but the file viewer's root */
.fv:not(.funnel .fv) { text-align: inherit; font-weight: inherit; }

/* Settings → Design system (the live showcase) */
.ui-demo { margin-top: var(--s-6); }
.ui-demo-b { display: flex; flex-direction: column; gap: var(--s-3); }
.ui-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.ui-col { display: flex; flex-direction: column; gap: var(--s-4); max-width: 520px; }
.ui-scale { display: flex; flex-direction: column; gap: var(--s-1_5); }
.ui-type { display: flex; align-items: baseline; gap: var(--s-4); }
.ui-type code, .ui-space code, .ui-radius code { font-family: inherit; font-size: var(--fs-meta); color: var(--fg-3); width: 90px; flex: none; }
.ui-space { display: flex; align-items: center; gap: var(--s-3); }
.ui-space i { height: 10px; background: var(--signal-soft); box-shadow: inset 0 0 0 1px var(--signal); }
.ui-scale:has(.ui-radius) { flex-direction: row; flex-wrap: wrap; gap: var(--s-3); }
.ui-radius { width: 84px; height: 56px; border: 1px solid var(--line-strong); background: var(--sunk); display: grid; place-items: end start; padding: 6px; }
.ui-radius code { width: auto; }
.ui-dialog { border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: var(--s-4); max-width: 560px; background: var(--surface); box-shadow: var(--shadow-float); }
.ui-split { display: flex; height: 380px; max-width: none; padding: 0; overflow: hidden; }
.ui-page { padding: 0; }
.ui-plain { display: grid; place-items: center; padding: var(--s-6) var(--s-4); background: var(--app); border-radius: var(--r-lg); }
/* ═══ System: settings and pages (kit.setHead / section / choices / fieldGroup / fieldRow / table / stats) ═══ */
.set-head { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-5); }
.set-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.set-head h2 { margin: 0; font-size: var(--fs-h1); font-weight: 600; line-height: 1.3; }
.set-head p { margin: 0; font-size: var(--fs-read); line-height: 1.5; color: var(--fg-2); }
.set-head > .icon-tile { margin-top: 2px; }
.set-stack > .set-head, .dlg-split-detail > .set-head { margin-bottom: 0; }
/* the footer of a page: hint left, actions right (kit.pageFoot) */
.page-foot { display: flex; align-items: center; gap: var(--s-2); }
.page-foot > .grow { flex: 1; }
/* a page of its own on a plain background: sign-in, setup, welcome (kit.pageCard) */
.page-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.page-card.wide { width: min(780px, 100%); }
.page-card > .set-head { margin-bottom: 0; }
/* the step line of a wizard (kit.steps) */
.step-line { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1_5); font-size: var(--fs-sm); color: var(--fg-3); }
.step-line li, .step-line a { display: inline-flex; align-items: center; gap: var(--s-1_5); color: inherit; text-decoration: none; }
.step-line a:hover { color: var(--foreground); }
.step-line li + li::before { content: ""; width: 12px; height: 1px; background: var(--line-strong); }
.step-n { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); display: grid; place-items: center; font-size: var(--fs-meta); }
.step-line li.cur { color: var(--foreground); font-weight: 500; }
.step-line li.cur .step-n { box-shadow: inset 0 0 0 1.5px var(--foreground); }
.set-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.sect { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.sect-h { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-4) 0; }
.sect-t { display: flex; align-items: center; gap: var(--s-2); min-height: 24px; }
.sect-t > .ic { color: var(--fg-3); }
.sect-t h3 { margin: 0; font-size: var(--fs-h3); font-weight: 600; }
.sect-t .grow { flex: 1; }
.sect-hint { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-3); }
.sect-b { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4); }
.sect-b > .rows.divided { margin: calc(-1 * var(--s-2)) 0; }
.sect-b:empty { display: none; }
.sect-h:last-child { padding-bottom: var(--s-4); }
.sect-h + .sect-f { margin-top: var(--s-4); }
.sect-f { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2_5) var(--s-4); border-top: 1px solid var(--line); background: var(--sunk); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.sect-f .grow { flex: 1; }
.sect .textarea { min-height: 96px; font-size: var(--fs-ui); line-height: 1.5; }
.fgroup { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fgroup > legend { padding: 0; }
.fgroup > .choices { margin-top: var(--s-2); }
.choices { display: flex; flex-direction: column; gap: 2px; margin: 0 calc(-1 * var(--s-2)); }
.check-row .radio { margin-top: 3px; accent-color: var(--foreground); }
.check-row .row-t .t { font-weight: 400; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }
.tbl { overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.tbl th { text-align: left; font-size: var(--fs-meta); font-weight: 500; color: var(--fg-3); padding: var(--s-2) var(--s-2_5); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: var(--s-2) var(--s-2_5); border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td small { color: var(--fg-3); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-3); }
.stat { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.stat span { font-size: var(--fs-meta); color: var(--fg-3); }
.stat b { font-size: var(--fs-page); font-weight: 600; letter-spacing: -.01em; }
/* the settings main area: one card, the stack inside */
.set-main { padding: var(--s-6) var(--s-6) var(--s-8); }
.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: var(--s-2); }
.invite-form > .select { width: 100%; }
.cfg-dump > summary { cursor: pointer; font-size: var(--fs-ui); color: var(--fg-2); }
.cfg-dump .codeblock { margin-top: var(--s-2); max-height: 420px; }
.row-i .pa { width: 28px; height: 28px; font-size: 10px; }
.choices .check-row { padding: var(--s-1) var(--s-2); }
.choices .check-row:has(.row-m) { padding: var(--s-1_5) var(--s-2); }

/* ═══ Subagents: drawers stacked over their parent chat ══════════════════════════════════════════════════════════
   Each level is one more drawer from the right; the chat under it keeps a strip in view (depth, and where you came
   from). The drawer is the subagent's chat alone (/s/<id>/pane, body.pane). */
.chat .sub-drawer { position: absolute; top: 0; bottom: 0; right: 0; left: calc((var(--i, 0) + 1) * 28px); z-index: calc(30 + var(--i, 0) * 2); display: flex;
  background: var(--surface-chat); border-left: 1px solid var(--line-strong); border-radius: var(--r-lg) 0 0 var(--r-lg); overflow: hidden;
  box-shadow: -16px 0 40px -12px oklch(0.2 0.02 262 / .22); transform: translateX(32px); opacity: 0; transition: transform .22s var(--ease), opacity .18s var(--ease); }
.chat .sub-drawer.in { transform: none; opacity: 1; }
.chat .sub-drawer > iframe { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.chat .sub-scrim { position: absolute; inset: 0; z-index: calc(29 + var(--i, 0) * 2); background: color-mix(in oklab, var(--foreground) 7%, transparent); cursor: pointer; border: 0; padding: 0; }
body.pane { background: var(--surface-chat); }
body.pane .app { --sb: 0px; }
body.pane :is(.sb, .mbar, #rz, #canvas, #ctxl, #side, .scrim) { display: none; }
body.pane .stage { margin: 0; border: 0; border-radius: 0; box-shadow: none; }

/* a canvas tab alone, for a screenshot: no app around it; a full-bleed canvas fills the viewport, others grow */
body.shot { margin: 0; background: var(--surface); }
body.shot #canvas-in { display: flex; flex-direction: column; }
body.shot.fixed { height: 100vh; overflow: hidden; }
body.shot.fixed #canvas-in { height: 100vh; }
body.shot .cbody { flex: 1; min-height: 0; overflow: visible; }
body.shot :is(.bare-ver, .bare-banner, .verpop, .dcv-zoom, .dcv-panel, .dcv-selbar, .doc-h .doc-h-tools) { display: none !important; }

/* rail: chats speak the projects' tile language — a round tile (projects are square) with the first letter, an
   icon for an untitled or a code chat; the same active marker, the status dot on the tile; no grey block */
.app[data-sb="rail"] .rail-ses { gap: 2px; padding: 0; margin: 0 0 4px; background: none; border-radius: 0; }
.app[data-sb="rail"] .rs { width: 40px; height: 40px; border-radius: 10px; background: none; box-shadow: none; color: var(--fg-2); }
.app[data-sb="rail"] .rs:hover { background: none; }
.app[data-sb="rail"] .rs .rs-t { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12px; font-weight: 600; transition: background-color .15s, color .15s; }
.app[data-sb="rail"] .rs .rs-t .ic { width: 14px; height: 14px; }
.app[data-sb="rail"] .rs:hover .rs-t { background: var(--muted); color: var(--foreground); }
.app[data-sb="rail"] .rs.on .rs-t { background: var(--foreground); color: var(--background); box-shadow: none; }
.app[data-sb="rail"] .rs .rs-t::after { content: ''; position: absolute; left: -15px; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--foreground); translate: 0 -50%; transition: height .2s var(--ease-out); pointer-events: none; }
.app[data-sb="rail"] .rs:hover .rs-t::after { height: 8px; }
.app[data-sb="rail"] .rs.on .rs-t::after { height: 20px; }
.app[data-sb="rail"] .rs .ri { right: 4px; top: 4px; }
.app[data-sb="rail"] .rs .ri :is(.wdot, .edot, .udot, .spin) { box-shadow: 0 0 0 2px var(--app); }

/* comments pinned to elements of any canvas tab (web/assets/js/comments.js) */
.tab-content[data-cmt-tab], .tab-bare[data-cmt-tab] { position: relative; }
.cmt-btn { position: relative; }
.cmt-btn[aria-pressed="true"] { background: var(--signal-soft); color: var(--signal); }
.cmt-n { position: absolute; top: -3px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--signal); color: white; font-size: 10px; font-weight: 600; line-height: 15px; text-align: center; pointer-events: none; }
.cmt-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.tab-content.cmt-on, .tab-content.cmt-on * { cursor: crosshair !important; }
.tab-content.cmt-on iframe:not(.sandbox-frame) { pointer-events: none; }
.cmt-hover { position: absolute; pointer-events: none; z-index: 4; border-radius: 4px; box-shadow: 0 0 0 2px var(--signal); background: var(--signal-soft); }
.cmt-pin { position: absolute; pointer-events: auto; width: 24px; height: 24px; margin: -24px 0 0 0; padding: 0; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 12px 12px 12px 3px; background: var(--signal); color: white; font: 600 9.5px/1 var(--font-ui); letter-spacing: -.02em; box-shadow: var(--shadow-1); cursor: pointer !important; transition: transform .15s var(--ease-out); transform-origin: 0 100%; }
.cmt-pin:hover, .cmt-pin.on { transform: scale(1.12); }
.cmt-pin.on { box-shadow: 0 0 0 3px var(--signal-soft), var(--shadow-1); }
.cmt-pin.draft { background: var(--surface); border-color: var(--signal); }
.cmt-hint { position: fixed; z-index: 70; translate: -50% 0; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--popover); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); color: var(--fg-2); pointer-events: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cmt-hint-btn { pointer-events: auto; border: 0; border-radius: 999px; padding: 2px 10px; background: var(--hover); color: var(--fg-2); font: inherit; cursor: pointer; }
.cmt-hint-btn[aria-pressed="true"] { background: var(--signal-soft); color: var(--signal); }
.cmt-pin.resolved { opacity: .45; }
.cmt-pin.resolved:hover, .cmt-pin.resolved.on { opacity: 1; }
.cmt-pop { position: fixed; z-index: 80; width: 320px; max-width: calc(100vw - 16px); padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); background: var(--popover); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.cmt-pop .textarea { min-height: 0; resize: none; font-size: var(--fs-ui); line-height: 1.45; }
.cmt-where { flex: 1; min-width: 0; padding: 2px 4px 0; font-size: var(--fs-meta); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmt-ph { display: flex; align-items: center; gap: 2px; }
.cmt-foot { display: flex; align-items: center; gap: var(--s-2); }
.cmt-foot .grow { flex: 1; }
.cmt-agent { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--fg-2); cursor: pointer; }
.cmt-list { display: flex; flex-direction: column; gap: var(--s-2); max-height: 280px; overflow-y: auto; padding: 0 4px; }
.cmt-e { display: flex; flex-direction: column; gap: 2px; }
.cmt-eh { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); }
.cmt-eh span { color: var(--fg-3); font-size: var(--fs-meta); }
.cmt-et { font-size: var(--fs-ui); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt-sent, .cmt-send { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 2px 4px; font-size: var(--fs-sm); color: var(--fg-3); background: none; border: 0; border-radius: var(--r-sm); }
.cmt-send { color: var(--signal); cursor: pointer; }
.cmt-send:hover { background: var(--signal-soft); }
.cmt-reply { display: flex; align-items: flex-end; gap: var(--s-1); }
.cmt-reply .textarea { flex: 1; }
body.shot .cmt-btn, body.shot .cmt-layer { display: none; }

/* a design and its prototype: build / open / update (core tabBody), in the title line or the floating version chip */
.proto-bar { display: inline-flex; align-items: center; gap: 2px; }
.bare-ver:has(.proto-bar) { display: flex; align-items: center; gap: 2px; }
.bare-ver .verpop + .proto-bar { padding-left: 2px; margin-left: 2px; border-left: 1px solid var(--line); }
.proto-btn.btn { height: 24px; padding: 0 8px; gap: 5px; font-size: 12px; font-weight: 500; color: var(--fg-2); border-radius: 7px; }
.proto-btn.btn:hover { color: var(--foreground); }
.proto-btn.behind { color: var(--signal); }
.proto-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--signal); margin-left: -2px; }
.doc-h .proto-bar .proto-btn { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proto-busy { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.proto-busy .spin { color: var(--signal); }
/* a code project's chat: the branch its folder is on, by the send button */
.cbar-branch { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 180px; margin-right: 8px; font-size: 12px; color: var(--fg-3); cursor: default; }
.cbar-branch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the git menu on the branch chip (owner): the chip is its trigger */
.cbar-git { min-width: 0; display: inline-flex; }
button.cbar-branch { border: 0; background: none; font: inherit; font-size: 12px; padding: 2px 6px; border-radius: var(--r-sm); cursor: pointer; margin-right: 4px; }
button.cbar-branch:hover, button.cbar-branch[aria-expanded="true"] { background: var(--hover); color: var(--foreground); }
.cbar-branch small { font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.git-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
.cbar-git [role="menuitem"][aria-disabled="true"] { opacity: .45; pointer-events: none; }
.git-dlg .git-msg .textarea { width: 100%; resize: vertical; }
.git-files { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-3); max-height: 260px; overflow: auto; }
.git-file { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: var(--r-sm); font-size: var(--fs-sm); cursor: pointer; min-width: 0; }
.git-file:hover { background: var(--hover); }
/* the dev run as an icon: a live dot on the terminal */
.run-on.btn { position: relative; }
.run-on .run-dot { position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; box-shadow: 0 0 0 2px var(--surface); }

/* "My localhost" dialog */
.lh-hint { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--fg-3); line-height: 1.45; }
.lh-none { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-ui); line-height: 1.5; }
.lh-url { color: var(--fg-2); user-select: all; }
.lh-sep { border: 0; border-top: 1px solid var(--line); margin: var(--s-3) 0; }
.lh-tun { display: flex; flex-direction: column; gap: var(--s-2); }
.lh-tun-h { font-size: var(--fs-ui); font-weight: 500; }
.lh-tun-row { display: flex; gap: var(--s-2); }
.lh-tun-row .input { width: 110px; }
.lh-cmd { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--sunk); border: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; word-break: break-all; user-select: all; cursor: copy; }
/* the browser canvas while commenting: the element under the pointer, as the page sees it */
.rb-view.rb-cm .rb-img { cursor: crosshair; }
.rb-hl { position: absolute; z-index: 3; pointer-events: none; border-radius: 3px; box-shadow: 0 0 0 2px var(--signal); background: var(--signal-soft); transition: left .06s, top .06s, width .06s, height .06s; }
/* the browser canvas showing the tab's own app natively (an iframe through the preview proxy) */
.rb-frame { flex: 1; width: 100%; min-height: 240px; border: 0; border-top: 1px solid var(--line); background: white; }
.rbrowser.rb-native .rb-wait { display: none; }
/* a dropdown of the streamed page, drawn by the viewer where the page has it */
.rb-menu.cm { position: absolute; z-index: 6; max-height: 320px; overflow-y: auto; animation: none; }
.rb-menu .cm-i[aria-selected="true"] { background: var(--accent); }
/* the live browser: the Neko client's video fills the tab; a transparent shield takes the pointer while commenting */
.rb-live-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); }
.rbrowser.rb-is-live .rb-img { visibility: hidden; }
.rb-shield { position: absolute; inset: 0; z-index: 2; cursor: crosshair; }
/* what a turn changed: the chat card (T3-style) and the Changes tab (diffs by @pierre/diffs) */
.chg-card { padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-1); }
.chg-h { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); }
.chg-h .grow { flex: 1; }
.chg-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chg-n { display: inline-flex; gap: 6px; font-size: var(--fs-sm); font-style: normal; }
.chg-n i { font-style: normal; font-variant-numeric: tabular-nums; }
.chg-n .add { color: var(--ok); } .chg-n .del { color: var(--bad); }
.chg-tree { display: flex; flex-direction: column; font-size: var(--fs-sm); }
.chg-d > summary { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: var(--r-sm); cursor: pointer; list-style: none; color: var(--fg-2); }
.chg-d > summary::-webkit-details-marker { display: none; }
.chg-d > summary:hover { background: var(--hover); }
.chg-d > summary .chev { transition: transform .15s var(--ease); }
.chg-d[open] > summary .chev { transform: rotate(90deg); }
.chg-in { padding-left: 16px; display: flex; flex-direction: column; }
.chg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.chg-f { display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 22px; border: 0; background: none; border-radius: var(--r-sm); color: var(--foreground); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.chg-f:hover { background: var(--hover); }
.chg-st { width: 14px; font-size: 11px; font-weight: 600; text-align: center; color: var(--fg-3); }
.chg-st.st-A { color: var(--ok); } .chg-st.st-D { color: var(--bad); } .chg-st.st-M, .chg-st.st-R { color: var(--signal); }
.chg-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chg-bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.chg-bar .grow { flex: 1; }
.chg-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--fg-2); }
.chg-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(180px, 260px) 1fr; }
.chg-list { overflow: auto; border-right: 1px solid var(--line); padding: var(--s-1); display: flex; flex-direction: column; }
.chg-list .chg-f { padding-left: 6px; }
.chg-diffs { overflow: auto; padding: var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
.chg-file { min-height: 60px; }
.chg-rv { margin-left: 4px; }
.chg-empty { padding: var(--s-5); color: var(--fg-3); text-align: center; }
.chg-empty.small { padding: var(--s-2); text-align: left; }
/* the Files tab of a code project (web/assets/js/files.js): the tree on the left, the file on the right */
.pf-view { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; height: 100%; min-height: 0; }
.pf-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.pf-tools { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2); border-bottom: 1px solid var(--line); }
.pf-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--fg-3); }
.pf-search .input { flex: 1; min-width: 0; height: 28px; font-size: var(--fs-sm); }
.pf-new { display: inline-flex; }
.pf-tree { flex: 1; min-height: 0; overflow: auto; padding: var(--s-1); display: flex; flex-direction: column; }
.pf-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px calc(6px + var(--d, 0) * 14px); border: 0; background: none; border-radius: var(--r-sm); color: var(--foreground); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; min-width: 0; }
.pf-row:hover { background: var(--hover); }
.pf-row.on { background: var(--signal-soft); font-weight: 500; }
.pf-row svg { flex: none; color: var(--fg-3); }
.pf-row:not(.pf-dir) { padding-left: calc(26px + var(--d, 0) * 14px); }
.pf-dir > svg:first-child { transition: transform .15s var(--ease); }
.pf-dir[aria-expanded="true"] > svg:first-child { transform: rotate(90deg); }
.pf-row small { margin-left: 4px; }
.pf-mark, .pf-dirty { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
.pf-dirty { background: var(--fg-2); }
.pf-ask { padding: 2px 4px; }
.pf-ask .input { width: 100%; height: 28px; font-size: var(--fs-sm); }
.pf-head .pf-ask { flex: 1; padding: 0; }
.pf-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pf-head { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); min-height: 45px; }
.pf-head .grow { flex: 1; }
.pf-back { display: none; }
.pf-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--fg-3); }
.pf-path .last { color: var(--foreground); font-weight: 500; }
.pf-sep { font-style: normal; margin: 0 3px; color: var(--fg-3); }
.pf-ro { font-size: var(--fs-sm); color: var(--fg-3); margin-right: var(--s-2); }
.pf-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); }
.pf-bar[hidden] { display: none; }
.pf-bar .grow { flex: 1; }
.pf-body { flex: 1; min-height: 0; overflow: auto; }
.pf-code { min-height: 100%; }
.pf-img { padding: var(--s-4); display: flex; justify-content: center; }
.pf-img img { max-width: 100%; height: auto; background: repeating-conic-gradient(var(--hover) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }

/* the message rail of a chat (web/assets/js/rail.js): ticks at the left edge of the log, a card on hover */
.msg-rail { position: absolute; left: 6px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap, 6px); padding: 4px 2px; }
.msg-rail[hidden] { display: none; }
.log.has-rail .log-inner { padding-left: 38px; }
.mr-t { width: var(--w, 10px); height: 2px; padding: 0; border: 0; border-radius: 2px; background: var(--fg-3); opacity: .35; cursor: pointer; transition: opacity .15s var(--ease), background .15s var(--ease), width .15s var(--ease); }
.mr-t::before { content: ""; display: block; height: 10px; margin-top: -4px; }
.mr-t.in { opacity: .85; background: var(--foreground); }
.mr-t:hover, .mr-t:focus-visible { opacity: 1; background: var(--signal); width: calc(var(--w, 10px) + 4px); outline: none; }
.mr-pop { position: absolute; left: 30px; z-index: 7; width: min(320px, calc(100% - 48px)); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md, 0 6px 24px rgb(0 0 0 / .12)); font-size: var(--fs-sm); pointer-events: none; }
.mr-pop[hidden] { display: none; }
.mr-text { color: var(--foreground); line-height: 1.4; }
.mr-ctx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mr-when { margin-top: 6px; color: var(--fg-3); font-size: 11px; }
.act-note { font-size: var(--fs-sm); color: var(--fg-3); }
/* the browser bar: whose localhost this is (a colleague's tunnel, a connected computer) */
.rb-who { flex: none; padding: 1px 7px; margin-right: 4px; border-radius: 999px; background: var(--signal-soft); color: var(--signal); font-size: 11.5px; font-weight: 500; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* import connections from other harnesses */
.imp-list { display: flex; flex-direction: column; gap: 2px; margin: var(--s-2) 0 var(--s-3); padding: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.imp-dlg textarea { max-height: 180px; overflow: auto; field-sizing: fixed; }
.imp-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-1); border-radius: var(--r-md); }
.imp-row:hover { background: var(--hover); }
.imp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.imp-t .muted { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-note { font-size: 11px; color: var(--fg-3); }
/* the stage never scrolls sideways: with overflow:hidden a focus or scrollIntoView inside (a comment's field, a pin)
   could shift it and hide the left of the canvas; clip forbids that scrolling too */
.stage { overflow: clip; }
/* every dialog fits the screen: the header and the buttons stay, the middle scrolls; a text field grows only so far
   (a long pasted brief pushed "Build" out of reach) */
.dh-dialog > #dlg-body > .dlg-form { max-height: calc(100dvh - 48px); min-height: 0; }
.dh-dialog .dlg-form > .dlg-body { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.dh-dialog .dlg-form > .dlg-body > .dlg-foot { position: sticky; bottom: 0; background: var(--popover, var(--surface)); padding-top: var(--s-2); }
.dh-dialog .dlg-form .textarea { max-height: 40vh; overflow-y: auto; }

/* The phone: one column, sized for a thumb */
@media (max-width: 820px) {
  /* a page without a chat (My day, Connections…) is all canvas: nothing to switch to */
  .app[data-chat="none"][data-mview] .canvas { display: flex !important; }
  /* the bar on top: a menu button you can hit; the chat's own header carries its title */
  .mbar { padding: 6px 8px 0; min-height: 44px; }
  .mbar [data-act="sb-open-m"] { width: 40px; height: 40px; font-size: 22px; }
  .mbar .ttl { font-size: 15px; }
  .mbar .seg button { padding: 7px 14px; font-size: 13px; }
  body[data-page="session"] .mbar .ttl { display: none; }
  /* the screen layouts are for a wide screen (and choosing one here would change it there too) */
  [data-act="view-menu"] { display: none !important; }
  [data-popover] { max-width: calc(100vw - 16px); }
  .stage, .app[data-sb="closed"] .stage { margin: 6px; }
  /* the message ruler is for a pointer; on a phone it sits on the text */
  .msg-rail { display: none !important; }
  /* iOS zooms into a field under 16px on focus */
  .input:not([type="checkbox"]):not([type="radio"]), .select, .textarea, #cin { font-size: 16px; }
  /* footers with several buttons wrap instead of running off */
  .sect-f { flex-wrap: wrap; }
  /* toasts drop from the top: at the bottom they cover the composer and the send button */
  .toaster { left: 0; right: 0; width: auto; max-width: none; top: env(safe-area-inset-top, 0px); bottom: auto; flex-direction: column; padding: 8px; }
  /* settings: the sections in one row that scrolls sideways */
  .set-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; margin: 0 -4px; padding: 0 4px 4px; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav a { flex: none; white-space: nowrap; padding: 8px 12px; }
  .set-nav .back { margin-bottom: 0; }
  .set-h { display: none; }
  .set-main { padding: 16px 14px 22px; }
  .set-main table { display: block; max-width: 100%; overflow-x: auto; }   /* a wide table scrolls inside its card */
  /* a panel header with actions: the actions go under the title instead of squeezing it */
  .panel-h { flex-wrap: wrap; row-gap: 2px; }
  .panel-h > .grow { flex-basis: calc(100% - 32px); }
  .plain-main.wide { padding: 12px 8px 24px; }
  /* Files: the tree, or the open file with a way back; Changes: the list over the diffs */
  .pf-view { grid-template-columns: minmax(0, 1fr); }
  .pf-view[data-pane="file"] .pf-side, .pf-view:not([data-pane="file"]) .pf-main { display: none; }
  .pf-side { border-right: 0; }
  .pf-back { display: inline-flex; margin-left: -6px; }
  .pf-row { padding-block: 8px; }
  .chg-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .chg-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 30vh; }
  .chg-bar { flex-wrap: wrap; row-gap: var(--s-1); }
}

/* forks: under the chat they came from, a step in, with a branch mark; in the chat, where they went off and from what */
.sess.fork { margin-left: calc(var(--d, 0) * 14px); }
.sess .fork-mark { display: inline-flex; color: var(--fg-3); flex: none; }
.chat-ttl .s .fork-of { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--fg-3); text-decoration: none; }
.chat-ttl .s .fork-of span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ttl .s .fork-of:hover { color: var(--foreground); }
.chat-ttl .s .st + .fork-of::before, .chat-ttl .s > span + .fork-of::before { content: "·"; margin-right: 2px; }
.fork-line { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-2); padding: 6px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--fg-2); font-size: var(--fs-sm); text-decoration: none; }
.fork-line:hover { color: var(--foreground); border-color: var(--fg-3); }
.fork-line .arrow { color: var(--fg-3); }

/* my browser: the three steps of connecting the extension */
.bl-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--s-3); }
.bl-steps li > * { margin-top: var(--s-2); }
.bl-steps li > .btn { display: flex; width: fit-content; }

/* a busy button (kit): what it started is running — not pressable again, the same size, a spinner shown after a
   moment (a quick answer does not flicker): in place of the icon, or — a label alone — over the label */
.btn[aria-busy="true"] { pointer-events: none; cursor: progress; position: relative; }
.btn[aria-busy="true"] > .ic { display: none; }
.btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; opacity: 0; animation: rot .7s linear infinite, btn-busy 0s .15s forwards; }
.btn[aria-busy="true"]:not(:has(> .ic))::before { position: absolute; left: calc(50% - 7px); top: calc(50% - 7px); }
.btn[aria-busy="true"]:not(:has(> .ic)) { -webkit-text-fill-color: transparent; animation: btn-busy-label 0s .15s backwards; }
.btn[aria-busy="true"][data-size="icon-sm"]::before, .btn[aria-busy="true"][data-size="icon-xs"]::before { width: 12px; height: 12px; }
@keyframes btn-busy { to { opacity: .9; } }
@keyframes btn-busy-label { from { -webkit-text-fill-color: currentColor; } }

/* my browser, live (plugins/mybrowser): a tab of the person's own Chrome streamed into the canvas; the bar and the view
   are the canvas browser's (.rb-*) */
.mybr { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tab-bare:has(.mybr) { padding: 6px 0 0; }
.tab-bare .mybr { flex: 1; }
.mybr .rb-img { object-fit: contain; }
.mybr .mb-note { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-6); text-align: center; font-size: var(--fs-sm); }
.mybr.rb-live .mb-note { display: none; }
.app.dragging .mb-view { pointer-events: none; }

/* Settings → My computers, in the app: sign-ins from Chrome */
.chr-out:empty { display: none; }
.chr-out.bad { color: var(--bad); }
.appr .appr-note { margin: 0; font-size: var(--fs-sm); color: var(--fg-3); }
.imp-acts { display: inline-flex; gap: var(--s-1); }
.move-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.move-col { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.move-col .field-hint { margin: 0; }
.move-list { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
@media (max-width: 820px) { .move-grid { grid-template-columns: 1fr; } }
.appr .appr-why { font-size: var(--fs-ui); line-height: 1.5; }
.appr .appr-why span { color: var(--fg-3); }