/* The app's components, copied from the app's own stylesheet and scoped under .app so they can sit
   inside the site without touching it. Values come only from the tokens in site.css (the app's own tokens).
   Unused sidebar-background experiments are left out. A screen may add layout here, never new colours or sizes. */
.app { font: 400 var(--fs-body)/var(--lh-ui) var(--font-text); color: var(--ink); letter-spacing: .003em; text-align: left; }
.app h1, .app h2, .app h3, .app p, .app ul, .app ol, .app dl, .app dd { margin: 0; padding: 0; }
.app ul, .app ol { list-style: none; }
.app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.app :focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: var(--r1); }
.app .tnum { font-variant-numeric: tabular-nums; }
.app code, .app .mono { font-family: var(--font-mono); font-size: .92em; }
/* ---------- Type roles ---------- */
.app .display-hero { font: 400 var(--fs-hero)/1.02 var(--font-display); letter-spacing: -.02em; }
.app .display-1 { font: 400 var(--fs-h1)/1.1 var(--font-display); letter-spacing: -.015em; }
.app .display-2 { font: 400 var(--fs-h2)/1.12 var(--font-display); letter-spacing: -.01em; }
.app .title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.app .label { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); letter-spacing: .005em; }
.app .read { font-size: var(--fs-read); line-height: var(--lh-read); letter-spacing: -.006em; }
.app .small { font-size: var(--fs-small); }
.app .caption { font-size: var(--fs-caption); color: var(--muted); letter-spacing: .01em; }
.app .muted { color: var(--muted); }
/* ---------- Window ---------- */
.app.window { position: relative; width: 1440px; height: 900px; border-radius: 12px; overflow: hidden; display: grid;
  grid-template-columns: 252px minmax(0, 1fr); background: var(--paper); isolation: isolate;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 30px 80px -30px rgb(20 30 24 / .45); }
/* The sidebar sits on the site's meadow as a soft wash: the colour and light of the field, never its detail.
   the maker, 19 Sep, after trying a photo, a band, plain paper and texture. */
.app.window::before { content: ''; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  opacity: var(--wash); filter: blur(14px) saturate(.8);
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 40%, transparent) 0%, transparent 38%, transparent 70%, color-mix(in srgb, var(--paper) 30%, transparent) 100%),
    url('assets/studio-meadow.webp') 28% center / auto 100% no-repeat; }
/* Brand moments (startup, first run, empty states) may show the photo itself. */
.app.window[data-meadow="photo"]::before { inset: 0; filter: none; opacity: var(--meadow, .5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 18%, transparent), color-mix(in srgb, var(--paper) 70%, transparent) 36%, var(--paper) 56%),
    url('assets/studio-meadow.webp') left top / 100% auto no-repeat; }
.app .lights { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; z-index: 5; }
.app .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ec6a5e; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .15); }
.app .lights i:nth-child(2) { background: #f4bf4f; }
 .app .lights i:nth-child(3) { background: #61c554; }
/* ---------- Sidebar ---------- */
.app .sb { display: flex; flex-direction: column; min-height: 0; padding: 48px var(--s3) var(--s3); gap: var(--s1); }
.app .sb-project { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r2); text-align: left; }
.app .sb-project:hover { background: color-mix(in srgb, var(--raised) 45%, transparent); }
.app .sb-project .mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--pine); color: var(--pine-ink); }
.app .sb-project .mark svg { width: 17px; height: 17px; }
.app .sb-project b { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.2; }
.app .sb-project small { display: block; font-size: var(--fs-caption); color: var(--muted); }
.app .sb-project .chev { margin-left: auto; color: var(--faint); }
.app .sb-search { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s3); padding: 7px var(--s2); border-radius: var(--r1);
  color: var(--muted); font-size: var(--fs-small); }
.app .sb-search kbd { margin-left: auto; font: 500 var(--fs-caption) var(--font-text); color: var(--faint); }
.app .sb-item { display: flex; align-items: center; gap: var(--s2); padding: 7px var(--s2); border-radius: var(--r1); font-size: var(--fs-small);
  color: var(--ink-2); min-width: 0; }
