/* Ian web UI. Design tokens first; light and dark share every rule. */
:root {
  --bg: #f7f7f5; --surface: #ffffff; --surface-2: #f1f1ee; --line: #e6e5e0;
  /* what the person said stands out from Ian's replies: a deeper bubble, slightly heavier text */
  --me-bubble: #e6e6ea; --me-text: #15171f;
  --fg: #1c1c1a; --fg-2: #5b5b56; --fg-3: #8c8c86;
  --accent: #111; --accent-2: var(--accent); --accent-soft: var(--surface-2);
  /* V5 reserves blue for work in progress, independently of interactive ink. */
  --run: #2e47e6; --run-soft: #e4e9ff;
  /* the undo snackbar: a dark bar in both themes, its button readable on it */
  --snack-bg: #252525; --snack-fg: #f3f3f5; --snack-accent: var(--snack-fg);
  --ok: #2f9e44; --ok-soft: #ebfbee; --warn: #e67700; --warn-soft: #fff4e6;
  --bad: #e03131; --bad-soft: #fff5f5; --bad-ink: #fff;
  --shadow: 0 1px 2px rgba(20,20,15,.04), 0 8px 24px rgba(20,20,15,.06);
  --r: 16px; --r-sm: 10px;
  --col: 760px;
  --ff: "Inter", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #111112; --surface: #19191b; --surface-2: #222225; --line: #2c2c30;
  --me-bubble: #2e2e33; --me-text: #f4f5fa;
  --fg: #ededee; --fg-2: #a7a7ad; --fg-3: #75757c;
  --accent: #f3f3f5; --accent-2: var(--accent); --accent-soft: var(--surface-2);
  --run: #8aa4ff; --run-soft: #252d49;
  --snack-bg: #303035; --snack-fg: #f3f3f5; --snack-accent: var(--snack-fg);
  --ok: #51cf66; --ok-soft: #13261a; --warn: #ffa94d; --warn-soft: #2b2012;
  --bad: #ff6b6b; --bad-soft: #2d1616; --bad-ink: #252525;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--fg); font-family: var(--ff); font-size: 15px;
  line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--accent); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.version-value { max-width: 100%; overflow-wrap: anywhere; user-select: text; }
.android-update { flex: none; margin: 8px 0; }
/* Ian's update downloading in place: one thin bar under the status line, the warning below. */
.update-slot { display: flex; flex-direction: column; gap: 8px; }
.update-bar { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin: 4px 0 2px; }
.update-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .4s ease; }
.update-bar.paused i { background: var(--warn); }
.update-bar.queued i { width: 30%; animation: update-wait 1.4s ease-in-out infinite; }
@keyframes update-wait { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .update-bar.queued i { animation: none; width: 100%; opacity: .35; } }
.update-warn { margin-top: 2px; line-height: 1.5; }
.update-warn b { font-weight: 600; }
.app-version { flex-wrap: wrap; }
.app-version .row-main .update-bar { margin-top: 6px; }
.app-version > .update-warn { flex-basis: 100%; }
.android-notes summary { cursor: pointer; color: var(--fg-2); font-size: 13px; }
.android-notes .prose { margin-top: 10px; max-height: 240px; overflow-y: auto; }
.muted { color: var(--fg-2); }

/* Registered routines use the same secondary-page typography and flat lists. */
.routine-row { overflow-wrap: anywhere; }
.routine-row > svg { color: var(--fg-3); flex-shrink: 0; }
.routine-count { font-size: 13.5px; }
.routine-chat { margin-top: 20px; }
.routine-empty .empty-s { color: var(--fg-2); }
.routine-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: var(--fg);
  color: color-mix(in srgb, var(--bad) 85%, var(--fg)); }
.routine-loading { display: grid; gap: 12px; margin-top: 16px; }
.routine-loading i { display: block; height: 52px; border-radius: var(--r-sm); background: var(--surface-2); }

/* shell */
.screen-records { flex: none; margin: 20px 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.screen-records > summary { padding: 14px 16px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.screen-records > summary > span:first-child { font-weight: 600; }
.screen-records > div { padding: 0 14px 14px; }
.screen-record-note { color: var(--fg-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.screen-records p.screen-record-note { padding: 10px 0; }
.screen-record-toolbar, .screen-record-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.screen-record-pagination { margin-top: 12px; font-size: 12px; color: var(--fg-2); flex-wrap: wrap; }
.screen-record-list { display: grid; align-content: start; gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px; }
.screen-record-row { display: grid; gap: 3px; text-align: start; padding: 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.screen-record-row:hover { background: var(--surface-2); }
.screen-record-row[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.screen-record-row:disabled { cursor: wait; opacity: .65; }
.screen-record-time { color: var(--fg-2); font-size: 11px; }
.screen-record-place { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.screen-record-row .screen-record-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.screen-record-layout { display: grid; gap: 14px; margin-top: 10px; min-width: 0; }
.screen-record-selected { min-width: 0; }
.screen-record-caption { color: var(--fg-2); font-size: 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.screen-record-image { display: grid; width: 100%; gap: 6px; color: var(--accent); font-size: 12px; }
.screen-record-image img { display: block; max-height: 300px; max-width: 100%; margin: auto; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; }
.screen-record-content { display: grid; gap: 16px; margin-top: 16px; font-size: 13px; overflow-wrap: anywhere; }
.screen-record-content h4 { font-size: 12px; color: var(--fg-2); font-weight: 600; margin-bottom: 6px; }
.screen-record-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; font: inherit; padding: 10px; background: var(--surface-2); border-radius: 8px; }
.screen-record-content details > summary { color: var(--fg-2); cursor: pointer; margin-bottom: 6px; }
.screen-record-item { padding: 8px 0; border-bottom: 1px solid var(--line); }
.screen-record-item dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px 12px; margin-top: 6px; }
.screen-record-item dt { color: var(--fg-2); }
.screen-record-item dd { margin: 0; }
@media (min-width: 680px) { .screen-record-layout { grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr); } }

.shell { height: var(--app-h, 100dvh); display: flex; flex-direction: column; max-width: var(--col);
  margin: 0 auto; padding: 0 16px; }
.top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: start;
  padding: 14px 0 8px; flex: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--fg-2); position: relative; transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--surface-2); color: var(--fg); }
.who-btn { display: flex; flex-direction: column; align-items: center; gap: 2px;
  justify-self: center; min-width: 0; max-width: 100%; padding: 2px 10px; border-radius: 14px; }
/* the animated companion in the header; its drawing has room around it, pulled in here */
.mascot-slot { display: block; width: 88px; height: 88px; margin: -16px 0 -6px; }
.mascot { display: block; width: 88px; height: 88px; }

/* chat */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.thread { flex: 1; overflow-y: auto; padding: 12px 2px 8px; overflow-anchor: none; }
.thread-in { display: flex; flex-direction: column; gap: 18px; }
.msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.msg.me { align-items: flex-end; }
/* a long URL or id still wraps inside its bubble; words stay whole by the app-wide keep-all (ux.css) */
.bubble { overflow-wrap: anywhere; }
.msg.me .bubble { background: var(--me-bubble); color: var(--me-text); white-space: pre-wrap; }
.branch-source { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--fg-2); padding: 8px 2px; flex: none; }
.edit-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 12px; color: var(--fg-2); background: var(--surface); }
.edit-banner strong { display: block; color: var(--fg); font-size: 13px; margin-bottom: 3px; }
.edit-banner .icon-btn { flex: none; }
.bubble p { margin: 0 0 10px; } .bubble p:last-child { margin: 0; }
.bubble ul, .bubble ol, .prose ul, .prose ol { margin: 4px 0 10px 20px; }
.bubble li { margin: 2px 0; }
.bubble code, .prose code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px;
  font-family: ui-monospace, monospace; font-size: .88em; }
/* a long path, URL or id has no break point and pushed past the card; code blocks still scroll */
.prose, .bubble code, .prose code { overflow-wrap: anywhere; }
.bubble pre code, .prose pre code { overflow-wrap: normal; }
.bubble pre, .prose pre { background: var(--surface-2); padding: 12px 14px; border-radius: 12px;
  overflow-x: auto; margin: 6px 0 10px; }
.bubble pre code { background: none; padding: 0; }
:is(.bubble, .prose) :is(h1, h2, h3, h4, h5, h6) { font-size: 1.1em; font-weight: 650;
  line-height: 1.4; margin: 16px 0 8px; }
:is(.bubble, .prose) h1 { font-size: 1.35em; }
:is(.bubble, .prose) h2 { font-size: 1.2em; }
:is(.bubble, .prose) > :first-child { margin-top: 0; }
/* a task list's item: V5's round checklist box (.cf-list i), lime with an ink tick when done */
:is(.bubble, .prose) li.md-task { list-style: none; position: relative; margin-left: -20px; padding-left: 26px; }
.md-task > input { appearance: none; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--fg-3); border-radius: 50%; background: transparent; opacity: 1; }
.md-task > input:checked { border-color: var(--ux-lime, #d8f65c); background: var(--ux-lime, #d8f65c); }
.md-task > input:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid var(--ux-lime-ink, #111); border-width: 0 2px 2px 0; transform: rotate(45deg); }
:is(.bubble, .prose) blockquote { border-left: 1px solid var(--line); padding-left: 12px;
  margin: 10px 0; color: var(--fg-2); }
:is(.bubble, .prose) hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.md-table { max-width: 100%; overflow-x: auto; margin: 10px 0; }
.md-table table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md-table :is(th, td) { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: start;
  min-width: 110px; vertical-align: top; }
.md-table th { font-weight: 650; background: var(--surface-2); }
/* a few columns share the width instead of pushing the table sideways */
.md-table:not(.many) :is(th, td) { min-width: 0; overflow-wrap: anywhere; }
/* many columns on a narrow screen: a card a row (ui.js TABLE_GRID_COLUMNS) */
@media (max-width: 640px) {
  .md-table.many { overflow-x: visible; }
  .md-table.many :is(table, tbody, tr, td) { display: block; }
  .md-table.many thead { display: none; }
  .md-table.many tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; }
  .md-table.many td { border: 0; padding: 2px 0; min-width: 0; display: flex; gap: 10px; font-size: 13.5px; }
  .md-table.many td::before { content: attr(data-label); flex: none; width: 108px; color: var(--fg-3); font-size: 12.5px; }
  .md-table.many td > .md-cell { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .md-table.many td:first-child { display: block; font-weight: 650; font-size: 15px; padding-bottom: 4px; }
  .md-table.many td:first-child::before { content: none; }
  .md-table.many td.empty { display: none; }
}
/* a phone's card is too narrow for a name and its value side by side (a reply's bubble leaves it
   ~210 px): the name over its value, which then has the card's width; beside a fixed name a long
   value was a strip two words wide (#802). A card's own width cannot be asked here: a container
   query collapsed the card inside a bubble that takes the width of what it holds. */
@media (max-width: 480px) {
  .md-table.many td:not(:first-child) { display: block; padding: 3px 0; }
  .md-table.many td:not(:first-child)::before { display: block; width: auto; margin-bottom: 1px; }
}
/* a long work's progress in its chat: a quiet line, not a bubble (folds away when it is over) */
.progress-line { display: flex; align-items: baseline; gap: 8px; color: var(--fg-2); font-size: 13px;
  line-height: 1.45; overflow-wrap: anywhere; }
.progress-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-2);
  transform: translateY(-1px); animation: live-think 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .progress-dot { animation: none; } }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* The new chat as the design draws it: the companion and greeting at the top, the asks at
   the bottom above the composer. A short screen scrolls inside the chat, not the page.
   A scroller cuts off what it holds at its padding edge, which would end the companion's shadow
   on a hard line beside the face: so it reaches into the page's side margin (all of it on a
   phone, where the cut is the screen's edge; as far as the shadow reaches on a wider screen,
   where the chat has room around it) and its padding keeps the content where the design puts it. */
.hello { --hello-bleed: min(20px, (100vw - 100%) / 2); flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: flex-start;
  margin-inline: calc(-1 * var(--hello-bleed)); padding: 0 calc(var(--hello-bleed) + 6px) 6px; }
.hello > * { flex-shrink: 0; }
/* the design's greeting, the size of the chat list's headline at every width; a word stays whole
   by the app-wide keep-all (ux.css), and a name longer than the line still wraps inside it */
.hello h1 { font: 500 26px/1.2 var(--ux-heading, var(--ff)); letter-spacing: -.3px; margin: 20px 0 0;
  max-width: 100%; white-space: pre-line; }
/* the caption with "Show others" beside it, then the asks; the button follows the asks in the
   page, so the keyboard reaches the asks first */
.hello-asks { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: auto 1fr;
  justify-items: start; align-items: center; gap: 8px; max-width: 100%; }
.hello-label { grid-area: 1 / 1; font-size: 12px; font-weight: 500; color: var(--fg-3); margin: 0 0 2px 4px; }
/* a quiet round glyph that leaves the caption's line as tall as it was; its 44px target reaches
   up into the free space above it and sideways only to the caption's edge, and its focus ring
   hugs the glyph so it keeps clear of the caption */
