/* The application's own names, expressed in the design system's tokens.
   Nothing here is a colour: every value points at theme.css, which is the one
   file allowed to know what a colour is. Kept as a mapping layer rather than
   renamed across a thousand rules, so the restyle is a change of values and
   not a rewrite of the markup. */
:root {
  --bg: var(--paper);
  --bg-2: var(--surface);
  --bg-3: var(--surface-muted);
  --bg-hover: var(--press);
  --bg-active: var(--press);
  --ink-2: var(--muted);
  --ink-3: var(--muted);
  --ink-4: var(--faint);
  --line: var(--hairline);
  --line-2: var(--hairline-strong);
  --accent: var(--signal);
  --accent-soft: var(--signal-soft);
  --accent-ink: var(--ink-invert);
  --green: var(--success);
  --green-bg: var(--success-soft);
  --red: var(--danger);
  --red-bg: var(--danger-soft);
  --amber: var(--warning);
  --blue: var(--signal);           /* one accent only: blue folds into signal */
  --shadow: var(--shadow-md);
  --radius: var(--radius-sm);
  --radius-lg: var(--radius-md);
  --font: var(--sans);
  --sidebar-w: 252px;
  --panel-w: 44%;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13.5px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; }
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 14px; height: 14px; }
svg.i.xs { width: 12px; height: 12px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* -- layout ------------------------------------------------------------------ */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr 5px var(--panel-w); height: 100vh; }
.app.no-sidebar { grid-template-columns: 0 1fr 5px var(--panel-w); }
.app.no-panel { grid-template-columns: var(--sidebar-w) 1fr 0 0; }
.app.no-sidebar.no-panel { grid-template-columns: 0 1fr 0 0; }
.app.panel-max { grid-template-columns: var(--sidebar-w) 0 5px 1fr; }
/* Each pane owns its column. With auto-placement, hiding the main pane for
   Expand slid the resizer into the 0 track and the panel into the 5px handle
   track - a 120px panel with the legend wrapping one word per line and a
   blank canvas, on every tab. Explicit columns make that impossible. */
.sidebar { grid-column: 1; }
.main { grid-column: 2; }
.resizer { grid-column: 3; }
.panel { grid-column: 4; }
.sidebar { border-right: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.app.no-sidebar .sidebar { display: none; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; background: var(--bg); }
.app.panel-max .main { overflow: hidden; }
.resizer { cursor: col-resize; background: transparent; transition: background .15s; }
.resizer:hover, .resizer.active { background: var(--line-2); }
.app.no-panel .resizer { display: none; }
.panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.app.no-panel .panel { display: none; }

/* -- sidebar ------------------------------------------------------------------- */
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 4px; }
.side-nav { padding: 4px 8px; display: flex; flex-direction: column; gap: 1px; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); width: 100%; text-align: left; }
.nav-item:hover { background: var(--bg-hover); color: var(--ink); }
.nav-item.active { background: var(--bg-active); color: var(--ink); font-weight: 500; }
.side-section { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; color: var(--ink-3); font-size: 12px; }
.side-section .tools { display: flex; gap: 2px; }
.side-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.repo-group { margin-bottom: 4px; }
.repo-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--ink); width: 100%; text-align: left; font-weight: 500; }
.repo-row:hover { background: var(--bg-hover); }
.repo-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 30px; border-radius: 8px; color: var(--ink-2); width: 100%; text-align: left; font-size: 13px; position: relative; }
.session-row:hover { background: var(--bg-hover); color: var(--ink); }
.session-row.active { background: var(--bg-active); color: var(--ink); }
.session-row .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row .meta { display: flex; align-items: center; gap: 6px; color: var(--ink-4); font-size: 11.5px; flex: none; }
.session-row .dot { position: absolute; left: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.session-row .dot.running { background: var(--blue); animation: pulse 1.2s infinite; }
.side-more { padding: 5px 10px 5px 30px; color: var(--ink-3); font-size: 12.5px; width: 100%; text-align: left; border-radius: 8px; }
.side-more:hover { background: var(--bg-hover); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-top: 1px solid var(--line); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.side-user .who { flex: 1; min-width: 0; line-height: 1.25; }
.side-user .who b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who span { color: var(--ink-3); font-size: 12px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; color: var(--muted); }
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
.icon-btn.sm { width: 24px; height: 24px; }
.icon-btn.active { background: var(--bg-active); color: var(--ink); }

/* -- main header ------------------------------------------------------------------ */
.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid transparent; min-height: 48px; }
.topbar .title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.topbar .title input { border: none; background: transparent; width: 100%; padding: 4px 6px; border-radius: 6px; }
.topbar .title input:focus { outline: none; background: var(--bg-hover); }
.text-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 7px; color: var(--ink-3); font-size: 12.5px; }
.text-btn:hover { background: var(--bg-hover); color: var(--ink); }

/* -- chat ------------------------------------------------------------------------ */
.chat { flex: 1; overflow-y: auto; min-height: 0; }
.chat-inner { max-width: 780px; margin: 0 auto; padding: 8px 24px 40px; }
/* The person's words sit on the right and take the width of the words: a
   one-line ask is one line, not a bar across the page. */
.msg-user { margin: 14px 0 22px auto; width: fit-content; max-width: 78%; background: var(--bg-3); border: 1px solid var(--line);
            border-radius: 16px 16px 4px 16px; padding: 10px 14px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.55;
            box-shadow: var(--shadow-sm); text-align: left; overflow-wrap: anywhere; }
.msg-user .ctx { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* A long paste shows its first lines and a count; the rest opens on request. */
.msg-user.long:not(.open) .text { max-height: 14.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.fold-btn { display: inline-flex; align-items: center; margin-top: 6px; padding: 0; border: 0; background: none;
  color: var(--ink-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.fold-btn:hover { color: var(--ink); text-decoration: underline; }
.step.cmd .folded { display: inline; }
.step.cmd .folded .fold-btn { display: block; margin: 2px 0 0; font-family: var(--mono); font-size: 11.5px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); font-size: 12px; color: var(--ink-2); font-family: var(--mono); }
.turn { margin: 0 0 28px; }
.activity { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: var(--bg); }
.activity-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ink-3); font-size: 12.5px; width: 100%; text-align: left; }
.activity-head:hover { background: var(--bg-hover); }
.activity-head .spin { width: 12px; height: 12px; border: 2px solid var(--line-2); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; }
.activity-body { border-top: 1px solid var(--line); max-height: 360px; overflow-y: auto; font-size: 12.5px; }
.activity-body.collapsed { display: none; }
.step { display: flex; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.step:last-child { border-bottom: none; }
.step .kind { color: var(--ink-4); font-family: var(--mono); font-size: 11px; width: 88px; flex: none; padding-top: 2px; }
.step .body { flex: 1; min-width: 0; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }
.step.assistant .body { font-family: var(--serif); font-size: 14.5px; line-height: 1.65; }
.step .ok { color: var(--green); }
.step .bad { color: var(--red); }
.answer { font-family: var(--serif); font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.answer p { margin: 0 0 12px; }
.answer h1, .answer h2, .answer h3 { font-family: var(--serif); margin: 18px 0 8px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.answer h1 { font-size: 20px; } .answer h2 { font-size: 17px; } .answer h3 { font-size: 15px; }
.answer ul, .answer ol { margin: 0 0 12px; padding-left: 22px; }
.answer li { margin: 3px 0; }
/* Prose wraps anywhere it must: an error that quotes a URL and a JSON body
   is one unbreakable word to the browser, and at phone width it pushed the
   whole chat 156px sideways. */
.answer, .says { overflow-wrap: anywhere; }
.answer code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-3); padding: 1px 5px; border-radius: 5px; }
.answer pre { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; }
.answer pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.55; }
.answer table { border-collapse: collapse; width: 100%; margin: 6px 0 16px; font-size: 13.5px; }
.answer th, .answer td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.answer th { background: var(--bg-2); font-weight: 600; }
.answer blockquote { margin: 0 0 12px; padding: 4px 14px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.answer a { color: var(--blue); }
.answer hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.turn-foot { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--ink-4); font-size: 12px; }
.turn-foot .icon-btn { width: 26px; height: 26px; }
.turn-foot .when { margin-left: 8px; }
.changes-card { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 16px; overflow: hidden; }
.changes-card .head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 13px; color: var(--ink-2); }
.changes-card .head b { font-weight: 500; }
.changes-card .head button { color: var(--ink-3); font-size: 12.5px; }
.changes-card .head button:hover { color: var(--ink); }
.changes-card .row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-top: 1px solid var(--line); font-size: 13px; width: 100%; text-align: left; }
.changes-card .row:hover { background: var(--bg-hover); }
.changes-card .row .lang { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); width: 22px; }
.changes-card .row .path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num-add { color: var(--green); font-family: var(--mono); font-size: 12px; }
.num-del { color: var(--red); font-family: var(--mono); font-size: 12px; }
.empty-chat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.hint { color: var(--ink-4); font-size: 12.5px; text-align: center; margin-top: 18px; }
.hint code { font-family: var(--mono); background: var(--bg-3); padding: 1px 5px; border-radius: 4px; }

/* -- composer ---------------------------------------------------------------------- */
.composer-wrap { padding: 8px 24px 18px; }
.composer-wrap.centered { width: 100%; max-width: 640px; }
.chat + .composer-wrap { max-width: 828px; margin: 0 auto; width: 100%; }
.selectors { display: flex; align-items: center; gap: 4px; margin: 0 0 8px 6px; flex-wrap: wrap; }
.sel { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; color: var(--ink-2); font-size: 12.5px; }
.sel:hover { background: var(--bg-hover); color: var(--ink); }
.sel .i { color: var(--ink-3); }
.composer { border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
.composer:focus-within { border-color: var(--ink-4); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.composer textarea { width: 100%; border: none; background: transparent; resize: none; padding: 14px 16px 6px; font-size: 14.5px; line-height: 1.5; min-height: 52px; max-height: 260px; outline: none; }
.composer textarea::placeholder { color: var(--ink-4); }
.composer-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px 8px; }
.composer-bar .grow { flex: 1; }
.composer-bar .send { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; }
.composer-bar .send:disabled { opacity: .35; cursor: default; }
.composer-bar .send.stop { background: var(--danger); color: var(--ink-invert); }
.composer-bar .mic.on { color: var(--red); animation: pulse 1s infinite; }
.plan-chip { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0 4px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); background: var(--bg); }
.plan-chip:hover { background: var(--bg-hover); }
.plan-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.plan-chip kbd { font-family: var(--font); font-size: 11px; color: inherit; opacity: .7; }
.ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 4px; }
.ctx-chips .chip button { display: inline-flex; color: var(--ink-4); }