.app .sb-item:hover { background: color-mix(in srgb, var(--raised) 45%, transparent); }
.app .sb-item[aria-current="page"] { background: color-mix(in srgb, var(--raised) 72%, transparent); color: var(--ink); font-weight: 600;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent), 0 1px 2px rgb(0 0 0 / .04); }
.app .sb-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .sb-item .meta { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: tabular-nums; }
.app .sb-item svg { flex: none; }
.app .sb-group { margin-top: var(--s4); }
.app .sb-group-head { display: flex; align-items: baseline; gap: var(--s2); padding: 0 var(--s2) var(--s1); }
.app .sb-group-head .label { flex: 1; }
.app .sb-group-head .count { font-size: var(--fs-caption); color: var(--muted); }
.app .sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s3); }
.app .usage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px var(--s2); padding: 0 var(--s2); }
.app .usage b { font-size: var(--fs-caption); font-weight: 600; }
.app .usage .bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.app .usage .bar i { display: block; height: 100%; background: var(--sage); border-radius: 2px; }
.app .usage .pct { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: tabular-nums; }
.app .usage small { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--muted); }
.app .me { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.app .avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-wash); color: var(--ink-2);
  font-size: var(--fs-caption); font-weight: 600; flex: none; }
.app .me b { font-size: var(--fs-small); font-weight: 600; display: block; line-height: 1.2; }
.app .me small { font-size: var(--fs-caption); color: var(--muted); }
/* ---------- Main panel ---------- */
.app .main { background: var(--canvas); box-shadow: -1px 0 0 var(--line);
  display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.app .main-head { display: flex; align-items: center; gap: var(--s3); height: 52px; padding: 0 var(--s5); flex: none; }
.app .main-head .crumb { font-size: var(--fs-small); color: var(--muted); }
.app .main-head .tools { margin-left: auto; display: flex; gap: var(--s1); }
.app .main-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.app .column { overflow: auto; padding: var(--s6) var(--s5) var(--s4); }
.app .column > .measure { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s6); }
/* ---------- Status glyph: shape and colour both carry the state ---------- */
.app .st { width: 16px; height: 16px; flex: none; display: inline-grid; place-items: center; color: var(--muted); }
.app .st svg { width: 16px; height: 16px; display: block; }
.app .st[data-state="running"] { color: var(--live); }
.app .st[data-state="running"] svg { animation: spin 1.1s linear infinite; }
.app .st[data-state="done"] { color: var(--sage); }
.app .st[data-state="needs"], .app .st[data-state="failed"], .app .st[data-state="stopped"] { color: var(--ink-2); }
.app .st[data-accent] { color: var(--rust); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app .st[data-state="running"] svg { animation: none; } }
.app .state { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); white-space: nowrap; }
.app .state[data-state="running"] { color: var(--live); }
.app .state[data-state="done"] { color: var(--sage); }
.app .state[data-accent] { color: var(--rust); }
/* ---------- Buttons ---------- */
.app .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 32px; padding: 0 var(--s4); border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600; white-space: nowrap; transition: background var(--fast), box-shadow var(--fast); }
.app .btn-primary { background: var(--pine); color: var(--pine-ink); transition: background-color .18s ease; }
.app .btn-primary:hover, .app .btn-primary.is-hover { background: color-mix(in srgb, var(--pine) 86%, var(--canvas)); }
.app .btn-accent { background: var(--rust); color: #fff; }
.app .btn-ghost { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); background: var(--raised); }
.app .btn-ghost:hover { background: var(--sunk); }
.app .btn-quiet { height: 28px; padding: 0 var(--s2); color: var(--muted); border-radius: var(--r1); font-weight: 600; }
.app .btn-quiet:hover { color: var(--ink); background: var(--sunk); }
.app .btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--r1); color: var(--muted); }
.app .btn-icon:hover { background: var(--sunk); color: var(--ink); }
.app .btn-send { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--pine); color: var(--pine-ink); }
.app .btn-sm { height: 28px; padding: 0 var(--s3); font-size: var(--fs-caption); }
/* ---------- Where you left off ---------- */
.app .pickup { display: flex; flex-direction: column; gap: var(--s4); }
.app .pickup-head { display: flex; align-items: baseline; gap: var(--s3); }
.app .pickup-head .caption { margin-left: auto; }
.app .pickup-lead { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2); max-width: 62ch; }
.app .pickup-lead b { color: var(--ink); font-weight: 600; }
.app .sheet { display: flex; flex-direction: column; gap: 2px; margin: 0 calc(-1 * var(--s3)); }
.app .sheet-label { padding: var(--s3) var(--s3) var(--s1); }
.app .row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 0 var(--s3); align-items: start; padding: var(--s3); border-radius: var(--r2); }
.app .row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.app .row .st { margin-top: 2px; }
.app .row-name { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; }
.app .row-line { font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
.app .row-end { display: flex; align-items: center; gap: var(--s3); }
.app .row-end .when { font-size: var(--fs-caption); color: var(--faint); font-variant-numeric: tabular-nums; }
.app .row.open { background: var(--raised); box-shadow: 0 0 0 1px var(--line), var(--lift); padding: var(--s4) var(--s3); margin-bottom: var(--s2); }
.app .row.open:hover { background: var(--raised); }
.app .facts { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px var(--s3); margin-top: var(--s3); font-size: var(--fs-small); line-height: 1.5; }
.app .facts dt { color: var(--faint); font-weight: 600; font-size: var(--fs-caption); padding-top: 2px; }
.app .facts dd { color: var(--ink-2); }
.app .row-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }
/* ---------- Chat ---------- */
.app .chat { display: flex; flex-direction: column; gap: var(--s5); }
.app .msg-you { align-self: flex-end; max-width: 78%; padding: 10px var(--s4); border-radius: 16px 16px 4px 16px; background: var(--sunk);
  font-size: var(--fs-read); line-height: var(--lh-read); }