.hello-more { grid-area: 1 / 2; position: relative; display: grid; place-items: center; width: 28px; height: 28px;
  margin-block: -6px -4px; border-radius: 50%; color: var(--fg-3); transition: transform .15s, background .15s, color .15s; }
.hello-more::before { content: ''; position: absolute; inset: -14px -8px -2px; }
.hello-more:active { transform: scale(.92); background: var(--surface-2); }
.ux-ui .hello-more:focus-visible { outline-offset: 0; }
.starter { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; max-width: 100%; min-height: 46px;
  padding: 7px 18px 7px 7px; border: 0; border-radius: 23px; background: transparent; color: var(--fg);
  font-size: 14px; letter-spacing: -.1px; line-height: 1.35; text-align: left; text-wrap: pretty;
  transition: transform .15s, background .15s; }
@media (hover: hover) { .starter:hover, .hello-more:hover { background: var(--surface-2); color: var(--fg); } }
.starter:active { transform: scale(.97); background: var(--surface-3, var(--surface-2)); }
.starter-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; color: var(--fg); }
.starter-icon svg { stroke-width: 1.7; }
/* a bigger ask's second line: how long it keeps going */
.starter-text { display: flex; flex-direction: column; min-width: 0; }
.starter-kind { font-size: 12px; color: var(--fg-3); }
/* Coming in, once each time it is shown (Hello in app.js keeps when, so a redraw picks it up where
   it is): the greeting at .18 s, the caption at .26 s, the asks at .30, .36 and .42 s, each rising
   as it fades in (V5); asks from "Show others" come in at once. */
@media (prefers-reduced-motion: no-preference) {
  .hello.entering > h1 { animation: ux-arrive var(--motion-arrive) ease calc(.18s - var(--hello-since)) backwards; }
  .hello-asks.entering > :is(.hello-label, .hello-more) {
    animation: ux-arrive var(--motion-arrive) ease calc(.26s - var(--asks-since)) backwards; }
  .hello-asks.entering > .starter {
    animation: ux-arrive var(--motion-arrive) ease calc(.3s + var(--i) * .06s - var(--asks-since)) backwards; }
  .hello-asks.again > :is(.hello-label, .hello-more) { animation: none; }
  .hello-asks.again > .starter { animation-delay: calc(var(--i) * .06s - var(--asks-since)); }
}

.composer { flex: none; padding: 8px 0 14px; }
.composer-in { display: flex; align-items: flex-end; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 22px; padding: 8px 8px 8px 16px;
  box-shadow: var(--shadow); transition: border-color .15s; }
.composer textarea { flex: 1; border: 0; outline: none; resize: none; background: none;
  line-height: 1.55; padding: 7px 0; max-height: 220px; }
.composer textarea::placeholder { color: var(--fg-3); }
.send { width: 38px; height: 38px; border-radius: 50%; background: var(--fg); color: var(--bg);
  display: grid; place-items: center; flex: none; transition: opacity .15s; }
.send:hover { opacity: .85; }
.send.stop { background: var(--surface-2); color: var(--fg); }
.composer-hint { text-align: center; font-size: 11.5px; color: var(--fg-3); margin-top: 6px; }

/* cards inside chat */
.cards { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; }
.card { display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--fg);
  transition: border-color .15s, box-shadow .15s; }
button.card:hover, a.card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  text-decoration: none; }
.card-top { display: flex; align-items: center; gap: 6px; color: var(--fg-3); margin-bottom: 4px; }
.card-kind { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; flex: 1; }
.card-title { font-weight: 600; font-size: 14.5px; }
.card-sub { color: var(--fg-2); font-size: 13px; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
/* a value read from the person's documents: masked until they open it (memory.kept) */
.card.value .card-top { color: var(--accent); }
.value-line { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; flex-wrap: wrap; }
.value-text { font-size: 16px; letter-spacing: .06em; color: var(--fg); overflow-wrap: anywhere; min-width: 0; flex: 1; }
.value-text.shown { font-weight: 600; }
.value-line .btn { flex: none; }
.card.value.gone .value-text { color: var(--fg-3); text-decoration: line-through; }
.know-kept, .know-found { margin-bottom: 14px; }
.know-kept-row { cursor: pointer; }
.know-kept-row .value-line { margin: 4px 0; }
.card .row { margin-top: 10px; }

/* pills & buttons */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2);
  white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.run { background: var(--run-soft); color: var(--run); }
.pill.wait { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: blink 1.3s ease-in-out infinite; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 12px; font-weight: 600; font-size: 14px;
  transition: opacity .15s, background .15s; white-space: nowrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--fg); color: var(--bg); }
