/* Mama – layout and components. Only variables from theme.css, no fixed colors.
   Rule: text is gray or white. Only small marks carry color (dots, status, primary button). */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg-0); color: var(--text);
  font: 400 var(--font-size)/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
/* The fonts carry the 1.5 themselves (theme.css, #226): no half-leading, so no rounding lifts the text. */
.font-lh body { line-height: normal; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
code, pre, .mono { font-family: var(--font-mono); font-size: .92em; }
/* The mono fonts keep their own metrics: blocks keep the 1.5, inline code stays "normal" and so never makes its line taller. */
pre, .mono { line-height: 1.5; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; margin: 0; }
::selection { background: var(--accent-ring); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 6px; }
.no-anim *, .no-anim *::before, .no-anim *::after { animation: none !important; transition: none !important; }

/* ---------- Shell ---------- */
/* Rail and sidebar sit on --bg-0; top bar, content and detail on an inset surface (.stage). */
.app {
  height: 100%; display: grid; padding: var(--gap) var(--gap) var(--gap) 0;
  grid-template-columns: var(--rail) var(--side) minmax(0, 1fr) 0;
  grid-template-rows: var(--top) minmax(0, 1fr);
  grid-template-areas: "rail side top top" "rail side main detail";
  transition: grid-template-columns var(--t) var(--ease);
}
.app.detail-open { grid-template-columns: var(--rail) var(--side) minmax(0, 1fr) var(--detail); }
.app.no-side { grid-template-columns: var(--rail) 0 minmax(0, 1fr) 0; }
.app.no-side.detail-open { grid-template-columns: var(--rail) 0 minmax(0, 1fr) var(--detail); }
.stage { grid-column: 3 / 5; grid-row: 1 / 3; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); pointer-events: none; }
[data-bg="glow"] .stage { background-image: radial-gradient(ellipse 70% 40% at 50% 0%, var(--accent-soft), transparent 70%); }

/* Handles on the edge of sidebar and detail to drag their width (#128, js/panels.js): a line shows on hover */
.sizer { display: none; position: relative; width: 9px; grid-row: 1 / 3; z-index: 40; cursor: col-resize; touch-action: none; }
.sizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px; border-radius: 2px; background: transparent; transition: background var(--t); }
.sizer:hover::after, .sizer.on::after, .sizer:focus-visible::after { background: var(--line-2); }
.sizer:focus-visible { outline: 0; }
.sizer.for-side { display: block; grid-column: 2; justify-self: end; margin-right: -5px; }
.app.no-side .sizer.for-side { display: none; }
.sizer.for-detail { grid-column: 4; grid-row: 2; justify-self: start; margin-left: -5px; }
.app.detail-open .sizer.for-detail { display: block; }
.app.resizing { transition: none; }
.app.resizing, .app.resizing * { cursor: col-resize; user-select: none; }

/* Rail */
.rail { grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; z-index: 30; }
/* The brand mark "Orbit" (#195) keeps its own colors, whatever the accent. */
.logo { width: 34px; height: 34px; display: block; flex: none; margin: 5px 0 14px; }
.logo svg { display: block; width: 100%; height: 100%; }
.rail-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 0; padding: 0; background: none; color: var(--text-3); display: grid; place-items: center; transition: background var(--t), color var(--t); }
.rail-btn:hover { background: var(--bg-3); color: var(--text); }
.rail-btn.active { color: var(--text); background: var(--bg-3); }
.rail-btn .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--bg-0); }
.rail-btn[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 48px; white-space: nowrap; background: var(--bg-solid); color: var(--text); padding: 4px 9px; border-radius: 7px; font-size: 12px; box-shadow: var(--shadow); pointer-events: none; }
.rail .spacer { flex: 1; }
.rail .rail-label { display: none; }

/* Top bar */
.topbar { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line); min-width: 0; z-index: 20; }
/* Chips and run pills in the top bar do not squeeze it to nothing (#176). */
.crumbs { display: flex; align-items: center; gap: 6px; min-width: min(25%, 160px); color: var(--text-3); font-size: 13px; }
.crumbs > span { display: flex; align-items: center; }
.crumbs b { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .grow { flex: 1; }
.search-btn { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 10px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--text-3); min-width: 0; overflow: hidden; white-space: nowrap; }
/* Short of room (chips in the top bar) its label gives way first, and never wraps. */
.search-btn > .ico, .search-btn kbd { flex: none; }
.search-btn .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.search-btn:hover { border-color: var(--line-2); color: var(--text-2); }
.search-btn kbd { margin-left: auto; }
/* Short of room (several projects with a run) only the title (the third column) gives way, before the crumbs do: the
   pill is never narrower than its dot, avatar, clock and buttons (#176). Still too narrow, .top-tight hides the clocks
   (and the titles, by then cut to nothing) and .top-tighter the avatars too (fitTop in app.js). */
.run-pill { display: grid; grid-auto-flow: column; grid-template-columns: auto auto minmax(0, max-content); align-items: center; height: 32px; padding: 0 4px 0 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; color: var(--text-2); flex: 0 50 auto; max-width: 380px; }
/* Margins instead of a gap: a title cut to nothing leaves no double gap, its padding lies under the next part. */
.run-pill > * + * { margin-left: 8px; }
.run-pill > .lbl { margin-left: 0; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.top-tight .run-pill { grid-template-columns: none; }
.top-tight .run-pill :is(.lbl, .time), .top-tighter .run-pill .av { display: none; }
.run-pill:hover { border-color: var(--line-2); }
.run-pill b { color: var(--text); font-weight: 500; }
.run-pill .time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.run-queue { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--bg-3); color: var(--text-2); font-variant-numeric: tabular-nums; cursor: pointer; }
.run-queue:hover { color: var(--text); }
.rq-head { justify-content: space-between; margin-bottom: 10px; }
.rq-head > span { display: inline-flex; align-items: center; gap: 6px; }
.rq-acts { justify-content: flex-end; gap: 2px; }
/* Tables of the tab Runs: no cell wraps (#165); the item column takes the room left and cuts its text off. */
.tbl.rq td, .tbl.rq th, .tbl.runs td, .tbl.runs th { white-space: nowrap; }
.tbl.rq .rq-what, .tbl.runs .runs-what { width: 100%; max-width: 0; min-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tbl.rq .grip { color: var(--text-3); cursor: grab; display: inline-grid; place-items: center; width: 24px; height: 24px; }
.tbl.rq tr.dragging { opacity: .4; }
.tbl.rq tr.drop-before > td { box-shadow: inset 0 2px 0 var(--accent); }
.tbl.rq tr.drop-after > td { box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 640px) {
  .tbl.rq .rq-when, .tbl.rq .rq-name { display: none; }
  .tbl.rq td, .tbl.rq th { padding-left: 8px; padding-right: 8px; }
}
.counter { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-2); }
.counter:hover { background: var(--bg-3); color: var(--text); }
.counter .n { position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 10px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-1); }
.counter .n.auto { background: var(--text-3); color: var(--bg-1); }   /* only handoffs the autopilot is about to accept (#221) */
.icon-btn.menu-btn { display: none; }

/* Sidebar */
.side { grid-area: side; display: flex; flex-direction: column; min-height: 0; overflow: hidden; z-index: 25; }
.side-head { padding: 10px 10px 6px 14px; }
.side-head h2 { font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.side-scroll { flex: 1; overflow: auto; padding: 2px 8px 16px; }
.side-sec { margin-top: 18px; }
.side-sec > .lbl { font-size: 12px; font-weight: 500; color: var(--text-3); padding: 0 8px 6px; display: flex; align-items: center; gap: 6px; }
.side-sec > .lbl .side-gone { font-weight: 400; white-space: nowrap; }
.side-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: calc(var(--sp) * .75) 8px; border: 0; border-radius: 8px; background: none; text-align: left; color: var(--text-2); transition: background var(--t), color var(--t); }
.side-item:hover { background: var(--bg-3); color: var(--text); }
.side-item.active { background: var(--bg-3); color: var(--text); }
.side-item .t { flex: 1; min-width: 0; }
.side-item .t1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item .t2 { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item .when { font-size: 11px; color: var(--text-3); }
.side-sub { font-size: 11px; color: var(--text-3); padding: 8px 8px 4px; display: flex; align-items: center; gap: 5px; }
.side-more { display: block; border: 0; background: none; padding: 4px 8px; border-radius: 6px; font-size: 12px; color: var(--text-3); cursor: pointer; }
.side-more:hover { color: var(--text); background: var(--bg-3); }

/* Main area */
.main { grid-area: main; min-width: 0; min-height: 0; overflow: auto; position: relative; }
.page { padding: calc(var(--sp) * 3.5) calc(var(--sp) * 4); max-width: 1120px; margin: 0 auto; animation: rise .25s var(--ease); }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: calc(var(--sp) * 3); }
.page-head h1 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; }
.page-head .sub { color: var(--text-2); margin-top: 4px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: calc(var(--sp) * 2.5); overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; padding: 9px 12px; border: 0; background: none; color: var(--text-3); white-space: nowrap; display: flex; gap: 7px; align-items: center; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 1.5px; background: var(--text); }
.tab .badge { background: var(--bg-3); color: var(--text-2); }
.tab .badge.hot { background: var(--accent); color: var(--on-accent); }

/* ---------- Components ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: calc(28px + 6px * var(--density)); padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-weight: 500; font-size: 13px; white-space: nowrap; transition: background var(--t), border-color var(--t), opacity var(--t); }
.btn:hover { background: var(--bg-3); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary { border-color: transparent; color: var(--on-accent); background: var(--accent); }
.btn-primary:hover { background: var(--accent); opacity: .9; }
.btn-ghost { background: none; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-3); color: var(--text); }
.btn-danger { color: var(--err); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; border: 0; padding: 0; background: none; color: var(--text-3); }
.icon-btn:hover { background: var(--bg-3); color: var(--text); }
.ico { width: 17px; height: 17px; flex: none; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 15px; height: 15px; }
kbd { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border-radius: 5px; background: var(--bg-3); color: var(--text-3); }

.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; background: var(--bg-3); color: var(--text-2); white-space: nowrap; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--text-3)); flex: none; }
.chip.plain { background: none; padding: 0; height: auto; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; background: var(--bg-3); color: var(--text-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); display: inline-block; flex: none; }
.dot.live { background: var(--ok); animation: pulse 2s infinite; }
.dot.wait { background: var(--accent); }
.dot.ok { background: var(--ok); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 55%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
.muted { color: var(--text-3); }
.small { font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.sep { height: 1px; background: var(--line); margin: calc(var(--sp) * 2) 0; }
.hot { color: var(--accent); }

/* Avatars: a letter on a lightly tinted surface (appearance: tinted · gray) */
.av { --c: var(--text-3); width: 28px; height: 28px; border-radius: 8px; flex: none; display: inline-grid; place-items: center; position: relative;
  font: 600 12.5px var(--font-ui); color: var(--text);
  background: color-mix(in oklab, var(--c) 22%, var(--bg-2)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 30%, transparent); }