.app .msg-dervo { display: flex; flex-direction: column; gap: var(--s2); }
.app .byline { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-caption); color: var(--muted); font-weight: 600; }
.app .byline .who { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--pine); color: var(--pine-ink); }
.app .byline .who svg { width: 12px; height: 12px; }
.app .msg-dervo .read { max-width: 62ch; }
.app .msg-dervo .read b { font-weight: 600; }
.app .jobs { background: var(--raised); border-radius: var(--r2); box-shadow: 0 0 0 1px var(--line); padding: var(--s1); margin-top: var(--s1); }
.app .job { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 16px; gap: var(--s3); align-items: center; padding: 10px var(--s3); border-radius: var(--r1); }
.app .job:hover { background: var(--sunk); }
.app .job b { font-weight: 600; font-size: var(--fs-body); }
.app .job small { display: block; font-size: var(--fs-caption); color: var(--muted); margin-top: 1px; }
.app .job .go { color: var(--faint); }
/* ---------- Composer ---------- */
.app .composer { flex: none; width: min(748px, calc(100% - 2 * var(--s5))); margin: 0 auto var(--s4); border-radius: 24px; background: var(--raised);
  box-shadow: 0 0 0 1px var(--line-strong), 0 10px 30px -18px rgb(0 0 0 / .22); padding: var(--s3) var(--s3) var(--s2) var(--s5); }
.app .composer .field { min-height: 44px; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--faint); }
.app .composer .foot { display: flex; align-items: center; gap: var(--s2); }
.app .composer .hint { font-size: var(--fs-caption); color: var(--faint); }
.app .composer .btn-send { margin-left: auto; }
.app .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-caption);
  font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
/* ---------- Thread ---------- */
.app .recap { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r2);
  background: var(--sunk); font-size: var(--fs-small); line-height: 1.5; }
.app .recap dt { color: var(--faint); font-weight: 600; font-size: var(--fs-caption); padding-top: 1px; }
.app .recap dd { color: var(--ink-2); }
.app .recap .recap-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: var(--s1); font-size: var(--fs-caption); color: var(--faint); }
.app .report { font-size: var(--fs-read); line-height: var(--lh-read); display: flex; flex-direction: column; gap: var(--s3); max-width: 64ch; }
.app .report h3 { font-size: var(--fs-body); font-weight: 650; margin-top: var(--s2); }
.app .report ul { display: flex; flex-direction: column; gap: 6px; }
.app .report li { position: relative; padding-left: 18px; }
.app .report li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.app .decision { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4); border-radius: var(--r2);
  background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
