/* agentbook: your agents' work, in the shape of a social network.
   Profiles are agents (Claude, Codex, your OpenClaw agents). Each session is a post on its agent's wall,
   live while it runs. Comments are the conversation with that session. Yellow means it needs you. */

:root {
  --bg: #edeff2;
  --card: #ffffff;
  --well: #f3f4f6;
  --ink: #121821;
  --ink-2: #4a5462;
  --ink-3: #8a93a0;
  --line: #e5e8ec;
  --line-2: #d3d8de;
  --sun: #ffd23f;
  --sun-card: #fff6d6;
  --sun-edge: rgba(150, 110, 0, 0.2);
  --red: #c8402c;
  --green: #23845a;
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow: 0 1px 2px rgba(18, 24, 33, 0.05), 0 4px 16px rgba(18, 24, 33, 0.04);
}

/* you; agents get their hue inline */
.you    { --hue: #121821; --tint: #e3e6ea; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
code, .code { font-family: var(--mono); font-size: 0.88em; }
/* what a search matched */
mark { padding: 0 1px; border-radius: 3px; background: rgba(255, 210, 63, 0.55); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- building blocks ---------- */

.card { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); }

.av {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--hue);
  font-weight: 650;
  font-size: 16px;
  line-height: 1;
}
.av--xs { width: 20px; height: 20px; font-size: 10px; }
.av--sm { width: 28px; height: 28px; font-size: 12.5px; }
.av--lg { width: 56px; height: 56px; font-size: 22px; }
.av--hero { width: 96px; height: 96px; font-size: 40px; }
/* a private agent, on someone else's public post: who wrote it isn't theirs to see */
.av--private { --hue: var(--ink-3); --tint: var(--well); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.av--private svg.i { width: 46%; height: 46%; }
.redacted { color: var(--ink-2); font-weight: 550; }
.av .on { position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--card); }
/* idle: there, with nothing running; offline: out of reach */
.av .on--idle { background: var(--card); box-shadow: inset 0 0 0 2px var(--green), 0 0 0 2px var(--card); }
.av .on--offline { background: var(--ink-3); }
.av--lg .on--idle { box-shadow: inset 0 0 0 3px var(--green), 0 0 0 2px var(--card); }
/* a picture or an emoji in place of its letter */
.av--pic { background: var(--well); }
.av--pic img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av .em { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font); font-size: 1.35em; font-weight: 400; line-height: 1; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--well); font-size: 14px; font-weight: 550; white-space: nowrap; }
.btn:hover { background: #e8eaee; text-decoration: none; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2a3442; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: #a83423; }
.btn--line { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--sm { padding: 5px 11px; font-size: 13px; border-radius: 9px; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 7px; background: var(--well); color: var(--ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
/* every chip the same way: its icon the size of its words, and one that goes somewhere darkens a touch under the pointer */
.chip svg.i { width: 12px; height: 12px; }
a.chip:hover, button.chip:hover { text-decoration: none; filter: brightness(0.97); }
.chip--branch { font-family: var(--mono); font-size: 11.5px; }
/* A post's branch, by whether its work is on main: all of it (green, like Done), its pull request merged (GitHub's
   purple), closed or deleted (crossed out). Until then, what isn't on main after the name, behind a hairline. */
.chip--branch svg.i { stroke-width: 2.2; }
.chip--landed { background: #e4f2ea; color: var(--green); }
.chip--merged { background: #efe9fb; color: #6a3fc4; }
.chip--gone { color: var(--ink-3); }
.chip--gone s { text-decoration-color: var(--line-2); }
.chip-x { margin-left: 1px; padding-left: 6px; border-left: 1px solid var(--line-2); color: var(--ink); }
.post-who .on { color: var(--ink-2); font-weight: 450; }
.nav-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.nav-name small { color: var(--ink-3); font-size: 12px; font-weight: 450; }
.chip--live { background: var(--red); color: #fff; font-weight: 600; }
.chip--live .pulse { background: #fff; }
.chip--sun { background: var(--sun); color: var(--ink); font-weight: 600; }
.chip--off { background: #fbe9e6; color: var(--red); }
.chip--done { background: #e4f2ea; color: var(--green); font-weight: 600; }
.pulse { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hue, var(--green)); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
.muted { color: var(--ink-3); }
.sep { color: var(--line-2); }

/* ---------- top bar ---------- */

.top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; height: 60px; padding: 0 16px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.top-left { display: flex; align-items: center; gap: 12px; }
.wordmark { font-size: 21px; font-weight: 750; letter-spacing: -0.035em; }
.wordmark:hover { text-decoration: none; }
.search { display: flex; align-items: center; gap: 8px; width: 200px; padding: 0 12px; border-radius: 999px; background: var(--well); color: var(--ink-3); }
.search input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: none; font: inherit; font-size: 14px; color: var(--ink); }
.search:focus-within { box-shadow: 0 0 0 1.5px var(--ink); }
/* ⌘K, in it: opens Go to. Gone once you're searching. */
.search-k { flex: none; margin-right: -4px; padding: 0; border: 0; background: none; }
.search-k kbd { display: block; padding: 0 5px; border-radius: 5px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); font: 500 11px/1.6 var(--mono); }
.search-k:hover kbd { color: var(--ink); }
.search:has(input:focus, input:not(:placeholder-shown)) .search-k { display: none; } /* not :focus-within: pressing it would hide it */
/* your agents, under Agents in the sidebar: Choose which to show and Add agents end it, quietly */
.nav--agents > li > a, .nav--agents .nav-pick { gap: 10px; }
.nav .nav--agents > li.has-fold > a { padding-right: 40px; } /* its running count clear of its chevron */
.nav--agents .nav-foot { display: flex; flex-wrap: wrap; gap: 0 2px; margin-top: 2px; }
.nav--agents .nav-foot .nav-more[aria-pressed="true"] { color: var(--ink); font-weight: 600; } /* Done, while you pick which agents to show */
/* an agent's open threads, under it: 5 at most, then Show all */
.ag-threads { padding-left: 30px; }
.ag-threads .wip-nav { margin: 1px 0 4px; }
.nav .ag-threads .wip-nav a { padding: 4px 8px; font-size: 13px; }
.nav .ag-threads .wip-nav a.ag-all { display: block; padding: 3px 8px 3px 30px; color: var(--ink-3); font-size: 12.5px; font-weight: 450; }
.nav .ag-threads .wip-nav a.ag-all:hover { color: var(--ink); }
/* a routine waiting for your OK, on you in the bar: opens your Routines */
[data-me] { position: relative; }
.me-badge { position: absolute; top: -4px; right: -5px; text-decoration: none; }
.me-badge:hover { text-decoration: none; filter: brightness(0.97); }
.top-right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.round { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--well); }
.round:hover { background: #e4e6ea; }
.badge { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--sun); color: var(--ink); font-size: 11.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--card); }
.round .badge { position: absolute; top: -4px; right: -5px; }
.badge--quiet { background: var(--card); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line), 0 0 0 3px var(--card); }
/* the bell's menu: what needs you, under it; on a phone, the window's width under the bar */
.bell-wrap { position: relative; }
.round[aria-expanded="true"] { background: #e4e6ea; }
.fb-menu.bell-menu { top: calc(100% + 12px); right: 0; left: auto; width: 380px; max-height: calc(100vh - 84px); padding: 14px 14px 6px; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 860px) {
  .fb-menu.bell-menu { position: fixed; top: 66px; right: 8px; left: 8px; width: auto; max-width: none; max-height: calc(100dvh - 80px); }
}

/* ---------- three columns ---------- */

.shell { display: grid; grid-template-columns: 280px minmax(0, 680px) 320px; justify-content: space-between; gap: 28px; max-width: 1440px; margin: 0 auto; padding: 18px 16px 60px; }
.col-side { position: sticky; top: 78px; align-self: start; max-height: calc(100vh - 96px); overflow-y: auto; }
.feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }

/* left nav */
.nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; font-size: 14.5px; font-weight: 500; }
.nav a:hover { background: #e3e6ea; text-decoration: none; }
.nav a.is-on { background: var(--card); box-shadow: var(--shadow); }
.nav .ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); }
.nav a.is-on .ico { background: var(--ink); color: #fff; }
.nav .n { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.nav .n.badge { color: var(--ink); box-shadow: none; }
.nav a > .side-n:last-child { margin-left: auto; } /* an agent's or a workspace's running threads, at its row's end */
.nav a > .n + .side-n { margin-left: 8px; }
/* faded, all but its dot */
.nav a.is-off .av { background: rgba(18, 24, 33, 0.05); color: var(--ink-3); filter: grayscale(1); }
.nav a.is-off .av > :not(.on) { opacity: 0.45; }
.nav a.is-off .ag-name { color: var(--ink-2); }
/* The sidebar's own rows: an icon without a disc, 34px each. One with a list has a chevron at its end that folds the
   list open under it, indented, its rows smaller; the list ends with a quiet line to make another or see the rest. */
.nav--top > li > a, .nav--top > li > .nav-head { gap: 10px; padding: 6px 10px; }
.nav--top > li > a > .ico, .nav--top > li > .nav-head > .ico { width: 22px; height: 22px; background: none; box-shadow: none; color: var(--ink-2); }
.nav--top > li > a.is-on > .ico, .nav--top > li > .nav-head.is-on > .ico { background: none; color: var(--ink); }
.nav .has-fold { position: relative; }
.nav .has-fold > a, .nav .has-fold > .nav-head { padding-right: 40px; }
/* a row with no page of its own (Workspaces): its name folds its list, as its chevron does */
.nav-head { display: flex; align-items: center; width: 100%; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; }
.nav-head:hover { background: #e3e6ea; }
.nav-head.is-on { background: var(--card); box-shadow: var(--shadow); }
.nav-sub { margin: 1px 0 6px; padding-left: 14px; }
.nav-sub > .nav > li > a { gap: 10px; padding: 5px 8px; font-size: 14px; }
.nav-sub .ws > a > .ico { width: 24px; height: 24px; }
.nav-sub .ws > a > .ico svg.i { width: 14px; height: 14px; }
.nav-sub .nav-foot { display: flex; flex-wrap: wrap; gap: 0 2px; }
.nav-sub .nav-foot .nav-more { display: inline-block; width: auto; height: auto; padding: 4px 8px; color: var(--ink-3); font-size: 13px; font-weight: 450; }
.nav-sub .nav-foot .nav-more:hover { color: var(--ink); }
/* an agent's name on one line, where it runs after it in grey */
.ag-name { display: flex; flex: 0 1 auto; align-items: baseline; gap: 6px; min-width: 0; }
.ag-name b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ag-name small { flex: none; color: var(--ink-3); font-size: 12.5px; font-weight: 450; }

/* progress rings around an avatar */
.ring { position: relative; width: 52px; height: 52px; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .av { position: absolute; inset: 6px; width: 40px; height: 40px; background: var(--card); }

/* ---------- composer: writing on an agent's wall starts a session ---------- */

.compose { padding: 14px 16px 10px; }
.compose-row { display: flex; align-items: center; gap: 10px; }
.compose-in { flex: 1; padding: 11px 16px; border-radius: 999px; background: var(--well); color: var(--ink-3); font-size: 15px; }
.compose-acts { display: flex; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.compose-acts a { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 10px; color: var(--ink-2); font-size: 14px; font-weight: 550; }
.compose-acts a:hover { background: var(--well); text-decoration: none; }

/* ---------- posts: one per session ---------- */

.post { padding: 14px 0 6px; }
.post > * { margin-left: 16px; margin-right: 16px; }
.post-head { display: flex; align-items: flex-start; gap: 10px; }
.post-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.post-who > b { font-size: 15px; font-weight: 650; }
.post-who .verb { color: var(--ink-2); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
.post-title { margin-top: 12px; margin-bottom: 4px; font-size: 18px; font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; }
.post-text { margin-top: 6px; margin-bottom: 0; color: var(--ink); font-size: 15px; line-height: 1.5; }
.post-text + .post-text { margin-top: 8px; }
/* a search's match in a message the card doesn't show */
.post-hit { display: -webkit-box; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: var(--well); color: var(--ink-2); font-size: 14px; line-height: 1.45; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.post-hit > b { margin-right: 4px; color: var(--ink); font-weight: 650; }

/* the live line: what the session is doing right now */
.live { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--hue) 8%, white); font-size: 14px; }
.live b { font-weight: 600; }
.live time { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }

/* the session's plan, from its task list */
.plan { margin-top: 10px; margin-bottom: 2px; padding: 0; list-style: none; }
.plan li { display: flex; align-items: center; gap: 9px; padding: 3px 0; color: var(--ink-2); font-size: 14px; }
.plan .tick { display: grid; flex: none; place-items: center; width: 17px; height: 17px; border: 1.5px solid var(--line-2); border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; }
.plan .done { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.plan .done .tick { border-color: var(--hue); background: var(--hue); }
.plan .now { color: var(--ink); font-weight: 550; }
.plan .now .tick { border-color: var(--hue); box-shadow: inset 0 0 0 3px #fff; background: var(--hue); }

/* what a finished session left behind */
.summary { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--ink-2); font-size: 13.5px; }
.summary span { display: inline-flex; align-items: center; gap: 6px; }

/* media: full-bleed inside the card, like photos */
.media { margin: 12px 0 0 !important; }
.media svg, .media img { display: block; width: 100%; height: auto; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 12px 0 0 !important; }
.thumbs figure { position: relative; margin: 0; }
.thumbs figure svg { display: block; width: 100%; height: auto; }
.thumbs figcaption { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(18, 24, 33, 0.72); color: #fff; font-size: 11.5px; font-weight: 600; }

.mini-tbl { width: 100%; margin-top: 4px; border-collapse: collapse; font-size: 13.5px; }
.mini-tbl th { padding: 0 0 6px; color: var(--ink-3); font-size: 12px; font-weight: 500; text-align: left; }
.mini-tbl td { padding: 7px 0; border-top: 1px solid var(--line); }
.mini-tbl .num { text-align: right; }
.mini-tbl .up { color: var(--green); }
.mini-tbl .down { color: var(--red); }

/* a link to a pull request, like a link preview */
.pr { display: grid; grid-template-columns: 6px minmax(0, 1fr); margin-top: 12px; border-radius: 14px; background: var(--well); overflow: hidden; }
.pr::before { content: ""; background: var(--green); }
.pr-in { padding: 11px 14px; }
.pr-in small { color: var(--ink-3); font-size: 12px; }
.pr-in b { display: block; margin: 1px 0 4px; font-size: 15px; }
.pr-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); font-size: 12.5px; }
.add { color: var(--green); font-weight: 600; }
.del { color: var(--red); font-weight: 600; }

/* questions are polls */
.poll { display: grid; gap: 6px; margin-top: 12px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--well); text-align: left; overflow: hidden; }
.poll-opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.poll-opt .fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--hue) 14%, white); }
.poll-opt > :not(.fill) { position: relative; }
.poll-opt b { font-weight: 600; }
.poll-opt small { color: var(--ink-3); }
.poll-opt .pick { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.poll--multi .poll-opt.is-on { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--card); }
.poll--multi .poll-opt.is-on::before { content: "✓"; font-weight: 700; }
.ask-form--other input { border-color: var(--line-2); }
.poll-note { color: var(--ink-3); font-size: 13px; }

/* needs you: permission prompts and questions, pinned and yellow */
.post--ask { background: var(--sun-card); box-shadow: 0 0 0 1.5px var(--sun-edge), var(--shadow); }
.ask-flag { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; color: #7a5b00; font-size: 13px; font-weight: 600; }
.cmd { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: #e9edf2; font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.post--ask .btn:not(.btn--dark) { background: rgba(255, 255, 255, 0.75); }

/* reactions are feedback to the agent */
.reacts { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; }
.reacts .emo { display: inline-flex; }
.reacts .emo span { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -4px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 2px var(--card); font-size: 13px; }
.reacts .emo span:first-child { margin-left: 0; }
.reacts .right { margin-left: auto; }
.post-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.post-acts button, .post-acts a { display: flex; flex: 1; align-items: center; justify-content: center; gap: 7px; padding: 7px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font-size: 14px; font-weight: 550; }
.post-acts button:hover, .post-acts a:hover { background: var(--well); text-decoration: none; }
.post-acts .is-on { color: var(--hue); }
.post-acts [data-drop-branch] { white-space: nowrap; }

/* comments: the conversation with this session, and other agents chiming in */
.comments { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; margin-bottom: 10px; }
.more-c { color: var(--ink-2); font-size: 14px; font-weight: 550; }
button.more-c { border: 0; background: none; padding: 0; text-align: left; }
button.more-c:hover { text-decoration: underline; }
.cmt { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.cmt > div { max-width: 88%; }
.cmt-bub { width: fit-content; max-width: 100%; min-width: 0; padding: 8px 12px; border-radius: 16px; background: var(--well); font-size: 14px; line-height: 1.45; }
.cmt-bub > b { display: block; font-size: 13px; font-weight: 650; }
.cmt-bub .via { margin-left: 4px; color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.cmt-bub p { margin: 0; }
.cmt-meta { display: flex; gap: 12px; margin: 3px 0 0 12px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.cmt-agent .cmt-bub { background: var(--tint); }
/* What it said while it worked: quieter than its replies, and under what it said before without the avatar again. */
.cmt-say .cmt-bub { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.cmt-say.is-more { margin-top: -4px; }
.cmt-say.is-more > .av { visibility: hidden; }
/* Thinking: over the conversation, on its right, shows or hides those; Raw output, beside it, replies as written. */
.convo-opts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; margin-top: 6px; }
.convo-opts .switch { align-items: center; gap: 7px; margin: 0; padding: 2px 4px; border: 0; color: var(--ink-2); font-size: 13px; font-weight: 550; }
.convo-opts .switch small { display: inline; margin: 0 0 0 6px; font-size: 12px; font-weight: 500; }
.cmt > .cmt-wide { flex: 1; min-width: 0; max-width: 88%; }
/* Answered: a message like its others, in the agent's color; only the open one is yellow. */
.cmt-ask { width: auto !important; }
.cmt-ask .poll { margin-top: 8px; }
.cmt-ask .poll-opt { padding: 8px 12px; background: rgba(255, 255, 255, 0.5); color: var(--ink-2); }
.cmt-ask .poll-opt:not(.is-picked):hover { box-shadow: none; }
.cmt-ask .poll-opt.is-picked { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; color: var(--ink); }
.cmt-ask .poll-opt.is-picked .pick { color: var(--ink-2); }
.cmt-open .ask { margin-top: 0; }
.cmt-in { display: flex; align-items: center; gap: 8px; }
.cmt-in > span:not(.av) { flex: 1; padding: 8px 14px; border-radius: 999px; background: var(--well); color: var(--ink-3); font-size: 14px; }


/* ---------- right rail ---------- */

/* One column no wider than the rail: a card with a long name or path in it wraps or clips instead of running off the page. */
.rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rail-card { padding: 14px 14px 10px; }
.rail-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 10px; font-size: 15px; font-weight: 650; }
.rail-h a { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.rail-h a.rail-t { color: var(--ink); font-size: inherit; font-weight: inherit; }
/* your workspaces, on your profile: the sidebar's rows, each with its worktrees under it */
.ws-box .nav a:hover { background: var(--well); }
.ws-box .ws > a > .ico { width: 28px; height: 28px; background: var(--well); box-shadow: none; }
.ws-box .ws > a > .ico svg.i { width: 15px; height: 15px; }
.ws-box .ws-trees { padding-left: 22px; }
.need { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 10px; padding: 10px 2px; border-top: 1px solid var(--line); font-size: 13.5px; }
.need:first-of-type { border-top: 0; padding-top: 0; }
.need .av { grid-row: span 2; }
.need p { margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.need p.muted { font-size: 12.5px; }
.need .need-acts { display: flex; gap: 6px; margin-top: 6px; }
.need .need-acts time { margin-left: auto; align-self: center; font-size: 12.5px; white-space: nowrap; }

/* ---------- profile ---------- */

.profile-top { background: var(--card); box-shadow: 0 1px 0 var(--line); }
.profile-in { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.prof-head { display: flex; align-items: center; gap: 22px; padding: 28px 22px 20px; border-bottom: 1px solid var(--line); }
.av--hero .on { width: 20px; height: 20px; right: 3px; bottom: 3px; box-shadow: 0 0 0 3px var(--card); }
.av--hero .on--idle { box-shadow: inset 0 0 0 4px var(--green), 0 0 0 3px var(--card); }
/* your agent's avatar: a button with a menu to change it */
.av-pick { position: relative; flex: none; }
.av-btn { position: relative; display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.av-btn:hover .av { filter: brightness(0.96); }
.av-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 280px; padding: 6px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(18, 24, 33, 0.14); }
.av-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; }
.av-opt:hover { background: var(--well); }
.av-opt svg.i, .av-emoji > svg.i { color: var(--ink-3); }
.av-emoji { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 10px; }
.av-emoji input { flex: 1; width: 0; min-width: 0; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--card); font: inherit; font-size: 14.5px; }
.av-emoji input:focus { outline: none; border-color: var(--ink); }
.prof-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.prof-name h1 { margin: 0; font-size: 34px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.prof-name p { margin: 4px 0 8px; color: var(--ink-2); font-size: 15.5px; }
.prof-name .kind-ver { font-variant-numeric: tabular-nums; color: var(--ink-3, var(--ink-2)); }
.prof-acts { display: flex; gap: 8px; }
.prof-now { display: flex; flex-wrap: wrap; gap: 6px; }
.prof-now .chip { padding: 3px 10px; font-size: 13px; }
.tabs { display: flex; gap: 2px; padding: 4px 6px; }
.tabs a { position: relative; padding: 14px 16px; border-radius: 10px; color: var(--ink-2); font-size: 15px; font-weight: 600; white-space: nowrap; }
.tabs a:hover { background: var(--well); text-decoration: none; }
.tabs a.is-on { color: var(--ink); }
.tabs a.is-on::after { content: ""; position: absolute; right: 12px; bottom: -4px; left: 12px; height: 3px; border-radius: 3px; background: var(--hue); }
.tabs .n { margin-left: 4px; color: var(--ink-3); font-weight: 500; }
.tabs .n.badge { display: inline-grid; margin-left: 6px; vertical-align: 1px; color: var(--ink); font-weight: 700; box-shadow: none; } /* routines waiting for your OK, on your profile's Routines */

.prof-body { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; padding: 16px 16px 60px; align-items: start; }
/* minmax(0, …): a long name (a workspace file's hash) truncates rather than widening the column under the posts */
.prof-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.box h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.facts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.facts li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); }
.facts li svg.i { margin-top: 1px; color: var(--ink-3); }
.facts li > span { min-width: 0; overflow-wrap: anywhere; }
.facts b { color: var(--ink); font-weight: 600; }
.box { padding: 16px; }
.box h3 { display: flex; align-items: baseline; justify-content: space-between; }
.box h3 a { color: var(--ink-3); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.files-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 12px; overflow: hidden; }
.files-grid svg { display: block; width: 100%; height: auto; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; }
.filters h3 { flex: 1; margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.pill { padding: 6px 12px; border-radius: 999px; background: var(--well); color: var(--ink-2); font-size: 13.5px; font-weight: 550; }
.pill.is-on { background: var(--ink); color: #fff; }

/* the filter bar, on the Feed, Tasks and WIP: Status, Agent, Workspace and Page, stuck under the top bar */
/* stuck, a band of the page's background above it hides what scrolls under the gap */
.fbar-slot { position: sticky; top: 60px; z-index: 6; margin-top: -8px; padding-top: 8px; background: var(--bg); }
/* what came in above, that the feed doesn't show until you ask: hanging under the bar, over the cards */
.feed-new { position: absolute; top: calc(100% + 10px); left: 50%; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 4px 14px rgba(20, 28, 40, 0.18); transform: translateX(-50%); }
.feed-new:hover { background: #2a3442; }
.feed-new svg { width: 16px; height: 16px; }
.feed-more { justify-self: center; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--well); color: var(--ink-2); font-size: 13.5px; font-weight: 550; }
.feed-more:hover { color: var(--ink); }
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; padding: 7px 10px 7px 8px; border-radius: 14px; }
.fb-f { position: relative; display: inline-flex; align-items: center; min-width: 0; border-radius: 9px; }
.fb-f.is-set { background: var(--well); }
.fb-opt { display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 30px; padding: 0 5px 0 8px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 550; white-space: nowrap; }
.fb-opt:hover, .fb-opt[aria-expanded="true"] { background: var(--well); color: var(--ink); }
.fb-f.is-set .fb-opt { padding-right: 2px; color: var(--ink); }
.fb-f.is-set .fb-opt:hover, .fb-f.is-set .fb-opt[aria-expanded="true"] { background: #e8eaee; }
.fb-opt svg.i { width: 16px; height: 16px; }
.fb-opt svg.caret { width: 14px; height: 14px; margin-left: -2px; color: var(--ink-3); }
.fb-opt .av { width: 18px; height: 18px; font-size: 9px; }
.fb-opt .av + .av { margin-left: -9px; box-shadow: 0 0 0 1.5px var(--well); }
.fb-opt .pg-ico { width: 18px; height: 18px; font-size: 11px; }
.fb-v { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.fb-more { color: var(--ink-3); font-weight: 500; }
.fb-x { display: grid; flex: none; place-items: center; width: 22px; height: 22px; margin-right: 4px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-3); }
.fb-x:hover { background: rgba(18, 24, 33, 0.08); color: var(--ink); }
.fb-x svg.i { width: 13px; height: 13px; stroke-width: 2.2; }
.fb-clear { height: 30px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.fb-clear:hover { background: var(--well); color: var(--ink); }
.fb-count { margin-left: auto; padding-left: 8px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
/* how it shows (the feed's Cards / Compact / Pictures, Tasks' List / Board): a menu at the bar's end, after how many
   Tasks shows */
.fb-show { flex: none; margin-left: auto; }
.fbar .fb-count + .fb-show { margin-left: 6px; }
.fb-f.fb-show .fb-menu { right: 0; left: auto; width: 188px; }
/* a menu: a checklist, each with how many it would show here; Status picks one */
.fb-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 272px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(18, 24, 33, 0.14); }
.fb-menu:has(.fb-row--one) { width: 236px; }
.fb-find { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 0 10px; border-radius: 9px; background: var(--well); color: var(--ink-3); }
.fb-find:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.fb-find svg.i { width: 15px; height: 15px; }
.fb-find input { flex: 1; min-width: 0; padding: 7px 0; border: 0; outline: none; background: none; font: inherit; font-size: 13.5px; color: var(--ink); }
@media (hover: none) { .fb-find input { font-size: 16px; } } /* under 16px, a phone zooms in on it as the menu opens */
.fb-list { display: grid; gap: 1px; max-height: min(340px, 60vh); overflow-y: auto; }
.fb-row { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; padding: 6px 8px; border: 0; border-radius: 9px; background: none; color: var(--ink); font-size: 14px; font-weight: 500; text-align: left; }
.fb-row:hover { background: var(--well); }
.fb-row--one.is-on { background: var(--well); font-weight: 600; }
.fb-row.is-zero .fb-nm { color: var(--ink-3); }
.fb-row .av { width: 22px; height: 22px; font-size: 10.5px; }
.fb-row .pg-ico { width: 22px; height: 22px; font-size: 12px; }
.fb-row > svg.i { width: 18px; height: 18px; color: var(--ink-3); }
.fb-tick { position: relative; display: grid; flex: none; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--line-2); border-radius: 5px; color: #fff; }
/* The box is its own target (the name picks just that one), so it takes the row's edge and some of the gap too. */
.fb-tick::before { content: ""; position: absolute; inset: -8px -5px -8px -9px; }
.fb-tick:hover { border-color: var(--ink-2); background: #fff; }
.fb-tick svg.i { width: 11px; height: 11px; stroke-width: 3; }
.fb-row.is-on .fb-tick { border-color: var(--ink); background: var(--ink); }
.fb-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-n { color: var(--ink-3); font-size: 12.5px; }
.fb-on { display: grid; flex: none; place-items: center; width: 16px; color: var(--ink); }
.fb-on svg.i { width: 15px; height: 15px; stroke-width: 2.4; }
.fb-none { margin: 8px 10px; color: var(--ink-3); font-size: 13px; }
.fb-foot { display: flex; align-items: center; margin: 4px -6px -6px; padding: 7px 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.fb-foot button { padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.fb-foot button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* a status's mark: green for running, yellow for needs you, a ring for waiting */
.fb-mark { display: grid; flex: none; place-items: center; width: 18px; height: 18px; color: var(--ink-3); }
.fb-row .fb-mark { width: 22px; height: 22px; }
.fb-mark svg.i { width: 15px; height: 15px; }
.fb-dot { display: block; width: 8px; height: 8px; border-radius: 50%; }
.fb-dot--live { background: var(--green); }
.fb-dot--needs { background: var(--sun); box-shadow: 0 0 0 1.5px var(--sun-edge); }
.fb-dot--ring { box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* ---------- one session ---------- */

.sess-shell { display: grid; grid-template-columns: minmax(0, 720px) 340px; justify-content: center; gap: 20px; max-width: 1120px; margin: 0 auto; padding: 18px 16px 60px; align-items: start; }
.crumbs { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 4px; color: var(--ink-3); font-size: 13.5px; }
.crumbs a { color: var(--ink-2); font-weight: 550; }
/* the trail stays one line: its last step, a post's or routine's name, cut short */
.crumbs > * { flex: none; white-space: nowrap; }
.crumbs > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.steps { position: relative; margin-top: 10px; margin-bottom: 2px; padding: 0 0 0 18px; list-style: none; }
.steps::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 5px; width: 2px; border-radius: 2px; background: var(--line); }
.steps li { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 4px 0; color: var(--ink-2); font-size: 14px; }
.steps li::before { content: ""; position: absolute; top: 11px; left: -17px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); box-shadow: 0 0 0 3px var(--card); }
.steps li.say { color: var(--ink-3); font-style: italic; }
.steps li.say::before { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2), 0 0 0 3px var(--card); }
.steps li.err::before { background: var(--red); }
.steps li.err small { display: block; color: var(--red); font-size: 12.5px; font-style: normal; }
.steps li.run { color: var(--ink); font-weight: 600; }
.steps li.run::before { background: var(--hue); animation: pulse 1.4s ease-in-out infinite; }
.steps time { margin-left: auto; padding-left: 10px; color: var(--ink-3); font-size: 12.5px; font-weight: 400; white-space: nowrap; }
.steps .more { color: var(--ink-3); font-size: 13px; font-style: normal; }
.steps .more::before { display: none; }
.step-pics { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 6px; border: 0; border-radius: 6px; background: var(--well); color: var(--ink-2); font-size: 12px; font-weight: 600; vertical-align: 1px; cursor: pointer; }
.step-pics:hover { background: var(--line); color: var(--ink); }
.step-pics svg { width: 13px; height: 13px; }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.shot { display: block; min-width: 0; border-radius: 10px; background: var(--well); overflow: hidden; }
.shot:hover { text-decoration: none; }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--line); }
.shot:hover img { opacity: 0.92; }
.shot span { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px 7px; font-size: 12px; }
.shot b { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-2); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.shot time { flex: none; color: var(--ink-3); }
.sec-h { display: flex; align-items: center; gap: 8px; margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 650; }
.sec-h .muted { font-weight: 500; }
/* a WIP page's section folds from its heading; folded, its count stays beside it */
.sec-fold { display: flex; align-items: center; gap: 8px; min-width: 0; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; }
.sec-fold:hover { background: var(--well); }
.sec-fold svg.i { width: 14px; height: 14px; margin-left: -4px; stroke-width: 2.2; opacity: 0.7; transition: transform 0.15s; }
.sec-fold[aria-expanded="false"] svg.i { transform: rotate(-90deg); }
.sec-gist { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-fold[aria-expanded="true"] .sec-gist { display: none; }
@media (prefers-reduced-motion: reduce) { .sec-fold svg.i { transition: none; } }
.files-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.file { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--well); font-size: 13.5px; }
.file .ext { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--card); color: var(--ink-2); font-size: 10px; font-weight: 700; }
.file b { display: block; overflow: hidden; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.file small { color: var(--ink-3); font-size: 12px; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-acts { display: grid; gap: 8px; margin-top: 14px; }
.related a { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.related a:first-of-type { border-top: 0; }
.related a > span { min-width: 0; overflow-wrap: anywhere; }
.related a:hover { text-decoration: none; }
.related a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.related small { display: block; color: var(--ink-3); font-size: 12.5px; }

/* ---------- small screens: the side columns become drawers ---------- */

/* Below 1180px the left column is the menu, a drawer every page has, behind ☰; at any width, so is it on a page with
   no left column of its own (body.menu-drawer, set as the page renders). Below 860px the page's right column slides
   in from the right, behind ▥, and search is a button that opens its field over the top bar. */
.menu-btn, .search-btn, .panel-btn, .search-x, .drawer--left, .drawer-bar { display: none; }
.menu-btn, .drawer-x, .search-x { place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--ink); }
.menu-btn { margin-left: -6px; }
.menu-btn:hover, .search-x:hover { background: var(--well); }
.drawer-x { display: grid; }
.drawer-x:hover { background: #e3e6ea; }
.menu-btn svg.i, .drawer-x svg.i { width: 22px; height: 22px; }
.search-x { margin-right: -6px; color: var(--ink-2); }
body.signed-out .menu-btn { visibility: hidden; }

/* the page behind an open drawer, dimmed: tap it to close */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(18, 24, 33, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
body.drawer-left .scrim, body.drawer-right .scrim { opacity: 1; pointer-events: auto; }
body.drawer-left, body.drawer-right { overflow: hidden; }

/* a drawer's ✕ sits where the button that opened it was */
.drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; height: 60px; margin: 0 -12px 4px; padding: 0 12px; background: var(--bg); }
.drawer-head .drawer-x { margin-left: -6px; }
.drawer-bar { position: fixed; top: 0; right: 0; z-index: 41; align-items: center; justify-content: flex-end; width: min(380px, 92vw); height: 60px; padding: 0 12px; background: var(--bg); }

body.menu-drawer .menu-btn { display: grid; }
body.menu-drawer .drawer--left { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; display: block; width: min(304px, 86vw); padding: 0 12px 28px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 18px 48px rgba(18, 24, 33, 0.18); transform: translateX(-105%); visibility: hidden; transition: transform 0.22s ease, visibility 0s 0.22s; }
body.drawer-left .drawer--left { transform: none; visibility: visible; transition: transform 0.22s ease; }

@media (max-width: 1180px) {
  .shell { grid-template-columns: minmax(0, 1fr) 300px; }
  .shell > .col-side:first-child { display: none; }
  .search { width: 180px; }
}
@media (max-width: 860px) {
  .shell, .sess-shell, .prof-body { grid-template-columns: minmax(0, 1fr); padding-left: 12px; padding-right: 12px; }
  .top { padding: 0 12px; }
  .top-left { gap: 8px; }
  .top-right { gap: 6px; }
  .top .round { width: 38px; height: 38px; }
  .search, .top-right > .btn--dark { display: none; }
  .search-btn { display: grid; }
  .drawer-bar { display: flex; }
  /* the page's right column, as a drawer from the right. It stretches from top to bottom so it scrolls: as a column
     it's align-self: start, which a fixed box heeds too, and it would grow as tall as what's in it. */
  .shell > .rail, .sess-shell > .rail { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; align-self: stretch; display: grid; align-content: start; gap: 14px; width: min(380px, 92vw); max-height: none; padding: 60px 12px 28px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 18px 48px rgba(18, 24, 33, 0.18); }
  .shell > .rail, .sess-shell > .rail, .drawer-bar { transform: translateX(105%); visibility: hidden; transition: transform 0.22s ease, visibility 0s 0.22s; }
  body.drawer-right .shell > .rail, body.drawer-right .sess-shell > .rail, body.drawer-right .drawer-bar { transform: none; visibility: visible; transition: transform 0.22s ease; }
  body:has(.shell > .rail, .sess-shell > .rail) .panel-btn { display: grid; }
  /* searching: the field takes the whole bar */
  body.searching .top { grid-template-columns: minmax(0, 1fr); }
  body.searching .top-right, body.searching .menu-btn, body.searching .top-left > .wordmark { display: none; }
  body.searching .search { display: flex; flex: 1; width: auto; }
  body.searching .search-x { display: grid; }
  body.searching .search-k { display: none; }
  .compose-acts a { flex-direction: column; gap: 3px; font-size: 12.5px; }
  .prof-head { flex-wrap: wrap; gap: 14px; padding: 20px 6px 16px; }
  .ag-head .prof-acts { flex-basis: 100%; flex-wrap: wrap; } /* an agent's buttons (Follow, or yours: lock, Hide, New thread) under its name, not squeezing it to a letter a line */
  .av--hero { width: 72px; height: 72px; font-size: 30px; }
  .tabs { overflow-x: auto; }
  .files-row { grid-template-columns: minmax(0, 1fr); }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 370px) {
  .wordmark { font-size: 19px; }
  .top-right { gap: 4px; }
  .top .round { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse, .steps li.run::before { animation: none; }
  .scrim, .drawer--left, .drawer-bar, .shell > .rail, .sess-shell > .rail { transition: none !important; }
}

/* ---------- v2: the working app ---------- */

.conn { color: var(--red); font-size: 13px; }
.toast { position: fixed; bottom: 22px; left: 50%; z-index: 50; max-width: min(560px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(18, 24, 33, 0.25); transform: translateX(-50%); }
.posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.prof-col > div:empty, .posts > div:empty, .rail > div:empty { display: none; }
a.av:hover, .post-head a:hover { text-decoration: none; }
.post-head a b:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-title a { color: inherit; }
.post-title--big { font-size: 24px; }
.post-text.md { margin-top: 6px; }
.post-text.err { color: var(--red); }
.shell-msg { max-width: 560px; margin: 80px auto; text-align: center; color: var(--ink-2); }
.empty-card { padding: 22px 24px; color: var(--ink-2); }
.empty-card h2 { margin: 0 0 6px; color: var(--ink); font-size: 20px; }
.empty-card p { margin: 0 0 10px; }
.empty-card p:last-child { margin-bottom: 0; }
.empty-card a { color: var(--ink); font-weight: 550; }
.icon-btn { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--ink-3); }
.icon-btn:hover { background: var(--well); color: var(--ink); }
.rail-h .n { margin-left: 6px; color: var(--ink-3); font-weight: 500; }
.rail-empty { margin: 0 2px 4px; font-size: 14px; }
.need p a b { font-weight: 650; }

/* composer */
/* the box you write in holds its buttons on its right edge; what you write stops short of them */
.text-box { display: flex; flex: 1; align-items: flex-end; gap: 2px; min-width: 0; padding-right: 4px; border-radius: 22px; background: var(--well); }
.text-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.text-box :is(textarea, ab-box) { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; line-height: 1.45; resize: none; }
.text-box .icon-btn:hover, .text-box .icon-btn.is-on { background: var(--line); }
.compose :is(textarea, ab-box) { min-height: 44px; padding: 11px 6px 11px 16px; font-size: 15px; }
.compose .text-box .icon-btn { margin: 4px 0; }
.compose-row .icon-btn:disabled { opacity: 0.4; pointer-events: none; }
.compose-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; container-type: inline-size; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.compose-bar > .btn { flex: none; height: 32px; margin-left: auto; padding: 0 16px; }
/* Starting…: the thread (or a reply) is on its way, and its button waits for it */
.compose-bar > .btn:disabled { opacity: 0.55; pointer-events: none; }
.cmt-form .icon-btn:disabled { opacity: 0.4; pointer-events: none; }
.compose-opts { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; margin-left: -6px; }
.compose-path { flex: 1 1 180px; height: 32px; margin: 0 4px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; outline: none; font: 13px var(--mono); }
.compose-path:focus { border-color: var(--ink); }
/* an option of a new post: what it's set to, quiet on its default */
.opt { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 5px 0 7px; border-radius: 9px; color: var(--ink-2); font-size: 13px; font-weight: 550; white-space: nowrap; cursor: pointer; }
.opt:hover, .opt.is-set { background: var(--well); color: var(--ink); }
.opt:has(select:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.opt svg.i { width: 16px; height: 16px; }
.opt svg.caret { width: 14px; height: 14px; margin-left: -2px; color: var(--ink-3); }
.opt .at { color: var(--ink-3); font-weight: 450; }
.opt select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.opt--static { padding-right: 10px; cursor: default; }
.opt .opt-v { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.opt--static:hover { background: none; color: var(--ink-2); }
/* the composer's options open the filter bar's menu, picking one: a ✓ by the pick, dividers between groups */
.pk { position: relative; display: inline-flex; min-width: 0; }
button.opt { border: 0; background: none; font-family: inherit; text-align: left; }
.opt[aria-expanded="true"] { background: var(--well); color: var(--ink); }
.opt:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.fb-menu.pk-menu { width: max-content; min-width: 200px; max-width: min(340px, calc(100vw - 32px)); }
.pk-menu--up { top: auto; bottom: calc(100% + 6px); }
.pk-menu--fixed { position: fixed; } /* in a column that scrolls on its own: over the window, not cut to the column */
.pk-menu [hidden] { display: none; }
.pk-div { margin: 4px 2px 0; padding: 8px 8px 3px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-weight: 600; }
/* A menu's "12 more: type to find one", under its rows' names, until you type. */
.pk-more { margin: 0; padding: 4px 8px 6px 39px; color: var(--ink-3); font-size: 12.5px; }
.pk-div:empty { padding: 0 0 3px; }
.pk-menu .fb-row:focus-visible { outline: none; background: var(--well); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fb-row.is-off { cursor: default; }
.fb-row.is-off:hover { background: none; }
.fb-row.is-off .fb-nm, .fb-row.is-off > :first-child { opacity: 0.5; }
/* The composer's options on one line, "Feed, Claude, agentbook, New worktree, Opus, extra high", each a word beside
   its icon that opens its own menu, what you changed in bold. A long name is cut short with "…". When they don't fit
   beside Start thread they wrap onto a second line, the folder with its branch and the model with its effort; where
   the composer's narrow, as on a phone, they take its whole width and Start thread goes under them. A page's or a
   branch's name is cut shorter only when it doesn't fit on a line of its own. */
.launch-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.launch-opts > *, .opt-pair > * { flex: none; }
.opt-pair { display: flex; gap: 2px; min-width: 0; }
.launch-opts .opt { flex: none; gap: 5px; padding: 0 6px; font-weight: 500; }
.launch-opts :is(.opt-pair, .pk:has([data-launch-branch], [data-launch-page])), .launch-opts .pk:has([data-launch-branch], [data-launch-page]) .opt { flex: 0 1 auto; min-width: 0; }
.launch-opts .opt.is-set:not(:hover):not([aria-expanded="true"]) { background: none; }
.launch-opts .opt.is-set .opt-v { color: var(--ink); font-weight: 650; }
.launch-opts .opt svg.i { flex: none; width: 15px; height: 15px; color: var(--ink-3); }
.launch-opts .opt .av { flex: none; }
.launch-opts .opt .pg-ico { width: 18px; height: 18px; font-size: 11px; }
.launch-opts .opt-v { min-width: 0; max-width: 160px; }
.launch-opts .pk:has([data-launch-branch]) .opt-v { max-width: none; }
@container (max-width: 400px) { .compose-opts { flex-basis: 100%; } }
.model-pick { max-width: 100%; margin: -2px 0 0 -4px; padding: 1px 2px; border: 1px solid transparent; border-radius: 6px; background: none; font: inherit; color: inherit; cursor: pointer; }
.model-pick:hover, .model-pick:focus { border-color: var(--line-2); background: var(--card); outline: none; }
.model-next { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }

/* questions, inline on their post */
.ask { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sun-card); box-shadow: inset 0 0 0 1px var(--sun-edge); }
.ask .ask-flag { margin: 0 0 6px !important; }
.ask .ask-flag .muted { margin-left: auto; font-weight: 500; }
.ask-q { margin: 0; font-size: 15.5px; font-weight: 600; }
.ask-text { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask .cmd { margin-top: 8px; max-height: 160px; overflow: auto; }
.ask .poll-opt { background: rgba(255, 255, 255, 0.75); }
.ask .btn:not(.btn--dark) { background: rgba(255, 255, 255, 0.8); }
.ask-form { display: flex; gap: 8px; margin-top: 10px; }
.ask-form input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--sun-edge); border-radius: 10px; font: inherit; }
.ask-form input:focus { outline: none; border-color: var(--ink); }
.post--ask { background: var(--card); }
.is-sending { opacity: 0.55; pointer-events: none; }
.answer { margin: 6px 0 0; }

/* what's happening now */
.live-acts { display: flex; flex: none; gap: 6px; margin-left: auto; }
.live time + .live-acts { margin-left: 0; }
.live:has(.live-acts) { padding-top: 5px; padding-bottom: 5px; padding-right: 5px; }
.live b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-n, .live time { flex: none; white-space: nowrap; }
/* a start's step: how far its worktree got */
.live--step .meter { flex: 1; max-width: 220px; }
.live--step .meter span { background: color-mix(in srgb, var(--hue) 16%, white); }
.live--step .meter span b { background: color-mix(in srgb, var(--hue) 75%, black); }
.live--step .live-n { color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 640px) { .live--step .live-n { display: none; } }
/* a turn an API error cut off: why, when its machine picks it up again, and Retry */
.live--cut { background: var(--well); }
.live--cut > svg.i { flex: none; width: 16px; height: 16px; color: var(--red); }
.live--cut b { min-width: 0; }
/* on a phone, with Retry: why on a line of its own, then when and Retry under it */
@media (max-width: 640px) {
  .live--cut:has(.live-acts) { flex-wrap: wrap; row-gap: 2px; }
  .live--cut:has(.live-acts) b { flex: 1 1 calc(100% - 25px); }
  .live--cut:has(.live-acts) .live-n { margin-left: 25px; }
}
/* at the end of the thread, as the agent's turn in progress */
.cmt-now { align-items: center; }
.cmt-now > .live { flex: 1; min-width: 0; max-width: none; margin-top: 0; }
/* a click on it opens its latest steps, over it */
.live-open { display: flex; flex: 0 1 auto; align-items: center; gap: 9px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.live-open > svg.i, .wk-btn > svg.i { flex: none; width: 15px; height: 15px; color: var(--ink-3); transition: transform 0.15s; }
.live-open[aria-expanded="true"] > svg.i, .wk-btn[aria-expanded="true"] > svg.i { transform: rotate(180deg); }
.live-open:hover b { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.cmt-trail { margin-bottom: -6px; }
.cmt-trail > .av { visibility: hidden; }
.cmt-trail .steps { margin-top: 0; }

/* a thread's workers, in its conversation where it started them: a row each, opening to its own steps */
.cmt-workers.is-more { margin-top: -4px; }
.cmt-workers.is-more > .av { visibility: hidden; }
.wk { padding: 7px 4px 4px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-2); }
.wk-h { margin: 0 10px 2px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.wk ul { margin: 0; padding: 0; list-style: none; }
.wk-btn { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 6px 10px; border: 0; border-radius: 11px; background: none; color: inherit; font: inherit; text-align: left; }
button.wk-btn { cursor: pointer; }
button.wk-btn:hover { background: var(--well); }
.wk-btn > .rt-dot { margin-top: 6px; }
.wk-btn > svg.i { margin-top: 2px; }
.wk-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.wk-t b, .wk-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-t b { font-size: 14px; font-weight: 600; }
.wk-t small { color: var(--ink-3); font-size: 12.5px; }
.wk-row:not(.is-going) .wk-t b { color: var(--ink-2); font-weight: 500; }
.wk-row.is-err .wk-t small { color: var(--red); }
.wk-m { flex: none; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.wk-steps { margin: 0 12px 6px 27px; }
.wk-note { margin: 0 12px 8px 27px; font-size: 13px; }
/* on a phone, how it's going goes under what it's on, so its name has the line */
@media (max-width: 600px) {
  .wk-btn { flex-wrap: wrap; row-gap: 0; }
  .wk-m { order: 1; flex-basis: 100%; margin: 0 0 0 17px; }
  .wk-steps { margin-right: 4px; margin-left: 19px; }
}

/* results */
.updates { margin-top: 10px; margin-bottom: 0; padding: 0; list-style: none; }
.updates li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 14px; }
.updates svg.i { width: 15px; height: 15px; color: var(--green); transform: translateY(2px); }
.updates time { margin-left: auto; padding-left: 10px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.pr--link::before { background: var(--hue); }
.pr:hover { text-decoration: none; background: #eceef1; }
.pr-stats svg.i { width: 14px; height: 14px; transform: translateY(2px); margin-right: 4px; }
.att { margin-top: 12px; }
.att-title { margin: 0 0 4px; font-size: 13.5px; font-weight: 650; }
.att-note { padding: 12px 14px; border-radius: 12px; background: var(--well); }
.att-metric .big { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.att-metric .big small { margin-left: 4px; color: var(--ink-3); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.att-metric .sub { margin: 2px 0 6px; color: var(--ink-3); font-size: 13.5px; }
.att-metric .good { color: var(--green); font-weight: 600; }
.att-metric .bad { color: var(--red); font-weight: 600; }
.spark { display: block; width: 100%; height: 34px; }
/* a post's tasks, on its page: the ones linked to it and the to-dos it left you */
.sec-h-end { margin-left: auto; }
.sec-h .opt { height: 28px; margin: -4px -5px -4px 0; font-size: 13px; }
/* The to-dos a thread keeps for you (threadTodos): a checklist on its card and its page */
.att-todo { padding: 10px 14px 8px; border-radius: 12px; background: var(--well); }
.att-todo .att-title { display: flex; align-items: baseline; gap: 8px; }
.att-todo .att-title .n { color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.todo-list { margin: 4px 0 0; padding: 0; list-style: none; }
.todo-list li { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; font-size: 14px; }
.todo-list .tick-box { flex: none; margin-top: 1px; }
.todo-t { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.todo-t small { color: var(--ink-3); font-size: 12.5px; }
.todo-list .is-done .todo-t > span { color: var(--ink-3); text-decoration: line-through; }
.todo-list .icon-btn { flex: none; width: 26px; height: 26px; border-radius: 8px; opacity: 0; }
.todo-list .icon-btn svg.i { width: 14px; height: 14px; }
.todo-list li:hover .icon-btn, .todo-list .icon-btn:focus-visible { opacity: 1; }
@media (hover: none) { .todo-list .icon-btn { opacity: 0.7; } }
.todo-more { display: inline-block; margin: 2px 0 2px 34px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.post-tasks { margin: 6px 0 0; padding: 0; list-style: none; }
.post-tasks li { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 14px; }
.post-tasks .post-task-t { min-width: 0; color: inherit; overflow-wrap: anywhere; }
.post-tasks .is-done .post-task-t { color: var(--ink-3); text-decoration: line-through; }
.post-tasks .icon-btn { flex: none; width: 26px; height: 26px; margin-left: auto; border-radius: 8px; opacity: 0; }
.post-tasks .icon-btn svg.i { width: 14px; height: 14px; }
.post-tasks li:hover .icon-btn, .post-tasks .icon-btn:focus-visible { opacity: 1; }
@media (hover: none) { .post-tasks .icon-btn { opacity: 1; } }
.tick-box { display: grid; flex: none; place-items: center; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--line-2); border-radius: 5px; background: #fff; color: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.tick-box:hover { border-color: var(--ink); }
/* Someone else's task: only its owner ticks it off. */
.tick-box.is-fixed { cursor: default; }
.tick-box.is-fixed:hover { border-color: var(--line-2); }
.is-done .tick-box.is-fixed:hover { border-color: var(--green); }
.is-done .tick-box { border-color: var(--green); background: var(--green); }
.files-row { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.file { min-width: 0; text-decoration: none; }
.file:hover { text-decoration: none; background: #eceef1; }
.file > span { min-width: 0; }
.file img.ext { object-fit: cover; }
.files-col { display: grid; gap: 6px; }
.files-grid-real { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }

/* a file, opened over the page: pictures hug their size, text and PDFs get a page's width */
.viewer { width: fit-content; min-width: min(460px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 24px 64px rgba(18, 24, 33, 0.24); overflow: hidden; }
.viewer[open] { display: flex; flex-direction: column; }
.viewer:has(.viewer-text, iframe) { width: min(1000px, calc(100vw - 32px)); }
.viewer:has(iframe) { height: calc(100vh - 48px); }
.viewer::backdrop { background: rgba(18, 24, 33, 0.42); }
.viewer-h { display: flex; flex: none; align-items: center; gap: 2px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line); }
.viewer-t { flex: 1; min-width: 0; margin-right: 10px; }
.viewer-t b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.viewer-t small { display: block; color: var(--ink-3); font-size: 12.5px; }
.viewer-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--line); }
.viewer-body { display: grid; flex: 1; min-height: 0; place-items: center; overflow: auto; background: var(--well); }
.viewer-body img, .viewer-body video { display: block; max-width: 100%; max-height: calc(100vh - 112px); }
.viewer-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer-body audio { width: min(440px, calc(100vw - 80px)); margin: 48px 24px; }
.viewer-text { align-self: stretch; justify-self: stretch; min-width: 0; background: var(--card); }
.viewer-text > p { margin: 20px 22px; }
.viewer-text pre { margin: 0; padding: 18px 22px; font: 12.5px/1.6 var(--mono); tab-size: 2; white-space: pre; }
.viewer-text .md { max-width: 720px; margin: 0 auto; padding: 24px 28px 32px; }
.viewer-none { display: grid; justify-items: center; padding: 52px 32px; color: var(--ink-2); text-align: center; }
.viewer-none .ext { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); font-size: 13px; font-weight: 700; }
.viewer-none p { margin: 14px 0 16px; }
/* ...and a file an agent named: numbered lines, a folder's list, a page or its source */
.viewer-h .peek-back { margin-left: -12px; }
.viewer-t .peek-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-seg { display: inline-flex; flex: none; margin-right: 6px; padding: 2px; border-radius: 9px; background: var(--well); }
.peek-seg button { padding: 4px 11px; border: 0; border-radius: 7px; background: none; color: var(--ink-3); font-size: 13px; font-weight: 550; }
.peek-seg button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(18, 24, 33, 0.08); }
.viewer-text pre.peek-code { min-width: 100%; width: max-content; padding: 14px 0; }
.viewer-text pre.peek-code.is-prose { width: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.peek-code .ln { position: relative; display: block; min-height: 1.6em; padding: 0 22px 0 calc(var(--w) + 38px); }
.peek-code .ln::before { content: attr(data-n); position: absolute; left: 14px; width: var(--w); color: var(--ink-3); text-align: right; user-select: none; }
.peek-code .ln.is-hit { background: var(--sun-card); box-shadow: inset 3px 0 0 var(--sun); }
.peek-dir { margin: 0; padding: 10px; list-style: none; }
.peek-dir button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; }
.peek-dir button:hover { background: var(--well); }
.peek-dir svg.i { width: 17px; height: 17px; color: var(--ink-3); }
.viewer-text > p.err { color: var(--red); }

/* markdown, from agents */
.md { color: var(--ink); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
.md h3, .md h4, .md h5 { margin: 12px 0 6px; line-height: 1.3; }
.md h3 { font-size: 16.5px; }
.md h4 { font-size: 15px; }
.md h5 { font-size: 14px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
.md li { margin: 2px 0; }
.md li.md-task { margin-left: -20px; list-style: none; }
.md li > :is(p, pre, blockquote, .md-tbl) { margin: 6px 0 8px; }
.md li > :is(ul, ol) { margin: 2px 0 4px; }
.md blockquote { margin: 0 0 8px; padding: 1px 0 1px 12px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.md pre { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--well); overflow-x: auto; font: 12.5px/1.5 var(--mono); tab-size: 4; }
.md pre code { padding: 0; background: none; }
.md pre.is-wrap { white-space: pre-wrap; }
.md pre.is-wrap .ln { display: block; min-height: 1.5em; padding-left: calc(var(--in, 0ch) + 4ch); text-indent: calc(-1 * (var(--in, 0ch) + 4ch)); }
.md .md-tbl { margin: 0 0 8px; overflow-x: auto; }
.md .mini-tbl { overflow-wrap: break-word; }
.md .mini-tbl td { vertical-align: top; }
.md hr { margin: 12px 0; border: 0; border-top: 1px solid var(--line); }
.md img { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; }
.md code { padding: 1px 5px; border-radius: 5px; background: var(--well); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cmt-agent .md code { background: rgba(255, 255, 255, 0.7); }
.cmt-agent .md pre code { background: none; }
/* a code block: Copy in its corner, and ▶ for one you can run in its thread's folder, with what it printed under it */
.md-code { position: relative; margin: 0 0 8px; }
.md li > .md-code { margin: 6px 0 8px; }
.md .md-code > pre { margin: 0; padding-right: 44px; }
.md .md-code:has([data-code-run]) > pre { padding-right: 76px; }
/* on the block's own color, so a line that scrolls sideways under them goes out of sight */
.md-code-acts { position: absolute; top: 5px; right: 5px; display: flex; gap: 2px; border-radius: 8px; background: var(--well); box-shadow: -10px 0 8px -4px var(--well); }
.md-code-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ink-3); }
.md-code-btn svg.i { width: 16px; height: 16px; }
.md-code-btn:hover:not(:disabled) { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.md-code-btn:disabled { opacity: 0.45; cursor: default; }
.md-code-btn.is-done { color: var(--green); }
.md-code-btn[data-mode="run"] svg.i { fill: currentColor; stroke-width: 1.4; width: 14px; height: 14px; }
.md-code-btn[data-mode="stop"] { color: var(--red); }
.md-code-btn[data-mode="stop"] svg.i { fill: currentColor; }
.md-code-btn[data-mode="wait"] svg.i { fill: currentColor; animation: pulse 1.4s ease-in-out infinite; }
.md .md-code:has(.md-run) > pre { border-radius: 10px 10px 0 0; }
.md-run { border: 1px solid var(--well); border-top: 0; border-radius: 0 0 10px 10px; background: var(--card); }
.md-run-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; }
.md-run-h b { color: var(--ink); font-weight: 600; }
.md-run-h svg.i { width: 14px; height: 14px; }
.md-run-h time, .md-run-h span:not(.pulse) { color: var(--ink-3); }
.md-run-h .md-run-at { margin-left: auto; }
.md-run[data-state="done"] .md-run-h svg.i { color: var(--green); }
.md-run[data-state="failed"] .md-run-h svg.i { color: var(--red); }
.md-run[data-state="stopped"] .md-run-h svg.i { color: var(--ink-3); fill: currentColor; }
.md-run-h .pulse { --hue: var(--green); }
.md .md-run-out { max-height: 300px; margin: 0; padding: 8px 12px 10px; border-radius: 0 0 10px 10px; background: none; overflow: auto; font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.md-run-cut, .md-run-none { color: var(--ink-3); font-family: var(--font); font-style: italic; }
/* a file named in it, to open in the viewer */
.md-path { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.md-path:not(:has(code)) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.md-path code { box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--hue, var(--ink-3)) 50%, transparent); }
.md-path:hover code { background: color-mix(in srgb, var(--hue, var(--ink-3)) 12%, #fff); box-shadow: inset 0 -1.5px 0 var(--hue, var(--ink-3)); }
.md-path:hover { text-decoration-color: var(--hue, var(--ink-3)); }
/* a link an agent or you wrote: underlined in the agent's hue, so it reads as one */
.md-link:not(:has(code)) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--hue, var(--ink-3)) 45%, transparent); }
.md-link:not(:has(code)):hover { text-decoration-color: var(--hue, var(--ink-3)); }
.md-link:has(code), .md-link:has(code):hover { text-decoration: none; }
.md-link code { box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--hue, var(--ink-3)) 50%, transparent); }
.md-link:hover code { background: color-mix(in srgb, var(--hue, var(--ink-3)) 12%, #fff); box-shadow: inset 0 -1.5px 0 var(--hue, var(--ink-3)); }

/* the conversation */
.cmt-bub .plain { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt-bub .md { font-size: 14px; }
.cmt-bub .file { margin-top: 4px; background: #fff; }
.cmt-long:not(.is-open) .cmt-bub { max-height: 12em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.cmt-meta button { padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 600; }
.cmt-meta button:hover { color: var(--ink); }

/* how its turn went, on its reply (docs/read-less-plan.md): its verdict (ab_verdict), a chip and a line, then its checks, its text folded */
.cmt-shaped .cmt-bub { padding-bottom: 10px; }
.md .verdict { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 8px; }
.md .verdict:last-child { margin-bottom: 0; }
.md .verdict b { font-size: 15px; font-weight: 600; line-height: 1.38; }
.vchip { display: inline-flex; flex: none; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 700; transform: translateY(-1px); }
.vchip--done { background: #e4f2ea; color: var(--green); }
.vchip--found { background: #e3ecfb; color: #2456b8; }
.vchip--needs_you { background: var(--sun); color: var(--ink); }
.vchip--partly { background: #fdecd9; color: #a5520c; }
.vchip--blocked { background: #fbe9e6; color: var(--red); }
.vchip--nothing { background: rgba(255, 255, 255, 0.7); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.md-rest { margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--hue, var(--ink-3)) 14%, transparent); }
.md-fold { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600; }
.md-fold:hover { color: var(--hue, var(--ink)); }
.md-fold svg.i { width: 14px; height: 14px; }
.md-fold.is-open svg.i { transform: rotate(180deg); }
.rs-skim + .md-fold { margin-left: 16px; }
/* what could still be wrong (ab_checks): what failed and what it didn't check, a row each */
.md-checks { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; align-items: baseline; margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue, var(--ink-3)) 10%, var(--line)); font-size: 13.5px; line-height: 1.4; }
.md-checks:last-child { margin-bottom: 0; }
.chk-k { color: var(--ink-3); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chk-k--no { color: var(--red); }
.md-checks .chk-v { margin: 0; padding: 0; list-style: none; }
.md-checks .chk-v li { margin: 0; }
.md-checks .chk-v li + li { margin-top: 3px; }
.chk-v li b { font-weight: 600; }
.chk-v li small { color: var(--ink-2); font-size: 13px; }
@media (max-width: 520px) {
  .md-checks { display: block; }
  .chk-k { display: block; }
  .chk-v + .chk-k { margin-top: 6px; }
}
/* the replies it suggests (ab_suggest), under its latest reply: a click sends one */
.quick-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.quick { min-height: 30px; max-width: 100%; padding: 5px 12px; border: 0; border-radius: 15px; background: var(--card); color: var(--hue, var(--ink)); font: inherit; font-size: 13px; font-weight: 650; line-height: 1.35; text-align: left; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--hue, var(--ink)) 35%, white); }
.quick:hover:not(:disabled) { background: var(--tint, var(--well)); }
.quick--first { background: var(--hue, var(--ink)); color: #fff; box-shadow: none; }
.quick--first:hover:not(:disabled) { background: var(--hue, var(--ink)); filter: brightness(1.08); }
.quick:disabled { opacity: 0.45; }

/* what a turn made or found, on its reply (ab_draft, ab_cards, ab_slots, ab_path, ab_highlight; docs/read-less-plan.md) */
.cmt-shaped .cmt-bub { width: 100%; }
.cmt-shaped .cmt-bub > * + * { margin-top: 8px; }
.rs-gist { margin: 0 0 4px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.rs-gist li + li { margin-top: 2px; }
.md-rest.is-first { margin-top: 0; padding-top: 0; border-top: 0; }
mark.rs-mark { padding: 1px 2px; border-radius: 4px; background: #fff0a8; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.md.is-skim { color: color-mix(in srgb, var(--ink) 38%, transparent); }
.md.is-skim mark.rs-mark { color: var(--ink); }
.md.is-skim code { opacity: 0.5; }
.rs-skim { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.rs-ghost { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600; }
.rs-ghost:hover { color: var(--hue, var(--ink)); }
.rs-ghost svg.i { width: 13px; height: 13px; }
.rs-done { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 13px; font-weight: 650; }
.rs-done svg.i { width: 15px; height: 15px; stroke-width: 2.4; }
.rs-card, .rs-ex { border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue, var(--ink-3)) 12%, var(--line)); overflow: hidden; }
.rs-kind { display: flex; align-items: center; gap: 6px; margin: 0 !important; padding: 9px 14px 0; color: var(--ink-3); font-size: 12px; font-weight: 650; }
.rs-kind svg.i { width: 14px; height: 14px; }
.rs-kind .r { margin-left: auto; font-weight: 550; }
.rs-kind a { color: var(--ink-2); }
.rs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px 12px; }
.rs-acts .muted { margin-left: auto; font-size: 12px; }
.rs-mail-h { display: grid; grid-template-columns: 58px 1fr; gap: 3px 8px; margin: 0; padding: 8px 14px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.rs-mail-h dt { color: var(--ink-3); }
.rs-mail-h dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.rs-mail-h dd b { color: var(--ink); font-size: 15px; font-weight: 650; }
.rs-mail-b { padding: 10px 14px 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rs-mail-b.is-cut, .rs-pr-d.is-cut { max-height: 7.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.rs-pr-h { padding: 6px 14px 0; }
.rs-pr-h h4, .rs-inv h4 { margin: 0; font-size: 15.5px; font-weight: 700; }
.rs-pr-meta { margin-top: 6px; }
.rs-pr-d { margin: 10px 14px 0; padding: 10px 12px; border-radius: 10px; background: var(--well); font-size: 13.5px; }
.rs-inv { display: flex; gap: 12px; padding: 8px 14px 0; font-size: 13.5px; }
.rs-inv p { margin: 2px 0 0; }
.rs-day { display: grid; flex: none; place-items: center; width: 46px; height: 50px; border-radius: 10px; background: var(--well); line-height: 1.1; }
.rs-day small { color: var(--red); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.rs-day b { font-size: 20px; }
.rs-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.rs-opt { display: flex; flex-direction: column; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue, var(--ink-3)) 12%, var(--line)); overflow: hidden; transition: box-shadow 0.12s; }
.rs-pic { display: block; width: 100%; height: 110px; object-fit: cover; background: var(--well); }
.rs-opt-b { flex: 1; padding: 9px 12px 0; font-size: 13px; }
.rs-opt-b > b { font-size: 14.5px; font-weight: 700; }
.rs-opt-b > b a { color: inherit; }
.rs-opt-b p { margin: 2px 0 0; color: var(--ink-2); }
.rs-opt-b .facts { color: var(--ink-3); font-size: 12.5px; }
.rs-badge { display: inline-block; margin-top: 6px; padding: 2px 7px; border-radius: 6px; background: #e4f2ea; color: var(--green); font-size: 12px; font-weight: 650; }
.rs-opt .rs-acts { padding: 10px 12px 12px; }
.rs-opt.is-on { box-shadow: 0 0 0 2px var(--hue, var(--ink)); }
.rs-opt .btn svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.rs-opts-go { padding: 2px 2px 0; }
.rs-acts .btn:disabled { opacity: 0.45; cursor: default; }
.rs-price-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; }
.rs-price-top b { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.rs-price-top .over { color: #a5520c; font-size: 12.5px; font-weight: 650; }
.rs-price-top .under { color: var(--green); font-size: 12.5px; font-weight: 650; }
svg.rs-price { display: block; width: 100%; height: 64px; margin-top: 4px; }
svg.rs-price .line { fill: none; stroke: var(--hue, var(--ink-2)); stroke-width: 2; vector-effect: non-scaling-stroke; }
svg.rs-price .area { fill: color-mix(in srgb, var(--hue, var(--ink-3)) 10%, transparent); }
svg.rs-price .limit { stroke: var(--green); stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
svg.rs-price .low { fill: var(--green); }
.rs-price-x { display: flex; justify-content: space-between; margin: 2px 0 0 !important; color: var(--ink-3); font-size: 11px; }
.rs-week { display: grid; grid-template-columns: 64px repeat(var(--days), 1fr); gap: 3px; padding: 8px 14px 0; font-size: 11.5px; }
.rs-week .dh { padding-bottom: 2px; color: var(--ink-2); font-weight: 650; text-align: center; }
.rs-week .hh { padding-right: 4px; color: var(--ink-3); line-height: 22px; text-align: right; white-space: nowrap; }
.rs-slot { height: 22px; padding: 0; border: 0; border-radius: 5px; background: #e4f2ea; cursor: pointer; }
.rs-slot.is-none { background: repeating-linear-gradient(135deg, var(--well) 0 4px, #e9ecf0 4px 8px); cursor: default; }
.rs-slot.is-best { background: #cdebd9; }
.rs-slot:not(.is-none):not(:disabled):hover { box-shadow: inset 0 0 0 1.5px var(--green); }
.rs-slot.is-on { background: var(--hue, var(--ink)); box-shadow: none; }
.rs-slot:disabled { cursor: default; }
.rs-key { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 3px; background: #cdebd9; vertical-align: -1px; }
.rs-block { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue, var(--ink-3)) 10%, var(--line)); }
.rs-block-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px !important; color: var(--ink-3); font-size: 12px; font-weight: 650; }
.rs-block-h svg.i { width: 14px; height: 14px; }
.rs-spent { display: flex; height: 8px; margin-bottom: 4px; border-radius: 4px; overflow: hidden; background: var(--well); }
.rs-spent i { display: block; height: 100%; }
.rs-spent .k { background: var(--hue, var(--ink-2)); }
.rs-spent .d { background: repeating-linear-gradient(135deg, #c6ccd4 0 3px, #dfe3e8 3px 6px); }
.rs-spent-t { display: flex; gap: 14px; margin: 0 0 6px !important; color: var(--ink-3); font-size: 12px; }
.rs-spent-t b { color: var(--ink-2); }
.rs-path { margin: 0; padding: 0; list-style: none; }
.rs-st { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 6px; padding: 4px 0; font-size: 13.5px; }
.rs-st .rail { position: relative; align-self: stretch; }
.rs-st .rail::before { content: ""; position: absolute; top: -5px; bottom: -5px; left: 10px; width: 2px; background: color-mix(in srgb, var(--hue, var(--ink-3)) 35%, white); }
.rs-st:first-child .rail::before { top: 9px; }
.rs-st:last-child .rail::before { bottom: calc(100% - 9px); }
.rs-st .rail::after { content: ""; position: absolute; top: 4px; left: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--hue, var(--ink-2)); box-shadow: 0 0 0 2px #fff; }
.rs-st.is-dead .rail::after { display: none; }
.rs-st .twig { position: absolute; top: 8px; left: 11px; width: 13px; height: 2px; background: #c6ccd4; }
.rs-st .x { position: absolute; top: 1px; left: 19px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #eef0f3; color: var(--ink-3); font-size: 10px; font-style: normal; font-weight: 800; }
.rs-st.is-dead .t { padding-left: 12px; color: var(--ink-2); }
.rs-st .t small { display: block; color: var(--ink-3); font-size: 12.5px; }
.rs-st time { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.rs-ex .rs-clause { display: grid; grid-template-columns: 1fr 190px; gap: 12px; margin: 8px 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--well); }
.rs-ex .rs-clause:last-child { margin-bottom: 12px; }
.rs-clause q { display: block; color: var(--ink-2); font-family: Georgia, "Times New Roman", serif; font-size: 13.5px; line-height: 1.55; quotes: none; white-space: pre-wrap; }
.rs-clause .pg { display: block; margin-bottom: 4px; color: var(--ink-3); font: 600 11px var(--mono); }
.rs-clause .note { margin: 0; padding-left: 12px; border-left: 2px solid #f0d64a; font-size: 13px; line-height: 1.45; }
.rs-clause .note b { display: block; margin-bottom: 2px; color: #7a5b00; font-size: 12px; font-weight: 700; }
@media (max-width: 640px) { .rs-ex .rs-clause { grid-template-columns: 1fr; } }
/* how far a turn's change reaches, under its "Changed 3 files" line */
.chg-line .rs-ghost { margin-left: 6px; }
.updates li.rs-reach-li { display: block; padding: 4px 0 8px; }
.rs-reach-sum { margin: 0 0 8px !important; font-size: 13px; }
.rs-reach-sum .bad { color: var(--red); font-weight: 650; }
.rs-tree { display: flex; gap: 3px; height: 180px; }
.rs-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rs-col > span { overflow: hidden; color: var(--ink-3); font: 600 10.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.rs-tile { position: relative; min-height: 4px; padding: 2px 5px; border-radius: 5px; background: var(--well); color: var(--ink-3); font: 10.5px var(--mono); overflow: hidden; }
.rs-tile span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-tile.is-changed { background: color-mix(in srgb, var(--hue, #6a4fd1) calc(var(--k) * 100%), white); color: #fff; font-weight: 600; }
.rs-tile.is-changed.is-light { color: var(--ink); }
.rs-tile.is-imports { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--hue, #6a4fd1); color: var(--hue, #6a4fd1); }
.rs-tile.is-untested { box-shadow: inset 0 0 0 2.5px var(--red); }
.rs-tree-l { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0 !important; color: var(--ink-3); font-size: 12px; }
.rs-tree-l i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; vertical-align: -2px; }
.rs-tree-l .c { background: var(--hue, #6a4fd1); }
.rs-tree-l .a { box-shadow: inset 0 0 0 1.5px var(--hue, #6a4fd1); }
.rs-tree-l .u { box-shadow: inset 0 0 0 2.5px var(--red); }

/* a message of yours that wasn't delivered: why, and Try again / Delete */
.cmt-meta { flex-wrap: wrap; align-items: center; row-gap: 2px; }
.is-failed > .cmt-wide > .cmt-bub { box-shadow: inset 0 0 0 1px rgba(200, 64, 44, 0.35); }
.cmt-failed { display: inline-flex; align-items: center; gap: 4px; color: var(--red); }
.cmt-failed svg.i { width: 14px; height: 14px; }
.cmt-meta [data-msg-retry] { color: var(--ink); }
.cmt-why { flex-basis: 100%; margin: 0; color: var(--ink-2); font-weight: 500; overflow-wrap: anywhere; }
/* What you queued for when its turn ends (docs/queue-for-later-plan.md): under the live line, dashed until it goes. */
.q-tray { display: grid; gap: 6px; }
.q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 30px; margin-left: 36px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.q-head .muted { flex: 1 1 140px; min-width: 0; font-weight: 500; }
.q-head.is-held { color: #7a5b00; }
.q-n { display: inline-flex; flex: none; align-items: center; gap: 8px; white-space: nowrap; }
.q-n svg.i { width: 15px; height: 15px; }
.q-btns { display: flex; flex: none; gap: 6px; margin-left: auto; }
.cmt-queued .cmt-wide { display: flex; align-items: center; gap: 4px; }
.cmt-queued .cmt-bub { padding: 6.5px 10.5px; border: 1.5px dashed var(--line-2); background: transparent; color: var(--ink-2); cursor: text; }
.cmt-queued .cmt-bub:hover { border-color: var(--ink-3); }
.q-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: var(--well); color: var(--ink-2); font-size: 11.5px; font-weight: 650; vertical-align: 1px; }
.q-acts { display: flex; flex: none; opacity: 0; transition: opacity 0.12s; }
.cmt-queued:hover .q-acts, .cmt-queued:focus-within .q-acts { opacity: 1; }
.q-acts .icon-btn { width: 28px; height: 28px; border-radius: 8px; }
.q-acts .icon-btn svg.i { width: 15px; height: 15px; }
.q-more { margin-left: 36px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.q-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* While its turn runs, the reply box sends with one button, Enqueue, and a caret whose menu has Send now too.
   Holding ⌘ (Ctrl off a Mac) in the box, or over the button, slides Enqueue up and Send now in. */
.q-split { position: relative; display: flex; flex: none; margin: 4px 2px; }
.q-split svg.i { width: 15px; height: 15px; }
.q-main { position: relative; display: inline-grid; overflow: hidden; height: 30px; padding: 0 10px 0 12px; border-radius: 15px 0 0 15px; font-size: 13px; }
.q-face { display: inline-flex; grid-area: 1 / 1; align-items: center; justify-content: center; gap: 6px; transition: transform 0.16s ease, opacity 0.16s ease; }
.q-face--now { transform: translateY(80%); opacity: 0; }
.now-held .is-queueing:is(:focus-within, :hover) .q-face { transform: translateY(-80%); opacity: 0; }
.now-held .is-queueing:is(:focus-within, :hover) .q-face--now { transform: none; opacity: 1; }
.q-caret { height: 30px; padding: 0 8px 0 6px; border-radius: 0 15px 15px 0; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18); }
.q-caret svg.i { transition: transform 0.15s; }
.q-caret[aria-expanded="true"] svg.i { transform: rotate(180deg); }
.fb-menu.q-menu { top: auto; right: 0; bottom: calc(100% + 6px); left: auto; width: 264px; }
.q-row { gap: 10px; padding: 7px 9px; }
.q-row > svg.i { width: 16px; height: 16px; color: var(--ink-2); }
.q-row:focus-visible { outline: none; background: var(--well); box-shadow: inset 0 0 0 1.5px var(--ink); }
.q-row-t { flex: 1; min-width: 0; }
.q-row-t b { display: block; font-size: 13.5px; font-weight: 600; }
.q-row-t small { display: block; color: var(--ink-3); font-size: 12px; font-weight: 500; }
.q-row kbd { flex: none; padding: 0 5px; border-radius: 5px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font: 500 11.5px/1.6 var(--mono); }
/* Where there's little room beside the text (a page's threads bar, a phone), Enqueue is its clock and Send now its
   paper plane; the placeholder and the menu say the words. A phone has no hover, so a queued message is tapped to
   edit, and the box does the rest. */
.bar-reply .q-split .q-lbl { display: none; }
.bar-reply .q-main { padding: 0 6px 0 10px; }
@media (max-width: 600px) {
  .q-split .q-lbl { display: none; }
  .q-main { padding: 0 6px 0 10px; }
  .q-acts { display: none; }
  .q-btns .q-lbl { display: none; }
}
.cmt-in { align-items: flex-end; }
.cmt-form .cmt-in > .av--sm { margin-bottom: 5px; }
.cmt-in :is(textarea, ab-box) { flex: 1; min-height: 38px; padding: 8px 14px; border: 0; border-radius: 19px; outline: none; background: var(--well); font: inherit; font-size: 14px; line-height: 1.45; resize: none; }
.cmt-in :is(textarea, ab-box):focus { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.cmt-in .text-box { border-radius: 19px; }
.cmt-in .text-box :is(textarea, ab-box) { padding-right: 4px; box-shadow: none; background: none; }
.cmt-in .text-box .icon-btn { width: 30px; height: 30px; margin: 4px 0; border-radius: 8px; }
.ended { margin: 4px 0 8px; font-size: 13.5px; }
/* A thread whose folder is gone, and what puts it back (mockups/missing-folder.html); its box waits for that. */
.folder-gone { display: grid; gap: 8px; margin: 4px 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; }
.folder-gone-head { display: flex; align-items: flex-start; gap: 8px; }
.folder-gone-head > svg.i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
.folder-gone-head b { font-weight: 600; }
.folder-gone-head small { display: block; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.folder-gone .path { color: var(--ink-2); font: 500 12px var(--mono); word-break: break-all; }
.folder-gone code { font: 500 0.92em var(--mono); }
.folder-gone-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 24px; }
.folder-gone-acts .btn svg.i { width: 14px; height: 14px; }
.folder-gone-busy { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; font-weight: 550; }
.cmt-form.is-off .text-box { opacity: 0.6; }
.post-acts { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }

/* one session */
.post--full { padding-bottom: 10px; }
.sess-side { position: sticky; top: 78px; align-self: start; }
.steps .more button { padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 13px; }
.steps .more button:hover { color: var(--ink); }
.steps li > span { min-width: 0; overflow-wrap: anywhere; }
.related .ring { flex: none; }
.related .ring .av { inset: 6px; }
.side-acts .btn { width: 100%; }
.side-acts .btn[disabled] { opacity: 0.45; cursor: default; }

@media (max-width: 860px) {
  .toast { bottom: 12px; }
}

/* attachments waiting to go out with a reply or a post */
.cmt-form.is-drop .text-box, form[data-launch].is-drop .text-box { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--well); }
.is-sending { opacity: 0.55; pointer-events: none; }
.staged { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 36px; }
.compose .staged { margin: 10px 0 0 50px; }
.staged-file { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 5px 4px 5px 6px; border-radius: 10px; background: var(--well); font-size: 13px; }
.staged-file .ext { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--card); color: var(--ink-2); font-size: 9.5px; font-weight: 700; }
.staged-file > span:nth-child(2) { min-width: 0; }
.staged-file b { display: block; overflow: hidden; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.staged-file small { color: var(--ink-3); font-size: 11.5px; }
.staged-file button { flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); font-size: 16px; line-height: 1; }
.staged-file button:hover { background: var(--card); color: var(--ink); }
.msg-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 6px; }
.btn--ghost { background: none; color: var(--ink-2); }
.btn--ghost:hover { background: var(--well); color: var(--ink); }

/* skipping a question */
.ask-skip { margin-left: 4px; padding: 2px 8px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.7); color: var(--ink-2); font-size: 12.5px; font-weight: 550; }
.ask-skip:hover { background: #fff; color: var(--ink); }
.ask .ask-flag .muted + .ask-skip { margin-left: 8px; }

/* pins, and skills on a profile */
.post-meta .pinned { display: inline-flex; color: var(--ink-2); }
.post-meta .pinned svg.i { width: 15px; height: 15px; }
/* One column no wider than the card: a long path or link in a row (even past its clamp) wraps instead of widening it. */
.skills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.skills > li + li { border-top: 1px solid var(--line); }
.skill { display: flex; align-items: flex-start; gap: 12px; margin: 2px -8px; padding: 10px 12px; border-radius: 12px; color: inherit; }
.skill:hover { background: var(--well); text-decoration: none; }
.skill-go { display: grid; flex: none; place-items: center; align-self: center; color: var(--ink-3); transform: rotate(180deg); }
.skill-go svg.i { width: 16px; height: 16px; }
.skill:hover .skill-go { color: var(--ink); }
.skill-ico { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--tint); color: var(--hue); }
.skill p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; }
.skill p b { min-width: 0; overflow-wrap: anywhere; }
.skill small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.skill-used { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.skills-note { margin: -4px 0 8px; font-size: 13.5px; }
.mini-tbl th, .mini-tbl td { padding-right: 16px; }
.mini-tbl th:last-child, .mini-tbl td:last-child { padding-right: 0; }
.skill > div { flex: 1; min-width: 0; }

/* a skill's page */
.skill-head { display: flex; align-items: center; gap: 14px; }
.skill-head > div { min-width: 0; }
.skill-head .post-title { margin: 0; overflow-wrap: anywhere; }
.skill-head .post-meta { margin-top: 4px; }
.skill-ico--lg { width: 48px; height: 48px; border-radius: 14px; }
.skill-ico--lg svg.i { width: 24px; height: 24px; }
.skill-desc { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.skill-doc { margin-top: 10px; }
.skill-doc pre { max-height: 420px; overflow: auto; }

/* "New post" shows where to write */
.compose.is-flash { animation: compose-flash 1.4s ease-out; }
@keyframes compose-flash {
  0%, 30% { box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--hue, var(--ink)) 45%, transparent); }
  100% { box-shadow: var(--shadow), 0 0 0 3px transparent; }
}

/* every agent */
.page-h { margin: 0 4px 14px; font-size: 24px; font-weight: 750; letter-spacing: -0.02em; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.page-head .page-h { margin-bottom: 0; }
.person-page > .page-h { margin: 0 4px; }
.person-page .box > h2.page-h { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.here-card .rows li > .btn { flex: none; }
/* the People tab: a card per person, the agents they run as rows under it */
.people-head { flex-wrap: wrap; }
.people-head .page-sub { color: var(--ink-2); font-size: 13.5px; }
.people-head .row-acts { margin-left: auto; }
.people-list { display: grid; gap: 14px; }
.pc-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px 12px; color: inherit; }
.pc-head:hover { text-decoration: none; }
.pc-head > .who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pc-head .who b { font-size: 17px; font-weight: 650; }
.pc-head .who .chip { margin-left: 8px; vertical-align: 2px; }
.pc-head .who p { margin: 1px 0 0; color: var(--ink-2); font-size: 13.5px; }
.pc-bio { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pc-head > .now, .pc-row > .now { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-head > .now { justify-content: flex-end; }
.pc-row { display: grid; grid-template-columns: 28px minmax(170px, 0.9fr) minmax(160px, 0.8fr) minmax(0, 1.5fr) 72px; gap: 12px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--line); color: inherit; }
.pc-row:hover { background: var(--well); text-decoration: none; }
.pc-row:last-child { border-radius: 0 0 18px 18px; }
.pc-row .who { min-width: 0; } .pc-row .who b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-row .who small { color: var(--ink-2); font-size: 12.5px; }
.pc-row .last { min-width: 0; font-size: 14px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-row .ago { color: var(--ink-3); font-size: 12.5px; text-align: right; white-space: nowrap; }
.pc-all { display: block; padding: 9px 18px 11px; border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; color: var(--ink-3); font-size: 13px; font-weight: 550; }
.pc-all:hover { background: var(--well); color: var(--ink); text-decoration: none; }
.pc-none { margin: 0; padding: 10px 18px 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; }

/* a person's profile: an agent's, in ink, with their @handle and their line under their name */
.person-top { --hue: var(--ink); --tint: var(--well); }
.prof-name .handle { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 6px; color: var(--ink-3); font-size: 15px; }
.prof-name .handle > span + span::before { content: "·"; margin-right: 8px; color: var(--line-2); }
.prof-name .bio { max-width: 640px; margin: 0 0 10px; color: var(--ink); line-height: 1.45; white-space: pre-line; }
.bio-add { margin: 0 0 10px; padding: 0; border: 0; background: none; color: var(--ink-3); font-size: 14.5px; }
.bio-add:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.person-top .prof-acts { align-self: flex-start; padding-top: 6px; }
.tabs .tab-end { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.tabs .tab-end svg.i { width: 16px; height: 16px; }
.prof-edit { display: grid; gap: 8px; max-width: 560px; }
.prof-edit input, .prof-edit textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; }
.prof-edit input { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; }
.prof-edit textarea { min-height: 64px; font-size: 15px; resize: vertical; }
.prof-edit input:focus, .prof-edit textarea:focus { outline: none; border-color: var(--ink); }
.prof-edit .handle { margin: 0; }
.prof-edit small { color: var(--ink-3); font-size: 12.5px; }
/* their threads, agents or pages as one list of rows, each opening what it is */
.list-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.list-h h3 { flex: 1; margin: 0; }
.act-list { margin: 0; padding: 0; list-style: none; }
.act-list > li + li { border-top: 1px solid var(--line); }
.act-row { display: flex; align-items: center; gap: 12px; margin: 0 -8px; padding: 10px 8px; border-radius: 10px; color: inherit; }
.act-row:hover { background: var(--well); text-decoration: none; }
/* the feed, compact: those rows, in one card */
.feed-rows { padding: 6px 16px; }
.feed-rows > div + div { border-top: 1px solid var(--line); }
.feed-rows div.act-row:hover { background: none; }
.act-row small.err { color: var(--red); }
.row-pin svg.i { width: 13px; height: 13px; margin: 0 4px -1px 0; color: var(--ink-3); }
.act-row > span:not(.av):not(.chip):not(.pg-ico) { flex: 1; min-width: 0; }
.act-row b { display: block; overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.act-row small { display: block; overflow: hidden; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.act-row .chip { flex: none; }
.act-row time { flex: none; min-width: 30px; color: var(--ink-3); font-size: 12.5px; text-align: right; }
/* in a side column's card (threadRows), narrow: the title wraps, and no time (as on a phone), to leave it room */
.rail-card .act-row b { display: -webkit-box; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.rail-card .act-row time { display: none; }
.act-more { margin-top: 10px; }
.list-empty { margin: 6px 0 2px; color: var(--ink-3); font-size: 14px; }
/* a person's Agents tab: a row per agent, its latest thread under its name, what it has going on the right */
.ag-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "av who now" "av last now"; gap: 1px 12px; align-items: center; margin: 0 -8px; padding: 10px 8px; border-radius: 10px; color: inherit; }
.ag-row:hover { background: var(--well); text-decoration: none; }
.ag-row > .av { grid-area: av; }
.ag-row .who { grid-area: who; display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.ag-row .who b { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; }
.ag-row .who small { flex: 0 4 auto; min-width: 0; overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; }
.ag-row .last { grid-area: last; display: flex; gap: 8px; min-width: 0; color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
.ag-row .last > span { overflow: hidden; text-overflow: ellipsis; }
.ag-row .last time { flex: none; color: var(--ink-3); font-size: 12.5px; }
.ag-row .now { grid-area: now; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 300px; }
.box h3 a svg.i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
/* your settings: a menu that stays in view on the left, and a card for each */
.prof-col:has(.set-nav) { align-self: stretch; align-content: start; }
.prof-col:has(.set-nav) > div { position: sticky; top: 76px; }
.set-nav { padding: 8px; }
.set-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink-2); font-size: 14.5px; font-weight: 550; }
.set-nav a:hover, .set-nav a.is-on { background: var(--well); color: var(--ink); text-decoration: none; }
.set-nav svg.i { color: var(--ink-3); }
.set-nav .n { margin-left: auto; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.set { scroll-margin-top: 76px; }
.set > h3 + p.muted { margin: -4px 0 12px; font-size: 14px; }
.set > p.muted { font-size: 14px; }
.set .rows { margin-top: 0; }
.set .rows li:first-child { padding-top: 2px; border-top: 0; }
.set .rows li > .ico { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--well); color: var(--ink-2); }
.set .rows li > .btn { flex: none; }
.set-foot { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; }
.set-foot code { padding: 2px 7px; border-radius: 6px; background: var(--well); font-size: 12.5px; }
.set-foot + .row-acts { margin-top: 10px; }
.set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.set-prefs > h3 + .switch { margin-top: 0; padding-top: 2px; border-top: 0; }
.set-prefs .switch small { max-width: 560px; }
.set-row p { flex: 1; min-width: 220px; margin: 0; color: var(--ink-2); font-size: 14px; }
.set .stack { max-width: 420px; }
@media (max-width: 860px) {
  .prof-col:has(.set-nav) { display: none; }
}
@media (max-width: 640px) {
  .people-head .row-acts { width: 100%; margin-left: 0; }
  .pc-head { flex-wrap: wrap; } .pc-head > .now { width: 100%; justify-content: flex-start; padding-left: 62px; }
  .pc-row { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; } .pc-row .now, .pc-row .last { grid-column: 2; } .pc-row .ago { display: none; }
  .person-top .prof-acts { width: 100%; padding-top: 0; }
  .person-top .tabs a { padding: 12px 10px; }
  .act-row time { display: none; }
  .ag-row { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "av who" "av last" "av now"; } .ag-row > .av { align-self: start; margin-top: 2px; }
  .ag-row .now { justify-content: flex-start; max-width: none; margin-top: 4px; }
  .ag-row .who { flex-wrap: wrap; row-gap: 0; } .ag-row .who b, .ag-row .who small { flex: 0 1 auto; max-width: 100%; }
}


/* what a session changed: sizes on steps, the Changes list, and diffs */
.chg { display: inline-flex; gap: 6px; flex: none; font: 550 12.5px/1.2 var(--mono); white-space: nowrap; }
.chg-add { color: var(--green); font-weight: inherit; }
.chg-del { color: var(--red); font-weight: inherit; }
.chg-n { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.steps li.has-chg { flex-wrap: wrap; }
.step-chg { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.step-chg > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.step-chg:hover > span:first-child { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.step-diff { flex-basis: 100%; min-width: 0; margin: 4px 0 6px; font-style: normal; }

#changes { scroll-margin-top: 72px; }
.sec-h .seg { margin-left: auto; }
.sec-h { flex-wrap: wrap; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--well); }
.seg button { padding: 3px 10px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font-size: 12.5px; font-weight: 550; }
.seg button:hover { color: var(--ink); }
.seg button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(18, 24, 33, 0.08); }

.chg-files { margin: 6px 0 0; padding: 0; list-style: none; }
.chg-files > li + li { border-top: 1px solid var(--line); }
.chg-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 2px; border: 0; background: none; color: var(--ink); font-size: 14px; text-align: left; }
.chg-row:hover .chg-path b { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.chg-row > svg.i { width: 15px; height: 15px; color: var(--ink-3); transition: transform 0.15s; }
.chg-files > li.is-open > .chg-row > svg.i { transform: rotate(90deg); }
.chg-path { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chg-path .dir { color: var(--ink-3); }
.chg-path b { font-weight: 550; }
.chg-row .sha { color: var(--ink-2); font-size: 12.5px; }
.chg-body { padding: 0 0 10px; }
.chg-sub { margin: 12px 0 0; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.chg-note { margin: 2px 0 8px; color: var(--ink-3); font-size: 13px; }
.tag { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--well); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }

.dv { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.dv + .dv-file, .dv-wait + .dv-file { margin-top: 10px; }
.dv-t { min-width: 100%; border-collapse: collapse; font: 12px/1.6 var(--mono); tab-size: 4; }
.dv-t td { padding: 0 12px 0 6px; white-space: pre; vertical-align: top; }
.dv-t td.ln { width: 1%; min-width: 4ch; padding: 0 6px; color: var(--ink-3); text-align: right; user-select: none; }
.dv-t td.ln + td.ln { border-right: 1px solid var(--line); }
.dv-t .sign { display: inline-block; width: 1.6ch; color: var(--ink-3); user-select: none; }
.dv-add td { background: #ecf7ef; }
.dv-add td.ln { background: #dff1e4; color: #4f8a67; }
.dv-add .sign { color: var(--green); }
.dv-del td { background: #fcefed; }
.dv-del td.ln { background: #f8e1de; color: #a8645a; }
.dv-del .sign { color: var(--red); }
.dv-gap td { padding: 3px 8px; background: var(--well); color: var(--ink-3); font: 500 11.5px/1.4 var(--font); }
.dv-wait { margin: 4px 0; color: var(--ink-3); font-size: 13px; }
.dv-file { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 13.5px; }
.dv-file .dir { color: var(--ink-3); }
.dv-file b { font-weight: 550; }

.updates .chg-line svg.i { color: var(--ink-2); }
.updates .chg-line a:hover { text-decoration: underline; }

/* "Show earlier" under a post's images */
.chg-more { margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--ink-3); font-size: 13px; }
.chg-more:hover { color: var(--ink); }

/* a phone: the composer gives its avatar's room to what you write */
@media (max-width: 520px) {
  .compose-row > .av { display: none; }
  .compose .staged { margin-left: 0; }
}

/* signing in, and people's pages */
body.signed-out .search, body.signed-out .top-right { visibility: hidden; }
.auth { display: grid; min-height: calc(100vh - 140px); padding: 24px 16px; place-items: center; }
.auth-card { display: grid; gap: 14px; width: min(400px, 100%); padding: 28px 28px 24px; }
.auth-card h1 { margin: 0; font-size: 24px; letter-spacing: -0.015em; }
.auth-card p { margin: 0; }
.auth-card .btn--dark { padding: 10px 14px; }
.auth-alt { font-size: 13.5px; text-align: center; }
.auth-err { margin: 0; color: var(--red); font-size: 13.5px; }
.field { display: grid; gap: 5px; font-size: 13.5px; font-weight: 550; }
.field small { color: var(--ink-3); font-weight: 450; }
.field input, .field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); font: inherit; font-size: 14.5px; font-weight: 400; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; }
.me { display: grid; margin-left: 6px; place-items: center; text-decoration: none; }
.me .av { width: 34px; height: 34px; font-size: 14px; }
.person-page { display: grid; gap: 16px; width: min(720px, 100%); margin: 24px auto 60px; padding: 0 16px; grid-template-columns: minmax(0, 1fr); }
.stack { display: grid; gap: 12px; justify-items: start; }
.stack .field { width: 100%; }
.rows { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.rows li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.rows li > span:not(.ico):not(.av):not(.chip) { display: grid; flex: 1; min-width: 0; }
.rows li > .av, .rows li > .chip { flex: none; }
.rows li code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows small { color: var(--ink-3); font-size: 12.5px; }
.row-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.connect-card .stack { margin-top: 14px; }
.connect-card .field input { font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.openclaw-card p { margin: 8px 0 0; }
.openclaw-card .stack { margin-top: 12px; }
.openclaw-card .pills { display: flex; gap: 6px; margin-top: 14px; }
.openclaw-card .pill { border: 0; }
.openclaw-card .field input { font-family: var(--mono); font-size: 13.5px; }
.openclaw-card .small { margin-top: 10px; font-size: 12.5px; }
.openclaw-card .row-acts, .openclaw-card > .btn { margin-top: 12px; }

/* who can see what */
.post-who a.on { color: var(--ink-2); font-weight: 450; }
.rows li > .av { flex: none; }
.compose--empty { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 16px; }
.compose--empty p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.post-who > a.on { color: var(--ink-2); font-weight: 450; }

/* private or public: a chip with the setting in effect, a native menu on top */
.vis-pick { position: relative; gap: 6px; padding-right: 10px; color: var(--ink); cursor: pointer; }
.vis-pick svg.i { width: 15px; height: 15px; }
.vis-pick svg.caret { width: 14px; height: 14px; margin-left: -1px; color: var(--ink-3); }
.vis-pick[data-vis-corner]:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.vis-pick[data-vis-corner][aria-expanded="true"] { background: #e8eaee; }
.gnf-vis { display: contents; }
.prof-vis { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.privacy .vis-pick { display: flex; justify-content: flex-start; }
.privacy .vis-pick svg.caret { margin-left: auto; }
.privacy .privacy-note { display: block; margin: 10px 2px 0; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.privacy .privacy-note a, button.link { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.switch { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { position: relative; flex: none; width: 34px; height: 20px; margin-top: 1px; border-radius: 999px; background: var(--line-2); transition: background 0.15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(18, 24, 33, 0.2); transition: transform 0.15s; }
.switch input:checked + .track { background: var(--ink); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--ink); outline-offset: 2px; }
.switch input:disabled + .track { opacity: 0.5; }
.switch b { display: block; font-size: 14px; font-weight: 600; }
.switch small { display: block; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .track::after { transition: none; } }

/* the composer: pulling from the cloud, and who can see a new post */
.compose-row .icon-btn.is-on { color: var(--ink); }
/* who can see it, in the top-right corner of a card (visCorner): yours opens the levels (vis-pop), someone else's says */
.vis-corner { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink-3); cursor: pointer; }
.vis-corner svg.i { width: 16px; height: 16px; }
.vis-corner:hover, .vis-corner[aria-expanded="true"] { background: var(--well); color: var(--ink); }
.vis-corner:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.vis-corner.is-ro { cursor: default; }
.vis-corner.is-ro:hover { background: none; color: var(--ink-3); }
.vis-corner--sm { width: 22px; height: 22px; border-radius: 6px; }
.vis-corner--sm svg.i { width: 14px; height: 14px; }
.post-head > .vis-corner { margin: -3px -4px 0 auto; }
.post-head > .talk-with + .vis-corner { margin-left: -4px; }
.ls-t .vis-corner--sm { margin: -2px -4px; }
.pg-tile { position: relative; }
.vis-corner--float { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.vis-corner--float:hover, .vis-corner--float[aria-expanded="true"] { background: var(--card); }
.bcard > .vis-corner { position: absolute; top: 7px; right: 7px; }
.bcard:has(> .vis-corner) .tick-box { right: 36px; }
.bcard:has(> .vis-corner) .bcard-t { padding-right: 46px; }
.task > .vis-corner { grid-column: 4; grid-row: 1; margin-top: -2px; }
.task--line:has(> .vis-corner) .task-acts { right: 30px; }
.vis-corner--head { width: 38px; height: 38px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.vis-corner--head svg.i { width: 17px; height: 17px; }
.vis-corner--head:hover, .vis-corner--head[aria-expanded="true"] { background: var(--well); }
.vis-corner--head.is-ro:hover { background: var(--card); color: var(--ink-2); }
.wip-page:has(.vis-corner--card) { position: relative; }
.vis-corner--card { position: absolute; top: 12px; right: 12px; }
.vis-corner--card ~ .wip-ref { padding-right: 34px; }
/* in the composer's box, by its other buttons, as big as they are */
.vis-corner--box { width: 36px; height: 36px; margin: 4px 0; border-radius: 10px; }
.vis-corner--box:not(.is-private) { color: var(--ink); }
.fb-menu.vis-pop { position: fixed; z-index: 70; width: 290px; }
.vis-pop-h { margin: 4px 8px 6px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.vis-pop .fb-row { align-items: flex-start; padding: 8px; }
.vis-pop .fb-row > svg.i { margin-top: 1px; }
.vis-pop-t { display: grid; flex: 1; gap: 1px; min-width: 0; }
.vis-pop .fb-n { line-height: 1.35; white-space: normal; }
.vis-pop .fb-on { margin-top: 2px; }
.vis-pop-f { margin: 6px 8px 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.cloud-pull { margin: 10px 0 0 48px; padding: 12px; border-radius: 14px; background: var(--well); }
.cloud-pull-row { display: flex; gap: 8px; }
.cloud-pull input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); font: 13.5px var(--mono); }
.cloud-pull input:focus { outline: none; border-color: var(--ink); }
.cloud-pull p { margin: 8px 2px 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.cloud-pull b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 640px) { .cloud-pull { margin-left: 0; } }

/* ---------- workspaces ---------- */
.side-n { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.side-n::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* picking which agents the sidebar shows */
.nav-pick { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.nav-pick:hover { background: #e3e6ea; }
.nav-pick.is-off .av, .nav-pick.is-off .ag-name { opacity: 0.45; }
.nav-pick input { position: absolute; opacity: 0; pointer-events: none; }
.nav-pick .track { position: relative; flex: none; width: 30px; height: 18px; margin-left: auto; border-radius: 999px; background: var(--line-2); transition: background 0.15s; }
.nav-pick .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(18, 24, 33, 0.2); transition: transform 0.15s; }
.nav-pick input:checked + .track { background: var(--ink); }
.nav-pick input:checked + .track::after { transform: translateX(12px); }
.nav-pick input:focus-visible + .track { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-more { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink-3); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.nav-more:hover { background: #e3e6ea; color: var(--ink); }
.chip--sync .pulse { background: var(--ink-3); }
/* The chevron that folds a sidebar row's list: always there at the row's end. */
.row-fold { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); transform: translateY(-50%); }
.row-fold:hover { background: var(--well); color: var(--ink); }
.row-fold svg.i { width: 14px; height: 14px; stroke-width: 2.2; transition: transform 0.15s; }
.row-fold[aria-expanded="false"] svg.i { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .row-fold svg.i { transition: none; } }
.ws-rename { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 10px; }
.ws-rename input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--ink); border-radius: 9px; background: var(--card); font: inherit; font-size: 14.5px; font-weight: 500; }
.ws-rename input:focus { outline: none; }
.ws-rename .icon-btn { width: 32px; height: 32px; }
/* a workspace's page: a profile's, with its repo's or folder's icon for a face. Its name renames it: hovered, it
   shows a pencil; clicked, it's a box the same size, the name where it was. */
.ws-hero svg.i { width: 40px; height: 40px; color: var(--ink-2); stroke-width: 1.6; }
.ws-name { display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% + 18px); margin: 0 -9px; padding: 0 9px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: text; }
.ws-name:hover { background: var(--well); }
.ws-name svg.i { width: 20px; height: 20px; color: var(--ink-3); stroke-width: 2; opacity: 0; }
.ws-name:hover svg.i, .ws-name:focus-visible svg.i { opacity: 1; }
@media (hover: none) { .ws-name svg.i { opacity: 0.7; } }
.ws-rename--h { gap: 8px; max-width: 560px; margin-left: -9px; padding: 0; }
.ws-rename--h input { padding: 0 8px; font-size: 34px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
/* its Settings, over the page */
.modal { width: min(480px, calc(100vw - 32px)); margin-top: min(18vh, 160px); } /* its top stays put as it changes */
.modal-body { padding: 2px 20px 6px; }
.modal-sec { padding: 16px 0; }
.modal-sec + .modal-sec { border-top: 1px solid var(--line); }
.modal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.modal-row > span:first-child { flex: 1 1 200px; min-width: 0; }
.modal-row b { display: block; font-weight: 600; }
.modal-row small { display: block; color: var(--ink-3); font-size: 13px; }

/* ⌘K: Go to. A box to type a name in, over the page, and what it finds, one row each. */
.goto { width: min(620px, calc(100vw - 32px)); margin-top: min(14vh, 120px); }
.goto-q { display: flex; flex: none; align-items: center; gap: 10px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.goto-q input { flex: 1; min-width: 0; padding: 16px 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.goto-q input::placeholder { color: var(--ink-3); }
.goto kbd { padding: 0 5px; border-radius: 5px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); font: 500 11px/1.6 var(--mono); }
.goto-list { flex: 1; min-height: 0; max-height: min(432px, calc(100vh - 240px)); margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.goto-list:empty { display: none; }
.goto-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; padding: 6px 10px; border: 0; border-radius: 11px; background: none; color: var(--ink); font: inherit; text-align: left; }
.goto-row:hover { text-decoration: none; }
.goto-row.is-on { background: var(--well); }
.goto-ico { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--well); color: var(--ink-2); }
.goto-ico svg.i { width: 16px; height: 16px; }
.goto-row.is-on .goto-ico { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.goto-t { flex: 1; min-width: 0; }
.goto-t b, .goto-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goto-t b { font-size: 14.5px; font-weight: 550; }
.goto-t small { color: var(--ink-3); font-size: 12.5px; }
.goto-note { display: inline-flex; flex: none; align-items: center; font-size: 12.5px; }
.goto-note .chip { padding: 0 7px; font-size: 11.5px; }
.goto-kind { flex: none; padding: 0 7px; font-size: 11.5px; }
.goto-row.is-on .goto-kind { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.goto-find .goto-t b { font-weight: 500; }
.goto-none { padding: 18px 12px 14px; color: var(--ink-2); font-size: 14px; text-align: center; }
.goto-foot { display: flex; flex: none; gap: 16px; padding: 9px 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
@media (hover: none) { .goto-foot { display: none; } }
.modal-acts { display: flex; gap: 8px; }

.ws-repo { display: flex; gap: 8px; margin-top: 12px; }
.ws-repo input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); font: inherit; font-size: 14.5px; }
.ws-repo input:focus { outline: none; border-color: var(--ink); }
.ws-sub { margin: 18px 0 0; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.ws-sub--row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ws-repos small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-note { margin: 10px 0 0; font-size: 13px; }
.ws-note a { color: var(--ink); font-weight: 550; }
.ws-machine { color: var(--ink); background: var(--well); }
.browser { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--well); }
.browser-bar .icon-btn { width: 32px; height: 32px; }
.browser-bar .icon-btn:disabled { opacity: 0.35; cursor: default; }
.browser-bar .icon-btn:hover:not(:disabled) { background: var(--card); }
.browser-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.browser-note { margin: 0; padding: 10px 14px 0; color: var(--ink-3); font-size: 13px; }
.browser-note:last-child { padding-bottom: 12px; }
.browser-list { max-height: 360px; margin: 6px 0 0; padding: 0 14px 6px; overflow-y: auto; }
.browser-list li { padding: 6px 0; }
.browser-list li:first-child { border-top: 0; }
.browser-list li > span.chip { display: inline-flex; flex: none; }
.browser-dir { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 2px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.browser-dir svg.i { color: var(--ink-3); }
.browser-dir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-dir:hover span { text-decoration: underline; }
@media (max-width: 520px) {
  .browser-bar { flex-wrap: wrap; }
  .browser-path { order: 3; flex-basis: 100%; padding: 0 4px 4px; }
}

/* ---------- tasks: your to-do list (a card in the feed's right column, and #/tasks) ---------- */

.rail-acts { display: flex; align-items: center; gap: 6px; }
.rail-acts .icon-btn { width: 28px; height: 28px; margin: -6px -6px -6px 0; border-radius: 8px; }
.rail-acts svg.i { width: 16px; height: 16px; }

/* the box for a new task, from the +: a row on top of the list */
.task-add { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 2px; }
.task-add .tick-box { border-style: dashed; cursor: default; }
.task-add .tick-box:hover { border-color: var(--line-2); }
.task-add input { min-width: 0; padding: 0; border: 0; outline: none; background: none; font: inherit; font-size: 14px; line-height: 1.35; color: var(--ink); }
.task-add input::placeholder { color: var(--ink-3); }
.task-add + .task-list > .task:first-child { border-top: 1px solid var(--line); }
/* a group's find boxes (Add a task, Add a WIP) find yours as you type, in a list under the box as wide as it (placed
   by findPlace) */
.task-add .fb-menu.find-list { position: fixed; z-index: 60; }
.find-list[hidden] { display: none; }
.find-list .tf-h { margin: 0; padding: 4px 8px 5px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.find-list .fb-row { align-items: flex-start; }
.find-list .fb-row .wip-dot { margin-top: 2px; }
.find-list .fb-t { display: grid; flex: 1; gap: 1px; min-width: 0; }
.find-list .fb-nm { display: -webkit-box; white-space: normal; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.find-list .fb-row b { font-weight: 700; }
.find-list .fb-n { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wip-add .ico { display: grid; place-items: center; color: var(--ink-3); }
.wip-add .ico svg.i { width: 16px; height: 16px; }

/* a group's WIP, on its right: one a row, as in the sidebar; the × on one you put in it shows on hover */
.gwips { display: grid; gap: 1px; margin: 0 0 4px; padding: 0; list-style: none; }
.task-add + .gwips { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.gwips li { display: flex; align-items: center; gap: 2px; min-width: 0; }
.gwips :is(a, .gw-row) { display: grid; flex: 1; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 4px; border-radius: 9px; color: var(--ink); font-size: 13.5px; font-weight: 500; }
.gwips a:hover { background: var(--well); text-decoration: none; }
.gwips .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gwips .m { color: var(--ink-3); font: 500 11.5px var(--mono); white-space: nowrap; }
.gwips .is-gone .t { color: var(--ink-3); }
.gwips .is-gone .wip-dot { color: var(--ink-3); }
.gwips .icon-btn { flex: none; width: 26px; height: 26px; border-radius: 8px; color: var(--ink-3); visibility: hidden; }
.gwips .icon-btn svg.i { width: 14px; height: 14px; }
.gwips li:hover .icon-btn, .gwips .icon-btn:focus-visible { visibility: visible; }
@media (hover: none) { .gwips .icon-btn { visibility: visible; } }
/* and on a WIP's page, the groups it's in */
.gw-in { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; color: var(--ink); font-size: 14px; }
.gw-in:hover { text-decoration: none; }
.gw-in:hover b { text-decoration: underline; text-underline-offset: 3px; }
.gw-in small { display: block; color: var(--ink-3); font-size: 12.5px; }

/* where and who a task is for, under it while you add or edit it */
.task-for { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 4px; min-width: 0; margin: -5px 0 0 -6px; }
.task-edit .task-for { margin: 6px 0 2px -2px; }
.task-for .opt { max-width: 100%; height: 26px; padding: 0 4px 0 6px; border-radius: 7px; font-size: 12.5px; }
.task-for .opt svg.i { width: 14px; height: 14px; }
.task-for .opt svg.caret { width: 12px; height: 12px; }
.task-pick { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.task-pick .opt-v { overflow: hidden; text-overflow: ellipsis; }
.task-pick .av { width: 16px; height: 16px; font-size: 8px; }

.task-list { margin: 0; padding: 0; list-style: none; }
.task { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 3px 10px; align-items: start; padding: 8px 2px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.35; }
.task:first-child { border-top: 0; }
.task .tick-box { margin-top: 1px; }
.task-text { min-width: 0; overflow-wrap: anywhere; cursor: text; }
.task.is-done .task-text { cursor: default; }
.task.is-done .task-text { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.task-text .chip { padding: 0 6px; font-size: 11.5px; vertical-align: 1px; text-decoration: none; }
.task-text .chip--who { padding-left: 2px; }
/* how long ago it was added, or closed; its actions cover it on hover */
.task-at { grid-column: 3; grid-row: 1; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.task:has(.task-at) { grid-template-columns: 18px minmax(0, 1fr) auto; }
.task:hover .task-at { visibility: hidden; }
.chip--who .av { width: 14px; height: 14px; font-size: 7px; }
/* the … of a long task, which shows the rest of it */
.task-more { margin-left: 2px; padding: 0 5px; border: 0; border-radius: 6px; background: var(--well); color: var(--ink-2); font: inherit; font-size: 12px; line-height: 1.4; vertical-align: 1px; cursor: pointer; }
.task-more:hover { background: var(--line); color: var(--ink); }
.task-edit { min-width: 0; margin: -3px 0 -3px -4px; }
.task-edit :is(input, textarea) { display: block; width: 100%; padding: 2px 4px; border: 0; border-radius: 6px; outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); font: inherit; font-size: inherit; color: var(--ink); }
.task-edit .task-note-in { min-height: 24px; margin-top: 4px; resize: none; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
/* the title's outline is dark until you're in its body, and the body's while you are */
.task-edit:has(.task-note-in:focus) input, .task-edit .task-note-in:not(:focus) { box-shadow: inset 0 0 0 1px var(--line-2); }
/* its body, under its title: why or how */
.task-note { grid-column: 2; min-width: 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; cursor: text; }
.task-note a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.task-note a:hover { color: var(--ink); }
.task.is-done .task-note { display: none; }
/* the page it's on, in the page's color, and its workspace */
.task-text :is(.chip--page, .chip--ws) { max-width: 220px; vertical-align: -3px; }
.post-meta :is(.chip--page, .chip--ws, .chip--note) { max-width: 260px; }
:is(.task-text, .post-meta) :is(.chip--page, .chip--ws, .chip--note) span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A card's tasks, page and group (putChips): × over a chip's end while you point at it takes it out, and + puts it in
   one, from one menu (docs/card-add-to-plan.md). */
.post-meta .chip--set { --hue: #5b3aa6; --tint: #f2edfb; gap: 4px; max-width: 260px; background: var(--tint); color: var(--hue); font-weight: 600; }
.post-meta .chip--set svg.i { flex: none; width: 12px; height: 12px; }
.post-meta .chip--set span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.post-meta .chip--set:hover { text-decoration: none; filter: brightness(0.97); }
.put-in { position: relative; display: inline-flex; min-width: 0; }
.put-in--set { --hue: #5b3aa6; --tint: #f2edfb; }
.put-x { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 26px; padding: 0 0 0 8px; border: 0; border-radius: 0 7px 7px 0; background: linear-gradient(to right, transparent, var(--tint) 45%); color: var(--hue); opacity: 0; }
.put-x svg.i { width: 12px; height: 12px; stroke-width: 2.6; }
.put-in:hover .put-x, .put-x:focus-visible { opacity: 1; }
.put-x:hover { color: var(--ink); }
@media (hover: none) { .put-x { display: none; } }
.put-add { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 24px; padding: 0 6px; border: 1px dashed var(--line-2); border-radius: 7px; background: none; color: var(--ink-3); }
.put-add svg.i { width: 12px; height: 12px; stroke-width: 2.4; }
.put-add:hover, .put-add[aria-expanded="true"] { border-style: solid; background: var(--well); color: var(--ink); }
.fb-menu.put-menu { width: 300px; }
.put-menu .pk-div:first-of-type { margin-top: 0; padding-top: 4px; border-top: 0; }
.put-menu .wip-dot, .put-menu .fb-row > svg.i { width: 22px; }
/* what it's in: a tick that says × while you point at it, as a click takes it out */
.put-menu .fb-on svg.i + svg.i, .put-menu .fb-row.is-on:hover .fb-on svg.i:first-child { display: none; }
.put-menu .fb-row.is-on:hover .fb-on svg.i + svg.i { display: block; color: var(--ink-3); }
.task-on { grid-column: 2; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); font-size: 12.5px; }
.task-on a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.task-on b { font-weight: 600; }
.task-on .pulse { width: 6px; height: 6px; }
.task-ok { color: var(--green); font-weight: 600; }
.task-sun { padding: 0 5px; border-radius: 5px; background: var(--sun); color: var(--ink); font-weight: 600; }
.task-err { color: var(--red); font-weight: 600; }

/* the handle, Send and Delete show on hover */
.task-grip { position: absolute; top: 9px; left: -13px; display: grid; place-items: center; width: 12px; height: 18px; color: var(--ink-3); opacity: 0; cursor: grab; }
.task-grip svg.i { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.task-acts { position: absolute; top: 3px; right: 0; display: flex; padding-left: 18px; background: linear-gradient(to right, transparent, var(--card) 16px); opacity: 0; }
.task-acts .icon-btn { width: 28px; height: 28px; border-radius: 8px; }
.task-acts svg.i { width: 15px; height: 15px; }
.task:hover .task-grip, .task:hover .task-acts, .task-acts:focus-within { opacity: 1; }
.task.is-dragging { opacity: 0.4; }
.task.is-over-top { box-shadow: 0 -2px 0 var(--ink); }
.task.is-over-bottom { box-shadow: 0 2px 0 var(--ink); }
@media (hover: none) {
  .task { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .task-grip { display: none; }
  .task-acts { position: static; grid-column: 3; grid-row: 1; margin: -5px -4px -5px 0; padding: 0; background: none; opacity: 1; }
  .task-at { grid-row: 2; text-align: right; }
  .task:hover .task-at { visibility: visible; }
}

.tasks-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 2px 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.tasks-foot a, .tasks-foot button { padding: 0; border: 0; background: none; color: var(--ink-3); font-size: 13px; }
.tasks-foot a:hover, .tasks-foot button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.task-list--done { margin-top: 6px; }
/* a page's tasks: its checklist, from your Tasks list */
.wg--tasks .task-add { padding-top: 2px; }
.wg--tasks .task-add + .task-list > .task:first-child { border-top: 1px solid var(--line); }
.wg--tasks .tasks-foot { margin-top: 2px; }
.wg-tasks-empty { margin: 4px 2px 2px; font-size: 13.5px; }
.tasks .rail-empty { margin-top: 8px; }

/* #/tasks: one sorted list, two lines a task that line up from task to task. The title alone, its age at the end;
   under it who left it or where it came from, where it lives and the start of its body, cut at the edge, and how
   it's going with an agent at the end of that. */
.tasks--page { padding: 18px 20px 12px; }
.tasks--page .page-head { margin: 0 2px 12px; }
.tasks--page .page-head .page-h { margin: 0; font-size: 20px; }
.tasks--page .page-head .icon-btn { width: 32px; height: 32px; }
.tasks--page .page-head .icon-btn svg.i { width: 17px; height: 17px; }
.tasks--page .task-grip { top: 12px; left: -16px; }
.tasks-empty { margin: 12px 2px; font-size: 14px; }

.task--line { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 2px; }
.task--line .tick-box { grid-row: span 2; }
.task--line .task-text { font-size: 14.5px; font-weight: 550; line-height: 1.35; }
.task--line.is-done .task-text { font-weight: 500; }
.task--line .task-acts { top: 6px; }
.task--line .task-at { justify-self: end; }
.task-sub { grid-column: 2; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
.task-sub > * { flex: none; }
.task-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.task-sub a { color: inherit; }
.task-sub a:hover { color: var(--ink); text-decoration: none; }
.task-sub .av { width: 16px; height: 16px; font-size: 8px; }
.task-sub a.task-who { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.task-who b { font-weight: 600; }
.task-src, .task-for-who { display: inline-flex; align-items: center; gap: 5px; }
.task-where { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 220px; white-space: nowrap; }
.task-sub .task-where { flex: 0 1 auto; }
/* With a note to cut short, the note gives way first (the "2 of 4 merged" strip made room tight). */
.task-sub:has(.task-peek) .task-where { flex-shrink: 0; }
.task-where > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.task-where svg.i { width: 13px; height: 13px; }
.task-where .em { font-size: 12px; line-height: 1; }
.task-key { font-family: var(--mono); font-size: 11.5px; letter-spacing: -0.01em; }
.task-peek { flex: 1 1 auto !important; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.task-peek:hover { color: var(--ink-2); }
.task--line .task-st { grid-column: 3; grid-row: 2; display: flex; justify-content: flex-end; }
.task--line .task-st:empty { display: none; }
.task--line .task-note { grid-column: 2 / 4; margin-top: 4px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
/* an issue's state, the way its tool draws it */
.src-mark { display: inline-grid; flex: none; place-items: center; width: 15px; height: 15px; color: var(--ink-3); }
.src-mark svg { width: 14px; height: 14px; }
.src-mark svg.i { width: 15px; height: 15px; }
/* how it's going with an agent */
.st-link { display: inline-flex; min-width: 0; }
.st-link:hover { text-decoration: none; }
a.st-link:hover .st-pill { filter: brightness(0.97); }
.st-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 3px; border-radius: 11px; background: var(--tint, var(--well)); color: var(--hue, var(--ink-2)); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.st-pill .av { width: 16px; height: 16px; font-size: 8px; background: #fff; }
.st-pill .pulse { width: 6px; height: 6px; }
.st-pill--needs { background: var(--sun); color: var(--ink); }
.st-pill--done { padding-left: 7px; background: #e4f2ea; color: var(--green); }
.st-pill--done svg.i { width: 13px; height: 13px; stroke-width: 2.4; }
.st-pill--err { padding-left: 8px; background: #fbe9e5; color: var(--red); }
.tasks-foot button { display: inline-flex; align-items: center; gap: 4px; }
.tasks-foot button svg.i { width: 14px; height: 14px; transition: transform 0.15s; }
.tasks-foot button[aria-expanded="true"] svg.i { transform: rotate(180deg); }
@media (hover: none) {
  .task--line .task-at { display: none; }
}

/* the Tasks board: To do, With an agent and Done, in the right column's room too. On a phone it scrolls sideways,
   a column at a time. */
@media (min-width: 1181px) {
  .tasks-shell.is-board { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (min-width: 861px) {
  .tasks-shell.is-board > .rail { display: none; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .tasks-shell.is-board { grid-template-columns: minmax(0, 1fr); }
}
/* every column as tall as the longest, so a card can be dropped anywhere down it */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.board-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-height: 160px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.45); transition: background 0.12s, box-shadow 0.12s; }
.board-col.is-over { background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 1.5px var(--ink); }
.board-h { display: flex; align-items: center; gap: 7px; margin: 2px 4px; font-size: 14px; font-weight: 650; }
.board-h .n { color: var(--ink-3); font-weight: 500; }
.board-empty { margin: 2px 4px; color: var(--ink-3); font-size: 12.5px; }
.board-empty:empty { display: none; }
.board-empty .link-btn { color: var(--ink-2); }
.bcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px 9px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); cursor: grab; }
.bcard:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
.bcard.is-dragging { opacity: 0.4; }
.bcard.is-over-top { box-shadow: 0 -2px 0 var(--ink), var(--shadow); }
.bcard.is-over-bottom { box-shadow: 0 2px 0 var(--ink), var(--shadow); }
.bcard.is-needs { background: var(--sun-card); box-shadow: 0 0 0 1.5px var(--sun-edge), var(--shadow); }
.bcard.is-editing { cursor: default; }
.bcard.is-editing .task-edit { margin: 0; }
.bcard-t { display: -webkit-box; padding-right: 22px; overflow: hidden; font-size: 13.5px; font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; cursor: text; }
.bcard .tick-box { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; opacity: 0; }
.bcard:hover .tick-box, .bcard .tick-box:focus-visible, .bcard.is-done .tick-box { opacity: 1; }
.bcard-meta { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-3); font-size: 12.5px; }
.bcard-meta a { color: inherit; }
.bcard-meta a:hover { color: var(--ink); text-decoration: none; }
.bcard-meta .av { width: 18px; height: 18px; font-size: 9px; }
.bcard-meta .st-pill .av { width: 16px; height: 16px; font-size: 8px; }
.bcard-meta .task-where { flex: 0 1 auto; }
.bcard-meta .task-at { margin-left: auto; padding-left: 4px; }
.task-mark { display: inline-grid; flex: none; place-items: center; }
.bcard-ask { padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.7); font-size: 12.5px; line-height: 1.4; }
.bcard-ask p { margin: 0; overflow-wrap: anywhere; }
.bcard-ask b { font-weight: 650; }
.bcard-acts { display: flex; gap: 6px; margin-top: 6px; }
.bcard.is-done { background: rgba(255, 255, 255, 0.7); box-shadow: none; }
.bcard.is-done .bcard-t { color: var(--ink-3); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--line-2); }
@media (hover: none) {
  .bcard .tick-box { opacity: 1; }
}
@media (max-width: 860px) {
  .board { grid-template-columns: repeat(3, minmax(260px, 84%)); margin: 0 -12px; padding: 0 12px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; }
  .board-col { scroll-snap-align: start; }
}

/* the composer, when its post is for a task */
.for-task { display: flex; min-width: 0; margin: 8px 0 0 50px; }
.for-task .chip { gap: 6px; max-width: 100%; padding: 2px 3px 2px 8px; background: var(--sun-card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--sun-edge); }
.for-task .chip > span { overflow: hidden; text-overflow: ellipsis; }
.for-task svg.i { width: 13px; height: 13px; }
.for-task button { display: grid; flex: none; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--ink-3); }
.for-task button:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }

/* where a task came from: its issue's key, linking to it */
.task-text a.chip--src { font-family: var(--mono); font-size: 11px; font-weight: 550; letter-spacing: -0.01em; color: var(--ink-2); }
.task-text a.chip--src:hover { background: var(--line); color: var(--ink); text-decoration: none; }
.chip--err { background: #fbe9e5; color: var(--red); font-weight: 600; }
/* beside the Tasks page: its connectors, when each last synced */
.conn-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; border-top: 1px solid var(--line); font-size: 13.5px; }
.conn-line:first-of-type { border-top: 0; padding-top: 0; }
.conn-line .ico { display: grid; place-items: center; color: var(--ink-3); }
.conn-line .ico svg.i { width: 15px; height: 15px; }
.conn-line > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.35; }
.conn-line b { font-weight: 600; }
.conn-line small { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.conn-line .icon-btn { width: 28px; height: 28px; margin: -4px -4px -4px 0; border-radius: 8px; color: var(--ink-3); }
.conn-line .icon-btn:hover { color: var(--ink); }
.conn-line .icon-btn svg.i { width: 15px; height: 15px; }
.conn-line .icon-btn:disabled { opacity: 1; }
.conn-line .icon-btn:disabled svg.i { animation: pulse 1.2s ease-in-out infinite; }

/* the Connectors page */
.conn-head { display: flex; align-items: center; gap: 10px; }
.conn-head > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.conn-head b { font-size: 16px; font-weight: 650; }
.conn-head small { color: var(--ink-3); font-size: 12.5px; }
.conn-head .ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--well); color: var(--ink-2); }
.conn-card .auth-err { margin-top: 10px; }
.conn-facts { display: grid; gap: 4px; margin: 12px 0 14px; padding: 0 0 0 18px; color: var(--ink-2); font-size: 14px; }
/* A link in what a connector says (where GitHub's app is installed, installing it on more) looks like one. */
.conn-facts a, .conn-hint a { color: var(--ink); font-weight: 550; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
/* A note under a field of a connector's form, as close to it as the field's own label. */
.conn-hint { margin-top: -7px; color: var(--ink-3); font-size: 12.5px; }
/* Signing in with GitHub: the code to enter there, big enough to read across a room. */
.gh-signin { display: grid; gap: 8px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--well); }
.gh-signin p { margin: 0; }
.gh-code { display: flex; align-items: center; gap: 8px; }
.gh-code code { font-size: 22px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); }
.gh-own { margin-top: 12px; color: var(--ink-2); font-size: 14px; }
.gh-own summary { cursor: pointer; }
.gh-own .conn-form { margin-top: 10px; }
.conn-form { margin-top: 12px; }
.conn-states { margin: 0; padding: 0; border: 0; }
.conn-states legend { margin-bottom: 5px; padding: 0; }
.conn-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.conn-checks label { position: relative; flex: none; padding: 6px 12px; border-radius: 999px; background: var(--well); color: var(--ink-2); font-size: 13.5px; font-weight: 550; white-space: nowrap; cursor: pointer; }
.conn-checks label:hover { background: #e8eaee; }
.conn-checks label:has(input:checked) { background: var(--ink); color: #fff; }
.conn-checks label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.conn-checks input { position: absolute; opacity: 0; pointer-events: none; }
.conn-for { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; width: 100%; }
.field select { width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); font: inherit; font-size: 14.5px; font-weight: 400; color: var(--ink); }
.field select:focus { outline: none; border-color: var(--ink); }
.conn-form .switch { width: 100%; margin-top: 2px; }
.conn-form input[name="api_key"] { font-family: var(--mono); font-size: 13.5px; }

.toast-act { margin-left: 10px; padding: 0; border: 0; background: none; color: #fff; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- WIP: a branch's work that isn't on main yet ---------- */

/* in the sidebar, one list across workspaces under WIP */
.wip-nav { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.nav .wip-nav a { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 5px 10px 5px 8px; border: 0; border-radius: 10px; background: none; font-size: 13.5px; font-weight: 500; text-align: left; }
.nav .wip-nav a:hover { background: #e3e6ea; text-decoration: none; }
.nav .wip-nav a.is-on { background: var(--card); box-shadow: var(--shadow); }
.wip-nav .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wip-nav .m { color: var(--ink-3); font: 500 11.5px var(--mono); white-space: nowrap; }
/* a workspace's active worktrees, under it in the sidebar, and Show all */
.ws-trees { padding-left: 26px; }
.ws-trees .wip-nav { margin: 1px 0 4px; }
.nav .ws-trees .wip-nav a { padding: 4px 8px; font-size: 13px; }
.nav .ws-trees .wip-nav a.ws-all { display: block; padding: 3px 8px 3px 30px; color: var(--ink-3); font-size: 12.5px; font-weight: 450; }
.nav .ws-trees .wip-nav a.ws-all:hover { color: var(--ink); }
.wip-dot { display: grid; place-items: center; width: 14px; height: 14px; color: var(--green); }
.wip-dot svg.i { width: 13px; height: 13px; }
.dot { display: block; width: 8px; height: 8px; border-radius: 50%; }
.dot--live { background: var(--hue); animation: pulse 1.4s ease-in-out infinite; }
.dot--needs { background: var(--sun); box-shadow: 0 0 0 1.5px var(--sun-edge); }
.dot--dirty { background: var(--ink-2); }
.dot--open { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.dot--stale { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* where a WIP stands, in a word: yellow needs you, red is stuck, green can merge (the list's rows, its page) */
.wst { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--well); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.wst svg.i { width: 13px; height: 13px; stroke-width: 2.2; }
.wst--needs { background: var(--sun); color: var(--ink); }
.wst--stuck { background: #fbe9e6; color: var(--red); }
.wst--ready, .wst--pr-open { background: #e4f2ea; color: var(--green); }
.wst--review { background: #e9eef8; color: #2f5fb0; }
.wst--draft, .wst--branch, .wst--pr-draft { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.wst--merged, .wst--landed, .wst--pr-merged { background: #efe9fb; color: #6a3fc4; }
.wst--closed, .wst--pr-closed { color: var(--ink-3); }
/* who's on it: one that's working breathes, one that needs you wears yellow */
.av.is-working::after, .av.is-needs::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; }
.av.is-working::after { box-shadow: 0 0 0 1.5px var(--hue); animation: pulse 1.4s ease-in-out infinite; }
.av.is-needs::after { box-shadow: 0 0 0 2px var(--sun); }
@media (prefers-reduced-motion: reduce) { .av.is-working::after { animation: none; } }

/* its page: where it stands and who's on it, what's between it and landing, and its work in tabs */
.wip-page { padding: 18px 20px 4px; }
.wip-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-3); font-size: 13px; }
.wip-ref b { color: var(--ink); font-weight: 650; }
.wip-ref code { color: var(--ink-2); }
.wip-title { margin: 6px 0 0; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.wip-title a:hover { text-underline-offset: 4px; }
/* its branch, under its title: in which folder, its commits, labels; and Discard */
.wip-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; color: var(--ink-2); font-size: 13px; }
.wf { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.wf > svg.i { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.wf > span { min-width: 0; overflow-wrap: anywhere; }
.wf b { font-weight: 600; }
.wf small { margin-left: 6px; color: var(--ink-3); font-size: 12.5px; }
.wf .chip { margin-right: 4px; padding: 0 6px; font-size: 11.5px; }
.wf-copy { display: inline-grid; place-items: center; margin-left: 4px; padding: 2px; border: 0; border-radius: 5px; background: none; color: var(--ink-3); vertical-align: -3px; }
.wf-copy:hover { background: var(--well); color: var(--ink); }
.wf-copy svg.i { width: 13px; height: 13px; }
.wf-btn { display: inline-flex; align-items: center; gap: 4px; margin: -2px -8px; padding: 2px 8px; border: 0; border-radius: 7px; background: none; color: var(--ink-3); font-size: 12.5px; }
.wf-btn:hover:not([disabled]) { background: var(--well); color: var(--red); }
.wf-btn[disabled] { opacity: 0.5; cursor: default; }
.wf-btn svg.i { width: 13px; height: 13px; }
.wip-facts > .wip-sure { flex-basis: 100%; font-size: 13px; }
.gate { margin: 14px 0 0; padding: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); list-style: none; }
.gate > li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 14px; }
.gate > li + li { border-top: 1px solid var(--line); }
.gate > li.gate-h { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; font-size: 13.5px; }
.gate-h b { font-weight: 650; }
.gate-h code { font-size: 12px; }
.gate-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.gate-ic svg.i { width: 12px; height: 12px; stroke-width: 2.8; }
.gate-ic--fail { background: var(--red); color: #fff; }
.gate-ic--ok { background: var(--green); color: #fff; }
.gate-ic--warn { background: #f5e3b3; color: #8a6100; }
.gate-ic--todo { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.gate-ic--part { background: conic-gradient(var(--ink-3) 0 50%, var(--card) 0); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.gate p { min-width: 0; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.gate p > b { font-weight: 600; }
.gate small { display: block; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.gate small code { color: var(--ink-2); }
.gate .chg { font-size: 12px; }
.gate .btn { height: 30px; padding: 0 11px; font-size: 13px; }
.gate .btn svg.i { width: 14px; height: 14px; }
.gate .btn[disabled] { opacity: 0.45; cursor: default; }
.gate-btns { display: flex; gap: 6px; }
.wip-page .as-of { margin: 8px 2px 0; }
.wip-tabs { display: flex; gap: 18px; margin: 18px -20px 0; padding: 0 20px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.wip-tabs button { flex: none; margin-bottom: -1px; padding: 9px 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.wip-tabs button:hover { color: var(--ink); }
.wip-tabs button.is-on { border-color: var(--ink); color: var(--ink); }
.wip-tabs .n { margin-left: 5px; font-weight: 500; }
.wip-tabs .n.is-bad { color: var(--red); }
.wip-tab { padding: 4px 0 12px; }
.wip-tab-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 2px; }
.wip-tab .chg-files { margin-top: 4px; }
.wip-tab .steps, .wip-tab .threads, .wip-tab .checks { margin-top: 10px; }
.wip-tab .updates { margin-top: 10px; }
.wip-tab .pr-body { margin-top: 12px; }
.chg-talk { display: inline-flex; flex: none; align-items: center; gap: 3px; color: var(--ink-2); font-size: 12px; }
.chg-talk svg.i { width: 13px; height: 13px; }
.thread-h > b { color: var(--ink); }
.wip-sure { display: grid; gap: 8px; color: var(--ink-2); font-size: 13.5px; }
.wip-sure p { margin: 0; }
.wip-sure-btns { display: flex; gap: 6px; }
/* beside it: its threads and a box that starts another, the rest of its workspace's WIP */
/* the composer under a branch's or a pull request's threads: the feed's, inside their box rather than a card of its own */
.wip-threads > .compose { margin: 0 -14px; padding: 12px 14px 10px; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.wip-threads-h + .compose { margin-top: 8px; }
/* on a worktree's page, under what's between it and landing: its threads, in a box like that one */
.wip-threads--in { margin: 14px 0 0; padding: 0 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.wip-threads-h { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 10px 0 2px; font-size: 13.5px; font-weight: 400; }
.wip-threads-h b { font-weight: 650; }
.wip-threads--in > .act-list:last-child { padding-bottom: 2px; }
.kv dd small { display: block; color: var(--ink-3); font-size: 12.5px; white-space: normal; }
.wl-mini { margin: 0; padding: 0; list-style: none; }
.wl-mini a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 7px 2px; border-top: 1px solid var(--line); font-size: 13.5px; }
.wl-mini li:first-child a { border-top: 0; }
.wl-mini a:hover { text-decoration: none; }
.wl-mini a:hover b { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.wl-mini b { overflow: hidden; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.wl-mini .wst { height: 20px; padding: 0 6px; font-size: 11.5px; }
.wl-mini small { grid-column: 2; overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wip-story li > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.wip-story code { color: var(--ink-2); }
.wip-story .who { color: var(--ink); font-weight: 600; }
.wip-story li.main, .wip-story li.landed { color: var(--ink-3); }
.wip-story li.main::before { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2), 0 0 0 3px var(--card); }
.wip-story .lane { flex: none; padding: 0 6px; border-radius: 6px; background: var(--well); color: var(--ink-2); font: 500 11px/1.6 var(--mono); }
.tag--main { background: #fdf0d8; color: #7a5b00; }
.wip-none { margin: 10px 0 4px; font-size: 14px; }
.rail-note { margin: 10px 2px 2px; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.related .wip-dot { flex: none; margin: 0 8px 0 4px; }

/* every WIP, on one page: one list, what to do next first; and a workspace's, on its page */
/* the page has no right column (what needs you is under the bell), so its list takes that room too */
@media (min-width: 1181px) {
  .wips-shell { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .wips-shell { grid-template-columns: minmax(0, 1fr); }
}
.wips { container-type: inline-size; padding: 18px 0 4px; }
.wips .page-head { margin: 0 20px 12px; }
.wips .page-head .page-h { margin: 0; }
.wips .page-head .muted { margin-right: auto; font-size: 13px; }
.wips-view { flex: none; margin-left: auto; }
.wips-view button { display: inline-flex; align-items: center; gap: 5px; }
.wips-view svg.i { width: 14px; height: 14px; }
/* An agent's Worktrees tab: its Workspace menu at the head's end, before List / Timeline; both under the title when they don't fit beside it. */
.wips .page-head:has(> .pk) { flex-wrap: wrap; row-gap: 8px; }
.wips .page-head > .pk { margin-left: auto; }
.wips .page-head > .pk + .wips-view { margin-left: 0; }
@container (max-width: 560px) {
  .wips .page-head:has(> .pk) .page-h { flex-basis: 100%; }
  .wips .page-head > .pk { margin-left: -5px; }
  .wips .page-head > .pk + .wips-view { margin-left: auto; }
}
.wl-list { margin: 0; padding: 0; list-style: none; }
.wl-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; grid-template-areas: "st t r" ". m d"; gap: 3px 12px; align-items: center; padding: 11px 20px; border-top: 1px solid var(--line); color: inherit; }
.wl-row:hover { background: #fafbfc; text-decoration: none; }
.wl-row:hover .wl-t { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.wl-row > .wst { grid-area: st; justify-self: start; }
/* A row whose branch has nothing left: Delete worktree beside it, outside its link. */
.wl-li--drop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--line); }
.wl-li--drop:hover { background: #fafbfc; }
.wl-li--drop > .wl-row { border-top: 0; }
.wl-li--drop > .wl-row:hover { background: none; }
.wl-drop { gap: 6px; color: var(--ink-2); white-space: nowrap; }
.wl-side { display: flex; align-items: center; gap: 6px; margin-right: 20px; }
.wl-side .opt { gap: 4px; }
.wl-drop svg.i { width: 14px; height: 14px; }
.wl-t { grid-area: t; min-width: 0; overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wl-r { grid-area: r; display: flex; align-items: center; gap: 10px; justify-self: end; }
.wl-r time { min-width: 26px; color: var(--ink-3); font-size: 12.5px; text-align: right; white-space: nowrap; }
.wl-m { grid-area: m; display: flex; align-items: baseline; gap: 10px; min-width: 0; color: var(--ink-3); font-size: 13px; }
.wl-ws { flex: none; color: var(--ink-2); }
.wl-ws.is-loose { max-width: 180px; overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
/* On the Worktrees page: the WIP a pull request or a branch is in, after its workspace. */
.wl-set { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 4px; min-width: 0; max-width: 200px; color: #5b3aa6; font-weight: 550; }
.wl-set svg.i { flex: none; width: 13px; height: 13px; }
.wl-set span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-ref { flex: none; color: var(--ink-2); font-weight: 550; white-space: nowrap; }
.wl-br { max-width: 170px; overflow: hidden; font: 500 12px var(--mono); text-overflow: ellipsis; }
.wl-why { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-why.is-bad { color: var(--red); }
.wl-why.is-good { color: var(--green); }
.wl-size { grid-area: d; justify-self: end; }
.wl-size .chg { font-size: 12px; }
.wl-who { display: inline-flex; align-items: center; }
.wl-who .av + .av { margin-left: -5px; box-shadow: 0 0 0 2px var(--card); }
.wl-more { display: flex; align-items: center; gap: 6px; width: 100%; padding: 11px 20px 10px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink-3); font-size: 13px; text-align: left; }
.wl-more:hover { color: var(--ink); }
.wl-more svg.i { width: 14px; height: 14px; }
.wl-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 20px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.wl-note svg.i { width: 14px; height: 14px; }
.wl-note b { color: var(--ink-2); font-weight: 600; }
.wl-note.wl-err { color: var(--red); }
.wl-empty { margin: 4px 20px 14px; font-size: 14px; }
.wl-list + .wl-empty, .wl-note + .wl-empty { margin-top: 14px; }
.wips small.wl-err { color: var(--red); }
.wips .wl-group { margin: 0 20px; }
.wips .wl-group + .wl-group { margin-top: 18px; }
.wl-group { margin-top: 18px; }
.wl-group-h { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 4px; padding: 0 2px 7px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.wl-group-h .ico { display: grid; color: var(--ink-3); }
.wl-group-h .ico svg.i { width: 17px; height: 17px; }
.wl-group-h a { color: var(--ink); }
.wl-group-h small { overflow: hidden; color: var(--ink-3); font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.wl-n { flex: none; margin-left: auto; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
@container (max-width: 520px) {
  .wl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "st r" "t t" "m m"; padding: 11px 16px; }
  .wl-size { display: none; }
  .wl-t, .wl-why { white-space: normal; }
  .wl-m { flex-wrap: wrap; gap: 2px 10px; }
  .wips .page-head { margin: 0 16px 12px; }
  .wl-li--drop { grid-template-columns: minmax(0, 1fr); }
  .wl-drop { justify-self: start; margin: -4px 16px 11px; }
}
@media (max-width: 520px) {
  .wip-page { padding: 16px 16px 4px; }
  .wip-tabs { margin: 16px -16px 0; padding: 0 16px; }
  .wip-title { font-size: 21px; }
  .gate > li { grid-template-columns: 22px minmax(0, 1fr); }
  .gate > li > .btn, .gate > li > .gate-btns { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* WIPs of many (docs/wip-projects-plan.md): one you make, holding pull requests, branches and threads */
.wst--working { background: #e4f2ea; color: var(--green); }
.wst--empty, .wst--reading { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.wst--gone { color: var(--ink-3); }
/* its strip: a segment for each thing in it, in that thing's color */
.wp-bar { display: inline-flex; gap: 2px; vertical-align: middle; }
.wp-bar i { width: 14px; height: 6px; border-radius: 3px; background: var(--line-2); }
.wp-bar i.is-landed { background: #8a63d8; }
.wp-bar i.is-ready { background: var(--green); }
.wp-bar i.is-stuck { background: var(--red); }
.wp-bar i.is-review { background: #5f86c9; }
.wp-bar i.is-needs { background: var(--sun); }
.wp-bar i.is-draft, .wp-bar i.is-branch { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.wp-bar i.is-closed { background: none; box-shadow: inset 0 0 0 1.5px var(--line); opacity: 0.7; }
.wl-size .wp-bar + .wp-n { margin-left: 7px; }
.wl-size:has(.wp-bar) { display: flex; align-items: center; }
.wp-n { color: var(--ink-3); font-size: 12px; font-weight: 550; white-space: nowrap; }
.wl-ref .wp-many { display: inline-flex; align-items: center; gap: 4px; }
.wl-ref .wp-many svg.i { width: 13px; height: 13px; color: var(--ink-3); }
@container (max-width: 520px) {
  .wl-row:has(.wp-bar) { grid-template-areas: "st r" "t t" "m m" "d d"; }
  .wl-row:has(.wp-bar) .wl-size { display: flex; justify-self: start; margin-top: 4px; }
  .wl-ref .wp-many svg.i { display: none; }
}
/* its page */
.wp-title { display: flex; align-items: center; gap: 8px; }
.wp-title .wp-edit { width: 30px; height: 30px; border-radius: 8px; opacity: 0; }
.wp-title:hover .wp-edit, .wp-title .wp-edit:focus-visible { opacity: 1; }
@media (hover: none) { .wp-title .wp-edit { opacity: 1; } }
.wp-title .wp-edit svg.i { width: 15px; height: 15px; }
.wip-ref .wp-archive { margin-left: auto; }
.wp-note { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; }
.wp-rename { display: grid; gap: 8px; margin: 8px 0 0; }
.wp-rename input, .wp-rename textarea { width: 100%; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font: inherit; }
.wp-rename input { font-size: 20px; font-weight: 650; }
.wp-rename textarea { font-size: 14.5px; resize: vertical; }
.wp-rename :is(input, textarea):focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.wp-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; }
.wp-prog .wp-bar { flex: 1 1 220px; max-width: 360px; }
.wp-prog .wp-bar i { flex: 1; height: 8px; border-radius: 4px; }
.wp-prog b { font-size: 13.5px; font-weight: 650; }
.wp-prog span.muted { font-size: 13px; }
/* what's in it: a row each, its next step on the row */
.wp-parts { container-type: inline-size; margin: 14px 0 0; padding: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); list-style: none; }
.wp-parts > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 28px; align-items: center; gap: 4px 10px; padding: 9px 8px 9px 14px; border-top: 1px solid var(--line); }
.wp-parts > li:first-child { border-top: 0; }
.wp-parts > li.wp-parts-h { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 14px; }
.wp-parts > li.wp-parts-h .muted { font-size: 13px; text-align: right; }
.wp-part-a { display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "st t" ". m"; gap: 2px 12px; align-items: center; min-width: 0; color: inherit; }
a.wp-part-a:hover { text-decoration: none; }
a.wp-part-a:hover .wl-t { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.wp-part-a > .wst { grid-area: st; justify-self: start; }
.wp-part-a .wl-t { font-size: 14px; }
.wp-part-a .wl-m { font-size: 12.5px; }
/* a pull request's row: its title's link covers the row, its #number (.pr-gh) sits over it and goes to GitHub */
.wp-part-two { position: relative; }
.wp-part-go { color: inherit; }
.wp-part-go::after { content: ""; position: absolute; inset: 0; }
.wp-parts .wl-who { justify-self: end; }
.wp-parts .btn { gap: 6px; white-space: nowrap; }
.wp-parts .btn svg.i { width: 14px; height: 14px; }
.wp-parts .wp-x { width: 28px; height: 28px; border-radius: 8px; visibility: hidden; }
.wp-parts .wp-x svg.i { width: 14px; height: 14px; }
.wp-parts > li:hover .wp-x, .wp-parts .wp-x:focus-visible { visibility: visible; }
@media (hover: none) { .wp-parts .wp-x { visibility: visible; } }
.wp-parts > li.is-done .wl-t { color: var(--ink-2); font-weight: 550; }
.wp-parts > li.wp-add { display: flex; padding: 6px 8px; }
.wp-parts > li.wp-add:empty { display: none; }
.wp-parts .wp-via { flex: none; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.wp-parts > li > span:empty { display: none; }
.wp-parts > li > .wp-x { grid-column: 4; }
@container (max-width: 600px) {
  .wp-parts > li { grid-template-columns: minmax(0, 1fr) auto 28px; align-items: start; }
  .wp-parts > li > .wl-who { grid-row: 1; grid-column: 2; margin-top: 2px; }
  .wp-parts > li > .wp-x { grid-row: 1; grid-column: 3; }
  .wp-parts > li > .btn { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  .wp-part-a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "st" "t" "m"; }
  .wp-part-a .wl-t { white-space: normal; }
  .wp-part-a .wl-m { flex-wrap: wrap; gap: 2px 8px; }
  .wp-part-a .wl-why { white-space: normal; }
}
/* its landing order: numbered rows, what each waits for, and the order as you change it */
.wp-parts > li.wp-parts-h { flex-wrap: wrap; align-items: center; }
.wp-h-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.wp-h-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; white-space: nowrap; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 550; }
.wp-h-btn:hover { background: var(--well); color: var(--ink); }
.wp-h-btn svg.i { width: 14px; height: 14px; }
.wp-parts > li.has-ord { position: relative; padding-left: 42px; }
.wp-parts > li.has-ord > .wp-ord { position: absolute; top: 11px; left: 13px; }
.wp-ord { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--well); color: var(--ink-2); font-size: 11.5px; font-weight: 650; }
.wp-parts > li.is-done > .wp-ord { background: #efe9fb; color: #6a3fc4; }
.wp-wait { flex: none; color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.wp-parts > li.wp-parts-sub { display: block; padding: 7px 14px 5px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.wp-parts > li.wp-landing { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 14px; background: #f1f9f3; font-size: 13.5px; }
.wp-landing > svg.i { width: 15px; height: 15px; color: var(--green); }
.wp-landing > span { min-width: 0; color: var(--ink-2); }
.wp-landing > time { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.wp-parts > li.wp-ord-edit { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; }
.wp-ord-edit .wl-t { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wp-ord-edit > .wl-ref { font-size: 12.5px; }
.wp-ord-edit > .wst { flex: none; }
.wp-grip { display: grid; flex: none; place-items: center; width: 18px; height: 28px; color: var(--ink-3); cursor: grab; }
.wp-grip svg.i { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.wp-mv { display: inline-flex; flex: none; gap: 2px; }
.wp-mv .icon-btn { width: 30px; height: 30px; border-radius: 8px; }
.wp-mv .icon-btn svg.i { width: 15px; height: 15px; }
.wp-mv .icon-btn:disabled { opacity: 0.3; cursor: default; }
.wp-ord-edit.is-dragging { opacity: 0.45; }
.wp-ord-edit.is-over-top { box-shadow: inset 0 2px 0 var(--ink); }
.wp-ord-edit.is-over-bottom { box-shadow: inset 0 -2px 0 var(--ink); }
@media (hover: none) { .wp-grip { display: none; } }
@container (max-width: 600px) {
  .wp-ord-edit > .wst, .wp-ord-edit > .wl-ref { display: none; }
}
/* its Changes: each one's files under its title */
.wp-chg + .wp-chg { margin-top: 18px; }
.wp-chg-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 0; padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 14px; }
.wp-chg-h > :first-child { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; }
.wp-chg-h a:hover { text-decoration: none; }
.wp-chg-h a:hover b { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.wp-chg-h b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wp-chg-h .wst { flex: none; }
.wp-chg-h .wl-ref { font-size: 12.5px; }
.wp-chg-h > .muted { flex: none; font-size: 12.5px; }
.wp-chg .chg-files { margin-top: 0; }
a.chg-row:hover { text-decoration: none; }
.wp-chg-note { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; padding: 8px 11px; border-radius: 10px; background: #fdf0d8; color: #7a5b00; font-size: 13px; line-height: 1.4; }
.wp-chg-note svg.i { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.wip-story .lane.wp-lane { background: var(--well); color: var(--ink-2); }
.wip-story li.landed .lane.wp-lane { background: #efe9fb; color: #6a3fc4; }
.wp-hint { margin: 8px 2px 0; color: var(--ink-3); font-size: 12.5px; }
/* a WIP's threads, in its page's column under its name: Add a thread on the right of its head, the hint under the box */
.wp-threads .wip-threads-h { align-items: center; }
.wp-threads .wip-threads-h .rail-acts { margin-left: auto; }
.wp-threads .wip-threads-h .pk .opt { height: auto; padding: 0; background: none; color: var(--ink-2); font-size: 13px; font-weight: 550; }
.wp-threads > .wp-hint { margin: 6px 2px 12px; }
.rail-h .rail-acts { display: inline-flex; gap: 12px; }
.rail-h .rail-acts .pk .opt { height: auto; padding: 0; background: none; color: var(--ink-2); font-size: 13px; font-weight: 550; }
/* On a pull request's or a branch's page, the tasks it's on (taskCardOf) */
.tk-of-list { margin: 0 0 6px; padding: 0; list-style: none; }
.tk-of-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 4px; }
.tk-of-list .gw-in { min-width: 0; margin-bottom: 8px; }
.tk-of-list .gw-in b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-of-list .gw-in > span:not(.wp-ico) { min-width: 0; }
.tk-of-list .wp-sum { display: flex; grid-column: 1; margin: -2px 2px 10px 46px; }
.tk-of-list .wp-sum .wp-bar { flex: 1; }
.tk-of-list .wp-sum .wp-bar i { flex: 1; }
.tk-of-list .icon-btn { grid-row: 1; grid-column: 2; width: 26px; height: 26px; border-radius: 8px; visibility: hidden; }
.tk-of-list .icon-btn svg.i { width: 13px; height: 13px; }
.tk-of-list > li:hover .icon-btn, .tk-of-list .icon-btn:focus-visible { visibility: visible; }
@media (hover: none) { .tk-of-list .icon-btn { visibility: visible; } }
.tk-of .wp-ico { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--well); color: var(--ink-2); }
.tk-of .wp-ico svg.i { width: 18px; height: 18px; }
.tk-of .side-p { margin: 0 2px 10px; }
.pk-menu .wip-dot { width: 16px; }

/* a task's page (#/tasks/:id): where it stands, its title and body, then its threads, its pull requests and its
   history */
.task-t { color: inherit; }
.task-t:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a.task-text { cursor: pointer; }
.bcard-t.task-t { cursor: pointer; }
.tst--todo { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.tst--with { background: #e9eef8; color: #2f5fb0; }
.tst--live { background: #e4f2ea; color: var(--green); }
.tst--live .pulse { width: 6px; height: 6px; }
.tst--needs { background: var(--sun); color: var(--ink); }
.tst--done { background: #e4f2ea; color: var(--green); }
.tk-page { padding-bottom: 16px; }
.tk-top { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.tk-top .tick-box { width: 22px; height: 22px; margin-top: 5px; border-radius: 6px; font-size: 12px; }
.tk-top .wip-title { flex: 1; min-width: 0; margin: 0; cursor: text; }
.tk-page.is-done .tk-title { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); cursor: default; }
.tk-page.is-done .tick-box { border-color: var(--green); background: var(--green); }
.tk-top .task-edit { flex: 1; margin: 0 0 0 -4px; }
.tk-top .task-edit input { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.tk-top .task-edit .task-note-in { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.tk-body { margin: 8px 0 0 34px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; cursor: text; }
.tk-body.is-empty { color: var(--ink-3); }
.tk-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.tk-page .wip-facts { margin-left: 34px; }
.tk-page .wf .av { width: 18px; height: 18px; font-size: 9px; }
.tk-page .wf a { color: inherit; }
.tk-page > .task-on { display: block; margin: 8px 0 0 34px; }
.tk-page .wip-facts > .wf-btn { margin-left: auto; }
/* Sharing a task (docs/task-sharing-plan.md): Share, Delete or Leave at the end of its facts; the faces of the
   people on it; and its Share panel under its head. */
.tk-page .wip-facts > .tk-acts { display: inline-flex; gap: 14px; margin-left: auto; }
.wf-btn--plain:hover:not([disabled]), .wf-btn--plain.is-on { background: var(--well); color: var(--ink); }
.chip--people { gap: 0; padding: 1px 6px 1px 3px; }
.chip--people .av { width: 16px; height: 16px; font-size: 8px; box-shadow: 0 0 0 1.5px var(--card); }
.chip--people .av + .av { margin-left: -4px; }
.chip--people > span:not(.av) { margin-left: 5px; }
.wf .chip--people { margin-right: 6px; background: none; padding: 0; }
.task-text .chip--people { vertical-align: 1px; }
.tk-share { margin: 14px 0 0 34px; padding-top: 12px; border-top: 1px solid var(--line); }
.tk-share-h { display: flex; align-items: center; margin: 0 0 4px; font-size: 14px; font-weight: 650; }
.tk-share-h .icon-btn { margin-left: auto; }
.tk-person { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.tk-person > span:not(.av) { flex: 1; min-width: 0; font-size: 14px; }
.tk-person small { display: block; color: var(--ink-3); font-size: 12.5px; }
.tk-share-add { display: flex; gap: 8px; margin-top: 8px; }
.tk-share-add input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; }
.tk-share-add input:focus { outline: none; border-color: var(--ink-3); }
.tk-share-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip--add { gap: 5px; padding: 2px 9px 2px 3px; border: 0; cursor: pointer; }
.chip--add:hover { background: var(--line); color: var(--ink); }
.chip--add .av { width: 18px; height: 18px; font-size: 9px; }
.tk-share-none { margin: 8px 0 0; font-size: 13px; }
.tk-share-ask { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--well); font-size: 14px; }
.tk-share-ask p { margin: 0 0 8px; }
.tk-share-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tk-share-l { font-size: 14px; font-weight: 600; }
.tk-share-vis small { flex-basis: 100%; color: var(--ink-3); font-size: 12.5px; }
.tk-share-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; }
.tk-shared .chip--people { background: none; padding: 0; margin-right: 4px; vertical-align: -3px; }
.tk-seen-note { margin: 4px 0 8px; font-size: 13px; }
@media (max-width: 600px) { .tk-share { margin-left: 0; } }
.tk-sec { padding: 14px 20px 8px; }
.tk-h { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 0 6px; font-size: 15px; font-weight: 650; }
.tk-h .n { color: var(--ink-3); font-weight: 500; }
.tk-h-end { margin-left: auto; }
.tk-h .opt { height: 28px; font-size: 13px; }
.tk-empty { margin: 0 0 8px; font-size: 14px; }
.tk-threads > li { display: flex; align-items: center; gap: 4px; }
.tk-threads > li > .act-row { flex: 1; min-width: 0; }
.tk-threads > li > .icon-btn { flex: none; width: 28px; height: 28px; margin-right: -8px; border-radius: 8px; opacity: 0; }
.tk-threads > li > .icon-btn svg.i { width: 14px; height: 14px; }
.tk-threads > li:hover > .icon-btn, .tk-threads > li > .icon-btn:focus-visible { opacity: 1; }
/* the box under its threads that starts another on it */
@media (hover: none) { .tk-threads > li > .icon-btn { opacity: 1; } }
.tk-wip { container-type: inline-size; padding-bottom: 0; }
.tk-wip .wl-list { margin: 0 -20px; }
.tk-wip .tk-empty { margin-bottom: 14px; }
.tk-hist { margin: 0 0 6px; padding: 0; list-style: none; }
.tk-hist li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.tk-hist li:first-child { border-top: 0; }
.tk-hist li > span { flex: 1; min-width: 0; }
.tk-hist a { color: var(--ink); font-weight: 600; }
.tk-hist li.landed > span { color: var(--green); }
.tk-hist time { flex: none; color: var(--ink-3); font-size: 12.5px; }
.tk-hist li.ok > span { color: var(--green); }
.tk-hist li.err > span { color: var(--red); }
.tk-hist li.more { display: block; }
.tk-hist li.more button { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; }
.tk-hist code { font-size: 12.5px; }
/* What happened to one of the pull requests it ships: its number first, as on the WIP page it came from. */
.tk-hist .lane { display: inline-block; margin-right: 8px; padding: 0 6px; border-radius: 6px; background: var(--well); color: var(--ink-2); font: 500 11px/1.6 var(--mono); vertical-align: 1px; }
.tk-hist li.landed .lane { background: #efe9fb; color: #6a3fc4; }
/* What it ships (taskShipCard): the strip and how much merged, then a row each, as on a pull request's list */
.tk-ship-card { padding-bottom: 16px; }
.tk-ship-card .tk-h { flex-wrap: wrap; row-gap: 6px; }
.tk-ship-card .tk-h .n { white-space: nowrap; }
/* Reorder, Land them in order and Add: beside the title when there's room, on a line of their own on a phone. */
.tk-ship-card .tk-h-end { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.tk-ship-card .wp-prog { margin-top: 2px; }
.tk-ship-card .wp-parts { margin-top: 10px; }
.tk-ship-card .tk-empty { margin-bottom: 0; }
.tk-ship-note { margin: 8px 0 0; font-size: 13px; }
.tk-tabs { padding-top: 4px; }
.tk-tabs .wip-tabs { margin-top: 0; }
.tk-tabs .wip-tab { padding: 10px 0 4px; }
/* and on its row in Tasks, and its card on the board */
.tk-ship { display: inline-flex; align-items: center; gap: 6px; }
.tk-ship .wp-bar i { width: 10px; height: 5px; }
@media (max-width: 520px) {
  .tk-body, .tk-page .wip-facts, .tk-page > .task-on { margin-left: 0; }
  .tk-sec { padding: 12px 16px 6px; }
  .tk-wip .wl-list { margin: 0 -16px; }
}

/* WIP as a timeline: a project's main branch down the middle, newest on top, each WIP under the commit it left
   main at, left and right in turn (docs/wip-timeline-plan.md). Narrow, main runs down the left. */
.tl-proj { container-type: inline-size; }
.tl-proj .wl-group-h code { color: var(--ink-2); font-size: 11.5px; }
.tl { --gut: 72px; position: relative; padding: 4px 0 2px; }
.tl::before { content: ""; position: absolute; top: 12px; bottom: 0; left: calc(50% - 1px); width: 2px; border-radius: 1px; background: #c5ccd4; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.tl-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tl-lines path { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; }
/* a commit WIP left from: its subject on one side; which commit, when, and how far behind main on the other */
.tl-stop { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--gut) minmax(0, 1fr); align-items: center; min-height: 26px; }
.tl-node { grid-column: 2; justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2.5px var(--ink-2), 0 0 0 4px var(--card); }
.tl-subj { grid-column: 1; overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.tl-at { grid-column: 3; display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.tl-at code { color: var(--ink-2); font-size: 11.5px; }
.tl-behind { padding: 0 7px; border-radius: 6px; background: var(--well); color: var(--ink-2); font-size: 11.5px; font-weight: 550; }
.tl-behind--far { background: #fdf0d8; color: #7a5b00; }
.tl-behind--none { background: #e4f2ea; color: var(--green); }
.tl-stop + .tl-stop { margin-top: 22px; }
.tl-stop--head .tl-node { width: 14px; height: 14px; background: var(--ink); box-shadow: 0 0 0 4px var(--card); }
.tl-stop--head .tl-subj { color: var(--ink-2); }
.tl-stop--unknown .tl-node { box-shadow: inset 0 0 0 2px var(--line-2), 0 0 0 4px var(--card); }
.tl-base { padding: 1px 7px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 11.5px/1.5 var(--mono); }
.tl-day { position: relative; z-index: 1; width: fit-content; margin: 14px auto 8px; padding: 1px 10px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
/* the WIP that left from one commit, each a half step below the one before, on the other side */
.tl-cards { display: grid; grid-template-columns: minmax(0, 1fr) var(--gut) minmax(0, 1fr); padding: 6px 0 4px; }
.tl-card { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; margin: 4px 0; padding: 9px 11px 10px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: inherit; }
.tl-card--l { grid-column: 1; }
.tl-card--r { grid-column: 3; }
.tl-card:hover { background: #fafbfc; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); text-decoration: none; }
.tl-card.is-needs { background: var(--sun-card); box-shadow: inset 0 0 0 1px var(--sun-edge); }
.tl-card.is-stale .tl-t { color: var(--ink-2); }
.tl-top { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.tl-top .wip-dot { margin-top: 3px; }
.tl-t { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tl-top time { color: var(--ink-3); font-size: 12px; line-height: 19px; white-space: nowrap; }
.tl-row { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: 22px; color: var(--ink-2); font-size: 12.5px; }
.tl-row .chip { flex: none; }
.tl-row .chip--branch { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-row .chip--set { flex: 0 1 auto; gap: 4px; min-width: 0; max-width: 170px; overflow: hidden; background: #f2edfb; color: #5b3aa6; white-space: nowrap; }
.tl-row .chip--set svg.i { flex: none; width: 12px; height: 12px; }
.tl-row .chip--set span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-row .av--xs { flex: none; }
.tl-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-who b { color: var(--ink); font-weight: 600; }
.tl-facts { flex: none; margin-left: auto; color: var(--ink-3); font: 500 11.5px var(--mono); }
.tl-facts.is-bad { color: var(--red); }
@container (max-width: 519px) {
  .tl { --gut: 34px; }
  .tl::before { left: 16px; }
  .tl-stop, .tl-cards { grid-template-columns: var(--gut) minmax(0, 1fr); }
  .tl-node { grid-column: 1; }
  .tl-subj { display: none; }
  .tl-at { grid-column: 2; }
  .tl-card--l, .tl-card--r { grid-column: 2; grid-row: auto !important; }
  .tl-day { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .dot--live { animation: none; } }

/* ---------- WIP as pull requests ---------- */
.dot--fail { background: var(--red); }
.dot--ready { background: var(--green); }
.dot--draft { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.wip-dot--merged { color: #6a3fc4; }
.wip-dot--closed { color: var(--ink-3); }
.wip-note { display: flex; align-items: center; gap: 6px; margin: 1px 0 4px 30px; padding: 2px 10px 2px 8px; color: var(--ink-3); font-size: 12.5px; }
.wip-note svg.i { width: 13px; height: 13px; }
.wip-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wip-note--err { color: var(--red); }
.chip--open { background: #e4f2ea; color: var(--green); font-weight: 600; }
.chip--merged { background: #efe9fb; color: #6a3fc4; font-weight: 600; }
.chip--closed { background: #f9e7e4; color: var(--red); font-weight: 600; }
.link-btn { padding: 0; border: 0; background: none; color: var(--ink); font-size: inherit; font-weight: 550; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link-btn:hover { text-decoration-color: var(--ink-3); }
.link-btn[disabled] { opacity: 0.5; cursor: default; }

.pr-body { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--well); font-size: 14px; }
.pr-body .md > :first-child { margin-top: 0; }
.pr-body .md > :last-child { margin-bottom: 0; }

.checks { display: grid; gap: 1px; margin: 6px 0 0; padding: 0; list-style: none; }
.ck { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto 22px; align-items: center; gap: 10px; padding: 5px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.ck:first-child { border-top: 0; }
.ck-ico { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.ck-ico svg.i { width: 12px; height: 12px; stroke-width: 2.4; }
.ck--pass .ck-ico { background: #e4f2ea; color: var(--green); }
.ck--fail .ck-ico { background: #f9e7e4; color: var(--red); }
.ck--pending .ck-ico { background: #fdf0d8; color: #7a5b00; }
.ck--skip .ck-ico { background: var(--well); color: var(--ink-3); }
.ck-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-name b { font-weight: 550; }
.ck-name small { margin-left: 8px; color: var(--ink-3); font-size: 12.5px; }
.ck-st { color: var(--ink-3); font-size: 12.5px; }
.ck--fail .ck-st { color: var(--red); font-weight: 550; }
.ck-link { display: grid; place-items: center; color: var(--ink-3); }
.ck-link svg.i { width: 14px; height: 14px; }
.ck-link:hover { color: var(--ink); }

.threads { display: grid; gap: 8px; margin-top: 6px; }
.thread { padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.thread-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; }
.thread-h code { min-width: 0; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.thread-h a { margin-left: auto; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.thread-c { font-size: 14px; }
.thread-c + .thread-c { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.thread-c > b { font-weight: 600; }
.thread-h time { color: var(--ink-3); font-size: 12.5px; }
/* answering it on a WIP's page: under each review thread, review, comment and file, Reply (on GitHub, as you),
   Resolve, and Tell (its agent, what to do about this one); the box opens in their place */
.rp-h { margin: 18px 2px 0; color: var(--ink-3); font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.rp-earlier { margin-top: 6px; padding: 6px 2px; border-top: 0; }
.rp-code { margin: 0 0 8px; }
.rp-code .dv-t td.code { width: 100%; padding-left: 8px; }
.rp-code tr.is-at td { box-shadow: inset 0 -1px 0 var(--line-2); }
.rp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rp-foot .btn, .rp-send .btn { height: 30px; padding: 0 11px; font-size: 13px; }
.rp-foot .btn svg.i, .rp-send .btn svg.i { width: 14px; height: 14px; }
.rp-foot .btn[disabled], .rp-send .btn[disabled] { opacity: 0.45; cursor: default; }
.rp-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.thread > .rp-form:first-child, .chg-body > .rp-form { border-top: 0; }
.rp-form ab-box { display: block; min-height: 64px; max-height: 320px; overflow-y: auto; padding: 9px 12px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 14px; line-height: 1.5; }
.rp-form ab-box:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.rp-send { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.rp-send .muted { margin-right: auto; font-size: 12.5px; }
.rp-quiet { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font-size: 13px; }
.rp-quiet:hover { background: var(--well); color: var(--ink); }
.rp-quiet[disabled] { opacity: 0.45; }
.rp-told { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; padding: 7px 10px; border-radius: 10px; background: #f1eefc; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.rp-told > svg.i { flex: none; width: 13px; height: 13px; color: #6a4fd1; transform: translateY(2px); }
.rp-told > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rp-told b { color: var(--ink); font-weight: 600; }
.rp-told a { flex: none; color: var(--ink-2); font-size: 12.5px; }
.rp-told + .rp-foot { border-top: 0; padding-top: 0; margin-top: 8px; }
.thread.is-done { padding: 7px 12px; background: #fafbfc; }
.thread.is-done .thread-h { margin: 0; color: var(--ink-3); }
.thread.is-done .gate-ic { flex: none; width: 18px; height: 18px; }
.thread.is-done .gate-ic svg.i { width: 11px; height: 11px; }
.thread.is-done .rp-quiet { height: 24px; margin-left: auto; }
.rp-new { margin-top: 14px; }
.rp-new + .wip-none, .threads + .rp-new { margin-top: 12px; }
.rp-pill { width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--well); color: var(--ink-3); font-size: 14px; text-align: left; cursor: text; }
.rp-pill:hover { color: var(--ink-2); }
.wip-tab > .rp-form { margin-top: 14px; padding-top: 0; border-top: 0; }
.chg-body > .rp-foot { margin: 8px 0 2px; padding-top: 0; border-top: 0; }
.chg-body > .rp-told { margin-top: 8px; }
@media (max-width: 520px) {
  .rp-send { justify-content: flex-end; }
  .rp-send .muted { flex-basis: 100%; }
}
.thread-c > time { color: var(--ink-3); font-size: 12.5px; }
.thread-c .md { margin-top: 2px; color: var(--ink-2); }
.thread-c .md > :first-child { margin-top: 0; }
.thread-c .md > :last-child { margin-bottom: 0; }

.wip-story li.ok::before { background: var(--green); }
.wip-story li.talk::before { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2), 0 0 0 3px var(--card); }
.wip-story li small.gh-q { flex-basis: 100%; overflow: hidden; color: var(--ink-3); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wip-story .gh-link { margin-left: -4px; color: var(--ink-3); }
.wip-story .gh-link svg.i { width: 13px; height: 13px; transform: translateY(2px); }
.wip-story .gh-link:hover { color: var(--ink); }

.pr--merged::before { background: #6a3fc4; }
.pr--closed::before { background: var(--ink-3); }
.pr--draft::before { background: var(--line-2); }
.md-img { cursor: zoom-in; }
.md-img-gone { color: var(--ink-3); font-style: italic; }

/* routines: an OpenClaw agent's cron jobs, on its profile and a page each */
.chip--bad { background: #fbe9e6; color: var(--red); font-weight: 600; }
.skill-ico--off { background: var(--well); color: var(--ink-3); }
/* a long name wraps, and how it stands stays beside its first line */
.skill p.rt-title { flex-wrap: nowrap; align-items: baseline; }
.rt-title > .chip, .rt-title > .skill-used { flex: none; }
.skill small.rt-what { display: -webkit-box; overflow: hidden; color: var(--ink-3); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rt-upkeep { display: flex; align-items: center; gap: 6px; margin: 12px 0 2px; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 13.5px; font-weight: 600; }
.rt-upkeep:hover { color: var(--ink); }
.rt-upkeep svg.i { width: 14px; height: 14px; transition: transform 0.15s; }
.rt-upkeep[aria-expanded="true"] svg.i { transform: rotate(90deg); }
.rt-upkeep .muted { font-weight: 500; }
.rt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.rt-dot--ok { background: var(--green); }
.rt-dot--error { background: var(--red); }
.rt-dot--off { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.rt-dot--run { background: var(--hue); animation: pulse 1.4s ease-in-out infinite; }
/* an agent's usage limits, on its profile: a bar for each, gray (not its hue, which may be red), amber from 80%,
   red once it's used up */
.lims-card h3 { justify-content: flex-start; gap: 8px; }
.lim-plan { padding: 2px 8px; border-radius: 999px; background: var(--well); color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.lims { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lim-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }
.lim-top b { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lim-top span { flex: none; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 550; }
.lim-bar { display: block; height: 6px; margin: 5px 0 4px; border-radius: 3px; background: var(--well); overflow: hidden; }
.lim-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink-2); }
.lim small { color: var(--ink-3); font-size: 12.5px; }
.lim--high .lim-bar i { background: #b8800f; }
.lim--high .lim-top span { color: #8a5f00; }
.lim--out .lim-bar i { background: var(--red); }
.lim--out .lim-top span { color: var(--red); }
.lim-h { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 14px; }
.lim-h:first-of-type { margin-top: 2px; }
.lim-h b { font-weight: 650; }
.lim-out { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--red); font-size: 13.5px; font-weight: 600; }
.lim-x { margin: 12px 0 0; color: var(--ink-2); font-size: 13.5px; }
.lim-x b { color: var(--ink); font-weight: 600; }
.lim-err { margin: 8px 0 0; font-size: 13px; }
.lim-foot { margin: 12px 0 0; font-size: 12.5px; }

.rt-mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.rt-mini a { display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: 10px; color: inherit; font-size: 14px; }
.rt-mini a:hover { background: var(--well); text-decoration: none; }
.rt-mini span { min-width: 0; }
.rt-mini b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rt-mini small { display: block; overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.rt-more { margin: 6px 0 0; font-size: 13px; }

/* an agent's own workspace (an OpenClaw agent's), on its profile: a folder at a time, or newest first */
.aw h3 .seg { align-self: center; }
.aw-where { margin: -6px 0 10px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.aw-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 4px; color: var(--ink-3); font-size: 13.5px; }
.aw-crumbs button { padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font: inherit; font-weight: 550; }
.aw-crumbs button:hover { background: var(--well); color: var(--ink); }
.aw-crumbs b { padding: 2px 6px; color: var(--ink); font-weight: 600; }
.aw-list { margin: 0; padding: 0; list-style: none; }
.aw-list > li + li { border-top: 1px solid var(--line); }
.aw-row { display: flex; align-items: center; gap: 10px; width: calc(100% + 16px); margin: 0 -8px; padding: 8px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; }
.aw-row:hover { background: var(--well); }
.aw-row > svg.i { flex: none; width: 17px; height: 17px; color: var(--ink-3); }
.aw-row.is-dir > svg.i { color: var(--hue); }
.aw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-name b { font-weight: 550; }
.aw-name small { margin-left: 8px; color: var(--ink-3); font-size: 12.5px; }
.aw-meta { flex: none; color: var(--ink-3); font-size: 12.5px; }
.aw-row time { flex: none; min-width: 44px; color: var(--ink-3); font-size: 12.5px; text-align: right; }
.aw-row time.is-fresh { color: var(--green); font-weight: 550; }
.aw-row time.is-fresh::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--green); }
.aw-note { margin: 10px 0 0; font-size: 13px; }
.aw-mini button { display: flex; align-items: center; gap: 10px; width: calc(100% + 16px); margin: 0 -8px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; }
.aw-mini button:hover { background: var(--well); }
.aw-mini svg.i { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.rt-code { margin-top: 10px; white-space: pre-wrap; }
.runs { margin: 4px 0 0; padding: 0; list-style: none; }
.runs > li + li { border-top: 1px solid var(--line); }
.run-head { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 10px 6px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; }
button.run-head, a.run-head { cursor: pointer; }
button.run-head:hover, a.run-head:hover { background: var(--well); text-decoration: none; }
.run-head .rt-dot { margin-top: 6px; }
.run-when { flex: none; width: 150px; }
.run-when b { display: block; font-size: 14px; font-weight: 600; }
.run-when small { display: block; color: var(--ink-3); font-size: 12.5px; }
.run-sum { display: -webkit-box; flex: 1; min-width: 0; overflow: hidden; color: var(--ink-2); font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.run-sum.is-err { color: var(--red); }
.run-go { display: grid; flex: none; place-items: center; align-self: center; margin-left: auto; color: var(--ink-3); }
.rt-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.run-go svg.i { width: 15px; height: 15px; transition: transform 0.15s; }
.is-open > .run-head .run-go svg.i { transform: rotate(90deg); }
.is-open > .run-head .run-sum { display: none; }
.run-body { padding: 0 6px 14px 26px; }
.run-body .steps { margin-top: 2px; }
.run-reply { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--well); font-size: 14.5px; }
.run-fail { margin: 10px 0 0; color: var(--red); font-size: 14px; }
.runs-more { margin-top: 10px; }
.rt-acts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.rt-note { margin: 8px 0 0; font-size: 12.5px; }
.rt-err { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--ink-3); font-size: 13.5px; }
.rt-err svg.i { width: 15px; height: 15px; }
.run-open { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 13px; }
.run-open svg.i { width: 13px; height: 13px; }
/* a post's loops (/loop): the chip on its card, and the card beside it */
button.chip--loop { border: 0; line-height: inherit; }
/* what it does next, last in its results: not done yet, so in grey */
.updates .next-line > span { min-width: 0; }
.updates .next-line svg.i, .updates .next-k { color: var(--ink-3); }
.updates .next-line small { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; }
.updates .next-why { overflow-wrap: anywhere; }
.updates .next-line small button { padding: 0; border: 0; background: none; color: var(--ink-2); font-weight: 550; }
.updates .next-line small button:hover { color: var(--ink); text-decoration: underline; }
.updates .next-line small button:disabled { opacity: 0.5; cursor: default; }
/* and the soonest one again, over its reply box, lined up with the box */
.next-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 30px; margin: 0 0 6px 36px; color: var(--ink-2); font-size: 13px; }
.next-bar > svg.i { flex: none; width: 15px; height: 15px; color: var(--ink-3); }
.next-what { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-what b { color: var(--ink-3); font-weight: 600; }
.next-bar time { flex: none; color: var(--ink-3); white-space: nowrap; }
.next-acts { display: flex; flex: none; gap: 12px; margin-left: 4px; }
.next-acts button { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-weight: 550; }
.next-acts button:hover { color: var(--ink); text-decoration: underline; }
.next-acts button:disabled { opacity: 0.5; cursor: default; }
/* on a phone, its buttons go under what it does, so that keeps the line */
@media (max-width: 600px) {
  .next-what { flex-basis: 0; }
  .next-acts { flex-basis: 100%; margin-left: 23px; }
}
.loops { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.loops > li { display: flex; align-items: flex-start; gap: 10px; }
.loops > li > .rt-dot { margin-top: 6px; }
.loops > li > div { min-width: 0; flex: 1; }
.loops .loop-name { display: block; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.loops small { display: block; color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.loops small.rt-what { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.loops .rt-acts { margin-top: 8px; }
.loops > li.is-off .loop-name { color: var(--ink-2); font-weight: 500; }
@media (max-width: 640px) {
  .run-head { flex-wrap: wrap; }
  .run-when { width: auto; }
  .run-sum { flex-basis: 100%; order: 1; padding-left: 20px; }
}

/* ---------- pages: widgets agents keep up to date ---------- */

/* a page's face is round, like an agent's or a person's avatar */
.pg-ico { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); font-size: 15px; line-height: 1; }
/* on a thread: the page it was started from, or made */
.pg-ref { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--well); color: var(--ink); }
.pg-ref:hover { text-decoration: none; background: #eceef1; }
.pg-ref .pg-ico { width: 36px; height: 36px; font-size: 18px; }
.pg-ref-in { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.pg-ref-in b { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-ref-in small { color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-ref-v { flex: none; color: var(--ink-3); font-size: 12.5px; }
.pg-hero { display: grid; flex: none; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--tint); font-size: 46px; line-height: 1; }
.chip--page { background: var(--tint); color: var(--hue); font-weight: 600; }
.chip--note { gap: 4px; font-weight: 600; }
.nt-ref .pg-ico { background: #fff; }
.avs { display: inline-flex; align-items: center; }
.avs .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.avs .av:first-child { margin-left: 0; }

/* its head: a profile's, with a page's facts */
.pg-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pg-by a { color: var(--ink); font-weight: 600; }
.prof-name .pg-about { margin: 0 0 6px; color: var(--ink); font-size: 15px; }
.prof-acts .pg-act { width: 38px; height: 38px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
/* following it: in the page's own color, like a pinned post's pin */
.prof-acts .pg-follow { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.prof-acts .pg-follow.is-on { background: var(--tint); box-shadow: none; color: var(--hue); }
.prof-acts .pg-follow .i { width: 15px; height: 15px; }
.prof-now .chip .i { width: 13px; height: 13px; }
/* its title, with the button that folds the head; folded, it's its emoji, title and buttons on one line */
.pg-title { display: flex; align-items: flex-start; gap: 6px; }
.pg-title h1 { min-width: 0; }
.pg-fold { width: 32px; height: 32px; margin-top: 3px; border-radius: 9px; color: var(--ink-2); }
.pg-head.is-folded { flex-wrap: nowrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.pg-head.is-folded .pg-hero { width: 40px; height: 40px; font-size: 20px; }
.pg-head.is-folded .prof-name { flex: 1 1 0; }
.pg-head.is-folded .pg-title { align-items: center; }
.pg-head.is-folded .pg-title h1 { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-head.is-folded .pg-fold { margin-top: 0; }
.pg-head.is-folded .prof-acts { flex: none; flex-wrap: nowrap; }
.pg-body { max-width: 1100px; margin: 0 auto; padding: 16px 16px 60px; }
.pg-body > .compose { margin-bottom: 14px; }
.pg-cols .box h3 .muted { font-size: 14px; font-weight: 500; }

/* its threads bar: a column on its right, a quarter of the page, on the widgets' gaps. The page widens with it, so
   the widgets keep their room. It sticks under the top bar; its height (set as you scroll) reaches the window's
   bottom, so the list or the thread scrolls inside it and its box stays in view (docs/page-threads-plan.md). Its
   box's menus (where it runs, its branch) open out of it, over the widgets, rather than cut off inside it */
.profile-in.is-wide, .pg-split { max-width: 1440px; }
.pg-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pg-main { min-width: 0; }
.pg-main > [data-key] > .compose, .pg-main > [data-key] > .pe-meta { margin-bottom: 14px; }
.pg-bar { position: sticky; top: 74px; display: flex; flex-direction: column; min-width: 0; height: var(--bar-h, calc(100vh - 90px)); }
.pg-bar > [data-key] { flex: none; min-width: 0; }
.pg-bar > [data-key="list"], .pg-bar > [data-key="body"] { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bar-h { display: flex; align-items: center; gap: 8px; padding: 12px 8px 8px 16px; }
.bar-h h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.bar-h h2 .n { margin-left: 5px; color: var(--ink-3); font-weight: 500; }
.bar-h .icon-btn { width: 32px; height: 32px; }
.bar-h--thread { gap: 6px; min-height: 56px; padding: 8px 6px 8px 6px; border-bottom: 1px solid var(--line); }
.bar-who { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
.bar-who b { font-weight: 650; }
.bar-who .verb { color: var(--ink-2); }
.bar-who small { display: block; overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bar-pills { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px 10px; }
.bar-pills .pill { padding: 4px 10px; border: 0; font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; }
.bar-list { display: grid; gap: 2px; padding: 4px 8px 8px; border-top: 1px solid var(--line); }
.bar-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: 12px; color: var(--ink); }
.bar-row:hover { background: var(--well); text-decoration: none; }
.bar-row.is-needs { background: var(--sun-card); box-shadow: inset 0 0 0 1px var(--sun-edge); }
.bar-t { display: grid; flex: 1; gap: 4px; min-width: 0; }
.bar-t b { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bar-t small, .bar-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bar-t .chip, .bar-chips .chip { padding: 0 6px; font-size: 11.5px; }
.bar-m { flex: none; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.bar-note { margin: 0; padding: 12px 16px; color: var(--ink-2); font-size: 13.5px; }
.chip--did { background: color-mix(in srgb, var(--hue) 10%, white); color: var(--hue); font-weight: 600; }
/* the box to start one: the composer, flat, at the bar's foot */
.bar-foot { border-top: 1px solid var(--line); }
.bar-foot .compose { padding: 10px 12px; border-radius: 0 0 18px 18px; box-shadow: none; }
.bar-foot .compose .compose-row > .av { display: none; }
.bar-foot .compose :is(textarea, ab-box) { min-height: 40px; padding: 9px 4px 9px 14px; font-size: 14px; }
.bar-foot .compose .text-box .icon-btn { width: 30px; height: 32px; }
.bar-foot .compose .staged { margin-left: 0; }
/* where and how it runs, and Start thread, once you're writing: on lines of their own, under the box */
.bar-foot .compose:not(:focus-within):not(:has(.pk-menu)):has(ab-box:empty) .compose-bar { display: none; }
.bar-foot .compose-bar { align-items: center; margin-top: 8px; padding-top: 8px; }
.bar-foot .compose-opts { flex: 1 1 100%; }
/* a thread, small: its conversation first */
.bar-body { padding: 12px 12px 10px; overflow-wrap: anywhere; }
.bar-body .ask { padding: 10px 12px; }
.bar-body .ask-acts .btn { padding: 7px 12px; }
.bar-title { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.bar-body .comments { gap: 10px; margin: 12px 0 0; }
.bar-body .cmt > div, .bar-body .cmt > .cmt-wide { max-width: 94%; }
.bar-reply { margin: 0; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.bar-reply .ended { margin: 2px; }
.bar-reply .cmt-in > .av { display: none; }
.bar-steps { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--ink-3); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.bar-steps:hover { background: var(--well); color: var(--ink-2); }
.bar-steps .i { flex: none; width: 15px; height: 15px; }
.bar-steps span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-steps b { color: var(--ink-2); font-weight: 600; }
.bar-body .steps { margin: 0 0 4px 8px; }
/* a change it made to the page, where it happened in the conversation */
.pg-chg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 10px 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--hue) 6%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 20%, white); }
.pg-chg > .i { flex: none; width: 18px; height: 18px; color: var(--hue); }
.pg-chg-t { flex: 1 1 140px; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.pg-chg-t b { font-weight: 650; }
.pg-chg-t b a { color: inherit; }
.pg-chg-t small { display: block; color: var(--ink-2); font-size: 12.5px; }
.pg-chg .btn { flex: none; }
/* a widget: the thread that changed it, which opens it beside the page; ringed while that thread is open there */
.wg-thr { gap: 5px; padding-left: 2px; }
.wg-thr:hover { text-decoration: none; filter: brightness(0.96); }
.wg-thr .av { width: 18px; height: 18px; font-size: 9px; }
.wg.is-lit { box-shadow: 0 0 0 2px var(--lit), 0 8px 24px color-mix(in srgb, var(--lit) 16%, transparent); }
.wg.is-flash { animation: wg-flash 1.4s ease-out; }
@keyframes wg-flash {
  0%, 30% { box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--hue) 55%, transparent); }
  100% { box-shadow: var(--shadow), 0 0 0 3px transparent; }
}
/* folded: an anchor at the window's bottom, its right */
.bar-dock { position: fixed; right: 16px; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 8px; width: 320px; padding: 12px 12px 12px 16px; border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -2px 18px rgba(18, 24, 33, 0.12); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bar-dock b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.bar-dock .n { color: var(--ink-3); font-weight: 500; }
.bar-dock .chip { padding: 0 7px; font-size: 11.5px; }
.bar-dock > .i:last-child { width: 18px; height: 18px; margin-left: auto; color: var(--ink-2); }
.bar-dock:hover > .i:last-child { color: var(--ink); }
/* narrow: the bar goes under the widgets, as tall as what's in it */
@media (max-width: 900px) {
  .pg-split { grid-template-columns: minmax(0, 1fr); }
  .pg-bar { position: static; height: auto; max-height: 80vh; }
  .bar-dock { left: 16px; width: auto; }
}

/* widgets */
/* a row's widgets are as tall as its tallest, so a short one leaves no gap under it; what keeps a widget, or wrote
   it last, sits at its foot */
.wg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; grid-auto-flow: row dense; }
.wg { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 16px; }
.wg > .wg-by, .wg > .wg-rt { margin-top: auto; padding-top: 12px; }
.wg[data-span="3"], .wg-col[data-span="3"] { grid-column: span 3; }
.wg[data-span="4"], .wg-col[data-span="4"] { grid-column: span 4; }
.wg[data-span="6"], .wg-col[data-span="6"] { grid-column: span 6; }
.wg[data-span="8"], .wg-col[data-span="8"] { grid-column: span 8; }
.wg[data-span="12"], .wg-col[data-span="12"] { grid-column: span 12; }
/* widgets that share a stack sit in one column, beside a long one; they share what room it leaves them */
.wg-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
/* a title keeps room for a few words: a chip beside it ("raven 8 · v30") goes under it when both don't fit, so a
   narrow widget (a quarter one on a phone) never squeezes its title to a letter a line */
.wg-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 22px; margin-bottom: 8px; }
.wg-h h3 { flex: 1 1 7em; min-width: 0; margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.wg-h h3:empty { flex-basis: 0; }
.wg-h--doc { position: absolute; top: 14px; right: 16px; margin: 0; }
.wg-new { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 7px; background: color-mix(in srgb, var(--hue) 10%, white); color: var(--hue); font-size: 12px; font-weight: 600; white-space: nowrap; }
.wg-new i { width: 6px; height: 6px; border-radius: 50%; background: var(--hue); }
/* a widget a live routine keeps while the page is open: live, updating, or failing */
.wg-live { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 7px; background: #e4f2ea; color: var(--green); font-size: 12px; font-weight: 600; white-space: nowrap; }
.wg-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: wg-live 2s ease-in-out infinite; }
.wg-live.is-wait { background: var(--well); color: var(--ink-3); }
.wg-live.is-wait i { background: var(--ink-3); }
.wg-live.is-bad { background: #fbe9e6; color: var(--red); }
.wg-live.is-bad i { background: var(--red); animation: none; }
@keyframes wg-live { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .wg-live i { animation: none; } }
.wg-by { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--ink-3); font-size: 12.5px; }
.wg .big { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.wg .big small { margin-left: 3px; color: var(--ink-3); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.wg .sub { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.wg .good { color: var(--green); font-weight: 600; }
.wg .bad { color: var(--red); font-weight: 600; }
.wg .spark { display: block; width: 100%; height: 30px; margin-top: 10px; }
.wg-note { font-size: 14px; }
/* a widget of its own: what an agent wrote, in its own sandboxed frame, as tall as it says it is */
.wg-frame { display: block; width: 100%; border: 0; background: transparent; color-scheme: light; }
/* a page's filters: a filter widget's values in a row, what each widget shows with them on, and the ones no
   filter widget shows (one an html widget set) */
.wg--filter { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; }
.wg--filter .wg-h { flex: none; margin: 0; }
.nf { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-tag { flex: none; padding: 1px 8px; border-radius: 7px; color: var(--ink-3); font-size: 12px; font-weight: 550; white-space: nowrap; }
.wg-tag--on { background: var(--well); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.nf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ink-2); font-size: 13.5px; }
.nf-bar .btn svg.i { width: 14px; height: 14px; }
.wg-tbl td b { font-weight: 550; }
/* a table stays inside its widget (or its thread's card): long links and paths wrap, and what still can't fit scrolls there */
:is(.wg, .att) .md-tbl { overflow-x: auto; }
.wg-tbl .cell-long { overflow-wrap: anywhere; }
.wg-tbl td:has(.cell-long) { min-width: 10em; }
/* a status in a table cell, or under a number ("6 new, 17 to do (6 fixed on prod, rescan pending)"), wraps inside
   its widget, the mark on its first line; a list's status stays one line beside its item */
.wg-tbl .st, :is(.wg, .att) .sub .st { align-items: baseline; white-space: normal; }
.wg .pr { margin-top: 0; }
.wg .pr-in b { overflow-wrap: anywhere; }

/* status: reserved colors, always with a mark and a word */
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 550; white-space: nowrap; }
.st i { display: grid; flex: none; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #fff; font-size: 9px; font-style: normal; font-weight: 800; }
.st--ok { color: var(--green); } .st--ok i { background: var(--green); }
.st--warn { color: #8a5f00; } .st--warn i { background: #b8800f; }
.st--bad { color: var(--red); } .st--bad i { background: var(--red); }
.st--idle { color: var(--ink-3); } .st--idle i { background: var(--line-2); }
.meter { display: flex; align-items: center; gap: 8px; }
.meter span { position: relative; flex: 1; height: 6px; min-width: 40px; border-radius: 3px; background: var(--well); overflow: hidden; }
.meter span b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ink-2); }
.meter span b.low { background: #b8800f; }
.meter em { width: 34px; color: var(--ink-2); font-size: 12.5px; font-style: normal; text-align: right; }

/* charts */
.lc { position: relative; }
.lc svg { display: block; width: 100%; height: auto; overflow: visible; }
.lc .grid line { stroke: var(--line); stroke-width: 1; }
.lc .grid text, .lc .xl text { fill: var(--ink-3); font: 500 11px var(--font); }
.lc .slo line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; }
.lc .slo text { fill: var(--ink-2); font: 600 11px var(--font); }
.lc .end text { fill: var(--ink-2); font: 550 11.5px var(--font); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.lc .cross { stroke: var(--ink-3); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -2px 0 8px; color: var(--ink-2); font-size: 12.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; }
.lc-tip { position: absolute; top: 6px; z-index: 5; min-width: 150px; padding: 8px 10px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(18, 24, 33, 0.12); font-size: 12.5px; pointer-events: none; }
.lc-tip b { display: block; margin-bottom: 4px; font-size: 12px; }
.lc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0; color: var(--ink-2); }
.lc-tip p i { width: 10px; height: 3px; border-radius: 2px; }
.lc-tip p em { margin-left: auto; padding-left: 12px; color: var(--ink); font-style: normal; font-weight: 600; }

/* lists: incidents, open questions, an outline */
.wl { margin: 0; padding: 0; list-style: none; }
.wl li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.wl li:first-child { border-top: 0; padding-top: 2px; }
.wl li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wl small { display: block; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; }
.wl .st { margin-top: 1px; }
.wl .tick-box { margin-top: 2px; cursor: default; }
.wl .tick-box.on { border-color: var(--ink); background: var(--ink); }
/* deciding on a page: an item waits for your OK, you pick an option */
.wl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.chip--ok { background: #e4f2ea; color: var(--green); font-weight: 600; }
.opt-choose { margin-top: 10px; }
.opt-choose svg.i, .chip--ok svg.i { width: 14px; height: 14px; }
.opts .opt-c.is-chosen { box-shadow: inset 0 0 0 2px var(--ink); }
.wl li.is-done > div > span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* long text: a draft, a spec */
.doc.md { max-width: 660px; padding: 2px 6px 2px 2px; font-size: 16px; line-height: 1.65; }
.doc.md p { margin: 0 0 14px; }
.doc.md h3 { margin: 4px 0 12px; font-size: 28px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; }
.doc.md h4 { margin: 24px 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.012em; }
.doc.md h5 { margin: 18px 0 6px; font-size: 16px; }
.doc.md blockquote { margin: 18px 0; padding: 2px 0 2px 16px; border-left-color: var(--hue); color: var(--ink-2); font-size: 18px; font-style: italic; }
.doc.md ul, .doc.md ol { margin-bottom: 14px; }
.doc.md img { max-height: 480px; }

/* options side by side */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.opt-c { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--well); }
.opt-c.is-pick { background: color-mix(in srgb, var(--hue) 7%, white); box-shadow: inset 0 0 0 1.5px var(--hue); }
.opt-c h4 { margin: 0 0 2px; font-size: 15px; }
.opt-c p { margin: 2px 0 0; color: var(--ink-2); font-size: 13.5px; }
.opt-tag { display: inline-flex; margin-bottom: 6px; padding: 1px 8px; border-radius: 7px; background: var(--hue); color: #fff; font-size: 11.5px; font-weight: 650; }
.opt-c ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; }
.opt-c li { display: flex; gap: 6px; margin: 3px 0; color: var(--ink-2); }
.opt-c li b { flex: none; width: 10px; font-weight: 700; }
.opt-c li.pro b { color: var(--green); }
.opt-c li.con b { color: var(--red); }
.opt-img { display: block; width: 100%; max-height: 220px; border-radius: 10px; object-fit: cover; background: var(--card); }

/* editing by hand */
.is-editing .wg { box-shadow: var(--shadow), 0 0 0 1.5px var(--line-2); }
.is-editing .wg:hover, .is-editing .wg.is-open { box-shadow: var(--shadow), 0 0 0 1.5px var(--ink-3); }
.wg-tools { display: flex; align-items: center; gap: 1px; width: max-content; max-width: 100%; margin: -4px -6px 8px auto; padding: 2px; border-radius: 9px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(18, 24, 33, 0.08); }
.wg-tools .icon-btn { width: 28px; height: 28px; border-radius: 7px; }
.wg-tools .icon-btn:disabled { opacity: 0.35; pointer-events: none; }
.wg-tools svg.i { width: 16px; height: 16px; }
.wg-width select { height: 28px; padding: 0 4px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font: 600 12.5px var(--font); cursor: pointer; }
.wg-width select:hover { background: var(--well); }
.wg-add { display: flex; grid-column: span 12; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 16px; border: 1.5px dashed var(--line-2); border-radius: 18px; color: var(--ink-2); font-size: 14px; }
.wg-add b { margin-right: 4px; color: var(--ink); }
.pe { display: grid; gap: 10px; }
.pe-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pe-row .pe-field { flex: 1 1 120px; }
.pe-field { display: grid; gap: 4px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.pe-field input, .pe-field select, .pe-text, .pe-meta input { width: 100%; min-width: 0; padding: 8px 10px; border: 0; border-radius: 9px; background: var(--well); color: var(--ink); font: 400 14px var(--font); outline: none; }
.pe-field input:focus, .pe-field select:focus, .pe-text:focus, .pe-meta input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.pe-text { min-height: 110px; line-height: 1.5; resize: vertical; }
.pe-text--long { min-height: 320px; }
.pe-text--code { min-height: 180px; font: 12.5px/1.5 var(--mono); }
.pe-check { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; }
.pe-hint { margin: -4px 0 0; font-size: 12.5px; }
.pe-acts { display: flex; gap: 6px; }
.pe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 14px; }
.pe-meta .pe-emoji input { width: 52px; text-align: center; font-size: 20px; }
.pe-meta .pe-title { flex: 1 1 240px; font-weight: 650; font-size: 16px; }
.pe-meta .pe-about { flex: 2 1 320px; }
.pe-meta p { flex-basis: 100%; margin: 0; font-size: 13px; }

/* looking at an older version */
.ver-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 14px 12px 16px; border-radius: 14px; background: var(--sun-card); box-shadow: inset 0 0 0 1px var(--sun-edge); font-size: 14.5px; }
.ver-banner p { flex: 1; min-width: 240px; margin: 0; }
.ver-banner > svg.i { color: #8a5f00; }

/* versions */
.ver-shell { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }
.ver-list { padding: 8px; }
.ver-list > h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 8px 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.ver-list > h3 small { color: var(--ink-3); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.ver { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; padding: 10px; border-radius: 12px; color: inherit; }
.ver:hover { background: var(--well); text-decoration: none; }
.ver.is-on { background: color-mix(in srgb, var(--hue) 8%, white); }
.ver.is-on::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 3px; background: var(--hue); }
.ver > .av { grid-row: span 2; margin-top: 1px; }
.ver-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 14px; }
.ver-t b { flex: none; font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.ver-t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-3); font-size: 12.5px; }
.ver-tag { padding: 0 7px; border-radius: 6px; background: var(--well); color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.ver-tag--latest { background: var(--ink); color: #fff; }
.ver-tag--undone { background: #fbe9e6; color: var(--red); }
.ver-tag--restore { background: var(--tint); color: var(--hue); }
.ver-fold { display: flex; align-items: center; gap: 10px; width: 100%; margin: 2px 0; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font-size: 13.5px; text-align: left; }
.ver-fold:hover { background: var(--well); }
.ver-fold .dots { display: grid; place-items: center; width: 28px; color: var(--ink-3); letter-spacing: 1px; }
.ver-fold small { display: block; color: var(--ink-3); font-size: 12.5px; }
.ver-detail { padding: 18px 20px 20px; }
.ver-detail h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 24px; font-weight: 750; letter-spacing: -0.02em; }
.ver-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
.ver-who b, .ver-who a { color: var(--ink); font-weight: 600; }
.ver-sum { margin: 0 0 16px; font-size: 16px; font-weight: 550; }
.ver-h { margin: 18px 0 6px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.vd { margin: 0; padding: 0; list-style: none; }
.vd li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.vd li:first-child { border-top: 0; }
.vd .k { display: grid; grid-row: span 2; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 800; }
.vd .k--changed { background: var(--tint); color: var(--hue); }
.vd .k--added { background: #e4f2ea; color: var(--green); }
.vd .k--removed { background: #fbe9e6; color: var(--red); }
.vd b { font-weight: 600; }
.vd .was { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.vd p { margin: 0; color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.ver-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ver-acts p { flex-basis: 100%; margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.ver-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--well); color: var(--ink-2); font-size: 14px; }
.ver-note > svg.i { margin-top: 1px; color: var(--ink-3); }
.ver-note a { color: var(--ink); font-weight: 600; }

/* contributors */
.ctb { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.ctb:first-of-type { border-top: 0; }
.ctb > div { flex: 1; min-width: 0; }
.ctb b { font-size: 15px; font-weight: 650; }
.ctb p { margin: 1px 0 0; color: var(--ink-2); font-size: 13.5px; }
.ctb p.muted { color: var(--ink-3); font-size: 12.5px; }
.role { flex: none; padding: 2px 9px; border-radius: 7px; background: var(--well); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.role--owner { background: var(--ink); color: #fff; }
.role--made { background: var(--tint); color: var(--hue); }
.icon-gap { flex: none; width: 36px; }
.ctb-add { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.sugg-list { display: grid; gap: 2px; }
.sugg-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; font-size: 14px; }
.sugg-row:hover { background: var(--well); }
.sugg-row > span:not(.av) { flex: 1; min-width: 0; }
.sugg-row small { display: block; color: var(--ink-3); font-size: 12.5px; }
.pg-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-settings-note { margin: 10px 0 0; font-size: 13px; }

/* its threads: a feed, as wide as the feed's */
.pg-feed { max-width: 712px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }

/* in the feed */
.pg-peek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.peek-t { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--well); }
.peek-t > small { display: block; overflow: hidden; color: var(--ink-2); font-size: 12px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.peek-t .v { margin-top: 2px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.peek-t .v small { margin-left: 2px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.peek-t .was, .peek-t .what { color: var(--ink-3); font-size: 12.5px; }
.peek-t .what { margin-top: 2px; color: var(--ink); font-size: 14px; font-weight: 550; }
.peek-t .spark { display: block; width: 100%; height: 28px; margin-top: 6px; }
.peek-doc { position: relative; max-height: 140px; margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--well); overflow: hidden; }
.peek-doc::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 48px; background: linear-gradient(transparent, var(--well)); }
.peek-doc > b { display: block; margin-bottom: 4px; font-size: 16px; }
.peek-doc .md { color: var(--ink-2); }
.peek-doc .md h3, .peek-doc .md h4 { color: var(--ink); }
.pg-more { display: flex; align-items: center; gap: 8px; margin-top: 10px; margin-bottom: 0; color: var(--ink-2); font-size: 13.5px; }
.pg-more svg.i { width: 15px; height: 15px; color: var(--ink-3); }
.pg-post .post-acts { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 4px; }

/* every page */
/* a page's live threads: who, and what the thread is about, on one line */
.pg-live { min-width: 0; color: inherit; }
.pg-live > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pg-live:hover { text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 30%, white); }

@media (max-width: 1000px) {
  .pg-head, .ws-head, .gr-head { flex-wrap: wrap; }
  .pg-head .prof-name, .ws-head .prof-name, .gr-head .prof-name { flex: 1 1 220px; }
  .pg-head .prof-acts, .ws-head .prof-acts, .gr-head .prof-acts { flex-basis: 100%; flex-wrap: wrap; }
  .wg[data-span="3"], .wg-col[data-span="3"] { grid-column: span 6; }
  .wg[data-span="4"], .wg[data-span="8"], .wg-col[data-span="4"], .wg-col[data-span="8"] { grid-column: span 12; }
  .ver-shell { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wg[data-span]:not([data-span="3"]), .wg-col[data-span] { grid-column: span 12; }
  .wg .big { font-size: 28px; }
  .pg-hero { width: 64px; height: 64px; font-size: 32px; }
  .pg-head.is-folded .prof-acts > :not([data-page-edit]) { display: none; } /* just Edit, or Cancel and Save */
  .pg-peek { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- a post's pull requests: where each stands on GitHub now ---------- */

.prl { display: grid; grid-template-columns: 6px minmax(0, 1fr); margin-top: 12px; border-radius: 14px; background: var(--well); overflow: hidden; }
.prl::before { content: ""; background: var(--green); }
.prl--draft::before { background: var(--line-2); }
.prl--merged::before { background: #6a3fc4; }
.prl--closed::before { background: var(--ink-3); }
.prl-in { min-width: 0; padding: 11px 14px 12px; }
.prl-top { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; }
.prl-top .how { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prl-top .chip { flex: none; margin-left: auto; }
/* its number: straight to GitHub, over a card that's a link as a whole */
.pr-gh { position: relative; z-index: 1; color: var(--ink-2); white-space: nowrap; }
.pr-gh:hover { color: var(--ink); }
.pr-gh svg.i { width: 12px; height: 12px; margin-left: 3px; transform: translateY(1.5px); }
.pr--two { position: relative; }
.pr--two .pr-go::after { content: ""; position: absolute; inset: 0; }
.prl-t { display: block; margin: 2px 0 8px; color: var(--ink); font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.prl-rows { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 13.5px; }
.prl-rows li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.prl-rows li > span { min-width: 0; overflow-wrap: anywhere; }
.prl-rows svg.i { width: 15px; height: 15px; transform: translateY(2.5px); color: var(--ink-3); }
.prl-rows .good svg.i { color: var(--green); }
.prl-rows .bad { color: var(--ink); }
.prl-rows .bad svg.i { color: var(--red); }
.prl-rows .wait svg.i { color: #b07a00; }
.prl-rows .merged svg.i { color: #6a3fc4; }
.prl-rows code { color: var(--ink-2); }
.prl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prl-acts .btn { padding: 6px 12px; font-size: 13.5px; }
.prl-acts .btn svg.i { width: 16px; height: 16px; }
.prl-acts .btn--ghost { background: none; color: var(--ink-2); }
.prl-acts .btn--ghost:hover { background: rgba(18, 24, 33, 0.05); }
.prl-acts .btn[disabled] { opacity: 0.55; cursor: default; }
.prl-x { display: grid; flex: none; place-items: center; width: 22px; height: 22px; margin-right: -4px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ink-3); opacity: 0; }
.prl:hover .prl-x, .prl-x:focus-visible { opacity: 1; }
.prl-x:hover { background: rgba(18, 24, 33, 0.06); color: var(--ink); }
.prl-x svg.i { width: 14px; height: 14px; }
@media (hover: none) { .prl-x { opacity: 1; } }
.prl--sm .prl-t { margin-bottom: 4px; }
.prl--sm .prl-rows { font-size: 13px; }
.prl--sm .prl-acts { margin-top: 8px; }
.prl--sm .prl-acts .btn { padding: 4px 10px; font-size: 13px; }
.prl-more { margin: 8px 0 0; font-size: 13px; }
.prl-more .link-btn { color: var(--ink-3); font-weight: 500; }
.prl-link { display: flex; gap: 6px; margin-top: 10px; }
.prl-link input { flex: 1; min-width: 0; padding: 7px 12px; border: 0; border-radius: 10px; outline: none; background: var(--well); font: inherit; font-size: 13.5px; }
.prl-link input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
/* agentbook's own line when one changes, among the post's results */
.updates .pr-line svg.i { color: var(--ink-2); }
.updates .pr-line.fail svg.i { color: var(--red); }
.updates .pr-line.good svg.i { color: var(--green); }
.updates .pr-line.merged svg.i { color: #6a3fc4; }
.updates .pr-line a:hover { text-decoration: underline; }
.kv dd .chip { padding: 0 6px; font-size: 11.5px; }
/* a thread's pull requests wrap onto more lines, a number never apart from its chip */
.kv dd.kv-prs { white-space: normal; }
.kv-prs > span { white-space: nowrap; margin-right: 6px; }

/* ---------- a page's routines: code an agent wrote that keeps its widgets up to date ---------- */

/* the head's chip: how it stays up to date, or what's wrong with that */
.chip--rt { background: var(--tint); color: var(--hue); font-weight: 600; }
.chip--rt-off { background: var(--sun-card); color: #7a5b00; font-weight: 600; box-shadow: inset 0 0 0 1px var(--sun-edge); }
.chip--rt-bad { background: #fbe9e6; color: var(--red); font-weight: 600; }

/* under a widget a routine keeps */
.wg-rt { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--ink-3); font-size: 12.5px; }
.wg-rt svg.i { flex: none; width: 13px; height: 13px; }
.wg-rt b { color: var(--ink-2); font-weight: 600; }
.wg-rt--stale, .wg-rt--stale b { color: #8a5f00; }
.wg.is-stale .big, .wg.is-stale .lc, .wg.is-stale .md-tbl { opacity: 0.55; }

/* a routine wherever an avatar would be: a version's, a widget's */
.av--rt { border-radius: 30%; background: var(--well); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.av--rt svg.i { width: 58%; height: 58%; }
.ver-fold--rt .dots { color: var(--hue); }
.ver-fold--rt .dots svg.i { width: 16px; height: 16px; }

/* the Routines tab */
.rt-tab { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.rt-one { max-width: 760px; }
.rtc { margin-bottom: 14px; padding: 0; overflow: hidden; }
.rtc-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 16px 18px 12px; }
.rtc-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.rtc-head small { display: block; margin-top: 1px; color: var(--ink-2); font-size: 13.5px; }
.rtc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--well); color: var(--ink-2); font: 600 13px var(--mono); }
.rtc-sw { display: flex; align-items: center; gap: 10px; }
.rtc-sw .switch { align-items: center; margin: 0; padding: 0; border: 0; }
.rtc-sw .switch b { color: var(--ink-2); font-size: 13px; }
.rtc-body { padding: 0 18px 14px 72px; }
.rtc-last { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--well); font-size: 14px; line-height: 1.5; }
.rtc-last .rt-dot { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.rtc-last a { color: var(--ink); font-weight: 600; }
.rtc-last code { padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.7); font: 12.5px var(--mono); overflow-wrap: anywhere; }
.rtc-last--bad { background: #fbe9e6; }
.rtc-last .btn { display: flex; width: fit-content; margin-top: 10px; }
.rtc-kv { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14px; }
.rtc-kv dt { color: var(--ink-3); }
.rtc-kv dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.rtc-kv .chip { margin: 0 4px 4px 0; }
.rtc-kv .av { margin-right: 4px; vertical-align: -4px; }
.rtc-folds { border-top: 1px solid var(--line); }
.rtc-fold { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 18px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.rtc-fold:first-child { border-top: 0; }
.rtc-fold:hover { background: var(--well); }
.rtc-fold svg.caret { width: 15px; height: 15px; color: var(--ink-3); transform: rotate(-90deg); transition: transform 0.12s; }
.rtc-fold[aria-expanded="true"] svg.caret { transform: none; }
.rtc-fold .muted { color: var(--ink-3); font-weight: 500; }
.rtc-in { padding: 2px 18px 16px; }
.runs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.runs td { padding: 7px 8px 7px 0; border-top: 1px solid var(--line); vertical-align: top; }
.runs tr:first-child td { border-top: 0; }
.runs td:first-child { width: 58px; color: var(--ink-2); white-space: nowrap; }
.runs td.ms { width: 56px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.runs .rt-dot { display: inline-block; margin-right: 7px; vertical-align: 1px; }
.runs .why { color: var(--ink-3); }
.runs a { color: var(--ink); font-weight: 600; }
.runs .err { color: var(--red); overflow-wrap: anywhere; }
.code-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; color: var(--ink-2); font-size: 13.5px; }
.code-meta select, .keep-agent { padding: 4px 8px; border: 0; border-radius: 8px; background: var(--well); font: inherit; font-size: 13px; }
.rt-code { max-height: 420px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--well); color: var(--ink); font: 12.5px/1.55 var(--mono); white-space: pre; overflow: auto; }
.rt-code .c { color: var(--ink-3); }
.rt-code .add, .rt-code .del { display: inline-block; min-width: calc(100% + 28px); margin: 0 -14px; padding: 0 14px; }
.rt-code .add { background: #e4f2ea; }
.rt-code .del { background: #fbe9e6; color: var(--ink-2); }
.rt-diff { margin: 0 0 10px; font-size: 13.5px; }
.rt-diff summary { margin-bottom: 8px; color: var(--ink-2); cursor: pointer; }
.rt-side .box { margin-bottom: 14px; }
.rt-side .box h3 { font-size: 16px; }
.rt-side .kv { font-size: 13.5px; }
.rt-side .kv dd { white-space: normal; }

/* a version waiting for your OK: what it changes, its test run, the diff */
.rt-change { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--sun-card); box-shadow: inset 0 0 0 1px var(--sun-edge); font-size: 14px; }
.rt-change > p { margin: 0 0 8px; }
.rt-change .q { font-size: 15px; font-weight: 600; }
.rt-change .q .av { margin-right: 6px; vertical-align: -6px; }
.rt-change .grow { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fbe9e6; color: var(--red); font-size: 13.5px; }
.rt-change .grow svg.i { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.rt-change code { font: 12.5px var(--mono); }
.rt-change .tested { color: var(--ink-2); }
.rt-change .tested .rt-dot { display: inline-block; margin-right: 7px; vertical-align: 1px; }
.rt-change .rt-code { max-height: 320px; margin: 0 0 10px; background: rgba(255, 255, 255, 0.75); }
.rt-change .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rt-change .acts .btn:not(.btn--dark) { background: rgba(255, 255, 255, 0.8); }
.rt-change .acts small { color: var(--ink-3); font-size: 12.5px; }

/* no routines yet: keep it up to date */
.keep { padding: 22px 24px; }
.keep h2 { margin: 0 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.keep > p { margin: 0 0 16px; color: var(--ink-2); }
.keep-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.keep-row > span:first-child { width: 96px; color: var(--ink-3); font-size: 14px; }
.keep .pill { border: 0; font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; }
.keep .pill.is-on { background: var(--ink); color: #fff; }
.keep-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.keep-go p { flex: 1; min-width: 220px; margin: 0; color: var(--ink-3); font-size: 13.5px; }

@media (max-width: 1000px) { .rt-tab { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .rtc-head { grid-template-columns: 40px minmax(0, 1fr); }
  .rtc-sw { grid-column: 1 / -1; }
  .rtc-body { padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) { .rtc-fold svg.caret { transition: none; } }

/* Routines (#/routines): one list of everything that runs on a schedule; one routine (#/routines/:id); New routine */
.rl { padding: 20px 24px 12px; }
.rl .page-head { margin-bottom: 14px; }
.rl .page-head .page-h { margin: 0; }
.rl-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.rl-pills .pill { border: 0; font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.rl-pills .pill span { margin-left: 2px; opacity: 0.55; font-weight: 500; }
.rl-reading { margin-left: 6px; font-size: 12.5px; }
.rl-list { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.rl-row { position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 0 14px; align-items: start; margin: 0 -10px; padding: 13px 10px; border-radius: 14px; }
.rl-row + .rl-row::before { content: ""; position: absolute; top: 0; right: 10px; left: 32px; height: 1px; background: var(--line); }
.rl-row:hover::before, .rl-row:hover + .rl-row::before { opacity: 0; }
.rl-row:hover { background: var(--well); }
.rl-row > .rt-dot { margin-top: 7px; }
.rt-dot--wait { background: var(--sun); box-shadow: 0 0 0 3px var(--sun-card); }
.rl-t { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.rl-name { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: -0.005em; text-overflow: ellipsis; white-space: nowrap; }
.rl-name::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.rl-name:hover { text-decoration: none; }
.rl-t .chip { flex: none; }
.rl-what { margin: 2px 0 0; overflow: hidden; color: var(--ink-2); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.rl-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rl-link { position: relative; z-index: 1; display: inline-flex; align-items: center; max-width: 260px; height: 24px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 550; }
.rl-link a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 100%; padding: 0 10px 0 8px; color: var(--ink-2); }
.rl-link--agent a { padding-left: 3px; }
.rl-link a:hover { color: var(--ink); text-decoration: none; }
.rl-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-link svg.i { flex: none; width: 13px; height: 13px; color: var(--ink-3); }
.rl-link .av--xs { width: 18px; height: 18px; font-size: 9px; }
.rl-emo { font-size: 12px; font-style: normal; line-height: 1; }
.rl-unlink { display: grid; flex: none; place-items: center; width: 20px; height: 20px; margin: 0 3px 0 -6px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.rl-unlink:hover { background: var(--well); color: var(--ink); }
.rl-unlink svg.i { width: 12px; height: 12px; }
.rl-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--well); color: var(--ink-3); font-size: 12px; font-weight: 550; white-space: nowrap; }
.rl-row:hover .rl-tag { background: var(--card); }
.rl-side { display: grid; justify-items: end; gap: 1px; min-width: 124px; text-align: right; }
.rl-when { margin: 0; color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.rl-next { margin: 0; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.rl-acts { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 8px; opacity: 0; transition: opacity 0.12s; }
.rl-row:hover .rl-acts, .rl-row:focus-within .rl-acts, .rl-acts.is-on { opacity: 1; }
.rl-acts .icon-btn { width: 30px; height: 30px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.rl-acts .switch { align-items: center; margin: 0; padding: 0; border: 0; }
.switch--sm .track { width: 28px; height: 16px; margin-top: 0; }
.switch--sm .track::after { top: 2px; left: 2px; width: 12px; height: 12px; }
.switch--sm input:checked + .track::after { transform: translateX(12px); }
.rl-row.is-off .rl-name, .rl-row.is-off .rl-when { color: var(--ink-2); }
.rl-row.is-off .rl-what { color: var(--ink-3); }
.rl-empty { padding: 34px 20px 26px; text-align: center; }
.rl-empty-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 14px; background: var(--well); color: var(--ink-2); }
.rl-empty p { max-width: 440px; margin: 0 auto 8px; }
.rl-empty .btn { margin-top: 8px; }
.rl-none { margin: 14px 2px 6px; font-size: 14px; }
.rl-soon { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 0 8px; padding: 0; list-style: none; }
.rl-soon a { display: flex; align-items: center; gap: 12px; margin: 0 -8px; padding: 6px 8px; border-radius: 10px; color: inherit; }
.rl-soon a:hover { background: var(--well); text-decoration: none; }
.rl-soon time { flex: none; width: 52px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.rl-soon a > span { flex: 1; min-width: 0; }
.rl-soon b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rl-soon small { color: var(--ink-3); font-size: 12px; }

/* New routine, and changing one */
.rtf { margin: 0 0 16px; padding: 18px 20px 14px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 18px rgba(18, 24, 33, 0.05); }
.rtf-top h2 { margin: 0 0 10px; color: var(--ink-3); font-size: 12.5px; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; }
.rtf-form { display: grid; gap: 10px; }
.rtf-name { width: 100%; padding: 2px 0 8px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; outline: none; }
.rtf-name:focus { border-color: var(--ink); }
.rtf-prompt { width: 100%; min-height: 92px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.5; resize: vertical; }
.rtf-prompt:focus { border-color: var(--ink); outline: none; }
.rtf-grid { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px 14px; align-items: start; margin: 6px 0 0; }
.rtf-grid dt { padding-top: 6px; color: var(--ink-3); font-size: 13px; font-weight: 550; }
.rtf-grid dd { min-width: 0; margin: 0; }
.rtf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rtf-pills .pill { padding: 5px 11px; border: 0; font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.rtf-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; color: var(--ink-3); font-size: 13px; }
.rtf-mini { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; }
.rtf-mini input, .rtf-mini select, .rtf-grid dd > select, .rtf-row select, .rtf-row input { height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; }
.rtf-grid dd > select { max-width: 100%; }
.rtf-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 8px; }
.rtf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 3px; }
.rtf-add { max-width: 240px; height: 24px; padding: 0 8px; border: 1px dashed var(--line-2); border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.rtf-help { display: block; margin-top: 6px; color: var(--ink-3); font-size: 12.5px; }
.rtf-fixed { display: flex; align-items: center; gap: 6px; margin: 0; padding-top: 5px; font-size: 13.5px; }
.rtf-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.rtf-foot small { flex: 1; color: var(--ink-3); font-size: 12.5px; }

/* one routine */
.myrt { padding: 22px 24px 18px; }
.myrt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.myrt-head h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.myrt-when { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 5px 0 0; font-size: 13.5px; }
.myrt-when .rt-dot { margin-right: 2px; }
.myrt-when b { font-weight: 600; }
.myrt-acts { display: flex; flex: none; align-items: center; gap: 8px; }
.myrt-acts .switch { align-items: center; margin: 0 4px 0 0; padding: 0; border: 0; }
.myrt-acts .switch b { color: var(--ink-2); font-size: 13px; font-weight: 550; }
/* A machine's signing: Signed, its own server, or Sign it (there's no off). */
.sign-chip { flex: none; }
dd > [data-machine-sign] { margin-left: 6px; vertical-align: middle; }
.connect-card .sign-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13.5px; }
.connect-card .sign-note svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.connect-card .btn[disabled] { opacity: 0.45; cursor: default; }
.myrt-about { margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; }
.myrt-links { margin-top: 12px; }
.myrt .rtf { margin: 16px 0 0; }
.myrt .rt-change { margin: 16px 0 0; }
.myrt-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.myrt-h { margin: 0 0 8px; font-size: 14px; font-weight: 650; }
.myrt-h .muted { font-weight: 500; }
.rt-prompt { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--well); color: var(--ink); font: 14px/1.55 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.myrt-goes { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; color: var(--ink-2); font-size: 13.5px; }
.myrt-goes svg.i { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--ink-3); }
.myrt-goes code { font: 12.5px var(--mono); }
.rt-none { margin: 0; font-size: 14px; }
.myrt .runs td:first-child { width: 150px; }
.myrt .runs .av { width: 18px; height: 18px; margin: 0 4px 0 2px; font-size: 9px; vertical-align: -4px; }
.myrt .runs a { display: inline; }
.myrt .rtc-folds { margin: 18px -24px -18px; }
.myrt .rtc-fold { padding-left: 24px; }
.myrt .rtc-in { padding: 2px 24px 16px; }

@media (hover: none) { .rl-acts { opacity: 1; } }
@media (max-width: 860px) {
  .rl { padding: 16px; }
  .rl-row { grid-template-columns: 8px minmax(0, 1fr); }
  .rl-side { display: flex; flex-wrap: wrap; grid-column: 2; align-items: center; gap: 4px 10px; margin-top: 8px; text-align: left; }
  .rl-acts { margin: 0 0 0 auto; opacity: 1; }
  .rtf-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rtf-grid dt { padding-top: 10px; }
  .rtf-row { grid-template-columns: minmax(0, 1fr); }
  .myrt-head { flex-direction: column; }
  .myrt .runs td:first-child { width: 96px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .rl-acts { transition: none; } }
.rtc-head .av--lg { width: 40px; height: 40px; }
.rt-add { display: flex; align-items: center; gap: 6px; margin: 4px 4px 14px; font-size: 13.5px; }
.rt-add svg.i { width: 14px; height: 14px; }
.rt-add a { color: var(--ink); font-weight: 600; }
.cmt-rt .cmt-bub { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.cmt-rt .cmt-bub > b a { color: var(--ink); }
.cmt-rt .av--rt { flex: none; }
.rt-code--wrap { font: 14px/1.55 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.rt-code--wrap .add, .rt-code--wrap .del { display: block; min-width: 0; }
.post-text a svg.i { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.myrt-kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14px; }
.myrt-kv dt { color: var(--ink-3); }
.myrt-kv dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.myrt-kv .chip { margin: 0 4px 4px 0; }
.myrt-kv .av--xs { margin-right: 4px; vertical-align: -5px; }
.myrt-kv .tested { margin: 0; color: var(--ink-2); }
.myrt-kv .tested .rt-dot { display: inline-block; margin-right: 7px; vertical-align: 1px; }
.myrt-fail { margin: 16px 0 0; }
/* The thread asked to fix it, under its error: the feed's row, and what cut it off. */
.myrt-fixing { margin-top: 10px; padding: 2px 12px; border-radius: 12px; background: var(--card); }
.myrt-fixing .act-row { margin: 0 -4px; padding: 8px 4px; font-weight: inherit; }
.myrt-fixing .act-row .btn { display: inline-flex; margin-top: 0; }
.myrt-fixing .ask { margin: 2px 0 10px; }
.myrt-fixing .live { margin: 2px 0 10px; }
.rl--page { padding: 18px 20px 10px; }
.rl--page .page-head { margin-bottom: 8px; }
.rl--page .page-h { font-size: 19px; }
.rtf-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.rtf-kinds .pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 0; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rtf-kinds .pill svg.i { width: 14px; height: 14px; }
.rtf-kinds .pill b { font: 600 11px var(--mono); }
.rtf-lede { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* ---------- mentions: a page or a widget named in a message (docs/widget-mentions-plan.md) ---------- */
/* A message box: grows with what's in it, up to 240px, then scrolls, as the textareas did. */
ab-box { display: block; max-height: 240px; overflow-y: auto; cursor: text; white-space: pre-wrap; overflow-wrap: anywhere; }
ab-box:empty::before { content: attr(data-ph); color: var(--ink-3); pointer-events: none; }
/* a chip: the page's emoji and the widget's (or the page's) title, in the page's color */
.mchip { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; margin: 0 1px; padding: 0 7px 0 5px; border-radius: 7px; background: color-mix(in srgb, var(--hue) 11%, white); color: var(--hue); font-size: 0.93em; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: baseline; }
a.mchip:hover { background: color-mix(in srgb, var(--hue) 18%, white); text-decoration: none; }
.mchip-em { font-size: 0.9em; font-weight: 400; }
.mchip-t { overflow: hidden; text-overflow: ellipsis; }
.mchip--gone { background: var(--well); color: var(--ink-3); }
.mchip--ws { --hue: var(--ink-2); align-items: center; }
.mchip--ws svg.i { flex: none; width: 0.95em; height: 0.95em; }
/* a task's: its tick and title, in ink; a done one crossed out. A group's is in its color, as a page's is. */
.mchip--task { --hue: var(--ink-2); align-items: center; }
.mchip--task svg.i { flex: none; width: 0.95em; height: 0.95em; }
.mchip--task.is-done .mchip-t { text-decoration: line-through; }
.mchip--task .mchip-t, .mchip--group .mchip-t { max-width: 32ch; }
.cmt-agent .mchip, .wg .mchip { background: #fff; }
:is(ab-box, .nbox) .mchip { cursor: default; user-select: all; }
/* hovering a chip rings its widget on the page */
.wg.is-named { box-shadow: 0 0 0 2px var(--hue), 0 8px 24px color-mix(in srgb, var(--hue) 16%, transparent); }
/* the list @ opens, just above the box */
.mention-pop, .cmd-pop { position: fixed; z-index: 60; display: grid; padding: 6px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(18, 24, 33, 0.16); }
.mention-pop[hidden], .cmd-pop[hidden] { display: none; }
.mp-h { padding: 4px 8px 6px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.mp-rows { display: grid; gap: 1px; max-height: 368px; overflow-y: auto; overscroll-behavior: contain; }
.mp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 7px 8px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mp-row.is-on, .mp-row:hover { background: var(--well); }
.mp-k { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--tint); color: var(--hue); }
.mp-k svg.i { width: 15px; height: 15px; }
.mp-k--page { border-radius: 50%; font-size: 14px; }
.mp-t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.mp-name { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mp-name b { font-weight: 750; }
.mp-t small { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.mp-t small code { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; }
.mp-pg { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 0 6px; border-radius: 6px; background: var(--tint); color: var(--hue); font-weight: 600; text-overflow: ellipsis; }
.mp-none { margin: 0; padding: 8px; color: var(--ink-3); font-size: 13px; }
.mp-keys { display: flex; gap: 10px; margin-top: 4px; padding: 6px 8px 2px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; }
/* a thread's guests (docs/thread-guests-plan.md): who's in its conversation, under its header; agents in the @ list */
.with-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0 50px; }
.with-h { margin-right: 2px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.with-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 28px; padding: 0 3px 0 3px; border-radius: 14px; background: var(--tint); font-size: 12.5px; }
.with-chip > a, .with-chip.is-host { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.with-chip.is-host { padding-right: 10px; }
.with-chip > a { padding-right: 2px; }
.with-chip b { font-weight: 650; }
.with-chip small { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.with-chip .av { width: 22px; height: 22px; font-size: 10.5px; }
.with-chip .av .on { min-width: 7px; min-height: 7px; }
.with-chip > a:hover b { text-decoration: underline; text-underline-offset: 2px; }
.with-x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.with-x:hover { background: color-mix(in srgb, var(--hue) 16%, white); color: var(--ink); }
.with-x svg.i { width: 13px; height: 13px; }
.with-of { display: inline-flex; align-items: center; gap: 6px; }
.with-of .av { width: 18px; height: 18px; font-size: 9px; }
.with-row .muted { font-size: 13px; }
.with-mini { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); }
.with-mini .faces { display: inline-flex; }
.with-mini .av { width: 18px; height: 18px; margin-left: -4px; font-size: 9px; box-shadow: 0 0 0 2px var(--card); }
.with-mini .av:first-child { margin-left: 0; }
.mention-pop .mp-k--av { background: none; }
.mention-pop .mp-k--av .av { width: 26px; height: 26px; font-size: 11px; }
.mention-pop .mp-h--in { padding: 8px 8px 4px; }
.mention-pop .mp-h--in:first-child { padding-top: 4px; }
.to-hint { margin: 6px 0 0 36px; color: var(--ink-2); font-size: 12.5px; }
.cmt-bub .via a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.cmt-bub .via a:hover { color: var(--ink); }
.cmt-meta .cmt-to a { color: inherit; }
@media (max-width: 600px) { .with-row { margin-left: 0; } }
@media (hover: none) { .mp-keys { display: none; } }

/* / in a thread's reply box: what its agent can run (docs/slash-commands-plan.md), in the @ list's popup */
.cmd-pop .mp-h { display: flex; gap: 8px; }
.cmd-pop .mp-h span:last-child { margin-left: auto; font-weight: 500; }
.cmd-pop .mp-row { align-items: flex-start; }
.mp-k--cmd { font: 600 14px var(--mono); }
.cmd-name { overflow: hidden; font: 500 13.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.cmd-name b { font-weight: 700; }
.cmd-name .cmd-hint { margin-left: 6px; color: var(--ink-3); font-weight: 400; }
.cmd-pop .mp-t small { display: block; overflow: hidden; color: var(--ink-2); font-size: 12.5px; text-overflow: ellipsis; }
.cmd-from { flex: none; margin-top: 2px; }
.cmd-from--plugin { background: var(--tint); color: var(--hue); font-weight: 600; }
.cmd-from--project { background: #e7f0fb; color: #2a5ea8; font-weight: 600; }
.cmd-pop .mp-row.is-off { cursor: default; opacity: 0.75; }
.cmd-pop .mp-row.is-off:hover { background: none; }
.cmd-pop .mp-row.is-off small { color: var(--ink-3); }
.cmd-pop .mp-none b { color: var(--ink); }
/* what the command picked takes, after the cursor, until you write it */
.cmt-in .text-box { position: relative; }
.cmd-ghost { position: absolute; overflow: hidden; color: var(--ink-3); font-size: 14px; line-height: 1.45; text-overflow: ellipsis; white-space: pre; pointer-events: none; }
.cmd-note { margin: 6px 0 0 36px; color: var(--ink-2); font-size: 12.5px; }
.cmd-note.is-bad { color: var(--red); }
.cmd-note code { font-size: 12px; }
.cmd-note svg.i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
/* on the thread: the command you ran, and what it printed */
.cmt-bub code.cmd { padding: 1px 6px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 13px var(--mono); }
.cmt-bub .via code { font-size: 11.5px; }
.cmt-cmd .cmt-bub { width: 100%; }
.cmt-cmd .md pre { background: rgba(255, 255, 255, 0.72); }

/* ---------- groups: a space many agents share ---------- */

/* a group's face: a rounded square, so it never reads as an agent or a person */
.gr-ico { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--tint); font-size: 15px; line-height: 1; }
.gr-hero { display: grid; flex: none; place-items: center; width: 96px; height: 96px; border-radius: 26px; background: var(--tint); font-size: 46px; line-height: 1; }
.chip--group { gap: 4px; background: var(--tint); color: var(--hue); font-weight: 600; }
.chip--group:hover { text-decoration: none; filter: brightness(0.97); }

/* every group */

/* Pages and Groups: a list each, as People's and Notes' are. A row is its face, its name with what's going on in it
   now, a line under that, then what it has (a page's numbers, a group's threads and files), who's in it and when it
   last changed, in columns that line up from row to row. */
/* beside the sidebar, taking the rest of the width, as Worktrees does; without the sidebar, all of it. People too. */
@media (min-width: 1181px) {
  .ls-shell { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .ls-shell { grid-template-columns: minmax(0, 1fr); }
}
.ls-page { --ls-nums: 340px; min-width: 0; }
.ls-page .page-head { justify-content: flex-start; min-height: 40px; margin: 0 0 14px; }
.ls-page .compose, .ls-page .gnf { margin-bottom: 14px; }
.ls { container-type: inline-size; padding: 6px 0; overflow: hidden; }
.ls .ls-pills { margin: 6px 14px 6px; }
.ls-list > div + div > .ls-r { border-top: 1px solid var(--line); }
.ls-r { display: grid; grid-template-columns: 40px minmax(0, 1fr) var(--ls-nums) 92px 44px; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 12px 20px; color: inherit; }
.ls-r:hover { background: #f7f8f9; text-decoration: none; }
.ls-r.is-off { opacity: 0.55; }
.ls-face { grid-row: 1 / span 2; width: 40px; height: 40px; font-size: 20px; }
.gr-ico.ls-face { border-radius: 11px; }
.ls-t { display: flex; grid-column: 2; grid-row: 1; align-items: center; gap: 8px; min-width: 0; line-height: 1.35; }
.ls-t b { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ls-t .st-pill { flex: none; }
.ls-sub { grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; color: var(--ink-2); font-size: 13px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
/* a row with nothing to show there gets the room */
.ls-nums:empty { display: none; }
.ls-r:has(> .ls-nums:empty) > .ls-t, .ls-r:has(> .ls-nums:empty) > .ls-sub { grid-column: 2 / span 2; }
.ls-nums { display: flex; grid-column: 3; grid-row: 1 / span 2; gap: 4px; justify-content: flex-end; min-width: 0; }
.ls-num { display: grid; flex: 0 1 auto; gap: 1px; min-width: 0; max-width: 112px; padding: 5px 10px 6px; border-radius: 10px; background: color-mix(in srgb, var(--tint) 45%, white); }
.ls-num small { overflow: hidden; color: var(--ink-3); font-size: 11.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ls-num b { overflow: hidden; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ls-num b i { margin-left: 2px; color: var(--ink-3); font-size: 12px; font-style: normal; font-weight: 550; letter-spacing: 0; }
.ls-counts { flex-direction: column; gap: 1px; align-items: flex-end; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.ls-page--groups { --ls-nums: 90px; }
.ls-avs { display: flex; grid-column: 4; grid-row: 1 / span 2; justify-content: flex-end; min-width: 0; }
.ls-avs .avs .av { margin-left: -3px; }
.ls-avs .avs .av:first-child { margin-left: 0; }
.ls-when { display: grid; grid-column: 5; grid-row: 1 / span 2; justify-items: end; color: var(--ink-3); font-size: 12.5px; line-height: 1.35; white-space: nowrap; }
.ls-when b { font-weight: 500; }
.ls-when small { font-size: 11.5px; }
.ls-empty { padding: 14px 20px 16px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.ls-empty b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; }
.ls-empty p { max-width: 640px; margin: 0; }
/* a narrower list (beside the sidebar, say) shows a page's first two numbers */
@container (max-width: 940px) {
  .ls-r:has(.ls-num) { --ls-nums: 232px; }
  .ls-num:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .ls-r { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 12px; row-gap: 2px; padding: 11px 16px; }
  .ls-face { grid-row: 1 / span 2; width: 36px; height: 36px; font-size: 18px; }
  .ls-t, .ls-r:has(> .ls-nums:empty) > .ls-t { grid-column: 2; grid-row: 1; }
  .ls-sub, .ls-r:has(> .ls-nums:empty) > .ls-sub { grid-column: 2 / span 2; grid-row: 2; }
  .ls-when { grid-column: 3; grid-row: 1; align-self: start; padding-top: 1px; }
  /* a long name keeps its line; what's going on in it goes under it */
  .ls-t { flex-wrap: wrap; row-gap: 4px; }
  .ls-t b { max-width: 100%; }
  .ls-page .page-sub { margin: 0 4px; }
  .ls-when small, .ls-avs { display: none; }
  .ls-nums { grid-column: 2 / span 2; grid-row: 3; justify-content: flex-start; margin-top: 6px; }
  .ls-num:nth-child(3) { display: grid; }
  .ls-counts { flex-direction: row; gap: 10px; margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
  .ls .ls-pills { margin: 4px 10px 6px; }
}

/* making one, and editing its name and brief */
.gnf form { display: grid; gap: 12px; }
.gnf h3 { margin: 0; }
.gnf-name { display: flex; gap: 8px; }
.gnf input, .gnf textarea, .gnf-name input { width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--well); font: inherit; font-size: 14.5px; outline: none; }
.gnf textarea { resize: vertical; }
.gnf-name input.gnf-emoji { flex: none; width: 56px; padding: 8px; font-size: 20px; text-align: center; }
.gnf input:focus, .gnf textarea:focus, .gnf-name input:focus, .brief-edit:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.gnf-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gnf-who > .muted { margin-right: 4px; font-size: 13.5px; }
.gnf-who label { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; border-radius: 999px; background: var(--well); font-size: 13.5px; font-weight: 550; cursor: pointer; }
.gnf-who label:has(input:checked) { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); }
.gnf-who input { display: none; }
.gnf-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.gnf-acts p { flex: 1; min-width: 200px; margin: 0; font-size: 13px; }
.gnf-name input[name="name"] { font-weight: 600; }
.brief-edit { width: 100%; min-height: 220px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--well); font: 13.5px/1.55 var(--mono); resize: vertical; outline: none; }

/* a group's threads tab */
/* a group's home, beside its threads bar */
/* a group's Threads: its threads in the middle, as the feed's; what it is, who's in it and its files on the left; its
   tasks and your notes on the right. Narrower, the right's cards go under the left's; on a phone, all of them are in
   the drawer. Each column has the other's cards (keyed narrow-…), shown only then. */
.gr-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.gr-side > div:empty { display: none; }
.gr-shell > .col-side > [data-key^="narrow-"] { display: none; }
@media (max-width: 1180px) {
  .shell.gr-shell { grid-template-columns: 280px minmax(0, 1fr); }
  .shell.gr-shell > .col-side.gr-side { display: grid; }
  .shell.gr-shell > .rail { display: none; }
  .gr-shell > .gr-side > [data-key^="narrow-"]:not(:empty) { display: block; }
}
@media (max-width: 860px) {
  .shell.gr-shell { grid-template-columns: minmax(0, 1fr); }
  .shell.gr-shell > .col-side.gr-side { display: none; }
  .shell.gr-shell > .rail { display: grid; }
  .gr-shell > .rail > [data-key^="narrow-"]:not(:empty) { display: block; }
}
.gr-about .md > :first-child { margin-top: 0; }
.gr-about .md > :last-child { margin-bottom: 0; }
.gr-about .brief { font-size: 14px; }
.gr-ref .gr-ico { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
/* in menus and on their buttons, as a page's is */
.fb-opt .gr-ico, .launch-opts .opt .gr-ico { width: 18px; height: 18px; border-radius: 5px; font-size: 11px; }
.fb-row .gr-ico { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }
.fb-menu.fb-menu--ctx { width: 290px; }
.gnote-form { margin: 0 0 8px; }
.gnote-form textarea { min-height: 40px; padding: 10px 4px 10px 16px; font-size: 14.5px; }
.gnote-form .icon-btn { width: 32px; height: 32px; margin: 4px 0; }
.gnote-form .compose-reach { margin: 6px 4px 0; }
.gr-add-files { margin-top: 10px; }
.compose-reach { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.compose-reach svg.i { width: 15px; height: 15px; color: var(--ink-3); }
.brief { font-size: 14.5px; line-height: 1.5; }
.brief-by { margin: 10px 0 0; color: var(--ink-3); font-size: 12.5px; }
.mem { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.mem > span:not(.av) { flex: 1; min-width: 0; }
.mem b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mem small { display: block; overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.mem small.sun { color: #7a5b00; font-weight: 600; }
.gnotes h3 { flex-wrap: wrap; gap: 4px 10px; }
.gnotes h3 small { color: var(--ink-3); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.gnote { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.gnote:first-of-type { padding-top: 2px; border-top: 0; }
.gnote .av { grid-row: span 2; }
.gnote-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-3); font-size: 12.5px; }
.gnote-who b { color: var(--ink); font-size: 13.5px; font-weight: 650; }
.gnote-who .icon-btn { width: 24px; height: 24px; margin-left: auto; color: var(--ink-3); }
.gnote-who .to { padding: 0 7px; border-radius: 6px; background: var(--tint); color: var(--hue); font-size: 12px; font-weight: 650; }
.gnote p { margin: 1px 0 0; line-height: 1.45; overflow-wrap: anywhere; }

/* a group's files, in the middle of its Group tab */
.gf-crumbs { margin: 0 0 -4px; }
.gf-crumbs a { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; color: var(--ink-2); font-weight: 550; }
.gf-crumbs a:hover { background: var(--well); color: var(--ink); text-decoration: none; }
.gf-crumbs a svg.i { width: 15px; height: 15px; }
.gf-crumbs .sep { color: var(--ink-3); }
.gf-list h3 .seg { align-self: center; }
.gf-where { margin: -6px 0 10px; color: var(--ink-3); font-size: 13px; overflow-wrap: anywhere; }
.gf-where code { font-size: 12px; }
.gf-items { margin: 0; padding: 0; list-style: none; }
.gf-items > li + li { border-top: 1px solid var(--line); }
.gf-row { display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 8px; border-radius: 9px; color: inherit; }
.gf-row:hover { background: var(--well); text-decoration: none; }
.gf-row.is-on { background: color-mix(in srgb, var(--hue) 9%, white); }
.gf-row > svg.i { flex: none; width: 17px; height: 17px; color: var(--ink-3); }
.gf-row.is-dir > svg.i { color: var(--hue); }
.gf-row .nm { flex: 1; min-width: 0; font-size: 14px; }
.gf-row .nm b { display: block; overflow: hidden; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.gf-row .nm small { display: block; overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.gf-row time { flex: none; color: var(--ink-3); font-size: 12.5px; }
.gf-row time.is-fresh::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: var(--hue); }
.gf-drop { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 12px; border: 1.5px dashed var(--line-2); border-radius: 12px; color: var(--ink-2); font-size: 13.5px; }
.gf-drop svg.i { color: var(--ink-3); }
.gf-view { overflow: hidden; }
.gf-vh { display: flex; align-items: center; gap: 6px; padding: 14px 12px 14px 18px; border-bottom: 1px solid var(--line); }
.gf-vh .ext { display: grid; flex: none; place-items: center; width: 38px; height: 38px; margin-right: 6px; border-radius: 10px; background: var(--well); color: var(--ink-2); font-size: 10.5px; font-weight: 700; }
.gf-vh > div { flex: 1; min-width: 0; }
.gf-vh b { display: block; overflow: hidden; font-size: 16px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.gf-vh small { color: var(--ink-3); font-size: 12.5px; }
.gf-doc { max-height: 480px; margin: 0; padding: 18px 22px 8px; overflow: auto; font-size: 14.5px; line-height: 1.55; }
.gf-pre { font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.gf-pic { display: grid; place-items: center; padding: 16px; background: var(--well); }
.gf-pic img { display: block; max-width: 100%; max-height: 480px; border-radius: 8px; }
.gf-sec { padding: 4px 18px 16px; }
.vers { margin: 0; padding: 0; list-style: none; }
.vers li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.vers li:first-child { border-top: 0; }
.vers li > .av { grid-row: span 2; }
.vers p { margin: 0; color: var(--ink-3); font-size: 12.5px; }
.vers .acts { display: flex; grid-row: span 2; align-items: center; gap: 4px; }
.vers b { font-family: var(--mono); font-size: 12px; font-weight: 600; }

/* what a thread in a group is told */
.ctx { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--well); color: var(--ink-2); font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ctx-h { margin: 14px 0 6px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.ctx-h:first-of-type { margin-top: 2px; }
.ctx-note { margin: 10px 0 0; font-size: 13px; }

/* a thread's page: its group */
.gr-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.side-p { margin: 0 0 8px; font-size: 13px; }
.related .side-p a, .related .rail-h a { display: inline; padding: 0; border: 0; font-size: inherit; }
.rail-card .opt { margin-top: 6px; }

@media (max-width: 640px) { .gr-hero { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; } }
/* A post whose machine is off, and what waits for it (step 6 of docs/client-server-plan.md). */
.ask--off { background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.ask--off .ask-flag { color: var(--ink-2); font-weight: 500; }
.ask--off .ask-flag b { color: var(--ink); font-weight: 600; }
.ask .rows.waiting { margin: 4px 0 0; }
.ask .rows.waiting li { padding: 6px 0; }
/* A machine's page. */
.machine-head .page-h { display: flex; align-items: center; gap: 10px; }
.machine-head .page-h .chip { font-size: 12px; }
.rows.audit li { align-items: flex-start; }
.rows.audit .chip { min-width: 74px; justify-content: center; }
ul.plain { margin: 0; padding: 0; list-style: none; }
ul.plain li + li { margin-top: 2px; }
.compose-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; }
.as-of { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--ink-3); font-size: 12.5px; }
.machine-page .card + .card { margin-top: 16px; }
.machine-name { display: flex; align-items: center; gap: 8px; }

/* ---------- a thread's terminal (terminal.js): a shell in its folder, docked at the foot of its page ---------- */

body.has-term { padding-bottom: var(--term-h, 0px); }
.term-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 25; display: flex; flex-direction: column; background: var(--card); box-shadow: 0 -1px 0 var(--line-2), 0 -8px 28px rgba(18, 24, 33, 0.08); }
.term-grip { position: absolute; top: -5px; right: 0; left: 0; height: 10px; cursor: ns-resize; touch-action: none; }
.term-grip::after { content: ""; position: absolute; top: 3px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line-2); opacity: 0; transition: opacity 0.15s; }
.term-dock:hover .term-grip::after, .term-grip:active::after { opacity: 1; }
.term-head { display: flex; flex: none; align-items: center; gap: 12px; height: 44px; padding: 0 8px 0 16px; box-shadow: 0 1px 0 var(--line); }
.term-title { display: inline-flex; flex: none; align-items: center; gap: 7px; font-size: 14px; }
.term-title b { font-weight: 600; }
.term-where { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.term-where code { overflow: hidden; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.term-where small { flex: none; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.term-state { flex: none; margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.term-acts { display: inline-flex; flex: none; gap: 2px; }
.term-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--ink-2); }
.term-btn:hover { background: var(--well); color: var(--ink); }
.term-body { position: relative; flex: 1; min-height: 0; padding: 8px 6px 6px 16px; }
.term-screen { width: 100%; height: 100%; }

.term-ended { position: absolute; right: 16px; bottom: 12px; left: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 13.5px; }
.term-ended[hidden] { display: none; }
.term-dock.is-ended .term-screen { opacity: 0.6; }
.term-dock.is-min { display: none; }
@media (max-width: 860px) {
  .term-where small { display: none; }
  .term-body { padding-left: 10px; }
}
/* ---------- notes (docs/notes-plan.md): you write them a block at a time; comments sit beside their words ---------- */

.note-main { min-width: 0; }
.note-rail { position: relative; min-width: 0; }
.note-card { position: relative; padding: 16px 40px 28px 64px; }
@media (max-width: 640px) { .note-card { padding: 14px 18px 22px 20px; } .note-card .blk-g { display: none; } }

/* its head: who's in it, when it changed, its markdown, its version; its icon and title */
.nh-tools { display: flex; align-items: center; gap: 4px; margin: 0 -24px 12px -40px; color: var(--ink-3); font-size: 13px; }
.nh-tools .avs { display: flex; margin-right: 6px; }
.nh-tools .avs .av { width: 24px; height: 24px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--card); }
.nh-tools .avs > * + * { margin-left: -6px; }
.nh-tools .avs a.is-live .av { animation: nb-breathe 1.6s ease-in-out infinite; }
@keyframes nb-breathe { 50% { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px color-mix(in srgb, var(--hue) 35%, transparent); } }
.nh-tools .sp { flex: 1; }
.nh-tools .btn--sm { gap: 5px; padding: 4px 9px; background: none; color: var(--ink-2); font-size: 12.5px; }
.nh-tools .btn--sm:hover { background: var(--well); }
.nh-tools .btn--sm.is-on { background: var(--ink); color: #fff; }
.nh-tools .btn--sm.is-quiet:hover { background: none; }
.nh-tools svg.i { width: 15px; height: 15px; }
@media (max-width: 640px) { .nh-tools { margin: 0 -8px 8px -6px; } .nh-tools .btn--sm span { display: none; } }
.nh-emoji { display: block; margin: 2px 0 4px -6px; padding: 2px 6px; border: 0; border-radius: 12px; background: none; font-size: 44px; line-height: 1.15; }
.nh-emoji:hover { background: var(--well); }
/* who sees it, at the end of its tools (the card's top-right corner); its Share panel under them; and a note you only read */
.nh-tools > .vis-corner { margin-left: 2px; }
.nt-share { margin: -4px 0 18px; padding: 0 0 14px; border-top: 0; border-bottom: 1px solid var(--line); }
.nt-share .tk-person small a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); }
.note-shell.is-ro .blk-g { display: none; }
.note-shell.is-ro .nh-emoji { pointer-events: none; }
.note-shell.is-ro .tick-box, .note-shell.is-ro .co-em { pointer-events: none; }
.nh-title { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); outline: none; font-size: 36px; font-weight: 780; letter-spacing: -0.03em; line-height: 1.12; overflow-wrap: anywhere; }
.nh-title:empty::before { content: attr(data-ph); color: var(--line-2); }
@media (max-width: 640px) { .nh-title { font-size: 28px; } .nh-emoji { font-size: 36px; } }

/* its blocks */
.doc-b { position: relative; font-size: 16px; line-height: 1.65; }
.blk { position: relative; padding-left: calc(var(--depth, 0) * 26px); }
.blk-g { position: absolute; top: 3px; left: -54px; display: flex; opacity: 0; transition: opacity 0.1s; }
.blk:hover > .blk-g, .blk.is-menu > .blk-g { opacity: 1; }
.blk-g button { display: grid; place-items: center; width: 24px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-3); }
.blk-g button:hover { background: var(--well); color: var(--ink); }
.blk-g svg.i { width: 16px; height: 16px; }
.blk-g .blk-grip { cursor: grab; }
.blk-g .blk-grip svg.i { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.bt { min-height: 1.65em; padding: 3px 2px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.bt:empty:focus::before, .doc-b.is-empty .bt:empty::before { content: attr(data-ph); color: var(--ink-3); pointer-events: none; }
.doc-b.is-empty .blk--p .bt:empty::before { content: "Write, or type / for blocks"; }
.blk--h1 .bt { margin-top: 20px; font-size: 27px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.25; }
.blk--h2 .bt { margin-top: 16px; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.blk--h3 .bt { margin-top: 10px; font-size: 17.5px; font-weight: 650; line-height: 1.35; }
.blk--h1 > .blk-g { top: 26px; } .blk--h2 > .blk-g { top: 20px; } .blk--h3 > .blk-g { top: 12px; }
.blk--ul, .blk--ol, .blk--todo { display: flex; align-items: flex-start; }
.blk--ul .bt, .blk--ol .bt, .blk--todo .bt { flex: 1; min-width: 0; }
.bm { flex: none; width: 26px; padding: 3px 4px 0 0; text-align: center; user-select: none; }
.blk--ul .bm { font-size: 1.15em; line-height: 1.45; }
.blk--ol .bm { padding-right: 8px; text-align: right; }
.blk--todo .tick-box { margin: 6px 8px 0 4px; }
.blk--todo.is-done .tick-box { border-color: var(--ink); background: var(--ink); }
.blk--todo.is-done .bt { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.blk--quote .bt { margin: 4px 0; padding-left: 16px; box-shadow: inset 3px 0 0 var(--ink); }
.blk--callout { display: flex; gap: 6px; margin: 8px 0; padding: 10px 14px 10px 8px; border-radius: 12px; background: var(--well); }
.blk--callout .co-em { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; font-size: 18px; line-height: 1; }
.blk--callout .co-em:hover { background: rgba(18, 24, 33, 0.06); }
.blk--callout .bt { flex: 1; min-width: 0; }
.blk--callout > .blk-g { top: 13px; }
.blk--code pre.bt { margin: 6px 0; padding: 12px 14px; border-radius: 10px; background: var(--well); font: 13.5px/1.6 var(--mono); tab-size: 2; }
.blk--code .lang { position: absolute; top: 9px; right: 10px; width: 90px; padding: 2px 6px; border: 0; border-radius: 6px; outline: none; background: none; color: var(--ink-3); font: 500 11.5px var(--mono); text-align: right; }
.blk--code .lang:focus { background: #fff; color: var(--ink); }
.blk--hr hr { margin: 14px 2px; border: 0; border-top: 1px solid var(--line-2); }
.blk--hr > .blk-g { top: 2px; }
.nb-sub { display: flex; align-items: center; gap: 8px; margin: 1px 0; padding: 4px 6px; border-radius: 8px; font-weight: 600; }
.nb-sub:hover { background: var(--well); text-decoration: none; }
.nb-sub span:last-child { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.nb-sub .em { font-size: 17px; }
.nb-raw { margin: 6px 0; font-size: 15px; }
.blk.is-drop-above::before, .blk.is-drop-below::after { content: ""; position: absolute; right: 0; left: 0; height: 3px; border-radius: 2px; background: #6aa3f0; }
.blk.is-drop-above::before { top: -2px; }
.blk.is-drop-below::after { bottom: -2px; }
.blk.is-dragging { opacity: 0.35; }
.blk.is-flash { animation: nb-flash 1.1s ease-out; }
@keyframes nb-flash { 0%, 30% { background: rgba(255, 210, 63, 0.28); } 100% { background: transparent; } }
.bt code { padding: 1px 5px; border-radius: 5px; background: var(--well); font-size: 0.86em; }
.bt a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.md-src { display: block; width: 100%; min-height: 560px; margin: 0; padding: 14px 16px; border: 0; border-radius: 12px; outline: none; background: var(--well); color: var(--ink); font: 13.5px/1.65 var(--mono); resize: vertical; tab-size: 2; }
.md-src:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.md-hint { margin: 8px 2px 0; color: var(--ink-3); font-size: 12.5px; }
.note-foot { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }
.note-foot .sp { flex: 1; }
.note-foot svg.i { width: 12px; height: 12px; margin: 0 3px -1px 0; }

/* a comment's words, shaded: yours grey, an agent's in its color, yellow when its thread waits on you */
.cm { border-radius: 3px; background: rgba(18, 24, 33, 0.055); box-shadow: inset 0 -2px 0 rgba(18, 24, 33, 0.26); cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background 0.12s; }
.cm.is-agent { background: color-mix(in srgb, var(--hue) 8%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--hue) 50%, transparent); }
.cm.is-on, .cm.is-hover { background: rgba(18, 24, 33, 0.12); box-shadow: inset 0 -2px 0 var(--ink); }
.cm.is-agent.is-on, .cm.is-agent.is-hover { background: color-mix(in srgb, var(--hue) 17%, transparent); box-shadow: inset 0 -2px 0 var(--hue); }
.cm.is-sun { background: rgba(255, 210, 63, 0.42); box-shadow: inset 0 -2px 0 #d9a400; }
/* what an agent suggests: struck out and written in, in its color, until you accept or reject it */
ins.sg { color: var(--hue); text-decoration: none; background: color-mix(in srgb, var(--hue) 11%, transparent); box-shadow: inset 0 -1.5px 0 var(--hue); }
del.sg { color: color-mix(in srgb, var(--hue) 55%, var(--ink-3)); text-decoration: line-through; text-decoration-color: var(--hue); }

/* the selection's toolbar and the menus (/ in a block, @ in a comment, a block's, an emoji) */
.nb-tb { position: fixed; z-index: 70; display: flex; align-items: center; gap: 1px; padding: 4px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 10px 28px rgba(18, 24, 33, 0.16); }
.nb-tb[hidden] { display: none; }
.nb-tb button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.nb-tb button:hover { background: var(--well); }
.nb-tb .f-b { font-weight: 800; } .nb-tb .f-i { font-family: Georgia, serif; font-style: italic; } .nb-tb .f-s { text-decoration: line-through; } .nb-tb .f-c { font: 600 12px var(--mono); }
.nb-tb .sep { width: 1px; height: 18px; margin: 0 3px; background: var(--line-2); }
.nb-tb svg.i { width: 15px; height: 15px; }
.nb-tb .av { width: 18px; height: 18px; font-size: 9px; }
.nb-tb input { width: 240px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; outline: none; background: var(--well); font: inherit; font-size: 13px; }
.nb-pop { position: fixed; z-index: 80; display: grid; width: 300px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(18, 24, 33, 0.16); }
.nb-pop[hidden] { display: none; }
.nb-pop .mp-rows { max-height: 340px; }
.nb-pop .mp-k { font-size: 12px; font-weight: 750; }
.nb-pop .mp-k--txt { background: var(--well); color: var(--ink-2); }
.nb-pop .mp-k--av { background: none; }
.nb-pop .mp-k--av .av { width: 26px; height: 26px; font-size: 11px; }
.nb-pop .mp-k svg.i { width: 15px; height: 15px; }
.nb-pop .mp-k .av--xs { width: 22px; height: 22px; }
.nb-pop .mp-row.is-red { color: var(--red); }
.nb-pop .mp-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.nb-pop.is-emoji { width: 248px; }
.nb-pop.is-at { width: 360px; }
.nb-pop.is-emoji .mp-rows { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.nb-em { height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; font-size: 20px; }
.nb-em:hover, .nb-em.is-on { background: var(--well); }

/* comments: beside their words (A), or one list (B) */
.cr-h { display: flex; align-items: center; gap: 8px; height: 30px; margin: 0 4px 10px; color: var(--ink-3); font-size: 13px; font-weight: 550; }
.cr-h b { color: var(--ink); font-size: 14px; font-weight: 650; }
.cr-h .chip--sun { padding: 0 7px; }
.cr-h button { margin-left: auto; padding: 3px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.cr-h button:hover { background: rgba(18, 24, 33, 0.06); color: var(--ink); }
.cr-empty { margin: 0 4px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.cr-cards { position: relative; }
.note-rail.is-margin .cr-cards .cc { position: absolute; right: 0; left: 0; }
.cr-list { display: grid; gap: 8px; }
@media (min-width: 861px) { .note-rail:not(.is-margin) > .cr-list-wrap { position: sticky; top: 78px; max-height: calc(100vh - 96px); margin: -4px; padding: 4px 4px 12px; overflow-y: auto; } }
@media (max-width: 860px) { .note-rail { margin-top: 4px; } }
.cc { position: relative; padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); font-size: 13.5px; line-height: 1.45; cursor: pointer; transition: top 0.18s ease, transform 0.15s ease, box-shadow 0.12s; }
.cc:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
.cc.is-on { z-index: 3; box-shadow: 0 0 0 1px var(--line), 0 12px 30px rgba(18, 24, 33, 0.13); cursor: default; }
.note-rail.is-margin .cc.is-on { transform: translateX(-10px); }
.cc.is-sun { background: var(--sun-card); box-shadow: 0 0 0 1.5px var(--sun-edge), var(--shadow); }
.cc.is-sun.is-on { box-shadow: 0 0 0 1.5px var(--sun-edge), 0 12px 30px rgba(18, 24, 33, 0.13); }
.cc.is-res { background: rgba(255, 255, 255, 0.6); box-shadow: none; cursor: default; }
.cc-q { display: -webkit-box; margin: -1px 0 8px; padding-left: 9px; overflow: hidden; box-shadow: inset 2px 0 0 var(--line-2); color: var(--ink-3); font-size: 12.5px; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.cc-q.is-gone { font-style: italic; }
.cc-m { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 8px; }
.cc-m + .cc-m, .cc-fold + .cc-m { margin-top: 9px; }
.cc-m > .av { width: 22px; height: 22px; font-size: 10px; }
.cc-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; line-height: 1.35; white-space: nowrap; }
.cc-who b { font-weight: 650; }
.cc-who .th { overflow: hidden; color: var(--hue); font-size: 12px; font-weight: 600; text-overflow: ellipsis; }
.cc-who time { margin-left: auto; padding-left: 6px; color: var(--ink-3); font-size: 12px; }
.cc-t { margin: 1px 0 0; overflow-wrap: anywhere; }
.cc:not(.is-on):not(.is-sun) .cc-t { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.cc-t .mchip { font-size: 0.95em; }
.cc-fold { margin: 7px 0 0 30px; color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.cc-diff { display: -webkit-box; margin: 6px 0 0; overflow: hidden; font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.cc-diff del { color: var(--ink-3); }
.cc-diff ins { color: var(--hue, var(--ink)); text-decoration: none; background: color-mix(in srgb, var(--hue, var(--ink)) 10%, transparent); }
.cc-sg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 5px 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--hue) 8%, white); color: var(--hue); font-size: 12.5px; font-weight: 600; }
.cc-sg > span { flex: 1; min-width: 0; }
.cc-sg .btn { padding: 4px 10px; font-size: 12.5px; }
.cc-sg .btn--dark { background: var(--hue); }
.cc-sg .btn--line { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 30%, white); }
.cc-sg.is-settled { gap: 5px; padding: 5px 10px; background: var(--well); color: var(--ink-3); }
.cc-sg.is-settled > span { flex: none; }
.cc-sg svg.i { width: 14px; height: 14px; }
.cc-live { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--hue, var(--ink-3)) 8%, white); font-size: 13px; }
.cc-live span { flex: 1; min-width: 0; }
.cc-live b { font-weight: 650; }
.cc-live .icon-btn { width: 26px; height: 26px; border-radius: 7px; }
.cc-live .icon-btn svg.i { width: 13px; height: 13px; }
.cc-live--ask { background: rgba(255, 255, 255, 0.75); }
.cc-live--err { background: #fbe9e5; color: var(--red); }
.cc-box { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; padding: 5px 5px 5px 10px; border-radius: 12px; background: var(--well); cursor: text; }
.cc.is-sun .cc-box { background: rgba(255, 255, 255, 0.75); }
.nbox { flex: 1; min-width: 0; min-height: 22px; max-height: 160px; padding: 3px 0; overflow-y: auto; outline: none; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.nbox:empty::before { content: attr(data-ph); color: var(--ink-3); pointer-events: none; }
.cc-box .icon-btn { width: 28px; height: 28px; border-radius: 8px; color: var(--ink); }
.cc-box .icon-btn svg.i { width: 15px; height: 15px; }
.cc-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; padding-left: 16px; background: linear-gradient(to right, transparent, var(--card) 12px); opacity: 0; }
.cc.is-sun .cc-acts { background: linear-gradient(to right, transparent, var(--sun-card) 12px); }
.cc:hover .cc-acts, .cc.is-on .cc-acts { opacity: 1; }
.cc-acts .icon-btn { width: 26px; height: 26px; border-radius: 7px; }
.cc-acts .icon-btn svg.i { width: 14px; height: 14px; }
.cr-res { margin: 0 0 14px; }
.cr-res .cc + .cc { margin-top: 8px; }
.cr-res h4 { margin: 0 4px 8px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }

/* every note: one list, what waits on you first */
.nl { padding: 18px 20px 10px; }
.nl-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.nl-head h1 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.nl-head .n { color: var(--ink-3); font-size: 15px; font-weight: 500; }
.nl-add { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; height: 42px; margin: 0 0 8px; padding: 0 10px; border-radius: 11px; background: var(--well); color: var(--ink-3); }
.nl-add:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.nl-add svg.i { width: 17px; height: 17px; }
.nl-add input { min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 14px; color: var(--ink); }
.nl-pills { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 4px; }
.nl-pills button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.nl-pills button:hover { background: var(--well); }
.nl-pills button.is-on { background: var(--ink); color: #fff; }
.nl-pills .n { opacity: 0.6; font-weight: 500; }
.nl-list { margin: 0; padding: 0; list-style: none; }
.nl-list li + li { border-top: 1px solid var(--line); }
.nl-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 1px 12px; padding: 10px 4px; border-radius: 10px; color: inherit; }
.nl-r:hover { background: #f7f8f9; text-decoration: none; }
.nl-r.is-needs { background: var(--sun-card); }
.nl-em { grid-row: span 2; padding-top: 1px; font-size: 21px; line-height: 1.2; text-align: center; }
.nl-t { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.nl-t .in { color: var(--ink-3); font-weight: 500; }
.nl-age { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.nl-age .vis-corner--sm { margin: -4px -4px -4px 0; }
.nl-sub { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; white-space: nowrap; }
.nl-sub > * { flex: none; }
.nl-sub .who { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 600; }
.nl-sub .av { width: 16px; height: 16px; font-size: 8px; }
.nl-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); opacity: 0.6; }
.nl-sub .start { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nl-st { display: flex; justify-content: flex-end; }
.nl-empty p, .nl-none { margin: 6px 4px 12px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* threads you start yourself (docs/your-threads-plan.md): your face where an agent's would be, who's in it at the
   head's right, and over the box who your reply goes to */
.talk-head .post-who > b, .talk-head .post-who > a > b { font-size: 15px; font-weight: 650; }
.talk-with { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: auto; padding-top: 4px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.talk-with .faces { display: inline-flex; }
.talk-with .faces > a { display: inline-flex; margin-left: -6px; border-radius: 50%; }
.talk-with .faces > a:first-child { margin-left: 0; }
.talk-with .faces .av { box-shadow: 0 0 0 2px var(--card); }
.talk-with .faces > a.is-asks .av { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--sun); }
.talk-with.talk-alone { font-weight: 500; }
.to-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 26px; margin: 0 0 6px 36px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.to-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 2px 0 3px; border-radius: 8px; background: var(--tint); color: var(--hue); font-size: 12.5px; font-weight: 650; }
.to-chip .av { width: 18px; height: 18px; font-size: 9px; }
.to-chip small { color: color-mix(in srgb, var(--hue) 65%, white); font-size: 12px; font-weight: 550; }
.to-chip button { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit; opacity: 0.7; cursor: pointer; }
.to-chip button:hover { background: color-mix(in srgb, var(--hue) 14%, white); opacity: 1; }
.to-chip svg.i { width: 12px; height: 12px; stroke-width: 2.4; }
.to-later { font-weight: 500; }
.compose .compose-hint { margin: 8px 0 0 50px; }
.talk-in { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.talk-in li { display: flex; align-items: center; gap: 2px; }
.talk-in li > a { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 7px 6px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.talk-in li > a:hover { background: var(--well); }
.talk-in .t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.talk-in .t b { font-size: 14px; font-weight: 600; }
.talk-in .t small { overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.talk-in .t small.is-asks { color: #7a5b00; font-weight: 600; }
.talk-in li.is-gone { opacity: 0.55; }
.talk-in .icon-btn { width: 30px; height: 30px; }
.talk-in .icon-btn svg.i { width: 14px; height: 14px; }
.talk-none { margin: 6px 2px; font-size: 13px; }
@media (max-width: 600px) { .to-row, .compose .compose-hint { margin-left: 0; } }

/* ---------- more visual (docs/visual-plan.md; server/ui/visual.js draws most of it) ---------- */

/* 1: a thread's latest pictures lead its card, and its page */
.cover { position: relative; display: grid; gap: 4px; margin-top: 12px; border-radius: 12px; overflow: hidden; background: var(--well); box-shadow: 0 0 0 1px var(--line); }
.cover > a[hidden] { display: none; }
.cv-p { position: relative; display: block; min-height: 0; overflow: hidden; background: var(--well); }
.cv-p img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.cv-p:hover img { opacity: 0.94; }
.cv-p.tall img { object-fit: contain; object-position: center top; }
.cover--1 .cv-p img { height: auto; max-height: 420px; aspect-ratio: auto; }
.cover--2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 6.4; }
.cover--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }
.cover--3 > .cv-p:first-child { grid-row: span 2; }
.cover--page { margin-top: 14px; }
.cover--page.cover--1 .cv-p img { max-height: 520px; }
.cv-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(18, 24, 33, 0.48); color: #fff; font-size: 20px; font-weight: 700; }

/* 2: pictures with a job (ab_compare), on a reply */
.rs-cmp-h { margin: 12px 0 0; font-size: 13.5px; font-weight: 650; }
.vz-ba { position: relative; width: fit-content; max-width: 100%; margin-top: 10px; border-radius: 12px; overflow: hidden; background: var(--well); box-shadow: 0 0 0 1px var(--line); cursor: ew-resize; user-select: none; }
/* A phone's screenshot stays phone-sized: as tall as a desktop one at most. */
.vz-ba img { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; pointer-events: none; }
.vz-ba img.b { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top left; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.vz-ba .bar { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(18, 24, 33, 0.25); pointer-events: none; }
.vz-ba .knob { position: absolute; top: 50%; left: var(--x, 50%); display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(18, 24, 33, 0.28); color: var(--ink); font-size: 12px; font-weight: 800; pointer-events: none; }
.vz-ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vz-pin { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 8px; border-radius: 7px; background: rgba(18, 24, 33, 0.72); color: #fff; font-size: 11.5px; font-weight: 650; pointer-events: none; }
.vz-pin--r { left: auto; right: 8px; }
.vz-ba-open { display: flex; gap: 12px; margin: 6px 0 0; font-size: 12.5px; }
.vz-ba-open a { color: var(--ink-2); }
.vz-opts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.vz-opts--2 { --n: 2; }
.vz-opts--4 { --n: 4; }
.vz-opt { display: flex; flex-direction: column; min-width: 0; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.vz-opt.is-pick { box-shadow: 0 0 0 2px var(--green); }
.vz-opt > a { position: relative; display: block; }
.vz-opt img { display: block; width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; object-position: top left; background: var(--well); }
.vz-opt .l { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 750; }
.vz-opt-b { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.vz-opt-b b { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.vz-opt-b small { color: var(--ink-2); font-size: 12.5px; line-height: 1.35; }
.vz-opt-b .btn, .vz-opt-b .rs-done { align-self: flex-start; margin-top: auto; }
.vz-opt-b > :is(.btn, .rs-done):last-child { margin-top: 8px; }
.vz-its { align-self: flex-start; margin-bottom: 2px; padding: 0 6px; border-radius: 6px; background: #e4f2ea; color: var(--green); font-size: 11.5px; font-weight: 650; }
.vz-dev { display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; padding: 14px 14px 0; border-radius: 12px; background: linear-gradient(180deg, var(--well), color-mix(in srgb, var(--hue, #8a93a0) 8%, var(--well))); overflow: hidden; }
.vz-desk { flex: 1; min-width: 0; border-radius: 9px 9px 0 0; background: var(--card); box-shadow: 0 0 0 1px var(--line-2), 0 8px 24px rgba(18, 24, 33, 0.1); overflow: hidden; }
.vz-desk i { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.vz-desk i::before, .vz-desk i::after, .vz-desk i b { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.vz-desk img { display: block; width: 100%; aspect-ratio: 1280 / 720; object-fit: cover; object-position: top left; }
.vz-phone { flex: none; width: 24%; margin-bottom: -18px; padding: 5px; border-radius: 22px 22px 0 0; background: #121821; box-shadow: 0 8px 24px rgba(18, 24, 33, 0.18); }
.vz-phone img { display: block; width: 100%; aspect-ratio: 390 / 720; object-fit: cover; object-position: top; border-radius: 17px 17px 0 0; }
.vz-dev-k { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; color: var(--ink-3); font-size: 12.5px; }
.vz-dev-k b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 600px) {
  .vz-opts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .vz-opt { flex: 0 0 72%; scroll-snap-align: start; }
}

/* 4: a plan as a bar, a thread's life as a strip */
.vz-plan { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.sec-h + .vz-plan { margin-top: 2px; margin-bottom: 8px; }
.vz-plan-s { display: flex; flex: 0 0 132px; gap: 3px; }
.vz-plan-s i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.vz-plan-s i.d { background: var(--hue, var(--ink-3)); }
.vz-plan-s i.n { background: repeating-linear-gradient(-45deg, var(--hue, var(--ink-3)) 0 4px, color-mix(in srgb, var(--hue, var(--ink-3)) 45%, #fff) 4px 8px); background-size: 200% 100%; animation: vz-go 1.4s linear infinite; }
@keyframes vz-go { to { background-position: -22px 0; } }
.vz-plan-n { flex: none; color: var(--ink-3); font-weight: 600; }
.vz-plan-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-plan b { color: var(--ink); font-weight: 600; }
.vz-life { margin-top: 14px; padding: 8px 0 0; border-top: 1px solid var(--line); }
.vz-life-row { display: flex; align-items: flex-end; gap: 10px; color: var(--ink-3); font-size: 12px; }
.vz-life-row time { padding-bottom: 1px; white-space: nowrap; }
.vz-track { position: relative; flex: 1; min-width: 0; height: 30px; }
.vz-track .base { position: absolute; left: 0; right: 0; bottom: 3px; height: 6px; border-radius: 3px; background: var(--well); }
.vz-track .seg { position: absolute; bottom: 3px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--hue, var(--ink-3)) 72%, #fff); }
.vz-track .seg.w { background: var(--sun); }
.vz-track .seg.live { background: var(--hue, var(--ink-3)); }
.vz-track .seg.live::after { content: ""; position: absolute; right: -3px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--hue, var(--ink-3)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue, var(--ink-3)) 22%, transparent); animation: vz-pulse 1.6s ease-in-out infinite; }
@keyframes vz-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--hue, var(--ink-3)) 6%, transparent); } }
.vz-track .mk { position: absolute; bottom: 12px; display: grid; place-items: center; width: 17px; height: 17px; margin-left: -8.5px; padding: 0; border: 0; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1.5px var(--line-2); color: var(--ink-2); cursor: pointer; }
.vz-track .mk svg.i { width: 10px; height: 10px; stroke-width: 2.4; }
.vz-track .mk small { position: absolute; top: -7px; right: -7px; min-width: 13px; padding: 0 3px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 9px; font-weight: 750; line-height: 13px; }
.vz-track .mk.ok { color: var(--green); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green) 45%, #fff); }
.vz-track .mk.pr { color: var(--hue, var(--ink-2)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--hue, var(--ink-2)) 45%, #fff); }
.vz-track .mk.pic { color: var(--ink-2); }
.vz-track .mk.you { background: var(--sun); color: var(--ink); box-shadow: none; }
.vz-track .mk.is-on { z-index: 2; outline: 2px solid var(--ink); outline-offset: 1px; }
.vz-track .mk:hover { z-index: 3; }
.vz-life-say { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.vz-life-say time { color: var(--ink-3); font-size: 12px; }
.vz-life-say span + span::before { content: "·"; margin-right: 8px; color: var(--ink-3); }
.vz-life-say .k-you { color: var(--ink); }
.vz-life-k { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: var(--ink-3); font-size: 12px; }
.vz-life-k span { display: inline-flex; align-items: center; gap: 5px; }
.vz-life-k i { width: 10px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--hue, var(--ink-3)) 72%, #fff); }
.vz-life-k i.w { background: var(--sun); }
.vz-life-k b { color: var(--ink-2); font-weight: 600; }
.vz-life + .summary { margin-top: 6px; padding-top: 0; border-top: 0; }

/* 5: a turn's change as tiles, a pull request's checks as dots */
.chg-line.has-tiles > span { display: grid; gap: 6px; min-width: 0; flex: 1; }
.vz-tiles { display: flex; min-width: 0; gap: 3px; }
.vz-tile { flex: 1 1 0; min-width: 24px; max-width: 220px; height: 24px; padding: 0 7px; border-radius: 6px; overflow: hidden; color: var(--ink-2); font: 500 11.5px/24px var(--mono); white-space: nowrap; text-overflow: ellipsis; background: linear-gradient(90deg, #d8eedf 0 var(--a), #f6dcd7 var(--a) 100%); }
.vz-tile:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); text-decoration: none !important; }
.vz-tile.t { box-shadow: inset 0 0 0 1.5px var(--green); }
.vz-tile-more { flex: none; align-self: center; padding: 0 4px; color: var(--ink-3); font-size: 12px; }
.vz-checks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-right: 8px; vertical-align: 1px; }
.vz-checks i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.vz-checks i.x { background: var(--red); }
.vz-checks i.p { background: var(--line-2); }
.vz-checks i.s { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* 6: numbers drawn */
.vz-moved { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.vz-mv { padding: 9px 12px 10px; border-radius: 12px; background: var(--well); }
.vz-mv small { display: block; color: var(--ink-2); font-size: 12.5px; }
.vz-mv .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: 2px; }
.vz-mv s { color: var(--ink-3); font-size: 15px; text-decoration-color: var(--line-2); }
.vz-mv .to { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.vz-mv .arr { color: var(--ink-3); }
.vz-mv .d { padding: 0 6px; border-radius: 6px; background: var(--card); color: var(--ink-2); font-size: 12px; font-weight: 650; }
.vz-mv .d.bad { background: #fbe4df; color: var(--red); }
.vz-mv .d.good { background: #e4f2ea; color: var(--green); }
td.has-bar { background-image: linear-gradient(90deg, color-mix(in srgb, var(--hue, #6b7a90) 50%, #fff) 0 var(--w), var(--well) var(--w) 100%); background-repeat: no-repeat; background-size: calc(100% - 16px) 3px; background-position: 8px calc(100% - 4px); }
.lc .mkr line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.lc .mkr circle { fill: var(--ink); }
.lc .mkr text { fill: var(--ink); font: 650 11px var(--font); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.att-chart .legend { margin-top: 4px; }
/* A chart on a reply (ab_chart) */
.rs-chart { margin: 4px 0 6px; }
/* A stacked chart's total, a scatter's point under the pointer */
.lc-tip p.lc-tot { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.lc .ring { fill: none; stroke-width: 2; }
.rs-chart .rs-cmp-h { margin-bottom: 8px; }

/* 7: what a page changed, and Pages as thumbnails */
.peek-t .pd { margin-left: 6px; padding: 0 5px; border-radius: 6px; background: var(--card); color: var(--ink-2); font-size: 11.5px; font-weight: 650; vertical-align: 3px; letter-spacing: 0; }
.peek-t .pd.good { background: #e4f2ea; color: var(--green); }
.peek-t .pd.bad { background: #fbe4df; color: var(--red); }
.peek-t .was s { text-decoration-color: var(--line-2); }
.pk-rows { display: grid; gap: 4px; margin-top: 6px; }
.pk-rows span { display: grid; grid-template-columns: minmax(0, 0.9fr) 1fr auto; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.pk-rows em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.pk-rows i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--hue, var(--ink-3)) 0 var(--w), var(--card) var(--w) 100%); }
.pk-rows b { color: var(--ink); font-weight: 600; }
.pk-list { display: grid; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.pk-list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-vers { display: inline-flex; flex: none; gap: 2px; }
.vz-vers i { width: 5px; height: 14px; border-radius: 2px; background: color-mix(in srgb, var(--hue, var(--ink-3)) 30%, #fff); }
.vz-vers i.on { background: var(--hue, var(--ink-3)); }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 14px; padding: 16px 18px 18px; }
.pg-tile { display: flex; flex-direction: column; height: 100%; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; color: inherit; }
.pg-tile:hover { text-decoration: none; box-shadow: 0 0 0 1.5px var(--line-2), var(--shadow); }
.pg-tile.is-off { opacity: 0.55; }
.pg-tile-b { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
/* One column: the list row's places for its title, words and faces don't apply here. */
.pg-tile-b > *, .pg-tile-f .ls-avs { grid-column: auto; grid-row: auto; }
.pg-tile .ls-t b { font-size: 14.5px; }
.pg-tile .ls-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pg-tile-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink-3); font-size: 12px; }
.pg-tile-f time { margin-left: auto; }
.vz-pt-thumb { position: relative; display: block; height: 150px; padding: 10px; background: var(--bg); overflow: hidden; }
.vz-pt-thumb .g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vz-pt-thumb .t { display: block; min-width: 0; min-height: 40px; padding: 6px 7px; border-radius: 8px; background: var(--card); color: var(--ink-3); font-size: 9.5px; line-height: 1.25; overflow: hidden; }
.vz-pt-thumb .t > small { display: block; overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.vz-pt-thumb .t > b { display: block; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-pt-thumb .t > b em { margin-left: 2px; color: var(--ink-3); font-size: 10px; font-style: normal; font-weight: 600; }
.vz-pt-thumb .t.ch { box-shadow: 0 0 0 1.5px var(--hue, var(--ink-3)); }
.vz-pt-thumb .w2 { grid-column: span 2; }
.vz-pt-thumb .w3 { grid-column: span 3; }
.vz-pt-thumb .w4 { grid-column: span 4; }
.vz-mini-l { display: block; width: 100%; height: 26px; margin-top: 3px; }
.vz-mini-l polyline { fill: none; stroke: var(--hue, var(--ink-3)); stroke-width: 1.6; }
.vz-mini-l path { fill: none; stroke: var(--hue, var(--ink-3)); stroke-width: 4; stroke-linecap: round; opacity: 0.75; }
.vz-pt-thumb .hb { display: grid; gap: 4px; margin-top: 4px; }
.vz-pt-thumb .hb i { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--hue, var(--ink-3)) 60%, #fff); }
.vz-pt-thumb .ln { display: grid; gap: 3px; margin-top: 3px; }
.vz-pt-thumb .ln i { overflow: hidden; color: var(--ink-2); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.vz-pt-thumb .tx { display: -webkit-box; margin-top: 3px; color: var(--ink-2); -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vz-pt-thumb .dg { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.vz-pt-thumb .dg i { flex: 1; height: 14px; border-radius: 4px; box-shadow: 0 0 0 1px var(--line-2); }
.vz-pt-empty { display: grid; place-items: center; height: 100%; font-size: 40px; opacity: 0.6; }

/* 8: diagrams */
.vz-dia { margin-top: 10px; padding: 4px 0; border-radius: 12px; background: var(--well); overflow-x: auto; }
.vz-dia svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.vz-dia .nd rect { fill: var(--card); stroke: var(--line-2); stroke-width: 1; }
.vz-dia .nd--on rect { fill: var(--tint, #eef3fb); stroke: var(--hue, var(--ink-2)); stroke-width: 1.5; }
.vz-dia .nd--done rect { fill: #e4f2ea; stroke: color-mix(in srgb, var(--green) 50%, #fff); }
.vz-dia .nd--failed rect { fill: #fbe4df; stroke: color-mix(in srgb, var(--red) 55%, #fff); stroke-width: 1.5; }
.vz-dia .nd--off { opacity: 0.5; }
.vz-dia .nd--off rect { stroke-dasharray: 4 3; }
.vz-dia .nd text { fill: var(--ink); font: 600 13px var(--font); }
.vz-dia .nd--failed text:first-of-type { fill: var(--red); }
.vz-dia .nd text.s { fill: var(--ink-3); font: 500 11px var(--mono); }
.vz-dia .ed { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.vz-dia .ed--back { stroke-dasharray: 4 3; }
.vz-dia marker path { fill: var(--ink-3); }
.vz-dia .el text { fill: var(--ink-2); font: 500 11px var(--font); }
.vz-dia .el-bg { fill: var(--well); }
.wg .vz-dia, .att .vz-dia { margin-top: 4px; }

/* 3: the feed as pictures */
.gal { columns: 2 260px; column-gap: 14px; }
.gal-t { display: block; break-inside: avoid; margin: 0 0 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.gal-pic, .gal-pg { display: block; background: var(--well); }
.gal-pic img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: top left; }
.gal-pg .vz-pt-thumb { height: 170px; }
.gal-w { padding: 4px 12px 0; }
.gal-w .att { margin: 0; }
.gal-t figcaption { display: flex; align-items: center; gap: 8px; padding: 9px 12px 11px; }
.gal-c { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; }
.gal-c:hover { text-decoration: none; }
.gal-c:hover b { text-decoration: underline; }
.gal-c > span:last-child { display: grid; min-width: 0; }
.gal-c b { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gal-c small { overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.gal-t figcaption time { flex: none; margin-left: auto; color: var(--ink-3); font-size: 12px; }
@media (max-width: 600px) { .gal { columns: 1; } }

/* 10: where the time went */
.vz-time { margin: 2px 0 14px; padding: 12px 14px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.vz-time-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; }
.vz-time-h b { font-weight: 650; }
.vz-time-h small { color: var(--ink-3); font-size: 12.5px; }
.vz-axis { position: relative; height: 16px; margin: 10px 0 2px 118px; color: var(--ink-3); font-size: 11px; }
.vz-axis span { position: absolute; white-space: nowrap; }
.vz-lane { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; height: 26px; }
.vz-lane-n { min-width: 0; overflow: hidden; color: var(--ink-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.vz-lane-t { position: relative; height: 16px; border-radius: 4px; background: var(--well); }
.vz-blk { position: absolute; top: 0; bottom: 0; min-width: 2px; padding: 0; border: 0; border-radius: 3px; cursor: pointer; }
.vz-blk:hover, .vz-blk.is-on { z-index: 2; outline: 2px solid var(--ink); outline-offset: 1px; }
.vz-fold { position: absolute; top: -2px; bottom: -2px; display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--card) 0 3px, var(--line) 3px 4px); color: var(--ink-3); font-size: 9px; overflow: hidden; white-space: nowrap; }
.k-read { background: #9db4d6; }
.k-edit { background: var(--hue, #5b7bd5); }
.k-test { background: #e0a43a; }
.k-web { background: #45a596; }
.k-run { background: #8f9bb0; }
.k-wait { background: var(--sun); }
.k-think { background: #c9cfd8; }
.vz-you { position: absolute; top: -4px; bottom: -4px; z-index: 3; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); pointer-events: none; }
.vz-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--ink-2); font-size: 12.5px; }
.vz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vz-legend i { width: 10px; height: 10px; border-radius: 3px; }
.vz-legend b { color: var(--ink); font-weight: 650; }
.vz-blk-d { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--well); font-size: 13px; }
.vz-blk-d ul { margin: 4px 0 0; padding: 0 0 0 16px; color: var(--ink-2); }
@media (max-width: 600px) {
  .vz-axis { margin-left: 70px; }
  .vz-lane { grid-template-columns: 62px minmax(0, 1fr); }
}

/* 9: links as cards */
.lks { display: grid; gap: 8px; margin-top: 10px; }
.lk { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 76px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; color: inherit; }
.lk:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--line-2); }
.lk.is-loading { opacity: 0.7; }
.lk-img { display: block; background: var(--well); box-shadow: inset -1px 0 0 var(--line); overflow: hidden; }
.lk-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lk-img--none { display: grid; place-items: center; color: var(--ink-3); font-size: 26px; font-weight: 750; }
.lk-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 12px 10px; }
.lk-b small { overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lk-b b { overflow: hidden; font-size: 14px; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.lk-b p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-2); font-size: 13px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 600px) { .lk { grid-template-columns: 92px minmax(0, 1fr); } }
.updates li.has-lk > span { min-width: 0; flex: 1; }

/* ---------- Follows, on your profile (docs/follows-plan.md) ---------- */
/* the Follows box */
.fl-box h3 .fl-h-btn { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.fl-box h3 .fl-h-btn:hover { color: var(--ink); text-decoration: none; }
.fl-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 6px; }
.fl-pills .pill { border: 0; font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; }
.fl-pills .pill:hover { text-decoration: none; }
.fl-list { margin: 0; padding: 0; list-style: none; }
.fl-list > li + li { border-top: 1px solid var(--line); }
.fl-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; padding: 11px 0; }
.fl-row > .av, .fl-row > a > .av { margin-top: 1px; }
.fl-nm { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: inherit; }
.fl-nm:hover { text-decoration: none; }
.fl-nm:hover b { text-decoration: underline; }
.fl-nm b { overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fl-nm small { flex: none; color: var(--ink-3); font-size: 12.5px; }
.fl-nm time { margin-left: auto; flex: none; color: var(--ink-3); font-size: 12.5px; }
.fl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
/* a chip that opens a menu: what you follow them at, what they follow you at */
.fl-c { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 7px; border: 0; border-radius: 7px; background: var(--well); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.fl-c:hover, .fl-c[aria-expanded="true"], .fl-chips .opt:hover, .fl-sub .opt:hover, .fl-chips .opt[aria-expanded="true"], .fl-sub .opt[aria-expanded="true"] { background: #e8eaee; color: var(--ink); }
.fl-c svg.i { width: 13px; height: 13px; }
.fl-c svg.caret { width: 13px; height: 13px; margin-left: -1px; color: var(--ink-3); }
.fl-c b { color: var(--ink); font-weight: 600; }
.fl-c .av { width: 16px; height: 16px; font-size: 8.5px; }
.fl-c--out { background: #eef0f3; }
.fl-c--wait { padding-right: 2px; background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.fl-c--wait .chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; padding: 0; border: 0; border-left: 0; border-radius: 5px; color: var(--ink-3); }
.fl-c--wait:hover .chip-x { background: var(--well); color: var(--ink); }
.fl-c--back { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-weight: 550; padding-right: 8px; }
.fl-c--back:hover { background: var(--well); }
.fl-c--more { color: var(--ink-3); font-weight: 450; }
/* their agents you follow, under them */
.fl-sub { grid-column: 2; margin: 7px 0 0; padding: 0; list-style: none; }
.fl-sub li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 0; }
.fl-sub li + li { border-top: 1px dashed var(--line); }
.fl-sub .av { width: 20px; height: 20px; font-size: 9.5px; }
.fl-sub a { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
/* someone asking */
.fl-row--ask { position: relative; }
.fl-row--ask::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: -16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sun); }
.fl-asks { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.fl-asks .opt { height: 30px; box-shadow: inset 0 0 0 1px var(--line-2); padding-left: 8px; }
.fl-asks .opt .at { margin-right: 1px; }
.fl-asks .btn--sm { padding: 5px 10px; }
.fl-says { margin: 7px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.fl-says b { color: var(--ink); font-weight: 600; }
/* the menus */
.fl-box .pk-menu { width: 296px; }
.fl-box .pk-menu .fb-row > svg.i { width: 16px; height: 16px; }
.fl-box .pk-menu .fb-list > .pk-div:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }
.fl-box .pk-more { padding-left: 33px; }
.fl-box .fb-row.is-on + .pk-more, .fl-box .pk-more--on { color: var(--ink-2); }
.fl-box .fb-row--warn .fb-nm { color: var(--red); }
.fl-box .fb-row--warn > svg.i { color: var(--red); }
/* asking to follow someone */
.fl-add { position: relative; margin: 2px 0 8px; padding: 12px; border-radius: 12px; background: var(--well); }
.fl-add form { display: flex; gap: 6px; }
.fl-add input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font: inherit; font-size: 14px; }
.fl-add input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.fl-add p { margin: 0 0 8px; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.fl-add .fb-menu { top: calc(100% - 6px); left: 12px; right: 12px; width: auto; }
.fl-add .fb-row small { color: var(--ink-3); font-size: 12.5px; font-weight: 450; }
.fl-add .fb-row--sub { padding-left: 26px; }
.fl-add .fb-row--sub .av { width: 18px; height: 18px; font-size: 8.5px; }
.fl-empty { margin: 6px 0 4px; color: var(--ink-3); font-size: 13.5px; }
/* the notes under the mockup */
/* in the page, a chip that opens a menu is the menus' own button (menu1): drawn as the mockup's .fl-c */
.fl-chips .opt, .fl-sub .opt { gap: 4px; height: 24px; padding: 0 4px 0 7px; border-radius: 7px; background: #eef0f3; color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.fl-chips .opt svg.i, .fl-sub .opt svg.i { width: 13px; height: 13px; }
.fl-chips .opt svg.caret, .fl-sub .opt svg.caret { width: 13px; height: 13px; margin-left: -1px; }
.fl-chips .opt b, .fl-sub .opt b { color: var(--ink); font-weight: 600; }
.fl-chips .opt .av, .fl-sub .opt .av { width: 16px; height: 16px; font-size: 8.5px; }
.fl-more { margin-left: -4px; color: var(--ink-3); font-weight: 450; }
.fl-box h3 .fl-h-btn { padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; cursor: pointer; }
.fl-box h3 .fl-h-btn svg.i { width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; }
.fl-box h3 > span { display: inline-flex; align-items: center; gap: 8px; }
.fl-box h3 .chip { font-size: 12px; letter-spacing: 0; }
.fl-box .fl-sub li > .pk { flex: none; }
.fl-add .fb-menu { position: absolute; z-index: 30; }
.fl-none { margin: 0; padding: 8px 10px; color: var(--ink-3); font-size: 13px; }
/* on someone's profile: Ask to follow, Asked, or what you follow them at */
.prof-acts .chip { align-self: center; }
.prof-acts .opt { height: 34px; padding: 0 8px 0 11px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 14px; }
.prof-acts .opt b { font-weight: 650; }

/* ---------- dashboards (docs/dashboards-plan.md): a bar that stays on top, and panels that hold queries ---------- */
.pg-dash { max-width: 1240px; }
.db-bar { position: sticky; top: 60px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -16px -16px 14px; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.pg-main .db-bar { top: 60px; margin: 0 0 14px; border-radius: 12px; border: 1px solid var(--line); }
.db-range { position: relative; display: inline-flex; align-items: center; }
.db-range > .btn { gap: 8px; padding-right: 10px; }
.db-range > .btn .db-span { color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
.db-shift { display: inline-flex; }
.db-shift .btn { padding: 8px 9px; border-radius: 0; }
.db-shift .btn:first-child { border-radius: 10px 0 0 10px; }
.db-shift .btn:last-child { margin-left: 1px; border-radius: 0 10px 10px 0; }
.db-shift .btn[disabled] { opacity: 0.45; }
.db-cmp[aria-pressed="true"], .db-var .btn[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.db-gap { flex: 1; }
.db-fresh { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-3); font-size: 12.5px; }
.db-fresh > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-fresh .btn { padding: 6px 9px; }
.db-fresh.is-spin .btn svg { animation: db-spin 0.8s linear infinite; }
@keyframes db-spin { to { transform: rotate(360deg); } }
.db-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: 100%; }
.db-var { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.db-var > span { margin-right: 2px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.db-var .btn { padding: 4px 10px; font-size: 12.5px; }
.db-var select { padding: 5px 8px; border: 0; border-radius: 9px; background: var(--card); box-shadow: 0 0 0 1px var(--line-2); font: 500 12.5px var(--font); color: var(--ink); }
.db-pick { width: 300px; }
.db-pick .fb-row { justify-content: space-between; }
.db-pick .fb-row.is-on { background: var(--well); font-weight: 600; }
.db-pick .fb-row small { color: var(--ink-3); font-size: 12px; }
.db-pick hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--line); }
.db-abs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 6px 6px; }
.db-abs label { display: grid; gap: 3px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.db-abs input { width: 100%; min-width: 0; padding: 6px 8px; border: 0; border-radius: 8px; background: var(--well); font: 500 12px var(--mono); color: var(--ink); }
.db-abs .btn { grid-column: 1 / -1; justify-self: start; }
.db-tip { margin: 2px 8px 4px; color: var(--ink-3); font-size: 12px; }

/* a panel: a widget whose numbers come from its query, for the range you're looking at */
.pn .wg-h { position: relative; gap: 6px; flex-wrap: nowrap; }
.pn { container-type: inline-size; }
.pn .wg-h h3 { flex: 1 1 auto; min-width: 4.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a narrow panel names its source by its logo alone, so its title has the room */
@container (max-width: 330px) { .pn-nm { display: none; } .pn-age::before { content: ""; margin: 0; } }
@container (max-width: 230px) { .pn-age { display: none; } }
.pn-src { display: inline-flex; flex: none; align-items: center; gap: 5px; color: var(--ink-3); font-size: 11.5px; font-weight: 550; white-space: nowrap; }
.pn-lg { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: var(--lg); color: #fff; font-size: 9px; font-weight: 750; }
.pn-age::before { content: "·"; margin: 0 4px 0 1px; }
.pn-age.is-old { color: #8a5f00; }
.pn-more { flex: none; width: 26px; height: 26px; margin: -4px -6px -4px 0; border-radius: 8px; }
.pn-menu { top: 30px; right: -6px; left: auto; width: 220px; }
.pn-menu .fb-row svg { width: 15px; height: 15px; color: var(--ink-3); }
.pn.is-loading .pn-in { opacity: 0.4; transition: opacity 0.15s; }
.pn.is-alert { box-shadow: var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--red) 55%, transparent); }
.pn.is-stale .pn-in { filter: grayscale(0.9); opacity: 0.6; }
.pn-in { min-width: 0; }
.pn-wait { margin: 6px 0; font-size: 13px; }
.pn-note { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 8px; padding: 6px 9px; border-radius: 9px; background: var(--well); color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.pn-note svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--ink-3); }
.pn-note--off { background: #f4f1ea; color: #6b5a2e; }
.pn-note--bad { background: #fbe9e6; color: var(--red); font-weight: 550; }
.pn-note--bad svg { color: var(--red); }
.pn-q { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--well); font-size: 12.5px; }
.pn-q pre { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 12px/1.5 var(--mono); color: var(--ink); }
.pn-q-h { margin: 0; color: var(--ink-3); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; }
.pn-q-more, .pn-q-vars { margin: 4px 0 0; color: var(--ink-2); }
.pn-q-vars code { font: 600 11.5px var(--mono); }
.pn-q-why { margin: 6px 0 0; font-size: 12px; }
.lc[data-zoom] svg { cursor: crosshair; }
.lc[data-zoom] { user-select: none; }
.lc .zoom { fill: color-mix(in srgb, var(--hue, #2a78d6) 12%, transparent); stroke: color-mix(in srgb, var(--hue, #2a78d6) 50%, transparent); stroke-width: 1; }
.lc .slo--bad line { stroke: var(--red); opacity: 0.7; }
.lc .slo--bad text { fill: var(--red); }
.lc .slo--warn line { stroke: #b8800f; opacity: 0.7; }
.lc .slo--warn text { fill: #8a5f00; }
.legend i.dash { height: 0; border-top: 2px dashed; border-radius: 0; background: none; opacity: 0.6; }
.chip--data { background: #efeafb; color: #4a3aa7; font-weight: 600; }
@media (max-width: 640px) {
  .db-bar { top: 0; gap: 6px 8px; margin: -12px -12px 12px; padding: 8px 12px; }
  .db-cmp, .db-fresh > span, .db-range .db-span { display: none; }
  .db-vars { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .db-var { flex-wrap: nowrap; }
  .db-var .btn { white-space: nowrap; }
  .db-pick { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; }
}