[data-avatar="gray"] .av { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.av.lg { width: 48px; height: 48px; border-radius: 13px; font-size: 19px; }
.av.sm { width: 20px; height: 20px; border-radius: 6px; font-size: 10.5px; }
.av.live::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg-1); }
.av.user { --c: var(--text-3); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
/* The agent's picture (#133): fills the square, cropped like in gott; its own clip, so the "live" dot may stick out */
.av-pic { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.av-pic img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.av-pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
[data-avatar="gray"] .av-pic img { filter: grayscale(1); }
.av.xl { width: 120px; height: 120px; border-radius: 28px; font-size: 46px; }
.ag-name { color: var(--text); font-weight: 500; }

input.in, textarea.in, select.in, button.in.sel { width: 100%; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-1); outline: none; transition: border-color var(--t), box-shadow var(--t); }
input.in:focus, textarea.in:focus, select.in:focus, button.in.sel:focus-visible, button.in.sel[aria-expanded="true"] { border-color: var(--text-3); box-shadow: 0 0 0 3px var(--bg-3); }
textarea.in { resize: vertical; min-height: 80px; line-height: 1.5; }
select.in.sm, input.in.sm, button.in.sel.sm { width: auto; padding: 5px 9px; font-size: 12.5px; height: 30px; }
/* The resize grip of text fields: two thin strokes in the text colors instead of the browser's box */
textarea::-webkit-resizer { background: linear-gradient(135deg, transparent 0 52%, var(--text-3) 52% 58%, transparent 58% 70%, var(--text-3) 70% 76%, transparent 76%) no-repeat center / 9px 9px; }
textarea:hover::-webkit-resizer { background-image: linear-gradient(135deg, transparent 0 52%, var(--text-2) 52% 58%, transparent 58% 70%, var(--text-2) 70% 76%, transparent 76%); }
::-webkit-scrollbar-corner { background: transparent; }

/* Own dropdown (js/select.js): a button over the hidden select, the list as a menu */
.sel-native { display: none !important; }
button.in.sel { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; min-height: 38px; }
button.in.sel.sm { min-height: 0; gap: 6px; }
button.in.sel:hover { border-color: var(--text-3); }
button.in.sel:disabled { opacity: .5; cursor: default; border-color: var(--line-2); }
button.in.sel .sel-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.in.sel > .ico { color: var(--text-3); transition: transform var(--t); }
button.in.sel[aria-expanded="true"] > .ico { transform: rotate(180deg); }
.menu.sel-list { z-index: 96; min-width: 0; padding: 4px; overflow: auto; overscroll-behavior: contain; animation: pop .12s var(--ease); }
.menu.sel-list.up { transform-origin: bottom; }
.sel-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--text-2); cursor: pointer; font-size: 13px; }
.sel-opt .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-opt .h { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.sel-opt.on { color: var(--text); }
.sel-opt.act { background: var(--bg-3); color: var(--text); }
.sel-opt > .ico { color: var(--text-2); }
.sel-opt[aria-disabled] { opacity: .45; cursor: default; }
.sel-grp { padding: 8px 8px 3px; font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.sel-note { padding: 6px 8px; font-size: 12.5px; color: var(--text-3); }
.combo { position: relative; display: block; }
label.f > span.combo { display: block; margin: 0; font: inherit; color: inherit; }
.combo > .in { padding-right: 34px; }
.combo-btn { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--text-3); display: grid; place-items: center; }
.combo-btn:hover { color: var(--text); background: var(--bg-3); }
.combo > .in[aria-expanded="true"] + .combo-btn .ico { transform: rotate(180deg); }
label.f, div.f { display: block; margin-bottom: 14px; }
label.f > span { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.hint { font-size: 12px; color: var(--text-3); margin-top: 5px; display: flex; gap: 6px; align-items: center; }
/* On the first line, so a hint of two lines keeps its icon beside the start (1lh: the line's height). */
.hint { align-items: flex-start; }
.hint > .ico { margin-top: max(0px, calc((1lh - 15px) / 2)); }
label.f > span.hint { display: flex; font-size: 12px; font-weight: 400; color: var(--text-3); margin: 5px 0 0; }
/* A toggle with its label beside it, in a form grid: lined up with the inputs of its neighbours. */
label.f.row { display: flex; align-items: center; min-height: 38px; align-self: end; }
label.f.row > span { margin: 0; }
.toggle { position: relative; width: 32px; height: 18px; flex: none; appearance: none; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line-2); cursor: pointer; transition: background var(--t); }
.toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); transition: transform var(--t) var(--ease), background var(--t); }
.toggle:checked { background: var(--accent); border-color: transparent; }
.toggle:checked::after { transform: translateX(14px); background: var(--on-accent); }
.toggle:disabled { opacity: .4; cursor: default; }
.toggle:disabled ~ span { opacity: .55; }
input[type=range] { accent-color: var(--accent); width: 100%; }

/* ---------- Projects ---------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: calc(var(--sp) * 1.5); }
.proj-card { min-width: 0; padding: calc(var(--sp) * 2.25); display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: border-color var(--t), background var(--t); }
.proj-card:hover { border-color: var(--line-2); }
.proj-card h3 { font-size: 16px; }
/* A project's picture (#225) beside its name, on its card and at the head of its page */
.proj-named { min-width: 0; flex-wrap: nowrap; }
.proj-named > div { min-width: 0; }
.proj-card .path { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
/* How far the project is and the run in progress (#207), as on the home page. */
.pc-progress { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pc-progress .progress { flex: 1; min-width: 60px; }
.pc-progress .proj-run { font-size: 12px; color: var(--text-2); }
.ring { --p: 0; width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 9.5px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: radial-gradient(closest-side, var(--bg-2) 84%, transparent 86%), conic-gradient(var(--text-2) calc(var(--p) * 1%), var(--bg-3) 0); }
.stack { display: flex; gap: 3px; }
.new-card { display: grid; place-items: center; text-align: center; color: var(--text-3); border-style: dashed; background: none; min-height: 160px; }
.new-card:hover { color: var(--text); }

/* ---------- Checklist ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: calc(var(--sp) * 1.5); }
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; border-radius: 8px; background: var(--bg-3); }
.seg button { border: 0; background: none; padding: 4px 10px; border-radius: 6px; color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--bg-1); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .25), 0 0 0 1px var(--line); }
.progress { height: 4px; border-radius: 4px; background: var(--bg-3); overflow: hidden; display: flex; gap: 2px; }
.progress span { height: 100%; }
.list { overflow: hidden; }
.item { display: grid; grid-template-columns: 20px 34px minmax(0, 1fr) auto auto 50px; align-items: center; gap: 10px; padding: calc(var(--sp) * 1.05) 12px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t); position: relative; }
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--bg-3); }
.item.sel { background: var(--bg-3); }
.item.sel::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--text-2); }
.item .num { font: 400 12px var(--font-mono); color: var(--text-3); }
.item .title { min-width: 0; }
.item .title b { font-weight: 450; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .title .meta { font-size: 12px; color: var(--text-3); display: flex; gap: 12px; flex-wrap: wrap; }
.item .title .meta span:not(.av) { display: inline-flex; align-items: center; gap: 4px; }
.item .title .meta .ico { width: 13px; height: 13px; }
.item.done .title b, .item.dropped .title b { color: var(--text-3); font-weight: 400; }
.item.dropped .title b { text-decoration: line-through; text-decoration-color: var(--line-2); }
.item.hold .title b { color: var(--text-2); }
.item .who { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; min-width: 96px; }
.item .kindcell .chip { background: none; padding: 0; color: var(--text-3); }
.item .go { opacity: 0; transition: opacity var(--t); }
.item:hover .go, .item.running .go { opacity: 1; }
.st { width: 18px; height: 18px; display: inline-grid; place-items: center; vertical-align: middle; color: var(--text-3); }
.st svg { width: 18px; height: 18px; }
.st.in_progress, .st.review { color: var(--text); }
.st .spin { stroke: var(--ok); }
.spin { animation: spin 1.1s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Detail panel ---------- */
.detail { grid-area: detail; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--line); z-index: 26; display: flex; flex-direction: column; }
.detail-inner { flex: 1; overflow: auto; padding: 16px 20px 30px; width: var(--detail); animation: slidein .25s var(--ease); }
@keyframes slidein { from { opacity: 0; transform: translateX(12px); } }
.detail h2 { font-size: 18px; line-height: 1.3; margin: 10px 0 14px; }
.kv { display: grid; grid-template-columns: 92px 1fr; gap: 9px 12px; font-size: 13px; align-items: center; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.thread { position: relative; margin-top: 8px; }
.thread::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); }
.entry { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-bottom: 14px; position: relative; }
.entry .head { font-size: 12px; color: var(--text-3); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.entry .body { font-size: 13px; color: var(--text-2); margin-top: 1px; }
.sec-title { font: 500 12px var(--font-ui); color: var(--text-3); margin: 24px 0 10px; display: flex; align-items: center; gap: 8px; }
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Handoff and question cards */
.hcard { border-radius: var(--radius); padding: 14px; position: relative; background: var(--bg-2); border: 1px solid var(--line-2); }
.hcard:not(.done) { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.hcard.done { border-color: var(--line); }
.hcard.done .note { color: var(--text-3); }
.hcard .route { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; font-size: 13px; }
.hcard .route .arrow { color: var(--text-3); display: grid; place-items: center; }
.hcard .note { font-size: 13px; color: var(--text-2); white-space: pre-line; }
.hcard .files { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.hcard .files code { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 7px; border-radius: 6px; background: var(--bg-3); color: var(--text-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcard .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hcard .lbl { font-size: 12px; color: var(--text-2); font-weight: 500; margin-bottom: 8px; display: flex; gap: 7px; align-items: center; }
.ask .choices { display: grid; gap: 6px; margin-top: 10px; }
.ask .choices button { text-align: left; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-1); transition: border-color var(--t), background var(--t); }
.ask .choices button:hover { border-color: var(--text-3); }
.ask .choices button.picked { border-color: var(--text-2); background: var(--bg-3); }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; height: 100%; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 10px calc(var(--sp) * 3); border-bottom: 1px solid var(--line); }
.chat-head h2 { font-size: 15px; font-weight: 600; }
.chat-info { min-width: 0; flex: 1; }
.chat-scroll { flex: 1; overflow: auto; }
.msgs { max-width: var(--chat-w); margin: 0 auto; padding: calc(var(--sp) * 3) calc(var(--sp) * 3) 40px; display: flex; flex-direction: column; gap: calc(var(--sp) * 2.5); }
.msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; animation: rise .25s var(--ease); }
.msg .who { font-size: 13px; display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.msg .who time { font-size: 11.5px; color: var(--text-3); }
.msg.user .bubble { background: var(--bg-2); border: 1px solid var(--line); padding: 9px 13px; border-radius: var(--radius); display: inline-block; max-width: 100%; }
.md p { margin: 0 0 .7em; } .md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: .2em 0 .7em; padding-left: 1.3em; }
.md h3 { font-size: 15px; margin: .8em 0 .4em; }
.md h4 { font-size: 14px; margin: .7em 0 .3em; }
.md b { font-weight: 600; }
.md a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); overflow-wrap: anywhere; }
.md a:hover { text-decoration-color: currentColor; }
/* Sources of a web search (#175): a raised number on the word, the list at the end of the message. */
.md sup.cite { font-size: .72em; line-height: 0; margin-left: 1px; font-variant-numeric: tabular-nums; }
.md sup.cite a { text-decoration: none; padding: 0 1px; }
.md sup.cite a:hover { text-decoration: underline; }
.md sup.cite .sep { color: var(--text-3); }
.md li > ul, .md li > ol { margin: .15em 0 .3em; }
.md blockquote { margin: .4em 0 .7em; padding-left: 12px; border-left: 2px solid var(--line-2); color: var(--text-2); }
.md hr { border: none; border-top: 1px solid var(--line); margin: 1em 0; }
.md .table { overflow-x: auto; margin: .4em 0 .8em; }
.md table { border-collapse: collapse; font-size: .95em; }
/* break-word, not an inherited anywhere: that one shrinks a column below its longest word ("platfor|m", #277). */
.md th, .md td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.md th { background: var(--bg-2); font-weight: 600; }
.md code { background: var(--bg-3); padding: 1px 5px; border-radius: 5px; }
.md pre { background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; overflow: auto; margin: .6em 0; line-height: 1.55; color: var(--text-2); }
.md pre code { background: none; padding: 0; }
/* Code: just two shades instead of colorful */
.md .k { color: var(--text); font-weight: 500; } .md .s { color: color-mix(in oklab, var(--ok) 55%, var(--text-2)); } .md .c { color: var(--text-3); font-style: italic; } .md .t { color: var(--text); }
.tool { border: 1px solid var(--line); border-radius: var(--r-sm); margin: 4px 0; overflow: hidden; }
.tool > summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 6px 10px; cursor: pointer; font-size: 12.5px; color: var(--text-3); }
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary:hover { background: var(--bg-3); }
.tool > summary .nm { font-weight: 500; color: var(--text-2); }
.tool > summary .arg { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.tool > summary .chev { transition: transform var(--t); }
.tool[open] > summary .chev { transform: rotate(90deg); }
.tool pre { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 11.5px; max-height: 260px; overflow: auto; background: var(--bg-0); color: var(--text-2); white-space: pre-wrap; }
.tool pre .lbl { color: var(--text-3); display: block; margin-bottom: 4px; font-family: var(--font-ui); font-size: 11px; }
.tool > summary .stat { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.tool > summary .dur { font-size: 11.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tool > summary .dur:empty { display: none; }
.tool-diff { border-top: 1px solid var(--line); background: var(--bg-0); padding: 8px 0; max-height: 360px; overflow: auto; }
.tool-diff > .lbl { display: block; padding: 0 12px 4px; color: var(--text-3); font-size: 11px; }
/* Diffs (#126, js/diff.js): the text keeps its colour; a faint tint and the sign in the margin say removed or added,
   a stronger tint the changed words of a line. */
.diff { font: 11.5px/1.6 var(--font-mono); color: var(--text-2); }
.diff.prose { font: 12.5px/1.55 var(--font-ui); }
.diff .dl { display: grid; grid-template-columns: 26px minmax(0, 1fr); min-height: 1.6em; }
.diff .dm { text-align: center; color: var(--text-3); user-select: none; }
.diff .dc { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 12px; }
.diff .del, .diff .add { color: var(--text); }
.diff .del { background: color-mix(in oklab, var(--err) 9%, transparent); }
.diff .add { background: color-mix(in oklab, var(--ok) 9%, transparent); }
.diff .del .dm { color: var(--err); }
.diff .add .dm { color: var(--ok); }
.diff .dx { border-radius: 3px; }
.diff .del .dx { background: color-mix(in oklab, var(--err) 26%, transparent); }
.diff .add .dx { background: color-mix(in oklab, var(--ok) 26%, transparent); }
.diff.code .dl { grid-template-columns: max-content minmax(0, 1fr); }
.diff.code .dm { min-width: 34px; padding: 0 10px 0 4px; text-align: right; font-size: 10.5px; }
.diff .dgap > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 1px 0; color: var(--text-3); font: 11px/1.6 var(--font-ui); }
.diff .dgap > summary::-webkit-details-marker { display: none; }
.diff .dgap > summary:hover { color: var(--text-2); background: var(--bg-3); }
.diff .dgap[open] > summary { display: none; }
.dsep { height: 1px; background: var(--line); margin: 6px 0; }
.role-text.role-diff { padding: 6px 0; white-space: normal; }
.tools-group { display: flex; flex-direction: column; }
.metaline { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font: 11.5px var(--font-mono); color: var(--text-3); }
.metaline span { display: inline-flex; align-items: center; gap: 4px; }
.metaline .ico { width: 13px; height: 13px; }
.metaline button { border: 0; background: none; padding: 0; color: var(--text-3); font: inherit; text-decoration: underline dotted; }
.metaline button:hover { color: var(--text); }
.summary-mark { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12px; }
.summary-mark::before, .summary-mark::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.caret { display: inline-block; width: 7px; height: 1.05em; vertical-align: -2px; background: var(--text-2); border-radius: 1px; animation: blink 1s steps(2) infinite; margin-left: 2px; }
.thinking { display: inline-flex; gap: 4px; padding: 6px 0; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: bounce 1.2s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
[data-since] { font-variant-numeric: tabular-nums; }
.metaline.wait-note { margin: 0 0 6px; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bounce { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
.banner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 auto; max-width: var(--chat-w); border-radius: 8px; font-size: 12.5px; background: var(--bg-2); color: var(--text-2); border: 1px solid var(--line); }

.composer-wrap { padding: 0 calc(var(--sp) * 3) calc(var(--sp) * 2.5); }
.composer-wrap > .chat-gone { margin-bottom: 8px; }
.composer { max-width: var(--chat-w); margin: 0 auto; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--bg-2); padding: 10px 10px 8px 14px; transition: border-color var(--t); }
.composer:focus-within { border-color: var(--text-3); }
.composer textarea { width: 100%; border: 0; outline: 0; background: none; resize: none; min-height: 44px; max-height: 220px; line-height: 1.5; }
.composer .bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.composer .bar .grow { flex: 1; }
.improve { background: none; border: 1px solid var(--line); border-radius: 7px; height: 28px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.improve:hover { color: var(--text); border-color: var(--line-2); }
.send { width: 32px; height: 32px; border-radius: 8px; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.send:hover { opacity: .9; }
.compare { max-width: var(--chat-w); margin: 0 auto 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; animation: rise .25s var(--ease); }
.compare .card { padding: 12px 14px; font-size: 13px; white-space: pre-line; }
.compare .card .lbl { font-size: 12px; color: var(--text-3); font-weight: 500; margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.compare .card.better { border-color: var(--line-2); }
.compare .card.better .lbl { color: var(--text-2); }
.compare .acts { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.shimmer { background: linear-gradient(90deg, var(--bg-3) 25%, var(--line-2) 50%, var(--bg-3) 75%); background-size: 200% 100%; animation: shim 1.2s linear infinite; border-radius: 5px; height: 11px; margin: 7px 0; }
@keyframes shim { to { background-position: -200% 0; } }

/* ---------- Agents ---------- */
.agent-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: border-color var(--t); }
.agent-card:hover { border-color: var(--line-2); }
.agent-card h3 { font-size: 15px; }
.agent-card .desc { color: var(--text-2); font-size: 13px; min-height: 40px; }
.agent-card .stats { display: flex; gap: 18px; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 12px; }
.agent-card .stats b { color: var(--text); font-weight: 500; display: block; font-size: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.limit-factors { display: flex; flex-wrap: wrap; gap: 0 20px; }
.limits-scaled { margin-top: 6px; }
/* Next to the limits: level with their inputs, not with the hint below them. */
label.f.row.limits-toggle { align-self: start; margin-top: 25px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.tool-grid label { display: flex; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); font: 12px var(--font-mono); color: var(--text-2); }
.pick { height: 30px; padding: 0 10px 0 5px; cursor: pointer; border: 1px solid transparent; }
.pick.on { border-color: var(--line-2); background: var(--bg-2); color: var(--text); }
.pick:not(.on) { opacity: .55; }
.pick:disabled { opacity: .35; cursor: default; }

/* ---------- Statistics ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: calc(var(--sp) * 1.5); margin-bottom: calc(var(--sp) * 1.5); }
.tile { padding: 14px 16px; }
.tile .lbl { font-size: 12px; color: var(--text-3); }
.tile .val { font: 600 26px/1.2 var(--font-display); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .delta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.meter { height: 4px; border-radius: 4px; background: var(--bg-3); margin-top: 10px; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--text-2); }
.chart-card { padding: 16px 18px; margin-bottom: calc(var(--sp) * 1.5); }
.chart-card h3 { font-size: 14px; }
.chart { position: relative; margin-top: 14px; }
.chart svg { display: block; width: 100%; height: 240px; overflow: visible; }
.chart .ax { font: 11px var(--font-ui); fill: var(--text-3); }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .hit { fill: transparent; }
.chart g.col:hover rect { filter: brightness(1.15); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; }
.tip { position: absolute; pointer-events: none; background: var(--bg-solid); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); min-width: 150px; z-index: 5; transform: translate(-50%, calc(-100% - 10px)); }
.tip .r { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.tip .r i { width: 8px; height: 8px; border-radius: 2px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-act]:hover { background: var(--bg-3); }
.tbl td.n, .tbl th.n { text-align: right; }
/* The page (#47): head of a card with a button on the right, the pickers, tables that scroll inside their card. */
.stats-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.stats-head .grow { flex: 1; }
.stats-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 12px; }
.stats-pick > span { display: inline-flex; align-items: center; gap: 8px; }
.stats-tbl { overflow-x: auto; margin: 8px -12px 0; }
.stats-tbl td.n, .stats-tbl th.n, .stats-tbl .nowrap, .stats-tbl td.mono { white-space: nowrap; }
.stats-empty { padding: 30px 0; text-align: center; }
.stats-foot { margin-top: 8px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--sp) * 1.5); align-items: start; }
.stats-grid > .chart-card { margin-bottom: 0; }
.stats-usage { margin-top: 10px; }
.tip b { white-space: nowrap; }
.tip .tip-sum { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .stats .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp); }
  .stats .tile { padding: 12px; }
  .stats .tile .val { font-size: 21px; }
}

/* ---------- Command palette, toasts, appearance panel ---------- */
.overlay { position: fixed; inset: 0; background: rgb(0 0 0 / .5); z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.palette { width: min(600px, calc(100vw - 24px)); border-radius: var(--r-lg); background: var(--bg-solid); box-shadow: var(--shadow), 0 30px 80px -20px rgb(0 0 0 / .6); overflow: hidden; animation: pop .16s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.98) translateY(-4px); } }
.palette > input { width: 100%; border: 0; outline: 0; background: none; padding: 16px 18px; font-size: 15px; border-bottom: 1px solid var(--line); }
.palette .res { max-height: 50vh; overflow: auto; padding: 6px; }
.palette .grp { font-size: 12px; color: var(--text-3); padding: 10px 12px 4px; }
.palette .opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.palette .opt.on { background: var(--bg-3); }
.palette .opt .t2 { margin-left: auto; font-size: 12px; color: var(--text-3); }
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--bg-solid); box-shadow: var(--shadow); padding: 9px 14px; border-radius: 10px; font-size: 13px; display: flex; gap: 10px; align-items: center; animation: pop .2s var(--ease); }
.toast .ico { color: var(--text-3); }