.app .decision .what { flex: 1; font-size: var(--fs-small); color: var(--ink-2); }
.app .decision .what b { color: var(--ink); font-weight: 600; }
/* ---------- Progress panel ---------- */
.app .panel { width: 320px; border-left: var(--hairline); overflow: auto; padding: var(--s5) var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s5); }
.app .panel-kicker { font-size: var(--fs-caption); color: var(--muted); }
.app .panel-title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -.012em; line-height: 1.3; margin-top: 2px; }
.app .steps { display: flex; flex-direction: column; }
.app .step { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s3); padding: 7px 0; font-size: var(--fs-small); color: var(--ink-2); }
.app .step small { display: block; font-size: var(--fs-caption); color: var(--faint); margin-top: 1px; }
.app .step[data-now] { color: var(--ink); font-weight: 600; }
.app .files { display: flex; flex-direction: column; gap: 4px; }
.app .file { display: flex; justify-content: space-between; gap: var(--s2); font: 400 var(--fs-caption)/1.5 var(--font-mono); color: var(--ink-2); }
.app .file .delta { color: var(--faint); }
/* ---------- Home ---------- */
.app .home-chat { display: flex; flex-direction: column; gap: var(--s4); }
.app .divider { display: flex; align-items: center; gap: var(--s3); }
.app .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.app .pickup.compact { gap: var(--s3); }
.app .row:not(.open) .facts { margin-top: var(--s2); }
/* Queued: waiting for a free slot. A dashed ring, so it never reads as idle. */
.app .st[data-state="queued"] { color: var(--muted); }
.app .usage small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- Adding a line to a list ---------- */
.app .add-line { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 0 var(--s3); align-items: center; padding: 10px var(--s3);
  border-radius: var(--r2); background: var(--sunk); color: var(--muted); cursor: text; }
.app .add-line input { min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--fs-body); color: var(--ink); }
.app .add-line input::placeholder { color: var(--faint); }
.app .add-line .hint { font-size: var(--fs-caption); color: var(--faint); }
.app .add-line:focus-within { box-shadow: inset 0 0 0 1px var(--line-strong); }
/* ---------- Empty and quiet states ---------- */
.app .quiet { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) 0; }
.app .quiet .display-2 { color: var(--ink); }

/* ---------- Site additions: screen layouts copied from the screens' own <style> blocks ---------- */
.app.window { width: var(--win-w, 1120px); height: var(--win-h, 700px); box-shadow: var(--window-shadow); grid-template-columns: 220px minmax(0, 1fr); }
.app .panel { width: 272px; }
.app .sb-project .mark.is-pebble { background: none; border-radius: 0; }
.app .sb-project .mark.is-pebble svg { width: 28px; height: 28px; }
.app .byline .who.is-pebble { background: none; border-radius: 0; }
.app .byline .who.is-pebble svg { width: 20px; height: 20px; }
/* Thread: the conversation and its composer on the left, Progress full height on the right (thread-handoff.html) */
.app .thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app .thread .column { flex: 1; min-height: 0; padding-top: var(--s5); }
.app .thread .measure { gap: var(--s5); }
.app .thread .chat { gap: var(--s4); }
.app .thread .composer { width: min(700px, calc(100% - 2 * var(--s5))); margin: 0 auto var(--s4); }
.app .recap dd { display: flex; align-items: baseline; gap: var(--s3); }
.app .recap dd button { margin-left: auto; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }
.app .live { display: flex; flex-direction: column; gap: var(--s3); max-width: 64ch; }
.app .live li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.app .live time { font-size: var(--fs-caption); color: var(--faint); font-variant-numeric: tabular-nums; }
.app .handoff .row.open { margin-bottom: 0; }
.app .handover { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-caption); color: var(--muted); }
.app .handover svg { color: var(--faint); flex: none; }
.app .panel-state { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.app .panel-state .btn { margin-left: auto; }
.app .panel .label { display: block; margin-bottom: var(--s1); }
.app .step .st { margin-top: 1px; }
.app .step.later { color: var(--muted); }
.app .fold { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s3); align-items: center; width: 100%; padding: 7px 0;
  text-align: left; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.app .file span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .file.later { color: var(--faint); }
.app .panel-foot { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-left: calc(-1 * var(--s2)); }
.app .composer .field.typed { color: var(--ink); }
/* A crop: part of a screen shown on its own, on the main area's canvas */
.app.crop { background: var(--canvas); border-radius: var(--r3); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgb(20 30 24 / .3); }
/* Status glyphs keep the shape and colour of the state they're in. .was is the earlier state, shown by motion only. */
.app .st { position: relative; }
.app .st > .was { position: absolute; inset: 0; display: none; }
/* The open item's white card is drawn on its own layer, so motion can lift it without redrawing the row. */
.app .row.open { position: relative; background: none; box-shadow: none; }
.app .row.open::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--raised);
  box-shadow: 0 0 0 1px var(--line), var(--lift); opacity: var(--lifted, 1); }
/* Inside a scaled window WebKit cuts a blurred box-shadow off at a hard, faint rectangle. A drop-shadow filter fades
   out cleanly in both engines, so the open item's lift is drawn that way there. */