/* -- popovers / menus ------------------------------------------------------------------ */
#layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.popover { position: absolute; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 220px; max-width: 360px; padding: 6px; pointer-events: auto; animation: pop .12s ease-out; max-height: 70vh; overflow-y: auto; }
.popover .label { padding: 6px 10px 4px; font-size: 11.5px; color: var(--ink-4); }
.popover .item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; color: var(--ink); font-size: 13px; }
.popover .item:hover { background: var(--bg-hover); }
.popover .item.disabled { color: var(--ink-4); cursor: default; }
.popover .item.disabled:hover { background: none; }
.popover .item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover .item .kbd { color: var(--ink-4); font-size: 11.5px; }
.popover .item .sub { color: var(--ink-4); font-size: 11.5px; margin-left: 4px; }
.popover .sep { height: 1px; background: var(--line); margin: 5px 4px; }
.popover .search { display: flex; align-items: center; gap: 8px; padding: 4px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.popover .search input { border: none; background: transparent; outline: none; width: 100%; padding: 4px 2px; }
.toggle { width: 30px; height: 17px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-invert); transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.toggle.on { background: var(--ink); }
.toggle.on::after { transform: translateX(13px); }
.dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.28); display: grid; place-items: center; pointer-events: auto; z-index: 60; animation: fade .12s; }
.dialog { background: var(--bg); border-radius: 16px; box-shadow: var(--shadow); width: min(520px, 92vw); padding: 22px 24px; }
.dialog h3 { margin: 0 0 8px; font-size: 16px; }
.dialog p { margin: 0 0 14px; color: var(--ink-2); }
.dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.code-big { font-family: var(--mono); font-size: 28px; letter-spacing: .12em; text-align: center; padding: 14px; border: 1px dashed var(--line-2); border-radius: 12px; margin: 10px 0; user-select: all; }

/* -- buttons / inputs ----------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 500; }
.btn:hover { background: var(--bg-hover); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { opacity: .9; }
.btn.danger { color: var(--red); }
.btn.sm { padding: 4px 9px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: default; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 12.5px; color: var(--ink-3); }
.field input, .field textarea, .field select { border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; background: var(--bg); outline: none; }
.field input:focus, .field textarea:focus { border-color: var(--ink-4); }
.field textarea { min-height: 90px; resize: vertical; font-family: var(--font); }
.field .row { display: flex; gap: 8px; }
.field .row > * { flex: 1; }

/* -- pages (settings, automations, search, customize) ----------------------------- */
.page { flex: 1; overflow-y: auto; }
.page-inner { max-width: 760px; margin: 0 auto; padding: 28px 28px 60px; }
.page h1 { font-size: 22px; margin: 0 0 4px; font-weight: 600; letter-spacing: -.01em; }
.page .lead { color: var(--ink-3); margin: 0 0 24px; }
.card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 16px; background: var(--bg); }
.card h2 { font-size: 14px; margin: 0 0 4px; font-weight: 600; }
.card .sub { color: var(--ink-3); font-size: 12.5px; margin: 0 0 14px; }
.card .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip.add { cursor: pointer; }
.status-line { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.status-line .ok { color: var(--green); }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.list-row:first-of-type { border-top: none; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .grow b { display: block; font-weight: 500; }
.list-row .grow span { color: var(--ink-3); font-size: 12.5px; }
/* a schedule, said in words: what, who, when; its last result; its next time; then the buttons */
.sched { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.sched:first-of-type { border-top: none; }
.sched .head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; font-weight: 500; }
.sched .head > .sigil-wrap { flex: none; }
.sched .head > span:last-child { flex: 1; text-align: left; min-width: 0; }
.sched .task { color: var(--ink-2); line-height: 1.45; }
.sched .meta { color: var(--ink-3); font-size: 12.5px; }
.sched .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.seg button { padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: var(--bg); }
.search-box { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; }
.search-box input { border: none; outline: none; background: transparent; width: 100%; font-size: 15px; }
.result { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.result:hover { background: var(--bg-hover); }
.result b { display: block; font-weight: 500; }
.result span { color: var(--ink-3); font-size: 12.5px; }

/* -- right panel ---------------------------------------------------------------------- */
.panel-tabs { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; color: var(--ink-3); font-size: 13px; }
.tab:hover { background: var(--bg-hover); color: var(--ink); }
.tab.active { background: var(--bg-active); color: var(--ink); font-weight: 500; }
.panel-tabs .grow { flex: 1; }
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.subbar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.subbar .grow { flex: 1; }
.panel-scroll { flex: 1; overflow-y: auto; }
.panel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--ink-3); gap: 8px; padding: 30px; text-align: center; }
.panel-empty b { color: var(--ink); font-weight: 500; }
.commit { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.commit .sha { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.commit .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commit .when { color: var(--ink-4); font-size: 12px; }
.turn-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; }
.turn-row:hover { background: var(--bg-hover); }
.turn-row .grow { flex: 1; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; font-size: 13px; }
.file-row:hover { background: var(--bg-hover); }
.file-row .path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.file-row .st { font-family: var(--mono); font-size: 11px; width: 14px; color: var(--ink-4); }
.diff { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.diff .dl { display: flex; white-space: pre; }
.diff .ln { width: 44px; flex: none; text-align: right; padding-right: 8px; color: var(--ink-4); user-select: none; }
.diff .tx { flex: 1; padding-right: 12px; overflow-x: auto; }
.diff .add { background: var(--green-bg); }
.diff .add .tx { color: var(--green); }
.diff .del { background: var(--red-bg); }
.diff .del .tx { color: var(--red); }
.diff .hunk { color: var(--blue); background: var(--bg-3); padding: 2px 12px; }
.diff .meta { color: var(--ink-4); padding: 2px 12px; }
.diff-actions { display: flex; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.commit-box { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.commit-box input { flex: 1; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; outline: none; background: var(--bg); }
.browser-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.browser-bar .url { flex: 1; border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; background: var(--bg-3); outline: none; font-size: 13px; }
.browser-bar .url:focus { border-color: var(--ink-4); background: var(--bg); }
.browser-frame { flex: 1; border: none; width: 100%; background: var(--paper); }
.browser-start { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 90px; }
.browser-start .big { width: min(440px, 90%); display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 16px; background: var(--bg-2); }
.browser-start .big input { border: none; outline: none; background: transparent; width: 100%; font-size: 14px; }
.browser-start .recents { width: min(440px, 90%); margin-top: 26px; }
.browser-start .recents h4 { margin: 0 0 8px; font-weight: 500; color: var(--ink-3); font-size: 12.5px; }
.browser-start .recents button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px; }
.browser-start .recents button:hover { background: var(--bg-hover); }
.browser-start .recents button span { color: var(--ink-3); font-size: 12.5px; }
.browser-note { padding: 10px 14px; color: var(--ink-3); font-size: 12.5px; border-top: 1px solid var(--line); }
.desktop-shell { flex: 1; display: grid; place-items: center; padding: 30px; }
.desktop-art { width: 100%; max-width: 560px; aspect-ratio: 16/10; border-radius: 12px; background: linear-gradient(135deg, var(--signal-soft) 0%, var(--surface-muted) 100%); display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow-sm); border: 1px solid var(--hairline); }
.desktop-art .btn { background: var(--surface); color: var(--ink); border-color: transparent; }
.file-view { flex: 1; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.55; }
.file-view .dl { display: flex; white-space: pre; }
.subs .list-row { padding: 10px 14px; }

/* -- toasts ------------------------------------------------------------------------ */
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 70; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 9px 14px; border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; animation: pop .15s; pointer-events: auto; max-width: 480px; }
.toast.error { background: var(--danger); color: var(--ink-invert); }

@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }

/* -- conversation turns: a reply, streamed ----------------------------------------------------- */
.answer.streaming::after { content: ''; display: inline-block; width: 8px; height: 15px; margin-left: 3px; background: var(--ink); vertical-align: -2px; border-radius: 2px; animation: blink 1s steps(2, start) infinite; }
.thinking { display: inline-flex; gap: 5px; align-items: center; padding: 8px 2px 6px; }
.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); animation: pulse 1.2s ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: .2s; }
.thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { to { visibility: hidden; } }
@keyframes pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.field label .muted { font-weight: 400; color: var(--ink-4); }

/* -- the flow ----------------------------------------------------------------
   A turn is a sequence, so it is drawn as one: a hairline rail down the left,
   a dot on it for every action, and what the agent said set as prose between
   them. The dot carries the meaning - which kind of action, and whether it
   worked - so the column can be read at a glance without opening anything.
   Everything used to sit inside one collapsed "Agent turn" box, which hid the
   only part a person reads. */
.flow { position: relative; margin: 6px 0 8px; }
/* The rail runs through the middle of the dots, so left here and left on .dot
   have to agree: 9px + half of a 19px dot puts both centres on 9.5. */
.flow::before { content: ''; position: absolute; left: 10.5px; top: 14px; bottom: 14px;
                width: 1px; background: var(--line-2); }

/* What the agent said sits on the rail itself: the hairline thickens to a
   2px bar beside its prose, and the prose is set a little smaller than the
   answer so a turn reads as one column of marks and words. */
.says { font-family: var(--serif); font-size: 15px; line-height: 1.65; color: var(--ink);
        margin: 12px 0 12px 10px; padding-left: 22px; border-left: 2px solid var(--line-2); }
.says p { margin: 0 0 10px; }
.says p:last-child { margin-bottom: 0; }
.says code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-3); padding: 1px 5px; border-radius: 5px; }

/* one action, or a run of them */
.act { margin: 1px 0; }
.act-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
            padding: 4px 8px 4px 0; color: var(--ink-3); font-size: 13px; border-radius: 7px; }
.act-head:hover { background: var(--bg-hover); color: var(--ink); }
/* The label takes the room the line has; the aside keeps its own words.
   A 70% cap left a hundred pixels empty beside a headline cut with "…". */
.act-head .label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-head .label.why { color: var(--ink-2); }
.act-head .agent { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.shots { display: flex; gap: 8px; margin: 4px 0 8px 30px; flex-wrap: wrap; }
.shots img { width: 168px; height: 112px; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); cursor: zoom-in; background: var(--bg-2); }
.shots img:hover { border-color: var(--ink-4); }
.shot-full { max-width: min(1100px, 92vw); max-height: 88vh; border-radius: 12px; }
.act-head .aside { flex: 1 0 auto; max-width: 40%; min-width: 0; color: var(--ink-4); font-family: var(--mono);
                   font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The verdict sits in one column at the end of the line, whatever the line holds. */
.act-head .tag { flex: none; margin-left: auto; color: var(--danger); font-family: var(--mono); font-size: 11px; }
.act-head .tag.quiet { color: var(--faint); }
.act-head .chev { flex: none; margin-left: auto; color: var(--ink-4); transition: transform .15s; }
.act-head .tag + .chev { margin-left: 0; }
.act.open .act-head .chev { transform: rotate(90deg); }


/* the dot on the rail */
/* The mark on the rail: a 22px ring with the action's own glyph, lifted off
   the hairline by a halo of paper. Open or under the pointer it darkens;
   a failure rings red; a refusal is dashed. */
.dot { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%;
       display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--line-2);
       color: var(--ink-3); flex: none; box-shadow: 0 0 0 3px var(--paper); transition: border-color .15s, color .15s; }