.btn.primary:hover:not(:disabled) { opacity: .88; }
.btn.ghost { background: var(--surface-2); }
.btn.ghost:hover { background: var(--line); }
.btn.danger { background: var(--bad-soft); color: var(--bad); }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.btn.lg { padding: 12px 16px; font-size: 15px; }
.btn.block { width: 100%; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.input { width: 100%; flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid transparent;
  border-radius: 12px; padding: 10px 12px; outline: none; transition: border-color .15s, background .15s; }
.input:focus { border-color: var(--accent); background: var(--surface); }

/* sheets, scrim */
.scrim { position: fixed; inset: 0; background: rgba(10,10,12,.35); backdrop-filter: blur(2px);
  z-index: 40; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.navs { display: flex; flex-direction: column; gap: 1px; }
.nav { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  color: var(--fg-2); font-size: 14px; text-align: left; }
.nav:hover { background: var(--surface-2); color: var(--fg); }
.nav.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav span:first-of-type { flex: 1; }
.badge { font-size: 11px; font-weight: 700; background: var(--accent); color: var(--bg);
  border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }
.label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-3); padding: 12px 12px 4px; }
/* The menu's places and chats scroll as one pane. It reaches the menu's edges: a focus ring at a
   row's side is not cut off. */
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; margin: -16px -12px 0; padding: 0 12px; }
.side-scroll > * { flex-shrink: 0; }
.convs { display: flex; flex-direction: column; gap: 1px; }
.convs .sub { font-size: 11.5px; color: var(--fg-3); padding: 8px 12px 2px; }
/* the search's box (#119); a chat it found shows the line that matched */
.conv-search { display: flex; align-items: center; gap: 6px; margin: -2px 0 2px; padding: 0 4px 0 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--fg-3); }
.conv-search:focus-within { border-color: var(--accent); }
.conv-search-input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; font-size: 13.5px; color: var(--fg); outline: none; }
.conv-search-input::-webkit-search-cancel-button { display: none; }
.conv-search-clear { visibility: hidden; }
.conv-search.has-text .conv-search-clear { visibility: visible; }
.conv.found { display: flex; flex-direction: column; gap: 2px; }
.found-title { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.found-line { font-size: 12.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.conv.found mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.conv-none { font-size: 12.5px; color: var(--fg-3); padding: 10px 12px; }
.conv { text-align: left; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; color: var(--fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* a long press opens the delete menu, not text selection */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y; transition: transform .15s; }
@media (prefers-reduced-motion: reduce) { .conv { transition: none; } }
.conv:hover { background: var(--surface-2); color: var(--fg); }
.conv-row { display: flex; align-items: center; position: relative; }
.conv-row .conv { flex: 1; min-width: 0; }
.conv-more { position: absolute; right: 4px; opacity: 0; color: var(--fg-3); }
.conv-row:hover .conv-more, .conv-more:focus-visible { opacity: 1; }
@media (hover: none) { .conv-more { display: none; } }
.conv.on { background: var(--surface-2); color: var(--fg); font-weight: 600; }

.sheet { position: fixed; z-index: 41; background: var(--surface); display: flex; flex-direction: column;
  left: 50%; bottom: 0; transform: translateX(-50%); width: min(640px, 100vw); max-height: 88dvh;
  border-radius: 20px 20px 0 0; box-shadow: var(--shadow); animation: up .22s cubic-bezier(.2,.8,.3,1); }
.sheet.right { left: auto; right: 0; top: 0; bottom: 0; transform: none; width: min(400px, 92vw);
  max-height: none; border-radius: 0; animation: slideR .2s cubic-bezier(.2,.8,.3,1); }
@keyframes up { from { transform: translate(-50%, 24px); opacity: .5; } }
@keyframes slideR { from { transform: translateX(16px); opacity: .5; } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px 20px;
  border-bottom: 1px solid var(--line); }
.sheet-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sheet-title { font-weight: 650; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
/* a title straight in the header (the bell) pushes its actions to the right */
.sheet-head > .sheet-title { flex: 1; }
.sheet-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); min-width: 0; }
.sheet-status > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-status > .sheet-summary:last-child { min-width: 0; white-space: normal; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.step-elapsed { flex: none; color: var(--fg-3); font-size: 12px; font-weight: 400; }
.goal-sum { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.goal-sum .ring { width: 20px; height: 20px; flex: none; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: 44px; z-index: 5; min-width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; }
/* above its button where there is no room under it (opensAbove) */
.menu.up { top: auto; bottom: 44px; }
.menu-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--fg); }
.menu-item > svg { flex: none; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.sheet-section { display: flex; flex-direction: column; gap: 8px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.steps li { padding: 7px 8px; border-radius: 10px; font-size: 14px; }
.step-row { display: flex; align-items: center; gap: 10px; }
.steps li .ux-step-mark { width: 18px; height: 18px; font-size: 11px; }
/* A check and muted text mean completed; a strike reads as cancelled. The mark is the chat's (ux.css). */
.steps li.done { color: var(--fg-3); }
.steps li.now { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.steps li:is(.waiting, .stopped) { background: var(--surface-2); }
.steps li.waiting .now-tag { color: var(--warn); }
.steps li.stopped .now-tag { color: var(--fg-2); }
.steps li.failed .now-tag { color: var(--bad); }
.steps li.skipped { color: var(--fg-3); }
.steps li.skipped .now-tag { color: var(--fg-3); font-weight: 600; }
/* what a step did, folded under it: its result and its log records */
.steps li.has-log > .step-row { cursor: pointer; }
/* "1/3 done" beside the plan's label: progress at a glance */
.label .label-count { margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.step-fold { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; color: var(--fg-3); white-space: nowrap; }
.now-tag + .step-fold { margin-left: 8px; }
.step-fold svg { transform: rotate(-90deg); transition: transform .15s; }
.step-fold.open svg { transform: rotate(90deg); }
.step-latest { margin: 4px 0 0 28px; font-size: 12.5px; font-weight: 400; color: var(--fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-log { margin: 8px 0 2px 28px; font-weight: 400; }
.step-result { font-size: 13px; color: var(--fg-2); margin: 0 0 8px; white-space: pre-wrap; text-decoration: none; }
.steps li.done .step-log { color: var(--fg-2); }
/* a specialist's own steps, under the step it works on */
.steps .steps { margin: 6px 0 0 28px; font-weight: 400; }
.steps .steps li { padding: 3px 6px; font-size: 13px; background: none; }
.steps .steps li .ux-step-mark { width: 14px; height: 14px; font-size: 9px; }
.now-tag { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
/* answer buttons under a question; the slot they sit in takes no room once answered */
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.btn.choice { background: var(--surface); border: 1px solid var(--line); color: var(--fg); text-align: left; }
.btn.choice:hover:not(:disabled) { border-color: var(--accent); }
/* offers to pick from: one row each, the facts under the name, the page at the side */
.choices.offers { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.offer { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.offer:hover { border-color: var(--accent); }
.offer-pick { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: none; border: 0; color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.offer-pick:disabled { opacity: .55; cursor: default; }
.offer-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--accent-soft, var(--line)); color: var(--accent); }
.offer-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.offer-t, .offer-f, .offer-terms { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.offer-t { font-size: 14px; font-weight: 600; -webkit-line-clamp: 2; }
.offer-f { font-size: 12.5px; color: var(--fg-2); -webkit-line-clamp: 2; }
.offer-p { color: var(--fg); font-weight: 600; }
.offer-terms { font-size: 12px; color: var(--fg-3); -webkit-line-clamp: 1; }
.offer-why { font-size: 12px; color: var(--accent); font-weight: 500; }
.offer-src { align-self: flex-start; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 56px); margin: -4px 0 8px 44px; font-size: 12px; color: var(--fg-2); text-decoration: none; }
.offer-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-src:hover { color: var(--accent); }
.card-now.chosen { color: var(--fg-3); font-size: 12px; }
.task-chosen { font-size: 13px; color: var(--fg-2); margin: 4px 0 8px; }
.choice-slot:empty, .screen-slot:empty, .form-slot:empty { display: none; }
.screen-slot { margin-top: 8px; }
.prose.result { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
/* done work's suggestions of what could follow: quiet, in the accent's soft tone, never an error */
.more-to-do { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; gap: 6px; }
.more-to-do .label { display: flex; align-items: center; gap: 6px; color: var(--accent); }
.more-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--fg-2); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.more-to-do .row { margin-top: 4px; }
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--fg); }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-chip:hover { border-color: var(--accent); }
.details { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.details > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fg-2); list-style: none; }
.details > summary::-webkit-details-marker { display: none; }
.details > summary::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.details[open] > summary::before { transform: rotate(90deg); }
.trace-links { display: block; flex: none; min-width: 0; padding-top: 0; }
.trace-links > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.trace-links > summary::before { margin-right: 0; flex: none; }
.trace-links > summary > svg { flex: none; }
.trace-refresh { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--fg-2); }
.trace-refresh:hover:not(:disabled) { background: var(--surface-2); }
/* the issue button sits first on the right; the refresh follows it */
.trace-report + .trace-refresh { margin-left: 2px; }
/* developer mode: the issue form over the page, above any sheet */
.issue-report .scrim { z-index: 60; }
.issue-form { position: fixed; z-index: 61; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(560px, 100vw); max-height: 88dvh; overflow-y: auto; background: var(--surface);
  border-radius: 20px 20px 0 0; box-shadow: var(--shadow); padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px; animation: up .22s cubic-bezier(.2,.8,.3,1); }
.issue-head { display: flex; align-items: center; gap: 8px; }
.issue-head .icon-btn { margin-left: auto; }
.issue-shot { max-height: 220px; width: auto; max-width: 100%; align-self: flex-start;
  border-radius: 10px; border: 1px solid var(--line); }
/* operators: the reported issues */
.issue-row .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.issue-detail-shot { width: 100%; max-height: 60dvh; object-fit: contain; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); }
.issue-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0; font-size: 14px; }
.issue-meta dt { color: var(--fg-3); }
.issue-meta dd { margin: 0; overflow-wrap: anywhere; }
.issue-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.trace-refresh:disabled { opacity: .5; cursor: wait; }
.trace-links:not([open]) .trace-refresh { display: none; }
.trace-links:not([open]) > summary { min-height: 28px; }
.trace-content { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.trace-status { margin: 0; color: var(--fg-2); font-size: 12px; }
.trace-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.trace-label { grid-column: 1 / -1; color: var(--fg-2); font-size: 12px; font-weight: 500; }
.trace-timing .trace-label { grid-column: auto; }
.trace-timing .trace-entry { font-variant-numeric: tabular-nums; }
/* The panel already provides Report issue; its floating duplicate must not cover timing values. */
body:has(.trace-links[open] .trace-timing[open]) .issue-help { display: none; }
.trace-entry code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; user-select: all; }
.trace-actions { display: flex; gap: 4px; }
.trace-help { border-top: 1px solid var(--line); padding-top: 8px; color: var(--fg-2); font-size: 12px; }
.trace-help > summary { cursor: pointer; }
.trace-help-content { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.trace-help-content > p { margin: 0; }
.aoc-chip { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px;
  margin: 3px 2px 0 0; padding: 2px 6px; border: 0; border-radius: 999px; background: transparent;
  color: var(--fg-3); font-size: 11px; line-height: 1.4; cursor: pointer; }
.aoc-chip:hover:not(:disabled) { background: var(--surface-2); color: var(--fg); }
.aoc-chip.changed { color: var(--accent); }
.aoc-chip:disabled { cursor: default; }
.aoc-detail { display: flex; flex-direction: column; gap: 8px; }
.aoc-detail h4 { margin: 4px 0 0; color: var(--fg-2); font-size: 12px; font-weight: 600; }
.aoc-pre { margin: 0; max-height: 32vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.aoc-pre .aoc-add { color: var(--ok); }
.aoc-pre .aoc-del { color: var(--bad); }
.aoc-pre .aoc-same { color: var(--fg-2); }
.aoc-after > summary { cursor: pointer; color: var(--fg-2); font-size: 12px; margin-top: 4px; }
.chat > .trace-links { margin: 6px 0; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 12px; max-height: 36%; overflow-y: auto; }
@media (max-width: 600px) {
  .trace-links > summary { min-height: 40px; }
  .trace-links:not([open]) > summary { min-height: 32px; }
  .trace-refresh { min-height: 40px; }
  .trace-actions .icon-btn.sm { width: 40px; height: 40px; }
}
.goal-desc { margin: 0; }
@media (prefers-reduced-motion: reduce) { .details > summary::before { transition: none; } }
.sheet-body { overflow-y: auto; padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 12px; }

/* Calls use the task's conversation and composer; the transcript is secondary. */
.call-section { min-width: 0; }
.call-progress { display: flex; align-items: center; gap: 10px; }
.call-progress > svg { flex: none; color: var(--fg-2); }
.call-progress-text { flex: 1; min-width: 0; }
.call-status { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.call-destination, .call-note { color: var(--fg-2); font-size: 14px; overflow-wrap: anywhere; }
.call-destination { font-variant-numeric: tabular-nums; }
.call-outcome { overflow-wrap: anywhere; }
.call-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--bad); font-size: 14px; overflow-wrap: anywhere; }
.call-details > summary { min-height: 36px; display: flex; align-items: center; }
.call-details > summary:hover { color: var(--fg); }
.call-transcript { list-style: none; display: flex; flex-direction: column; gap: 14px; max-height: 240px; overflow-y: auto; padding-block: 6px; }
.call-transcript li { min-width: 0; }
.call-transcript p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.call-speaker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--fg-2); font-size: 14px; font-weight: 600; }
.call-speaker span { font-weight: 400; }

/* secondary pages */
.page { flex: 1; overflow-y: auto; padding: 4px 2px 40px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: none; -ms-overflow-style: none; }
.page::-webkit-scrollbar { display: none; }
.page h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 8px; }
.page-back { display: inline-flex; align-items: center; gap: 4px; width: fit-content; background: none; border: 0;
  margin: 2px 0 -2px -4px; padding: 4px 8px 4px 4px;
  border-radius: 8px; color: var(--fg-2); font-size: 13.5px; font-weight: 600; }
.page-back:hover { background: var(--surface-2); color: var(--fg); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-link { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 6px 12px;
  border-radius: 999px; background: var(--surface-2); color: var(--fg-2); font-size: 13px; font-weight: 600; }
.page-link:hover { color: var(--fg); }
.conversations-page .convs { gap: 6px; }
.conversations-page .conv-row, .conversations-page .conv.found {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.conversations-page .conv { padding: 14px; min-height: 48px; font-size: 15px; }
.conversations-page .conv-row .conv { padding-right: 42px; }
.conversations-page .conv-more { opacity: 1; }
.conversations-page .conv-search-input { padding: 12px 0; font-size: 15px; }
.conversation-error { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--fg-2); font-size: 13.5px; }
.conversation-error .btn { flex-shrink: 0; }
.group { display: flex; flex-direction: column; gap: 8px; }
.group > .label { padding-left: 2px; }
.row-card { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  color: var(--fg); }
.row-card.col { flex-direction: column; align-items: stretch; gap: 8px; }
/* the VM's server sign-in (on-device mode): the fields and buttons spaced like its entry */
.vm-sign-in { display: flex; flex-direction: column; gap: 8px; }
button.row-card:hover, a.row-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  text-decoration: none; }
.row-main { flex: 1; min-width: 0; }
.row-main.link { text-align: left; color: inherit; background: none; padding: 0; }
.row-title .tag { margin-left: 8px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); vertical-align: 1px; }
.row-title .tag.muted { background: var(--surface-2); color: var(--fg-3); }
.group > .hint { color: var(--fg-3); font-size: 12.5px; padding: 0 2px 2px; }
/* an idea (V5's prepared-work chip): what kind it is and when it came up, then what and why, then
   its two choices, Not now beside the button that starts it */
.ux-ui .row-card.col.idea-card { gap: 4px; }
.idea-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.idea-kind { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: 12px;
  font-size: 11.5px; font-weight: 600; color: var(--fg-2); background: transparent; box-shadow: inset 0 0 0 1px var(--ux-rule, var(--line)); }
.idea-at { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.idea-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.idea-reason { font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.row-sub.idea-when { display: flex; align-items: center; gap: 5px; color: var(--fg-2); }
.idea-actions { display: flex; gap: 8px; margin-top: 12px; }
.idea-actions .btn { min-height: 44px; border-radius: 22px; font-size: 13.5px; font-weight: 700; }
.idea-actions .btn.ghost { flex: 1; }
.idea-actions .btn.primary { flex: 2; }
.idea-sub { margin: 0 4px 2px; font-size: 13px; line-height: 1.55; word-break: keep-all; }
.row-sub.clamp2 { -webkit-line-clamp: 2; }
.row-sub.fact-src { font-size: 12px; color: var(--fg-3); }
.row-title { font-weight: 600; font-size: 14.5px; }
.row-sub { color: var(--fg-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.seg { display: flex; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 3px; flex-wrap: wrap; }
.seg button { flex: 1; padding: 7px 10px; border-radius: 9px; font-size: 13px; color: var(--fg-2); }
.seg button.on { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.seg.small { margin-top: 16px; justify-content: center; }
.callout { border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.callout.wait { background: var(--warn-soft); } .callout.bad { background: var(--bad-soft); color: var(--bad); }
.callout.ask { background: var(--warn-soft); display: flex; flex-direction: column; gap: 4px; }
.ask-q { white-space: pre-wrap; color: var(--fg); }
.callout.ask .row { margin-top: 6px; }
.callout .row { margin-top: 10px; }
.empty { text-align: center; padding: 48px 20px; color: var(--fg-3); }
.empty-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--surface-2);
  display: grid; place-items: center; margin: 0 auto 14px; color: var(--fg-2); }
.empty-t { font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.empty-s { font-size: 13.5px; max-width: 360px; margin: 0 auto; }
/* empty Brief: making a card is the way in; the dev sample sits quietly under it */
.timeline { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 14px;
  display: flex; flex-direction: column; gap: 12px; }
.tl { position: relative; min-width: 0; }
.tl::before { content: ""; position: absolute; left: -20px; top: 7px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--line); border: 2px solid var(--surface); }
.tl.result::before { background: var(--ok); } .tl.error::before { background: var(--bad); }
.tl.approval::before { background: var(--warn); }
/* lasting lines: done once something followed, else going on, waiting or stopped (lineState) */
.tl.done .tl-t { color: var(--fg-3); font-weight: 500; text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--fg-3) 70%, transparent); }
.tl.done::before { background: var(--ok); }
.tl.live::before { background: var(--accent); animation: tl-live 1.6s ease-in-out infinite; }
@keyframes tl-live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; } }
.tl.waiting::before { background: var(--warn); }
.tl.stopped::before { background: var(--bad); }
.tl-tag { margin-left: 8px; }
.tl-tag.waiting { color: var(--warn); } .tl-tag.stopped { color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .tl.live::before { animation: none; } }
/* a record names files and pages without spaces (snake_case names, addresses): they break anywhere
   rather than run past the sheet's edge */
.tl-t { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.tl-times { color: var(--fg-3); font-weight: 500; }
.tl-d { font-size: 12.5px; color: var(--fg-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-at { font-size: 11.5px; color: var(--fg-3); }
.tl.failed .tl-d { color: var(--warn); }
/* a tool call's name, timing and raw message: folded, for developers */
.tl-tech { font-size: 11.5px; color: var(--fg-3); }
.tl-tech > summary { cursor: pointer; list-style: none; width: fit-content; }
.tl-tech > summary::-webkit-details-marker { display: none; }
.tl-tech > summary::before { content: "▸"; display: inline-block; margin-right: 4px; transition: transform .15s; }
.tl-tech[open] > summary::before { transform: rotate(90deg); }
.tl-tech-row { margin-top: 4px; }
.tl-tech code { font-size: 11.5px; }
.tl-tech-msg { margin: 4px 0 0; padding: 6px 8px; border-radius: 6px; background: var(--surface-2);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; max-width: 100%; }
.surf { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 4px 0; }
.surf .st { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.surf-n { display: flex; flex-direction: column; min-width: 0; }
.surf-d { font-size: 12px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.st.off { background: var(--fg-3); opacity: .5; }
.st.no { border: 1.5px dashed var(--fg-3); }
.surf-r { margin-left: auto; font-size: 12.5px; color: var(--fg-3); text-align: right; max-width: 60%; }
.notif-group { min-width: 0; }
.notif-group > summary { cursor: pointer; list-style: none; }
.notif-group > summary::-webkit-details-marker { display: none; }
.notif-group > summary:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.notif-count { flex: none; min-width: 24px; padding: 0 6px; border-radius: 8px;
  background: var(--surface-2); color: var(--fg-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.notif-chevron { flex: none; display: flex; color: var(--fg-2); transform: rotate(-90deg); }
.notif-group[open] > summary .notif-chevron { transform: rotate(90deg); }
.notif-items { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 0 12px; }
.notif-items .row-card { border: 0; border-radius: 0; background: none; padding: 8px 0; }
.notif-items button.row-card:hover { background: var(--surface-2); }
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.file-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 8px; color: var(--fg); }
.file-card:hover { border-color: var(--accent); text-decoration: none; }
.file-wrap { position: relative; display: flex; flex-direction: column; }
.file-wrap .file-card { flex: 1; }
.file-del { position: absolute; top: 6px; right: 6px; background: var(--surface); color: var(--fg-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.file-ask { gap: 8px; }
.file-ask .row { gap: 6px; flex-wrap: wrap; }
.file-card img { width: 100%; height: 110px; object-fit: cover; border-radius: 9px; background: var(--surface-2); }
.file-ic { height: 110px; display: grid; place-items: center; background: var(--surface-2);
  border-radius: 9px; color: var(--fg-3); }
.file-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 11.5px; color: var(--fg-3); }
/* The picture viewer (image-viewer.js): dark in both themes, as photos are looked at. The
   bar and caption float over the picture; the picture fits between them until zoomed. */
.viewer { position: fixed; inset: 0; z-index: 65; color: #f4f5f7; overflow: hidden;
  --viewer-fade: 1; --viewer-top: calc(56px + env(safe-area-inset-top, 0px));
  --viewer-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); animation: fade .15s; }
.viewer.closing { opacity: 0; transition: opacity .2s; pointer-events: none; }
.viewer.closing-down { pointer-events: none; }
.viewer.closing-down .viewer-bg { opacity: 0; transition: opacity .2s; }
.viewer.closing-down .viewer-bar, .viewer.closing-down .viewer-caption,
.viewer.closing-down .viewer-nav { opacity: 0; transition: opacity .15s; }
.viewer-bg { position: absolute; inset: 0; background: #000; opacity: var(--viewer-fade); }
.viewer-stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: zoom-in; }
.viewer.zoomed .viewer-stage { cursor: grab; }
.viewer-track { display: flex; height: 100%; will-change: transform; }
.viewer-track.settling { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.viewer-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: var(--viewer-top) 12px var(--viewer-bottom); position: relative; overflow: hidden; }
.viewer-slide.settling, .viewer.closing-down .viewer-track .viewer-slide { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.viewer.closing-down .viewer-slide:not([aria-hidden="true"]) { transform: translateY(40vh) scale(.8) !important; }
.viewer-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 0 0;
  -webkit-user-drag: none; opacity: 0; transition: opacity .15s; }
.viewer-img.settling { transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .15s; }
.viewer-slide.loaded .viewer-img { opacity: 1; }
/* loading: a quiet ring where the picture will be */
.viewer-slide::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px;
  margin: -14px 0 0 -14px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.75); animation: viewer-spin .8s linear infinite; }
@keyframes viewer-spin { to { transform: rotate(360deg); } }
.viewer-slide.loaded::after, .viewer-slide.failed::after { display: none; }
.viewer-failed { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 0 32px; text-align: center; font-size: 14px; color: rgba(255,255,255,.75); }
.viewer-slide.failed .viewer-failed { display: flex; }
.viewer-slide.failed .viewer-img { display: none; }
.viewer-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 4px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 16px;
  background: linear-gradient(rgba(0,0,0,.5), transparent); pointer-events: none; }
.viewer-bar > * { pointer-events: auto; }
.viewer-count { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.viewer-gap { flex: 1; pointer-events: none; }
.viewer-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%;
  color: inherit; background: transparent; transition: background .15s; }
.viewer-btn:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.viewer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-radius: 50%; }
.viewer-btn[hidden] { display: none; }
.viewer-nav { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px;
  background: rgba(30,30,32,.55); }
.viewer-nav.prev { left: 16px; }
.viewer-nav.next { right: 16px; }
.viewer-nav:disabled { opacity: 0; pointer-events: none; }
/* a finger swipes between pictures; the arrows are for a mouse */
@media (hover: none), (max-width: 640px) { .viewer-nav { display: none; } }
.viewer-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px
  calc(14px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 13.5px; line-height: 1.45;
  color: rgba(255,255,255,.88); background: linear-gradient(transparent, rgba(0,0,0,.55));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.viewer-caption[hidden] { display: none; }
.viewer.zoomed .viewer-caption { opacity: 0; transition: opacity .15s; }

/* a field with a leading icon (sign-in, password); the sign-in skin is in ux.css */
.field { display: flex; flex-direction: column; gap: 7px; text-align: left; font-size: 13px;
  color: var(--fg-2); font-weight: 550; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > svg { position: absolute; left: 14px; color: var(--fg-3); pointer-events: none; }
.input-wrap .input { padding-left: 42px; height: 48px; border-radius: 12px; font-size: 15px;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.input-wrap .input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.input-wrap:focus-within > svg { color: var(--accent); }
.input-eye { position: absolute; right: 6px; width: 36px; height: 36px; border-radius: 10px; display: grid;
  place-items: center; color: var(--fg-3); }
.input-eye:hover { background: var(--surface-2); color: var(--fg); }
.input-wrap .input[name="password"] { padding-right: 46px; }

/* centred by its own width: placed at left 50% it could only use half the screen, and
   "Chat and 1 piece of work deleted · Undo" broke onto two lines on a phone. V5's notice: a dark
   pill of small type (#252525, 12px, radius 18, 9/14), the same dark bar in both themes. */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 70;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--snack-bg); color: var(--snack-fg); padding: 9px 14px; border-radius: 18px; font-size: 12px;
  font-weight: 500; line-height: 1.45; box-shadow: var(--shadow); animation: up .2s; }
/* The error tint becomes light in dark mode; solid notices need their own ink. */
.toast.bad { background: var(--bad); color: var(--bad-ink); }
/* V5's action notice: the message and one text button. Long translations stay readable. */
.toast.has-action { display: flex; align-items: center; gap: 14px; min-height: 40px; overflow: hidden;
  padding: 6px 6px 6px 16px; border-radius: 18px; font-weight: 500;
  background: var(--snack-bg); color: var(--snack-fg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .12); }
.toast.has-action .toast-text { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.toast-action { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  height: 28px; padding: 0 12px; border-radius: 14px; font-size: 12px; font-weight: 700; color: var(--snack-accent);
  background: color-mix(in srgb, var(--snack-accent) 16%, transparent); }
.toast-action:hover { background: color-mix(in srgb, var(--snack-accent) 24%, transparent); }
.toast-action:active { transform: scale(.97); }

@media (max-width: 600px) {
  .shell { padding: 0 12px; }
  .composer-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* switches and the mobile tools list */
.switch { flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--surface-3, var(--line));
  position: relative; transition: background .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .2s cubic-bezier(.3,.7,.2,1); }
.switch.on { background: var(--accent); }
.switch.on i { transform: translateX(18px); background: var(--bg); }
/* a tap being saved: the switch already shows where it goes, locked */
.switch[aria-busy="true"] { opacity: .6; cursor: progress; }
/* shown, not switched here (a setting that belongs to the phone, seen on the web) */
.switch:disabled { opacity: .45; cursor: not-allowed; }
.row-title.sm { font-size: 14px; }
/* Phone tools: one row per group, its state and the step that makes it usable on the row; a
   group that cannot be used now is greyed (its button stays bright), its tools fold below */
.tool-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.tool-row + .tool-row { border-top: 1px solid var(--line); }
.tool-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; padding: 0; }
.tool-head svg { transform: rotate(-90deg); color: var(--fg-3); flex-shrink: 0; transition: transform .15s; }
.tool-head[aria-expanded="true"] svg { transform: rotate(90deg); }
.unusable .row-main, .unusable .aware-desc { opacity: .5; }
/* the apps watching along skips are this phone's own choice, whether or not it can watch along now */
.unusable .screen-ai-privacy .row-main { opacity: 1; }
.tool-items { display: flex; flex-direction: column; gap: 6px; }
.tool-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-2); }
.tool-item.dim { opacity: .6; }
.tool-ex { font-size: 12.5px; color: var(--fg-3); margin-top: 3px; }

/* plugin settings: a plugin's server-wide form at the bottom of Settings, edited in a sheet */
.plugset-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--bad); font-size: 14px; }
.plugset-group { gap: 14px; }
.plugset-group > .label { padding: 4px 0 0; }
.plugset-group + .plugset-group { border-top: 1px solid var(--line); padding-top: 4px; }
.plugset-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plugset-field .row-sub { -webkit-line-clamp: unset; }
.plugset-unit { display: flex; align-items: center; gap: 8px; }
.plugset-unit .input { flex: 0 1 140px; }
.plugset-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 12.5px; color: var(--fg-3); }
.plugset-link { font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 2px 0; }
.plugset-link.danger-text { color: var(--bad); }
.plugset-err { font-size: 12.5px; color: var(--bad); overflow-wrap: anywhere; }
.input[aria-invalid="true"] { border-color: var(--bad); }
/* Save stays in reach while a long form scrolls (and above the phone's keyboard) */
.plugset-actions { position: sticky; bottom: -28px; margin-bottom: -28px; padding: 10px 0 28px; flex-wrap: nowrap;
  background: var(--surface); border-top: 1px solid var(--line); }