.tweak { position: fixed; right: 18px; bottom: 18px; z-index: 81; width: 310px; max-height: calc(100vh - 90px); overflow: auto; border-radius: var(--r-lg); background: var(--bg-solid); box-shadow: var(--shadow), 0 30px 80px -20px rgb(0 0 0 / .5); padding: 14px 16px; animation: pop .16s var(--ease); }
.tweak h3 { font-size: 14px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.tweak .grp { margin-top: 14px; }
.tweak .grp > .lbl { font-size: 12px; color: var(--text-3); font-weight: 500; margin-bottom: 6px; display: flex; justify-content: space-between; }
.tweak .grp > .lbl output { font-family: var(--font-mono); }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches button { width: 24px; height: 24px; border-radius: 7px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); }
.swatches button.on { box-shadow: 0 0 0 2px var(--bg-solid), 0 0 0 3.5px var(--text-2); }
.tweak button.in.sel { padding: 6px 9px; min-height: 0; }
.tweak .seg { width: 100%; } .tweak .seg button { flex: 1; }

/* ---------- Sign-in ---------- */
.login-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px 16px; overflow: auto; background: var(--bg-0); }
[data-bg="glow"] .login-wrap { background-image: radial-gradient(ellipse 60% 45% at 50% 0%, var(--accent-soft), transparent 70%); }
.login-card { width: min(360px, 100%); animation: rise .3s var(--ease); }
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 22px; }
.login-brand .logo { width: 56px; height: 56px; margin: 0 0 16px; }
.login-brand h1 { font-size: 22px; }
.login-brand p { margin: 4px 0 0; color: var(--text-3); }
.login-box { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: calc(var(--sp) * 2.75); box-shadow: var(--shadow); }
.login-box [hidden] { display: none !important; }
.login-note { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 8px 10px; border-radius: 8px; background: var(--bg-3); color: var(--text-2); font-size: 12.5px; }
.login-note .ico { color: var(--text-3); }
label.f > span.pw { position: relative; display: block; margin: 0; font: inherit; color: inherit; }
.pw .in { padding-right: 40px; }
.pw .icon-btn { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; }
.login-caps { margin: -6px 0 12px; font-size: 12px; color: var(--text-3); }
.login-err { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: 12.5px; color: var(--err); }
.login-go { width: 100%; height: 38px; margin-top: 4px; }
.login-foot { margin-top: 18px; text-align: center; font-size: 12px; color: var(--text-3); }
.spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.shake { animation: shake .35s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* User in the rail and their menu */
.rail-user { margin-top: 6px; }
.rail-btn.rail-user.open[data-tip]::after { display: none; }
.av.me { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font-size: 12.5px; }
.rail-user:hover .av.me, .rail-user.open .av.me { color: var(--text); }
.rail-user.open { background: var(--bg-3); }
.menu { position: fixed; z-index: 85; min-width: 200px; padding: 6px; border-radius: var(--radius); background: var(--bg-solid); box-shadow: var(--shadow), 0 20px 50px -20px rgb(0 0 0 / .5); animation: pop .14s var(--ease); }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.menu-head .t1 { font-weight: 500; }
.menu-head .av.me { width: 26px; height: 26px; font-size: 11.5px; }
.menu-head .t { display: grid; gap: 1px; min-width: 0; }
.menu-head .t2 { font-size: 12px; color: var(--text-3); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 2px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: none; color: var(--text-2); text-align: left; }
.menu-item:hover, .menu-item:focus-visible { background: var(--bg-3); color: var(--text); outline: none; }
.menu-item .ico { color: var(--text-3); }

/* ---------- Forms of the app ---------- */
input.in.bad, textarea.in.bad, select.in.bad, button.in.sel.bad { border-color: var(--err); }
.field-err { font-size: 12px; color: var(--err); margin-top: 5px; display: flex; gap: 6px; align-items: center; }
/* As .hint: an error of two lines keeps its icon beside the first one. */
.field-err { align-items: flex-start; }
.field-err > .ico { flex: none; margin-top: max(0px, calc((1lh - 15px) / 2)); }
.form-card { padding: calc(var(--sp) * 2.75); }
.form-card + .form-card { margin-top: calc(var(--sp) * 2); }
.form-card > h3 { font-size: 16px; margin-bottom: 4px; }
.form-card > .sub { color: var(--text-3); font-size: 12.5px; margin-bottom: 14px; }
.paths { display: grid; gap: 8px; margin: -6px 0 14px; }
.paths .row .in.mono { flex: 2; }
.paths .row .in:not(.mono) { flex: 1; }
.team-auto:empty { display: none; }
.team-auto { margin: -8px 0 16px; }
.team-auto-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; max-width: 420px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; }
.team-auto-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; }
.team-auto-row:hover { background: var(--bg-2); }
.team-auto-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-auto-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-auto-row .sw { display: flex; align-items: center; gap: 8px; flex: none; font-size: 12px; color: var(--text-2); }
.warnline { display: flex; gap: 8px; align-items: flex-start; padding: 8px 11px; border-radius: 8px; background: var(--bg-3); color: var(--text-2); font-size: 12.5px; margin: -4px 0 16px; }
.warnline .ico { color: var(--text-3); margin-top: 1px; }
/* With a button: one row, the icon centered with the text and the button. */
.warnline.mid { align-items: center; } .warnline.mid .ico { margin-top: 0; } .warnline.mid > span { flex: 1; min-width: 0; }
.seg.wide { display: flex; } .seg.wide button { flex: 1; }
.kind-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.kind-row .arrows { display: flex; }
.kind-row .arrows .icon-btn { width: 26px; height: 30px; }
.kind-row .arrows .icon-btn:disabled { opacity: .3; pointer-events: none; }
.dot-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: none; display: grid; place-items: center; }
.dot-btn:hover { background: var(--bg-3); }
.dot-btn i { width: 12px; height: 12px; border-radius: 50%; background: var(--dot); }
.menu .swatches { padding: 4px; }
.appearance .grp { margin-top: 14px; }
.appearance .grp:first-child { margin-top: 0; }
.appearance .grp > .lbl { font-size: 12.5px; color: var(--text-2); font-weight: 500; margin-bottom: 6px; display: flex; justify-content: space-between; }
.appearance .grp > .lbl output { font-family: var(--font-mono); color: var(--text-3); }
.appearance-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.trash-row { grid-template-columns: 74px minmax(0, 1fr) auto auto; cursor: default; }
.trash-row .chip { justify-content: center; }
.trash-row .type-m { display: none; }
/* the overlay starts 12vh down: a dialog ends 24px above the bottom and scrolls; a confirmation scrolls its body and keeps its buttons (#201) */
.dialog { width: min(420px, calc(100vw - 24px)); padding: 20px; max-height: calc(100dvh - 12vh - 24px); overflow-y: auto; }
.dialog.confirm { display: flex; flex-direction: column; overflow: hidden; }
.dialog h3 { font-size: 17px; margin-bottom: 6px; }
.dialog .body { color: var(--text-2); font-size: 13.5px; }
.dialog.confirm .body { min-height: 0; overflow-y: auto; }
/* the scrolling body keeps the margins of its paragraphs: undo what collapsing with the title (6px) and the buttons (18px) took away before */
.dialog.confirm .body > p:first-child { margin-top: calc(1em - 6px); }
.dialog.confirm .body > :last-child { margin-bottom: 0; }
.dialog.confirm .acts { flex: none; }
.dialog .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.toast .act { border: 0; background: none; color: var(--text); font-weight: 500; text-decoration: underline; padding: 0 0 0 4px; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.side-empty { padding: 8px 10px; font-size: 12.5px; color: var(--text-3); }
.seg button .ico { vertical-align: -2px; margin-right: 4px; }
.effort-auto .hint { align-items: flex-start; margin-top: 8px; }
.effort-auto .hint .ico { flex: none; margin-top: 1px; }
.effort-auto .hint a { text-decoration: underline; }
.effort-try-box > summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer; list-style: none; font-size: 12.5px; color: var(--text-3); }
.effort-try-box > summary::-webkit-details-marker { display: none; }
.effort-try-box > summary:hover { color: var(--text-2); }
.effort-try-box > summary .chev { transition: transform var(--t); }
.effort-try-box[open] > summary .chev { transform: rotate(90deg); }
/* Built-in agents [Decision:40]: their own section in the list, the role from Mama read-only */
.section-title { font-size: 16px; margin: 30px 0 4px; }
.role-box { margin: 0 0 12px; }
.role-box > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.role-box > summary::-webkit-details-marker { display: none; }
.role-box > summary .chev { transition: transform var(--t); }
.role-box[open] > summary .chev { transform: rotate(90deg); }
.role-text { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
  font: 12.5px/1.55 var(--font-ui); white-space: pre-wrap; max-height: 360px; overflow: auto; }