.app.window .row.open::before { box-shadow: 0 0 0 1px var(--line); filter: drop-shadow(0 1px 1px rgb(28 41 33 / .04)) drop-shadow(0 8px 12px rgb(28 41 33 / .07)); }
.app .row.open > * { position: relative; }
.app [data-before] { display: none; }
/* The site draws some buttons as spans (they're pictures, not controls); centre their icons as buttons do. */
.app .btn-send, .app .btn-icon { display: inline-grid; place-items: center; }
/* A window on the site is a picture: its columns never show scrollbars. */
.app.window .column { scrollbar-width: none; overflow: hidden; }
.app.window .column::-webkit-scrollbar { display: none; }
.app .b-new { margin-top: var(--s2); color: var(--muted); }
.app.window .sb-foot { padding-top: var(--s2); }
.app .row-actions { flex-wrap: wrap; }

/* ---------- Catch up: the standing sentence, the next step, then the three lists ---------- */
.app .catchup { display: flex; flex-direction: column; gap: var(--s5); }
.app .catchup-head { display: flex; flex-direction: column; gap: 2px; }
.app .catchup-stand { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2); margin-top: 4px; }
.app .catchup-next { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4); border-radius: var(--r2);
  background: var(--raised); box-shadow: 0 0 0 1px var(--line), var(--lift); }
.app .catchup-next .next-text { flex: 1; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.app .catchup-next .next-go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }
.app .catchup-next .next-go svg { width: 14px; height: 14px; }
.app .catchup-sec { display: flex; flex-direction: column; gap: var(--s1); }
.app .catchup-h { display: flex; align-items: baseline; gap: var(--s2); padding-left: var(--s3); }
.app .catchup-h .count { font-size: var(--fs-caption); color: var(--faint); font-variant-numeric: tabular-nums; }
.app .catchup-sec .row-line.detail, .app .catchup-sec .row-line.goal { color: var(--ink-2); margin-top: 4px; }
.app .catchup-sec .row-name small { margin-left: 8px; font-size: var(--fs-caption); font-weight: 400; color: var(--faint); }
.app .catchup-sec .facts { grid-template-columns: 44px minmax(0, 1fr); }
.app .catchup-source { font-size: var(--fs-caption); color: var(--faint); padding-left: calc(16px + 2 * var(--s3)); margin-top: var(--s1); }

/* ---------- Home, beta.11: the chat on the left, Catch up down the right ---------- */
.app .home-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app .home-col .column { flex: 1; min-height: 0; padding: var(--s5) var(--s5) var(--s3); }
.app .home-col .column > .measure { max-width: 560px; }
.app .home-col .composer { width: calc(100% - 2 * var(--s5)); padding-left: var(--s4); }
.app .composer .clip { color: var(--faint); flex: none; }
.app .job.is-line small { display: inline; margin-left: var(--s3); }
.app .receipt { font-size: var(--fs-caption); color: var(--faint); }
.app .msg-dervo .report { gap: var(--s2); }
.app .now { width: 328px; border-left: var(--hairline); display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s5) var(--s4) var(--s4); min-height: 0; overflow: hidden; }
.app .now-head { display: flex; align-items: baseline; gap: var(--s3); }
.app .now-head .caption { flex: 1; min-width: 0; }
.app .now-open { align-self: flex-end; margin-top: calc(-1 * var(--s3)); }
.app .now-lead { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.app .now-lead b { color: var(--ink); font-weight: 600; }
.app .push { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-caption); color: var(--muted); }
.app .push svg { color: var(--faint); flex: none; }
.app .push code { font: 400 var(--fs-caption)/1.4 var(--font-mono); color: var(--ink-2); }
.app .push .btn { margin-left: auto; }
.app .now-sec { display: flex; flex-direction: column; gap: var(--s1); }
.app .now-sec .label { display: flex; align-items: baseline; gap: var(--s2); padding-left: var(--s3); }
.app .now-sec .label .count { color: var(--faint); font-variant-numeric: tabular-nums; }
/* In a 328px column a label above its line reads better than a 52px gutter. */
.app .now .facts { grid-template-columns: minmax(0, 1fr); gap: 1px; margin-top: var(--s2); }
.app .now .facts dt { padding-top: var(--s1); }
.app .now .row-line.when { color: var(--faint); font-variant-numeric: tabular-nums; margin-top: 3px; }