.plugset-actions .btn { flex: 1; }

/* brand tagline under the name: L·I·A·N initials stand out */
.tagline { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; margin: -4px 0 6px;
  font-size: 12.5px; letter-spacing: .02em; color: var(--fg-3); }
.tagline b { color: var(--accent); font-weight: 700; }

/* goals look different from delegated work: violet tint, stripe, progress ring */
:root { --goal: #7C5CFF; }
.card.goal { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--goal) 35%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--goal) 10%, var(--surface)), var(--surface) 70%); padding-left: 18px; }
.card.goal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--goal); }
.card.goal .card-kind { color: var(--goal); }
.ring { width: 38px; height: 38px; flex: none; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: color-mix(in srgb, var(--goal) 18%, transparent); stroke-width: 4; }
.ring-fg { fill: none; stroke: var(--goal); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .4s; }
.card.task { border-left: 1px solid var(--line); }
/* work and goals in the chat: one line each, details open in their panel */
.card.line { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.card.line .card-title { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* running work: its title, and under it the step it is on, both one line */
.card.line .card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.card.line .card-main .card-title { flex: none; }
.card-now { font-size: 12.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.line .card-sub { margin: 0; flex: none; font-size: 12.5px; }
.card.line > svg:first-child { flex: none; color: var(--fg-3); }
.card.line.goal { padding-left: 16px; }
.card.line .ring { width: 22px; height: 22px; }
/* a card whose work, goal or schedule was deleted: it stays in the conversation, quiet, and opens nothing */
.card.line.gone { background: transparent; border-style: dashed; color: var(--fg-3); cursor: default; }
.card.line.gone .card-title { color: var(--fg-2); }
.busy-line { display: flex; align-items: center; gap: 6px; color: var(--accent); }
.goal-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 3px 8px; border-radius: 999px;
  font-size: 12px; color: var(--goal); background: color-mix(in srgb, var(--goal) 10%, transparent); cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-group { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px;
  color: var(--goal); background: color-mix(in srgb, var(--goal) 8%, transparent); }
.goal-group-t { font-weight: 650; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-group-s { font-size: 12px; color: var(--fg-3); }

/* service connections */
.conn-badge { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: -.02em; }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.conn-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); }
.conn-card .btn { align-self: flex-start; }
.conn-tools { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.conn-tool { display: flex; align-items: flex-start; gap: 10px; }
.btn.danger { color: var(--bad); }
.input::placeholder, textarea::placeholder { color: var(--fg-3); font-weight: 400; opacity: 1; }

/* wide screens: persistent sidebar + centred content column */
.frame { height: var(--app-h, 100dvh); display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px 14px;
  display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
/* the menu's top: the companion and its greeting beside it, centred on the figure */
.side-brand { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 10px 0 2px; }
.side-me { width: 72px; height: 72px; display: grid; place-items: center; flex: none; }
/* its drawing has room around the figure, pulled in here */
.companion.side { display: block; width: 88px; height: 88px; margin: -8px; }
.side-hello { min-width: 0; font-weight: 650; font-size: 16px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Chat's row with a small + where other rows show their count */
.nav-row { position: relative; }
.nav-row > .nav { width: 100%; padding-right: 40px; }
/* a new chat, beside Chat: small and quiet, a rounded square with a neutral plus, so it never
   reads as the filled round counts on the rows below it (a filled blue circle did); the accent
   shows only under the finger. The touch area stays 44px. */
.nav-add { position: absolute; right: 10px; top: 50%; width: 24px; height: 24px; margin-top: -12px;
  border-radius: 7px; display: grid; place-items: center; color: var(--fg-2); background: transparent;
  border: 1px solid var(--line); transition: color .15s, background .15s, border-color .15s, transform .1s; }
.nav-add::before { content: ''; position: absolute; inset: -10px; }   /* a 44px touch area */
.nav-add:hover, .nav-add:active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.nav-add:active { transform: scale(.94); }
.nav-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.frame-main { min-width: 0; min-height: 0; display: flex; }
.frame-main .shell { flex: 1; max-width: 880px; width: 100%; }
.frame .top { grid-template-columns: 44px 1fr 44px; }

/* one primary colour across sign-in and the app: the brand indigo→violet */
:root { --brand: linear-gradient(135deg, #3b5bdb, #6a4cf5); }
.btn.primary, .send:not(.stop) { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(74,84,230,.22); }
.btn.primary:hover:not(:disabled), .send:not(.stop):hover { opacity: 1; filter: brightness(1.07); }
.btn.primary:disabled { box-shadow: none; }

/* VM live view */
.vm-frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: #0e0f14; aspect-ratio: 16 / 10; max-width: 100%; box-shadow: var(--shadow); }
.vm-frame img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: crosshair; user-select: none; }
.vm-live { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); padding: 4px 9px; border-radius: 999px; }
.vm-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; animation: blink 1.4s ease-in-out infinite; }
.vm-live.off i { background: #8c8c86; animation: none; }
/* the person stepped in while Ian worked: noted, quietly, over the picture (no layout jump) */
.vm-noted { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 6px); max-width: calc(100% - 24px);
  padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.66); color: #fff; font-size: 12.5px;
  font-weight: 600; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; text-align: center; }
.vm-noted.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .vm-noted { transition: none; } }
.vm-tap { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); pointer-events: none; animation: vmtap .6s ease-out forwards; }
@keyframes vmtap { to { transform: scale(1.8); opacity: 0; } }
.vm-type { display: flex; gap: 8px; }
.vm-type .input { flex: 1; min-width: 0; }
.vm-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.vm-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page .vm-controls .btn.sm { min-height: 44px; min-width: 44px; }
.vm-controls [aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.vm-controls-more { position: relative; margin-left: auto; }
.vm-controls-more summary { list-style: none; cursor: pointer; }
.vm-controls-more summary::-webkit-details-marker { display: none; }
.vm-controls-more .vm-keys { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 3;
  width: min(280px, calc(100vw - 48px)); padding: 10px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.vm-keyboard:not([hidden]) { display: grid; gap: 6px; }
.vm-keyboard { scroll-margin-block: 12px; }
.vm-keyboard [hidden] { display: none; }
.vm-input-failure { color: var(--bad); }
.small { font-size: 12.5px; }
.vm-fs { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 17px; display: grid; place-items: center; }
.vm-stage { display: flex; flex-direction: column; gap: 10px; }
/* tap the picture directly, or move a pointer like a touchpad (#433) */
.vm-mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vm-mode .seg button { white-space: nowrap; }
.vm-frame.pad img { cursor: default; }
/* two fingers zoom the picture, so the page must not take the gesture */
.vm-frame img { touch-action: none; }
.vm-zoom-reset { position: absolute; left: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; }
.vm-cursor { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.55); pointer-events: none; }
.vm-cursor::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.vm-stage.full .vm-mode .muted { color: #aaa; }
.vm-stage.full { position: fixed; inset: 0; z-index: 80; background: #0b0c10; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(10px + env(safe-area-inset-bottom, 0px)); }
.vm-stage.full .vm-frame { flex: 1; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 10px; }
.vm-stage.full .vm-keys .btn { background: rgba(255,255,255,.1); color: #fff; }
.vm-stage.full .vm-controls .btn { background: rgba(255,255,255,.1); color: #fff; }
.vm-stage.full .vm-controls-more .vm-keys { background: #16171d; border-color: #2a2b33; }
.vm-stage.full .input { background: #16171d; border-color: #2a2b33; color: #eee; }

/* Teaching mode (#933): a card over the live view to start and review; while recording, one slim
   bar so the screen stays free to work on */
.teach-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--fg); }
.teach-card.bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.teach-head { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.teach-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15.5px; color: var(--fg); }
.teach-close { margin: -6px -8px -6px 0; }
.teach-field { display: flex; flex-direction: column; gap: 4px; }
.teach-field textarea { resize: vertical; min-height: 56px; }
.teach-label { font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.teach-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.teach-actions .btn.primary { margin-right: auto; }
.teach-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--fg-2); }
.teach-facts span { display: inline-flex; align-items: center; gap: 5px; overflow-wrap: anywhere; }
.teach-slots { display: flex; flex-direction: column; gap: 6px; }
.teach-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.teach-chips .chip { padding: 4px 10px; }
.teach-steps ol { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.teach-step { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; flex-wrap: wrap; }
.teach-step-n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--fg-2); margin-top: 1px; }
.teach-step-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.teach-step.needs-ok .teach-step-n { background: var(--warn-soft); color: var(--warn); }
.teach-step.yours .teach-step-n { background: var(--accent-soft); color: var(--accent); }
.teach-more { margin-top: 6px; }
.teach-more summary { cursor: pointer; font-size: 13px; color: var(--fg-2); }
.teach-more ol { margin-top: 6px; }
.teach-wait { display: flex; align-items: center; gap: 12px; }
.teach-spin { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--accent-soft);
  border-top-color: var(--accent); animation: teach-spin .9s linear infinite; }
@keyframes teach-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .teach-spin { animation: none; } }
.teach-error { display: flex; align-items: flex-start; gap: 8px; color: var(--bad); font-size: 14px; }
.teach-error svg { flex: none; margin-top: 3px; }
.teach-done { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-2);
  padding: 8px 4px 8px 12px; border-radius: var(--r-sm); background: var(--ok-soft); }
.teach-done svg { color: var(--ok); flex: none; }
.teach-done span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.teach-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 8px 8px 8px 12px; border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); box-shadow: var(--shadow); }
.teach-rec { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--bad); }
.teach-rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); animation: blink 1.4s ease-in-out infinite; }
.teach-meta { font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.teach-bar-actions { margin-left: auto; display: flex; gap: 6px; }
.vm-stage.full .teach-card, .vm-stage.full .teach-bar { background: #16171d; border-color: #2a2b33; color: #eee; }
.vm-stage.full .teach-title { color: #eee; }
/* Developer settings › Taught procedures */
/* a way Army learned from the person in phone apps: the chat's card (save or discard) and My page's list */
.card.psk-card { display: flex; flex-direction: column; gap: 6px; }
.card.psk-card .card-top { color: var(--accent); margin-bottom: 0; }
.psk-more summary { cursor: pointer; font-size: 13px; color: var(--fg-2); }
.psk-steps { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.45; }
.psk-steps li span { overflow-wrap: anywhere; }
.psk-steps .pill { margin-left: 6px; font-size: 11px; }
.psk-actions { gap: 8px; }
.psk-done { display: flex; align-items: center; gap: 6px; color: var(--ok, var(--fg-2)); }
.psk-intro { margin: 0 0 4px; }
.psk-list { display: flex; flex-direction: column; gap: 10px; }
.psk-row { gap: 8px; }
.psk-row-head { width: 100%; text-align: left; gap: 8px; }
.psk-row-head .row-title { overflow-wrap: anywhere; }
.psk-row-head > svg { flex-shrink: 0; color: var(--fg-3); transition: transform .15s ease; }
.psk-row-head[aria-expanded=true] > svg { transform: rotate(90deg); }
.psk-reset { display: flex; flex-direction: column; gap: 8px; }
.taught-list { display: flex; flex-direction: column; }
.taught-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.taught-row:first-child { border-top: 0; }
.taught-row .row-title { overflow-wrap: anywhere; }
.taught-fail summary { cursor: pointer; font-size: 12.5px; color: var(--fg-2); }
/* Developer settings › Site notes: a row opens the site's notes */
.playbook-row { flex-direction: row; align-items: center; }
.playbook-row .row-main { min-width: 0; flex: 1; }
.playbook-reached { overflow-wrap: anywhere; }
.playbook-lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.playbook-lines li { overflow-wrap: anywhere; }
.skills-pool { gap: 8px; align-items: center; flex-wrap: wrap; }
.skills-done { display: flex; flex-direction: column; gap: 2px; }
.skills-done .row-sub { overflow-wrap: anywhere; }

/* the server signed in to: a long host wraps whole, never hides */
.agent-mode { flex: none; padding: 4px 9px; }
.agent-mode svg { flex: none; }
.server-part { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.link-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.link-row .row-title { flex: 1; }
.link-row svg:last-child, .page-card > svg:last-child { transform: rotate(180deg); color: var(--fg-3); flex: none; }
/* Knowledge: what the latest organizing pass did, and the pages it just changed */
.know-bar { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.know-bar .know-pass { flex: 1; min-width: 0; margin: 0 2px; }
.know-organize { flex: none; margin-inline-start: auto; }
.know-fresh { margin-left: 6px; vertical-align: middle; }
.know-portrait { text-align: left; gap: 8px; }
.know-told { gap: 6px; margin-bottom: 10px; }
.know-told-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.know-portrait .prose h2, .know-portrait .prose h3 { font-size: 15px; margin: 10px 0 4px; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 9px; }

/* instructions queued on a running task */
.instruct .msgs { display: flex; flex-direction: column; gap: 6px; }
.imsg { display: flex; justify-content: space-between; gap: 10px; background: var(--accent-soft);
  border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.imsg.read { background: var(--surface-2); color: var(--fg-2); }
.imsg-st { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.instruct textarea { flex: 1; min-width: 0; resize: vertical; }
.danger-text { color: var(--bad); }
/* the Work page: what needs the person, goals with their running work, the rest */
.group.needs .row-card.need { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); text-align: left; }
.row-card.need .btn { flex: none; }
/* A list card opens through one button laid over it (swipeCard); the card's own buttons sit above
   it, and the card shows the focus the button has. */
.work-row { position: relative; }
.row-open { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.work-row :is(button, a, [tabindex]):not(.row-open) { position: relative; z-index: 1; }
.work-row > .row-open:focus-visible { outline: none; }
.work-row:has(> .row-open:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.goal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.goal-card.paused { opacity: .7; }
.goal-card-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  text-align: left; color: var(--fg); }
.goal-card:hover .goal-card-head { background: var(--surface-2); }
.goal-card { cursor: pointer; }
.goal-card-head .ring { width: 30px; height: 30px; }
.goal-card-head > svg:last-child { transform: rotate(180deg); color: var(--fg-3); flex: none; }
/* Work page: in progress | finished */
.work-tabs { margin-bottom: 14px; flex-wrap: nowrap; }
.work-tabs .count { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--line);
  font-size: 11px; font-variant-numeric: tabular-nums; }
.work-tabs button.on .count { background: var(--accent-soft); color: var(--accent); }
.done-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.keep-line { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 13px; }
.keep-line .link { color: var(--accent); background: none; padding: 0; font-size: 13px; font-weight: 600; }
.done-head > .btn { margin-left: auto; }
.done-row { display: flex; align-items: center; gap: 10px; }
.done-row .row-main { flex: 1; min-width: 0; }
/* finished since the person last looked */
.done-row .new-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  margin-right: 6px; vertical-align: middle; }

/* files attached to the next message, and in sent messages */
.composer .attach { flex: none; align-self: flex-end; margin-bottom: 1px; color: var(--fg-2); }
.att-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 8px; }
.att-chip { display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 4px 4px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 12.5px; color: var(--fg-2); }
.att-chip.up { opacity: .55; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.att-x { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-3); }
.att-x:hover { background: var(--surface-2); color: var(--fg); }
.att-img { display: block; max-width: min(260px, 70vw); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2); padding: 0; }
.att-img img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.send:disabled { opacity: .45; }

/* the work a chat was opened for: its place is marked for a moment */
.msg.flash { border-radius: 16px; animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--fg); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .msg.flash { animation: none; box-shadow: 0 0 0 2px var(--fg); } }
/* work for a goal: the goal rides on top of its card, one joined block */
.card-for-goal { display: flex; flex-direction: column; }
.card-goal { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 6px 12px; text-align: left;
  font-size: 12px; color: var(--goal); background: color-mix(in srgb, var(--goal) 8%, var(--surface));
  border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; }
.card-goal-t { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-goal-n { flex: none; color: var(--fg-3); }
.card-for-goal > .card { border-radius: 0 0 14px 14px; }
/* The complete listening record lives in its work panel; the deck shows a compact live line. */
.listen-live, .watch-live { display: flex; flex-direction: column; gap: 12px; color: var(--fg-2); }
.along-end { flex: none; align-self: flex-start; }
.ll-line { min-width: 0; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.ll-group > summary { font-size: 13px; }
.ll-group > .ll-flow { margin-top: 10px; }
.ll-flow { display: flex; flex-direction: column; gap: 6px; }
.ll-topic { display: flex; align-items: baseline; gap: 8px; }
.ll-text { min-width: 0; }
.ll-text b { color: var(--fg); font-weight: 600; }
.ll-status { flex: none; padding: 1px 7px; font-size: 11px; border-radius: 999px; color: var(--fg-2); background: var(--line); }
.ll-status.decided { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.ll-status.open { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.ll-head { font-size: 11.5px; color: var(--fg-3); }
.ll-transcript { display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.ll-item { color: var(--fg); }
.ll-card { padding: 8px 10px; border-radius: 10px; white-space: pre-line; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ll-card b { color: var(--fg); }

/* a file the work made, read in place (markdown rendered, other text as is) */
.file-view { font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; }
.file-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55;
  background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 14px; }
button.card.file { width: 100%; min-width: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
/* a long file name (snake_case, no spaces) breaks anywhere and stops at two lines, not past the card */
.card.file .card-title { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
/* an updated file's version (v2): a quiet tag beside its name, in the chat's card and the work's files */
.file-version { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2);
  font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }

/* deleting a piece of work from a list: swipe or long-press, then the row asks in place */
/* swipe to delete (Swipeable): the row moves over a red Delete layer, arms past a point,
   slides out and the list closes over it */
.swipe { position: relative; border-radius: 14px; flex-shrink: 0; }
.convs .swipe { border-radius: 10px; }
.swipe > :not(.swipe-under) { position: relative; touch-action: pan-y; }
.convs .swipe > .conv-row { background: var(--surface); border-radius: 10px; }
.swipe-under { position: absolute; inset: 1px; border-radius: inherit; background: var(--bad);
  display: flex; align-items: stretch; justify-content: flex-end; opacity: 0; transition: background .18s; }
.swipe[data-side="right"] .swipe-under { justify-content: flex-start; }
.swipe.moving .swipe-under, .swipe.open .swipe-under { opacity: 1; }
.swipe.armed .swipe-under { background: color-mix(in srgb, var(--bad) 82%, #000); }
/* the icon alone: a word under it was cut off in short rows (the chat list) */
.swipe-del { width: 72px; display: flex; align-items: center; justify-content: center; color: #fff; }
.swipe-del svg { transform: scale(calc(.72 + .28 * var(--p, 0))); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.swipe.armed .swipe-del svg { transform: scale(1.22); }
.swipe.moving > .row-card, .swipe.moving > .goal-card { box-shadow: var(--shadow); }
.swipe > .settling { transition: transform .32s cubic-bezier(.2, .9, .25, 1.12); }
.swipe.leaving > :not(.swipe-under) { transition: transform .18s cubic-bezier(.4, 0, 1, 1); }
.group { --gap: 8px; }
.convs { --gap: 1px; }
.swipe.folding { overflow: hidden; opacity: 0; margin-bottom: calc(-1 * var(--gap, 0px));
  transition: height .22s cubic-bezier(.3, 0, .2, 1), margin .22s, opacity .22s; }
@media (prefers-reduced-motion: reduce) {
  .swipe > .settling, .swipe.leaving > :not(.swipe-under), .swipe.folding, .swipe-del svg { transition: none; }
}

/* brief page */
/* Now is a slot, not a third kind: the top-priority item per source is promoted to
   the hero and removed from its row. A single tint gradient flows across the whole
   page (brief.svg), light at the top and richest at the bottom, colored by the Now
   item's source; the hero sits transparent on it. */
/* Whole-screen tint per brief.svg: one vertical gradient, light at the top and
   richest at the bottom, colored by the Now item's source. Applied to the page
   so it covers hero + rows alike, not just the hero box. */
.brief-tint { background: linear-gradient(180deg,
  color-mix(in srgb, var(--tint, var(--accent)) 3%, transparent) 0%,
  color-mix(in srgb, var(--tint, var(--accent)) 11%, transparent) 52%,
  color-mix(in srgb, var(--tint, var(--accent)) 26%, transparent) 100%); }
.brief-tint--discretion { --tint: var(--accent); }
.brief-tint--cognition { --tint: var(--goal); }
/* Card text (titles, stats, model-written bodies) breaks between words like all app text
   (ux.css); a single word longer than the line may still break. */
.brief-hero, .brief-card { overflow-wrap: anywhere; }
/* a stat (a price, a date) never breaks inside: it moves to the next row instead */
.brief-hero-stats, .brief-card-stats { overflow-wrap: normal; }
/* The hero sits transparent on the page tint. flex-shrink:0 stops the page's flex
   column (overflow-y:auto) from squishing it: overflow:hidden would otherwise turn
   min-height:auto into 0 and clip stats/actions/dots below the body. */
.brief-hero { position: relative; overflow: hidden; border-radius: var(--r); padding: 20px 20px 18px;
  margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.brief-hero-watermark { position: absolute; top: 4px; right: -8px; opacity: .15; pointer-events: none; }
.brief-hero--discretion .brief-hero-watermark { color: var(--accent); }
.brief-hero--cognition .brief-hero-watermark { color: var(--goal); }
/* Fixed dark chip in both themes, like the 21.png reference's black "Now" pill;
   var(--fg) would invert to a light chip in dark mode and read wrong. */
/* "Now" and where the card came from share one line above the title */
.brief-hero-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brief-hero-meta .brief-hero-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-hero-badge { display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: #1c1c1a; color: #fff; border-radius: 999px; padding: 4px 12px 4px 10px;
  font-size: 11.5px; font-weight: 600; }
.brief-hero-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ok); }
.brief-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.brief-hero-body { font-size: 14px; color: var(--fg-2); line-height: 1.55; }
.brief-hero-stats { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 4px; }
.brief-hero-stat-label { font-size: 10.5px; color: var(--fg-3); }
.brief-hero-stat-value { font-size: 16px; font-weight: 700; margin-top: 2px; }
.brief-hero-actions { display: flex; gap: 10px; margin-top: 6px; }
.brief-hero-actions .btn { border-radius: 999px; }
.brief-hero-actions .btn.primary { flex: 2; }
.brief-hero-actions .btn.ghost { flex: 1; min-width: 0; }
.brief-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.brief-dot { width: 6px; height: 6px; padding: 0; border-radius: 999px; background: var(--line); }
.brief-dot.on { background: var(--accent); }

/* Now slot: heroes sit side by side in a snap carousel; swipe or tap a dot to
   page between the top discretion and top cognition card. The wrap carries the
   bottom spacing the hero used to own, so dots clear the row beneath. */
.brief-now-wrap { margin: -6px 0 20px; flex-shrink: 0; }
.brief-now { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.brief-now::-webkit-scrollbar { display: none; }
.brief-now > .brief-hero { width: 100%; flex: none; scroll-snap-align: start; margin: 0; }
.brief-now-wrap .brief-dots { margin-top: 10px; }

/* Discretion: 268×335 (4:5). Shorter than 3:4 + looser padding/line-height so the
   card fills with content and the void between the sub line and action buttons
   shrinks instead of leaving a tall empty gap. Cognition: 150×200 (3:4). */
.brief-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; margin-bottom: 16px; flex-shrink: 0; scrollbar-width: none; -ms-overflow-style: none; }
.brief-row::-webkit-scrollbar { display: none; }
.brief-row:last-child { margin-bottom: 0; }
.brief-row > * { scroll-snap-align: start; flex: none; }
.brief-card { min-height: 200px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 6px;
  overflow: hidden; }
/* a minimum, not a fixed ratio: a card with a photo, stats and actions grows to fit
   instead of clipping its buttons, and the row's cards stretch to the tallest one */
.brief-row--discretion .brief-card { width: 268px; min-height: 335px; padding: 22px 18px; gap: 12px; }
.brief-row--cognition .brief-card { width: 150px; padding: 12px; }
.brief-card-time { font-size: 10px; color: var(--fg-3); align-self: flex-end; }
.brief-card-media { position: relative; border-radius: 14px; overflow: hidden; flex: none;
  display: flex; align-items: flex-end; }
/* clipped, not a scroll box: Army bleeds past the tile's edge, and a hidden overflow could still be
   scrolled (scrollIntoView) and slide the tile's picture sideways */
.brief-card-media { overflow: clip; }
.brief-row--discretion .brief-card-media { height: 132px; }
.brief-row--cognition .brief-card-media { height: 72px; border-radius: 12px; }
.brief-card-media-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #fff; opacity: .55; display: flex; }
.brief-card-media-label { position: relative; margin: 8px; padding: 3px 8px; border-radius: 8px;
  background: rgba(0,0,0,.22); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: -.01em; }
.brief-card-title { font-weight: 800; letter-spacing: -.02em; }
.brief-row--discretion .brief-card-title { font-size: 16px; line-height: 1.4; }
.brief-row--cognition .brief-card-title { font-size: 12.5px; line-height: 1.3; }
.brief-card-sub { color: var(--fg-2); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.brief-row--discretion .brief-card-sub { font-size: 12px; line-height: 1.55; }
.brief-row--cognition .brief-card-sub { font-size: 10px; line-height: 1.35; }
.tag-bar { display: flex; align-items: center; gap: 6px; }
.tag-bar-label { font-size: 10px; color: var(--fg-2); flex-shrink: 0; min-width: 52px; }
.tag-bar-track { flex: 1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.tag-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); }
.tag-bar--top .tag-bar-label { color: var(--fg); font-weight: 700; }
.tag-bar--top .tag-bar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.brief-hero-tags { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; width: 100%; max-width: 340px; }
.brief-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.brief-card-tag { font-size: 10px; color: var(--fg-2); background: var(--surface-2);
  border-radius: 999px; padding: 2px 8px; }
.brief-card-actions { display: flex; gap: 6px; margin-top: auto; }
.brief-card-actions .btn { flex: 1; font-size: 11px; padding: 6px 8px; border-radius: 999px; }

.brief-card-stats { display: flex; flex-direction: column; gap: 3px; }
.brief-card-stat { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; }
.brief-card-stat-label { color: var(--fg-3); }
.brief-card-stat-value { color: var(--fg-2); font-weight: 600; }

/* a card from one photo: the page's one primary action, a pill beside the title */
/* long-press on a card: Delete shows over its top corner; the card can't start a text
   selection or the system's long-press menu on the way */
.brief-hero, .brief-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.brief-card { position: relative; }
.brief-armed { outline: 2px solid var(--bad); outline-offset: -2px; }
.brief-del { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center;
  gap: 4px; padding: 7px 12px; border: 0; border-radius: 999px; background: var(--bad);
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.btn.brief-make { border-radius: 999px; padding: 9px 18px; flex: none; }
/* A card from photos opens with them, the full width of the card: one photo alone, a day's
   photos as one large and two stacked beside it; the last says how many more there are. */
.brief-hero-media { display: grid; gap: 4px; height: 188px; border-radius: 18px; overflow: hidden; flex: none;
  margin-bottom: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.brief-hero-media.n2 { grid-template-columns: 1fr 1fr; }
.brief-hero-media.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.brief-hero-media.n3 > :first-child { grid-row: 1 / 3; }
.brief-hero-shot { position: relative; min-width: 0; min-height: 0; background: var(--surface-2); }
.brief-hero-shot-img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.brief-hero-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.42); color: #fff; font-size: 18px; font-weight: 700; pointer-events: none; }
.brief-hero-from { font-size: 12px; color: var(--fg-2); }
.brief-card-photo { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
/* being made: two soft bars where the body will be; still for people who ask for less motion */
.brief-hero--making { min-height: 220px; }
.brief-hero--making .brief-hero-shot-img { cursor: default; }
.brief-shimmer { display: grid; gap: 8px; max-width: 70%; }
.brief-shimmer i { display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--line) 50%, var(--surface-2) 100%);
  background-size: 200% 100%; animation: brief-shimmer 1.4s ease-in-out infinite; }
.brief-shimmer i + i { width: 60%; }
@keyframes brief-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .brief-shimmer i { animation: none; } }
.brief-hero--making.failed .brief-hero-dot { background: var(--bad); }
/* handed on to chat: the card settles to one quiet line where its buttons were */
.brief-handed { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px;
  font-size: 12.5px; color: var(--fg-3); }
.brief-handed svg { color: var(--ok); flex: none; }
.brief-handed-open { margin-left: auto; border: 0; background: none; padding: 6px 2px; font: inherit;
  font-weight: 600; color: var(--accent); cursor: pointer; }
/* where a photo comes from (sheet) */
.brief-sources { display: flex; flex-direction: column; gap: 8px; }
.brief-source > svg { flex: none; color: var(--fg-2); }

/* Loading or finished, a call is one quiet line above its chat (live, it is the card in ux.css). */
.chat-call:is(.settled, .call-loading) { flex: none; display: flex; align-items: center; gap: 8px; margin: 6px 0;
  padding: 6px 12px; color: var(--fg-3); font-size: 13px; }
.chat-call.settled .call-status { font-weight: 500; font-size: 13px; flex: 1; min-width: 0; }
.chat-call.settled .link { color: var(--accent); background: none; padding: 0; font-size: 13px; font-weight: 600; flex: none; }
.call-loading .call-note { margin: 0; }
.call-time { color: var(--fg-3); font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; }
.call-delivery { color: var(--fg-3); }
.call-notice { color: var(--fg-3); font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.call-facts { margin: 8px 0; }
.call-facts ul { margin: 4px 0 0; padding-inline-start: 18px; font-size: 14px; }
.call-facts li { overflow-wrap: anywhere; }
.call-older { align-self: flex-start; margin-bottom: 6px; }
.call-details > summary > span:first-child { margin-inline-end: 4px; }
.call-mark { display: inline-flex; vertical-align: -2px; margin-inline-end: 6px; color: var(--fg-3); }
.done-filter { margin-bottom: 12px; }

/* Flex details must preserve the native closed state within the optional call panel. */
.call-details:not([open]) > :not(summary) { display: none; }

/* under the step: what the work is doing right now */
.card-now.doing { color: var(--fg-3); font-size: 12px; }
.row-main > .card-now.doing { display: block; margin-top: 2px; }

/* running work: its latest step, outside the folded log */
.now-line { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 2px; }
.now-line .now-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-line .pulse { flex: none; color: var(--accent); }

/* a log line's detail (a brief handed on can run long): two lines, tap for the rest */
.tl-d:not(.open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }

/* Connection actions sit at the start of the row, including on narrow phones. */
.conn-menu .menu { left: 0; right: auto; }

/* Connection errors must remain readable at phone width, in full: what to do comes last. */
.conn-row .row-sub { white-space: normal; overflow-wrap: anywhere; -webkit-line-clamp: unset; }

/* Developer settings › Models: a mode, then a model for each part it uses */
.models-card { gap: 10px; }
.model-slot { display: flex; flex-direction: column; gap: 4px; }
.model-slot-name { font-weight: 600; font-size: 14px; }
.model-slot select.input { width: 100%; }
.model-url { display: flex; gap: 8px; align-items: center; }
.model-url .input { flex: 1; min-width: 0; }
.model-error { color: var(--bad); }
/* Developer settings › Background: one line on all the loops, then each family's lines; a loop's
   times and counts fold under its line, the resting loops under one line of their family */
.loops-card { gap: 6px; }
.loops-summary { font-weight: 600; font-size: 14.5px; }
.loops-summary.concern { color: var(--bad); }
.loop-family { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.loop-family-head { font-size: 12px; font-weight: 700; color: var(--fg-2); padding: 2px 0; }
.loop-family-head .label-count { margin-left: 6px; font-weight: 600; color: var(--fg-3); }
.loop-line > summary, .loop-rest > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
  min-height: 40px; padding: 6px 0; cursor: pointer; list-style: none; }
.loop-line > summary::-webkit-details-marker, .loop-rest > summary::-webkit-details-marker { display: none; }
.loop-rest > summary { font-size: 13px; color: var(--fg-2); }
.loop-line > summary::before, .loop-rest > summary::before { content: "▸"; display: inline-block; color: var(--fg-3);
  transition: transform .15s; }
.loop-line[open] > summary::before, .loop-rest[open] > summary::before { transform: rotate(90deg); }
.loop-rest .loop-line { padding-left: 14px; }
.loop-name { color: var(--fg); overflow-wrap: anywhere; }
.loop-when { margin-left: auto; font-size: 12.5px; color: var(--fg-2); white-space: nowrap; }
.loop-line .pill { flex: none; }
.loop-more { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px 2px; padding-left: 12px;
  border-left: 2px solid var(--line); }
.loop-more .row-sub { -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.loop-detail { font-size: 12px; }
.loop-more .btn { align-self: flex-start; margin-top: 4px; }
/* the VM browser model's notes (what Jev does, what it is sent, why a key failed) are read whole */
.vmb-card .row-sub { -webkit-line-clamp: unset; }
.memory-engine-card .row-sub { -webkit-line-clamp: unset; overflow-wrap: anywhere; }
/* what the work was asked, above its steps: two lines, a tap shows the rest */
.task-asked { margin: 4px 0 2px; }
.task-asked .label { padding-left: 0; }
.task-asked .tl-d { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; }
/* the request reads whole where it fits: folded at two lines it was cut off with the panel half empty
   (#1129); only a long one folds, a tap opening it */
.task-asked .tl-d:not(.open) { -webkit-line-clamp: 6; }

.brief-card-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

/* a card's picture drawn from the card itself (no image model): its number, bars, tags or
   Ian in the card's mood; white on the template's colours in either theme */
.brief-drawn-metric { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  position: absolute; inset: 14px 16px; color: #fff; }
.brief-drawn-value { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* a longer number ("36,950 won") steps down so it stays on one line inside its tile */
.brief-drawn-value.long { font-size: 26px; } .brief-drawn-value.longer { font-size: 20px; }
.brief-row--cognition .brief-drawn-value { font-size: 22px; }
.brief-row--cognition .brief-drawn-value.long { font-size: 18px; } .brief-row--cognition .brief-drawn-value.longer { font-size: 15px; }
.brief-drawn-label { font-size: 12px; opacity: .85; margin-top: 2px; }
.brief-drawn-bars { position: absolute; inset: 14px 16px 10px; display: flex; align-items: flex-end; gap: 8px; }
.brief-drawn-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.brief-drawn-bar i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,.85); }
.brief-drawn-bar em { font-style: normal; font-size: 11px; color: #fff; opacity: .9; white-space: nowrap; }
.brief-drawn-tags { position: absolute; inset: 14px 16px; display: flex; flex-wrap: wrap; align-content: center; gap: 6px; }
.brief-drawn-tags span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff;
  font-size: 13px; font-weight: 600; }
/* the cards' pictures: one line style, at full strength in the card's colour (white on a
   coloured tile, the subject's colour on the top card) */
.brief-art, .brief-drawn-art, .brief-drawn-badge { display: inline-block; flex: none; }
.brief-art.drawn, .brief-drawn-art.drawn, .brief-drawn-badge.drawn { background: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* Line art fills its square without the text baseline's descender gap (also the chat's prop). */
.brief-art.line svg, .brief-drawn-art.line svg, .brief-drawn-badge.line svg { display: block; width: 100%; height: 100%; stroke-width: 2.2; }
.brief-hero-watermark.art { opacity: .9; top: 54px; right: 20px; width: 64px; height: 64px; display: flex;
  align-items: center; justify-content: center; }
.brief-art.own, .brief-drawn-art.own, .brief-drawn-badge.own { object-fit: contain; }
.brief-card-media-icon.art { opacity: 1; color: #fff; }
.brief-drawn-art { position: absolute; top: 0; right: 0; color: #fff; opacity: .95; }
/* a developer's tools, shown by three taps on the title */
.brief-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
/* Developer settings › Brief look: three small cards drawn the way the choice looks */
.brief-look-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 6px; }
.brief-look-tile { height: 64px; align-items: center; justify-content: center; }
/* the title and when the cards were made share one line, centred on each other */
.brief-head h2 { margin: 0; }
.brief-head { margin: 6px 0 12px; }
/* the picture of what a card is about stands clear of its title */
.brief-hero--art .brief-hero-title, .brief-hero--art .brief-hero-body { padding-right: 84px; }
/* Ian beside what the work is about: the subject's picture in front, Ian behind on the right */
.brief-drawn-kind { position: absolute; inset: 0; }
.brief-drawn-badge { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: #fff; }
/* Army peeks up from the tile's foot, head and shoulders, as over the chat list's question (ux.css
   .ux-peek, #1009): no round tile of its own, the tile's edges cut it. The frame is the clip's
   (300×232), so the clip and the still stand in the same place. */
.brief-drawn-pose { position: absolute; right: -6px; bottom: 0; height: 86%; aspect-ratio: 300 / 232; pointer-events: none; }
.brief-drawn-pose img.companion { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
/* a look without the clip, or reduced motion: the whole still figure from the top, its foot below
   the tile's edge, as the chat list draws it (.ux-peek .companion) */
.brief-drawn-pose canvas.companion { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.brief-calm { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; padding: 14px 16px; border-radius: 16px;
  background: var(--bg2); color: var(--muted); font-size: 14px; }

/* Developer settings › Brief look: soft tints and plain cards instead of gradient tiles */
.brief-design--soft .brief-card-media { background: color-mix(in srgb, var(--kind) 16%, var(--surface)) !important; }
.brief-design--plain .brief-card-media { background: var(--surface-2) !important; }
.brief-design--soft .brief-card-media-icon.art, .brief-design--soft .brief-drawn-badge,
.brief-design--soft .brief-drawn-art { color: var(--kind); }
.brief-design--plain .brief-card-media-icon.art, .brief-design--plain .brief-drawn-badge,
.brief-design--plain .brief-drawn-art { color: var(--fg); }
.brief-design--soft .brief-drawn-metric, .brief-design--plain .brief-drawn-metric,
.brief-design--soft .brief-drawn-bar em, .brief-design--plain .brief-drawn-bar em { color: var(--fg); }
.brief-design--soft .brief-drawn-bar i { background: var(--kind); }
.brief-design--plain .brief-drawn-bar i { background: var(--fg-2); }
.brief-design--soft .brief-drawn-tags span, .brief-design--plain .brief-drawn-tags span { color: var(--fg); }
/* colour icons keep their own colours: on a gradient tile they sit on a white tile of their own */
.brief-design--gradient .brief-drawn-badge.own, .brief-design--gradient .brief-card-media-icon .own {
  background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .14); }
/* Settings › reset: what goes, what stays, and the tick that lets the delete button work */
.reset-card { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.reset-list { margin: 6px 0 4px; padding-left: 18px; color: var(--fg-2); font-size: 13.5px; line-height: 1.55; }
.reset-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 6px 0; cursor: pointer; }
.reset-agree input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bad); }
.reset-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* a real-time suggestion waiting in the notifications */
.live-row { gap: 6px; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
/* V5 3C's suggestion card: Army's face beside its title and the reason under it (#584) */
.live-head { display: flex; align-items: flex-start; gap: 10px; color: var(--accent); }
.live-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.live-copy .row-title { color: var(--fg); font-weight: 700; }
.live-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* a web page the work made, shown as the page (Files, chat): tall enough to read, no scripts */
.file-html { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
/* What work is doing this moment: thinking pulses (a model call is working, not stuck);
   waiting for a worker, or a worker that stopped answering, is said in the warning colour */
.step-latest.thinking::before, .card-now.doing.thinking::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: middle;
  border-radius: 999px; background: var(--accent); animation: live-think 1.2s ease-in-out infinite; }
@keyframes live-think { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .step-latest.thinking::before, .card-now.doing.thinking::before { animation: none; } }
/* what it does now, while it does it: light sweeps across the words, the time counts each
   second (tick in app.js), and a long step says it is still at it */
.live-doing .shimmer { --base: var(--fg-2);
  background: linear-gradient(90deg, var(--base) 35%, var(--accent) 50%, var(--base) 65%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: live-sweep 2.2s linear infinite; }
.now-line .live-doing .shimmer { --base: var(--fg); }
@keyframes live-sweep { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.live-doing .tick { font-variant-numeric: tabular-nums; }
.live-doing .long-note { display: none; color: var(--fg-3); }
/* on its own line where there is room (the panel); a card's one line keeps the time only */
.now-line .live-doing.long .long-note, .step-latest .live-doing.long .long-note { display: block; font-size: 12px; }
.queued .live-doing .shimmer, .stalled .live-doing .shimmer { animation: none; background: none; color: inherit; }
@media (prefers-reduced-motion: reduce) { .live-doing .shimmer { animation: none; background: none; color: inherit; } }
.step-latest.queued, .step-latest.stalled, .card-now.doing.queued, .card-now.doing.stalled,
.now-line.queued .now-t, .now-line.stalled .now-t { color: var(--warn); }
/* Settings › change password: the fields of the sign-in screen, under the account */
.pw-card { gap: 12px; }
.pw-card .row { gap: 8px; }
.pw-card .callout { display: flex; align-items: center; gap: 8px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); cursor: pointer; }

.pass-actions { margin-top: 10px; }

/* a question asked as a short form: label above its input, one primary send */
.ask-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding: 14px 16px 16px; }
.ask-form .card-top { margin-bottom: 2px; }
.ask-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg-2); }
.ask-field input { font: inherit; font-size: 15px; color: var(--fg); background: var(--bg); padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.ask-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* sites reached through the person's device: one small chip each, removable */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 4px 6px 4px 10px;
  border-radius: 999px; background: var(--surface-2); color: var(--fg); }
.chip-x { display: inline-flex; border: 0; background: none; color: var(--fg-3); padding: 2px; cursor: pointer; }

/* sensitive data encryption: what else keeps the data to themselves, with where it stands */
/* Settings in groups: the first page lists them, each with where it stands in one line */
.set-group .row-main { min-width: 0; }
.set-group .row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* where a setting applies, beside its title: this phone only, or confirmed on the phone */
.scope { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; vertical-align: middle; color: var(--fg-2); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.scope.confirm { color: var(--accent); background: var(--accent-soft); }
/* the privacy group's first line: how many protections are as recommended, the others to tap */
.protect .row { gap: 8px; }
.protect-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 2px 2px; font-size: 13.5px; text-align: left; }
.protect-row > span:first-child { flex: 1; min-width: 0; }
.protect-want { color: var(--warn); font-size: 12px; white-space: nowrap; }
.protect-row svg { transform: rotate(180deg); color: var(--fg-3); flex-shrink: 0; }
/* where running work works, on its card */
.ran-on { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: var(--fg-3); }
/* My devices: where screen work runs (two switches, then who works the phone's screen) */
.screen-card .row-main { min-width: 0; }
.screen-card .screen-state { color: var(--fg-2); border-top: 1px solid var(--line); padding-top: 8px; }
/* Exclusion choices need their whole scope visible once opened, including records already saved. */
.screen-ai-privacy-content { display: flex; flex-direction: column; gap: 8px; }
.screen-ai-privacy .row-sub { -webkit-line-clamp: unset; }
.screen-ai-privacy .row-title { overflow-wrap: anywhere; }
.screen-ai-privacy .row { min-height: 44px; }
/* Learning from what the person does: what is kept, where and how to delete it, read in full once opened */
.my-actions-about { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.my-actions .row-sub { -webkit-line-clamp: unset; }
.my-actions-kept { align-items: center; min-height: 44px; }
.warn-text { color: var(--warn); }
/* what a setting still needs, where it applies: the missing permission and the one button */
.needs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--warn-soft); color: var(--fg); font-size: 13px; line-height: 1.45; }
.needs > svg { color: var(--warn); flex-shrink: 0; }
.needs > span { flex: 1; min-width: 0; }
.needs .btn { margin-left: auto; }
/* a permission the phone gives, as one line of the phone card */
.perm-line { align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
/* Mobile use: its switch, what it needs, and once on, its screen and who works it */
.mobile-use { display: flex; flex-direction: column; gap: 8px; }
.mobile-use-more { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 2px solid var(--line); }
.mobile-use-more.unusable > .row-title, .mobile-use-more.unusable > .row-sub { opacity: .5; }
/* one line per perception mode, never clamped: each says what choosing it means */
.row-sub.perception-modes { display: flex; flex-direction: column; gap: 4px; -webkit-line-clamp: unset; }
.perception-modes strong { color: var(--fg); font-weight: 600; }
/* a choice shown as it stands, not changed here */
.seg.locked { opacity: .55; }
.seg.locked button { cursor: not-allowed; }
/* Settings' app version card: the version and the check in one line, its one action at the end */
.app-version { display: flex; align-items: center; gap: 12px; }
.app-version-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; padding: 0; color: inherit; }
.app-version.newer .ux-menu-tile { color: var(--accent); }
/* Awareness: the page's one line under its title */
.page-lede { padding: 0 4px 2px; }
/* the subscription card's choices, its notes folded */
.sub-row { align-items: center; }
.sub-history { display: flex; flex-direction: column; gap: 6px; }
.sub-details summary { cursor: pointer; font-size: 13px; color: var(--fg-2); padding: 4px 0; }
.sub-details[open] { display: flex; flex-direction: column; gap: 8px; }
.sub-details .shadow-setup-detail { -webkit-line-clamp: unset; }
.hidden-apps-content { display: flex; flex-direction: column; gap: 8px; }
.hidden-apps .row-sub { -webkit-line-clamp: unset; }
.hidden-apps .row-title { overflow-wrap: anywhere; }
.hidden-apps .row { min-height: 44px; }
.hidden-apps summary { overflow-wrap: anywhere; }

/* ── voice mode (voice.js, voice_basic.js) ──────────────────────────────────
   In the chat it takes the composer's place (the dock); as the phone's assistant the page is
   the panel itself (html.overlay). Both are the design's capsule (ux.css), whose marks follow the
   audio level (--level, 0..1) of whoever is speaking. */
.voice-btn { width: 38px; height: 38px; flex: none; color: var(--fg-2); }
.voice { --level: 0; color: var(--fg); }
.voice-work:empty { display: none; }
.voice-work-sum { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); }
.voice-work-sum svg { flex: none; color: var(--accent); }
.voice-work-list { display: flex; flex-direction: column; margin-top: 6px; }
.voice-work-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.voice-work-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-work-row .pill { flex: none; }
.voice-work-more { font-size: 12.5px; color: var(--fg-3); padding-top: 4px; }
.voice-work-empty { font-size: 13px; color: var(--fg-3); line-height: 1.5; }
.voice-work .card.approval { margin-top: 10px; }

/* the phone's assistant panel: the page is the sheet VoiceActivity slides up */
html.overlay, html.overlay body { background: var(--surface); height: auto; }
/* --voice-foot: the room under the voice to the sheet's foot, which its glow reaches (ux.css) */
.voice-sheet { --voice-foot: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 18px 18px var(--voice-foot); }
.voice-overlay { display: flex; flex-direction: column; gap: 14px; }
.voice-overlay .voice-work { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px; }

/* the coach models' download in Settings */
.models-bar { width: 100%; height: 6px; margin-top: 10px; accent-color: var(--accent); }

/* Task detail has one type scale; shared cards and other panels keep their own hierarchy. */
.sheet[data-sheet-kind=task] { font-size: 15px; font-weight: 400; }
.sheet[data-sheet-kind=task] .sheet-title { font-size: 19px; font-weight: 700; }
.sheet[data-sheet-kind=task] :is(.sheet-status, .row-sub, .task-chosen, .more-list,
  .file-chip, .now-line, .ask-field, .offer-f, .step-result, .tl-t, .tl-d,
  .task-asked .tl-d, .screen-record-place, .call-destination, .call-note, .call-speaker,
  .call-error, .call-notice, .call-facts ul) { font-size: 13px; }
.sheet[data-sheet-kind=task] :is(.label, .pill, .small, .mono, .now-tag, .step-fold,
  .step-latest, .step-elapsed, .tl-at, .tl-times, .tl-tech, .tl-tech code, .tl-tech-msg,
  .screen-record-note, .screen-record-time, .offer-n, .offer-terms, .offer-why,
  .offer-src, .card-kind, .surf-r, .call-time) { font-size: 12px; }
.sheet[data-sheet-kind=task] :is(.steps > li, .row-title, .card-title, .callout,
  .offer-t, .menu-item, .ask-field input, .goal-group-t) { font-size: 15px; }
/* a finished call's status; a live call is the call screen's card, in its own type (ux.css) */
.sheet[data-sheet-kind=task] .call-progress .call-status { font-size: 15px; }
.sheet[data-sheet-kind=task] .steps .steps li { font-size: 13px; }
.sheet[data-sheet-kind=task] .btn { font-size: 13px; font-weight: 600; }
.sheet[data-sheet-kind=task] .btn.lg { font-size: 15px; }
.sheet[data-sheet-kind=task] .prose { font-size: 15px; font-weight: 400; }
.sheet[data-sheet-kind=task] .prose :is(h1, h2, h3, h4, h5, h6) { font-size: 17px; font-weight: 700; }
.sheet[data-sheet-kind=task] :is(b, strong, .row-title, .card-title, .offer-why, .goal-group-t) { font-weight: 600; }
.sheet[data-sheet-kind=task] :is(.tl-times, .tl-d, .step-latest) { font-weight: 400; }
.sheet[data-sheet-kind=task] .prose code,
.sheet[data-sheet-kind=task] .md-table table,
.sheet[data-sheet-kind=task] .md-table.many td { font-size: 13px; }
.sheet[data-sheet-kind=task] .md-table.many td::before { font-size: 12px; }
.sheet[data-sheet-kind=task] .md-table.many td:first-child { font-size: 15px; }
.sheet[data-sheet-kind=task] .md-table th,
.sheet[data-sheet-kind=task] .md-table.many td:first-child { font-weight: 600; }

/* ── Brief, V5 look (brief-design--v5, the default; #301) ───────────────────────────────────
   The prototype's mini-app cards (docs/new_ux: 5C's Space tiles, 3C's booking summary): on the
   page's own grey, Now is one white card whose facts read as rows; below it every card shares a
   two-column grid as Space's results do: white cards with an inset grey tile, a number card in
   lime with its figure large, a topic as a document card, actions as one full-width button. */
/* Space's Suggestion tab: what its cards are in one quiet line, the refresh at its end (the Brief's
   page header held it), then the cards */
.brief-tab { display: flex; flex-direction: column; min-width: 0; }
.brief-tab-bar { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: -4px 0 8px; }
.brief-tab-line { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.4; color: var(--fg-2); word-break: keep-all; }
.brief-tab-bar .icon-btn { flex: none; }
.brief-tab .space-refresh-error { margin-bottom: 12px; }
.brief-design--v5 .brief-hero { background: var(--surface); border-radius: 28px; padding: 20px 18px 16px;
  box-shadow: var(--ux-shadow, var(--shadow)); }
.brief-design--v5 .brief-hero-watermark { opacity: .9; top: 16px; right: 14px; }
.brief-design--v5 .brief-hero--art .brief-hero-title { padding-right: 72px; }
.brief-design--v5 .brief-hero-badge { background: var(--ux-lime, #d9ff65); color: #252525; }
.brief-design--v5 .brief-hero-dot { background: #252525; }
.brief-design--v5 .brief-hero-title { font: 500 22px/1.25 var(--ux-heading, var(--ff)); letter-spacing: -.3px; }
.brief-design--v5 .brief-hero-stats { flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 2px; }
.brief-design--v5 .brief-hero-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line); }
.brief-design--v5 .brief-hero-stat-label { font-size: 13px; color: var(--fg-2); }
.brief-design--v5 .brief-hero-stat-value { font-size: 14px; font-weight: 600; margin: 0; text-align: right; }
.brief-design--v5 .brief-hero-actions .btn.primary { background: #252525; color: #fff; }
:root[data-theme='dark'] .brief-design--v5 .brief-hero-actions .btn.primary,
:root[data-theme='dark'] .brief-design--v5 .brief-card-actions .btn.primary { background: var(--fg); color: var(--bg); }
.brief-design--v5 .brief-dot.on { background: var(--fg); width: 16px; }

.brief-grid { columns: 2; column-gap: 10px; flex-shrink: 0; padding-bottom: 8px; }
.brief-grid > .brief-card { break-inside: avoid; width: auto; min-height: 0; margin: 0 0 10px; padding: 12px;
  gap: 8px; border: 0; border-radius: 26px; box-shadow: var(--ux-shadow, var(--shadow)); }
@media (min-width: 700px) { .brief-grid { columns: 3; column-gap: 14px; } }
.brief-grid .brief-card-time { align-self: flex-start; order: -1; font-size: 11px; font-weight: 600;
  color: var(--fg-3); letter-spacing: .02em; padding: 2px 4px 0; }
.brief-grid .brief-card-media { height: 92px; border-radius: 18px; background: var(--surface-2) !important;
  color: var(--kind, var(--fg)); }
.brief-grid .brief-card-media-icon.art, .brief-grid .brief-drawn-badge, .brief-grid .brief-drawn-art { color: var(--kind, var(--fg)); }
/* the half-width tile keeps its subject's icon and Army apart: the icon nearer the edge, and Army
   (bottom-aligned in its frame) a little smaller on a narrow phone (360 px) rather than over it */
.brief-grid .brief-drawn-badge { left: 16px; }
.brief-grid .brief-drawn-pose { max-width: calc(100% - 44px); }
.brief-grid .brief-card-media-label { color: var(--fg-2); }
.brief-grid .brief-card-title { font: 600 15px/1.35 var(--ff); letter-spacing: -.2px; padding: 0 4px; }
.brief-grid .brief-card-sub { font-size: 12px; line-height: 1.5; color: var(--fg-2); padding: 0 4px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.brief-grid .brief-card-stats { display: flex; flex-direction: column; gap: 0; padding: 0 4px; }
.brief-grid .brief-card-stat { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12px; }
.brief-grid .brief-card-stat-label { color: var(--fg-2); }
.brief-grid .brief-card-stat-value { font-weight: 600; text-align: right; }
/* a long value (a sum, a price) takes the line under its label in a narrow card, and one wider
   than the card breaks there: on one line it ran past the card's edge and was cut off */
.brief-grid .brief-card-stat { flex-wrap: wrap; }
.brief-grid .brief-card-stat-value { margin-left: auto; max-width: 100%; overflow-wrap: break-word; }
.brief-grid .brief-card-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; }
.brief-grid .brief-card-tag { font-size: 11px; padding: 3px 8px; border-radius: 10px; background: var(--surface-2); color: var(--fg-2); }
.brief-grid .brief-card-actions { display: flex; flex-direction: column-reverse; gap: 6px; margin-top: 2px; }
.brief-grid .brief-card-actions .btn { width: 100%; border-radius: 999px; min-height: 38px; }
.brief-grid .brief-card-actions .btn.primary { background: #252525; color: #fff; }
.brief-grid .brief-card-actions .btn.ghost { min-height: 30px; font-size: 12px; color: var(--fg-3); background: transparent; }
/* a number card shows its figure large on the card's own surface: lime is V5's accent for a button
   or a tag, and whole cards in it read as a warning among the white ones (s2 report 96) */
.brief-grid .brief-card--t-metric .brief-card-media { background: transparent !important; height: auto; padding: 4px 4px 0; justify-content: flex-start; }
/* the figure sets its tile's height here: placed over the tile as the older looks do (absolute),
   it left the tile with no height and the number was nowhere to be seen */
.brief-grid .brief-card--t-metric .brief-drawn-metric { position: static; flex: 1; min-width: 0; align-items: flex-start;
  color: var(--fg); }
/* the figure's words are drawn white for a coloured tile; on the card's surface they take its ink */
.brief-grid .brief-card--t-metric .brief-drawn-label { color: var(--fg-2); }
.brief-grid .brief-card--t-metric .brief-drawn-value { font: 700 28px/1.1 var(--ux-heading, var(--ff)); letter-spacing: -.5px; }
.brief-grid .brief-card--t-metric .brief-drawn-art { display: none; }
/* a photo fills its tile, as 5C's picture card */
.brief-grid .brief-card--photo .brief-card-media { height: auto; background: none !important; }
.brief-grid .brief-card-photo { width: 100%; border-radius: 18px; display: block; }
/* a trend's bars take the card's colour on the grey tile (white bars vanished on it) */
.brief-grid .brief-drawn-bar i { background: var(--kind, var(--fg-2)); }
.brief-grid .brief-drawn-bar em { color: var(--fg-3); }