.effort-try { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
/* An agent's memory below its form (#132): what the prompt takes, the files and folders, one file shown or edited */
.mem-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mem-head h3 { font-size: 16px; }
.mem-use { margin-bottom: 12px; font-size: 12.5px; color: var(--text-2); }
.mem-use .meter { margin-top: 6px; }
.mem-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mem-empty { padding: 12px; }
.mem-row { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto 64px 32px; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px 0 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mem-row:last-child { border-bottom: 0; }
.mem-row[data-mem-file] { cursor: pointer; }
.mem-row[data-mem-file]:hover, .mem-row.sel { background: var(--bg-3); }
.mem-row.sub { padding-left: 34px; }
.mem-row.folder { color: var(--text-2); }
.mem-row > .ico { color: var(--text-3); }
.mem-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
button.mem-name { border: 0; background: none; padding: 0; color: inherit; text-align: left; cursor: pointer; }
.mem-badge { font-size: 12px; white-space: nowrap; }
.mem-size { text-align: right; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mem-view { margin-top: 12px; }
.mem-view-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.mem-view-head b { font-weight: 500; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-view-head > .ico { color: var(--text-3); }
.mem-view-head > .small { white-space: nowrap; }
.mem-text { padding: 10px 14px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--line); max-height: 420px; overflow: auto; overflow-wrap: anywhere; }
.mem-edit textarea { font-size: 12.5px; line-height: 1.5; resize: vertical; }
.mem-edit .warnline[hidden] { display: none; }
@media (max-width: 640px) {
  /* The badge on a line of its own under the name. */
  .mem-row { grid-template-columns: 15px minmax(0, 1fr) 56px 32px; grid-template-areas: "i n s b" ". g g ."; gap: 2px 8px; padding-block: 4px; }
  .mem-row > .ico { grid-area: i; }
  .mem-row > .mem-name { grid-area: n; }
  .mem-row > .mem-badge { grid-area: g; justify-self: start; }
  .mem-row > .mem-size { grid-area: s; }
  .mem-row > .icon-btn, .mem-row > .mem-gap { grid-area: b; }
  .mem-row.sub { padding-left: 22px; }
}
.effort-try button.in.sel { width: auto; max-width: 100%; }
.effort-result:empty { display: none; }
.effort-result .effort-level { font-family: var(--font-mono); color: var(--text); background: var(--bg-3); }
.effort-result .reason { margin-top: 6px; font-size: 13px; color: var(--text-2); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--text-3); }
.empty .big { color: var(--text-3); margin-bottom: 10px; }
.empty .big .ico { width: 30px; height: 30px; stroke-width: 1.4; }
.empty h3 { color: var(--text); font-size: 16px; margin-bottom: 4px; }

.scrim { display: none; }

/* ---------- Responsive ---------- */
/* up to 1280: the detail floats as a drawer over the content */
/* ---------- Chat (phase 2) ---------- */
.usage-line { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-3); }
.chat-title { cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-title-in { font: 600 15px var(--font-display); padding: 3px 8px; width: min(420px, 100%); }
.chat-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub a:hover { color: var(--text); }
.chat-err { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--err); overflow-wrap: anywhere; }
.effort-chip { border: 0; background: none; padding: 0; font: inherit; color: var(--text-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.effort-chip:hover { color: var(--text); }
.run-chip { gap: 7px; color: var(--text-2); }
.run-chip:hover { color: var(--text); }
button.run-chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
/* The default password's chip: its text gives way when run pills need the room (#176), down to the lock (a grid as
   .run-pill, the text's padding instead of a gap). */
.pw-chip { display: inline-grid; grid-template-columns: auto minmax(0, max-content); gap: 0; }
.pw-chip > span { padding-left: 7px; overflow: hidden; text-overflow: ellipsis; }
/* The autopilot [Decision:64]: one chip in the top bar with a menu of its projects (stop button: off); its line on a handoff card. */
.ap-chip { font-variant-numeric: tabular-nums; flex: none; }
.ap-chip.open { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.ap-lbl { display: flex; white-space: pre; }
.ap-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
/* Less room: the chip gets shorter, the search's label gives way first. */
@media (max-width: 1280px) { .ap-pre { display: none; } .ap-name { max-width: 110px; } }
.ap-menu { width: min(360px, calc(100vw - 16px)); display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.ap-row { display: flex; align-items: center; gap: 6px; padding-right: 2px; }
.ap-proj { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 7px; color: var(--text-2); }
.ap-proj:hover, .ap-proj:focus-visible { background: var(--bg-3); color: var(--text); outline: none; }
.ap-proj .t { display: grid; gap: 1px; }
.ap-proj .t1 { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-proj .t2 { font-size: 12px; color: var(--text-3); }
.ap-row > .icon-btn { flex: none; }
.ap-line { gap: 8px; align-items: center; margin-top: 8px; }
.ap-line > .ico { color: var(--text-3); flex: none; }
.user-row .av.me { width: 28px; height: 28px; font-size: 12px; }
.err-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--err); flex: none; }
.send.stop { background: var(--bg-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.icon-btn.sm { width: 24px; height: 24px; border-radius: 6px; }
.msg .who { position: relative; }
.msg-acts { display: inline-flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity var(--t); }
.msg:hover .msg-acts, .msg-acts:focus-within { opacity: 1; }
.msg.user > div { min-width: 0; }
.edit-box textarea { width: 100%; resize: vertical; min-height: 70px; }
.msg-err { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; padding: 8px 11px; border-radius: var(--r-sm); font-size: 13px; color: var(--err); background: color-mix(in oklab, var(--err) 8%, transparent); border: 1px solid color-mix(in oklab, var(--err) 30%, var(--line)); }
.msg-err .ico, .notice .ico { flex: none; margin-top: 2px; }
.notice { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 12.5px; color: var(--text-3); }
.tool .bad { color: var(--err); display: inline-grid; }
.tool .ok { display: inline-grid; color: var(--text-3); }
.tool .appr { display: inline-grid; color: var(--text-3); }
.tool pre.err { color: var(--err); }
.tool .spinner.sm, .spinner.sm { width: 11px; height: 11px; border-width: 1.5px; }
/* Cancel one call (#252): in the row of a call that runs long, its popover with a reason, and the note under it afterwards. */
.tool > summary .tool-stop { height: 22px; padding: 0 7px; gap: 4px; margin: -3px 0; font-size: 12px; color: var(--text-2); }
.tool > summary .tool-stop[hidden] { display: none; }
.tool-note { display: flex; align-items: center; gap: 5px; margin: -1px 0 5px 10px; font-size: 12px; color: var(--text-3); min-width: 0; }
.tool-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-note .ico { flex: none; }
.menu.tool-cancel { display: grid; gap: 6px; padding: 10px; }
.menu.tool-cancel .menu-head { padding: 0; }
.menu.tool-cancel p { margin: 0; }
.tool-cancel .tc-row { display: flex; gap: 6px; align-items: center; }
.tool-cancel .tc-row .in { flex: 1; min-width: 0; padding: 5px 9px; }
.tool-cancel .tc-row .btn { flex: none; }
.sub-tools { padding: 6px 10px 8px 22px; border-top: 1px solid var(--line); }
.thinking-block { margin: 4px 0 8px; font-size: 12.5px; color: var(--text-3); }
.thinking-block > summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; list-style: none; }
.thinking-block > summary::-webkit-details-marker { display: none; }
.thinking-block .md { white-space: pre-wrap; margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--line); }
.summary-box > summary { cursor: pointer; list-style: none; }
.summary-box > summary::-webkit-details-marker { display: none; }
.summary-box .summary-text { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.summary-box.off .summary-mark { text-decoration: line-through; }
.hidden-part { opacity: .55; }
.hidden-part > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.hidden-part > summary::-webkit-details-marker { display: none; }
.hidden-part .msgs-inner { display: flex; flex-direction: column; gap: calc(var(--sp) * 2.5); margin-top: 14px; }
.hidden-part .msg-acts { display: none; }
.metaline .bad { color: var(--err); }
.calls { margin-top: 8px; overflow-x: auto; }
.calls .tbl { font-size: 11.5px; }
.calls .tbl th, .calls .tbl td { padding: 5px 8px; white-space: nowrap; }
.pick-agent { border: 1px solid var(--line); }
.pick-agent.on { background: var(--bg-3); border-color: var(--text-3); color: var(--text); }
.menu-item.on { color: var(--text); }
.menu-item.danger { color: var(--err); }
.menu-item.danger .ico { color: var(--err); }
/* the overlay starts 12vh down: the box ends 24px above the bottom, and its one row scrolls inside (#167) */
.log-box { width: min(1080px, calc(100vw - 24px)); max-height: calc(100dvh - 12vh - 24px); display: flex; flex-direction: column; }
.log-head { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.log-head h3 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; flex: 1; }
.log-list { border-right: 1px solid var(--line); padding: 10px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.log-main { padding: 16px 20px; overflow: auto; }
.log-main .kv { grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
.log-main .kv dd { display: block; overflow-wrap: anywhere; }
pre.raw { margin: 0; padding: 12px; border-radius: var(--r-sm); background: var(--bg-0); border: 1px solid var(--line); font: 11px/1.5 var(--font-mono); color: var(--text-2); white-space: pre-wrap; word-break: break-all; max-height: 55vh; overflow: auto; }
.prompt-block { margin-bottom: 10px; }
.prompt-block .lbl { display: block; font-size: 11px; color: var(--text-3); margin-bottom: 4px; }

@media (max-width: 1280px) {
  .app.detail-open, .app { grid-template-columns: var(--rail) var(--side) minmax(0, 1fr) 0; }
  .app.no-side, .app.no-side.detail-open { grid-template-columns: var(--rail) 0 minmax(0, 1fr) 0; }
  .detail { position: fixed; right: 0; top: 0; bottom: 0; width: min(var(--detail), 100vw); background: var(--bg-solid); border-left: 0; box-shadow: var(--shadow); transform: translateX(105%); transition: transform var(--t) var(--ease); z-index: 60; }
  .app.detail-open .detail { transform: none; }
  .app.detail-open .scrim.for-detail { display: block; }
  .detail-inner { width: auto; }
  .scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 50; }
  .sizer.for-detail { position: fixed; top: 0; bottom: 0; right: calc(min(var(--detail), 100vw) - 5px); margin: 0; z-index: 61; }
}
/* up to 960: the sidebar becomes a drawer */
@media (max-width: 960px) {
  .app, .app.detail-open, .app.no-side, .app.no-side.detail-open { grid-template-columns: var(--rail) 0 minmax(0, 1fr) 0; }
  .side { position: fixed; left: var(--rail); top: 0; bottom: 0; width: min(var(--side), 85vw); background: var(--bg-solid); transform: translateX(calc(-100% - var(--rail))); transition: transform var(--t) var(--ease); box-shadow: var(--shadow); z-index: 55; }
  .app.side-open .side { transform: none; }
  .app.side-open .scrim.for-side { display: block; }
  .sizer.for-side { display: none; position: fixed; top: 0; bottom: 0; left: calc(var(--rail) + min(var(--side), 85vw) - 5px); margin: 0; z-index: 56; }
  .app.side-open:not(.no-side) .sizer.for-side { display: block; }
  .icon-btn.menu-btn { display: inline-grid; }
  .topbar { padding-left: 8px; }
  .search-btn { flex: none; border: 0; padding: 0 8px; } .search-btn .lbl, .search-btn kbd { display: none; }
  .form-grid, .form-grid.three, .appearance-cols { grid-template-columns: 1fr; }
  label.f.row.limits-toggle { margin-top: 0; }
}
/* up to 640: phone – rail at the bottom, single column, no inset surface */
@media (max-width: 640px) {
  :root { --rail: 0px; --top: 50px; }
  .app { padding: 0; grid-template-rows: var(--top) minmax(0, 1fr) 58px; grid-template-areas: "top top top top" "main main main main" "rail rail rail rail"; }
  .stage { grid-row: 1 / 3; border-radius: 0; border: 0; }
  .rail { flex-direction: row; justify-content: space-around; padding: 0 6px; border-top: 1px solid var(--line); gap: 0; padding-bottom: env(safe-area-inset-bottom); }
  .rail .logo, .rail .spacer, .rail .rail-extra { display: none; }
  .rail-btn { width: auto; height: 50px; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 10.5px; background: none !important; }
  .rail-btn.active { color: var(--text); }
  .rail-btn .rail-label { display: block; }
  .rail-btn[data-tip]:hover::after { display: none; }
  .rail-btn .dot { right: 32%; top: 6px; }
  .rail-user { margin-top: 0; }
  .rail-user .av.me { width: 17px; height: 17px; font-size: 9px; }
  .item.trash-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .trash-row > .chip { display: none; }
  .trash-row .type-m { display: inline; }
  .side { left: 0; bottom: 58px; transform: translateX(-105%); }
  .app.side-open .side { transform: none; }
  .sizer, .app.side-open:not(.no-side) .sizer.for-side, .app.detail-open .sizer.for-detail { display: none; }
  .topbar { padding: 0 6px; gap: 4px; }
  .run-pill .lbl, .run-pill .time, .run-pill .icon-btn { display: none; }
  .run-pill { display: flex; padding: 0 8px; flex: none; }
  .run-pill > * + * { margin-left: 6px; }
  .toolbar .grow-m { width: 100% !important; margin-left: 0 !important; }
  .crumbs .hide-m { display: none; }
  .page { padding: 16px 14px 30px; }
  .item { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 4px; }
  .item .num, .item .kindcell, .item .go { display: none; }
  .item .who { min-width: 0; }
  .item .who .nm { display: none; }
  .detail { width: 100vw; }
  .compare { grid-template-columns: 1fr; }
  .msgs { padding: 16px 12px 30px; }
  .composer-wrap { padding: 0 8px 10px; }
  .composer .bar { flex-wrap: nowrap; }
  .composer .bar .chip.proj, .hide-s { display: none; }
  /* #264: title and buttons in one row, the details below over the whole width */
  .chat-head { padding: 6px 12px; gap: 4px 8px; flex-wrap: wrap; }
  .chat-info { display: contents; }
  .chat-head .chat-title, .chat-head .chat-title-in { flex: 1; min-width: 0; }
  .chat-head .chat-sub, .chat-head .chat-err { flex: 0 0 100%; order: 1; }
  .chat-sub { white-space: normal; }
  .chat-head .chat-err { margin-top: 0; }
  .tweak { right: 8px; left: 8px; width: auto; bottom: 70px; }
  .grid-cards { grid-template-columns: minmax(0, 1fr); }
  .page-head .actions { margin-left: 0; width: 100%; }
  .msg-acts { opacity: 1; }
  .log-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .log-list { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; max-height: none; }
  .log-list .side-item { width: auto; flex: none; }
  .log-main { padding: 12px; }
  .log-main .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .log-main .kv dd { margin-bottom: 6px; }
}

/* Helpers (#29–#31): improve, the comparison, the kept draft */
.improve.off { opacity: .45; cursor: help; }
.improve.off:hover { color: var(--text-2); border-color: var(--line); }
.composer .improve { margin-right: 6px; }
.edit-box .improve { margin-right: auto; }
.edit-compare .compare, .persona-compare .compare { max-width: none; margin: 8px 0 0; }
.compare .card .field-err { margin: 0; white-space: normal; }
.draft-note { margin-top: 6px; font-size: 12px; color: var(--text-3); }
.draft-note summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; list-style: none; }
.draft-note summary::-webkit-details-marker { display: none; }
.draft-note summary:hover { color: var(--text-2); }
.draft-text { white-space: pre-wrap; margin-top: 6px; padding: 8px 11px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); color: var(--text-2); }
/* Settings → Helpers (#224): a menu of the tasks beside the chosen one; on the phone a bar above it */
.split-nav { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: calc(var(--sp) * 2.5); align-items: start; }
.sub-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.sub-nav-item { display: flex; align-items: center; gap: 9px; padding: calc(var(--sp) * .75) 10px; border-radius: 8px; color: var(--text-2); white-space: nowrap; transition: background var(--t), color var(--t); }
.sub-nav-item:hover { background: var(--bg-3); color: var(--text); }
.sub-nav-item.active { background: var(--bg-3); color: var(--text); }
.sub-nav-item .ico { flex: none; color: var(--text-3); }
.sub-nav-item.active .ico { color: var(--text-2); }
@media (max-width: 640px) {
  .split-nav { grid-template-columns: minmax(0, 1fr); gap: calc(var(--sp) * 1.5); }
  .sub-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 2px; border-radius: 10px; background: var(--bg-3); }
  .sub-nav-item { padding: 6px 10px; font-size: 13px; gap: 6px; }
  .sub-nav-item.active { background: var(--bg-1); box-shadow: 0 1px 2px rgb(0 0 0 / .25), 0 0 0 1px var(--line); }
}

/* Checklist (#34): list, quick add, detail with thread, edit form */
div.f > span { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.av.me.sm { width: 20px; height: 20px; font-size: 10.5px; }
.entry .av.me { width: 28px; height: 28px; font-size: 12px; }
.item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.item .grip { color: var(--text-3); cursor: grab; display: inline-grid; }
.item.dragging { opacity: .4; }
.item.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.item.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.list .empty { padding: 36px 20px; }
.cl-unreadf.on { background: var(--bg-3); color: var(--text); border-color: var(--line-2); }
.cl-brief { max-width: 100%; min-width: 0; }
.cl-brief > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-add { display: flex; gap: 8px; align-items: center; padding: 6px 8px 6px 12px; margin-bottom: 10px; }
.cl-add .cl-add-ico { color: var(--text-3); display: inline-grid; }
.cl-add input[name="title"] { flex: 1; min-width: 0; border-color: transparent; background: none; padding-left: 4px; }
.cl-add input[name="title"]:focus { border-color: var(--line-2); background: var(--bg-1); }
.cl-add button.in.sel { width: auto; max-width: 130px; }
.detail-inner.still { animation: none; }
.cl-detail h2 { overflow-wrap: anywhere; }
.cl-desc { font-size: 13.5px; color: var(--text-2); margin: -4px 0 16px; overflow-wrap: anywhere; }
.cl-desc-empty { display: inline-flex; gap: 6px; align-items: center; border: 0; background: none; padding: 0; margin: -4px 0 16px; color: var(--text-3); font-size: 13px; cursor: pointer; }
.cl-desc-empty:hover { color: var(--text); }
.cl-detail .kv button.in.sel { flex: 1; min-width: 0; max-width: 230px; }
.cl-dep { border: 0; cursor: pointer; gap: 4px; padding-left: 4px; }
.cl-dep:hover { color: var(--text); }
.cl-dep .st, .entry .what .st { width: 14px; height: 14px; }
.cl-dep .st svg, .entry .what .st svg { width: 14px; height: 14px; }
.entry .head .nm { color: var(--text-2); font-weight: 500; }
.entry .head .what { display: inline-flex; gap: 4px; align-items: center; color: var(--text-2); }
/* "run →", "GitHub ↗": the icon centered with its word */
.entry .head a.mono { display: inline-flex; gap: 4px; align-items: center; }
.entry.change { margin-bottom: 10px; }
.entry .body { overflow-wrap: anywhere; }
.cl-composer { display: flex; gap: 6px; align-items: flex-end; margin-top: 4px; }
.cl-composer textarea { flex: 1; resize: vertical; min-height: 40px; }
.dep-pick { display: grid; gap: 1px; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px; }
.dep-pick label { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 4px 6px; border-radius: 6px; cursor: pointer; min-width: 0; }
.dep-pick label:hover { background: var(--bg-3); }
.dep-pick .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.menu-item[disabled] { opacity: .4; pointer-events: none; }
/* Handoffs (#40): the card in the chat, at the item and in the project's tab. */
.hcard.handoff { margin: 8px 0; }
.hcard.handoff .lbl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hcard.handoff .ho-links { margin-left: auto; }
.hcard.handoff .ho-links a { text-decoration: underline; }
.hcard.handoff .q { margin: 8px 0; }
.ho-item { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-3); font-size: 13px; }
.ho-item-t { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; line-height: 18px; }
.ho-item-t b { overflow-wrap: anywhere; }   /* long URLs and paths in titles; "#N" stays whole */
.ho-item-t a { color: inherit; }
.ho-item-t a:hover b { text-decoration: underline; }
.ho-item .st { width: 16px; height: 16px; flex: none; margin-top: 1px; }   /* on the first line when the title wraps */
.ho-item .st svg { width: 16px; height: 16px; }
/* A handoff on hold (#180): accepting starts no run. The icon sits on the first line of the text. */
.warnline.ho-hold { margin: 8px 0 0; line-height: 18px; }
.ho-hold .st { flex: none; }
.ho-item .chip { background: none; padding: 0; height: auto; color: var(--text-3); }
.ho-files { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.ho-files span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 7px; border-radius: 6px; background: var(--bg-3); color: var(--text-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ho-edit { display: grid; gap: 8px; margin-top: 10px; }
.ho-edit .f { margin: 0; }
.ho-edit button.in.sel { max-width: 260px; }
.ho-list { display: grid; gap: 4px; margin-bottom: 18px; }
.ho-past { display: grid; gap: 2px; margin-bottom: 8px; }
.msg-card { margin: 4px 0 14px 42px; }
.pass-on { display: flex; justify-content: flex-start; margin: -4px 0 16px 42px; }
.notice.warn { color: var(--text-2); }
@media (max-width: 640px) { .msg-card, .pass-on { margin-left: 0; } }
/* Items from text (#42): the suggestions to pick from, and the Dispatcher's chips at the rows. */
.ft-dialog { width: min(680px, 94vw); }
.ft-items { display: grid; gap: 8px; }
.ft-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ft-item.off { opacity: .5; }
.ft-item > input[type="checkbox"] { margin: 9px 0 0; width: 16px; height: 16px; }
.ft-body { display: grid; gap: 6px; min-width: 0; }
.ft-body .row > input.in { flex: 1 1 auto; min-width: 0; width: auto; }
.ft-body .row > button.in.sel { flex: none; width: auto; }
.ft-body textarea.in { min-height: 44px; resize: vertical; font-size: 13px; }
/* Files in "Items from text" (#107): the paperclip left in the button row, at each suggestion the files it takes. */
.att-chips.dlg-files { padding: 8px 0 0; }
.dlg-attach { margin-right: auto; }
.ft-files { display: flex; flex-wrap: wrap; gap: 5px; }
.ft-file { height: 28px; padding: 0 8px 0 4px; font: inherit; font-size: 12px; cursor: pointer; }
.ft-file img { width: 20px; height: 20px; }
.ft-file:hover { border-color: var(--text-3); }
.ft-file[aria-pressed="false"] { border-style: dashed; background: none; color: var(--text-3); }
.ft-file[aria-pressed="false"] img { opacity: .4; }
.ft-file[aria-pressed="false"] .nm { text-decoration: line-through; }
.chip.sugg { border: 1px dashed var(--line-2); background: none; cursor: pointer; gap: 5px; padding: 1px 7px 1px 3px; font-size: 12px; color: var(--text-2); }
.chip.sugg:hover { border-color: var(--accent); color: var(--text); }
.chip.sugg .av.sm { width: 16px; height: 16px; border-radius: 4px; font-size: 9.5px; }
span.sugg { display: inline-flex; align-items: center; gap: 5px; }
/* Subtasks (#70): indented under their item, with a line on the left; an item shown only for its subtasks is grey. */
.item.sub { padding-left: 40px; }
.item.sub::after { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; border-left: 1px dashed var(--line-2); }
.item.ctx > :not(.title), .item.ctx .title b { opacity: .5; }
.cl-fold { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0 4px 0 0; margin: 0; font: inherit; color: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
.cl-fold:hover { color: var(--text); }
.cl-subs { display: grid; gap: 1px; margin-bottom: 4px; }
.cl-sub { display: flex; gap: 8px; align-items: center; border: 0; background: none; text-align: left; font: inherit; font-size: 13px; color: var(--text); padding: 5px 6px; border-radius: 6px; cursor: pointer; min-width: 0; }
.cl-sub:hover { background: var(--bg-3); }
.cl-sub .t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl-sub.done .t, .cl-sub.dropped .t { color: var(--text-3); }
.cl-sub.dropped .t { text-decoration: line-through; }
.cl-sub.hold .t { color: var(--text-2); }
.cl-sub .st { width: 14px; height: 14px; }
.cl-sub .st svg { width: 14px; height: 14px; }
.cl-sub-add { display: flex; gap: 6px; align-items: center; padding-left: 6px; margin-bottom: 10px; }
.cl-sub-add .cl-add-ico { color: var(--text-3); display: inline-grid; }
.cl-sub-add input { flex: 1; min-width: 0; border-color: transparent; background: none; padding-left: 2px; }
.cl-sub-add input:focus { border-color: var(--line-2); background: var(--bg-1); }
@media (max-width: 640px) {
  .cl-add button.in.sel { max-width: 96px; }
  .cl-detail .kv button.in.sel { max-width: none; }
  .item.sub { padding-left: 28px; }
  .item.sub::after { left: 14px; }
}
.page-head > div:first-child { min-width: 0; }
.page-head .sub { overflow-wrap: anywhere; }

/* Runs (#35) and questions (#37) */
.ask, .propose { margin: 8px 0; }
.ask { max-width: 640px; }
/* A long question reads as text: regular weight, its paragraphs apart (#87) */
.ask .q { font-size: 13.5px; line-height: 1.55; }
.ask .choices button:disabled { cursor: default; opacity: .75; }
.ask .choices button.picked:disabled { opacity: 1; }
.ask-own { margin-top: 10px; align-items: flex-end; }
.ask-own textarea { flex: 1; min-height: 34px; padding: 7px 10px; resize: vertical; }
.ask-answer { margin-top: 10px; }
/* Settings → Secrets (#82): a secret field with its lock, centered with the name */
.secret-fields .sf { display: inline-flex; align-items: center; gap: 3px; }
/* A request for a secret (#82): the fields the agent named, a form of its own */
.secret-fields-form { margin-top: 12px; }
.secret-fields-form .f { margin-bottom: 12px; }
/* Proposals of the Agent Builder (#66): the fields, a change as before → after */
.propose { max-width: 680px; }
.propose .q p { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.prop-rows { grid-template-columns: 130px minmax(0, 1fr); align-items: start; margin-top: 4px; }
.prop-rows dd { display: block; overflow-wrap: anywhere; color: var(--text); }
.prop-rows .was { color: var(--text-3); text-decoration: line-through; }
.prop-rows .swatch-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.prop-role > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--text-2); }
.prop-role > summary::-webkit-details-marker { display: none; }
.prop-role > summary .chev { transition: transform var(--t); }
.prop-role[open] > summary .chev { transform: rotate(90deg); }
.prop-acts { margin-top: 14px; gap: 8px; }
.prop-reject[hidden] { display: none; }
/* An action on runs an agent proposes ([Decision:73], #191): the item with its status, the agents with their avatars */
.action .act-title { white-space: nowrap; }   /* beside the long waiting note at 390 px */
.action .act-line { display: inline-flex; align-items: flex-start; gap: 6px; line-height: 20px; vertical-align: top; }
.action .act-line .av.sm { flex: none; }
.action .act-line .st { width: 16px; height: 16px; flex: none; margin-top: 2px; }   /* on the first line when the title wraps */
.action .act-line .st svg { width: 16px; height: 16px; }
.action .act-line a { color: inherit; }
.action .act-line a:hover b { text-decoration: underline; }
.action .act-route { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.action .act-route > .ico { color: var(--text-3); flex: none; }
.action .act-text p { margin: 0 0 6px; }
.action .act-text > :last-child, .action .act-text .md > :last-child { margin-bottom: 0; }
/* What an agent that acts like the user proposes (mama_act, #214): one or more actions, each with its fields, then how far it got */
.mama-act .act-list { margin: 6px 0 0; padding: 0; list-style: none; }
.mama-act .act-list > li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
/* The number stays beside the first line of a long summary; the state comes on a line of its own. */
.mama-act .act-sum { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; line-height: 20px; }
.mama-act .act-sum > b { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.mama-act .act-sum > .act-state { flex-basis: 100%; }
.mama-act .act-num { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mama-act .act-state { display: inline-flex; align-items: flex-start; gap: 5px; color: var(--text-2); font-size: 12.5px; line-height: 20px; }
.mama-act .act-state .ico { flex: none; margin-top: 2.5px; }   /* on the first line when a failure wraps */
.mama-act .act-state.failed .ico { color: var(--err); }
.mama-act .act-state.skipped { color: var(--text-3); }
.mama-act .act-state a { color: inherit; text-decoration: underline; }
.mama-act .act-list .prop-rows { margin-top: 6px; }
.mama-act .act-why { margin-top: 12px; }
/* #12 in a project's chats links to the item (#68) */
a.item-ref { color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
a.item-ref:hover { text-decoration: underline; }
/* [Topic:3] and [Decision:54] as a badge [Decision:75]: a neutral pill, a link to the topic unless it is its own or unknown */
.ref-badge { display: inline-block; vertical-align: .1em; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-3); color: var(--text-3); font: 500 .8em/1.5 var(--font-mono); white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
a.ref-badge { color: var(--text-2); text-decoration: none; transition: border-color var(--t), color var(--t); }
a.ref-badge:hover { border-color: var(--text-3); color: var(--text); }
@media (max-width: 640px) { .prop-rows { grid-template-columns: 1fr; gap: 2px 0; } .prop-rows dd { margin-bottom: 6px; } }
.run-task { margin-top: 6px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); color: var(--text-2); font-size: 13px; }
.cl-start { gap: 10px; align-items: center; }
/* The instruction a queued run starts with (#110): the user's own lines, as typed. */
.cl-told { margin-top: 8px; }
.cl-told div { margin-top: 2px; padding-left: 10px; border-left: 2px solid var(--line-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tbl tbody tr[data-href]:hover { background: var(--bg-3); }
/* Fixed width, flush right: the grip and the button before it sit at the same place in every row (#171). */
.item .go { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
/* On a phone the column of row buttons stays hidden (no hover there); without this it took a second line in every row. */
@media (max-width: 640px) { .item .go { display: none; } }

/* Rule files of a project [Decision:22]: chips and a combobox with the files of the main path */
.rule-files { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rule-file { height: 30px; padding: 0 4px 0 9px; gap: 6px; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-2); }
.rule-file > .ico { color: var(--text-3); }
.rule-file .mono { font-size: 12px; }
.rule-file .x { width: 22px; height: 22px; border: 0; border-radius: 5px; background: none; color: var(--text-3); display: grid; place-items: center; }
.rule-file .x:hover { background: var(--bg-3); color: var(--text); }
.rule-file.missing { color: var(--text-3); border-style: dashed; }
.rule-file.missing .mono { text-decoration: line-through; text-decoration-color: var(--line-2); }
.rule-files .combo { flex: 1; min-width: 200px; max-width: 320px; }
.rule-files .combo .in { width: 100%; }

/* ---------- Gitea issues [Decision:37] ---------- */
/* labels of a Gitea issue */
.ilbl { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--text-2); margin-left: 4px; }
.kv dd .ilbl { margin-left: 0; }
.cl-gitea-err, .cl-gitea-err .ico { color: var(--err); }
/* "Create issue" (#91): the labels to choose, one row per scope (type/…, area/…), the chosen ones filled */
.gi-head { font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.gi-lbls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.gi-lbl { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); cursor: pointer; user-select: none; }
.gi-lbl input { position: absolute; opacity: 0; pointer-events: none; }
.gi-lbl i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--text-3)); flex: none; }
.gi-lbl:hover { background: var(--bg-3); }
.gi-lbl:has(input:checked) { background: var(--bg-3); border-color: var(--text-3); color: var(--text); }
.gi-lbl:has(input:focus-visible) { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.gitea-test { display: inline-flex; align-items: center; gap: 5px; }
.gitea-test.ok { color: var(--text-2); }
.gitea-test.bad { color: var(--err); }
[data-gitea-only][hidden] { display: none !important; }

/* Settings → Tools [Decision:39]: MCP servers */
.srv-list { display: grid; gap: 2px; margin: 0 calc(var(--sp) * -1); }
.srv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px var(--sp); border-radius: 8px; color: inherit; }
a.srv-row:hover { background: var(--bg-3); }
.srv-row .srv-ico { color: var(--text-3); display: flex; }
.srv-row .t { display: grid; gap: 2px; min-width: 0; }
.srv-row .t1, .srv-row .t2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-row .t2 { font-size: 12px; color: var(--text-3); }
.srv-row .t2.wrap { white-space: normal; overflow-wrap: anywhere; }
/* The sign-in of a server with OAuth [Decision:80]: on a phone the buttons go below the account. */
@media (max-width: 640px) { .srv-row.signin > .acts { grid-column: 2 / -1; } .srv-row.signin { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; } }
/* Coupled instances (#255): the status from the ping beside the version; on a phone the buttons go below. */
#inst-lists + .form-card { margin-top: calc(var(--sp) * 2); }
.inst-row .inst-st { display: flex; align-items: center; gap: 10px; }
.inst-row .acts { gap: 6px; flex-wrap: nowrap; }
.inst-request h3 { overflow-wrap: anywhere; }
.inst-request .warnline { margin: 10px 0 12px; }
@media (max-width: 640px) { .srv-row.inst-row > .acts { grid-column: 2 / -1; } .srv-row.inst-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; } }
/* Projects and agents of the coupled instances in the lists (#256): the badge "@instance", greyed while it does not answer. */
.inst-line { gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip.inst-badge { max-width: 100%; }
.chip.inst-badge > span { overflow: hidden; text-overflow: ellipsis; }
.remote-card.off, .side-item.remote-item.off { opacity: .55; }
/* The agents of the coupled Mamas in the project form's team (#270), a group under the badge each; greyed while it does not answer. */
.team-remote { display: grid; gap: 10px; margin: -6px 0 16px; }
.team-remote:empty { display: none; }
.team-inst .inst-line { margin: 0 0 6px; }
.team-remote .pick:disabled { opacity: .55; cursor: default; }
.team-remote + .hint { margin: -6px 0 16px; }
.pick .from { color: var(--text-3); }
/* The page of a mirror (#258). */
.mirror-kv { grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; }
.mirror-note .ico { margin-top: 2px; }
.mirror-role-label { font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.mirror-role { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; color: var(--text-2); background: var(--bg-3); border-radius: 8px; padding: 10px 12px; max-height: 360px; overflow: auto; }
.remote-empty { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 96px; padding: calc(var(--sp) * 2.25); }
div.remote-empty { cursor: default; }
.remote-wait { gap: 8px; }
.side-item.remote-item > .ico { flex: none; color: var(--text-3); }
/* Schedules [Decision:107]: a row per schedule (the whole row opens its form), its state in the form's head, the mark in the chat. */
.sched-row { cursor: pointer; }
.sched-row:hover { background: var(--bg-3); }
.sched-row.off .t1 b { color: var(--text-2); }
.sched-row .t1 a { color: inherit; }
.sched-who, .sched-last, .sched-chat, .sched-mark { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.sched-who > span:last-child, .sched-last > span { overflow: hidden; text-overflow: ellipsis; }
.sched-who .av.sm { width: 16px; height: 16px; border-radius: 4px; font-size: 9.5px; }
.sched-last { max-width: 100%; }
.sched-last > .ico { flex: none; }
.sched-chat { margin-left: 6px; text-decoration: underline; flex: none; }
.sched-status { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; }
/* On the line of the name (baseline), the icon in the middle of its text. */
.msg .who .sched-mark { align-items: baseline; }
.msg .who .sched-mark > .ico { align-self: center; }
.msg .who .sched-mark > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .who .sched-mark a { text-decoration: underline; }
[data-same][hidden], [data-preview][hidden] { display: none !important; }
.kv-row .in[data-k="name"] { flex: 1; }
.kv-row .in[data-k="value"] { flex: 2; }
.secret-tg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); cursor: pointer; user-select: none; white-space: nowrap; }
.secret-tg input { accent-color: var(--accent); margin: 0; }
.secret-tg:has(input:checked) { color: var(--text-2); }
.tool-list { margin-top: 6px; }
.tool-list > summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.tool-list > summary::-webkit-details-marker { display: none; }
.tool-list > summary .chev { transition: transform .15s; }
.tool-list[open] > summary .chev { transform: rotate(90deg); }
.tool-list .tbl td { vertical-align: top; padding: 6px 10px; }
@media (max-width: 640px) {
  .kv-row { flex-wrap: wrap; }
  .kv-row .in[data-k="name"], .kv-row .in[data-k="value"] { flex: 1 1 100%; }
}

/* Plugins (#61): what a plugin brings, hooks first */
.pl-sec { margin-bottom: 14px; }
.pl-sec h4 { font-size: 13px; font-weight: 500; margin: 0 0 6px; }
.pl-list { display: grid; gap: 3px; font-size: 12.5px; color: var(--text-2); }
.hook-tbl td { vertical-align: top; padding: 7px 10px; }
.hook-tbl tr.new td { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.hook-tbl tr.gone td { opacity: .55; }
.hook-tbl tr.gone .hook-cmd { text-decoration: line-through; }
.hook-cmd { font: 12px/1.45 var(--font-mono); white-space: pre-wrap; word-break: break-all; color: var(--text); }
.kv-lines { display: grid; gap: 4px; }
.kv-lines > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
.kv-lines .mono { overflow-wrap: anywhere; }

/* Attachments (#69): chips before sending, thumbnails and chips afterwards, the drop target, the big view */
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
.att-chips[hidden] { display: none; }
.att-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; height: 32px; padding: 0 4px 0 6px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--text); font-size: 12.5px; text-decoration: none; }
a.att-chip { padding-right: 9px; }
a.att-chip:hover { border-color: var(--text-3); }
.att-chip img { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; }
.att-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.att-chip .sz { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.att-chip .x { width: 22px; height: 22px; border: 0; border-radius: 5px; background: none; color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.att-chip .x:hover { background: var(--bg-3); color: var(--text); }
.att-chip.text .att-main { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; min-width: 0; }
.att-chip.bad { border-color: var(--bad, #d55); }
.att-list { display: grid; gap: 6px; margin: 6px 0 2px; }
.att-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.att-thumb { padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); cursor: zoom-in; overflow: hidden; line-height: 0; }
.att-thumb img { max-width: 220px; max-height: 150px; object-fit: contain; display: block; }
.att-thumb:hover { border-color: var(--text-3); }
.md .md-img { margin: 4px 0; }
.md .md-img img { max-width: 100%; max-height: 320px; }
.md .md-note { color: var(--text-3); font-size: .9em; }
.att-files { display: flex; flex-wrap: wrap; gap: 6px; }
.att-remove { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.att-remove .chip { border: 0; font-size: 11.5px; color: var(--text-3); max-width: 100%; transition: background var(--t), color var(--t); }
.att-remove .chip > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.att-remove .chip:hover { background: var(--line-2); color: var(--text); }
.att-remove .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.att-drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
/* The picture of an agent in its form (#133): a big preview to drag and scroll, the sizes beside the buttons, the sliders */
.av-edit { border-radius: var(--radius); }
.av-edit.att-drop { outline-offset: 4px; }
.av-edit-lbl { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.av-edit-row { display: flex; gap: 18px; align-items: flex-start; }
.av-edit-stage { flex: none; border-radius: 28px; touch-action: none; }
.av-edit-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.av-edit-stage.has-pic { cursor: grab; }
.av-edit-stage.dragging { cursor: grabbing; }
.av-edit-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.av-edit-side .hint { margin: 0; }
.av-edit-sizes { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.av-edit-sliders { display: grid; gap: 4px; max-width: 420px; }
.av-edit [hidden] { display: none; }
.av-slider { display: grid; grid-template-columns: 96px 1fr 52px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.av-slider output { font: 12px var(--font-mono); color: var(--text-3); text-align: right; }
/* "Generate" (#134): the prompt, suggest / status / make, the pictures of this form to pick from */
.btn.off { opacity: .45; cursor: help; }
.av-gen { display: grid; gap: 8px; max-width: 520px; }
.av-gen textarea { resize: vertical; min-height: 64px; }
.av-gen-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.av-gen-acts [data-av-go] { margin-left: auto; }
.av-gen-acts .improve:disabled { opacity: .45; pointer-events: none; }
.av-gen-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--text-3); }
.av-gen-status.err { color: var(--err); }
.av-gen-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.av-pick { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.av-pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av-pick[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) {
  .av-edit-row { flex-direction: column; gap: 12px; }
  .av-slider { grid-template-columns: 84px 1fr 48px; }
}
.msg.user .att-list { justify-items: end; }
.msg.user.run-start .att-list { justify-items: start; }
.composer .att-chips { padding: 8px 0 0; }
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgb(0 0 0 / .82); display: grid; place-items: center; }
.lightbox > img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgb(0 0 0 / .5); }
.lightbox .lb-bar { position: fixed; top: 12px; left: 16px; right: 12px; display: flex; align-items: center; gap: 6px; color: #eee; font-size: 13px; }
.lightbox .lb-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox .icon-btn { color: #eee; }
.lightbox .lb-nav { position: fixed; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox .lb-nav.prev { left: 16px; transform: rotate(180deg); }
.lightbox .lb-nav.next { right: 16px; }
.lightbox .lb-nav:hover { background: rgb(255 255 255 / .22); }

/* Helper form [Decision:45]: the fields of the provider not chosen; the agent form (#45): what only Claude or only Codex has. */
[data-prov][hidden], [data-prov-only][hidden] { display: none !important; }

/* The agent's browser, live and read only ([Decision:47], js/browser-view.js): a floating window, a sheet on a phone. */
.bwin { position: fixed; right: 18px; bottom: 18px; width: min(760px, calc(100vw - 36px)); height: min(500px, calc(100vh - 36px)); min-width: 300px; min-height: 220px;
  z-index: 80; display: flex; flex-direction: column; overflow: hidden; resize: both; border-radius: var(--r-lg); background: var(--bg-solid);
  border: 1px solid var(--line); box-shadow: var(--shadow), 0 30px 80px -20px rgb(0 0 0 / .5); animation: pop .16s var(--ease); }
.bw-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; min-height: 40px; }
.bw-title { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bw-title b { font-weight: 600; }
.bw-url { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.bw-age { white-space: nowrap; }
.bw-pages { max-width: 30%; height: 28px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.bw-log-btn.on { background: var(--bg-2); }
/* The chat head's button while the agent has a page open (#119), with their number (#120). */
.bw-open.on { background: var(--bg-3); color: var(--text); }
.bw-open .badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; background: var(--ok); color: var(--bg-1); margin-left: -1px; }
.bw-main { flex: 1; min-height: 0; display: flex; }
.bw-view { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0c0c0e; }
.bw-stage { position: relative; }
.bw-frame { display: block; width: 100%; height: 100%; }
.bw-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bw-cursor { position: absolute; width: 18px; height: 18px; margin: -1px 0 0 -1px; transition: left .08s linear, top .08s linear; filter: drop-shadow(0 0 2px #000); }
.bw-cursor svg { display: block; width: 100%; height: 100%; }
.bw-ring { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid #ff453a; border-radius: 50%; box-sizing: border-box; animation: bw-ring .7s ease-out forwards; }
.bw-ring.right { border-color: #0a84ff; }
.bw-ring.wheel { border-color: #c8c8d0; border-style: dashed; }
@keyframes bw-ring { from { transform: scale(.3); opacity: 1 } to { transform: scale(1.4); opacity: 0 } }
.bw-keys { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 6px; background: rgb(0 0 0 / .75); color: #fff;
  font: 600 14px var(--mono, ui-monospace, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
.bw-keys.on { opacity: 1; transition: none; }
.bw-state { padding: 20px; text-align: center; color: #9a9aa5; }
.bw-log { width: 250px; flex: none; border-left: 1px solid var(--line); overflow-y: auto; }
.bw-actions { list-style: none; margin: 0; padding: 4px 0; font-size: 12px; }
.bw-actions li { padding: 4px 10px; line-height: 1.4; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bw-actions time { color: var(--text-3); margin-right: 6px; font-variant-numeric: tabular-nums; }
.bw-actions b { font-weight: 600; }
.bw-actions .empty { color: var(--text-3); }
@media (max-width: 640px) {
  .bwin { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; height: 62vh !important; min-width: 0;
    resize: none; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
  .bw-head { cursor: default; }
  .bw-url { display: none; }
  .bw-title { flex: 1; }
  .bw-main { flex-direction: column; }
  .bw-log { width: auto; height: 34%; border-left: 0; border-top: 1px solid var(--line); }
}

/* The window Files of a chat (#244, [Decision:108], js/files-view.js): floats like the browser, at the right below the chat's head
   (whose buttons stay free); not on a phone. */
.fwin { position: fixed; right: 18px; top: calc(var(--top) + 80px); width: min(420px, calc(100vw - 36px)); height: min(540px, calc(100vh - var(--top) - 100px)); min-width: 280px; min-height: 220px;
  z-index: 80; display: flex; flex-direction: column; overflow: hidden; resize: both; border-radius: var(--r-lg); background: var(--bg-solid);
  border: 1px solid var(--line); box-shadow: var(--shadow), 0 30px 80px -20px rgb(0 0 0 / .5); animation: pop .16s var(--ease); }
.fwin .bw-title { flex: 1; min-width: 0; overflow: hidden; }
.fw-proj { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fw-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
/* The end of a long path is the folder shown: cut at the start. */
.fw-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; font-size: 12px; color: var(--text-2); }
.fw-path .mono { font-size: inherit; }
.fw-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; }
.fw-row { user-select: none; }
.fw-row .fw-name { flex: 1; min-width: 0; }
.fw-row .fw-size { flex: none; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fw-row.sel { background: var(--accent-soft); }
/* The marked rows go into the message as references (#245). */
.fw-foot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--line); }
.fw-count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.fw-foot .btn { flex: none; }
.fw-btn.on { background: var(--bg-3); color: var(--text); }
@media (max-width: 640px) { .fwin, .fw-btn { display: none !important; } }

/* The viewers of the window Files (#246, [Decision:110], js/file-viewer.js): one floating window per file, several at once;
   text as plain text, pictures and media fitted in; not on a phone. */
.vwin { position: fixed; left: 18px; top: calc(var(--top) + 60px); width: min(720px, calc(100vw - 36px)); height: min(560px, calc(100vh - var(--top) - 80px)); min-width: 280px; min-height: 200px;
  z-index: 80; display: flex; flex-direction: column; overflow: hidden; resize: both; border-radius: var(--r-lg); background: var(--bg-solid);
  border: 1px solid var(--line); box-shadow: var(--shadow), 0 30px 80px -20px rgb(0 0 0 / .5); animation: pop .16s var(--ease); outline: none; }
.vwin .bw-title { flex: 1; min-width: 0; overflow: hidden; }
/* In a narrow viewer the size and lines give way first, the name keeps a few letters. */
.vw-name { flex: 0 1 auto; min-width: 48px; overflow: hidden; text-overflow: ellipsis; }
.vw-meta { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-variant-numeric: tabular-nums; }
.vw-body { flex: 1; min-height: 0; overflow: auto; }
.vw-lines { display: flex; min-width: max-content; min-height: 100%; }
.vw-text, .vw-nums { margin: 0; padding: 10px 12px; font-size: 12.5px; line-height: 18px; white-space: pre; tab-size: 4; }
.vw-text { flex: 1; }
/* The line numbers stay at the left when long lines scroll; a click marks a line (#247). */
.vw-nums { position: sticky; left: 0; flex: none; padding-right: 10px; text-align: right; color: var(--text-3); background: var(--bg-solid);
  border-right: 1px solid var(--line); user-select: none; cursor: pointer; font-variant-numeric: tabular-nums; }
.vw-kind-image, .vw-kind-video, .vw-kind-audio { display: flex; align-items: center; justify-content: center; background: var(--bg-2); }
.vw-kind-image img, .vw-kind-video video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.vwin-audio { height: auto; min-height: 0; resize: horizontal; }
.vw-kind-audio { flex: none; padding: 16px; }
.vw-kind-audio audio { width: 100%; }
/* Code highlighted and Markdown rendered (#248), the switch to the raw text in the head, the note of a large text. Calm as
   the chat's code (.md .k/.s/.c/.t): grays, bold and italic, a faint tint only for strings. */
.vw-seg { flex: none; }
.vw-seg button { padding: 2px 8px; font-size: 12px; }
.vw-note { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.vw-code .vw-text { color: var(--text-2); }
.vw-code :is(.hljs-keyword, .hljs-literal, .hljs-selector-tag, .hljs-name, .hljs-section, .hljs-built_in) { color: var(--text); font-weight: 600; }
.vw-code :is(.hljs-type, .hljs-title, .hljs-selector-class, .hljs-selector-id, .hljs-strong) { color: var(--text); }
.vw-code :is(.hljs-string, .hljs-regexp, .hljs-symbol, .hljs-char, .hljs-addition) { color: color-mix(in oklab, var(--ok) 55%, var(--text-2)); }
.vw-code :is(.hljs-comment, .hljs-quote, .hljs-meta, .hljs-deletion) { color: var(--text-3); }
.vw-code :is(.hljs-comment, .hljs-quote, .hljs-emphasis) { font-style: italic; }
.vw-code .hljs-strong { font-weight: 600; }
.vw-md > .md { max-width: 860px; padding: 14px 20px 20px; }
.vw-md .md-local img { display: block; max-width: 100%; max-height: 480px; }
@media (max-width: 640px) { .vwin { display: none !important; } }

/* ---------- Home (#71, [Decision:43]) ---------- */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--sp) * 1.5); align-items: start; }
.home-box { padding: calc(var(--sp) * 1.75) calc(var(--sp) * 2); min-width: 0; }
.home-box#h-proj { grid-column: 1 / -1; }
.home-box-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 28px; }
.home-box-head h2 { flex: 1; min-width: 0; margin: 0; font: 500 13px var(--font-ui); color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.home-box-head h2 .ico { color: var(--text-3); }
.home-box-head .badge.hot { background: var(--accent); color: var(--on-accent); }
.home-empty { color: var(--text-3); font-size: 13px; padding: 4px 0; }
.home-note { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; color: var(--text-2); }
.home-note > .ico { margin-top: max(0px, calc((1lh - 15px) / 2)); color: var(--text-3); }
.home-note.err > .ico { color: var(--err); }
.home-raw { font: 12px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0 0; color: var(--text-2); max-height: 260px; overflow: auto; }
.limits { display: grid; gap: 14px; }
.limit-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.limit-name { flex: 1; min-width: 0; color: var(--text); }
.limit .progress { height: 6px; margin-bottom: 5px; gap: 0; }
.home-rl { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--text-2); }
.home-foot { margin-top: 10px; }
.home-list { display: flex; flex-direction: column; margin: 0 -8px; }
/* One grid for all projects, each row a subgrid of it: the bars stand one below the other (#71). */
.home-projs { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(80px, 1fr) auto; column-gap: 16px; margin: 0 -8px; }
.home-line { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--text-2); min-width: 0; }
.home-line:hover { background: var(--bg-3); }
.home-line .lead { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: none; color: var(--text-3); }
.home-line .t { flex: 1; min-width: 0; }
.home-line .t1 { display: block; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-line .t2 { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-line .time { font-size: 12px; color: var(--text-2); }
.home-sub { font-size: 12px; color: var(--text-3); margin: 12px 0 2px; }
.home-more { padding: 4px 0 0 28px; }
.home-proj { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 9px 8px; border-radius: 8px; color: var(--text-2); }
.home-proj:hover { background: var(--bg-3); }
.hp-name { min-width: 0; display: flex; flex-direction: column; }
.hp-name b { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-meta { display: flex; align-items: center; gap: 12px; justify-content: flex-end; white-space: nowrap; min-width: 0; }
.proj-run, .home-git { display: inline-flex; align-items: center; gap: 5px; }
.home-tbl { overflow-x: auto; margin: 0 -12px; }
.hm-model { overflow-wrap: anywhere; }
.home-tbl td.n { white-space: nowrap; }
.svcs { display: grid; gap: 10px; }
.svc { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.svc-name { color: var(--text-3); }
.svc-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-s { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 6px; }
.svc-v:empty { display: none; }
@media (max-width: 900px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .home-projs { grid-template-columns: minmax(0, 1fr) 72px; column-gap: 12px; }
  .home-proj { row-gap: 6px; }
  .hp-meta { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .svc { grid-template-columns: 80px minmax(0, 1fr); }
  .svc-s { grid-column: 2; justify-self: start; }
}

/* ---------- Decisions [Decision:72] ---------- */
.item.dec { grid-template-columns: 72px minmax(0, 1fr) auto; }
.item.dec .num { white-space: nowrap; display: flex; }
.dc-codes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dc-text { color: var(--text); }
.dc-detail .warnline[hidden] { display: none; }
.dc-edit { min-height: 320px; font-size: 12.5px; line-height: 1.55; resize: vertical; }
.dc-versions { display: grid; gap: 6px; }
.dc-version { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dc-vhead { display: block; width: 100%; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.dc-vhead:disabled { cursor: default; }
.dc-vhead:not(:disabled):hover { background: var(--bg-2); }
.dc-vline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dc-vline a { display: inline-flex; align-items: center; gap: 3px; }
.dc-vwhy { display: block; margin: 3px 0 0 28px; color: var(--text-2); overflow-wrap: anywhere; }
.dc-vstat { white-space: nowrap; }
.dc-vdiff { padding: 6px 10px 10px; border-top: 1px solid var(--line); max-height: 480px; overflow: auto; }
.dm-rows { margin: 8px 0 12px; padding-left: 18px; max-height: 260px; overflow: auto; font-size: 13px; }
.dm-rows li { margin: 2px 0; }
.rc-hits { max-height: 340px; }
.rc-hits li { margin: 0 0 6px; overflow-wrap: anywhere; }
.rc-ctx { margin-top: 1px; }
@media (max-width: 640px) {
  .item.dec { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .item.dec .num { display: flex; }
}
/* Settings -> Import (#142, #232): the rows of gott's agents and sessions, each with its choice, "Import", state and notes. */
.imp-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
.imp-row .imp-ctl, .imp-row .f { margin: 0; min-width: 0; }
.imp-row .imp-ctl { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.imp-row .imp-ctl > .in { width: 190px; }
.imp-row .imp-ctl > .btn-sm { height: 30px; }
.imp-row .imp-more { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 8px; }
.imp-row .imp-more > .f:only-child { grid-column: 1 / -1; }
.imp-row > .imp-notes { grid-column: 2 / -1; margin-top: 0; }
.imp-row .t2 .chip, .imp-row > .chip { vertical-align: middle; }
.imp-state .spinner { width: 10px; height: 10px; border-width: 1.5px; }
.imp-why { color: var(--text-2); }
.imp-about { margin-bottom: 14px; }
.imp-about .f { margin-bottom: 8px; }
.imp-about .row { gap: 8px; }
.imp-done { color: var(--text-2); }
.imp-done:hover { color: var(--text); }
.imp-warn { height: 18px; padding: 0 6px; font-size: 11.5px; color: var(--text); }
.imp-read { margin-top: 14px; }
.imp-rep { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.imp-rep:last-of-type { border-bottom: 0; }
.imp-rep a { text-decoration: underline; text-underline-offset: 2px; }
.imp-notes { margin: 4px 0 0 18px; padding: 0; color: var(--text-3); font-size: 12px; display: grid; gap: 2px; }
@media (max-width: 640px) {
  .imp-row { grid-template-columns: auto minmax(0, 1fr); }
  .imp-row > .imp-ctl, .imp-row > .chip { grid-column: 2 / -1; justify-self: start; justify-content: flex-start; }
  .imp-row .imp-ctl > .in { width: auto; min-width: 0; flex: 1; }
  .imp-row > .imp-ctl:has(.in) { justify-self: stretch; }
  .imp-row .imp-more { grid-column: 2 / -1; grid-template-columns: minmax(0, 1fr); }
  .imp-row .imp-more { order: 1; }
  .imp-row > .imp-ctl { order: 2; }
  .imp-row > .imp-notes { order: 3; }
}
}
/* Select folder (#239): the button beside a path field and the dialog with its list of folders. */
.fp-btn { flex: none; width: calc(28px + 6px * var(--density)); padding: 0; }
.fp-field, label.f > span.fp-field { display: flex; align-items: center; gap: 8px; margin: 0; font: inherit; color: inherit; }
.fp-field > input.in { flex: 1; min-width: 0; }
.fp-dialog { width: min(560px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; }
.fp-go { margin-top: 6px; }
.fp-go input.in { flex: 1; min-width: 0; }
.fp-list { margin-top: 10px; height: min(340px, 45dvh); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; }
.fp-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.fp-row:hover, .fp-row:focus-visible { background: var(--bg-3); }
.fp-row .ico { flex: none; color: var(--text-3); }
.fp-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-note { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 12.5px; color: var(--text-3); }
.fp-note .ico { flex: none; }
.fp-dialog .acts { flex: none; }

/* Updates (#263): the banner under the top bar while a deploy or an update holds Mama, and how it went; the admin's chip;
   the commits of a newer version in About Mama. */
#banner { position: fixed; top: calc(var(--gap) + var(--top) + 8px); left: 50%; transform: translateX(-50%); z-index: 90; max-width: calc(100vw - 16px); }
.update-banner { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px 6px 14px; border-radius: 10px; background: var(--bg-solid); box-shadow: var(--shadow); font-size: 13px; animation: pop .2s var(--ease); }
.update-banner > .ico { flex: none; color: var(--text-3); }
.update-banner.failed > .ico { color: var(--err); }
.update-banner .txt { min-width: 0; overflow-wrap: anywhere; padding-right: 6px; }
.update-banner .btn, .update-banner .icon-btn { flex: none; }
.update-chip { flex: none; }
.update-commits { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; font-size: 13px; }
.update-commits li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.update-commits .mono { color: var(--text-3); }
.update-commits .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.update-acts { margin-top: 12px; gap: 8px; }
@media (max-width: 640px) { #banner { top: calc(var(--top) + 6px); width: calc(100vw - 16px); } .update-banner { justify-content: center; } }