/* The finish - what the frontier products all have and a person feels
   without naming: one focus ring, thin quiet scrollbars, a selection
   colour of the accent, every control answering a hover in the same
   time, tooltips that look like the product. Loaded last. */

/* motion: one duration for every control */
.btn, .nav-item, .session-row, .chat-row, .repo-row, .tab, .panel-tabs .tab, .sel, .icon-btn, .menu-item, .chip, .surface-switch button, .composer-bar .send {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease, transform .15s ease; }
.btn:active, .icon-btn:active, .composer-bar .send:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn, .nav-item, .session-row, .chat-row, .tab, .sel, .icon-btn, .menu-item { transition: none; } .btn:active, .icon-btn:active { transform: none; } }

/* focus: one ring, only from the keyboard */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 6px; }
.composer:focus-within { border-color: var(--hairline-strong); box-shadow: var(--shadow-md); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.composer textarea:focus-visible { border: none; box-shadow: none; }   /* the composer itself answers the focus */

/* selection in the accent, readable on both themes */
::selection { background: var(--selection); color: var(--ink); }

/* scrollbars: thin, only on hover, never a track */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--hairline-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*:hover::-webkit-scrollbar-thumb { background: var(--hairline-strong); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* rows: a quiet hover, a clear press, the active one a shade lighter */
.session-row:hover, .chat-row:hover, .repo-row:hover, .nav-item:hover { background: var(--press); }
.session-row.active, .chat-row.active, .nav-item.active { background: var(--press); }

/* cards and dialogs share one radius family */
.card, .sched, .judgement, .handoff, .works, .changes-card { border-radius: var(--radius-md); }
.dialog { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.popover { border-radius: 12px; box-shadow: var(--shadow-md); }

/* the send button: a filled circle in the accent when there is something to send */
.composer-bar .send { border-radius: 50%; }
.composer-bar .send:disabled { background: var(--surface-muted); color: var(--faint); opacity: 1; }

/* tooltips from the title attribute cannot be styled; the product's own hints can */
.tip { position: absolute; background: var(--ink); color: var(--ink-invert); font-size: 12px; padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-sm); }

/* images and code blocks the bot writes, on the same radius */
.answer img, .says img { border-radius: 10px; max-width: 100%; }
.answer pre, .says pre, .w-code { border-radius: 10px; }

/* hairlines only where they separate, never doubled */
.topbar { border-bottom: 1px solid var(--hairline); }
.sidebar { border-right: 1px solid var(--hairline); }

/* A bot at work: its screen has a slow accent edge travelling round it, and
   the word "working" shimmers - a glance says it is alive. Still for anyone
   who asked for less motion. */
.machine-stage { position: relative; }
.machine-stage.live::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 2px; padding: 1.5px;
  background: conic-gradient(from var(--edge-a, 0deg), transparent 0 70%, rgba(226,229,234,.85) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: edge-run 3.2s linear infinite; opacity: .85; }
@property --edge-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes edge-run { to { --edge-a: 360deg; } }
.machine-head .state.live, .bot-title.live { background: linear-gradient(90deg, var(--faint) 0%, var(--ink) 45%, var(--faint) 90%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .machine-stage.live::after, .machine-head .state.live, .bot-title.live { animation: none; } }
body.reduced-motion .machine-stage.live::after, body.reduced-motion .machine-head .state.live, body.reduced-motion .bot-title.live { animation: none; }

/* The line under a working bot's screen: what it is doing now, in a glassy pill. */
.machine-caption { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; max-width: min(86%, 620px);
  display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: 999px; white-space: nowrap; overflow: hidden;
  background: color-mix(in srgb, var(--paper) 72%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-md); color: var(--ink); font-size: 13px; pointer-events: none; }
.machine-caption .i { color: var(--muted); flex: none; }
.machine-caption { transition: bottom .25s ease; }
.machine-caption .words { overflow: hidden; text-overflow: ellipsis; }
.machine-caption .words.in { animation: cap-in .35s ease; }
@keyframes cap-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .machine-caption .words.in { animation: none; } }

/* Words sent while a turn works: the person's own bubble, a size down, in the
   turn where it was said; "Seen" once the bot has read it. */
.w-person { display: flex; flex-direction: column; align-items: flex-end; margin: 12px 0 14px; }
.w-person .bubble { max-width: 78%; width: fit-content; padding: 8px 14px; border-radius: 16px 16px 5px 16px; background: var(--surface-muted);
  color: var(--ink); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; animation: aside-in .3s cubic-bezier(.2,.8,.2,1); }
.w-person .seen { margin-top: 4px; padding-right: 4px; font-size: 11.5px; color: var(--faint); transition: color .3s ease; }
.w-person.read .seen { color: var(--muted); }
@keyframes aside-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .w-person .bubble { animation: none; } }

/* A step on the bot's screen that is the person's to do: a sign-in, a code */
.w-question.screen { border: 1px solid var(--hairline-strong); background: var(--surface-muted); border-radius: 14px; padding: 13px 15px 14px; }
.w-question.screen .q-head { gap: 8px; font-size: 13px; color: var(--muted); }
.w-question.screen .q-head b { font-weight: 600; color: var(--ink); }
.w-question.screen p { font-size: 15px; line-height: 1.45; margin: 7px 0 3px; color: var(--ink); }
.w-question.screen .q-note { font-size: 12.5px; color: var(--faint); margin-bottom: 12px; }
.w-question.screen .q-choices { margin: 0; gap: 8px; }
.w-question.answered.screen { align-items: center; color: var(--muted); }

/* A friend's finished errand: its work folded into one quiet line */
.w-fold { display: inline-flex; align-items: center; gap: 2px; margin: 2px 0 6px; padding: 4px 2px; font-size: 13.5px; color: var(--muted); border-radius: 8px; }
.w-fold:hover { color: var(--ink); }
.w-fold .dim { color: var(--faint); }
.w-fold .chev { margin-left: 6px; transition: transform .2s ease; }
.w-fold.open .chev { transform: rotate(90deg); }
/* an answered hand-over: the pointer mark beside the ask, the answer under it */
.w-question.answered.screen { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; align-items: start; }
.w-question.answered.screen .i { margin-top: 2px; color: var(--muted); }
.w-question.answered.screen .dim { grid-column: 2; }

/* A resting machine keeps its last screen: the picture where it left off,
   dimmed, with one word in the middle - never a black pane. The live screen
   fades in over it when the machine wakes. */
.machine-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #141414;
  transition: opacity .45s ease, filter .45s ease; user-select: none; -webkit-user-drag: none; }