.dot .i { width: 12px; height: 12px; }
.act-head { position: relative; padding-left: 34px; min-height: 30px; }
.act:hover .dot, .act.open .dot { border-color: var(--ink-3); color: var(--ink); }
.act.denied .dot { border-style: dashed; }


.act-body { display: none; margin: 3px 0 8px 30px; padding: 7px 11px;
            background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.act.open .act-body { display: block; }

/* the verification line: a result, not debris */
.checkline { position: relative; display: flex; align-items: center; gap: 8px;
             padding: 5px 0 5px 34px; margin: 4px 0; font-size: 13px; color: var(--green); }
/* A verdict is a lamp on the rail, not a dash: filled, in the verdict's colour. */
.checkline .rule { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%;
                   background: currentColor; box-shadow: 0 0 0 3px var(--paper); }
.checkline .label { font-weight: 500; letter-spacing: .01em; }
.checkline .dot { border-color: var(--green); color: var(--green); background: var(--green-bg); }
.checkline.bad { color: var(--amber); }
.checkline.bad .dot { border-color: var(--amber); color: var(--amber); background: var(--bg-2); }
.checkline .label { flex: none; }
.checkline .aside { flex: 1; min-width: 0; color: var(--ink-4); font-family: var(--mono);
                    font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* still working */
.flow-live { position: relative; display: flex; align-items: center; gap: 8px;
             color: var(--ink-3); font-size: 13px; padding: 4px 0 4px 30px; }

/* -- the blank page -----------------------------------------------------------
   One line, and the box to type in. It used to show a tip that rotated on a
   timer - read once, never again - and one of them said agents are kept
   working "until the job is done", which is not a friendly way to open. */
.greeting { text-align: center; margin: 0 0 24px; }
.greeting h1 { font-family: var(--serif); font-size: 30px; font-weight: 600;
               letter-spacing: -.02em; color: var(--ink); margin: 0; }

/* -- what is happening now ----------------------------------------------------
   A running turn used to sit wherever its repository sorted, so the one thing
   worth watching had to be hunted for. It is pinned to the top instead, with
   the folder named beside it because that context is gone once it leaves the
   repository grouping. The section is absent entirely when nothing runs. */
/* .side-list is flex:1 so the repository list fills the sidebar and scrolls.
   The live list borrows that class and inherited the growing too, which left
   a void between "Working now" and everything else while Completed sat
   pinned at the bottom. It should be exactly as tall as its rows. */
.side-list.live-list { flex: 0 0 auto; overflow: visible; margin-bottom: 2px; }
.session-row.live { align-items: center; gap: 9px; padding: 7px 12px 7px 14px; }
.session-row.live .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.session-row.live .title { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row.live .where { font-size: 11px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row.live .meta { color: var(--accent); }

/* A dot that breathes: at a glance the difference between "running" and
   "stopped a second ago" is motion, not colour. */
.pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
         box-shadow: 0 0 0 0 var(--accent); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* -- Flow: the application, drawn ---------------------------------------------
   A card per component and a line per relationship. The lamp is the only
   colour that carries meaning, because everything else on the card is a fact
   that does not change while you look at it. A dashed edge has been inferred;
   a solid one has been seen. */
/* The bar above the graph: what is here and what you can do, in one line,
   at the weight of a caption. The graph is the page; this is its margin. */
.flow-bar { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 6px 10px 6px 14px;
            border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.flow-bar .count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-bar .live-count { color: var(--green); font-family: var(--mono); font-size: 11.5px; }
.flow-bar .grow { flex: 1; min-width: 8px; }
.flow-bar .quiet { font: inherit; font-size: 12px; color: var(--ink-3); background: none; border: 1px solid transparent;
                   padding: 4px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: color .12s, background .12s, border-color .12s; }
.flow-bar .quiet:hover { color: var(--ink); background: var(--bg-3); }
.flow-bar .quiet.check { color: var(--ink-2); border-color: var(--line); background: var(--bg-2); }
.flow-bar .quiet.check:hover { border-color: var(--ink-4); color: var(--ink); }
.flow-bar .icon-btn { margin-left: 2px; }
.flow-error { display: flex; align-items: center; gap: 8px; margin: 10px 14px; padding: 9px 12px;
              border: 1px solid var(--red); background: var(--red-bg); color: var(--red);
              border-radius: var(--radius); font-size: 12.5px; }

/* -- the canvas ------------------------------------------------------------
   One transformed viewport: pan and zoom move a single element, so nothing
   is laid out again while the person drags. Cards are DOM, edges are SVG
   under them, and the dot grid moves with the graph so the eye can tell a
   pan from a redraw. */
.flow-canvas.small { flex: 0 0 300px; min-height: 300px; }
/* a picture of a few cards needs no map of itself */
.flow-canvas.small .flow-minimap { display: none; }
.flow-canvas { flex: 1; position: relative; overflow: hidden; min-height: 240px; touch-action: none;
               cursor: grab; user-select: none; -webkit-user-select: none; background: var(--bg); }
.flow-canvas.panning { cursor: grabbing; }
.flow-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flow-grid .dot { fill: var(--ink-4); opacity: .38; }
.flow-viewport { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.flow-nodes, .flow-edges, .flow-lanes { position: absolute; left: 0; top: 0; }
/* Lanes: one soft region per kind, named in small caps, under everything.
   They are the reading order - servers, screens, state, data, checks - and
   they stay legible zoomed far out, when the cards are only names. */
.flow-lane { position: absolute; box-sizing: border-box; border-radius: 18px; pointer-events: none;
             border: 1px solid color-mix(in srgb, var(--ink-4) 28%, transparent);
             background: color-mix(in srgb, var(--ink-4) 7%, transparent); }
.flow-lane > span { position: absolute; left: 16px; top: 12px; font-family: var(--mono); font-size: 11px;
                    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
.flow-lane > span b { margin-left: 7px; font-weight: 600; color: var(--ink-3); }
.flow-lane.service { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.flow-lane.screen { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.flow-lane.tests { border-color: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.flow-viewport.lod .flow-lane > span { font-size: 15px; }
/* Focus: the selected card and its neighbours stay, the rest step back. */
.flow-nodes.focus .flow-node.far { opacity: .26; filter: saturate(.5); }
.flow-node.hit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, transparent), var(--shadow-sm); }
.flow-edges.focus .flow-edge:not(.sel):not(.hot) { opacity: .1; }
.flow-edges.focus .flow-edge-live { opacity: .25; }
.flow-elabel { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-2); text-anchor: middle;
               paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.flow-find { font: inherit; font-size: 12.5px; width: 150px; padding: 4px 10px; margin-left: 10px;
             border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--ink); }
.flow-find:focus { outline: none; border-color: var(--accent); }
.flow-find::placeholder { color: var(--ink-4); }
.flow-story { padding: 0 14px 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.flow-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 8px; }
.lane-chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; padding: 3px 9px 3px 7px;
             border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2); cursor: pointer;
             transition: opacity .15s, border-color .15s; }
.lane-chip:hover { border-color: var(--ink-4); color: var(--ink); }
.lane-chip .n { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.lane-chip.off { opacity: .42; text-decoration: line-through; }
.flow-minimap .mm-lane { fill: color-mix(in srgb, var(--ink-4) 10%, transparent); stroke: color-mix(in srgb, var(--ink-4) 35%, transparent); stroke-width: .6; }
.flow-edges { overflow: visible; pointer-events: none; }
.flow-edge { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linecap: round;
             transition: stroke .15s, stroke-width .15s, opacity .15s; }
.flow-edge.seen { stroke: var(--ink-4); stroke-dasharray: none; }
.flow-edge.hot, .flow-edge.sel { stroke: var(--ink-2); stroke-width: 2; }
.flow-edges.dim .flow-edge:not(.hot):not(.sel) { opacity: .3; }
/* Traffic: a short dash travelling along an edge whose server is up.
   pathLength normalises every edge to 150 units, so the dash moves at one
   speed whatever the geometry. A pulse is the same dash, brighter and
   faster, once, when a real request has just gone through. */
/* Dash and gap are in pixels and the offset moves 150px per cycle, so the
   dash travels at the same speed on every edge. Normalised to one cycle
   per edge, a long line raced and a short one crawled - and it looked like
   different edges carried different amounts of traffic. They do not. */
.flow-edge-live { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round;
                  stroke-dasharray: 10 140; opacity: .85; animation: flow-travel 1.2s linear infinite; }
.flow-edge-live.pulse { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 18 132; opacity: 1;
                        animation-duration: .6s; }
@keyframes flow-travel { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }

.flow-node { position: absolute; display: flex; flex-direction: column; gap: 5px; width: 224px; height: 62px;
             box-sizing: border-box; padding: 10px 12px; text-align: left; background: var(--bg-2);
             border: 1px solid var(--line); border-radius: 12px; cursor: default; font: inherit; color: inherit;
             box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; }
.flow-node:hover { border-color: var(--ink-4); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.flow-node.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, transparent), var(--shadow-sm); }
.flow-node.new { animation: flow-in .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes flow-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.flow-node .handle { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
                     background: var(--bg-2); border: 1.5px solid var(--ink-4); }
.flow-node .handle.in { left: -4px; }
.flow-node .handle.out { right: -4px; }
.flow-node.live .handle { border-color: var(--green); }
.flow-node .top { display: flex; align-items: center; gap: 7px; }
.flow-node .ico { color: var(--ink-3); display: flex; }
.flow-node .name { flex: 1; min-width: 0; font-size: 13px; font-weight: 550; color: var(--ink);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-node .sub { display: flex; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-4); white-space: nowrap; overflow: hidden; }
.flow-node.live { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.flow-node.failing { border-color: var(--red); }
/* Zoomed far out, a card is a name: the small print would only be noise. */
.flow-viewport.lod .flow-node .sub { display: none; }
.flow-viewport.lod .flow-node { justify-content: center; }

.flow-controls { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 2px;
                 padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
                 box-shadow: var(--shadow-sm); }
.flow-controls button { min-width: 26px; height: 26px; padding: 0 8px; border: 0; background: transparent;
                        color: var(--ink-2); border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer; }
.flow-controls button:hover { background: var(--bg-3); color: var(--ink); }
.flow-controls .zoom { font-family: var(--mono); font-size: 11px; color: var(--ink-4); padding: 0 8px 0 6px;
                       min-width: 38px; text-align: right; }
.flow-minimap { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 160px; height: 100px;
                background: color-mix(in srgb, var(--bg-2) 88%, transparent); border: 1px solid var(--line);
                border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; cursor: crosshair;
                backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Cards are the picture, the viewport is an outline over it: the person
   reads where they are from what is inside the box, not from the box. */
.flow-minimap .mm-node { fill: var(--ink-4); opacity: .55; }
.flow-minimap .mm-node.live { fill: var(--green); opacity: .8; }
.flow-minimap .mm-node.failing { fill: var(--red); }
.flow-minimap .mm-view { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 1; }
@media (prefers-reduced-motion: reduce) { .flow-edge-live, .flow-node.new { animation: none; } }

/* One lamp, three states, and "unknown" is deliberately colourless: we have
   not checked, and a grey dot says that more honestly than a green one. */
.lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex: none; }
.lamp.live { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.lamp.stopped { background: var(--ink-4); }
.lamp.failing { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }

.flow-detail { border-top: 1px solid var(--line); padding: 12px 14px; background: var(--bg-2); }
.flow-detail .dhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.flow-detail .dhead .health { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.dfacts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin-bottom: 12px; }
.dfacts > div { display: contents; }
.dfacts .k { color: var(--ink-4); font-size: 12px; }
.dfacts .v { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dacts { display: flex; flex-wrap: wrap; gap: 6px; }
.dlinkbox { margin: 2px 0 10px; }
.dlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 4px 0; }
.dlinks .k { font-family: var(--mono); font-size: 11px; color: var(--ink-4); margin-right: 3px; }
.dlinks button { font: inherit; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-2); cursor: pointer; }
.dlinks button:hover { border-color: var(--ink-4); color: var(--ink); }
.dlogs { margin: 12px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto;
         background: var(--bg-3); border-radius: var(--radius); font-family: var(--mono);
         font-size: 11.5px; color: var(--ink-2); white-space: pre-wrap; }

.flow-empty { flex: 1; display: flex; flex-direction: column; align-items: center;
              justify-content: center; gap: 8px; padding: 40px; color: var(--ink-3); text-align: center; }
.flow-empty b { color: var(--ink); font-size: 14px; }
.flow-empty svg { color: var(--ink-4); margin-bottom: 4px; }

/* The answer a real request came back with: a status, a duration, and what
   the server said. Not an estimate and not a simulation. */
.dran { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line);
        border-radius: var(--radius); background: var(--bg-3); font-size: 12.5px; }
.dran b { font-family: var(--mono); color: var(--green); font-size: 13px; }
.dran.bad b { color: var(--red); }
.dran .ms { margin-left: 10px; font-family: var(--mono); color: var(--ink-4); font-size: 11.5px; }
.dran pre { margin: 8px 0 0; max-height: 160px; overflow: auto; font-family: var(--mono);
            font-size: 11px; color: var(--ink-2); white-space: pre-wrap; }

/* A component attached from Flow. It steers the run, so it is visible and
   removable rather than hidden state. */
.chip.flow { border-color: var(--accent); color: var(--accent); }
.chip.flow svg { opacity: .9; }

/* An opened action, read the way it would be in a terminal: what was run,
   then what it printed. The output is the part that says whether it worked,
   so it gets the room rather than being clipped into a label's value. */
.step.cmd { padding: 5px 0 3px; }
.step.cmd .line { display: flex; gap: 8px; align-items: baseline; }
.step.cmd .sigil { flex: none; font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.step.cmd code { font-family: var(--mono); font-size: 12px; color: var(--ink);
                 word-break: break-all; white-space: pre-wrap; }
.step.cmd .args { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.step.out { padding: 0 0 8px; }
.step.out pre { margin: 4px 0 0; padding: 8px 10px; max-height: 260px; overflow: auto;
                background: var(--bg-3); border-radius: 8px; font-family: var(--mono);
                font-size: 11.5px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; }
.step.out .line { display: flex; align-items: center; gap: 6px; color: var(--red); font-size: 12px; }
.step.out .line.quiet { color: var(--ink-4); }


/* -- the design system's remaining rules -------------------------------------
   Cards sit on the same paper as the page and are separated by a hairline and
   a shadow rather than by a grey fill; --surface-muted is for inset rows and
   pressed states only. */
.icon-btn:hover, .icon-btn:active, .icon-btn.on { background: var(--press); }

/* Chips and small controls take the small radius, cards the medium, and
   anything that floats over the page the large. */
.chip, .sel, .btn.sm, .plan-chip, .tab { border-radius: var(--radius-sm); }
.changes-card, .act-body, .flow-node, .flow-detail, .step-card { border-radius: var(--radius-md); }
.menu, .modal, .popover, .sheet, .toast { border-radius: var(--radius-lg); }

/* One accent, and only where something needs acting on. */
.btn.primary, .composer-bar .send { background: var(--signal); color: var(--ink-invert); }
.btn.primary:hover, .composer-bar .send:hover { background: var(--signal-ink); }
a, .link { color: var(--signal); }

/* A phone is 375px wide and nothing may scroll sideways on it. The gutter is
   the design system's, and never less than 16px. */
html, body { max-width: 100%; overflow-x: hidden; }
.answer, .says, .turn, .user-turn { padding-left: max(16px, 0px); padding-right: max(16px, 0px); }
@media (max-width: 720px) {
  :root { --sidebar-w: 0px; --panel-w: 100%; }
  /* With the panel open the main column is 0px wide but still positioned,
     so its composer would paint through the panel. Clip it. */
  .main { overflow: hidden; }
  .main, .chat { padding-left: max(16px, var(--pad)); padding-right: max(16px, var(--pad)); }
  .composer-wrap { padding-left: max(16px, var(--pad)); padding-right: max(16px, var(--pad)); }
}

/* The reading column. Prose is easier to follow when a line is not the width
   of a desk. */
.turn, .user-turn, .answer, .says, .composer-wrap.centered { max-width: 640px; margin-left: auto; margin-right: auto; }

/* -- corrections after seeing it rendered ------------------------------------
   The design system loads Newsreader as `ital@1` - italic only - so the serif
   is a display face, not a body one. Prose set in it comes out italic from top
   to bottom, which is hard to read for anything longer than a line. Paragraphs
   go back to the sans the scale specifies for body text; the serif stays where
   a single line wants some voice. */
.answer, .says, .step.assistant .body { font-family: var(--serif); }
.answer { font-size: 15.5px; line-height: 1.7; letter-spacing: -.003em; }
.says { font-size: 15.5px; line-height: 1.7; letter-spacing: -.003em; }
.answer h1, .answer h2, .answer h3 { font-family: var(--serif); letter-spacing: -.02em; }

/* Cards on the same paper as the page need their edge back: with the surface
   and the paper both white, a pane with no border simply disappears. */
.sidebar { background: var(--paper); border-right: 1px solid var(--hairline); }
.panel { background: var(--paper); border-left: 1px solid var(--hairline); }
.panel-tabs, .side-top, .topbar { border-bottom: 1px solid var(--hairline); }

/* The one accent, at full strength where it means "this is the action". */
.composer-bar .send { background: var(--signal); color: var(--ink-invert); }
.composer-bar .send:hover { background: var(--signal-ink); }
.composer-bar .send[disabled] { background: var(--surface-muted); color: var(--faint); }

/* -- failure, said once ------------------------------------------------------
   A failed step used to carry five red signals at once - the dot, the label,
   the tag, the mark on the result and a border down the output - and a run
   with three failures in it became a wall of red. One mark is enough to find
   it; the rest is ordinary text, because the output underneath is the part
   worth reading and red does not help anyone read it.

   A refusal gets no red at all. The policy engine saying no is the system
   working exactly as designed, and dressing it as a crash teaches people to
   ignore the colour that means something is actually wrong. */
.act.failed .dot { border-color: var(--danger); color: var(--danger); background: transparent; }
.act.denied .dot { border-color: var(--hairline-strong); color: var(--faint); background: transparent; }
.act.failed .act-head, .act.denied .act-head { color: var(--muted); }
.act.failed .act-head:hover, .act.denied .act-head:hover { color: var(--ink); }
.step.out.bad pre { border-left: 2px solid var(--hairline-strong); }
.step.out .line { color: var(--muted); }
.step.out.bad .line { color: var(--danger); }

/* The live line: what it is doing, and how long it has been doing it. */
.flow-live .what { color: var(--muted); }
.flow-live .elapsed { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: -.01em; }

/* -- polish ------------------------------------------------------------------
   Small things that only show at high resolution, where a half-pixel border
   and a well-kerned number are the difference between a screen that looks
   drawn and one that looks assembled. */

/* Hairlines that stay hairlines on a retina panel. */
@media (min-resolution: 2dppx) {
  .sidebar, .panel { border-width: 0.5px; }
  .panel-tabs, .side-top, .topbar, .changes-card, .act-body { border-bottom-width: 0.5px; }
  .flow-node, .changes-card, .act-body, .flow-detail { border-width: 0.5px; }
}

/* Numbers that do not jitter as they count: a clock, a diffstat and a duration
   all change digits in place, and proportional figures make the whole line
   shuffle sideways every second. */
.elapsed, .aside, .meta, .num-add, .num-del, .dfacts .v, .session-row .meta {
  font-variant-numeric: tabular-nums;
}

/* Headings sit tighter as they grow, the way the eye expects. */
.greeting h1 { letter-spacing: -.03em; }
.answer h1 { letter-spacing: -.025em; }
.answer h2 { letter-spacing: -.02em; }

/* Code keeps its ligatures off - `!=` and `->` should look like what they are
   in a diff, not like a single glyph nobody can search for. */
code, pre, .mono, .step.cmd code { font-variant-ligatures: none; }

/* A card lifts off warm paper rather than sitting on it. */
.changes-card, .flow-node, .flow-detail { box-shadow: var(--shadow-sm); }
.menu, .modal, .popover { box-shadow: var(--shadow-md); }

/* Selection in the product's own colour rather than the browser's blue. */
::selection { background: var(--selection); color: var(--ink); }

/* Newsreader is a variable face with an optical-size axis: left to follow
   the type size, it thickens at prose sizes instead of merely shrinking. */
.answer, .says, .step.assistant .body {
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: -.002em;
}
.answer h1, .answer h2, .answer h3, .greeting h1 {
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 1;
  font-weight: 600;
}

/* -- marks on the rail ------------------------------------------------------
   Each action is a mark drawn on the rail: a hairline ring on paper with the
   glyph of its kind - a book for a read, a sheet with a plus for a write, a
   pencil, a prompt, a camera, a flag for the finish - and a second, fainter
   ring a hair outside it, the way a seal or a coin is engraved. The halo of
   paper lifts the mark off the line. Under the pointer the ring darkens; the
   open one is struck in ink with the glyph in paper; a failure rings red; a
   refusal is dashed. A verdict is a lamp - filled, in its own colour, with
   the same fine ring - and its words are set in small capitals, as a
   heading is. The agent's prose stands on a rule thicker than the rail. */
.dot { width: 24px; height: 24px; border: 1px solid var(--ink-4); background: var(--paper); color: var(--ink-2);
       box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--line-2);
       transition: border-color .15s, color .15s, background-color .15s, box-shadow .15s; }
.dot .i { width: 13px; height: 13px; }
.act-head { padding-left: 36px; min-height: 32px; }
.act:hover .dot { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink-4); }
.act.open .dot { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink-4); }
.act.failed .dot { border-color: var(--danger); color: var(--danger); background: var(--paper); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--danger-soft); }
.act.denied .dot { border-style: dashed; border-color: var(--ink-4); color: var(--ink-4); background: var(--paper); }
.act-head .label { color: var(--ink-2); }
.act-head:hover .label { color: var(--ink); }
.checkline { color: var(--success); padding-left: 36px; }
.checkline.bad { color: var(--warning); }
.checkline .rule { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%;
                   background: currentColor; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px currentColor; }
.checkline .label { font-variant-caps: all-small-caps; font-weight: 500; letter-spacing: .06em; font-size: 14.5px; line-height: 1.2; }
.says { margin-left: 10px; padding-left: 24px; border-left: 2px solid var(--ink-4); }
.flow-live { padding-left: 36px; }

/* Small type carries the facts - what passed, what a step touched, how long it
   took - and was set too small to read comfortably beside prose at 16px. */
.checkline .aside, .act-head .aside { font-size: 12px; }
.act-head .tag { font-size: 11.5px; }
.act-head .label { font-size: 13.5px; }
.step.cmd code { font-size: 12.5px; }
.step.out pre { font-size: 12px; line-height: 1.6; }
.dfacts .k, .dfacts .v { font-size: 12.5px; }
.session-row .meta, .meta { font-size: 12px; }

/* Work in flight is a quiet pulse, and stopping it is a plain button. */
.pulse, .session-row .dot.running { background: var(--faint); }
.pulse { animation: pulse 2s ease-out infinite; }
.composer-bar .send.stop { background: var(--surface-muted); color: var(--ink); border: 1px solid var(--hairline-strong); }

/* A route on a server that is up, not yet tried: a ring, not a filled lamp,
   because "up" is known and "answers" is not. */
.lamp.ready { background: transparent; border: 1.5px solid var(--green); box-sizing: border-box; }
.flow-node .state { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.flow-node .state.auth { color: var(--warning, var(--ink-3)); }
.flow-node .state.bad { color: var(--red); }
.flow-help { max-width: 380px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.flow-help b { color: var(--ink); }
.flow-help .row { display: flex; align-items: center; gap: 9px; margin: 6px 0; }
.flow-help i { flex: none; display: inline-block; }
.flow-help .line { width: 22px; height: 0; border-top: 1.5px solid var(--ink-4); }
.flow-help .line.dotted { border-top-style: dashed; border-color: var(--line-2); }
.flow-help .line.live { border-top: 2px solid var(--green); }

/* -- Try: the product, in the frame a person would use it in ------------- */
.try-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.try-bar .kind { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--bg-3); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.try-bar .kind .lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.try-bar .kind .lamp.live { background: var(--green); }
.try-bar .url { flex: 1; min-width: 160px; border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; background: var(--bg-3); outline: none; font-size: 13px; font-family: var(--mono); }
.try-bar .url:focus { border-color: var(--ink-4); background: var(--bg); }
.try-bar .devices { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.try-bar .devices button { padding: 4px 8px; font-size: 12px; color: var(--ink-3); }
.try-bar .devices button.active { background: var(--bg-active); color: var(--ink); }
.try-stage { flex: 1; min-height: 0; position: relative; overflow: auto; background: var(--bg-2); display: flex; align-items: flex-start; justify-content: center; }
.try-stage.desktop { display: block; }
.try-stage.desktop iframe { width: 100%; height: 100%; border: none; background: var(--paper); display: block; }
.try-stage.framed { display: flex; align-items: flex-start; justify-content: center; padding: 22px 12px 8px;
  background: radial-gradient(120% 90% at 50% -10%, #fbf8f1 0%, #efe9dc 55%, #e3dccb 100%); }
.device-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.device-caption { font-size: 12px; color: var(--ink-4); letter-spacing: .01em; }
/* The phone: titanium rim, a black glass edge, the screen, the island. */
.device { position: relative; flex: none; transform-origin: top center; padding: 14px;
  background: linear-gradient(160deg, #4a4a4e 0%, #232326 35%, #2f2f33 70%, #1b1b1e 100%);
  box-shadow: 0 34px 70px rgba(40, 32, 14, .35), 0 8px 18px rgba(40, 32, 14, .18),
              inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 4px #0d0d0f; }
.device::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06) 100%); }
.device .screen { position: relative; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.device iframe { display: block; border: none; background: var(--paper); }
.device .island { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 126px; height: 37px; background: #000;
  border-radius: 20px; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 0 0 1px rgba(0,0,0,.6); }
.device .island.side { top: 50%; left: 15px; transform: translateY(-50%); width: 37px; height: 126px; }
.device .glare { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 44%); }
.device .side { position: absolute; width: 4px; background: linear-gradient(90deg, #3b3b3f, #1d1d20); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.device .side.action { left: -5px; top: 150px; height: 34px; }
.device .side.vol-up { left: -5px; top: 210px; height: 64px; }
.device .side.vol-down { left: -5px; top: 290px; height: 64px; }
.device .side.power { right: -5px; top: 240px; height: 100px; }
.device.landscape .side { display: none; }
.device.tablet { padding: 18px; background: linear-gradient(160deg, #d9d9dc 0%, #a9a9ae 40%, #c4c4c8 100%);
  box-shadow: 0 34px 70px rgba(40, 32, 14, .30), inset 0 0 0 1.5px rgba(255,255,255,.5), inset 0 0 0 5px #0d0d0f; }
.device.tablet .glare { background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%); }
.try-note { padding: 10px 14px; color: var(--ink-3); font-size: 12.5px; border-top: 1px solid var(--line); }
.try-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; text-align: center; color: var(--ink-2); max-width: 520px; margin: 0 auto; font-size: 14px; line-height: 1.55; }
.try-empty .ev { font-size: 12.5px; color: var(--ink-4); }
.try-term { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.try-term .entries { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); }
.try-term .entries .entry { display: flex; align-items: center; gap: 10px; }
.try-term .entries code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-3); padding: 2px 8px; border-radius: 6px; }
.try-term .entries .why { color: var(--ink-4); font-size: 12px; }
.try-term .out { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 12px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; background: var(--bg-2); }
.try-term .drew { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: center; }
.try-term .drew-title { width: 100%; font-size: 12px; color: var(--ink-4); }
.try-term .drew img { height: 120px; }
.try-term .drew img { height: 96px; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; background: var(--paper); }
.try-term .drew a { font-size: 12px; color: var(--ink-3); align-self: center; }
.pages-list { max-height: 60vh; overflow: auto; min-width: 260px; }
.pages-list .item .mark { margin-left: auto; font-size: 11px; font-family: var(--mono); color: var(--ink-4); }
.pages-list .item .mark.bad { color: var(--danger); }
.pages-list .item .mark.login { color: var(--ink-3); }
.tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-left: 2px; }

/* -- account: the meters, the team, the plans ----------------------------- */
.meter { margin: 12px 0 4px; }
.meter-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }
.meter-num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.meter-bar { height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 3px; background: var(--ink-3); transition: width .3s; }
.meter-fill.hot { background: var(--warning); }
.members { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.members th { text-align: left; font-weight: 500; color: var(--ink-4); font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.members td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.members select, .members input { border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 6px; background: var(--bg); font-size: 12.5px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.plan.current { border-color: var(--ink-3); }
.plan-name { font-weight: 600; }
.plan-price { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.plan-price span { font-family: var(--font); font-size: 12px; color: var(--ink-4); }
.plan-vs { font-size: 12px; color: var(--ink-4); min-height: 16px; }
.plan-vs s { color: var(--ink-3); }
.plan ul { margin: 4px 0 8px; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; flex: 1; }
.plan .btn { align-self: flex-start; }
.dialog pre { font-family: var(--mono); font-size: 16px; padding: 10px 14px; background: var(--bg-3); border-radius: 8px; }

/* A level in the picker: its name, and under it what it means. */
.popover .item.level { align-items: flex-start; padding-top: 7px; padding-bottom: 7px; }
.popover .item.level .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.popover .item.level .name { font-weight: 500; color: var(--ink); }
.popover .item.level .hint { font-size: 12px; color: var(--ink-4); white-space: normal; line-height: 1.35; max-width: 340px; text-align: left; }
.popover .item.level .name { text-align: left; }

/* -- the machine's screen ------------------------------------------------- */
.machine-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.machine-stage { flex: 1; min-height: 0; background: #141414; }
.machine-stage iframe { width: 100%; height: 100%; border: none; display: block; background: #141414; }

/* -- the front door -------------------------------------------------------- */
.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.signin-box { width: 100%; max-width: 380px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; background: var(--paper); }
.signin-box h1 { font-family: var(--serif); margin: 0 0 4px; }
.signin-box .lead { margin: 0 0 18px; color: var(--ink-3); }
.signin-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

/* ======================================================================
   The product's pages: Settings in tabs, Pricing, Usage. Built on the
   same tokens as everything else; Obsidian gives them their light.
   ====================================================================== */
/* the light and dark themes' "aurora" is ink: radium is only a switch that is on and the chosen model (the owner,
   2026-10-03); Obsidian keeps its own violet aurora (theme.css) */
:root { --aurora: var(--ink); --aurora-ink: var(--ink-invert); --aurora-glow: none; }
:root[data-theme="obsidian"] { --aurora-ink: #0b0c11; }
.aurora-text { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn.aurora { background: var(--aurora); color: var(--aurora-ink); border-color: transparent; font-weight: 600; }
.btn.aurora:hover { filter: brightness(1.06); }
[data-theme="obsidian"] .composer-bar .send { background: var(--aurora); color: #0b0c11; }
[data-theme="obsidian"] .popover { background: rgba(16, 18, 26, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--hairline-strong); }
[data-theme="obsidian"] .dialog { background: #10121a; border: 1px solid var(--hairline-strong); }
[data-theme="obsidian"] .composer { background: var(--surface); }
[data-theme="obsidian"] .sidebar { background: #0d0e14; }
[data-theme="obsidian"] .sel.level-mark .i, [data-theme="obsidian"] .composer-bar .sel:first-of-type .i { color: var(--signal-ink); }

/* -- settings: a rail of tabs and a column of rows ---------------------- */
.settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; max-width: 980px; margin: 0 auto; padding: 24px 28px 60px; }
.settings-rail { position: sticky; top: 12px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.settings-rail button { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--ink-2); text-align: left; font-size: 13.5px; }
.settings-rail button:hover { background: var(--bg-hover); color: var(--ink); }
.settings-rail button.on { background: var(--bg-active); color: var(--ink); font-weight: 500; }
.settings-rail .rail-sep { height: 1px; background: var(--line); margin: 8px 6px; }
.settings-body h1 { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -.01em; margin: 4px 0 2px; }
.settings-body .lead { color: var(--ink-3); margin: 0 0 18px; }
.sgroup { margin: 8px 0 26px; }
.sgroup h2 { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 4px; }
.srow { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.srow:first-of-type { border-top: none; }
.srow .text { flex: 1; min-width: 0; }
.srow .text b { display: block; font-weight: 500; }
.srow .text span { display: block; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.srow .ctl { flex: none; display: flex; align-items: center; gap: 8px; max-width: 60%; }
.srow .ctl input, .srow .ctl select, .srow .ctl textarea { border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 10px; background: var(--bg); min-width: 200px; font-size: 13.5px; }
.srow .ctl textarea { min-width: 280px; min-height: 84px; resize: vertical; font-family: var(--font); }
.srow .ctl .mono { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.srow.danger .text b { color: var(--danger); }
.toggle.lg { width: 40px; height: 22px; }
.toggle.lg::after { width: 18px; height: 18px; }
.toggle.lg.on::after { transform: translateX(18px); }
.toggle.on { background: var(--signal); }
.seg.icons button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; }
.avatar.big { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 17px; background: var(--aurora); color: var(--aurora-ink); }
.stable { width: 100%; border-collapse: collapse; font-size: 13px; }
.stable th { text-align: left; font-weight: 500; color: var(--ink-4); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.stable td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.stable .pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--signal-soft); color: var(--signal-ink); font-size: 11.5px; margin-left: 6px; }
.plan-hero { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); margin-bottom: 18px; }
.plan-hero .mark { width: 54px; height: 54px; border-radius: 16px; background: var(--aurora); display: grid; place-items: center; color: var(--aurora-ink); flex: none; }
.plan-hero .mark svg { width: 26px; height: 26px; }
.plan-hero .text { flex: 1; min-width: 0; }
.plan-hero .text b { font-family: var(--serif); font-size: 20px; font-weight: 500; display: block; }
.plan-hero .text span { color: var(--ink-3); font-size: 13px; display: block; }
.meter-pct { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
@media (max-width: 860px) {
  .settings { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .settings-rail { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 6px; }
  .settings-rail button { white-space: nowrap; }
  .settings-rail .rail-sep { display: none; }
  .srow { grid-template-columns: 1fr; }
  .srow .ctl { max-width: none; }
  .srow .ctl input, .srow .ctl select, .srow .ctl textarea { min-width: 0; width: 100%; }
}

/* -- pricing --------------------------------------------------------------- */
.pricing { max-width: 1080px; margin: 0 auto; padding: 36px 24px 70px; position: relative; }
.pricing::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 380px; background: var(--aurora-glow); pointer-events: none; }
.pricing > * { position: relative; }
.pricing-head { text-align: center; margin-bottom: 26px; }
.pricing-head h1 { font-family: var(--serif); font-size: clamp(30px, 5vw, 44px); font-weight: 500; letter-spacing: -.02em; margin: 0 0 8px; }
.pricing-head p { color: var(--ink-3); margin: 0 auto; max-width: 560px; font-size: 15px; }
.pricing-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 28px; }
.pricing-controls .seg button { padding: 8px 16px; font-size: 13.5px; }
.billing-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--ink-2); }
.billing-toggle .save { color: var(--signal-ink); font-weight: 500; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }
.plan-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.plan-card.featured { border-color: transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--aurora) border-box; box-shadow: var(--shadow-md); }
.plan-card .tag { position: absolute; top: -11px; left: 20px; padding: 2px 10px; border-radius: 999px; background: var(--aurora); color: var(--aurora-ink); font-size: 11.5px; font-weight: 600; }
.plan-card .name { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.plan-card .blurb { color: var(--ink-3); font-size: 13px; min-height: 36px; }
.plan-card .price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.plan-card .price b { font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.plan-card .price span { color: var(--ink-4); font-size: 12.5px; }
.plan-card .billed { color: var(--ink-4); font-size: 12px; min-height: 16px; }
.plan-card .vs { font-size: 12.5px; color: var(--ink-3); }
.plan-card .vs s { color: var(--ink-4); }
.plan-card ul { list-style: none; padding: 0; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ink-2); flex: 1; }
.plan-card li { display: flex; gap: 8px; align-items: flex-start; }
.plan-card li .i { color: var(--signal-ink); flex: none; margin-top: 3px; }
.plan-card li.soon { color: var(--ink-4); }
.plan-card .btn { width: 100%; justify-content: center; padding: 9px 12px; }
.seat-block { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-2); }
.seat-block .seat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.seat-block .seat b { font-size: 20px; }
.seat-block .seat .kind { font-weight: 500; min-width: 110px; }
.seat-block .seat span { color: var(--ink-4); font-size: 12px; }
.pricing-foot { text-align: center; color: var(--ink-4); font-size: 12.5px; margin-top: 26px; }

/* -- usage ----------------------------------------------------------------- */
.chart { width: 100%; height: 240px; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--ink-4); font-size: 11px; font-family: var(--mono); }
.chart .today { stroke: var(--ink-4); stroke-dasharray: 3 4; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-2); margin: 8px 0 4px; }
.legend i { display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.usage-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.usage-toolbar .grow { flex: 1; }

/* -- the front door, lit -------------------------------------------------- */
.signin { position: relative; overflow: hidden; }
.signin::before { content: ''; position: absolute; inset: -20% -10% auto; height: 70%; background: var(--aurora-glow); pointer-events: none; }
.signin-box { position: relative; }
.signin-box h1 { font-size: 30px; }
.signin-box .wordmark { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* the brand mark, as the tab and the app's own icon carry it (a plain tile stood here: a blank square on the front door) */
.signin-box .wordmark i, .front-brand i { width: 30px; height: 30px; border-radius: 9px; display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='64' y2='64' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231F9E8A'/%3E%3Cstop offset='.42' stop-color='%234C56D8'/%3E%3Cstop offset='.70' stop-color='%239B4FD0'/%3E%3Cstop offset='1' stop-color='%23D18A2C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='%23F4F1E9'/%3E%3Cg stroke='url(%23g)' stroke-width='3.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M12 14 C 30 17, 37 27, 50 32' opacity='.85'/%3E%3Cpath d='M12 23 C 30 25, 35 29, 50 32' opacity='.7'/%3E%3Cpath d='M12 32 L 50 32'/%3E%3Cpath d='M12 41 C 30 39, 35 35, 50 32' opacity='.7'/%3E%3Cpath d='M12 50 C 30 47, 37 37, 50 32' opacity='.85'/%3E%3C/g%3E%3Ccircle cx='50' cy='32' r='6' fill='%2315130E'/%3E%3C/svg%3E") center / cover no-repeat; }

/* -- preferences that reach the whole page -------------------------------- */
body.font-sans .says, body.font-sans .answer, body.font-sans .step.assistant .body { font-family: var(--sans); font-size: 14.5px; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { transition: none !important; animation: none !important; }
.srow .ctl input, .srow .ctl select, .srow .ctl textarea { max-width: 100%; }
.settings-body { min-width: 0; }
.plan-hero .text b { line-height: 1.2; }
.sso-row { margin: 4px 0 10px; }

/* -- alignment pass: rows are a grid, controls never squeeze the words ------ */
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 28px; }
.srow .text { min-width: 0; }
.srow .text b { line-height: 1.35; }
.srow .ctl { max-width: none; justify-content: flex-end; }
.srow .ctl input:not([type=number]), .srow .ctl select { min-width: 220px; width: 320px; max-width: 100%; }
.srow .ctl input[type=number] { min-width: 0; width: 96px; text-align: right; }
.srow .ctl textarea { min-width: 0; width: 360px; max-width: 100%; }
.srow .ctl > div { max-width: 100%; }
.srow .ctl .seg { flex: none; }
.srow .ctl .mono { white-space: nowrap; }
.meter-head { align-items: flex-start; gap: 16px; }
.meter-head > span:first-child { min-width: 0; }
.meter-pct { white-space: nowrap; flex: none; padding-top: 2px; }
.plan-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.plan-hero .text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-hero .text span { white-space: normal; }
.stable th, .stable td { white-space: nowrap; }
.stable td:first-child, .stable th:first-child { padding-left: 0; }
.stable td.wrap { white-space: normal; }
.stable input, .stable select { height: 30px; vertical-align: middle; }
.stable .btn.sm { height: 30px; vertical-align: middle; }
.members td:nth-child(3), .members td:nth-child(4) { width: 90px; }
.settings-body .sgroup h2 { margin-bottom: 2px; }
.usage-toolbar select { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; background: var(--bg); }
/* Rows answer to the pane they sit in, not the window: with the side
   panel open, a 1440px window leaves the settings column narrow. */
.page { container-type: inline-size; container-name: page; }
.settings-body { min-width: 0; }
.stable td:not(.wrap):not(.sub) { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.stable td.sub { white-space: normal; min-width: 180px; }
.stable td.mono { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.srow.tall { align-items: start; }
.srow.tall .text { padding-top: 8px; }
.srow .ctl.stack { flex-direction: column; align-items: stretch; width: 320px; max-width: 100%; }
.srow .ctl.stack input, .srow .ctl.stack select, .srow .ctl.stack textarea, .srow .ctl.stack .btn { width: 100%; }
@container page (max-width: 900px) {
  .settings { grid-template-columns: 1fr; gap: 12px; padding: 16px 20px 60px; }
  .settings-rail { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
  .settings-rail button { flex: none; }
  .settings-rail .rail-sep { display: none; }
}
@container page (max-width: 700px) {
  .srow { grid-template-columns: 1fr; row-gap: 10px; }
  .srow.tall .text { padding-top: 0; }
  .srow .ctl { justify-content: flex-start; }
  .srow .ctl input:not([type=number]), .srow .ctl select, .srow .ctl textarea, .srow .ctl.stack { width: 100%; }
  .plan-hero { grid-template-columns: auto minmax(0, 1fr); }
  .plan-hero > :last-child { grid-column: 1 / -1; justify-self: start; }
  .plan-hero .text b { white-space: normal; }
  .stable { display: block; overflow-x: auto; }
}

/* Pictures for the agent: a chip while composing, a thumbnail in the turn. */
.chip.shot { padding-left: 3px; font-family: var(--font); }
.chip.shot img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; border: 1px solid var(--line-2); }
.composer.drop { outline: 2px dashed var(--signal); outline-offset: -2px; }
.shots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.shots img { height: 88px; max-width: 200px; border-radius: 8px; border: 1px solid var(--line-2); object-fit: cover; cursor: zoom-in; background: var(--bg); }
.shots img:hover { border-color: var(--signal); }
.dialog .shot-full { max-width: min(90vw, 1400px); max-height: 85vh; display: block; border-radius: 8px; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll .stable { min-width: 100%; }
.settings-rail { scrollbar-width: none; }
@container page (max-width: 900px) { .settings-rail { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } }

/* The rail, second pass. One line, not two: the continuous hairline behind
   the marks is gone, and the agent's prose keeps its own light rule, which
   runs through the marks' centre line. Each mark is the small dark disc
   with its glyph and one fine ring; the second, larger ring outside it is
   gone. Refusals ring amber, failures red, verdict lamps glow in their own
   colour: the theme's green, amber and red, nothing hard-coded. */
.flow::before { content: none; }
.dot { border: 1px solid var(--ink-4); box-shadow: 0 0 0 3px var(--paper); }
.act:hover .dot { border-color: var(--ink-2); color: var(--ink); box-shadow: 0 0 0 3px var(--paper); }
.act.open .dot { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 0 0 3px var(--paper); }
.act.failed .dot { border-color: var(--danger); color: var(--danger); background: var(--paper); box-shadow: 0 0 0 3px var(--paper), 0 0 10px color-mix(in srgb, var(--danger) 35%, transparent); }
.act.failed .act-head .tag { color: var(--danger); }
.act.denied .dot { border-style: dashed; border-color: var(--warning); color: var(--warning); background: var(--paper); box-shadow: 0 0 0 3px var(--paper); }
.act.denied .act-head .tag.quiet { color: var(--warning); }
.checkline .rule { box-shadow: 0 0 0 3px var(--paper), 0 0 12px color-mix(in srgb, currentColor 45%, transparent); }
.checkline.bad .rule { box-shadow: 0 0 0 3px var(--paper), 0 0 12px color-mix(in srgb, var(--warning) 45%, transparent); }
.says { border-left: 2px solid var(--ink-4); }

/* The machine under a run, on the live line: quiet when fine, amber under
   pressure, red when it is starving (a command is being held or stopped). */
.flow-live .machine { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-4); white-space: nowrap; }
.flow-live .machine.high { color: var(--warning); }
.flow-live .machine.critical { color: var(--danger); }
.machine-stage.waiting { display: flex; align-items: center; justify-content: center; }
.machine-note { color: #9a9aa3; font-size: 13px; max-width: 440px; text-align: center; line-height: 1.55; padding: 20px; }
.machine-note.problem { color: #c9c9cf; }
.machine-note a { color: inherit; text-decoration: underline; cursor: pointer; margin-left: 8px; }

/* the model picker: tone.css (2026-10-01) */
.model-list { display: flex; flex-direction: column; gap: 2px; }
.model-line { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.model-line:last-child { border-bottom: 0; }
.model-line .grow { flex: 1; min-width: 0; }

/* A secret kept for the person (antelligen/strongbox.py): its card under the turn, and its name where a reply says it */
.secret-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 12px; margin: 8px 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); max-width: 640px; }
.secret-card .secret-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-3, rgba(127,127,127,.14)); color: var(--ink); }
.secret-card .secret-text { min-width: 0; }
.secret-card .secret-text b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secret-card .secret-text span { display: block; color: var(--ink-3, var(--muted)); font-size: 12.5px; }
.secret-card .secret-acts { display: flex; gap: 6px; }
.secret-card .secret-value { grid-column: 1 / -1; display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; word-break: break-all; white-space: pre-wrap; user-select: all; }
.secret-card .secret-value[hidden] { display: none; }
.secret-chip { display: inline-block; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-2); font-size: .92em; white-space: nowrap; }
.secret-chip::before { content: ""; display: inline-block; width: .62em; height: .5em; margin-right: 5px; border: 1.5px solid currentColor; border-radius: 2px; vertical-align: baseline; opacity: .7; }

/* The app on the person's cloud: one card above the Flow picture. */
.deploy-card { margin: 8px 14px 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); font-size: 12.5px; line-height: 1.45; }
.deploy-card .sub { color: var(--ink-3); margin-top: 2px; }
.deploy-card .sub.cloud-warn { color: var(--red); white-space: pre-wrap; }
.cloud-head { display: flex; align-items: center; gap: 8px; }
.cloud-head b { font-weight: 600; }
.cloud-addr { font-family: var(--mono); font-size: 12px; color: var(--ink-2); text-decoration: none; }
.cloud-addr:hover { color: var(--ink); text-decoration: underline; }
.cloud-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cloud-size { font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); }
.cloud-steps { margin-top: 8px; padding: 6px 8px; border-left: 2px solid var(--line-2); color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; }
.cloud-pop { min-width: 300px; }
.cloud-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.cloud-logs { max-width: 560px; max-height: 360px; overflow: auto; font-size: 11.5px; line-height: 1.4; white-space: pre-wrap; margin: 0; }
/* the live Logs pane: a header with a breathing dot while it builds or runs, then the log body */
.cloud-pop-logs { min-width: min(620px, 86vw); }
.cloud-pop-logs .cloud-logs { max-width: none; font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  background: var(--sunken, rgba(0,0,0,.18)); border-radius: 8px; padding: 10px 12px; }
.cloud-logs-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.cloud-logs-head b { font-size: 13px; }
.cloud-logs-head .grow { flex: 1; }
.log-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line, #6b6b6b); opacity: .4; }
.log-live-dot.on { background: var(--green); opacity: 1; animation: logpulse 1.4s ease-in-out infinite; }
@keyframes logpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(90,208,160,.5); } 50% { box-shadow: 0 0 0 4px rgba(90,208,160,0); } }
.btn.xs { font-size: 11px; padding: 2px 8px; }

/* -- Deploy: the app on the internet (the card above Flow's picture) -------------------------------------------------
   Set in the interface's own scale (type.css: 12 / 13 / 14 px, one 16 px title, 20 px figures; Geist, mono only for
   code and hashes), quiet fills instead of boxes in boxes, and room between the parts - so it reads as part of the app,
   not a dense panel beside it. Light and dark from the theme's tokens. */
.deploy-card.dc { margin: 12px 16px 10px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2);
  overflow: hidden; font-size: var(--t-md, 14px); line-height: 1.5; color: var(--ink-2); }
.dc-loading { display: flex; align-items: center; gap: 10px; padding: 18px 20px; color: var(--ink-3); font-size: var(--t-sm, 13px); }
.dc .spin { display: inline-block; flex: none; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--line-2); border-top-color: var(--ink); animation: spin .8s linear infinite; }

/* the head: name and state, then one quiet line - where it is, which version, how long ago */
.dc-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 16px; flex-wrap: wrap; }
.dc-title { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dc-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dc-name b { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 22px; padding: 0 10px 0 8px; border-radius: 999px;
  font-size: var(--t-xs, 12px); font-weight: 500; white-space: nowrap; color: var(--ink-3); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); flex: none; }
.dc-pill.s-live { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.dc-pill.s-live .dc-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.dc-pill.s-failed, .dc-pill.s-broken, .dc-pill.s-down { color: var(--red); background: color-mix(in srgb, var(--red) 11%, transparent); }
.dc-pill.s-failed .dc-dot, .dc-pill.s-broken .dc-dot, .dc-pill.s-down .dc-dot { background: var(--red); }
.dc-pill.s-building { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.dc-pill.s-building .dc-dot { background: var(--ink); animation: dcpulse 1.2s ease-in-out infinite; }
@keyframes dcpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.dc-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; font-size: var(--t-sm, 13px); color: var(--ink-3); }
.dc-sub a { color: var(--ink-2); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dc-sub a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.dc-sub .sep { color: var(--ink-4); }
.dc-sub .icon-btn { width: 22px; height: 22px; margin-left: -3px; color: var(--ink-4); }
.dc-sub .icon-btn:hover { color: var(--ink-2); }
.dc .hash { font-family: var(--mono); font-size: var(--t-xs, 12px); color: var(--ink-3); letter-spacing: 0; }
.dc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-actions .btn, .dc-why .btn { display: inline-flex; align-items: center; gap: 6px; }
.dc-actions a.btn, .dc a.btn { text-decoration: none; }
.dc-fold { color: var(--ink-4); }
.dc-fold .i { transition: transform .15s ease; }
.dc.folded .dc-fold .i { transform: rotate(-90deg); }

/* the tabs: the interface's row size, an ink underline, a quiet count */
.dc-tabs { display: flex; gap: 2px; padding: 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: auto; }
.dc-tab { appearance: none; background: none; border: 0; margin-bottom: -1px; padding: 10px 10px 9px; font: inherit; font-size: var(--t-md, 14px); font-weight: 500;
  color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dc-tab:hover { color: var(--ink); }
.dc-tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.dc-tab .n { font-size: var(--t-xs, 12px); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.dc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 18px; }
.dc-dim { color: var(--ink-4); font-size: var(--t-sm, 13px); }
.dc-sec { display: flex; flex-direction: column; gap: 12px; }
.dc-sec-h { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-sm, 13px); color: var(--ink-3); }
.dc-sec-h b { font-size: var(--t-md, 14px); font-weight: 600; color: var(--ink); }
.dc-sec-h .grow, .dc-logbar .grow { flex: 1; }

/* the six steps: a thin bar each, its name, what it took */
.dc-pipe { display: grid; grid-template-columns: repeat(6, minmax(76px, 1fr)); gap: 8px; overflow-x: auto; }
.dc-step { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dc-step .bar { display: block; height: 3px; border-radius: 3px; background: var(--line-2); }
.dc-step.done .bar { background: var(--green); }
.dc-step.fail .bar { background: var(--red); }
.dc-step.run .bar { position: relative; overflow: hidden; background: color-mix(in srgb, var(--ink) 28%, var(--line-2)); }
.dc-step.run .bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--ink), transparent); animation: dcrun 1.15s ease-in-out infinite; }
@keyframes dcrun { from { transform: translateX(-100%); } to { transform: translateX(240%); } }
.dc-step .lab { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm, 13px); font-weight: 500; color: var(--ink-4); white-space: nowrap; }
.dc-step .lab .i { width: 13px; height: 13px; flex: none; }
.dc-step .lab .o { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-2); box-sizing: border-box; flex: none; }
.dc-step.done .lab { color: var(--ink-2); } .dc-step.done .lab .i { color: var(--green); }
.dc-step.run .lab { color: var(--ink); }
.dc-step.fail .lab { color: var(--red); }
.dc-step .note { font-size: var(--t-xs, 12px); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }

/* why it failed: the cause in a sentence, the one line that matters, and what to do */
.dc-why { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--red) 7%, transparent); border: 1px solid color-mix(in srgb, var(--red) 22%, transparent); }
.dc-why .h { display: flex; align-items: center; gap: 8px; font-size: var(--t-md, 14px); font-weight: 600; color: var(--ink); }
.dc-why .h .i { color: var(--red); width: 15px; height: 15px; }
.dc-why .h .dc-dim { font-weight: 400; }
.dc-why .dc-hint { font-size: var(--t-md, 14px); line-height: 1.55; color: var(--ink-2); text-align: left; }
.dc-why pre { margin: 0; padding: 10px 12px; border-radius: 8px; border: 0; background: color-mix(in srgb, var(--ink) 5%, var(--bg));
  color: var(--red); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.dc-why .row { display: flex; gap: 8px; flex-wrap: wrap; }

/* a live app's numbers: soft fills, no borders, figures in tabular digits */
.dc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.dc-stat { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dc-stat .k { font-size: var(--t-xs, 12px); color: var(--ink-3); }
.dc-stat .v { margin-top: 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dc-stat .v.bad { color: var(--red); }
.dc-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: var(--t-sm, 13px);
  color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent); text-decoration: none; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-chip .i { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
a.dc-chip:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.dc-note { font-size: var(--t-sm, 13px); line-height: 1.55; color: var(--ink-3); }
.dc-note.warn { color: var(--amber); }
.dc-note.bad { color: var(--red); }

/* logs: a quiet code surface, numbered, the lines that matter coloured, a build tool's chatter faint */
.dc-logbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dc-seg button { appearance: none; border: 0; background: none; font: inherit; font-size: var(--t-sm, 13px); font-weight: 500; padding: 4px 12px; border-radius: 8px;
  color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.dc-seg button:hover { color: var(--ink); }
.dc-seg button.on { background: var(--bg-2); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.dc-find { flex: 1 1 150px; min-width: 120px; max-width: 280px; font: inherit; font-size: var(--t-sm, 13px); padding: 5px 10px; border-radius: 9px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink); }
.dc-find::placeholder { color: var(--ink-4); }
.dc-find:focus { outline: none; border-color: var(--ink-3); }
.btn.dc-tog.on { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--line-2); }
.dc-log-body { max-height: 52vh; min-height: 180px; overflow: auto; padding: 10px 0; border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 2.5%, var(--bg)); font-family: var(--mono); font-size: 12.5px; line-height: 1.65; }
.dc-ln { display: flex; gap: 14px; padding: 0 14px; }
.dc-ln:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dc-ln .n { flex: none; width: 34px; text-align: right; color: var(--ink-4); user-select: none; font-variant-numeric: tabular-nums; }
.dc-ln.tm .n { width: 62px; text-align: left; }
.dc-ln .t { flex: 1; min-width: 0; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.dc-ln.err { background: color-mix(in srgb, var(--red) 8%, transparent); } .dc-ln.err .t { color: var(--red); }
.dc-ln.warn .t { color: var(--amber); }
.dc-ln.step .t { color: var(--ink); font-weight: 600; }
.dc-ln.noise .t { color: var(--ink-4); }
.dc-ln.empty .t { color: var(--ink-4); padding: 10px 0; font-family: var(--sans); }
.dc-logfoot { display: flex; align-items: center; gap: 8px; color: var(--ink-4); font-size: var(--t-xs, 12px); margin-top: -8px; }

/* every version, newest first */
.dc-vers { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.dc-ver { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 12px 16px;
  border-top: 1px solid var(--line); cursor: pointer; font-size: var(--t-md, 14px); }
.dc-ver:first-child { border-top: 0; }
.dc-ver:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.dc-ver.sel { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.dc-ver .vn { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dc-ver .what { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-3); font-size: var(--t-sm, 13px); overflow: hidden; white-space: nowrap; }
.dc-ver .what span { overflow: hidden; text-overflow: ellipsis; }
.dc-ver .what .err { color: var(--red); }
.dc-ver .when { color: var(--ink-4); font-size: var(--t-sm, 13px); white-space: nowrap; }
.dc-ver .state { font-size: var(--t-xs, 12px); font-weight: 500; white-space: nowrap; text-transform: capitalize; color: var(--ink-3); }
.dc-ver .state.live { color: var(--green); } .dc-ver .state.failed { color: var(--red); } .dc-ver .state.building { color: var(--ink); }
.dc-vdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.dc-vdot.live { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.dc-vdot.failed { background: var(--red); } .dc-vdot.building { background: var(--ink); animation: dcpulse 1.2s ease-in-out infinite; }

/* settings, laid out rather than in a menu */
.dc-set { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.dc-set .cloud-line { padding: 11px 16px; border-top: 1px solid var(--line); font-size: var(--t-md, 14px); color: var(--ink-2); gap: 12px; }
.dc-set .cloud-line:first-child { border-top: 0; }
.dc-set .cloud-line .grow { flex: 1; }
.dc-set .cloud-line .sub { font-size: var(--t-sm, 13px); color: var(--ink-4); }
/* a monorepo's services: one row above the head, each a pill with a dot that says whether it is deployed */
.dc-svcs { display: flex; align-items: center; gap: 6px; padding: 12px 16px 0; overflow-x: auto; scrollbar-width: none; }
.dc-svcs::-webkit-scrollbar { display: none; }
.dc-svc { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 28px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-sm, 13px); cursor: pointer; }
.dc-svc:hover { color: var(--ink); border-color: var(--line-2); }
.dc-svc.on { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); border-color: var(--line-2); font-weight: 500; }
.dc-svc .k { color: var(--ink-4); font-size: var(--t-xs, 12px); font-weight: 400; }
.dc-svc-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.dc-svc-dot.on { background: var(--green); box-shadow: none; }
.dc.loading .dc-head, .dc.loading .dc-tabs, .dc.loading .dc-body { opacity: .45; transition: opacity .15s; pointer-events: none; }
/* what a first deploy starts with: data made before its first start */
.dc-with { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dc-with .l { font-size: var(--t-sm, 13px); color: var(--ink-3); margin-right: 4px; }
.dc-chip.tog { border: 1px solid transparent; font: inherit; font-size: var(--t-sm, 13px); cursor: pointer; }
.dc-chip.tog:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.dc-chip.tog.on { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); border-color: var(--line-2); }
.dc-chip.tog.on .i { color: var(--green); }
.dc-chip.tog:disabled { opacity: .45; cursor: not-allowed; }
/* the app's variables: names only, a Build switch on each */
.dc-vars { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.dc-set .dc-vars:first-child { border-top: 0; }
.dc-vars-h { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: var(--t-md, 14px); color: var(--ink-2); }
.dc-vars-h b { font-weight: 500; color: var(--ink-2); }
.dc-vars-h .grow, .dc-var .grow, .dc-vars-apply .grow { flex: 1; }
.dc-vars-none { padding: 0 16px 12px; font-size: var(--t-sm, 13px); color: var(--ink-4); }
.dc-var { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 16px; border-top: 1px dashed var(--line); }
.dc-var .nm { font-family: var(--mono); font-size: var(--t-sm, 13px); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dc-var .val { font-family: var(--mono); font-size: var(--t-xs, 12px); color: var(--ink-4); letter-spacing: .08em; }
.dc-var .btn.dc-tog { height: 24px; padding: 0 9px; font-size: var(--t-xs, 12px); }
.dc-var .btn.dc-tog .i { width: 12px; height: 12px; color: var(--green); }
.dc-var .btn.dc-tog:disabled { opacity: 1; cursor: default; }
.dc-vars-apply { display: flex; align-items: center; gap: 10px; margin: 4px 12px 12px; padding: 9px 10px 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: var(--t-sm, 13px); color: var(--ink-2); }
.dc-vars-apply .i { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.dc-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: var(--t-sm, 13px); color: var(--ink-2); cursor: pointer; }
.dc-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }

@media (max-width: 560px) {
  .dc-head { padding: 16px 16px 14px; } .dc-body { padding: 16px; }
  .dc-ver { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .dc-ver .when, .dc-ver .state { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dc .spin, .dc-step.run .bar::after, .dc-pill.s-building .dc-dot, .dc-vdot.building, .log-live-dot.on { animation: none; }
}

/* -- Storage: files, disks and databases that outlive everything (Settings › Storage) ------------------------------- */
.st-card { margin: 10px 0 14px; }
.st-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.st-fig .n { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.st-fig .l { font-size: 12px; opacity: 0.75; margin-top: 2px; }
.st-fig .s { font-size: 12px; opacity: 0.6; margin-top: 2px; }
.st-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.st-head h2 { margin: 0; }
.st-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.st-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); opacity: 0.9; }
.st-tag.good { background: rgba(95, 211, 154, 0.18); }
.st-tag.quiet { opacity: 0.7; }
.st-region { font-size: 12px; }
.st-progress:empty { display: none; }
.st-table td { vertical-align: middle; }
.st-timeline { margin: 10px 0 2px 6px; border-left: 2px solid color-mix(in srgb, currentColor 18%, transparent); padding-left: 14px; display: flex; flex-direction: column; gap: 10px; }
.st-point { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.st-dot { position: absolute; left: -20px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.st-point-text { flex: 1 1 260px; min-width: 200px; }
@media (max-width: 720px) { .st-point .st-btns { width: 100%; } }

/* -- the front door: the way in and nothing else on the page - the brand mark, a serif line, the doors, the
   fields. Quiet: paper, a soft radium glow above, one card. The same door stands over the app for everyone. ---- */
.front-body { margin: 0; background: var(--paper); }
.front { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 48px 20px 56px; box-sizing: border-box; background: var(--paper); color: var(--ink); overflow: hidden; }
.front::before { content: ''; position: absolute; left: 50%; top: -240px; width: 820px; height: 540px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; filter: blur(42px);
  background: radial-gradient(closest-side, rgba(255, 90, 217, .15), rgba(124, 108, 255, .09) 55%, transparent 100%); }
.front.app-door { position: fixed; inset: 0; z-index: 60; min-height: 0; overflow: auto; }
.front [hidden] { display: none !important; }
.front-box { position: relative; width: 100%; max-width: 400px; padding: 34px 32px 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); box-sizing: border-box; box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 30px 70px -40px rgba(20, 10, 40, .35); animation: front-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes front-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.front-box .btn, .front-box input { transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.front-box .btn:active { transform: translateY(1px); }
.front-brand { display: flex; justify-content: center; margin-bottom: 16px; }
.front-brand i { width: 40px; height: 40px; border-radius: 12px; display: inline-block; }
.front-title { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.15; letter-spacing: -.01em; text-align: center; margin: 0 0 6px; }
.front-lead { font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: center; margin: 0 0 22px; }
.front-box .doors-row { display: flex; flex-direction: column; gap: 8px; }
.front-box .doors-row .btn, .front-go { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0 14px; border-radius: 11px; font-size: 14px; font-weight: 500; box-sizing: border-box; }
.front-box .doors-row .btn.github-btn { background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); }
.front-box .doors-row .btn.github-btn:hover { background: var(--press); }
.front-go.primary { font-weight: 600; margin-top: 6px; }
.front-box .or { display: flex; align-items: center; gap: 10px; color: var(--ink-4); font-size: 12px; margin: 14px 0 12px; }
.front-box .or::before, .front-box .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.front-box .field { margin-bottom: 12px; }
.front-box .field label { font-size: 12.5px; color: var(--ink-3); }
.front-box .field input { height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 11px; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.front-box .field input:focus { border-color: var(--ink-4); box-shadow: 0 0 0 3px var(--signal-soft); }
.front-swap { display: block; width: 100%; margin-top: 14px; background: none; border: 0; color: var(--ink-3); font: inherit; font-size: 13px; cursor: pointer; text-align: center; }
.front-swap b { color: var(--ink); font-weight: 500; }
.front-note { color: var(--danger); font-size: 13px; text-align: center; margin: 10px 0 0; }
.front-note:empty { display: none; }
.front-ask { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--signal-soft); color: var(--ink); font-size: 13px; line-height: 1.4; margin-bottom: 16px; text-align: center; }
.front-foot { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12.5px; color: var(--ink-4); }
.front-foot a { color: inherit; text-decoration: none; }
.front-foot a:hover { color: var(--ink-3); }
.device-code { font-family: var(--mono); font-size: 32px; letter-spacing: .14em; font-weight: 500; padding: 12px 0 8px; color: var(--ink); text-align: center; }
.device-code.sm { display: inline-block; font-size: 17px; padding: 2px 0 0; letter-spacing: .1em; }
.app-code { margin-top: 14px; padding: 16px; border-radius: 12px; background: var(--press); text-align: center; }
.app-code .sub { margin: 0; }
.app-code .link { color: var(--signal-ink); font-size: 13px; }
.app-wait { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.app-wait::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--signal); animation: front-spin 1s linear infinite; }
@keyframes front-spin { to { transform: rotate(360deg); } }