.machine-still.dim { filter: brightness(.46) saturate(.7); }
.machine-stage iframe { position: relative; z-index: 1; transition: opacity .45s ease; }
.machine-stage iframe.loading { opacity: 0; }
.machine-stage.resting { background: #141414; }
.machine-rest { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 10px; border-radius: 999px; white-space: nowrap; font-size: 13.5px; color: #eceef1;
  background: rgba(22, 22, 24, .72); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(236, 238, 242, .16); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: rest-in .4s ease; }
.machine-rest a { color: #fff; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.machine-rest a:hover { text-decoration-color: #fff; }
.machine-rest .dot-sep { color: rgba(236, 238, 242, .45); }
.machine-rest .spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(236, 238, 242, .25); border-top-color: #eceef1; animation: spin .8s linear infinite; }
@keyframes rest-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 4px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .machine-rest, .machine-rest .spin { animation: none; } .machine-still, .machine-stage iframe { transition: none; } }

/* a friend's answer, checked against the ask: one quiet line under it */
.w-checked { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 2px 14px; font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.w-checked .i { flex: none; margin-top: 2px; }
.w-checked.short { color: #c9a25e; }

/* The model service is down: one quiet line in the turn, the next try counting down;
   once it is back, how long it was down. Calm, not an alarm - nothing is lost. */
.w-outage { display: flex; align-items: center; gap: 7px; margin: 6px 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.w-outage .i { flex: none; }
.w-outage .when { color: var(--faint); font-variant-numeric: tabular-nums; }
.w-outage.live { color: var(--ink-2); }
.w-outage.live .i.spin { animation: spin 1.6s linear infinite; }
.turn .thinking + .w-outage { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .w-outage.live .i.spin { animation: none; } }

/* What a reply taught the bots: one quiet line under it, with Undo. */
.w-remembered { margin: 6px 0 2px 14px; display: flex; flex-direction: column; gap: 3px; }
.w-remembered .mem-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.w-remembered .mem-line b { font-weight: 500; color: var(--ink-2); }
.w-remembered .sep { opacity: .6; }
.w-remembered button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--faint); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.w-remembered button.link:hover, .w-remembered a.link:hover { color: var(--ink-2); }
.w-remembered a.link { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
/* Settings, Memory: each thing kept, editable in place, forgotten with its x (always shown: phones have no hover). */
.pmem-list .pmem-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pmem-list .pmem-row:last-child { border-bottom: 0; }
.pmem-list .pmem-text { flex: 1 1 auto; min-width: 0; cursor: text; }
.pmem-list .pmem-row input { flex: 1 1 auto; }
.pmem-list .pmem-src { flex: none; color: var(--faint); font-size: 12px; }
.pmem-list .pmem-row .icon-btn { width: 28px; height: 28px; flex: none; color: var(--faint); }
.pmem-list .pmem-row .icon-btn:hover { color: var(--ink); background: var(--press); }

/* A bot asking a teammate: the teammate's mark, the ask, its answer; quiet while it looks. */
.w-call { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, rgba(255,255,255,.02)); }
.w-call .call-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.w-call .call-head .who b { color: var(--ink); font-weight: 600; }
.w-call .call-head .title { color: var(--faint); }
.w-call .call-head .state { margin-left: auto; color: var(--faint); font-size: 12px; }
.w-call .call-head .open { color: var(--faint); font-size: 12px; text-decoration: none; }
.w-call .call-head .open:hover { color: var(--ink); }
.w-call .call-ask { margin: 6px 0 0 28px; font-size: 13px; color: var(--ink-2); font-style: italic; }
.w-call .call-answer { margin: 8px 0 0 28px; padding-left: 10px; border-left: 2px solid var(--line-2, var(--line)); font-size: 13.5px; color: var(--ink); }
.w-call .call-answer p { margin: 0 0 6px; }
.w-call .more { margin: 4px 0 0 28px; background: none; border: 0; padding: 0; font-size: 12px; color: var(--faint); cursor: pointer; text-decoration: underline; }
.w-call.live { border-color: color-mix(in srgb, var(--signal, #6aa0ff) 35%, var(--line)); }
.w-call.live .call-head .state { color: var(--signal, #6aa0ff); }
.w-call.bad .call-head .state { color: #d77a6a; }

/* Group chats: the members' marks overlapping; whose turn it is; one member passing to another. */
.group-mark { position: relative; display: inline-flex; width: var(--gm, 30px); height: var(--gm, 30px); flex: none; }
.group-mark .sigil-wrap { position: absolute; }
.group-mark .sigil-wrap:nth-child(1) { left: 0; top: 0; }
.group-mark .sigil-wrap:nth-child(2) { right: 0; top: 18%; }
.group-mark .sigil-wrap:nth-child(3) { left: 22%; bottom: 0; }
.bot-intro .group-mark { margin: 0 auto; }
.group-names { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-names .member { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.group-names .member:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.group-turn { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--faint); font-size: 12px; }
.group-turn .line { flex: 1 1 auto; height: 1px; background: var(--line); }
.group-turn .who { display: inline-flex; align-items: center; gap: 6px; }
.group-pass { margin: 6px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, rgba(255,255,255,.02)); }
.group-pass .gp-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.group-pass .gp-head .arrow { color: var(--faint); margin: 0 2px; }
.group-pass .gp-what { margin: 6px 0 0 24px; font-size: 13.5px; color: var(--ink); }
.group-pass .gp-what p { margin: 0 0 6px; }
.new-group .group-pick { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.new-group .gp-bot { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.new-group .gp-bot.on { border-color: var(--ink-2); background: var(--press); }
.new-group .gp-bot .n { font-weight: 600; }
.new-group .gp-bot .d { flex: 1 1 auto; min-width: 0; color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-group .gp-bot .tick { width: 18px; flex: none; color: var(--ink); }
.new-group .sub { color: var(--faint); font-size: 13px; margin: 0 0 12px; }

/* A job kept for later, in the turn that kept it. */
.w-sched { margin: 6px 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, rgba(255,255,255,.02)); }
.w-sched .sched-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.w-sched .sched-head b { color: var(--ink); font-weight: 600; }
.w-sched .sched-head .when { color: var(--ink-2); }
.w-sched .sched-head .keeper { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; color: var(--ink-2); }
.w-sched .sched-head .open { margin-left: auto; color: var(--faint); font-size: 12px; text-decoration: none; }
.w-sched .sched-head .open:hover { color: var(--ink); }
.w-sched .sched-what { margin: 5px 0 0 20px; font-size: 13.5px; color: var(--ink); }
.w-sched .sched-when { margin: 3px 0 0 20px; font-size: 12px; color: var(--faint); }
.w-sched.bad .sched-head b { color: #d77a6a; }

/* The group's intro: each member's mark sits on the line with its name. */
.bot-intro .bi-ask .sigil-wrap { display: inline-flex; vertical-align: -3px; margin-right: 2px; }

/* Inside the desktop app the window's own buttons (minimise, maximise, close)
   sit over the page's top-right corner: the row there leaves them their room. */
/* The app's webview host gives every page 20px of side padding by default; the
   product's page fills its window - the machine pane's dark surround reached
   20px short of the window's right edge, a light strip beside it (2026-09-26). */
html.in-app body { padding: 0; }
html.in-app .panel-tabs { padding-right: 112px; }
html.in-app #app.no-panel .topbar { padding-right: 112px; }

/* -- The scan of 2026-09-25: the state a turn is in, told at a glance -----------
   A plain grey "working" read the same as a plain grey "stopped". Each state now
   has its own colour and mark, the way a frontier app marks a run. */
.turn-who .what.live { color: var(--signal); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.turn-who .what.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: pulse 1.4s ease-in-out infinite; }
.reduced-motion .turn-who .what.live::before { animation: none; }
.turn-who .what.needs, .turn-who .what.warn, .turn-who .what.err {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.turn-who .what.needs { color: var(--signal); background: var(--signal-soft); }
.turn-who .what.warn { color: var(--warning); background: var(--warning-soft); }
.turn-who .what.err  { color: var(--danger);  background: var(--danger-soft); }
.turn-who .what.needs .i, .turn-who .what.warn .i, .turn-who .what.err .i { width: 12px; height: 12px; }

/* A question already dealt with reads as spent - dimmed, no live border. */
.w-question.answered.spent { opacity: .62; }
.w-question.answered.spent b { font-weight: 500; color: var(--muted); }

/* The stop control: unmistakably a stop, not a faint square on a dark disc. */
.composer-bar .send.stop { background: var(--danger); color: #fff; box-shadow: 0 0 0 3px var(--danger-soft); }
.composer-bar .send.stop .i { width: 13px; height: 13px; }

/* A neutral avatar when there is no real name yet - never the account id's letter. */
.avatar.big.none { color: var(--faint); background: var(--surface-muted); }
.avatar.big.none .i { width: 20px; height: 20px; }

/* The machine's screen sits on a neutral frame, not a black void, and its last
   picture fills the width and sits at the top so any letterbox is one band below. */
/* The machine's picture sits at the exact middle of its frame - the same place the
   live screen sits - on a neutral surface. Its own box is transparent, so the
   dimming filter darkens the picture and never the frame around it (a dimmed
   #f0f0ed box once read as a grey slab under a picture stuck to the top). */
.machine-still { background: transparent; object-fit: contain; object-position: center center; }
/* One surround, one colour, in every state - live, resting, waking, a note - and
   in both themes: the pane is a screen, and its bezel does not change with the
   page's theme or flick between two darks and white as the machine wakes. */
.machine-stage, .machine-stage.resting, .machine-stage.waiting, .machine-stage.live, .machine-stage iframe { background: #141414; }
.machine-stage .machine-note { color: #9a9aa3; }
.machine-stage .machine-note.problem { color: #c9c9cf; }
.machine-head .wake-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--press); border: 1px solid var(--hairline-strong); cursor: pointer; }
.machine-head .wake-btn:hover { border-color: var(--signal); color: var(--signal); }
.machine-head .wake-btn .i { width: 13px; height: 13px; }
.machine-caption.empty { display: none; }

/* A command's output on its chip reads as output, not as arguments to the command. */
.w-peek::before { content: "→"; margin-right: 5px; color: var(--faint); }

/* A hand-off in a group is one line: "Mira → Nia" and the gist. */
.group-pass .gp-gist { color: var(--muted); font-size: 13px; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.group-pass .gp-head { min-width: 0; }

/* A chat waiting on the person: the row and its last line say so, in the accent. */
.chat-row .last.needs { color: var(--signal); }
.chat-row .meta .needs { color: var(--signal); font-weight: 500; }

/* A stopped turn's card is neutral, never the green "Works" tick. */
.turn .result.stopped .mark { color: var(--warning); }
.turn .result.stopped { border-color: var(--warning-soft); }

/* Dialogs sit over a dimmed page, so they read as on top, not floating flat. */
.dialog-backdrop { background: rgba(10, 10, 12, .5); backdrop-filter: blur(2px); }
:root[data-theme="dark"] .dialog-backdrop { background: rgba(0, 0, 0, .62); }

/* a switch in a dialog: the box, its words, and a quiet hint under them */
label.field.check { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; cursor: pointer; }
label.field.check input { margin-top: 3px; accent-color: var(--accent); }
label.field.check .hint { grid-column: 2; color: var(--faint); font-size: 13px; }