/* Shmangus web. The same palette as the app (lib/theme.tsx) — this is the same
   product on a bigger screen, and it should read that way at a glance. */

/* `hidden` has to actually hide.
   The browser's own [hidden] { display: none } lives in the user-agent
   stylesheet, which ANY author rule with a display outranks. So .sidebar's
   `display: flex` quietly beat it: toggleMenu set hidden="true", the backdrop
   (which has no display rule of its own) vanished, and the sidebar stayed
   painted across the app with no way to shut it. Stated once here rather than
   remembered at every element that gets toggled.
   Same reason the workspace list under the profile name opened expanded when
   the code had built it collapsed. */
[hidden] { display: none !important; }

:root {
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --ink: #191813;
  --ink-muted: #6E6C63;
  --ink-faint: #A8A69C;
  --accent: #1F5B4E;
  --accent-soft: #E7EFEC;
  --danger: #B3402E;
  --success: #2E7D4F;
  --border: #E9E7E1;
  --bubble-user: #191813;
  --bubble-user-ink: #F7F6F3;
  /* The engine (themeEngine.mjs) paints every theme's values over these at
     runtime; what is written here is Classic, for a browser with nothing
     cached yet and for a page with no JS at all. */
  --accent-2: #C2661F;
  --glow: #6FB3A1;
  --gradient-a: #1F5B4E;
  --gradient-b: #3E8B78;
  --tint: rgba(31,91,78,0.12);
  --on-accent: #FFFFFF;
  --surface-solid: #FFFFFF;
  --bubble-agent: #FFFFFF;
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* ---- the overlay ladder ----
     Every layer that floats over the page is numbered here, once, in the
     order it stacks. It is written down because it was not: the sheet
     (.panel-card, 41) and the confirm dialog (.modal-backdrop, 40) were given
     neighbouring numbers by two people who never saw each other's, and since
     a dialog is almost always opened FROM a sheet, "Remove this task?" was
     painted behind the sheet that asked it. The screen dimmed, the dialog was
     invisible, and the next click landed on the sheet — the button did
     nothing, forever. A new overlay takes a name on this ladder rather than a
     number of its own. Above these sit the full-window layers, which are
     their own kind of thing and out of reach of a sheet: install bar 45,
     settings window / pickers 60, post overlay 70, call layer 90. */
  --z-panel-back: 40;   /* the dim behind a sheet */
  --z-panel: 41;        /* the sheet itself */
  --z-modal: 44;        /* a dialog — always over the sheet that opened it */
  --z-toast: 50;        /* says what happened; over everything it reports on */
}
[data-theme="dark"] {
  --bg: #141412;
  --surface: #1E1E1B;
  --raised: #252522;
  --ink: #F1F0EB;
  --ink-muted: #A5A399;
  --ink-faint: #6E6C63;
  --accent: #6FB3A1;
  --accent-soft: #22332F;
  --danger: #D96A56;
  --success: #5CB884;
  --border: #2C2C28;
  --bubble-user: #F1F0EB;
  --bubble-user-ink: #141412;
  --accent-2: #E0955A;
  --glow: #6FB3A1;
  --gradient-a: #6FB3A1;
  --gradient-b: #3E8B78;
  --tint: rgba(111,179,161,0.16);
  --on-accent: #111111;
  --surface-solid: #1E1E1B;
  --bubble-agent: #1E1E1B;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); }
a { color: var(--accent); }

/* ---- shell ---- */
#app { display: flex; height: 100vh; height: 100dvh; }
.sidebar {
  width: 220px; flex: none; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--surface); padding: 14px 10px;
  overflow-y: auto;
}
.wordmark { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; padding: 6px 12px 14px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 10px; color: var(--ink-muted);
  font-weight: 600; font-size: 14px; text-align: left;
}
.nav-item:hover { background: var(--bg); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-item .icon { width: 20px; text-align: center; font-size: 15px; }
.nav-item .badge {
  margin-left: auto; background: var(--accent); color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; padding: 1px 7px;
}
.sidebar .spacer { flex: 1; }
.sidebar .account { padding: 8px 12px; font-size: 12px; color: var(--ink-faint); white-space: normal; overflow-wrap: break-word; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.content { flex: 1; overflow-y: auto; padding: 22px clamp(14px, 4vw, 40px); }
.content > .inner { max-width: 860px; margin: 0 auto; }

/* ---- shared pieces ---- */
.page-title { font-size: 21px; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.3px; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
}
.row { display: flex; align-items: center; gap: 10px; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: 12.5px; }
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }

.btn {
  background: var(--ink); color: var(--bg); border-radius: 11px;
  padding: 9px 16px; font-weight: 700; font-size: 14px;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.soft { background: var(--accent-soft); color: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink-muted); border: 1px solid var(--border); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--border); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; border-radius: 9px; }

.input, textarea.input {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 9px 13px; outline: none;
}
.input:focus { border-color: var(--accent); }
textarea.input { resize: vertical; min-height: 70px; }

.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 7px 14px; border-radius: 10px; font-weight: 600; font-size: 13.5px;
  color: var(--ink-muted); background: var(--surface); border: 1px solid var(--border);
}
.tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.empty { text-align: center; color: var(--ink-faint); padding: 48px 0 32px; }
.spin {
  width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Thinking: the assistant's spinner lights up in the theme's glow, the way the
   phone's dots do — it is the one thing on the page that should look alive. */
.msg.assistant[data-thinking] .spin, .convo-line .spin {
  border-top-color: var(--glow);
  box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 40%, transparent);
}

#toast {
  /* Over the bar, never on it (21 Oct 2026 review): --bar-clear is the block at the foot — the row and the box. */
  position: fixed; bottom: calc(var(--bar-clear, 0px) + 12px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 12px;
  font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity 0.25s; z-index: var(--z-toast, 50); max-width: 90vw;
}
#toast.show { opacity: 1; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: var(--z-modal, 44);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal {
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
}
.modal h3 { font-size: 16px; margin-bottom: 12px; }
.modal .modal-body { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: -4px 0 4px; }
.modal .field { margin-bottom: 10px; }
.modal .field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-muted); margin-bottom: 4px; }

/* ---- chat ---- */
.chat-layout { display: flex; height: 100%; min-height: 0; }
.chat-list {
  width: 250px; flex: none; border-right: 1px solid var(--border);
  overflow-y: auto; padding: 10px;
}
.chat-list-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: 10px; margin-bottom: 2px;
}
.chat-list-item:hover { background: var(--bg); }
.chat-list-item.active { background: var(--accent-soft); }
.chat-list-item .t { font-weight: 600; font-size: 13.5px; white-space: normal; overflow-wrap: break-word; }
.chat-list-item .p { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 20px clamp(12px, 3vw, 32px); }
.chat-scroll .inner { max-width: 760px; margin: 0 auto; }
.msg { margin-bottom: 14px; }
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .bubble {
  background: var(--bubble-user); color: var(--bubble-user-ink);
  border-radius: 16px; border-bottom-right-radius: 5px; padding: 9px 14px; max-width: 85%;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.msg.assistant .md { max-width: 100%; }
.composer { border-top: 1px solid var(--border); padding: 12px clamp(12px, 3vw, 32px); }
.composer .inner { max-width: 760px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
.composer textarea {
  flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 10px 14px; outline: none; resize: none; max-height: 160px;
}
.composer textarea:focus { border-color: var(--accent); }

/* markdown */
.md p { margin: 0 0 8px; }
.md p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { margin: 12px 0 6px; line-height: 1.3; }
.md h1 { font-size: 19px; } .md h2 { font-size: 17px; } .md h3 { font-size: 15.5px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 22px; }
.md li { margin-bottom: 3px; }
.md code {
  background: var(--accent-soft); color: var(--accent); border-radius: 5px;
  padding: 1px 5px; font-family: ui-monospace, Menlo, monospace; font-size: 13px;
}
.md pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 13px; overflow-x: auto; margin: 0 0 8px;
}
.md pre code { background: none; color: var(--ink); padding: 0; }
.md table { border-collapse: collapse; margin: 0 0 8px; width: 100%; }
/* A wide table scrolls in its own box wherever words are drawn (a past chat, the AI page, the pull-up), its cells keeping their words whole. */
.md table { display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { overflow-wrap: normal; word-break: normal; min-width: 4.5em; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; font-size: 13.5px; }
.md th { background: var(--bg); }
.md blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: var(--ink-muted); margin: 0 0 8px; }
.md hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }

/* ---- lists ---- */
.rem {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 4px;
  border-bottom: 1px solid var(--border);
}
.rem:last-child { border-bottom: none; }
.rem .tick {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  border: 2px solid var(--ink-faint); border-radius: 50%;
}
.rem .tick:hover { border-color: var(--success); }
.rem .title { font-weight: 600; }
.rem .when { font-size: 12.5px; color: var(--ink-muted); }
.rem .when.overdue { color: var(--danger); font-weight: 700; }
.rem .when.out { color: var(--accent); }

/* calendar */
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-faint); margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day {
  min-height: 74px; border: 1px solid var(--border); border-radius: 9px;
  padding: 4px 6px; font-size: 12px; background: var(--surface); text-align: left;
}
.cal-day.other { opacity: 0.4; }
.cal-day.today { border-color: var(--accent); border-width: 2px; }
.cal-day .n { font-weight: 700; font-size: 11px; color: var(--ink-muted); }
.cal-day .ev {
  background: var(--accent-soft); color: var(--accent); border-radius: 5px;
  padding: 1px 5px; margin-top: 3px; font-size: 11px; font-weight: 600;
  white-space: normal; overflow-wrap: break-word;
}

/* spending */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.stat { flex: 1; min-width: 130px; }
.stat .v { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.stat .l { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.bar { height: 7px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-top: 5px; }
.bar > div { height: 100%; background: var(--accent); border-radius: 4px; }
.bar.over > div { background: var(--danger); }
.tx { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.tx:last-child { border-bottom: none; }
.tx .amt { font-weight: 700; white-space: nowrap; }
.tx .amt.reimb { color: var(--success); text-decoration: line-through; }

/* mail */
.mail-row { display: flex; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--border); align-items: baseline; cursor: pointer; }
.mail-row:last-child { border-bottom: none; }
.mail-row.unseen .from, .mail-row.unseen .subj { font-weight: 800; }
.mail-row .from { width: 180px; flex: none; overflow-wrap: break-word; }
.mail-row .subj { flex: 1; min-width: 0; overflow-wrap: break-word; }
.mail-body { white-space: pre-wrap; overflow-wrap: break-word; padding-top: 10px; }
.alias-badge { font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 2px 7px; }

/* drive */
.file-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.file-row:last-child { border-bottom: none; }

/* messages */
.thread-bubble { max-width: 75%; border-radius: 14px; padding: 8px 13px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); }
.thread-bubble.mine { margin-left: auto; background: var(--bubble-user); color: var(--bubble-user-ink); border: none; }

/* ---- swipe to reply ----
   The bubble follows the finger and the arrow behind it is uncovered by the
   drag; --swipe is the progress, set from JS, so both move as one gesture. */
.thread-bubble { position: relative; will-change: transform; }
.thread-bubble.swipeable::before {
  content: '↩';
  position: absolute; left: -28px; top: 50%; transform: translateY(-50%) scale(calc(0.7 + 0.3 * var(--swipe, 0)));
  width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 12px;
  opacity: var(--swipe, 0); pointer-events: none;
}
.thread-bubble.settling { transition: transform 180ms cubic-bezier(.2,.9,.3,1); }

/* ---- games ---- */
.thread-bubble.game { background: none; border: none; padding: 0; max-width: 88%; }
/* ---- games: one card, as wide as the conversation, one look for all of them ---- */
.thread-bubble.game { max-width: 100%; width: 100%; }
.game-card {
  container-type: inline-size; width: 100%; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.game-card.myturn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.game-head { display: flex; align-items: center; gap: 8px; }
.match-ico { display: inline-flex; flex: none; }
.match-ico svg { display: block; }
.game-title { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.2px; }
.game-last { margin-left: auto; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.game-end { margin-left: auto; display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border: 1px solid var(--border); background: none; color: var(--ink-muted); font-size: 12px; font-weight: 600; border-radius: 10px; cursor: pointer; }
.game-last + .game-end { margin-left: 0; }
/* Only where a pointer can hover: on a touch screen the red state stuck after a tap. */
@media (hover: hover) { .game-end:hover { color: var(--danger); border-color: var(--danger); } }
.game-players { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.game-vs { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.game-player { flex: 1 1 0; min-width: min-content; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; border: 1px solid transparent; }
.game-player.seat1 { flex-direction: row-reverse; text-align: right; }
.game-player.active { background: var(--accent-soft); border-color: var(--accent); }
.game-player.winner { background: color-mix(in srgb, #2E8B57 20%, var(--surface)); border-color: #2E8B57; }
.game-face { width: 30px; height: 30px; border-radius: 15px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--bg); color: var(--ink); border: 1px solid var(--border); }
.game-player.seat0 .game-face { background: #F5F1E8; color: #222; }
.game-player.seat1 .game-face { background: #2B2B2F; color: #fff; }
/* The seat colours of the games that are not black and white — the board's own disc colours. */
.game-card.g-connect4 .game-player.seat0 .game-face { background: #C0392B; color: #fff; }
.game-card.g-connect4 .game-player.seat1 .game-face { background: #E2A93B; color: #222; }
.game-card.g-checkers .game-player.seat0 .game-face { background: #B7261C; color: #FFE6E3; }
.game-card.g-checkers .game-player.seat1 .game-face { background: #17171C; color: #F3E5A3; }
/* Tic-tac-toe marks are a colour on a plain cell, so the face is a ring in the mark's colour, not a filled chip. */
.game-card.g-tictactoe .game-player .game-face { background: var(--bg); color: var(--ink); border-width: 2px; }
.game-card.g-tictactoe .game-player.seat0 .game-face { border-color: #C0392B; }
.game-card.g-tictactoe .game-player.seat1 .game-face { border-color: #2F6FBF; }
.game-who { min-width: 0; }
.game-pname { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
.game-under { font-size: 11.5px; color: var(--ink-muted); min-height: 14px; letter-spacing: 0.5px; }
.game-status { text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-muted); }
/* A narrow card (a 320px phone): the chips lose the "vs" and some padding, and nothing in them wraps. */
@container (max-width: 340px) {
  .game-vs { display: none; }
  /* Both chips share the row, neither below its own words: a long name wraps by word, and "Open seat" never shrinks to a letter a line. */
  .game-player { padding: 4px 6px; gap: 6px; flex: 1 1 0; min-width: min-content; }
  .game-face { width: 26px; height: 26px; }
}
.game-status.mine { color: var(--accent); }
.game-status.over { color: var(--ink); }
.game-again { align-self: center; border: none; border-radius: 14px; padding: 8px 18px; background: var(--accent); color: var(--bg); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.game-unknown { color: var(--ink-muted); font-size: 13px; padding: 6px 2px; }

/* tic-tac-toe */
.ttt { container-type: inline-size; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 320px); margin: 0 auto; }
.ttt-cell { aspect-ratio: 1; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); font-size: 16cqw; font-weight: 800; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ttt-cell.s0 { color: #C0392B; }
.ttt-cell.s1 { color: #2F6FBF; }
.ttt-cell:disabled { cursor: default; }
.ttt-cell:not(:disabled):hover { border-color: var(--accent); }
.ttt-cell.won { background: var(--accent-soft); border-color: var(--accent); }

/* connect 4 */
.c4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px; border-radius: 16px; background: #2F6FBF; width: min(100%, 520px); margin: 0 auto; box-sizing: border-box; overflow: hidden; /* a dropping disc starts above the frame, never over the chat */ }
.c4-col { display: flex; flex-direction: column; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; min-width: 0; }
.c4-col:disabled { cursor: default; }
.c4-col:not(:disabled):hover .c4-cell.hole { background: rgba(255, 255, 255, 0.55); }
.c4-cell { display: block; aspect-ratio: 1; width: 100%; border-radius: 50%; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); }
.c4-cell.hole { background: #1F4F8F; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45); }
.c4-cell.red { background: radial-gradient(circle at 35% 30%, #F07A6E, #C0392B 70%); }
.c4-cell.yellow { background: radial-gradient(circle at 35% 30%, #FFE28A, #E2A93B 70%); }
.c4-cell.last { outline: 2px solid #fff; outline-offset: -2px; }
.c4-cell.won { outline: 3px solid #fff; outline-offset: -3px; }

/* rock paper scissors */
.rps { display: flex; flex-direction: column; gap: 10px; }
.rps-score { display: flex; align-items: center; justify-content: space-between; font-size: 22px; font-weight: 800; color: var(--ink); padding: 0 18px; }
.rps-score span { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.rps-history { display: flex; gap: 12px; justify-content: center; font-size: 15px; color: var(--ink-muted); }
.rps-history .win { color: var(--success); }
.rps-history .loss { color: var(--danger); }
.rps-waiting { text-align: center; font-size: 13px; color: var(--ink-muted); padding: 4px 0; }
.rps-row { display: flex; gap: 10px; justify-content: center; }
.rps-btn { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.rps-btn:disabled { opacity: 0.5; cursor: default; }
.rps-btn:not(:disabled):hover { border-color: var(--accent); transform: translateY(-1px); }
.rps-face { font-size: 34px; }
.rps-label { font-size: 12px; font-weight: 600; color: var(--ink-muted); }

/* chess and checkers share the board */
.boardwrap { position: relative; }
.chess, .checkers {
  /* Never taller than the thread: the title row, the board and the status line fit a desktop window together. */
  container-type: inline-size; display: grid; grid-template-columns: repeat(8, 1fr); width: max(260px, min(100%, 520px, calc(100dvh - 340px))); margin: 0 auto; aspect-ratio: 1;
  border-radius: 10px; overflow: hidden; border: 3px solid #6B4B2A; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); box-sizing: border-box;
}
.sq { position: relative; border: none; padding: 0; margin: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; font: inherit; }
.sq.light { background: #F0D9B5; }
.sq.dark { background: #B58863; }
.sq:disabled { cursor: default; }
.sq.last { background: #CDD26A; }
.sq.dark.last { background: #AAA23A; }
.sq.picked { background: #F6F669; }
.sq.dark.picked { background: #BACA2B; }
.sq.check { background-image: radial-gradient(circle, #ff5a4d 0%, #ff5a4d 45%, transparent 75%); }
.sq.target::after { content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(20, 60, 20, 0.35); }
.sq.capture::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 0.55cqw solid rgba(180, 30, 30, 0.6); box-sizing: border-box; }
.sq.can .disc { box-shadow: 0 0 0 0.5cqw rgba(255, 255, 255, 0.85), 0 3px 6px rgba(0, 0, 0, 0.35); }
/* A piece is an SVG (chatGames.js pieceEl, the shapes in chessPieces.mjs): it fills 88% of its square. */
.sq:focus-visible, .ttt-cell:focus-visible, .pit:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.c4-col:focus-visible { outline: none; }
.c4-col:focus-visible .c4-cell { box-shadow: inset 0 0 0 3px var(--accent); }
.piece { width: 88%; height: 88%; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; }
.piece svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.piece.mini-piece { width: 16px; height: 16px; }
.captured { display: inline-flex; align-items: center; flex-wrap: wrap; vertical-align: middle; }
.piece.cap { width: 14px; height: 14px; display: inline-flex; margin-right: -2px; }
.piece.cap svg { filter: none; }
.coord { position: absolute; font-size: max(9px, 2.4cqw); font-weight: 700; color: rgba(0, 0, 0, 0.45); pointer-events: none; }
.coord.rank { left: 3%; top: 3%; }
.coord.file { right: 4%; bottom: 2%; }
.disc { width: 78%; height: 78%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 6cqw; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35); }
.disc.s0 { background: radial-gradient(circle at 35% 30%, #F07A6E, #B7261C 70%); color: #FFE6E3; }
.disc.s1 { background: radial-gradient(circle at 35% 30%, #5A5A66, #17171C 70%); color: #F3E5A3; }
.disc.king::after { content: ''; position: absolute; width: 50%; height: 50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); }
.promo { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 8px; font-size: 13px; color: var(--ink-muted); }
.promo-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.promo-btn .piece { width: 34px; height: 34px; }
.promo-btn.cancel { color: var(--ink-faint); font-size: 18px; }

/* mancala */
.mancala { display: flex; gap: 6px; padding: 8px; border-radius: 18px; background: linear-gradient(#8B5A2B, #6B4322); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35); width: 100%; box-sizing: border-box; }
.mancala .rows { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mancala .row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pit, .store { position: relative; border: none; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3E2A16, #2A1A0C 80%); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6); color: #F3E5C8; display: flex; align-items: center; justify-content: center; }
.pit { aspect-ratio: 1; cursor: default; padding: 0; }
.pit.can { cursor: pointer; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), 0 0 0 2px #F3D27A; }
.pit.can:hover { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), 0 0 0 3px #FFE9A6; }
.pit.sown { background: radial-gradient(circle at 50% 40%, #5A3D1F, #3A2410 80%); }
.pit.captured { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), 0 0 0 2px #E86A5E; }
.pit.from { opacity: 0.85; }
/* contain: size — the store's height comes from the pit rows beside it, never
   from the name written down its length, so a long name clips to the store
   instead of stretching the board (and the ellipsis has a length to work to). */
.store { width: 12%; min-width: 34px; border-radius: 22px; flex-direction: column; gap: 4px; contain: size; }
.store.mine { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(243, 210, 122, 0.5); }
/* Both names read the same way up — one used to run the other way. */
.store-who { font-size: 11px; color: #C9B48E; flex: 0 1 auto; min-height: 0; white-space: normal; padding: 0 3px; writing-mode: vertical-rl; transform: rotate(180deg); overflow-wrap: break-word; }
.pit-n { position: relative; z-index: 1; font-weight: 800; font-size: max(3.6cqw, 13px); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.store .pit-n { font-size: 20px; }
/* A phone-width card: slimmer stores and gaps give the six pits — the ones you tap — the room. */
@container (max-width: 380px) {
  .mancala { padding: 6px; gap: 4px; }
  .mancala .rows, .mancala .row { gap: 4px; }
  .store { width: 34px; min-width: 34px; border-radius: 17px; }
  .store .pit-n { font-size: 15px; }
}
/* Narrower still (320px): side stores would leave 25px pits, so they lie
   across the top and bottom instead — theirs above, yours below — and the
   pits hold only their count. */
.stones { position: absolute; inset: 14%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6%; opacity: 0.9; }
@container (max-width: 340px) {
  .mancala { flex-direction: column; }
  .store { width: auto; min-width: 0; height: 32px; flex-direction: row; border-radius: 16px; }
  .store-who { writing-mode: horizontal-tb; transform: none; }
  .store .pit-n { font-size: 16px; }
  .stones { display: none; }
}
.stone { display: block; width: 22%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.5); }
.stone.k0 { background: #D9C7A7; } .stone.k1 { background: #A8C3D6; } .stone.k2 { background: #C99A9A; }
.stone.k3 { background: #9FBF9A; } .stone.k4 { background: #E1D08A; } .stone.k5 { background: #BFA7D6; }

.plus-divider { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 10px 14px 4px; }

/* The drive's rules moved to drive.css; Study's paper photos still use this one. */
.photo-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

.btn.danger { color: var(--danger, #C43D3D); }

/* ---- app shortcuts ---- */
.shortcut-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.shortcut-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-name { flex: 1; font-weight: 600; font-size: 14px; color: var(--ink); }

/* auth */
.auth-wrap { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; background: var(--bg); }
/* Three soft shapes wander behind the card — the accent and a warm second —
   so the screen is alive before anything is typed. */
.auth-blob { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; will-change: transform; }
.auth-blob.a { width: 60vmax; height: 60vmax; left: -22vmax; top: -18vmax; background: var(--accent); opacity: .18; animation: auth-drift-a 18s ease-in-out infinite alternate; }
.auth-blob.b { width: 46vmax; height: 46vmax; right: -16vmax; top: 30%; background: #F59E3C; opacity: .14; animation: auth-drift-b 24s ease-in-out infinite alternate; }
.auth-blob.c { width: 52vmax; height: 52vmax; left: 8vw; bottom: -26vmax; background: var(--accent); opacity: .12; animation: auth-drift-c 30s ease-in-out infinite alternate; }
@keyframes auth-drift-a { to { transform: translate(6vmax, 8vmax) scale(1.15); } }
@keyframes auth-drift-b { to { transform: translate(-7vmax, 5vmax) scale(1.2); } }
@keyframes auth-drift-c { to { transform: translate(4vmax, -7vmax) scale(1.1); } }
.auth-card { position: relative; width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.auth-card > * { animation: auth-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.auth-card > :nth-child(2) { animation-delay: .08s; }
.auth-card > :nth-child(3) { animation-delay: .16s; }
.auth-card > :nth-child(4) { animation-delay: .24s; }
.auth-card > :nth-child(5) { animation-delay: .32s; }
@keyframes auth-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.auth-mark { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.auth-face { width: 76px; height: 76px; border-radius: 38px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; animation: auth-pop .7s cubic-bezier(.2,1.4,.3,1) both; }
.auth-face svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 28; }
.auth-pulse { position: absolute; width: 76px; height: 76px; border-radius: 38px; border: 2px solid var(--accent); animation: auth-pulse 2.4s ease-out infinite; }
@keyframes auth-pop { from { transform: scale(.4); } to { transform: none; } }
@keyframes auth-pulse { from { transform: scale(1); opacity: .45; } to { transform: scale(1.5); opacity: 0; } }
.auth-title { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 0; color: var(--ink); }
.auth-lead { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: 8px 6px 22px; }
.auth-form { width: 100%; padding: 12px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; text-align: left;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .1); border: 1px solid var(--border); }
.auth-form.rise { animation: auth-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.auth-form .field { margin: 0; }
.auth-input { width: 100%; font-size: 17px; padding: 13px 16px; border-radius: 14px; transition: border-color .18s ease, box-shadow .18s ease; }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.auth-code { text-align: center; letter-spacing: 10px; font-size: 24px; font-weight: 700; }
.auth-btn { width: 100%; margin: 0; padding: 14px; border-radius: 14px; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff; transition: transform .12s ease, filter .18s ease; }
.auth-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 40; }
.auth-btn:hover { filter: brightness(1.06); }
.auth-btn:active { transform: scale(.97); }
.auth-btn:disabled { opacity: .6; transform: none; }
.auth-status { min-height: 0; font-size: 13px; text-align: center; color: var(--ink-muted); }
/* The Terms box (app.js renderAuth): one line, the whole row a 44px target. */
.auth-agree { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px; border-radius: 12px; border: 1px solid transparent; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.auth-agree[hidden] { display: none; }
.auth-agree a { color: var(--accent); font-weight: 700; white-space: nowrap; }
.auth-agree-box { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.auth-agree.nudge { border-color: var(--danger); }
.auth-foot.warn { color: var(--danger); font-weight: 600; }
.auth-status:empty { display: none; }
.auth-status.err { color: var(--danger); }
.auth-foot { font-size: 13px; line-height: 18px; color: var(--ink-faint); margin-top: 16px; }
.auth-back { background: none; border: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .auth-blob, .auth-card > *, .auth-face, .auth-pulse, .auth-form.rise { animation: none; } }

/* ---- narrow screens: the sidebar becomes a top bar ---- */
@media (max-width: 720px) {
  #app { flex-direction: column; }
  .sidebar {
    width: 100%; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--border); padding: 8px 10px; gap: 2px;
  }
  .wordmark { display: none; }
  .sidebar .spacer, .sidebar .account { display: none; }
  .nav-item { width: auto; flex: none; padding: 7px 11px; }
  .nav-item .label { display: none; }
  .nav-item .icon { width: auto; font-size: 17px; }
  .chat-list { width: 100%; position: absolute; inset: 0; z-index: 10; background: var(--surface); display: none; }
  .chat-list.open { display: block; }
  .mail-row .from { width: 110px; }
}

/* ---- running from a home-screen icon ---- */
/* No browser chrome means the page owns the notch and the home indicator, and
   nothing should sit under either. */
@media (display-mode: standalone) {
  .sidebar { padding-top: calc(8px + env(safe-area-inset-top)); }
  #app { height: 100vh; height: 100dvh; }
  .main, .content { padding-bottom: env(safe-area-inset-bottom); }
  /* Rubber-band scrolling on iOS exposes the page background behind the app;
     matching it keeps a white flash from appearing above the top bar. */
  body { background: var(--surface); }
  /* A standalone window has no back button, so links must not open a chromeless
     dead end — they get the system browser instead. */
  a[target="_blank"] { -webkit-touch-callout: default; }
}

/* Touch targets on phones want more room than a mouse does. */
@media (max-width: 720px) {
  .nav-item { padding: 9px 13px; }
  .btn { padding: 11px 16px; }
  .tab { padding: 9px 14px; }
  .input { font-size: 16px; } /* under 16px iOS zooms the page on focus */
}

/* ---- messages ----
   The panes moved into the shell (shell.css, .msg-stack) when the web took on
   the app's screen stack. What is left here is the list pane itself, which
   fills whichever pane it is given — it used to be pinned to 230px for a
   layout that no longer exists, which left it a strip with a stray border
   down the middle of the column on anything wider than a phone. */
.msg-list-pane { width: 100%; }

/* ---- voice rooms ---- */
/* The call floats over the conversation rather than replacing it, so leaving a
   call does not lose your place in the thread you were reading. */
.call-layer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 10, 0.72);
  z-index: 90;
}
.call-layer.open { display: flex; }
.call-box {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #121214;
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  color: #fff;
}
.call-title { font-size: 21px; font-weight: 700; }
.call-sub { font-size: 13.5px; color: #9a9aa2; margin-top: 4px; }
.call-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}
.call-tile {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  background: #1d1d21;
}
.call-video { width: 100%; height: 100%; object-fit: cover; }
.call-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  font-weight: 700;
  color: #6e6e78;
}
.call-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}
.call-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.call-btn {
  min-width: 96px;
  padding: 11px 16px;
  border: 0;
  border-radius: 22px;
  background: #26262b;
  color: #e7e7ea;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.call-btn.on { background: #4a4a55; color: #fff; }
.call-btn.danger { background: #c4362f; color: #fff; }
.call-btn.accept { background: #2e9e5b; color: #fff; }
.call-btn[disabled] { opacity: 0.45; cursor: default; }
.call-error { color: #ff8a80; margin-bottom: 12px; font-size: 13.5px; }
.call-hint { color: #8a8a93; font-size: 12px; margin-top: 12px; }
/* The header button counts who is already in, so joining is an obvious move
   rather than something you have to guess at. */
.pill-btns button.in-call { color: var(--accent); }
.call-count { font-size: 12px; font-weight: 700; margin-left: 3px; }

/* ---- the + drawer ---- */
.plus-btn.open { color: var(--accent); }
/* The + and the × are the same cross, so the button rotates rather than
   swapping glyphs — the same control changing its mind. */
.plus-btn svg { transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.plus-btn.open svg { transform: rotate(135deg); }
.plus-host {
  border-top: 1px solid var(--border);
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface);
}
.plus-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 16px 8px;
}
.plus-tile {
  width: 86px;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  /* Tiles arrive one after another; the stagger is what makes the shelf feel
     like it opened rather than simply appeared. */
  animation: plus-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes plus-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .plus-tile { animation: none; }
  .plus-btn svg { transition: none; }
}
.plus-tile-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plus-tile-circle svg { width: 23px; height: 23px; stroke: #fff; fill: none; stroke-width: 34; }
.plus-tile-label { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }
.plus-sheet { display: flex; flex-direction: column; min-height: 240px; }
.plus-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 0; }
.plus-back {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  padding: 0 6px;
}
.plus-heading { font-size: 13px; font-weight: 600; color: var(--ink-faint); }
.plus-segment { display: flex; gap: 3px; background: var(--bg); border-radius: 10px; padding: 3px; flex: 1; }
.plus-segment button {
  flex: 1;
  border: 0;
  background: none;
  padding: 7px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-faint);
  cursor: pointer;
}
.plus-segment button.on { background: var(--surface-raised); color: var(--ink); }
.plus-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.plus-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: none;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.plus-row:hover { background: var(--bg); }
.plus-row-ico { font-size: 22px; }
.plus-row-label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.plus-row-hint { font-size: 12px; color: var(--ink-faint); }
.gif-note { text-align: center; color: var(--ink-faint); font-size: 13.5px; padding: 22px 28px; line-height: 1.5; }
/* contain, not cover: a cut-out sticker is mostly transparent, and cropping it
   would cut the subject in half. */
.sticker-bubble { width: 168px; height: 168px; object-fit: contain; display: block; }
.gif-bubble { max-width: 220px; border-radius: 12px; display: block; }
/* A thread background is painted on the scroller; bubbles keep their own
   surface so text contrast is unchanged by whatever was picked. */
.thread-bubbles.has-bg { background-attachment: local; }

/* ---- billing ---- */
.bill-hero { text-align: center; padding: 28px 16px 20px; }
.bill-balance { font-size: 44px; font-weight: 650; letter-spacing: -0.02em; }
.bill-caption { color: var(--ink-muted); font-size: 13px; margin-top: 4px; }
.bill-caption.dim { color: var(--ink-faint); font-size: 12px; }
.bill-warn { margin-top: 10px; font-size: 13px; color: var(--warn, #b45309); }
.bill-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.bill-preset {
  flex: 1 1 70px; padding: 12px 8px; border-radius: 10px; font-size: 15px; font-weight: 600;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink); cursor: pointer;
}
.bill-preset:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bill-preset:disabled { opacity: 0.5; cursor: default; }
.bill-note { color: var(--ink-faint); font-size: 12px; margin: 4px 0 8px; }
.bill-table {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel);
}
.bill-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.bill-row:last-child { border-bottom: none; }
.bill-row-label { font-size: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bill-row-sub { color: var(--ink-faint); font-size: 12px; }
.bill-row-value { font-variant-numeric: tabular-nums; color: var(--ink-muted); font-size: 14px; }
.bill-row-value.credit { color: var(--good, #15803d); }
.bill-indent { padding-left: 12px; color: var(--ink-muted); }
.bill-action {
  width: 100%; padding: 12px; border: none; background: none; color: var(--accent);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.bill-action:disabled { opacity: 0.5; cursor: default; }
/* A text button in a table row: the accent (the danger red to undo), never
   squeezed onto two lines by the label beside it, with room for a thumb. */
.linkish {
  flex: none; white-space: nowrap; padding: 8px 4px; margin: -8px -4px;
  border: none; background: none; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer;
}
.linkish.danger { color: var(--danger); }
.linkish:disabled { opacity: 0.5; cursor: default; }
.bill-row-label { flex: 1; }
/* An invite code is read aloud and typed on a phone: wide letters, no
   ambiguity between shapes, and a tap target that says "copy me". */
.linkish.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 2px; font-weight: 600;
}

/* ---- funding (pages/funding.js; the phone's FundingPage.tsx) ---- */
/* The button under the wordmark: small, quiet, one line — a label, the bar,
   the percent. It says the app is paid for by people without asking. */
/* On the main page it sits ABOVE the wordmark as a slim line, and the pair
   is exactly as tall as the wordmark was alone (16 + 38 = the old 54px box),
   so the day under them starts where it always did. The gap the column puts
   between its children is taken back from under the pill. */
.chat-home .fund-pill {
  align-self: center; height: 16px; min-height: 0; margin-bottom: -14px; padding: 0 6px;
  border: none; background: none; font-size: 11.5px; gap: 6px; color: var(--ink-muted);
  position: relative;
}
/* A 16px line is a small thing to hit: the tap area reaches past it without
   moving anything. */
.chat-home .fund-pill::before { content: ''; position: absolute; inset: -12px -8px -6px; }
.chat-home .fund-pill .fund-pill-bar { width: 44px; }
.chat-home .fund-pill .fund-bar { height: 4px; }
.chat-home .fund-pill .fund-pill-pct { font-size: 11.5px; min-width: 0; color: var(--ink); }
.chat-home .fund-pill + .chat-wordmark { line-height: 38px; }
.fund-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.fund-pill:hover { border-color: var(--accent); color: var(--ink); }
.fund-pill-bar { width: 64px; display: block; }
.fund-pill-pct { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 28px; text-align: right; }
.fund-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.fund-bar.big { height: 10px; border-radius: 5px; margin: 14px auto 10px; max-width: 360px; }
.fund-bar-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.4s ease-out; }
.screen-scroll > .inner.fund-page { max-width: 640px; margin: 0 auto; padding-top: calc(52px + env(safe-area-inset-top)); }
.fund-hero { text-align: center; padding: 4px 16px 8px; }
.fund-title { color: var(--ink-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.fund-hero-pct { font-size: clamp(32px, 11vw, 44px); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fund-lead { color: var(--ink-muted); font-size: 14px; line-height: 1.45; text-align: center; margin: 6px auto 4px; max-width: 420px; }
.bill-preset.on { border-color: var(--accent); color: var(--accent); opacity: 1; }
.fund-board .bill-row { justify-content: flex-start; }
.fund-rank { width: 22px; flex: none; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-weight: 600; }
.fund-name { flex: 1; overflow-wrap: anywhere; }
.fund-me { margin-top: 10px; }
.fund-name-input { flex: 1; min-width: 0; }
/* ---- expenses (pages/expenses.js): the owner's ledger, in Funding's clothes ---- */
.exp-form .bill-row { gap: 8px; }
.exp-form .input { min-width: 0; }
.exp-what, .exp-note { flex: 1 1 0; }
.exp-amount { flex: 0 0 104px; }
.exp-date { flex: 0 0 148px; }
/* The native date box draws its calendar icon for the page's scheme. */
[data-theme="dark"] .exp-date { color-scheme: dark; }
.exp-month { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 24px 0 8px; }
.exp-month-total { font-variant-numeric: tabular-nums; color: var(--ink-muted); font-weight: 600; }
.exp-foot { margin-top: 18px; }
.exp-foot .linkish { margin: -10px -6px; padding: 10px 6px; font-size: 12px; }
/* A pasted invoice URL has no spaces: it wraps rather than running under the amount. */
.exp-table .bill-row-label { overflow-wrap: anywhere; }
/* The amount and its Remove stack in one column, so every amount lines up. */
.exp-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.exp-right .linkish { margin: -4px -4px; padding: 4px 4px; font-size: 12.5px; }
.exp-warn { margin-top: 10px; font-size: 13px; color: var(--danger); }
.bill-row-sub a { color: var(--accent); }

/* ---- files, mentions, the paperclip ---- */
.file-card {
  display: flex; align-items: center; gap: 10px; max-width: 260px;
  padding: 8px 10px; border-radius: 12px; margin-bottom: 4px;
  background: var(--accent-soft); color: inherit; text-decoration: none;
}
.thread-bubble.mine .file-card { background: rgba(255, 255, 255, 0.14); }
.file-ico { display: flex; flex: none; }
.file-ico svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 28; }
.file-body { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.file-body b { white-space: normal; overflow-wrap: break-word; }
.mention { color: var(--accent); font-weight: 700; }
.thread-bubble.mine .mention { color: inherit; }
/* Called by name: a stripe, so a mention stands out in a busy group. */
.thread-bubble.mentioned { border-left: 3px solid var(--accent); background: var(--accent-soft); }
.mention-strip {
  display: flex; gap: 6px; overflow-x: auto; flex: none;
  margin: 6px 16px 0; padding: 0 2px; scrollbar-width: none;
}
.mention-strip::-webkit-scrollbar { display: none; }
.mention-chip {
  display: flex; align-items: center; gap: 6px; flex: none;
  border: 1px solid var(--border); background: var(--raised); color: var(--ink);
  border-radius: 16px; padding: 3px 10px 3px 4px; font-size: 13px; cursor: pointer;
}
.mention-chip .run-avatar { width: 22px; height: 22px; border-radius: 11px; margin: 0; font-size: 10px; }
.mention-chip .faint { font-size: 12px; }
/* What each link in a call is doing, in words. */
.call-lines { margin: -8px 0 12px; display: flex; flex-direction: column; gap: 3px; }
.call-line { font-size: 12px; color: #9a9aa2; }
.call-line.connected { color: #7fd39a; }
.call-line.failed { color: #ff8a80; }
.call-camera-error { color: #ffb86b; }
/* The clip is not a cross; it does not turn into one when its sheet is open. */
.attach-btn.open svg { transform: none; }

/* ---- ShmangNav ---- */
/* ---- ShmangNav (pages/nav.js; the app's is components/pages/NavPage.tsx) ----
   The map fills the page. Along its top, under the rail: the map's credit,
   one line, then the ways to travel on the left and the assistant's pill on
   the right. Over its foot: one sheet, and the whole of it drags.

   The sheet is a box of one fixed height, pushed down by a transform that
   nav.js writes in px (--sy). Where it may rest is arithmetic in
   sheetSnap.mjs, the same functions the app uses, fed with heights measured
   here: the head, the first block under it, everything else. So a row that
   grows a line moves the stop with it, and no number in this file has to
   agree with one in that one.

   Sizes, weights and colours are the app's drawn screen. Every colour is a
   theme variable; the two that are not are data: the blue of "you", which is
   the map's own, and the amber a warning is tinted with. */
.nav-shell {
  position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--bg);
  --nav-rail: calc(51px + env(safe-area-inset-top));   /* under the shell's rail: a sheet being typed in starts here */
  --nav-credit: calc(51px + env(safe-area-inset-top)); /* the map's credit: one 14px line under the rail, over the row (the map draws it, told creditTop) */
  --nav-top: calc(122px + env(safe-area-inset-top));   /* under the row of ways: a full sheet and the map's own top chrome start here */
  --nav-row: calc(70px + env(safe-area-inset-top));    /* the row of ways itself: the bar, the map's type and Locate after it; in GO the banner and the back button */
  --nav-seg: 44px;                                       /* one segment of the bar, as the row leaves it (nav.js layoutRow, navFormat navRowFit) */
  --nav-me: #2F6BFF;
  --nav-amber: #F59E3C;
  --nav-float: 0 2px 6px rgba(0, 0, 0, .14);
  --nav-lift: 0 -6px 16px rgba(0, 0, 0, .14);
}
[data-theme="dark"] .nav-shell { --nav-float: 0 2px 6px rgba(0, 0, 0, .4); --nav-lift: 0 -6px 16px rgba(0, 0, 0, .4); }
/* The rail is put away on a very short screen while the sheet is the list. */
body.nav-short .nav-shell { --nav-rail: calc(8px + env(safe-area-inset-top)); }
/* Three rulers. A variable holding calc(… env()) cannot be read back as a
   number, so nav.js reads where these sit instead. */
.nav-probe { position: absolute; left: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; }
.nav-probe.rail { top: var(--nav-rail); }
.nav-probe.top { top: var(--nav-top); }
.nav-probe.credit { top: var(--nav-credit); }
.nav-probe.row { top: var(--nav-row); }
.nav-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--accent-soft); }

/* ---- the top row: the ways to travel, and Times ---- */
/* Six segments (the five ways, a hairline, Times — the schedules), as wide as
   the row leaves them (--nav-seg: 42 to 52, nav.js layoutRow), and the map's
   own type and Locate right after the bar, in the same row (13 Oct 2026, the
   user: "compact everything so all those buttons are just in a row on the top
   next to the transportation method buttons … they are too compact and some
   truncation"). A sticker (the Shmangus feel): a 1px border, a lip under it,
   2px of padding. 5px under the map's credit line (--nav-credit and its 14). */
.nav-modebar {
  position: absolute; z-index: 3; top: var(--nav-row); left: calc(8px + env(safe-area-inset-left));
  display: flex; align-items: flex-start; box-sizing: border-box; width: calc(6 * var(--nav-seg) + 6px); height: 44px; padding: 0 3px;
}
.nav-modebar[hidden] { display: none; }
.nav-modes { position: relative; display: flex; }
/* Times follows the ways at the same gap: the spacing is one rule (14 Oct 2026). */
.nav-mode-gap { display: none; }
/* Each way a key of its own on its lip (14 Oct 2026, the user: "the icons and
   just the spacing does not feel consistent with the rest of shmangus app and
   make more colorful"): the segment less 2px each side, so the five and Times
   stand the same 4px apart; in its own colour (--way, set from navFormat
   WAY_COLOR by nav.js) — a soft tint of it while not picked, its icon in it —
   and filled with it once it is, icon and time white (--way-ink). The phone's
   components/nav/ModeBar.tsx draws the same. */
.nav-mode {
  box-sizing: border-box; width: calc(var(--nav-seg) - 4px); height: 44px; margin: 0 2px; padding: 0; cursor: pointer; font: inherit;
  border: 1px solid color-mix(in srgb, var(--way, var(--ink-faint)) 45%, var(--surface-solid, var(--surface))); border-bottom-width: 4px; border-radius: 13px;
  background: color-mix(in srgb, var(--way, var(--surface-solid, var(--surface))) 13%, var(--surface-solid, var(--surface)));
  color: color-mix(in srgb, var(--way, var(--ink)) 82%, var(--ink)); box-shadow: var(--nav-float);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: background-color .15s cubic-bezier(.25, .46, .45, .94), border-color .15s ease, color .15s ease;
}
.nav-mode:active { translate: 0 2px; }
.nav-mode[aria-checked="true"] { background: var(--way); border-color: var(--way); border-bottom-color: color-mix(in srgb, var(--way) 68%, black); color: var(--way-ink); }
.nav-mode[aria-checked="true"] .nav-mode-t { color: var(--way-ink); font-weight: 800; }
.nav-mode[aria-checked="true"] svg { stroke-width: 36; }
/* Times is not a way: the page's ink, filled while the schedules are up. */
.nav-mode-times { border-color: var(--border); background: var(--surface-solid, var(--surface)); color: var(--ink); }
.nav-mode-times.on { background: var(--ink); border-color: var(--ink); border-bottom-color: color-mix(in srgb, var(--ink) 68%, black); color: var(--bg); }
.nav-mode-times.on .nav-mode-t { color: var(--bg); font-weight: 800; }
.nav-mode svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 30; }
.nav-mode-t { font-size: 11px; line-height: 12px; font-weight: 700; letter-spacing: -.15px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
/* A time under an icon ("26 min", "1h 05") is a few letters longer than a name: set a little tighter, never cut. */
.nav-mode-t.timed { font-size: 10.5px; letter-spacing: -.4px; }
.nav-mode[aria-disabled="true"] { opacity: .38; }
/* A narrow row (under 44 a segment, nav.js layoutRow): 1px of room each side and the words a size down, so no name is cut. */
.nav-modebar.narrow .nav-mode { width: calc(var(--nav-seg) - 2px); margin: 0 1px; }
.nav-modebar.narrow .nav-mode-t, .nav-modebar.narrow .nav-mode-t.timed { font-size: 10px; letter-spacing: -.35px; }
/* GO's way back to the map: a sticker at the top left where the bar stands the rest of the time; the banner starts past it. */
.nav-goback {
  position: absolute; z-index: 3; top: var(--nav-row); left: calc(8px + env(safe-area-inset-left)); box-sizing: border-box; width: 44px; height: 44px; padding: 0 2px 2px 0;
  border-radius: 15px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); color: var(--ink);
  box-shadow: var(--nav-float); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s ease, border-bottom-width .12s ease;
}
.nav-goback[hidden] { display: none; }
.nav-goback:active { transform: translateY(2px); border-bottom-width: 2px; }
.nav-goback svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }
/* The picked way pops on a spring and its icon makes its little move (nav.js lightMode, WAY_MOTION). */

/* One line the map, or a press on it, has to say: why a way is not offered,
   that a place was saved, a remove with its Undo. Under the map's own Route
   pill. It never moves the sheet, and it is over it: with the sheet all the
   way up there is nowhere else to say that a place was removed. */
.nav-note {
  position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); top: calc(var(--nav-top) + 40px);
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: max-content; max-width: calc(100% - 124px); padding: 8px 14px; border-radius: 17px;
  background: var(--ink); color: var(--bg); font-size: 13px; line-height: 17px; font-weight: 600; box-shadow: var(--nav-float);
  animation: nav-fade .15s ease both;
}
.nav-note[hidden] { display: none; }
/* The sheet is all the way up and its head is where the note would be: it is
   said at the foot of the page instead (nav.js writes how far up). */
.nav-note.low { top: auto; }
/* Following, the note is at the strip with the whole width to say a late train and the new time in: never cut short. */
body .nav-note.low { max-width: calc(100% - 28px); }
body .nav-note.low .nav-note-text { -webkit-line-clamp: 3; }
.nav-note-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.nav-note-act { flex: none; position: relative; border: 0; background: none; padding: 0; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Undo is easy to hit: 44px of it whatever the note's own height (21 Oct 2026). */
.nav-note-act::before { content: ''; position: absolute; left: -10px; right: -10px; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%); }

/* "Skip": over the foot of the map while GO is flying the route and flying
   back to where you are. Straight to the clock. Gone once the clock starts. */
.nav-skip {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; z-index: 4;      /* centred without a transform: its arrival animates one */
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 16px; border-radius: 18px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--border); font: inherit; font-size: 14px; font-weight: 700;
  box-shadow: var(--nav-float); cursor: pointer; animation: nav-face-in .26s cubic-bezier(.2,.7,.2,1) both;
}
.nav-skip[hidden] { display: none; }
.nav-skip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 44; }
.nav-skip:hover { border-color: var(--accent); color: var(--accent); }

/* A minimized trip (7 Oct 2026, the user: "should be able to minimize and
   then there is a pop up that looks cool and says info on the current trip"):
   its pill rides the sheet's top edge over the map — pushed down by the same
   --sy as the sheet, which nav.js writes on both — in the page's ink, as GO
   and Stop are. A press is the trip again; the × asks before it ends it. The
   phone's is components/nav/TripPill.tsx. */
.nav-mini {
  position: absolute; z-index: 4; left: 8px; right: 8px; top: var(--nav-rail); margin: 0 auto; max-width: 504px;
  display: flex; align-items: stretch; min-height: 72px; border-radius: 22px;
  background: var(--ink); color: var(--bg); box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transform: translateY(calc(var(--sy, 100vh) - 100% - 12px));
  transition: transform .34s cubic-bezier(.2,.8,.2,1); will-change: transform;
  animation: nav-mini-in .22s ease both;
}
.nav-mini[hidden] { display: none; }
.nav-mini.sizing, .nav-shell:has(.nav-sheet.dragging) .nav-mini { transition: none; }
@keyframes nav-mini-in { from { opacity: 0; } }
.nav-mini-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; padding: 11px 0 10px 14px;
  border: 0; border-radius: 22px 0 0 22px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.nav-mini-top { display: flex; align-items: center; gap: 7px; height: 22px; min-width: 0; }
/* Theme colours on the pill's ground (the ink) are taken part of the way to
   the pill's words (the page's ground): lighter on a dark pill, darker on a
   light one — the phone's TripPill onPill. */
.nav-mini { --mini-early: color-mix(in srgb, var(--success, var(--accent)) 55%, var(--bg)); --mini-late: color-mix(in srgb, var(--danger) 55%, var(--bg)); }
.nav-mini-live { flex: none; position: relative; width: 8px; height: 8px; margin: 0 1px; border-radius: 50%; background: var(--success, var(--accent)); }
.nav-mini-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--success, var(--accent)); animation: nav-mini-pulse 1.6s ease-out infinite; }
@keyframes nav-mini-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.nav-mini-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; box-sizing: border-box; min-width: 24px; max-width: 130px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 13px; font-weight: 800; overflow: hidden; }
.nav-mini-badge > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mini-top > svg { flex: none; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }
.nav-mini-head { flex: none; font-size: 17px; line-height: 22px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav-mini-sub { display: flex; margin-top: 2px; min-width: 0; font-size: 12.5px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.nav-mini-to, .nav-mini-at { opacity: .78; }
.nav-mini-to { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-mini-at, .nav-mini-moved { flex: none; white-space: pre; font-variant-numeric: tabular-nums; }
.nav-mini-moved { font-weight: 800; }
.nav-mini .late { color: var(--mini-late); }
.nav-mini .early { color: var(--mini-early); }
.nav-mini-track { position: relative; display: block; height: 4px; margin: 9px 2px 0 0; }
.nav-mini-seg { position: absolute; top: 0; height: 4px; border-radius: 2px; background: currentColor; opacity: .75; }
.nav-mini-seg.walk { opacity: .3; }
.nav-mini-seg.done { opacity: 1; }
.nav-mini-seg.done.walk { opacity: .7; }
.nav-mini-now { position: absolute; top: -3px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.nav-mini-x { flex: none; width: 52px; padding: 0; border: 0; border-radius: 0 22px 22px 0; background: none; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nav-mini-x > span { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 55%, var(--bg)); display: flex; align-items: center; justify-content: center; }
.nav-mini-x svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 44; }
.nav-mini-open:focus-visible, .nav-mini-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .nav-mini { transition: none; animation: none; } .nav-mini-live::after { display: none; } }
/* "End this trip?", asked in place of the strip or of the pill (nav.js askEnd). */
.nav-mini.asking { padding: 0 14px; align-items: center; }
.nav-endask { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.nav-mini .nav-endask { color: var(--bg); }
.nav-endask-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav-endask-t b { font-size: 16px; line-height: 21px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-endask-t span { font-size: 12.5px; line-height: 16px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-endask-keep, .nav-endask-end { flex: none; height: 44px; min-width: 60px; padding: 0 14px; border-radius: 13px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.nav-endask-keep { border: 1.5px solid currentColor; background: none; color: inherit; }
.nav-endask-end { border: 0; background: var(--danger); color: var(--bg); }

/* ---- the sheet ---- */
/* touch-action: none on the whole of it: every pointer move is the sheet's
   to read. Only at its top stop, and only when there is more than fits, does
   the list inside take the finger (.at-top); and a row that scrolls sideways
   always takes its own (.nav-hrow). Off the bottom until nav.js has measured,
   so it never flashes fully up. */
.nav-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 520px; z-index: 5;
  height: calc(100% - var(--nav-rail));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border-radius: 22px 22px 0 0; border-top: 1px solid var(--border); box-shadow: var(--nav-lift);
  transform: translateY(var(--sy, 100%));
  transition: transform .34s cubic-bezier(.2,.8,.2,1); will-change: transform;
  touch-action: none; -webkit-user-select: none; user-select: none;
  animation: nav-sheet-in .32s ease;
}
/* The conversation's strip, or its peeking sheet, lies over the foot of the
   page and is see-through. --nav-foot is how much it covers (nav.js): that
   much of the sheet, at the bottom of what shows of it wherever it rests or
   is dragged to, is plain ground, so no row of the list is read through the
   strip's words. The list is padded by the same amount, so its last row can
   still be scrolled clear. */
.nav-sheet::after {
  content: ''; position: absolute; z-index: 1; left: 0; right: 0; pointer-events: none;
  top: calc(100% - var(--sy, 0px) - var(--nav-foot, 0px)); height: var(--nav-foot, 0px); background: var(--bg);
}
.nav-sheet.typing::after, .nav-sheet.naming::after { display: none; }
/* Under a finger there is no transition to fight it, and a change of size is
   not a change of state: the sheet is put where it rests, not slid there. */
.nav-sheet.dragging, .nav-sheet.sizing { transition: none; }
/* While the sheet is the list for the box at the bottom, it is the page above that box. */
.nav-sheet.typing, .nav-sheet.naming { border-radius: 0; box-shadow: none; border-top-color: transparent; }
.nav-sheet-head { flex: none; padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
.nav-sheet-body {
  flex: 1; min-height: 0; overflow-y: hidden; touch-action: none; overscroll-behavior: contain;
  /* --nav-under: how far the box's foot is below the page's at the top stop
     (nav.js writes it). Without it the last rows are under the fold for good. */
  padding: 0 max(14px, env(safe-area-inset-right)) calc(16px + var(--nav-foot, 0px) + var(--nav-under, 0px)) max(14px, env(safe-area-inset-left));
}
.nav-sheet.at-top .nav-sheet-body { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
/* The sheet arrives, it does not slide in: a box that is meant to look
   stationary must not begin by moving. */
@keyframes nav-sheet-in { from { opacity: 0; } to { opacity: 1; } }
/* One face of the sheet giving way to another fades; nothing rises, because
   a face that moved while the sheet moved read as the sheet overshooting. */
.nav-sheet-body > * { animation: nav-fade .15s ease both; }
@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-face-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nav-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- the head: the route box ---- */
/* 112 = 10 + 92 + 10. The box is exactly 92 (From 44, To 48) with its
   hairline inside, so the lowest stop is the same number at every width.
   With no destination it is the From row alone, 46: the box at the bottom
   asks "Where to?" and the To row would only point at it. */
.nav-head-row { display: flex; gap: 6px; align-items: stretch; }
.nav-head-row[hidden] { display: none; }
.nav-route {
  flex: 1; min-width: 0; height: 92px; box-sizing: border-box; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.nav-route.bare { height: 46px; }
.nav-route-row.to[hidden] { display: none; }
.nav-route.pulse { animation: nav-need .9s ease 1; }
@keyframes nav-need { 0%, 100% { border-color: var(--border); box-shadow: none; } 35% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); } }
.nav-route-row { position: relative; display: flex; align-items: center; min-width: 0; cursor: pointer; }
.nav-route-row.from { flex: 44 0 0; }
.nav-route-row.to { flex: 48 0 0; }
.nav-route-row.to::before { content: ''; position: absolute; left: 36px; right: 0; top: 0; height: 1px; background: var(--border); }
.nav-route-ico { flex: none; width: 36px; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.nav-route-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 36; }
.nav-route-ico.set { color: var(--ink); }
.nav-route-ico.station { color: var(--accent); }
/* You: the map's own blue dot. Waiting for a fix it breathes; never asked, it is a ring. */
.nav-dot { width: 12px; height: 12px; border-radius: 6px; background: var(--nav-me); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-me) 18%, transparent); }
.nav-dot.wait { animation: nav-pulse 1.2s ease-in-out infinite; }
.nav-dot.ring { box-sizing: border-box; background: none; border: 2px solid var(--ink-faint); box-shadow: none; }
/* Neither row is a field: the words are a button, and the box that is typed
   in is the one at the bottom of the screen. */
.nav-end-wrap { flex: 1; min-width: 0; align-self: stretch; display: flex; }
.nav-end-wrap[hidden] { display: none; }
.nav-end {
  flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; padding: 0 8px 0 0; border: 0; background: none; color: var(--ink);
  font: inherit; text-align: left; white-space: nowrap; cursor: pointer;
}
.nav-end.unset { color: var(--ink-muted); }
/* An end's name is said whole: a long one a size down, on a second line if it must (the review, 21 Oct 2026: "Jamaica Center-P…"). */
#nav-to { font-size: 17px; font-weight: 600; letter-spacing: -.2px; white-space: normal; line-height: 21px; }
#nav-to.long { font-size: 14.5px; line-height: 17px; letter-spacing: -.1px; }
#nav-to.longer { font-size: 12.5px; line-height: 15px; }
.nav-end-name { min-width: 0; overflow-wrap: anywhere; }
/* The start is words: "Your location · 89 E 42nd St", with the name quieter than the fact. */
.nav-from-face { font-size: 15px; font-weight: 500; flex-wrap: wrap; align-content: center; white-space: normal; line-height: 18px; }
.nav-from-face.long { font-size: 13px; line-height: 16px; }
.nav-from-face.longer { font-size: 12px; line-height: 14px; }
.nav-from-name { flex: none; max-width: 100%; overflow-wrap: anywhere; }
.nav-from-sub { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 400; color: var(--ink-muted); white-space: pre-wrap; }
.nav-loc-pill { flex: none; height: 28px; margin-right: 8px; padding: 0 12px; border-radius: 14px; border: 0; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.nav-loc-pill[hidden] { display: none; }
/* small things to look at, a thumb's height to press */
.nav-loc-pill, .nav-switch, .nav-ask-btn, .nav-pill, .nav-seg-btn, .nav-when-chip, .nav-tc-btn, .nav-mode, .nav-round { position: relative; }
.nav-loc-pill::before, .nav-switch::before, .nav-ask-btn::before, .nav-pill::before, .nav-seg-btn::before, .nav-when-chip::before, .nav-tc-btn::before, .nav-mode::before, .nav-skip::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* the round ones are 36: 4 more all round, less where two of them are stacked 10 apart */
.nav-round::before { content: ''; position: absolute; inset: -4px; }
.nav-sheet-chev::before { bottom: -5px; }
.nav-swap::before { top: -5px; }
.nav-row-btn { flex: none; width: 44px; align-self: stretch; padding: 0; border: 0; background: none; color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nav-row-btn[hidden] { display: none; }
.nav-row-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 34; }
.nav-star.on { color: var(--accent-2); }
.nav-star.on svg { fill: currentColor; }
/* The station question takes the From row's place: the row does not grow. */
.nav-ask { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding-right: 6px; cursor: default; }
.nav-ask[hidden] { display: none; }
.nav-ask-text { flex: 1; min-width: 0; display: flex; font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.nav-ask-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-ask-btn { flex: none; height: 30px; padding: 0 13px; border-radius: 15px; border: 1px solid var(--border); background: none; color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nav-ask-btn.yes { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* The side column: the arrow that moves the sheet for a tap, a keyboard and
   a screen reader, over the swap. Each sits beside the row it is level with. */
.nav-head-side { flex: none; width: 40px; display: flex; flex-direction: column; align-items: center; }
.nav-round { width: 36px; height: 36px; padding: 0; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nav-round svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 38; }
.nav-round:disabled { opacity: .38; cursor: default; }
.nav-sheet-chev { margin: 4px 0; }
.nav-swap { margin: 6px 0; }
.nav-swap[hidden] { display: none; }
.nav-sheet-chev svg { transition: transform .2s ease; transform: rotate(180deg); }       /* points up: there is more */
.nav-sheet.at-full .nav-sheet-chev svg { transform: none; }
.nav-cancel { flex: none; align-self: center; height: 44px; margin-left: 6px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
/* The list: the field is the box at the bottom of the screen, and the head is
   one slim row that says what it is looking for, and Cancel. 62 = 10 + 44 + 8. */
.nav-sheet.typing .nav-sheet-head { padding-bottom: 8px; }
/* A phone with its keyboard up: 52 = 4 + 44 + 4, as the app has it, and the
   ten points are the third row of the list on the shortest one. */
body.nav-short .nav-sheet.typing .nav-sheet-head { padding-top: 4px; padding-bottom: 4px; }
.nav-seek { display: flex; align-items: center; height: 44px; }
.nav-seek[hidden] { display: none; }
/* The icon stands where a row's does, so the title lines up with the names under it. */
.nav-seek .nav-route-ico { width: 36px; margin-right: 12px; }
.nav-seek-what { flex: 1; min-width: 0; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The save step: what to call a place. 174 = 10 + 44 + 44 + 44 + 4 + 20 + 8,
   which still leaves the list a line on the shortest phone with its keyboard up. */
.nav-save { display: flex; flex-direction: column; margin-bottom: -2px; }
.nav-save[hidden] { display: none; }
.nav-save-top { display: flex; align-items: center; gap: 12px; height: 44px; }
.nav-save-what { flex: 1; min-width: 0; }
.nav-save-title { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ink); }
.nav-save-place { font-size: 12.5px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-save .nav-cancel { margin-left: 0; }
.nav-save-chips { display: flex; align-items: center; gap: 8px; height: 44px; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; }
.nav-save-chips::-webkit-scrollbar { display: none; }
.nav-pill { flex: none; height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.nav-pill.on, .nav-pill.dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* The save step has no field of its own: the name is typed in the box at the bottom. This row is what the name replaces, and Save. */
/* The nine icons a saved place can wear: a 44-tall row, a 34 circle in each cell. */
/* The name it will go by, on the circle it will wear: a row as tall as the row of icons it took the place of. */
.nav-save-namerow { display: flex; align-items: center; gap: 10px; height: 44px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: text; }
.nav-save-namerow > svg { flex: none; width: 16px; height: 16px; stroke: var(--ink-muted); fill: none; stroke-width: 34; }
.nav-save-namerow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.nav-save-dot { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); }
.nav-save-dot svg { width: 15px; height: 15px; }
.nav-save-name { flex: 1; min-width: 0; font-size: 17px; line-height: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-save-name.hint { font-size: 15px; font-weight: 400; color: var(--ink-muted); }
/* A saved place's own picture (placeIcons.mjs): a filled glyph, the phone's, wherever it is drawn. */
svg.place-ico { fill: currentColor !important; stroke: none !important; }
/* Under the save step: a colour, then an icon (nav.js lookPicker). Every cell is a finger wide. */
.nav-look { padding: 4px 0 24px; }
.nav-look-head { padding: 8px 0 4px; font-size: 12.5px; line-height: 16px; font-weight: 700; letter-spacing: .3px; color: var(--ink-muted); }
.nav-look-grid { display: grid; }
.nav-look-grid.colors { grid-template-columns: repeat(6, minmax(44px, 1fr)); }
/* Six across, both of them, so the columns of colours and of icons line up. */
.nav-look-grid.icons { grid-template-columns: repeat(6, minmax(44px, 1fr)); }
.nav-look-color, .nav-look-icon { height: 48px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-muted); -webkit-tap-highlight-color: transparent; }
.nav-look-color:focus-visible, .nav-look-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
/* The colour picked wears a ring a little way out from it, in the ink, so it shows on every colour; its tick is in the colour's own ink. */
.nav-look-swatch { width: 29px; height: 29px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px transparent; }
.nav-look-swatch svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 48; visibility: hidden; }
.nav-look-color.on .nav-look-swatch { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--ink); }
.nav-look-color.on .nav-look-swatch svg { visibility: visible; }
.nav-look-dot { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.nav-look-dot svg { width: 22px; height: 22px; }
.nav-look-icon:hover:not(.on) .nav-look-dot { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-look-icon.on .nav-look-dot { background: var(--ink); color: var(--bg); }
.nav-look-icon.on .nav-look-dot svg { width: 17px; height: 17px; }
/* Save beside Cancel on the top row: a row of its own was room the colours and icons need when the keyboard is up. 34 tall in a 44 row. */
.nav-save-btn { flex: none; height: 34px; padding: 0 16px; border: 0; border-radius: 17px; background: var(--ink); color: var(--bg); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; position: relative; }
.nav-save-btn::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
/* The last line only when it has something to say: what the name replaces, or that one is needed. */
.nav-save-line { margin: 4px 0 6px; padding-left: 2px; font-size: 12.5px; line-height: 16px; color: var(--ink-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.nav-save-line:empty { display: none; }
/* A page too short for the step and the colours and icons under it (the keyboard up on a small phone): the names are typed, not picked. */
body.nav-short .nav-save-chips { display: none; }
/* A long name is set smaller, on up to two lines, so it is seen whole while it is typed. */
.nav-save-name.long { font-size: 15px; line-height: 18px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.nav-save-line.bad { color: var(--danger); }

/* ---- the first block, no trip: your places ---- */
/* 19 Oct 2026: each favourite is its picture (nav.js placePic), no name under
   it — the user: "Then no label needed so it takes up less space". 64 = 4 +
   the 58 picture + 2, and nav.js adds 12 under it for the middle stop. The
   row starts 5px left of the content so the first picture is flush with the
   route box, and fades over its last 20. The + is outside the scroller: it
   is the one thing in the row that must never be the thing cut off. */
.nav-spots { display: flex; align-items: flex-start; height: 64px; padding-top: 4px; margin-left: -5px; }
.nav-hrow {
  flex: 1; min-width: 0; display: flex; overflow-x: auto; touch-action: pan-x; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent); mask-image: linear-gradient(to right, black calc(100% - 20px), transparent);
}
.nav-hrow::-webkit-scrollbar { display: none; }
.nav-hrow::after { content: ''; flex: none; width: 14px; }      /* so the last place can be pulled clear of the fade */
.nav-spot { flex: none; width: 68px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; -webkit-touch-callout: none; }
/* A rounded square, the app's tiles' own corner (pickSheet's .pick-art): a photo reads as a photo in it. */
.nav-spot-ico { position: relative; overflow: hidden; box-sizing: border-box; width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--ink-muted); transition: transform .12s ease; }
.nav-spot-ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 32; }
.nav-spot.saved .nav-spot-ico { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* The picture over the dot, and a hairline inside its edge so a pale photo still has one on a pale sheet. */
.nav-spot-pic, .nav-row-ico.has-pic .nav-spot-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* A picture's edge is a hairline, as on the phone; the place's colour (inline, dotStyle) is for its dot. */
.nav-spot.saved .nav-spot-ico:has(.nav-spot-pic), .nav-row-ico.has-pic:has(.nav-spot-pic) { border-color: var(--border) !important; background-clip: padding-box; }
.nav-row-ico.has-pic { position: relative; overflow: hidden; border-radius: 11px; }
/* Held, a favourite says its name on itself, whole: a dark label over the foot of its picture, as wide as the picture (the row's edge cuts anything wider), growing up over it for a long name. */
.nav-spot-name { display: none; position: absolute; left: 5px; right: 5px; bottom: 0; padding: 3px 3px 4px; border-radius: 0 0 16px 16px; background: rgba(0, 0, 0, .74); color: white; font-size: 10px; line-height: 12px; font-weight: 600; text-align: center; overflow-wrap: anywhere; pointer-events: none; }
.nav-spot.saved.lifted .nav-spot-name { display: block; }
/* Favourites move (14 Oct 2026, nav.js liftable): the others slide aside on a spring; the one that is up follows the finger, a size up, over them. */
.nav-spot.saved { position: relative; transition: transform .2s cubic-bezier(.3, 1.3, .5, 1); touch-action: pan-x; }
.nav-spot.saved.lifted { transition: none; z-index: 2; cursor: grabbing; }
.nav-spot.saved.lifted .nav-spot-ico { box-shadow: 0 8px 18px rgba(0, 0, 0, .28); }
@media (prefers-reduced-motion: reduce) { .nav-spot.saved { transition: none; } }
.nav-spot.ghost { cursor: default; }
.nav-spot.ghost .nav-spot-ico { background: var(--border); border-color: transparent; }
/* "Add home" / "Add work": two dashed tiles in an empty row, the icon and the
   words that are the whole instruction side by side. Nothing is cut. */
.nav-spot.dashed { width: auto; flex-direction: row; gap: 6px; height: 58px; box-sizing: border-box; margin: 0 5px; padding: 0 12px 0 10px; border: 1px dashed var(--ink-faint); border-radius: 16px; }
.nav-spot.dashed .nav-spot-ico { width: 24px; height: 24px; border: 0; background: none; }
/* Its name over "Add" (21 Oct 2026): both tiles stand whole before the + on a 320 phone. */
.nav-spot.dashed .nav-spot-label { display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; line-height: 17px; font-weight: 600; white-space: nowrap; }
.nav-spot.dashed .nav-spot-label small { font-size: 12px; line-height: 15px; font-weight: 600; color: var(--ink-muted); }
.nav-spot:active .nav-spot-ico { transform: scale(.94); }
.nav-spot-add { position: relative; flex: none; width: 70px; display: flex; justify-content: flex-end; }
.nav-spot-add::before { content: ''; position: absolute; left: 4px; top: 8px; width: 1px; height: 42px; background: var(--border); }
.nav-spot.add { width: 58px; }
.nav-spot.add .nav-spot-ico { color: var(--accent); }
.nav-spot.add .nav-spot-ico svg { width: 28px; height: 28px; stroke-width: 34; }

/* ---- at full, no trip ---- */
.nav-sect { display: flex; align-items: center; justify-content: space-between; height: 30px; }
.nav-sect-t { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-link { flex: none; border: 0; background: none; padding: 0 2px; min-height: 30px; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.nav-link[hidden] { display: none; }
.nav-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nav-row + .nav-row::before { content: ''; position: absolute; left: 48px; right: 0; top: 0; height: 1px; background: var(--border); }
.nav-row-ico { flex: none; box-sizing: border-box; width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--ink-muted); }
.nav-row-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 34; }
.nav-row-ico.saved { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.nav-row-ico.transit { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.nav-row-ico.me { background: color-mix(in srgb, var(--nav-me) 12%, transparent); border-color: transparent; }
.nav-row-text { flex: 1; min-width: 0; }
/* A place's name and where it is are said whole, wrapping (21 Oct 2026: "Jamaica Center-Parsons/Ar…" at 320). */
.nav-row-name { display: block; font-size: 15px; line-height: 19px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.nav-row-detail { display: block; font-size: 12.5px; line-height: 16px; color: var(--ink-muted); overflow-wrap: anywhere; }
.nav-row-end { flex: none; font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; display: flex; align-items: center; }
.nav-row-end svg { width: 15px; height: 15px; stroke: var(--ink-faint); fill: none; stroke-width: 40; }
.nav-dep { display: flex; gap: 10px; align-items: center; min-height: 44px; border-top: 1px solid var(--border); }
.nav-sect + .nav-dep { border-top: 0; }
.nav-dep .nav-badge { min-width: 36px; box-sizing: border-box; text-align: center; }
.nav-dep-head { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-dep-time { flex: none; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav-dep-time.live { color: var(--success); }
.nav-dep-time small { font-size: 12px; font-weight: 500; color: var(--ink-muted); margin-left: 6px; }
.nav-hint { margin: 14px 0 6px; font-size: 12.5px; line-height: 17px; color: var(--ink-muted); }
.nav-foot-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.nav-foot-line .nav-link, .nav-opt .nav-link { min-height: 44px; padding: 0 6px; }
.nav-status { font-size: 11px; font-weight: 700; color: var(--ink-muted); }
.nav-status.live { color: var(--success); }
.nav-status.warn { color: var(--danger); }
.nav-empty { padding: 10px 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* ---- the list for what is in the box at the bottom ---- */
/* 56 a row; 48 when the page is short, so a phone with its keyboard up still
   shows three. A highlighted row (the arrow keys) is tinted; a row under a
   mouse is tinted differently, so Enter never picks what a pointer happened
   to be resting on. */
/* The tint of a highlighted row reaches 8px past its words on each side. */
.nav-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 -8px; padding: 6px 8px; box-sizing: border-box; cursor: pointer; }
.nav-opt + .nav-opt::before { content: ''; position: absolute; left: 56px; right: 8px; top: 0; height: 1px; background: var(--border); }
.nav-opt[aria-selected="true"] { background: var(--accent-soft); border-radius: 12px; }
.nav-opt[aria-selected="true"]::before, .nav-opt[aria-selected="true"] + .nav-opt::before { display: none; }
@media (hover: hover) { .nav-opt:not(.note):hover { background: var(--tint); border-radius: 12px; } }
.nav-opt.note { min-height: 44px; cursor: default; font-size: 14px; color: var(--ink-muted); }
.nav-opt.note::before { display: none; }
.nav-opt-spin { flex: none; width: 36px; display: flex; justify-content: center; }
.nav-opt-spin .spin { width: 16px; height: 16px; }
.nav-opt.search .nav-row-name { color: var(--accent); }
/* "Your location": what is under the name may be a sentence (how to turn it back on), read whole on two lines. */
.nav-opt[data-id="here"] .nav-row-detail { white-space: normal; }
.nav-row-detail.far { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.nav-row-detail.far > span:first-child { min-width: 0; }
.nav-tag { flex: none; padding: 0 6px; border-radius: 6px; background: var(--border); color: var(--ink); font-size: 11px; line-height: 16px; font-weight: 600; }
@media (max-height: 420px) { .nav-opt { min-height: 48px; } }
.nav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- a trip ---- */
/* One card for every way and every state, 128 = 12 + 52 + 8 + 44 + 12: two
   rows and a foot. Loading, a failed plan, a train, a walk and a flight are
   all this box, so nothing under it moves when one becomes another. */
/* The first block is what the middle stop shows, and 12px of air under it:
   nav.js adds the same 12 to the stop, so the next thing starts exactly at
   the fold and no sliver of it shows. */
.nav-first { display: flex; flex-direction: column; margin-bottom: 12px; }
.nav-trip-card { box-sizing: border-box; min-height: 128px; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; }
.nav-trip-card.no-foot { justify-content: center; }   /* no way on foot: the height kept, the words in its middle */
.nav-tc-top { height: 52px; min-width: 0; overflow: hidden; }
/* A train's trip says every leg: the card grows a line for the chain (measured: the middle stop is the card's real height). */
.nav-tc-top.grows { height: auto; min-height: 52px; overflow: visible; }
.nav-tc-top.grows .nav-tc-a { gap: 6px; }
.nav-tc-arrow { flex: none; display: flex; color: var(--ink-faint); }
.nav-tc-arrow svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 44; }
.nav-tc-arr { flex: 0 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The length big, the clock times under it ("10:05 – 10:57 AM"), the countdown on the right. */
.nav-tc-a.stack { height: auto; align-items: flex-start; }
/* the length and the clock times on one line when they fit, the times under the length when not */
.nav-tc-when { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.nav-tc-range { min-width: 0; font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* "10:45 AM from Grand Central-42 St · $2.90": where the walk at the start goes, said whole — two lines when it needs them. */
.nav-tc-b.board { height: auto; min-height: 16px; }
.nav-tc-b.board > span:first-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nav-tc-b.board b { color: var(--ink); font-weight: 800; }
/* the fare is never broken across lines ("+ LIRR / fare") */
.nav-tc-b.board .nav-fare { white-space: nowrap; }
.nav-tc-a .grow { flex: 1; }
.nav-tc-chain { margin-top: 6px; }
.nav-tc-top.grows .nav-tc-b { margin-top: 6px; }
.nav-tc-top.tap { cursor: pointer; }
/* The buddy's line under a walk that takes days. */
.nav-tc-epic { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; line-height: 19px; font-weight: 700; color: var(--ink); }
.nav-tc-epic > :first-child { flex: none; }
.nav-tc-face { flex: none; display: flex; align-items: center; margin-left: auto; }   /* a narrow sheet: the buddy where the walker is, no row of words */
/* The buddy at the head of a card that is waiting, or could not. */
.nav-tc-top.with-buddy { display: flex; align-items: center; gap: 10px; }
.nav-tc-top.with-buddy > :first-child { flex: none; }
.nav-tc-top.with-buddy > .grow { flex: 1; min-width: 0; }
.nav-tc-a { display: flex; align-items: center; gap: 10px; height: 32px; min-width: 0; }
.nav-tc-big { flex: none; font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -.6px; color: var(--ink); white-space: nowrap; }
.nav-tc-mid { flex: 1; min-width: 0; }
.nav-tc-way { flex: none; margin-left: auto; color: var(--ink-muted); display: flex; }
.nav-tc-way svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 30; }
.nav-tc-b { height: 16px; margin-top: 4px; font-size: 12.5px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a train's line: the facts shrink, the word for an alert does not */
.nav-tc-b.split { display: flex; align-items: center; }
.nav-tc-b.split > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-tc-b .nav-alert-chip { flex: none; height: 16px; padding: 0 6px 0 2px; }
.nav-tc-foot { display: flex; align-items: center; height: 44px; margin-top: 8px; min-width: 0; }
.nav-when-chip { flex: none; height: 32px; padding: 0 10px 0 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nav-when-chip svg { flex: none; width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 48; }
.nav-when-chip[aria-expanded="true"], .nav-opts-btn[aria-expanded="true"] { border-color: var(--ink); }
.nav-opts-btn { flex: none; margin-left: 8px; }
.nav-opts-btn svg { width: 17px; height: 17px; }
.nav-more-link { flex: none; margin-left: auto; height: 44px; padding: 0 10px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.nav-more-link[hidden] { display: none; }
.nav-tc-btn { flex: none; margin-left: auto; height: 38px; padding: 0 16px; border: 0; border-radius: 19px; background: var(--ink); color: var(--bg); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.nav-more-link:not([hidden]) + .nav-tc-btn { margin-left: 0; }
.nav-tc-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 44; }
.nav-tc-btn.go { padding: 0 18px; font-weight: 800; letter-spacing: .5px; }
.nav-tc-btn:disabled { opacity: .35; cursor: default; }
.nav-trip-card.loading .nav-tc-btn:disabled { opacity: .9; }       /* the foot is already at 40% */
.nav-trip-card .nav-leave { min-width: 0; }
.nav-trip-card .nav-leave-label { font-size: 10px; line-height: 12px; }
.nav-trip-card .nav-leave-big { font-size: 17px; line-height: 20px; letter-spacing: -.2px; }
/* loading: the same box with two grey bars */
.nav-bar-a, .nav-bar-b { border-radius: 7px; background: var(--border); }
.nav-bar-a { width: 104px; height: 24px; }
.nav-bar-b { width: 62%; height: 11px; margin-top: 8px; }
.nav-trip-card.loading .nav-bar-a, .nav-trip-card.loading .nav-bar-b { animation: nav-pulse 1.2s ease-in-out infinite; }
.nav-trip-card.loading .nav-tc-foot { opacity: .4; pointer-events: none; }
.nav-tc-still { margin-left: auto; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
/* failed: what went wrong, in the server's words, and Retry */
.nav-tc-fail { font-size: 17px; line-height: 20px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-tc-why { font-size: 12.5px; line-height: 16px; color: var(--ink-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* "Going to X. Not it? Change": 28 = 2 + 22 + 4. The place is the part that shrinks. */
.nav-guess { display: flex; align-items: center; height: 28px; padding: 2px 2px 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; }
.nav-guess-what { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-guess-not { flex: none; white-space: pre; }
.nav-guess .nav-link { min-height: 22px; }
/* A warning: an amber tint under ordinary ink. Amber words on amber are 2 : 1. */
.nav-warn { display: flex; gap: 8px; margin-bottom: 8px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface-solid, var(--surface)) 84%, var(--nav-amber)); color: var(--ink); font-size: 13px; line-height: 17px; }
.nav-warn::before, .nav-alert-chip::before { content: '!'; flex: none; box-sizing: border-box; width: 15px; height: 15px; margin-top: 1px; border: 1.5px solid var(--accent-2); border-radius: 50%; color: var(--accent-2); font-size: 10px; line-height: 12px; font-weight: 800; text-align: center; }
/* the other ways there, or the steps of this one */
.nav-ways-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.nav-ways-title { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.nav-ways-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav-ways { display: flex; flex-direction: column; gap: 8px; }
.nav-ways.busy .nav-journey { opacity: .5; pointer-events: none; }
/* Not clipped: each half is a thumb's height to press, which is taller than the switch. The halves round their own outer corners. */
.nav-seg { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: 10px; }
.nav-seg-btn:first-child { border-radius: 9px 0 0 9px; }
.nav-seg-btn:last-child { border-radius: 0 9px 9px 0; }
.nav-seg-btn { height: 32px; border: 0; background: var(--surface); color: var(--ink-muted); padding: 0 11px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.nav-seg-btn.on { background: var(--ink); color: var(--bg); }
.nav-prefer-spin { display: none; flex: none; }
.nav-ways.busy .nav-prefer-spin { display: inline-block; }
.nav-default-link { align-self: flex-end; margin: -6px 0 2px; }
.nav-default-link[hidden] { display: none; }
.nav-journey.shown-above { display: none; }

/* ---- the question the planner asks, and the cards that share its place ---- */
/* Directly under the head and part of the first block, so it shows at the
   middle stop. Nothing floats over the map and nothing is a dialog. */
.nav-question { margin-bottom: 8px; padding: 4px 14px 6px; border-radius: 16px; background: var(--accent-soft); }
.nav-q-head { display: flex; align-items: center; min-height: 44px; }
.nav-q-text { flex: 1; min-width: 0; font-size: 15px; line-height: 19px; font-weight: 700; color: var(--ink); padding: 6px 0; }
.nav-q-x { flex: none; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nav-q-x svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 36; }
.nav-q-more { margin: -4px 0 6px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.nav-q-btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 8px; }
.nav-question .nav-row { min-height: 56px; }
.nav-question .nav-row + .nav-row::before { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.nav-question .nav-row-ico { background: var(--surface-solid, var(--surface)); border-color: transparent; }
.nav-question .nav-link { min-height: 44px; }

/* ---- the panels a trip card opens: when, and the options ---- */
.nav-panel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.nav-panel-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav-panel-row .grow { flex: 1; }
.nav-panel .nav-seg-btn { height: 34px; font-size: 13px; padding: 0 12px; }
.nav-when { flex: 1; min-width: 120px; height: 36px; }
.nav-panel .nav-sect { margin-top: 0; height: 22px; }
.nav-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; font-size: 14.5px; color: var(--ink); }
.nav-switch { flex: none; position: relative; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: var(--border); cursor: pointer; transition: background .15s ease; }
.nav-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: var(--surface-solid, var(--surface)); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.nav-switch[aria-checked="true"] { background: var(--accent); }
.nav-switch[aria-checked="true"]::after { transform: translateX(18px); }
.nav-stepper { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.nav-stepper button { width: 32px; height: 32px; padding: 0; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); color: var(--ink); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.nav-stepper button:disabled { opacity: .38; cursor: default; }
.nav-stepper output { min-width: 58px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nav-panel .input { -webkit-user-select: text; user-select: text; font-size: 16px; }
/* Edit places: the visible way to rename or remove one. */
.nav-places-row { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--border); }
.nav-sect + .nav-places-row { border-top: 0; }
.nav-places-row .nav-link, .nav-places .nav-sect .nav-link, .nav-board .nav-sect .nav-link { min-height: 44px; padding: 0 6px; }
.nav-places-row .nav-link.danger { color: var(--danger); }
/* The name is the thing being edited: beside two buttons it wraps rather than being cut to a word. */
.nav-places-row { padding: 6px 0; }
.nav-places-row .nav-row-name, .nav-places-row .nav-row-detail { white-space: normal; overflow-wrap: anywhere; }
.nav-menu { position: absolute; z-index: 7; min-width: 148px; border-radius: 12px; border: 1px solid var(--border); background: var(--raised); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); overflow: hidden; }
.nav-menu[hidden] { display: none; }
.nav-menu button { display: block; width: 100%; min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.nav-menu button + button { border-top: 1px solid var(--border); }
.nav-menu button.danger { color: var(--danger); }
.nav-menu button.quiet { color: var(--ink-muted); }

/* ---- following: the strip, and the steps under it ---- */
/* 72 = 10 + 52 + 10. The two names shrink; when you are in never does. */
.nav-strip[hidden] { display: none; }
.nav-strip-row { display: flex; align-items: center; gap: 6px; height: 52px; }
.nav-gostrip-text { flex: 1; min-width: 0; cursor: pointer; }
.nav-gostrip-big { font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-gostrip-small { display: flex; align-items: center; font-size: 12px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; }
/* Each end has its own ellipsis, and the start gives way first: where the
   trip is going is the news. Shared out equally, both were stubs on a small
   phone ("Gr… → Ja…"). Where the start would be a stub it is left out
   (nav.js fitStrip, measured) and the line is the destination. */
.nav-gostrip-ends { flex: 0 1 auto; min-width: 0; display: flex; }
.nav-gostrip-from, .nav-gostrip-to { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-gostrip-from { flex: 0 1000 auto; }
.nav-gostrip-to { flex: 0 1 auto; }
.nav-gostrip-arrow { flex: none; white-space: pre; }
.nav-gostrip-ends.no-from > .nav-gostrip-from, .nav-gostrip-ends.no-from > .nav-gostrip-arrow { display: none; }
.nav-gostrip-in { flex: none; white-space: pre; }
/* Choose your trains (nav.js legPicker): the picks so far, then every ride that could come next. */
.nav-pick-link { align-self: flex-start; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.nav-pick-done { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--border); }
.nav-pick-done-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nav-pick-done-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nav-pick-done-when { min-width: 0; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pick .nav-link { min-height: 44px; min-width: 44px; }
.nav-pick-err { display: flex; align-items: center; gap: 8px; }
.nav-pick-err .nav-warn { flex: 1; min-width: 0; }
.nav-pick-no { width: 14px; flex: none; text-align: center; font-size: 13px; font-weight: 800; color: var(--ink-muted); }
.nav-pick-done-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pick-head { padding: 12px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); }
.nav-pick-opt { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; padding: 10px 0; border: 0; border-top: 1px solid var(--border); background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.nav-pick-opt:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.nav-pick-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-pick-top { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.nav-pick-sub, .nav-pick-arr { width: 100%; }
.nav-pick-to { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pick-time { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nav-pick-sub, .nav-pick-after { font-size: 12.5px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pick-arr { display: flex; align-items: center; min-width: 0; font-size: 12.5px; line-height: 16px; }
.nav-pick-arr b { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.nav-pick-after { flex: 1; min-width: 0; white-space: pre; }
.nav-pick-best { flex: none; margin-left: 6px; padding: 1px 5px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); font-size: 11px; font-weight: 800; }
.nav-pick-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; min-width: 24px; max-width: 104px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pick-badge > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-pick-none { padding: 10px 0; font-size: 13.5px; color: var(--ink-muted); }
/* In a picked ride the badge gives way first: where it gets off is the point. */
.nav-pick-done .nav-pick-badge { flex: 0 1 auto; max-width: 120px; }
.nav-pick-busy { display: flex; align-items: center; gap: 8px; padding: 12px 0; font-size: 13px; color: var(--ink-muted); }
.nav-pick-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; }
.nav-pick-arrive { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; color: var(--ink); }
.nav-pick-arrive > b { font-weight: 800; font-variant-numeric: tabular-nums; }
.nav-pick-arrive > span { font-size: 12px; line-height: 15px; color: var(--ink-muted); }

/* ---- Schedules: the timetable between two stations (nav.js paintSched; the phone's is components/nav/Schedules.tsx) ---- */
.nav-sched { display: flex; flex-direction: column; }
.nav-sched-first { gap: 2px; margin-bottom: 4px; }
/* No head (21 Oct 2026, the user: "shave off that whole part on the top … We don't need close button bc u can just drag
   down"): a grip alone, the sign that the sheet drags down; no system keys — every search is All. */
.nav-sched-grip { height: 16px; display: flex; align-items: center; justify-content: center; }
.nav-sched-grip::before { content: ''; width: 36px; height: 4px; border-radius: 2px; background: var(--ink-faint); }
.nav-sched-ends { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.nav-sched-ends-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav-sched-end { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: 7px 14px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
/* A mouse's hover only, and never on the lit row: a tap left it stuck on a phone, a second tint beside the lit one. */
@media (hover: hover) { .nav-sched-end:not(.lit):hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } }
.nav-sched-end:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-sched-end-l { font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: .6px; color: var(--ink-muted); }
.nav-sched-end-n { max-width: 100%; font-size: 16px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere; }
.nav-sched-end.unset .nav-sched-end-n { color: var(--ink-muted); }
.nav-sched-end-d { max-width: 100%; font-size: 12px; line-height: 15px; color: var(--ink-muted); }
/* The row the box at the bottom is filling (13 Oct 2026: the search is done in place, not in a list over the page): lit, what is typed in it, and its × to stop. */
.nav-sched-end-wrap { display: flex; align-items: center; }
.nav-sched-end-wrap > .nav-sched-end { flex: 1; min-width: 0; }
.nav-sched-end-wrap + .nav-sched-end-wrap { border-top: 1px solid var(--border); }
.nav-sched-end-wrap.lit { background: var(--accent-soft); }
.nav-sched-end.lit .nav-sched-end-l { color: var(--accent); }
.nav-sched-end-n.typed { display: flex; align-items: center; gap: 6px; }
.nav-sched-end-n.typed svg { flex: none; width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 44; }
.nav-sched-typed { min-width: 0; overflow-wrap: anywhere; }
.nav-sched-typed.faint { color: var(--ink-muted); }
/* What is typed is in ink, as the phone's: an unset end's grey is for its "Choose a station", not the letters. */
.nav-sched-typed:not(.faint) { color: var(--ink); }
.nav-sched-end-x { flex: none; width: 44px; height: 44px; margin-right: 4px; border: 0; background: none; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nav-sched-end-x svg { box-sizing: border-box; width: 28px; height: 28px; padding: 7px; border-radius: 14px; background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); stroke: currentColor; fill: none; stroke-width: 44; }
/* The stations stand where the trains do, and pop in one after the other; so do the trains. */
/* The trains pop in; a station row never does: the list under From and To changes in place as letters are typed, every
   row it kept standing still (the owner, 21 Oct 2026: "When I type a letter into the to … the whole thing jiggles"). */
.nav-sched-list .nav-sched-trip { animation: nav-link-pop .36s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
@media (prefers-reduced-motion: reduce) { .nav-sched-list .nav-sched-trip { animation: none; } }
/* The same list drawn again (a train opened or shut, the 30-second read): nothing pops, nothing moves. */
.nav-sched-body.still .nav-sched-list .nav-sched-trip { animation: none; }
/* The buddy keeping a list company: its face and one short line, where the list would be. */
.nav-buddy { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 2px; }
.nav-buddy > :first-child { flex: none; }
.nav-buddy-t { flex: 1; min-width: 0; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ink-muted); }
.nav-pick-err .nav-buddy { flex: 1; }
.nav-sched-swap { flex: none; align-self: center; margin: 0 6px; }
.nav-sched-swap:disabled { opacity: .38; cursor: default; }
/* The when chip under From and To, and whether the times are live at the row's end (the list's: folded while a station is looked for). */
.nav-sched-whenrow { display: flex; align-items: center; min-height: 44px; }
.nav-sched-whenrow[hidden] { display: none; }
.nav-sched-whenrow .grow { flex: 1; }
.nav-sched-whenrow .nav-when-chip[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sched-live { padding-right: 2px; font-size: 11px; font-weight: 700; color: var(--ink-muted); }
.nav-sched-live.on { color: var(--success); }
.nav-sched-warn { padding: 0 0 6px; font-size: 12.5px; line-height: 16px; color: var(--ink-muted); }
.nav-sched-list.busy { opacity: .5; pointer-events: none; }
.nav-sched-page { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 44px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.nav-sched-page svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 44; }
.nav-sched-trip { border-top: 1px solid var(--border); }
.nav-sched-trip.first { border-top: 0; }
/* align-items: stretch — a button's children stand at the start otherwise, and the status could not reach the right edge. */
.nav-sched-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nav-sched-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.nav-sched-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-sched-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* The two times wrap as two groups: on a narrow sheet the arrival goes under the departure rather than squeeze the status. */
.nav-sched-times { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.nav-sched-tg { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
/* The timetable's time, where the live feed has moved the train off it: struck through beside the live one. */
.nav-sched-was { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.nav-sched-day { font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.nav-sched-dep { font-size: 18px; font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.nav-sched-arrow { align-self: center; display: inline-flex; }
.nav-sched-arrow svg { width: 13px; height: 13px; stroke: var(--ink-faint); fill: none; stroke-width: 44; }
.nav-sched-arr { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nav-sched-trip.off .nav-sched-dep, .nav-sched-trip.off .nav-sched-arr { color: var(--ink-muted); text-decoration: line-through; }
.nav-sched-status { margin-left: auto; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.nav-sched-status.ok, .nav-sched-status.early { color: var(--success); }
.nav-sched-status.late, .nav-sched-status.off { color: var(--danger); }
/* The lines and where the first one heads: a long branch name is said whole, and the row wraps rather than cut it ("Port Washington", "City Terminal Zone"). */
.nav-sched-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.nav-sched-line .nav-pick-badge { max-width: 180px; }
.nav-sched-more { font-size: 12px; color: var(--ink-muted); }
.nav-sched-head-t { flex: 1 1 120px; min-width: 0; font-size: 13.5px; font-weight: 600; }
/* Said whole, wrapping: never "…and Madiso" (the change), never a cut track or train number. */
.nav-sched-facts { font-size: 12.5px; line-height: 16px; color: var(--ink-muted); }
.nav-sched-stops { display: flex; flex-direction: column; gap: 6px; padding: 0 0 12px; }
.nav-sched-ride { display: flex; flex-direction: column; gap: 2px; }
.nav-sched-ride-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.nav-sched-ride-head .nav-pick-badge { max-width: 180px; }
.nav-sched-ride-to { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; }
.nav-sched-track { font-size: 12.5px; font-weight: 700; }
.nav-sched-stop { display: flex; align-items: center; gap: 8px; min-height: 24px; color: var(--ink-muted); font-size: 13.5px; }
.nav-sched-stop.end { color: var(--ink); font-weight: 700; }
.nav-sched-stop-t { flex: none; min-width: 68px; white-space: nowrap; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nav-sched-stop.end .nav-sched-stop-t { font-weight: 800; }
.nav-sched-stop-dot { flex: none; box-sizing: border-box; width: 10px; height: 10px; border-radius: 5px; border: 2px solid var(--ink); }
.nav-sched-stop-n { flex: 1; min-width: 0; }
.nav-sched-walk { padding-left: 76px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.nav-sched-plan { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-top: 4px; }
.nav-sched-plan svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 36; }
/* Offline: the pairs kept in this browser (../navSchedKeep.mjs), one press each. */
.nav-sched-kept-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nav-sched-kept .nav-sched-kept-row:first-of-type { border-top: 0; }
.nav-sched-kept-row svg { flex: none; width: 17px; height: 17px; stroke: var(--ink-muted); fill: none; stroke-width: 36; }
.nav-sched-kept-t { flex: 1; min-width: 0; font-size: 14.5px; line-height: 19px; font-weight: 600; }

/* On the way (nav.js paintOnWay; the phone's components/nav/OnTheWay.tsx). Its key on the From line: a small key on its lip, as the bar's keys are. */
.nav-onway-btn { flex: none; position: relative; display: inline-flex; align-items: center; gap: 5px; height: 30px; margin-right: 8px; padding: 0 10px; box-sizing: border-box; border-radius: 11px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface)); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.nav-onway-btn::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nav-onway-btn:active { transform: translateY(1px); border-bottom-width: 2px; }
.nav-onway-btn[hidden] { display: none; }
/* Beside it the start says "Your location" whole: the street after it gives way to the key rather than be cut ("Your location · 3…"). */
.nav-route-row.from:has(> .nav-onway-btn:not([hidden])) .nav-from-sub { display: none; }
.nav-onway-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 36; }
/* On a narrow screen the words alone, a size down, so "Your location" beside them stays whole. */
@media (max-width: 359px) { .nav-onway-btn { padding: 0 8px; font-size: 12px; margin-right: 6px; } .nav-onway-btn svg { display: none; } }
.nav-onway-head .nav-seek-what { flex: none; }
.nav-onway-head .grow { flex: 1; }
.nav-onway-back { flex: none; width: 40px; height: 40px; margin: 0 8px 0 -2px; box-sizing: border-box; border-radius: 13px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface)); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.nav-onway-back::before { content: ''; position: absolute; inset: -2px; }
.nav-onway-back[hidden] { display: none; }
.nav-onway-back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 44; }
.nav-onway-head .nav-route-ico[hidden] { display: none; }
.nav-onway-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 0; box-sizing: border-box; border: 0; border-top: 1px solid var(--border); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; animation: nav-link-pop .36s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
.nav-onway-row.first, .nav-onway-row.still { border-top: 0; }
.nav-onway-row.still { cursor: default; animation: none; padding-top: 2px; }
.nav-onway-row:hover:not(.still) { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.nav-onway-row .nav-pick-badge { flex: none; max-width: none; }
/* Wide enough for most branch names, so the words after them start in one column; a longer one grows it. */
.nav-onway-row > .nav-pick-badge { min-width: 116px; justify-content: center; }
.nav-onway-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-onway-head-t { font-size: 15px; line-height: 19px; font-weight: 700; }
.nav-onway-sub { font-size: 12.5px; line-height: 16px; color: var(--ink-muted); }
.nav-onway-late { color: var(--success); font-weight: 700; font-size: 12.5px; line-height: 16px; }
.nav-onway-late.late { color: var(--danger); }
.nav-onway-chev { flex: none; display: inline-flex; }
.nav-onway-chev svg { width: 16px; height: 16px; stroke: var(--ink-faint); fill: none; stroke-width: 40; }
.nav-onway-list.busy { opacity: .5; pointer-events: none; }
.nav-onway-station { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 6px 0; padding: 8px 12px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nav-onway-station svg { flex: none; width: 17px; height: 17px; stroke: var(--accent); fill: none; stroke-width: 36; }
.nav-onway-station-t { flex: 1; min-width: 0; font-size: 14.5px; line-height: 18px; font-weight: 600; }
.nav-onway-change { flex: none; color: var(--accent); font-size: 13.5px; font-weight: 700; }
.nav-onway-stop { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 0; box-sizing: border-box; border: 0; border-top: 1px solid var(--border); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nav-onway-stop.first { border-top: 0; }
.nav-onway-stop:disabled { cursor: default; }
.nav-onway-stop.waiting { opacity: .6; }
.nav-onway-stop-t { flex: none; min-width: 72px; white-space: nowrap; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nav-onway-stop-n { font-size: 15px; line-height: 19px; font-weight: 600; }
.nav-onway-stop .nav-sched-stop-dot { width: 11px; height: 11px; border-radius: 6px; }
/* Following a ride On the way: the arrival big, then minutes, stops and how late, then where you get off. The badge is never cut: the time beside it is short. */
.nav-onway-strip .nav-gostrip-badge.whole { flex: none; max-width: none; }
.nav-onway-strip .nav-onway-small { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.nav-onway-strip .nav-onway-late { font-size: inherit; line-height: inherit; white-space: pre; }
.nav-onway-strip .nav-onway-late.plain { color: var(--ink-muted); font-weight: 700; }
.nav-onway-strip .nav-onway-off { white-space: normal; }
@media (prefers-reduced-motion: reduce) { .nav-onway-row { animation: none; } }
/* GO's countdowns: the next ride big, with its line's badge; the ones after it small, each with its own. */
.nav-gostrip-next { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nav-gostrip-count { flex: none; font-size: 19px; line-height: 24px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav-gostrip-count.soon { color: var(--danger); }
.nav-gostrip-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; box-sizing: border-box; min-width: 18px; height: 17px; padding: 0 4px; border-radius: 5px; font-size: 11px; line-height: 1; font-weight: 800; }
/* The words cut with an ellipsis inside the badge: the badge gives way first, never the minutes. */
.nav-gostrip-badge > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-gostrip-badge { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-gostrip-badge.big { min-width: 26px; height: 24px; padding: 0 6px; border-radius: 7px; font-size: 14px; max-width: 180px; }
.nav-gostrip-then { flex: none; margin-right: 5px; }
.nav-gostrip-thens { margin-top: 2px; }
.nav-gostrip-later + .nav-gostrip-later { margin-left: 6px; }
/* The arrival, in ink, never cut; how far it moved beside it. */
.nav-gostrip-eta { flex: none; color: var(--ink); font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nav-gostrip-moved { flex: none; margin-left: 4px; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nav-gostrip-moved.later { color: var(--danger); }
.nav-gostrip-moved.earlier { color: var(--success, var(--accent)); }
.nav-gostrip-later { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; flex: none; }
.nav-gostrip-later:last-child { margin-right: 0; }
/* The countdown face's small row stays inside the text column; its later rides go whole or not at all (fitLater). */
.nav-gostrip-text > .nav-gostrip-small { overflow: hidden; min-width: 0; }
.nav-gostrip-chev { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nav-gostrip-chev svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 38; transform: rotate(180deg); transition: transform .2s ease; }
.nav-gostrip-chev.open svg { transform: none; }
/* The strip's Stop, and only that: a stop of a ride, in an open journey's legs, is .nav-stop-row. */
.nav-stop { flex: none; height: 44px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--ink); color: var(--bg); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.nav-stop svg { display: none; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 44; }
/* Minimize: out of GO, the trip still followed under its pill. */
.nav-gostrip-min { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 1px; align-items: center; justify-content: center; font: inherit; }
.nav-gostrip-min svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 36; }
.nav-gostrip-min span { font-size: 11px; line-height: 13px; font-weight: 700; }
/* Under 360 wide Stop is the × the pill wears: the next ride keeps its room. */
@media (max-width: 359px) {
  /* …and the steps' chevron gives its room to the next ride's name: a tap on the words opens the steps. */
  .nav-gostrip-chev { display: none; }
  .nav-stop { width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; }
  .nav-stop-word { display: none; }
  .nav-stop svg { display: block; }
}
.nav-godirections { padding-top: 2px; }
.nav-steps { display: flex; flex-direction: column; }
/* One row a step. A ride's row opens to its stops, a walk's to its turns:
   the same row, one tap deeper; the chevron says there is more. */
.nav-step { display: block; padding: 9px 0; border-top: 1px solid var(--border); }
.nav-step:first-child { border-top: 0; }
.nav-step-main { display: flex; align-items: center; gap: 10px; }
.nav-step.more { cursor: pointer; }
.nav-step-chev { flex: none; color: var(--ink-faint); display: flex; }
.nav-step-chev svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 44; transition: transform .2s ease; }
.nav-step.open .nav-step-chev svg { transform: rotate(180deg); }
.nav-step-more { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 2px 76px; padding: 2px 0 2px 10px; border-left: 2px solid var(--border); font-size: 12.5px; color: var(--ink-muted); }
.nav-step-more[hidden] { display: none; }
.nav-turn-m { color: var(--ink-faint); }
.nav-turn-t { display: inline-block; width: 66px; color: var(--ink-faint); }
.nav-step-at { min-width: 66px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.nav-step-ico { width: 36px; height: 36px; flex: none; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-size: 14px; }
.nav-step-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 34; }
/* A branch name is longer than a circle: the ride marker grows into a pill and
   gives way at its end rather than spilling over the step it belongs to. */
.nav-step-ico.ride { box-sizing: border-box; border: 0; border-bottom: 3px solid color-mix(in srgb, var(--c) 68%, black); background: var(--c); color: var(--ci); font-size: 12px; font-weight: 900; letter-spacing: -.2px; overflow: hidden; white-space: nowrap; }
.nav-step-ico.ride svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 32; }
.nav-step-head.ride .nav-ln-sticker { vertical-align: 1px; margin: 0 6px 3px 0; }
.nav-step-ico.wait { color: var(--nav-amber); border-color: color-mix(in srgb, var(--nav-amber) 45%, transparent); background: color-mix(in srgb, var(--surface-solid, var(--surface)) 82%, var(--nav-amber)); }
.nav-step-ico.walk svg { width: 18px; height: 18px; }
.nav-step-body { flex: 1; min-width: 0; }
.nav-step-head { font-size: 15px; font-weight: 700; color: var(--ink); }
.nav-step-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 1px; }
.nav-step-arrive { font-size: 13px; color: var(--ink-muted); margin-top: 8px; }
.nav-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
.nav-actions .grow { flex: 1; }
.nav-actions .btn { min-height: 44px; }
.btn.nav-go { display: inline-flex; align-items: center; gap: 4px; padding: 9px 18px; border-radius: 999px; font-weight: 800; letter-spacing: .5px; background: var(--ink); color: var(--bg); }
.btn.nav-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }

/* ---- a journey: the card, its pills, and the legs it unfolds to ---- */
.nav-journey {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.nav-journey:active { transform: scale(.995); }
.nav-journey.open { border-color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .10); }
.nav-journey-top { display: flex; gap: 12px; align-items: center; }
.nav-times { flex: none; min-width: 74px; }
.nav-times-row { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.nav-times-row .nav-time-big { font-size: 20px; }
.nav-times-row .nav-time-arr { margin-top: 0; font-size: 14px; font-weight: 700; }
.nav-journey-top .grow { flex: 1; }
.nav-journey-chain { margin-top: 6px; }
.nav-journey .nav-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.nav-journey .nav-meta .nav-alert-chip { margin-left: 0; }
.nav-journey .nav-meta .nav-live { margin-top: 0; }

/* ---- a trip as its legs (legChainEl; the phone's components/nav/LegChain.tsx) ----
   A walk is a walker and its minutes, each ride its line's sticker and its
   minutes, a wait a clock and its minutes in amber; the row wraps, nothing is
   cut. The links pop in one after the other. */
.nav-chain2 { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; min-width: 0; }
.nav-link2 { display: inline-flex; align-items: center; animation: nav-link-pop .42s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes nav-link-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.nav-link2-sep { display: flex; margin: 0 3px; color: var(--ink-faint); }
.nav-link2-sep svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 56; }
/* A line's sticker: its colour on a darker lip, white-rimmed — a thing standing on the card, like a station's sign. */
.nav-ln-sticker {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 12px;
  background: var(--c); color: var(--ci); border: 1.5px solid rgba(255, 255, 255, .9);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 68%, black), 0 3px 7px rgba(0, 0, 0, .16); margin-bottom: 3px;
  font-size: 12px; font-weight: 900; letter-spacing: -.2px; line-height: 1; white-space: nowrap;
}
.nav-ln-min { margin-left: 5px; font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Walks and waits are quiet — a glyph and its minutes, no box — so the lines ridden are what the eye lands on (15 Oct 2026; the phone's LegChain the same). */
.nav-quiet { display: inline-flex; align-items: flex-end; gap: 0; height: 22px; box-sizing: border-box; padding: 0 1px 2px; color: var(--ink-muted); }
/* small and low, as Google writes a walk's minutes: "🚶4 › (4) 10 min" no longer reads as "4 4 10 min" */
.nav-quiet b { font-size: 11px; line-height: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nav-quiet.wait { margin-right: 5px; }
.nav-quiet svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 36; }
.nav-quiet.wait { color: var(--ink); }
.nav-quiet.wait svg { color: var(--nav-amber); }
/* The walker walks: a small step and a sway, while it is the trip on the card. */
.nav-chain2.moving .nav-quiet.walk svg, .nav-step-ico.walk svg, .nav-leg-pill.walk svg { animation: nav-step .84s ease-in-out infinite; }
@keyframes nav-step { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-1.5px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .nav-link2 { animation: none; } .nav-chain2.moving .nav-quiet.walk svg, .nav-step-ico.walk svg, .nav-leg-pill.walk svg { animation: none; } }
/* An open card's walk and wait: a pill, not a sentence. */
.nav-leg-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; height: 30px; box-sizing: border-box; padding: 0 10px; border-radius: 15px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); color: var(--ink); font-size: 13.5px; font-weight: 700; }
.nav-leg-pill svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 34; }
.nav-leg-pill.wait { height: 28px; border-color: transparent; background: color-mix(in srgb, var(--surface-solid, var(--surface)) 82%, var(--nav-amber)); }
.nav-leg-pill.wait svg { color: var(--nav-amber); }
.nav-leg-rail .line.dashed.amber { background: repeating-linear-gradient(to bottom, var(--nav-amber) 0 4px, transparent 4px 9px); }
.nav-leg.wait { min-height: 36px; }
.nav-leg.wait .nav-leg-t { color: var(--ink-muted); }
.nav-time-big { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); line-height: 1.05; white-space: nowrap; }
.nav-time-arr { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; white-space: nowrap; }
.nav-journey-mid { flex: 1; min-width: 0; }
/* The right of a card is one thing: how long until you have to leave. */
.nav-leave { flex: none; min-width: 64px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; color: var(--accent); white-space: nowrap; }
.nav-leave-label { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; opacity: .8; }
.nav-leave-big { font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.nav-leave.urgent { color: var(--danger); }
.nav-leave.urgent .nav-leave-big { animation: nav-pulse 1.2s ease-in-out infinite; }
.nav-leave.gone { color: var(--ink-faint); }
@keyframes nav-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.nav-alert-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px 1px 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface-solid, var(--surface)) 84%, var(--nav-amber)); color: var(--ink); font-size: 11px; font-weight: 700; vertical-align: middle; }
.nav-alert-chip::before { margin-top: 0; width: 13px; height: 13px; font-size: 9px; line-height: 10px; }
/* inline-block, not inline-flex: a flex box has no text to put an ellipsis on,
   and a branch name was being cut mid-word. */
.nav-badge { display: inline-block; vertical-align: middle; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 16px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.nav-walk { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.nav-walk svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 36; }
.nav-arrow { color: var(--ink-faint); }
.nav-meta { font-size: 12px; color: var(--ink-muted); margin-top: 5px; }
.nav-live { color: var(--success); font-weight: 700; font-size: 11px; margin-top: 2px; }
.nav-live.faint { color: var(--ink-muted); font-weight: 600; }
/* the fold: an open journey grows, a closed one shrinks, without measuring */
.nav-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2,.7,.2,1); }
.nav-journey.open .nav-fold { grid-template-rows: 1fr; }
.nav-fold-in { min-height: 0; overflow: hidden; }
.nav-legs { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; }
.nav-leg { display: flex; gap: 10px; min-height: 40px; }
.nav-leg-t { flex: none; min-width: 66px; font-weight: 700; font-size: 13px; color: var(--ink); display: flex; flex-direction: column; white-space: nowrap; }
.nav-leg-t2 { margin-top: auto; font-weight: 600; color: var(--ink-muted); padding-top: 6px; }
.nav-leg-rail { flex: none; width: 14px; display: flex; flex-direction: column; align-items: center; }
.nav-leg-rail .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--c, var(--ink-faint)); box-sizing: border-box; flex: none; margin-top: 3px; }
.nav-leg-rail .dot.end { margin-top: 0; margin-bottom: 4px; }
.nav-leg-rail .line { flex: 1; width: 6px; background: var(--c, var(--ink-faint)); border-radius: 3px; margin: -2px 0; min-height: 22px; }
.nav-leg-rail .line.dashed { background: repeating-linear-gradient(to bottom, var(--ink-faint) 0 4px, transparent 4px 9px); width: 3px; }
.nav-leg-body { flex: 1; min-width: 0; font-size: 14px; display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; }
.nav-leg-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-leg-head { color: var(--ink-muted); font-size: 13px; }
.nav-leg-from, .nav-leg-to { color: var(--ink); font-weight: 600; }
.nav-leg-to { margin-top: auto; }
.nav-leg.walk .nav-leg-body { color: var(--ink-muted); }
.nav-stops { padding: 4px 0 4px 8px; border-left: 2px solid var(--border); font-size: 12px; color: var(--ink-muted); display: flex; flex-direction: column; gap: 3px; }
.nav-stop-t { display: inline-block; min-width: 62px; white-space: nowrap; color: var(--ink-faint); }
/* "3 min early" under the time, wrapping in the time's column rather than widening it. */
.nav-leg-t .nav-delay { display: block; max-width: 66px; white-space: normal; line-height: 15px; }
.nav-delay.late { color: var(--danger); font-weight: 700; font-size: 12px; }
.nav-delay.early { color: var(--success); font-weight: 700; font-size: 12px; }

/* One ring for everything on the page that can take focus. The two rows of
   the route box light the box around them instead. */
.nav-sheet :focus-visible, .nav-modebar :focus-visible, .nav-skip:focus-visible, .nav-note :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-end:focus-visible { outline: none; }
.nav-route:has(.nav-end:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }

/* Under 360 wide the words are a size down, so "At Grand Central?" still
   fits beside its two answers and GO beside the longest time. */
@media (max-width: 359px) {
  /* On a short map the type and locate buttons are a row at the right, level
     with the note: it starts at the left edge and stops short of them. */
  .nav-note { left: 10px; transform: none; max-width: calc(100% - 116px); }
  .nav-note-text { -webkit-line-clamp: 3; }      /* narrower, so a sentence that was two lines is three: still said whole */
  .nav-note.low { left: 50%; transform: translateX(-50%); max-width: calc(100% - 28px); }
  #nav-to { font-size: 16px; }
  .nav-ask { gap: 3px; padding-right: 3px; }
  .nav-ask-text { font-size: 13px; letter-spacing: -.15px; }
  .nav-tc-b .nav-alert-chip { font-size: 0; gap: 0; padding: 0 2px; }      /* the mark alone: the facts beside it need the room */
  .nav-ask-btn { min-width: 40px; padding: 0 8px; }
  .nav-tc-big { font-size: 22px; letter-spacing: -.5px; }
  .nav-when-chip { padding: 0 12px; }
  .nav-when-chip svg { display: none; }
  /* Under From and To the chip has the row to itself: it keeps its ▾ (21 Oct 2026). */
  .nav-sched-whenrow .nav-when-chip { padding: 0 10px 0 12px; }
  .nav-sched-whenrow .nav-when-chip svg { display: inline; }
  .nav-tc-btn.go { padding: 0 14px; }
  /* The save step: four names and "Or a name of your own" in 292px. The box
     itself stays at 16px (under it a phone zooms the page on focus). */
  .nav-save-chips { gap: 6px; }
  .nav-save-chips .nav-pill { padding: 0 11px; }
  .nav-save-btn { padding: 0 13px; }
  /* A place far away: the tag is the news, and there is no room beside it for two letters of an address. */
  .nav-row-detail.far > span:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-sheet, .nav-sheet-body > *, .nav-skip, .nav-note, .nav-route.pulse { animation: none; transition: none; }
  .nav-fold, .nav-step-chev svg, .nav-gostrip-chev svg, .nav-sheet-chev svg, .nav-spot-ico, .nav-switch, .nav-switch::after { transition: none; }
  .nav-trip-card.loading .nav-bar-a, .nav-trip-card.loading .nav-bar-b, .nav-dot.wait, .nav-leave.urgent .nav-leave-big { animation: none; }
}

/* Full-screen call: the other person fills the window, you ride in a corner. */
.call-layer.full { background: #000; }
.call-layer.full .call-box {
  position: fixed; inset: 0; width: auto; max-height: none; border-radius: 0; padding: 0; overflow: hidden; background: #000;
}
.call-layer.full .call-main { position: absolute; inset: 0; }
.call-layer.full .call-main .call-tile { width: 100%; height: 100%; border-radius: 0; background: #0c0c0f; }
.call-layer.full .call-main .call-face { font-size: min(28vw, 180px); color: #55555f; }
.call-layer.full .call-main .call-name { display: none; }
.call-layer.full .call-pip {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: min(28vw, 180px); aspect-ratio: 3 / 4;
  border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); cursor: pointer; z-index: 2;
}
.call-layer.full .call-pip .call-tile { width: 100%; height: 100%; }
.call-layer.full .call-pip .call-face { font-size: 36px; }
.call-layer.full .call-top {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 16px; right: calc(min(28vw, 180px) + 28px); text-align: left; z-index: 2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.call-layer.full .call-top .call-title { font-size: 19px; }
.call-layer.full .call-top .call-sub { color: #d4d4dc; }
.call-layer.full .call-strip {
  position: absolute; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; gap: 8px; justify-content: center; z-index: 2;
}
.call-layer.full .call-strip .call-tile { width: 88px; height: 88px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.15); }
.call-layer.full .call-controls {
  position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 2;
}
.call-layer.full .call-btn { background: rgba(38, 38, 43, 0.82); backdrop-filter: blur(10px); }
.call-layer.full .call-error { position: absolute; left: 16px; right: 16px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 2; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }

/* the conversation head wears a face */
.stack-title.with-face { display: flex; align-items: center; gap: 10px; text-align: left; justify-content: center; }
.head-face { width: 34px; height: 34px; border-radius: 17px; flex: none; object-fit: cover; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.head-face svg { width: 18px; height: 18px; }
.head-words { min-width: 0; }

/* ---- Community (server/web/pages/community.js · components/pages/CommunityPage.tsx) ----
   Three levels: the list of communities (rows, like Messages), a community
   with its rooms down a rail the way a Discord server has, and a room — a
   chat stream, or a board ranked like a subreddit. */
.cm { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.page-head.cm-head { padding-left: 58px; padding-right: 64px; gap: 8px; }
.cm-head .apps-title { flex: 1; min-width: 0; }
.cm-title { font-size: 21px; font-weight: 800; letter-spacing: -0.3px; flex: 1; }
.cm-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 16px; }
.cm-sub { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 16px 4px 6px; }
.cm-round {
  flex: none; width: 34px; height: 34px; border-radius: 17px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.cm-round svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 36; }
.cm-round:hover { border-color: var(--accent); color: var(--accent); }
.cm-dots { font-size: 18px; font-weight: 800; line-height: 1; }
.cm-search {
  flex: 0 1 220px; min-width: 90px; height: 34px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); padding: 0 10px; font: inherit; font-size: 13.5px;
}
.cm-search.sm { height: 30px; flex: 0 1 180px; font-size: 13px; }
.cm-search:focus { outline: none; border-color: var(--accent); }
.cm-unread {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--bg);
  font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.cm-unread.sm { min-width: 18px; height: 18px; font-size: 11px; }
.cm-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border-radius: 6px; padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}
.cm-linkbtn { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--ink-faint); cursor: pointer; }
.cm-linkbtn:hover { color: var(--accent); }
.cm-linkbtn.strong { color: var(--accent); font-weight: 700; }
.cm-blurb { font-size: 13px; margin: 2px 0 10px; }
.cm-form { display: flex; flex-direction: column; gap: 6px; }
.cm-form .cm-sub:first-child { margin-top: 4px; }

/* the emoji tile every community wears */
.cm-tile {
  width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex: none; line-height: 1;
}
.cm-tile.home { background: var(--ink); color: var(--bg); }
.cm-tile.sm { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
.cm-tile.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; }
.cm-tile.xl { width: 88px; height: 88px; border-radius: 24px; font-size: 44px; margin: 0 auto; }

/* ---- the list of communities: rows, like conversations ---- */
.cm-list { padding-top: 4px; }
.cm-rows { display: flex; flex-direction: column; }
.cm-space-row {
  display: flex; gap: 12px; align-items: center; padding: 10px 6px; border-radius: 14px; cursor: pointer;
  transition: background 0.12s ease;
}
.cm-space-row:hover { background: var(--surface); }
.cm-space-row + .cm-space-row { border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; }
.cm-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cm-row-name { font-size: 15.5px; font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cm-space-row.unread .cm-row-name { font-weight: 800; }
.cm-row-time { margin-left: auto; font-size: 12px; flex: none; }
.cm-pin-ico { display: inline-flex; color: var(--ink-faint); }
.cm-pin-ico svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 36; }
.cm-lock { font-size: 11px; }
.cm-row-preview {
  font-size: 13.5px; color: var(--ink-muted); margin-top: 2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* preview: the last line said in a community — a click opens it */
}
.cm-space-row.unread .cm-row-preview { color: var(--ink); }
.cm-explore-empty { padding: 8px 6px 16px; font-size: 13.5px; }
.cm-emoji-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cm-emoji-pick {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); font-size: 20px; cursor: pointer; line-height: 1;
}
.cm-emoji-pick.on { border-color: var(--accent); background: var(--accent-soft); }
.cm-emoji-custom { width: 110px !important; }
.cm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--surface); flex: none; }
.cm-seg-btn { border: 0; background: transparent; color: var(--ink-muted); padding: 7px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.cm-seg-btn.on { background: var(--ink); color: var(--bg); }
.cm-front { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 20px; }
.cm-front-name { font-size: 22px; font-weight: 800; }

/* ---- one community: the rail and the room ---- */
.cm-space { display: flex; flex: 1; min-height: 0; }
.cm-space.wide .cm-rail { width: 250px; flex: none; border-right: 1px solid var(--border); }
/* the rail is narrow and the shell's burger takes its corner: the name, not the tile, gets the room */
.cm-space.wide .cm-rail-head .cm-tile { display: none; }
.cm-space:not(.wide) .cm-rail, .cm-space:not(.wide) .cm-main { flex: 1; }
.cm-rail { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.cm-rail-head { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 10px 8px 58px; min-height: 56px; }
.cm-space:not(.wide) .cm-rail-head { padding-left: 58px; padding-right: 64px; }
.cm-space.wide .cm-rail-head { padding-left: 58px; padding-right: 8px; }
.cm-rail-title { font-size: 15.5px; font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.cm-rail-blurb { font-size: 12.5px; padding: 0 14px 8px; line-height: 1.35; }
.cm-rail-join { margin: 0 14px 8px; align-self: flex-start; }
.cm-rail-rooms { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 8px; }
.cm-rail-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 8px 4px; }
.cm-rail-room {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 9px;
  background: none; border: 0; color: var(--ink-muted); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.cm-rail-room:hover { background: var(--surface); color: var(--ink); }
.cm-rail-room.active { background: var(--accent-soft); color: var(--accent); }
.cm-rail-room.unread { color: var(--ink); font-weight: 800; }
.cm-rail-room.faint { font-weight: 500; }
.cm-rail-glyph { width: 20px; text-align: center; font-size: 15px; color: var(--ink-faint); flex: none; }
.cm-rail-room.active .cm-rail-glyph { color: var(--accent); }
.cm-rail-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cm-rail-foot { display: flex; gap: 4px; padding: 8px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.cm-rail-tool {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 9px; border: 0; background: none; color: var(--ink-muted);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cm-rail-tool:hover { background: var(--surface); color: var(--ink); }
.cm-rail-tool svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 36; }
.cm-space:not(.wide) .cm-rail-room { padding: 11px 10px; font-size: 15.5px; }
.cm-space:not(.wide) .cm-rail-rooms { padding: 4px 10px; }

.cm-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1; }
.cm-room-head {
  display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--border); min-height: 56px; flex: none;
}
.cm-space:not(.wide) .cm-room-head { padding-left: 58px; padding-right: 64px; }
.cm-space.wide .cm-room-head { padding-right: 64px; }
.cm-room-title { display: flex; align-items: baseline; gap: 6px; font-size: 16px; font-weight: 800; min-width: 0; overflow: hidden; white-space: nowrap; }
.cm-room-glyph { color: var(--ink-faint); font-weight: 800; }
.cm-room-blurb { font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; margin-left: 6px; }
.cm-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px 16px; }
.cm-scroll.board { padding: 10px 12px 20px; }
.cm-joinbar {
  display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600;
}
.cm-newpost { flex: none; }

/* chat: a stream where one person's lines sit under one name */
.cm-stream { display: flex; flex-direction: column; }
.cm-day { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--ink-faint); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.cm-day::before, .cm-day::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cm-chat-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 40px 8px 24px; }
.cm-chat-empty-title { font-size: 22px; font-weight: 800; }
.cm-msg { position: relative; display: flex; gap: 12px; padding: 6px 8px; margin-top: 10px; border-radius: 10px; }
.cm-msg.joined { margin-top: 0; padding-top: 2px; padding-bottom: 2px; }
.cm-msg:hover { background: var(--surface); }
.cm-msg-gutter { width: 36px; flex: none; display: flex; justify-content: center; align-items: flex-start; }
.cm-msg-time { font-size: 10.5px; color: var(--ink-faint); opacity: 0; padding-top: 4px; white-space: nowrap; }
.cm-msg:hover .cm-msg-time { opacity: 1; }
.cm-msg-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.cm-msg-when { font-size: 11.5px; }
.cm-msg-text { font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.cm-msg-foot { display: flex; gap: 6px; margin-top: 4px; }
.cm-react {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cm-react.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cm-react svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 36; }
.cm-hover {
  position: absolute; top: -12px; right: 8px; display: none; gap: 2px; padding: 2px; border-radius: 9px; background: var(--raised); border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.cm-msg:hover .cm-hover { display: flex; }
.cm-hbtn { border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: 13px; padding: 4px 7px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.cm-hbtn:hover { background: var(--accent-soft); color: var(--accent); }
.cm-hbtn.on { color: var(--danger); }
.cm-hbtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 36; }
.cm-msg.removed { opacity: 0.6; }
@media (hover: none) { .cm-hover { display: flex; position: static; box-shadow: none; border: 0; background: none; margin-top: 2px; padding: 0; } .cm-msg { flex-wrap: wrap; } .cm-msg .cm-hover { width: 100%; padding-left: 48px; } }

/* boards: a feed ranked like a subreddit */
.cm-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-chip {
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cm-chip.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.cm-chip.planned.on { background: #9A5B00; border-color: #9A5B00; color: #fff; }
.cm-chip.shipped.on { background: #1F6B3A; border-color: #1F6B3A; color: #fff; }
.cm-feed { display: flex; flex-direction: column; gap: 8px; }
.cm-post {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 10px 10px;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.cm-post:hover { border-color: var(--ink-faint); }
.cm-post.pinned { border-color: var(--accent); }
.cm-post.removed { opacity: 0.6; }
.cm-post-tags { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.cm-vote {
  display: flex; flex-direction: column; align-items: center; flex: none; min-width: 40px;
  padding: 5px 4px; border-radius: 10px; color: var(--ink-muted); background: var(--bg); border: 1px solid var(--border); cursor: pointer; font: inherit;
  transition: transform 0.1s ease;
}
.cm-vote:hover { border-color: var(--accent); color: var(--accent); }
.cm-vote:active { transform: scale(0.94); }
.cm-vote.on { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.cm-arrow { font-size: 12px; line-height: 1; }
.cm-score { font-size: 13.5px; font-weight: 800; margin-top: 2px; }
.cm-post-title { font-size: 15.5px; font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-post-title.big { font-size: 19px; margin: 4px 0 6px; }
.cm-pin { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.cm-pin svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 40; }
.cm-snippet {
  font-size: 13.5px; color: var(--ink-muted); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; /* preview: a post's words under its title — a click opens the post */
}
.cm-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; margin-top: 6px; color: var(--ink-muted); }
.cm-meta-replies { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; }
.cm-meta-replies svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 36; }
.cm-name { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.cm-name:hover, .cm-avatar.who:hover { text-decoration: underline; cursor: pointer; }
.cm-status { font-size: 11px; font-weight: 700; border-radius: 7px; padding: 2px 7px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.cm-status.planned { background: #FFF1D6; color: #9A5B00; }
.cm-status.shipped { background: #DCF3E4; color: #1F6B3A; }
.cm-status.declined { background: var(--surface); color: var(--ink-faint); border: 1px solid var(--border); }
[data-theme="dark"] .cm-status.planned { background: #3A2E12; color: #F5D08A; }
[data-theme="dark"] .cm-status.shipped { background: #16311F; color: #8FD9A8; }
.cm-where { font-size: 11px; font-weight: 700; color: var(--ink-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
.cm-match { font-size: 13px; margin-top: 4px; color: var(--ink-muted); border-left: 2px solid var(--border); padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* preview: the reply a search found — a click opens its thread */ }
.cm-results-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.cm-compose-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--accent); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.cm-compose-head { display: flex; align-items: center; gap: 8px; }
.cm-compose-title { font-weight: 700; font-size: 15px; }
.cm-similar { display: flex; flex-direction: column; gap: 4px; }
.cm-similar-hit {
  display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; font: inherit; font-size: 13.5px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; color: var(--ink);
}
.cm-similar-hit:hover { border-color: var(--accent); }
.cm-score-sm { font-size: 12px; font-weight: 700; color: var(--accent); flex: none; }

/* a thread */
.cm-full { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.cm-full.removed { opacity: 0.7; }
.cm-text { font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin-top: 4px; }
.cm-text a { color: var(--accent); }
.cm-mention { background: var(--accent-soft); color: var(--accent); border: none; border-radius: 6px; padding: 0 4px; font: inherit; font-weight: 600; cursor: pointer; }
.cm-mention.me { background: var(--accent); color: var(--bg); }
.cm-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); align-items: center; }
.cm-select { padding: 5px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--border); }
.cm-reply-head { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin: 16px 4px 6px; }
.cm-replies { display: flex; flex-direction: column; }
.cm-reply { display: flex; gap: 10px; padding: 10px 6px; border-left: 2px solid var(--border); margin-left: 12px; padding-left: 12px; }
.cm-reply:hover { border-left-color: var(--accent); }
.cm-reply-acts { display: flex; gap: 12px; margin-top: 4px; }

/* the boxes you type in */
.cm-compose { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px 6px; border-top: 1px solid var(--border); background: var(--bg); flex: none; }
.cm-input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink);
  padding: 9px 13px; font: inherit; font-size: 15px; max-height: 120px; resize: none;
}
.cm-input:focus { outline: none; border-color: var(--accent); }
.cm-send {
  flex: none; width: 40px; height: 40px; border-radius: 20px; border: 0; background: var(--accent); color: var(--bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cm-send svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 36; }

/* people */
.cm-avatar {
  width: 30px; height: 30px; border-radius: 15px; flex: none; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; object-fit: cover; overflow: hidden;
}
.cm-avatar.xs { width: 18px; height: 18px; border-radius: 9px; font-size: 8px; }
.cm-avatar.md { width: 36px; height: 36px; border-radius: 18px; font-size: 13px; }
.cm-avatar.lg { width: 56px; height: 56px; border-radius: 28px; font-size: 20px; }
.cm-profile { display: flex; gap: 14px; align-items: center; margin: 6px 0 12px; }
.cm-profile-name { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.cm-stats { display: flex; gap: 18px; }
.cm-stat { display: flex; flex-direction: column; }
.cm-stat b { font-size: 17px; }
.cm-stat span { font-size: 12px; }
.cm-member { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cm-member-name { font-weight: 700; font-size: 14.5px; }
.cm-menu { display: flex; flex-direction: column; gap: 2px; }
.cm-menu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 10px; border-radius: 10px; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.cm-menu-row:hover { background: var(--surface); }
.cm-menu-row.danger { color: var(--danger); }
.cm-menu-row svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 36; }
.cm-inbox-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-radius: 12px; cursor: pointer; }
.cm-inbox-item:hover { background: var(--surface); }
.cm-inbox-item.new { background: var(--accent-soft); }
.cm-inbox-what { font-size: 14px; line-height: 1.35; }
.btn.ghost.danger { color: var(--danger); }
.cm-search-toggle { display: none; }
/* wide: the board reads as a column, the way a subreddit does, not a banner */
.cm-space.wide .cm-scroll.board { padding: 12px 24px 24px; }
.cm-space.wide .cm-scroll.board > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.cm-space.wide .cm-scroll.chat { padding: 8px 20px 16px; }
.cm-space.wide .cm-compose { padding-left: 20px; padding-right: 20px; }
@media (max-width: 560px) {
  .cm-head .apps-title { flex: 1 1 auto; }
  .cm-head .cm-search { flex: 1 1 100px; }
  .cm-room-blurb { display: none; }
  .cm-room-head { flex-wrap: wrap; }
  .cm-room-head .cm-search.sm { display: none; flex: 1 1 100%; order: 10; }
  .cm-room-head.searching .cm-search.sm { display: block; }
  .cm-search-toggle { display: inline-flex; }
  .cm-room-head.searching .cm-search-toggle { border-color: var(--accent); color: var(--accent); }
}

/* ===========================================================================
   Messaging, the premium pass (6 Sep): bubbles that read as a run, a menu
   that floats, sheets that float, one sheet to start a conversation, the
   conversation's own panel, and games that move.
   =========================================================================== */

/* ---- bubbles: a run of messages from one person reads as one block ----
   The small corner is where a bubble meets the next from the same person;
   the tail (smallest) only on the last of the run. Words never split: a
   line breaks between words, and only a word wider than the bubble breaks. */
.thread-bubble {
  border-radius: 20px; padding: 8px 14px; margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow-wrap: break-word; word-break: normal; hyphens: none;
  transition: transform 160ms ease;
}
.thread-bubble:not(.run-last) { margin-bottom: 2px; }
.thread-bubble:not(.mine):not(.run-first) { border-top-left-radius: 6px; }
.thread-bubble:not(.mine):not(.run-last) { border-bottom-left-radius: 6px; }
.thread-bubble:not(.mine).run-last { border-bottom-left-radius: 4px; }
.thread-bubble.mine:not(.run-first) { border-top-right-radius: 6px; }
.thread-bubble.mine:not(.run-last) { border-bottom-right-radius: 6px; }
.thread-bubble.mine.run-last { border-bottom-right-radius: 4px; }
.thread-bubble.emoji-only, .thread-bubble.game { box-shadow: none; }
.thread-bubble.flash { animation: bubble-flash 1.5s ease; }
@keyframes bubble-flash { 0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } 30% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 6px var(--accent); } }
/* A new message slides into place rather than popping — only one that just
   arrived (pages/messages.js marks it .arrive), never the newest bubble again
   on every redraw. */
.thread-bubble.arrive { animation: bubble-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---- hold a message: the menu floats beside it over a dimmed thread ---- */
.thread-bubbles { position: relative; }
.msg-menu-dim { position: fixed; inset: 0; z-index: 30; background: transparent; }
/* Everything but the held message dims; the held one lifts. */
/* The held row may be nested (a run of theirs wraps it), so the exclusion is
   the top-level row that CONTAINS it. Opacity only: a filter would make the
   dimmed row the containing block for the menu, which is positioned in the
   thread's own coordinates — that is how the menu of a held message from the
   other person used to land in the wrong place. */
.thread-bubbles.menu-open > div > *:not(.has-menu):not(:has(.has-menu)) { opacity: 0.35; transition: opacity 180ms ease; }
.thread-bubbles.menu-open .has-menu .thread-bubble.held { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.thread-bubbles.menu-open .has-menu .thread-bubble:not(.held) { opacity: 0.35; }
.msg-menu-react, .msg-menu-list {
  position: absolute; z-index: 32; background: var(--raised, var(--surface)); border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); animation: menu-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left;
}
@keyframes menu-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.msg-menu-react { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 24px; }
.msg-menu-react.wide { border-radius: 16px; padding: 8px; }
.msg-menu-react .emoji-panel { margin: 0; border: none; box-shadow: none; padding: 0; }
.msg-react { width: 38px; height: 38px; border-radius: 19px; background: none; font-size: 22px; display: grid; place-items: center; cursor: pointer; animation: react-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.msg-react:nth-child(2) { animation-delay: 30ms; } .msg-react:nth-child(3) { animation-delay: 60ms; } .msg-react:nth-child(4) { animation-delay: 90ms; }
.msg-react:nth-child(5) { animation-delay: 120ms; } .msg-react:nth-child(6) { animation-delay: 150ms; } .msg-react:nth-child(7) { animation-delay: 180ms; }
@keyframes react-pop { from { transform: scale(0); } to { transform: scale(1); } }
.msg-react.on { background: var(--accent-soft); }
.msg-react:hover { background: var(--accent-soft); }
.msg-react.more { width: 30px; height: 30px; border: 1px solid var(--border); font-size: 16px; color: var(--ink-muted); margin-left: 2px; }
/* Pops from its foot: the bottom edge is what sets the thread's scroll range
   while the menu lands, and it must not move during the pop or the scroll
   that brings the list into view comes up short. */
.msg-menu-list { width: 220px; border-radius: 16px; padding: 4px 0; display: flex; flex-direction: column; transform-origin: 50% 100%; }
.msg-action { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px; background: none; border: none; border-top: 1px solid var(--border); color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; text-align: left; }
.msg-action:first-child { border-top: none; }
.msg-action:hover { background: var(--accent-soft); }
.msg-action.danger { color: var(--danger, #C43D3D); }
.msg-action svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 34; opacity: 0.7; }

/* ---- the composer dock: the box, and the picker after it (picker.css) ---- */
.composer-dock { position: relative; flex: none; display: flex; flex-direction: column; }
.plus-host {
  border: 1px solid var(--border); border-radius: 18px; margin-bottom: 8px;
  max-height: 340px; overflow-y: auto; background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  animation: sheet-up 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes sheet-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.plus-heading.strong { font-size: 15px; font-weight: 800; color: var(--ink); }

/* ---- the games rail: a card per game, drawn as its own board ---- */
.game-rail { display: flex; gap: 10px; padding: 10px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.game-rail::-webkit-scrollbar { display: none; }
.game-cardlet {
  flex: none; width: 148px; min-height: 196px; border-radius: 20px; border: none; overflow: hidden;
  display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer; scroll-snap-align: start;
  transition: transform 140ms ease; font: inherit;
}
.game-cardlet:hover { transform: translateY(-2px); }
.game-cardlet:active { transform: scale(0.96); }
.game-cardlet-art { height: 100px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); }
.game-cardlet-words { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 10px; }
.game-cardlet-title { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.game-cardlet-blurb { font-size: 11.5px; line-height: 15px; opacity: 0.8; }
.game-cardlet-pills { display: flex; gap: 5px; margin-top: auto; padding-top: 6px; }
.game-cardlet-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 2px 6px; background: rgba(255, 255, 255, 0.16); }
.game-cardlet-pill svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 44; }
.game-cardlet-pill.group { background: var(--accent); color: var(--bg); font-weight: 800; }
.mini-board { width: 76px; height: 76px; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 6px; overflow: hidden; border: 2px solid #6B4B2A; }
.mini-sq { display: grid; place-items: center; position: relative; }
.mini-sq.light { background: #F0D9B5; } .mini-sq.dark { background: #B58863; }
.mini-piece { width: 16px; height: 16px; }
.mini-disc { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid; }
.mini-disc.s0 { background: #C8362A; border-color: #F07A6E; } .mini-disc.s1 { background: #1E1E24; border-color: #4A4A56; }
.mini-manc { display: flex; gap: 4px; padding: 5px; border-radius: 12px; background: #8B5A2B; width: 108px; box-sizing: border-box; }
.mini-store { width: 14px; border-radius: 7px; background: #2E1D0E; flex: none; }
.mini-rows { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.mini-row { display: flex; gap: 4px; }
.mini-pit { width: 22px; height: 22px; border-radius: 50%; background: #2E1D0E; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1px; padding: 3px; box-sizing: border-box; }
.mini-pit .stone { width: 5px; height: 5px; }
.mini-c4 { width: 96px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 5px; border-radius: 10px; background: #2F6FBF; box-sizing: border-box; }
.mini-hole { aspect-ratio: 1; border-radius: 50%; background: #16386A; }
.mini-hole.red { background: #D9483B; } .mini-hole.yellow { background: #F0B93A; }
.mini-ttt { width: 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mini-cell { aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.mini-cell.x { color: #FF8A7A; } .mini-cell.o { color: #7FC8FF; }
.mini-rps { display: flex; gap: 6px; align-items: center; }
.mini-hand { width: 40px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; font-size: 22px; }
.mini-hand.h0 { transform: rotate(-12deg); } .mini-hand.h1 { transform: translateY(-6px); } .mini-hand.h2 { transform: rotate(12deg); }
.mini-ring { position: relative; width: 96px; height: 72px; }
.mini-floe { position: absolute; left: 12px; top: 18px; width: 72px; height: 40px; border-radius: 50%; background: #E9F3FB; box-shadow: 0 5px 0 #7FA6C9; }
.mini-face { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, 0.7); font-size: 10px; color: #fff; font-weight: 900; }
.mini-face.out { opacity: 0.35; transform: scale(0.85); }
.mini-face.crown { transform: scale(1.25); font-size: 11px; }

/* ---- boards that move ---- */
.ttt-cell.pop { animation: mark-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mark-pop { from { transform: scale(0.4); } to { transform: none; } }
.c4-cell.drop { animation: disc-drop calc(120ms + var(--rows, 1) * 55ms) cubic-bezier(0.34, 1.2, 0.64, 1); }
@keyframes disc-drop { from { transform: translateY(calc(var(--rows, 1) * -110%)); } to { transform: none; } }
.piece.slid, .disc.slid { animation: piece-slide 220ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes piece-slide { from { transform: translate(calc(var(--dx, 0) * 12.5cqw), calc(var(--dy, 0) * 12.5cqw)); } to { transform: none; } }
.pit.sowing, .store.sowing { animation: pit-sow 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) var(--sow, 0ms) both; }
@keyframes pit-sow { 0% { transform: none; } 40% { transform: scale(1.16); } 100% { transform: none; } }
.mancala { position: relative; }
.hop-stone { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #E1D08A; border: 1px solid rgba(0, 0, 0, 0.35); pointer-events: none; z-index: 2; }
.rps-reveal { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 4px 0; }
.rps-reveal b { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.06em; }
.rps-hand { font-size: 44px; display: inline-block; animation: hand-reveal 0.5s ease both; }
@keyframes hand-reveal { 0% { transform: rotate(0) scale(0.8); } 20% { transform: rotate(18deg) scale(0.85); } 40% { transform: rotate(-18deg) scale(0.9); } 60% { transform: rotate(18deg) scale(0.95); } 75% { transform: rotate(0) scale(1.12); } 100% { transform: none; } }
.game-card { transition: border-color 260ms ease, box-shadow 260ms ease; }
.game-card.just-done .game-player.winner { animation: win-swell 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes win-swell { 0% { transform: none; } 40% { transform: scale(1.1); } 100% { transform: none; } }
.game-player.winner .game-pname::before { content: '🏆 '; }

/* ---- knockout: the arena is a canvas (knockoutArena.js); this is the frame around it ---- */
.knockout { display: flex; flex-direction: column; gap: 10px; }
.ko-arena { width: 100%; }
.ko-kos { font-size: 11px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; }
.ko-kos b { color: var(--ink); }
.ko-out { font-size: 11px; color: var(--ink-muted); text-align: center; }
.ko-actions { display: flex; gap: 8px; justify-content: center; align-items: center; }

/* ---- new message: one sheet, the box on top of the contacts ---- */
.to-sheet { max-width: 480px; display: flex; flex-direction: column; max-height: 80vh; }
.to-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); padding: 0 14px; margin-bottom: 10px; }
.to-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 16px; padding: 12px 0; color: var(--ink); }
.to-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.to-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 4px; border: none; border-bottom: 1px solid var(--border); background: none; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.to-row:last-child { border-bottom: none; }
.to-row:hover { background: var(--accent-soft); }
.to-row.on { background: var(--accent-soft); }
.to-row.reach { border-radius: 12px; }
.to-face { flex: none; width: 34px; height: 34px; border-radius: 17px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 700; object-fit: cover; }
.to-face.accent { background: var(--accent); color: var(--bg); }
.to-face svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 36; }
.to-row > svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 36; flex: none; }
.to-tick { flex: none; width: 22px; height: 22px; border-radius: 11px; border: 1.5px solid var(--border); display: grid; place-items: center; }
.to-tick.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.to-tick svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 50; }

/* ---- the conversation's panel: tap the name at the top ---- */
.head-name { display: flex; align-items: center; gap: 3px; }
.head-name svg { width: 13px; height: 13px; stroke: var(--ink-faint); fill: none; stroke-width: 40; flex: none; }
.info-panel { max-width: 460px; }
.info-identity { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 16px; text-align: center; }
.info-face { width: 84px; height: 84px; border-radius: 42px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 30px; font-weight: 800; object-fit: cover; margin-bottom: 8px; }
.info-face svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 30; }
.info-name { font-size: 22px; font-weight: 800; color: var(--ink); }
.info-quick-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.info-quick { flex: 1; max-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.info-quick svg { width: 21px; height: 21px; stroke: var(--accent); fill: none; stroke-width: 34; }
.info-quick.on { background: var(--ink); color: var(--bg); }
.info-quick.on svg { stroke: var(--bg); }
.bg-swatches { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: none; }
.bg-swatches::-webkit-scrollbar { display: none; }
.bg-swatch { flex: none; width: 72px; height: 88px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg); position: relative; display: flex; align-items: flex-end; overflow: hidden; cursor: pointer; padding: 0; }
.bg-swatch.on { border-color: var(--accent); }
.bg-swatch.on::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 10px; background: var(--accent); color: var(--bg); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.bg-swatch-label { width: 100%; font-size: 10.5px; font-weight: 700; text-align: center; padding: 4px 0; background: rgba(255, 255, 255, 0.72); color: #1A1A18; }
.bg-swatch-badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 11px; background: var(--ink); display: grid; place-items: center; }
.bg-swatch.on .bg-swatch-badge { display: none; }
.bg-swatch-badge svg { width: 13px; height: 13px; stroke: var(--bg); fill: none; stroke-width: 36; }
.info-card { border: 1px solid var(--border); border-radius: 16px; background: var(--bg); overflow: hidden; margin-bottom: 8px; }
.info-member { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: none; border-top: 1px solid var(--border); background: none; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.info-member:first-child { border-top: none; }
.info-member:disabled { cursor: default; }
.info-member:not(:disabled):hover { background: var(--accent-soft); }
.info-member > svg { width: 16px; height: 16px; stroke: var(--ink-faint); fill: none; stroke-width: 36; flex: none; }
.info-member .run-avatar { margin-bottom: 0; }
.danger-text { color: var(--danger, #C43D3D); }
.search-hit { display: block; width: 100%; text-align: left; padding: 8px 6px; border: none; border-top: 1px solid var(--border); background: none; color: var(--ink); cursor: pointer; font: inherit; }
.search-hit:hover { background: var(--accent-soft); }
.fav-slot { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; }
.fav-slot + .grow { flex: none; white-space: nowrap; }
.fav-slot ~ select.input { flex: 1; min-width: 0; width: auto; }
.fav-slot svg { width: 17px; height: 17px; stroke: var(--accent); fill: none; stroke-width: 34; }
@media (prefers-reduced-motion: reduce) {
  .thread-bubble, .msg-menu-react, .msg-menu-list, .plus-host, .ttt-cell.pop, .c4-cell.drop, .piece.slid, .disc.slid, .pit.sowing, .store.sowing, .rps-hand { animation: none !important; }
}

/* ---- Today: the two forms of the day (pages/today.js) ---- */
.today { display: flex; flex-direction: column; gap: 12px; }
.today-card { border-radius: 18px; border: 1px solid var(--border); background: var(--surface); padding: 14px; text-align: left; color: var(--ink); font: inherit; }
button.today-card { cursor: pointer; width: 100%; }
.today-title { font-size: 16.5px; font-weight: 800; }
.today-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: 2px; }
.today-faint { font-size: 12px; line-height: 16px; color: var(--ink-faint); margin-top: 4px; }
/* The saved places under "nudge me when I get somewhere": a sub-list of the
   switch above them, not more settings at the same level as it. */
.today-places { margin: 2px 0 6px 12px; padding-left: 12px; border-left: 2px solid var(--border); }
.today-places-head { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--ink-faint); padding: 4px 0 2px; }
.today-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--ink-faint); margin-bottom: 8px; }
.today-stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.today-yday { display: flex; align-items: center; gap: 10px; background: #FFF6E5; border-color: #F5D9A6; color: #6B4A0F; font-weight: 600; font-size: 14px; }
.today-yday svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }
.today-week { display: flex; justify-content: space-between; }
.today-day { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 36px; }
.today-barbox { height: 40px; display: flex; align-items: flex-end; }
.today-bar { width: 14px; border-radius: 7px; transition: height .3s ease; }
.today-wd { font-size: 11px; font-weight: 600; color: var(--ink-faint); }
.today-day.now .today-wd { color: var(--ink); font-weight: 800; }
.today-score { font-size: 10.5px; color: var(--ink-muted); height: 12px; }
.today-form.open { border-color: var(--accent); border-width: 1.5px; }
.today-formhead { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.today-formicon { width: 40px; height: 40px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.today-formicon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 30; }
.today-done svg, .today-chev svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 40; }
.today-done { color: var(--success, #2E7D4F); }
.today-chev { color: var(--ink-faint); }
.today-formbody { margin-top: 14px; }
.today-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.today-chip { border: 1px solid var(--border); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 7px 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.today-chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.today-inputrow { display: flex; align-items: center; gap: 8px; }
.today-inputrow .input { flex: 1; }
.today-add { width: 34px; height: 34px; border-radius: 17px; border: 0; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.today-add svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 40; }
.today-btn { width: 100%; margin: 0; padding: 13px; border-radius: 12px; font-weight: 700; background: var(--accent); color: var(--on-accent, #fff); }
.today-btn.dark { background: var(--ink); color: var(--bg); }
.today-link { background: none; border: 0; padding: 8px 0; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.today-ghost { border: 1px solid var(--border); background: none; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; flex: none; }
.today-tick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; font-size: 15px; }
.today-tick.big { padding: 11px 0; font-size: 16px; }
.today-box { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--ink-faint); display: flex; align-items: center; justify-content: center; flex: none; }
.today-box svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 56; }
.today-tick.done .today-box { background: var(--accent); border-color: var(--accent); }
.today-tick.done .today-ticktext { color: var(--ink-muted); text-decoration: line-through; }
.today-note { width: 100%; resize: vertical; }
.today-scorerow { display: flex; align-items: center; gap: 12px; }
.today-badge { width: 56px; height: 46px; border-radius: 12px; color: #fff; font-size: 20px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; }
.today-streakcard { display: flex; align-items: center; gap: 12px; }
.today-flame { font-size: 28px; flex: none; }
.today-streak { height: 30px; border-radius: 15px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; padding: 0 10px; cursor: pointer; }
.today-streak.lit { background: #FFF1D6; }
.today-sheet { width: min(440px, 92vw); max-height: 80vh; overflow-y: auto; }
.today-sheet-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.today-step { width: 30px; height: 30px; border-radius: 15px; border: 1px solid var(--border); background: none; color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.today-hour { width: 60px; text-align: center; font-weight: 700; font-size: 14px; }

/* ---- Social: the friends' feed, and the rooms behind a tab (pages/social.js) ---- */
.social-feed { display: flex; flex-direction: column; gap: 10px; }
.social-me { display: flex; align-items: center; gap: 12px; }
.social-me svg { width: 18px; height: 18px; stroke: var(--ink-faint); fill: none; stroke-width: 40; }
.social-list { display: flex; flex-direction: column; gap: 10px; }
.social-top { display: flex; align-items: center; gap: 10px; }
.social-face { width: 40px; height: 40px; border-radius: 20px; object-fit: cover; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.social-text { font-size: 15px; line-height: 20px; }
.social-badge { min-width: 44px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 0 8px; font-weight: 900; flex: none; }
/* A good day in the theme's own colour, a perfect one in green, a streak in
   flame: the wash is the colour, the figure the same colour taken dark enough
   (light enough, at night) to read on it. */
.social-badge { font-size: 17px; background: var(--accent-soft); color: var(--accent); }
.social-badge.full { background: #2E7D4F22; color: #256B43; }
.social-badge.streak { font-size: 13px; background: #F59E3C22; color: #B4530A; }
[data-theme="dark"] .social-badge.full { color: #6FCF97; }
[data-theme="dark"] .social-badge.streak { color: #F5A64A; }
.social-cheers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.social-cheer { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink-muted); }
.social-cheer.mine { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.social-cheer.faint { opacity: .4; }
.social-cheer:disabled { cursor: default; }
.social-n { font-size: 12.5px; font-weight: 700; }
.social-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 14px; gap: 6px; }
.social-empty svg { width: 40px; height: 40px; stroke: var(--ink-faint); fill: none; stroke-width: 24; }
/* The page starts under the floating rail, like the others do. */
.screen > .inner.today { padding-top: calc(52px + env(safe-area-inset-top)); }
/* ---- community as a server: colour, headings, rules, reactions, pins ---- */
.cm-rail { --space: var(--accent); }
.cm-rail-room.active { border-left: 3px solid var(--space); }
.cm-online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 4px; background: #2E9E6B; margin-right: 5px; vertical-align: 1px; }
.cm-rules { margin: 4px 8px 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--space); }
.cm-rules-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.cm-rules-text { font-size: 13px; line-height: 18px; color: var(--ink); white-space: pre-line; }
.cm-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cm-reactions .cm-react { font-size: 13px; }
.cm-picker { position: fixed; z-index: 60; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.cm-picker-btn { width: 34px; height: 34px; border-radius: 17px; border: 0; background: none; font-size: 19px; cursor: pointer; }
.cm-picker-btn:hover, .cm-picker-btn.on { background: var(--accent-soft); }
.cm-menu-reacts { display: flex; gap: 2px; padding: 4px 8px 8px; flex-wrap: wrap; }
.cm-pinned-strip { margin: 8px 12px 0; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); }
.cm-pinned-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.cm-pinned-head svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 40; }
.cm-pinned-line { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* preview: a pinned line — a click opens it */ }
.cm-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-swatch { width: 28px; height: 28px; border-radius: 14px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cm-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; }
.cm-swatch.none { background: var(--surface); border: 1px dashed var(--border); color: var(--ink-muted); font-weight: 700; }
.cm-swatch.none.on { border-style: solid; border-color: var(--ink); }
.cm-round.sm { width: 28px; height: 28px; font-size: 14px; }
.cm-round[disabled] { opacity: .3; cursor: default; }
.cm-muted { font-size: 12px; }

/* the strip of days scrolls; the picked one is lit */
.today-week { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; gap: 0; padding: 10px 6px; }
.today-week::-webkit-scrollbar { display: none; }
.today-day { flex: none; width: 44px; padding: 4px 0; border: 0; background: none; border-radius: 12px; cursor: pointer; font: inherit; }
.today-day.on { background: var(--accent-soft); }
.today-day.now .today-score { color: var(--accent); font-weight: 800; }

/* the main page: the name up top, the day under it */
.chat-home { display: flex; flex-direction: column; gap: 14px; padding-top: calc(48px + env(safe-area-inset-top)); }

/* ---- Past chats (pages/archive.js) ----
   One column, like the phone's list: the chats, then one of them read in
   place, with the way back and "Continue this chat" in a row at its top. */
.archive-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.archive-list { max-width: 760px; width: 100%; margin: 0 auto; padding: calc(48px + env(safe-area-inset-top)) clamp(12px, 3vw, 32px) 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; }
.archive-row.chat-list-item { border-radius: 12px; }
.archive-row .t { display: flex; align-items: center; gap: 8px; }
.archive-row .archive-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.archive-live { flex: none; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.archive-read { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Under the floating rail, like every page's first row (padding-top = the rail + the notch). */
.archive-head { display: flex; align-items: center; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; padding: calc(48px + env(safe-area-inset-top)) clamp(12px, 3vw, 32px) 0; box-sizing: border-box; }
.archive-head .btn { flex: none; white-space: nowrap; }
.archive-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: normal; overflow-wrap: break-word; }
/* The list's own head (UI review, 18 Oct 2026): its name and the way back; the list starts right under it. */
.archive-heading { margin: 0; font-size: 20px; font-weight: 800; }
/* A long link or word in a past chat wraps, as on the AI page, so only a table ever scrolls sideways. */
.archive-read .msg { overflow-wrap: anywhere; min-width: 0; }
.archive-head.archive-top + .archive-list { padding-top: 8px; }
/* An open chat: its name a line of its own beside Back, the button under it — never cut to "Plan a …". */
.archive-head:not(.archive-top) { flex-wrap: wrap; }
.archive-head:not(.archive-top) .archive-title { flex: 1 1 calc(100% - 60px); white-space: normal; }
.archive-head:not(.archive-top) .btn { margin-left: 0; }
.archive-read .chat-scroll { flex: 1; min-height: 0; }
.chat-wordmark.top { text-align: center; font-size: 36px; }
.today-home .today-card { margin: 0 2px; }
.today-home-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.today-track { height: 4px; border-radius: 2px; background: var(--border); margin-top: 8px; overflow: hidden; }
.today-fill { height: 4px; border-radius: 2px; }
.today-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 40; vertical-align: -2px; }

/* ---- Today: one live list a day (server/web/pages/today.js) ---- */
.today-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
/* The date gives way, never the buttons or the pill: with four icons, a
   streak and the offline pill in the row, a long date is cut, not wrapped. */
.today-head .today-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.today-head .today-pill { flex: none; white-space: nowrap; }
/* On a narrow phone the pill is a sync glyph and the count — the words
   would leave the date no room beside four buttons; "Send them now" is
   its title either way. */
/* A space of its own: the leading space of a flex item's text is dropped. */
.today-pill-more { margin-left: 4px; }
.today-pill-glyph { display: none; }
.today-pill-glyph svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 44; }
@media (max-width: 429px) {
  .today-head .today-pill-more { display: none; }
  .today-head .today-pill-glyph { display: inline-flex; margin-right: 3px; }
}
.today-strip { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scrollbar-width: none; }
.today-strip::-webkit-scrollbar { display: none; }
.today-strip .today-day { scroll-snap-align: center; flex: none; }
/* ---- the face on the day (dayBuddy.js) ----
   One character, four moods, the same shapes the phone and both home-screen
   widgets draw. Only the movement is CSS's own: angry shivers, sad sags,
   happy bounces, a finished day cheers. `prefers-reduced-motion` stops all
   four — the colour and the mouth still say everything they need to. */
.buddy-row { display: flex; align-items: center; gap: 14px; padding: 10px 4px 12px; }
.buddy-say { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.buddy-line { font-weight: 700; font-size: 15px; color: var(--ink); }
.buddy-count { font-size: 12px; color: var(--ink-faint); }
.buddy-track { height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.buddy-track > i { display: block; height: 100%; border-radius: 4px; transition: width 260ms ease; }
.buddy-face { will-change: transform; }
.buddy-angry { animation: buddy-shake 4100ms ease-in-out infinite; }
.buddy-sad { animation: buddy-sag 4400ms ease-in-out infinite; }
.buddy-happy { animation: buddy-bounce 1800ms ease-in-out infinite; }
.buddy-done { animation: buddy-cheer 2800ms ease-in-out infinite; }
/* Three shivers and then a stare, rather than a permanent twitch: a face that
   never stops moving is one people put their thumb over. */
@keyframes buddy-shake {
  0%, 16%, 100% { transform: translateX(0); }
  2%, 8%, 14% { transform: translateX(-3px); }
  5%, 11% { transform: translateX(3px); }
}
@keyframes buddy-sag { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes buddy-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
@keyframes buddy-cheer { 0%, 60%, 100% { transform: translateY(0) rotate(-5deg); } 30% { transform: translateY(-5px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) {
  .buddy-angry, .buddy-sad, .buddy-happy, .buddy-done { animation: none; }
}

.today-count { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 13px; margin: 2px 0 6px; }
.today-pill { min-width: 30px; height: 21px; border-radius: 11px; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.today-list { display: flex; flex-direction: column; gap: 7px; }
.today-item { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 11px 13px; }
.today-item.done .today-itemtext { color: var(--ink-faint); text-decoration: line-through; }
.today-itemtext { flex: 1; min-width: 0; font-size: 15.5px; }
.today-item.editing { border-color: var(--accent); }
.today-editinput { display: block; width: 100%; font: inherit; color: var(--ink); background: transparent; border: 0; outline: 0; padding: 0; resize: none; field-sizing: content; }
.today-check { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--ink-faint); cursor: pointer; flex: none; }
.today-item.done .today-check { color: #2E7D4F; }
.today-check svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 36; }
.today-rep { color: var(--ink-faint); display: flex; }
.today-rep svg { width: 15px; height: 15px; }
.today-x { border: 0; background: none; color: var(--ink-faint); cursor: pointer; padding: 2px; opacity: 0; transition: opacity 120ms; }
.today-x:hover { color: var(--ink); }
/* Sized like the bell. Without it the icons had no width and the row's flex
   squeezed each button to a few pixels: there, but invisible. */
.today-x { flex: none; }
.today-x svg { display: block; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }
.today-item:hover .today-x, .today-item:focus-within .today-x { opacity: 1; }
/* Marked incomplete: a thing not done, settled. It keeps its place and its
   weight in the score — the X only says the question is closed. */
.today-item.skipped .today-itemtext { color: var(--ink-faint); text-decoration: line-through; }
.today-item.skipped .today-check { color: #E0565B; }
/* The X is two lines with no area, so it needs a stroke — the tick and the
   circle are filled paths and keep the look they already had. */
.today-item.skipped .today-check svg { stroke: currentColor; fill: none; stroke-width: 44; }
/* How many times this has been put off. */
.today-snoozed { display: inline-flex; align-items: center; gap: 2px; flex: none; border-radius: 9px; padding: 2px 6px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; }
.today-snoozed svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 40; }
/* The bubble on a past day in the strip: how much of it is still a question. */
.today-barbox { position: relative; }
.today-loose {
  position: absolute; top: -3px; right: -5px; min-width: 15px; height: 15px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  background: #E0565B; color: #fff; font-size: 9.5px; font-weight: 800;
  border: 1.5px solid var(--bg);
}
.today-addrow { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--border); border-radius: 14px; padding: 4px 8px 4px 12px; color: var(--ink-faint); }
/* icon() draws an svg with a viewBox and nothing else, so anywhere one is
   dropped in bare it has to be given a size — without this the + and the moon
   below expand to the width of the page and the row is 300px tall. */
.today-addrow > svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 40; }
.today-addinput { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15.5px; color: var(--ink); padding: 10px 0; outline: none; }
.today-pause { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--ink-faint); font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px 2px 0; }
.today-pause svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 40; }
.today-segrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.today-seg { border: 1px solid var(--border); background: none; color: var(--ink-muted); font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 12px; padding: 6px 11px; cursor: pointer; }
.today-seg.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.today-wdbtn { width: 34px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: none; color: var(--ink-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.today-wdbtn.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.today-n { width: 80px; text-align: center; }

/* ---- the alarm on a thing on the day (server/web/dayRemind.js) ----
   Reminders are not a page any more: they are a time on something already on
   the list. So they are drawn where that thing is — a line under it, a bell
   on it — and the editor is a sheet, not a screen. */
.today-remindline { font-size: 12px; margin-top: 2px; color: var(--ink-muted); }
.today-remindline.out { color: var(--out, #C2661F); }
.today-remindline.loud { color: var(--danger, #E0565B); }
.today-item.done .today-remindline, .today-item.skipped .today-remindline { color: var(--ink-faint); }
/* The bell stays visible once there is a reminder on the row — the other row
   buttons appear on hover, but this one is information, not just an action. */
.today-bell.on { opacity: 1; color: var(--accent); }
.today-item.done .today-bell.on, .today-item.skipped .today-bell.on { color: var(--ink-faint); }
.today-bell svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }
.head-icon.on { color: var(--accent); }
/* The update button (../appUpdate.js): a dot when a newer version is
   waiting, the spinner in the icon's place while it checks. */
.head-icon.dot { position: relative; color: var(--accent); }
.head-icon.dot::after { content: ''; position: absolute; top: 3px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.head-icon.dot:hover::after { box-shadow: 0 0 0 2px var(--accent-soft); }
.head-icon .head-spin { width: 14px; height: 14px; }
.head-icon:disabled { cursor: default; }
.today-datebtn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; font: inherit; font-size: 16.5px; font-weight: 800; color: var(--ink); cursor: pointer; max-width: 100%; }
/* When the row is tight (four buttons and the offline pill), "Sat, Sep 27"
   ends in an ellipsis and keeps its chevron — never cut mid-letter. */
.today-datewords { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.today-datebtn svg { width: 14px; height: 14px; stroke: var(--ink-faint); fill: none; stroke-width: 44; }
/* A chevron pointing down: there is no down chevron in the icon set, and a
   turned right one is the same shape. */
.today-caret { display: inline-flex; flex: none; transform: rotate(90deg); }
.today-caret svg { width: 13px; height: 13px; stroke: var(--ink-faint); fill: none; stroke-width: 44; }
/* The repeat glyph sits between two flexible things and was being squeezed
   flat; it is an icon, not a column. */
.today-rep, .today-bell { flex: none; }
/* icon() draws filled paths; the repeat glyph is only legible as an outline,
   which is how the same icon is drawn everywhere else on the page. */
.today-rep svg, .today-bell svg { flex: none; width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 40; }
.today-remind { display: flex; flex-direction: column; gap: 10px; }
.today-remind-row { display: flex; flex-direction: column; gap: 6px; }
.today-remind .input { width: 100%; }
.btn.ghost.danger { color: var(--danger, #E0565B); border-color: var(--danger, #E0565B); }
.btn.ghost.danger svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 40; vertical-align: -2px; }

/* The month, to pick any day out of. */
.today-month { width: min(360px, 92vw); }
.today-mhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.today-mhead .today-title { flex: 1; text-align: center; }
.today-mweek { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 8px; }
.today-mweek span { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--ink-faint); }
.today-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); }
.today-mcell { min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; padding: 3px 0; font: inherit; }
.today-mcell.day { cursor: pointer; border-radius: 10px; }
.today-mcell.day:hover { background: var(--accent-soft); }
.today-mnum { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; color: var(--ink); }
.today-mcell.now .today-mnum { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; }
.today-mcell.on .today-mnum { background: var(--ink); color: var(--bg); font-weight: 800; }
.today-mdots { display: flex; gap: 3px; height: 5px; }
.today-mdot { width: 4.5px; height: 4.5px; border-radius: 3px; display: block; }

/* ---- AI HQ (server/web/pages/hq.js, components/pages/HqPage.tsx) ----
   A fixed head — the business strip — over one scrolling list.

   The board is read in three shapes and has to be right in all of them: a
   phone, a quarter of the Omarchy screen (about 940x480), and the left half
   of it (about 940 wide and tall). All three are narrow, so the layout is the
   phone's; what changes with room is how many columns the list runs in, not
   how big anything is.

   Every pixel of height here was bought: the strip is two-letter marks rather
   than named chips, the capture box is gone into the shell's own composer,
   and the rows are tight. Numbers match the phone screen's StyleSheet, so the
   two read as one thing. */
.hq-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hq-head { flex: none; padding: 8px 12px 0; }
/* The views live on the shell's rail, so the head starts below it. */
.hq-page.railed .hq-head { padding-top: calc(51px + env(safe-area-inset-top)); }
.hq-page .screen-scroll { padding: 2px 12px calc(14px + env(safe-area-inset-bottom)); }
/* Solo: the strip is in the rail, so there is no head at all and the list
   starts right under it. */
.hq-page.solo .screen-scroll { padding-top: calc(49px + env(safe-area-inset-top)); }
/* The views, in the rail, as one group ahead of the strip. */
.hq-views { display: flex; align-items: center; gap: 4px; flex: none; }
/* The strip, in the rail: one row that can never wrap — the rail is one line —
   so it scrolls if a board ever outgrows the width. Ten businesses fit in the
   quarter-screen window this is for. */
.hq-strip.inrail {
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.hq-strip.inrail::-webkit-scrollbar { display: none; }
.hq-strip.inrail .hq-mk { height: 28px; min-width: 32px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10); }
.hq-strip.inrail .hq-mk::before { top: 5px; bottom: 5px; }
.hq-list { display: flex; flex-direction: column; gap: 5px; }

/* The rail buttons: one per view, a corner badge for what needs you. */
.hq-nav-btn {
  flex: none; position: relative;
  width: 30px; height: 30px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.hq-nav-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }
.hq-nav-btn.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.hq-nav-n {
  position: absolute; top: -3px; right: -4px;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center;
}
/* Inside the app's WebView the rail is hidden, so the views are a segmented
   row at the top of the page — same three, with their names. */
.hq-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 8px; }
.hq-tab {
  flex: 1; position: relative; height: 30px; border-radius: 9px; border: none; background: none;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: var(--ink-muted); font-size: 13px; font-weight: 700; cursor: pointer;
}
.hq-tab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 40; }
.hq-tab.on { background: var(--accent); color: var(--bg); }
.hq-tab .hq-nav-n { position: static; margin-left: 2px; }
.hq-tab.on .hq-nav-n { background: var(--bg); color: var(--accent); }

/* ---- the business strip ----
   Two letters per business, on its own colour, with what is open in the
   corner. It wraps rather than scrolling sideways: eleven marks are two short
   rows, and a row you have to drag is a row whose far end is never looked at.
   The letters come from the server so the widget and the desktop bar agree. */
.hq-strip {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 1px 0 7px;
}
.hq-mk {
  flex: none; position: relative;
  min-width: 34px; height: 30px; padding: 0 7px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.03em; cursor: pointer;
}
/* Off, the colour is a bar down the left — enough to tell them apart at a
   glance without eleven saturated blocks shouting at once. On, the mark is
   the colour, which is what says the page is filtered. */
.hq-mk::before {
  content: ''; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px; background: var(--mk, transparent);
}
.hq-mk.on { background: var(--mk); border-color: var(--mk); color: var(--mk-ink); }
.hq-mk.on::before { display: none; }
.hq-mk.quiet { opacity: 0.55; }
.hq-mk.add { min-width: 30px; padding: 0; color: var(--ink-faint); font-size: 16px; font-weight: 600; }
.hq-mk.add::before { display: none; }
.hq-mk-txt { padding-left: 4px; }
.hq-mk.add .hq-mk-txt, .hq-mk:not([style]) .hq-mk-txt { padding-left: 0; }
.hq-mk-n {
  margin-left: 4px; font-size: 10.5px; font-weight: 800; opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.hq-mk.on .hq-mk-n { opacity: 0.9; }
.hq-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); }
.hq-dot.lg { width: 10px; height: 10px; margin-top: 6px; }
.hq-dot.ok { background: var(--success); }
.hq-dot.off { background: var(--danger); }

/* ---- sections ---- */
.hq-sec { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.hq-sec-head {
  width: 100%; display: flex; align-items: center; gap: 7px;
  border: none; background: none; padding: 6px 2px 1px; cursor: pointer; text-align: left;
}
.hq-sec-head.static { cursor: default; }
.hq-fold { color: var(--ink-faint); font-size: 16px; transition: transform 120ms; display: inline-block; width: 10px; }
.hq-fold.open { transform: rotate(90deg); }
.hq-sec-label { flex: 1; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.hq-sec-head .hq-biz { flex: 1; font-size: 13px; }
.hq-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hq-sec-body { display: flex; flex-direction: column; gap: 5px; }
.hq-sec-empty { font-size: 12.5px; color: var(--ink-faint); padding: 4px 4px 6px; line-height: 1.4; }

/* ---- a task row ---- */
.hq-task {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  cursor: pointer;
}
.hq-task.done .hq-text { text-decoration: line-through; color: var(--ink-faint); }
.hq-check {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 10px;
  border: 1.5px solid var(--border); background: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hq-check svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 64; }
.hq-check.done { background: var(--success); border-color: var(--success); }
.hq-check.doing { border-color: var(--accent); border-style: dashed; }
.hq-body { flex: 1; min-width: 0; }
.hq-text { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.hq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
.hq-meta.pad { padding: 6px 4px; }
.hq-biz { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink-muted); }
/* The same two letters the strip wears, so a row is matched to a business by
   shape rather than by reading a word at the size a meta line can afford. */
.hq-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 15px; padding: 0 4px; border-radius: 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
}
.hq-biz.pick { border: 1px solid var(--border); background: var(--bg); border-radius: 15px; height: 30px; padding: 0 10px; cursor: pointer; font-size: 13px; }
.hq-dest-chev { color: var(--ink-faint); font-size: 11px; }
.hq-wait { font-weight: 700; }
.hq-wait.late { color: var(--danger); }
.hq-note { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; line-height: 1.4; }
.hq-note.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.hq-chev { flex: none; color: var(--ink-faint); font-size: 18px; line-height: 1; margin-top: 2px; }
.hq-idea-acts { flex: none; display: flex; flex-direction: column; gap: 4px; }
.hq-idea-acts .btn { padding: 5px 9px; font-size: 12px; }

/* The add-here row at the bottom of a lane: the lane fixes the fields. */
.hq-add { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }
.hq-add-plus { color: var(--ink-faint); font-size: 18px; width: 22px; text-align: center; }
.hq-add-input {
  flex: 1; min-width: 0; border: none; border-bottom: 1px dashed var(--border); background: none;
  color: var(--ink); font-size: 14.5px; padding: 6px 0; outline: none; font-family: inherit;
}
.hq-add-input::placeholder { color: var(--ink-faint); }
.hq-add-input:focus { border-bottom-color: var(--accent); }

/* ---- the Board: one row per project ---- */
.hq-mark {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
}
.hq-mark.lg { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
.hq-mark.dashed { border: 1.5px dashed var(--border); color: var(--ink-faint); font-size: 16px; }
.hq-proj {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer;
}
.hq-proj-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hq-proj-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.hq-proj-sub { font-size: 12px; color: var(--ink-muted); }
.hq-proj-body .meter { margin-top: 3px; width: 100%; }
.hq-proj-n { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hq-add-project {
  margin-top: 6px; width: 100%; padding: 13px;
  border: 1px dashed var(--border); border-radius: 14px; background: none;
  color: var(--accent); font-weight: 700; cursor: pointer;
}
.hq-proj-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 6px; }
.hq-proj-title { flex: 1; font-size: 19px; font-weight: 800; }
.hq-back, .hq-more {
  flex: none; width: 32px; height: 32px; border-radius: 16px; border: none; background: none;
  color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hq-back:hover, .hq-more:hover { background: var(--accent-soft); }
.hq-back svg, .hq-more svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 36; }

/* ---- the picker sheet (where does it go / move to) ---- */
.hq-pick-title { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.hq-pick-row {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 6px; border: none; border-bottom: 1px solid var(--border); background: none; cursor: pointer;
}
.hq-pick-row:last-child { border-bottom: none; }
.hq-pick-row:hover { background: var(--accent-soft); }
.hq-pick-label { flex: 1; font-size: 15px; font-weight: 600; color: var(--ink); }
.hq-pick-row.new .hq-pick-label { color: var(--accent); }

/* ---- the task sheet ---- */
.hq-sheet { display: flex; flex-direction: column; gap: 10px; }
.hq-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hq-done-btn {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer;
}
.hq-done-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 56; }
.hq-done-btn.on { background: var(--success); border-color: var(--success); color: #fff; }
.hq-sheet-title {
  width: 100%; border: none; background: none; resize: none; outline: none; font-family: inherit;
  font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink); padding: 2px 0;
}
.hq-lanes { display: flex; gap: 4px; background: var(--bg); border-radius: 11px; padding: 3px; }
.hq-lane {
  flex: 1; height: 30px; border-radius: 8px; border: none; background: none;
  color: var(--ink-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.hq-lane.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.hq-sheet-note {
  width: 100%; min-height: 64px; resize: vertical; outline: none; font-family: inherit;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink);
  font-size: 14px; line-height: 1.45; padding: 10px 12px;
}
.hq-sheet-note:focus { border-color: var(--accent); }
.hq-steps { display: flex; flex-direction: column; gap: 4px; }
.hq-step { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.hq-step .done { text-decoration: line-through; color: var(--ink-faint); }
.hq-log { display: flex; flex-direction: column; gap: 6px; }
.hq-log-line { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.hq-log-who { flex: none; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 6px; background: var(--bg); color: var(--ink-faint); }
.hq-log-who.agent { background: var(--accent-soft); color: var(--accent); }
.hq-log-text { flex: 1; min-width: 0; line-height: 1.4; }
.hq-log-when { flex: none; color: var(--ink-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.hq-sheet-acts { display: flex; gap: 6px; justify-content: flex-end; padding-top: 4px; }
.btn.danger.ghost, .btn.ghost.danger { color: var(--danger); }

/* ---- empty ---- */
.hq-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 24px 20px 20px; }
.hq-empty-glyph { width: 44px; height: 44px; border-radius: 22px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.hq-empty-glyph svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 48; }
.hq-empty-title { font-size: 16px; font-weight: 700; }
.hq-empty-sub { font-size: 13.5px; color: var(--ink-muted); line-height: 1.45; max-width: 300px; }

/* ---- the window this actually lives in ----
   On the Omarchy PC the board is a browser window in a quarter of the screen
   (~940x480) or down the left half (~940 wide, full height). The app shell is
   a 520px phone column everywhere else in this product; here that would throw
   away nearly half the window and make a short one scroll for no reason, so
   HQ takes the width it is given — the same exception Messages already makes
   — and spends it on columns rather than on bigger type. */
body[data-page='hq'] .app-shell { max-width: 1040px; }
@media (min-width: 700px) {
  /* Two columns. A list twice as wide is a list half as tall, which is the
     whole complaint. A long section runs on into the next column rather than
     being kept whole — keeping it whole is what leaves one column holding
     thirteen rows and the other holding three headings — but a row is never
     torn in half, and a heading never ends a column with nothing under it. */
  .hq-list { display: block; columns: 2; column-gap: 12px; }
  .hq-sec { display: block; margin-bottom: 10px; }
  .hq-sec-body { display: block; }
  .hq-sec-body > * { margin-bottom: 5px; }
  .hq-task, .hq-add, .hq-sec-empty, .hq-proj, .hq-add-project { break-inside: avoid; }
  .hq-sec-head { break-after: avoid; break-inside: avoid; }
  /* The Board is project rows; they take the columns too — a 940px row
     carrying two letters and a name is mostly empty. */
  .hq-proj, .hq-add-project { margin-bottom: 5px; }
  /* An empty board, and the head of an opened project, are one thing. */
  .hq-empty, .hq-proj-head { column-span: all; }
}
@media (min-width: 1000px) {
  .hq-list { columns: 3; }
}
/* A short window has no room for generous vertical rhythm: the list is what
   matters, so the head gives up what it can. */
@media (max-height: 620px) {
  .hq-page.railed .hq-head { padding-top: calc(46px + env(safe-area-inset-top)); }
  .hq-head { padding-top: 5px; }
  .hq-strip { padding-bottom: 5px; gap: 4px; }
  .hq-mk { height: 27px; }
  .hq-task { padding: 6px 8px 6px 9px; }
  .hq-sec { margin-bottom: 4px; }
  .hq-sec-head { padding-top: 4px; }
  .hq-empty { padding: 14px 20px 12px; }
}
/* Changes on the day's list that have not reached the server yet. Not an
   error colour: the list is right, only the sending has not happened. */
.today-waiting { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border); cursor: pointer; }

/* ---- the calendar (server/web/pages/lists.js, components/pages/CalendarPage.tsx) ----
   Reminders are a time on something on the day now, so this page is about
   where those times fall: a month that collapses to one week, days carrying
   dots rather than text, and a continuous agenda underneath that names every
   day and says so when one is empty. Same shape on the phone. */
.cal2-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cal2-month { display: inline-flex; align-items: baseline; gap: 6px; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.cal2-mname { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.cal2-myear { font-size: 22px; font-weight: 700; color: var(--ink-faint); }
.cal2-month .today-caret { align-self: center; }
.cal2-headright { display: flex; align-items: center; gap: 6px; }
.cal2-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 6px; }
.cal2-week span { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--ink-faint); }
.cal2-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.cal2-day {
  min-height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: none; padding: 3px 0; font: inherit; border-radius: 10px; cursor: pointer;
}
.cal2-day:hover { background: var(--accent-soft); }
.cal2-day.other .cal2-num { color: var(--ink-faint); }
.cal2-num { width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 14.5px; color: var(--ink); }
.cal2-day.now .cal2-num { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; }
.cal2-day.on .cal2-num { background: var(--ink); color: var(--bg); font-weight: 800; }
.cal2-dots { display: flex; gap: 3px; height: 5px; }
.cal2-dot { width: 4.5px; height: 4.5px; border-radius: 3px; display: block; }
.cal2-agenda { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.cal2-block { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.cal2-dayhead { text-align: left; border: 0; background: none; padding: 6px 2px 0; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.2px; color: var(--ink-muted); cursor: pointer; }
.cal2-dayhead.on { color: var(--ink); }
.cal2-none { font-size: 12.5px; color: var(--ink-faint); padding-left: 2px; }
.cal2-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 13px; padding: 10px 12px;
}
.cal2-row.out { border-left: 3px solid var(--out, #C2661F); }
.cal2-row.legacy { border-style: dashed; }
.cal2-row.done .cal2-text > div:first-child, .cal2-row.skipped .cal2-text > div:first-child { color: var(--ink-faint); text-decoration: line-through; }
.cal2-text { flex: 1; min-width: 0; font-size: 15px; }
.cal2-row .today-rep svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 40; }

/* ---- Flights (pages/flights.js) ---- */
.screen-scroll > .inner.fl-page { padding-bottom: 24px; padding-top: calc(52px + env(safe-area-inset-top)); }
.fl-title { font-weight: 800; font-size: 17px; }
.fl-places { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; margin-bottom: 10px; }
.fl-air { position: relative; }
.fl-air-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.14); max-height: 280px; overflow-y: auto; }
.fl-air-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; background: transparent; color: var(--ink); }
.fl-air-row:hover { background: var(--tint); }
.fl-air-code { font-weight: 800; font-size: 13px; min-width: 38px; color: var(--accent); }
.fl-swap { align-self: center; }
.fl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fl-dates { align-items: flex-end; }
.fl-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-label { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.fl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-chip { padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); background: transparent; border: 1px solid var(--border); }
.fl-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fl-recent .fl-chip { font-weight: 500; }
.fl-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.fl-step { width: 32px; height: 30px; font-size: 18px; color: var(--ink); background: transparent; }
.fl-step-v { padding: 0 6px; font-size: 13px; font-weight: 600; }
.fl-go { min-width: 140px; }
.fl-error { margin-top: 10px; color: var(--danger); font-size: 13px; }
.fl-strip { font-size: 13px; color: var(--ink-muted); padding: 6px 2px 12px; }
.fl-leg { margin-top: 18px; }
.fl-sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.fl-sec-title { font-weight: 800; font-size: 15px; }
.fl-opt { padding: 12px 14px; cursor: pointer; }
.fl-opt-head { display: flex; gap: 12px; align-items: flex-start; }
.fl-opt-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fl-opt-right { text-align: right; flex-shrink: 0; }
.fl-pill { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: .3px; background: var(--accent-soft); color: var(--accent); }
.fl-pill.sm { font-size: 11px; padding: 1px 6px; }
.fl-times { font-size: 17px; font-weight: 700; }
.fl-plus { font-size: 11px; color: var(--ink-muted); margin-left: 3px; }
.fl-price { font-size: 22px; font-weight: 800; line-height: 1.1; }
.fl-rel { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.fl-rel-bar { width: 64px; height: 6px; border-radius: 3px; background: var(--tint); overflow: hidden; flex-shrink: 0; }
.fl-rel-fill { height: 100%; border-radius: 3px; background: var(--success, #2E9E5B); }
.fl-rel-bar.ok .fl-rel-fill { background: #F59E3C; }
.fl-rel-bar.bad .fl-rel-fill { background: var(--danger, #E0565B); }
.fl-flag { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--ink-muted); }
.fl-flag.amber { background: rgba(245,158,60,.16); color: #B8701A; }
.fl-flag.danger { background: rgba(224,86,91,.14); color: var(--danger, #E0565B); }
.fl-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; cursor: default; }
.fl-seg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.fl-layover { padding-left: 4px; }
.fl-ok { color: var(--success, #2E9E5B); font-weight: 600; }
.fl-warn { color: #B8701A; font-weight: 600; }
.fl-bundle { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.fl-trip { padding: 12px 14px; }
.fl-trip.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.fl-trip-dir { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fl-trip-route { font-weight: 600; padding: 2px 2px 0; }
.fl-part { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; text-decoration: none; color: var(--ink-muted); }
.fl-part.fly { color: var(--ink); font-weight: 600; }
.fl-part.fly .small { font-weight: 400; }
.fl-part.warn { color: var(--danger, #E0565B); }
.fl-part-k { flex-shrink: 0; min-width: 44px; font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 2px 6px; border-radius: 8px; background: var(--tint); text-align: center; }
.fl-warnings { margin-top: 12px; color: #B8701A; display: flex; flex-direction: column; gap: 4px; }
.fl-watch { display: flex; align-items: center; gap: 12px; }
.fl-watch-label { font-weight: 700; }
.fl-spark { width: 96px; height: 26px; color: var(--accent); flex-shrink: 0; }
.fl-unread { display: block; width: 100%; text-align: left; margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(245,158,60,.16); color: #B8701A; font-weight: 600; font-size: 13px; }
.fl-empty { text-align: center; padding: 28px 16px; color: var(--ink-muted); }
.fl-empty .badge { margin: 0 auto 8px; }
.fl-settings .fl-field { margin-bottom: 12px; }
@media (max-width: 560px) { .fl-places { grid-template-columns: 1fr; } .fl-swap { justify-self: center; transform: rotate(90deg); } .fl-price { font-size: 20px; } }
/* The map mode: the map is the page, the two ends on top, the options in a sheet at the foot. */
.fl-shell { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.fl-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--accent-soft); }
.fl-top { position: absolute; left: 12px; right: 12px; top: calc(56px + env(safe-area-inset-top)); display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; pointer-events: none; }
.fl-top > * { pointer-events: auto; }
.fl-ends { display: flex; align-items: stretch; gap: 6px; flex: 1 1 280px; min-width: 0; max-width: 520px; }
/* From and To stand the same height when one wraps ("Tap the map" on a 320 phone); the arrow and the swap stay centred. */
.fl-ends > .fl-back, .fl-ends > .fl-end-swap { align-self: center; }
.fl-end { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); color: var(--ink); font-size: 13.5px; text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.fl-end.empty { color: var(--ink-muted); }
.fl-end.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), 0 4px 14px rgba(0,0,0,.10); }
.fl-end-text { white-space: normal; min-width: 0; overflow-wrap: break-word; }
.fl-end-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fl-end-dot.from { background: #1F9D55; }
.fl-end-dot.to { background: #D9344A; }
.fl-end-swap { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.fl-end-swap svg { width: 16px; height: 16px; transform: rotate(90deg); }
/* 44px to press, whatever they look (21 Oct 2026): the swap, and − and + for the people. */
.fl-end-swap, .fl-people button { position: relative; }
.fl-end-swap::before, .fl-people button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.fl-top-right { display: flex; gap: 6px; margin-left: auto; }
.fl-glass { padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.fl-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 50%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); border-top-left-radius: 20px; border-top-right-radius: 20px; border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgba(0,0,0,.14); }
.fl-sheet-in { max-width: 680px; margin: 0 auto; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fl-hint { font-size: 15px; color: var(--ink-muted); line-height: 1.4; }
.fl-hint b { color: var(--ink); }
.fl-reply { font-size: 14px; line-height: 1.4; color: var(--ink); white-space: pre-line; }
.fl-think { display: flex; align-items: center; gap: 8px; padding: 0; }
.fl-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: fl-spin .8s linear infinite; }
@keyframes fl-spin { to { transform: rotate(360deg); } }
.fl-opts { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fl-optchip { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); max-width: 220px; }
.fl-optchip.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.fl-optchip-l { font-size: 12.5px; font-weight: 600; white-space: normal; max-width: 196px; overflow-wrap: break-word; }
.fl-optchip-p { font-size: 15px; font-weight: 800; }
.fl-jrow { border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 10px 12px; cursor: pointer; }
.fl-jrow.on { border: 1.5px solid var(--ink); }
.fl-jrow-pick { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 4px; white-space: normal; overflow-wrap: break-word; }
.fl-jrow-main { display: flex; align-items: center; gap: 10px; }
.fl-jrow-left { flex: 1; min-width: 0; }
.fl-jrow-times { font-size: 16px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.fl-jrow-times sup { font-size: 11px; color: var(--ink-muted); font-weight: 600; }
.fl-jrow-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; white-space: normal; overflow-wrap: break-word; }
.fl-jrow-sub b { color: var(--ink); }
.fl-jrow-right { text-align: right; flex-shrink: 0; }
.fl-jrow-price { font-size: 17px; font-weight: 800; }
.fl-jrow-note { font-size: 10.5px; color: var(--ink-faint); }
.fl-row-detail { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
.fl-row-line { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink); text-decoration: none; }
.fl-row-line b { color: var(--accent); font-size: 12.5px; white-space: nowrap; }
.fl-row-line.muted { color: var(--ink-muted); }
.fl-row-line.warn { color: var(--danger); }
.fl-logo { border-radius: 8px; background: #fff; border: 1px solid var(--border); object-fit: contain; padding: 3px; box-sizing: border-box; flex-shrink: 0; }
.fl-logo-code { display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.fl-jrow-air { font-size: 14px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.fl-jrow-air span { font-size: 11.5px; font-weight: 500; color: var(--ink-faint); }
.fl-jrow-check { font-weight: 800; margin-top: 2px; }
.fl-steps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fl-step-chip { flex-shrink: 0; min-width: 128px; text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 13px; padding: 8px 11px; }
.fl-step-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fl-step-top { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; opacity: .8; }
.fl-step-n { width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; background: var(--accent-soft); color: var(--accent); }
.fl-step-n.done { background: var(--success, #2E9E5B); color: #fff; }
.fl-step-route { font-size: 13px; font-weight: 700; margin-top: 3px; white-space: nowrap; }
.fl-step-sub { font-size: 11.5px; opacity: .8; margin-top: 1px; white-space: nowrap; }
.fl-step-title { font-size: 16px; font-weight: 800; }
.fl-people { display: flex; align-items: center; gap: 2px; padding: 2px 4px; }
.fl-people button { width: 26px; height: 28px; font-size: 17px; background: transparent; color: var(--ink); }
.fl-people button:disabled { opacity: .3; }
.fl-people span { font-weight: 700; font-size: 13.5px; padding: 0 2px; }
.fl-summary { display: flex; flex-direction: column; gap: 12px; }
.fl-sum-way { display: flex; flex-direction: column; gap: 8px; }
.fl-sum-name { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; color: var(--ink-faint); }
.fl-sum-card { border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.fl-sum-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fl-sum-book { margin-top: 8px; text-align: center; text-decoration: none; }
.fl-chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fl-chips-scroll .fl-chip { flex-shrink: 0; white-space: nowrap; }
.fl-legs { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.fl-leg-line { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.fl-leg-line .faint { color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }
.fl-leg-line.wait { color: var(--ink-muted); }
.fl-leg-line.wait.warn { color: #B8701A; font-weight: 600; }
.fl-jrow-note-warn { font-size: 12px; color: #B8701A; font-weight: 600; margin-top: 2px; }
.fl-link { background: transparent; color: var(--accent); font-weight: 600; font-size: 12.5px; }
.fl-sum-total { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.fl-sum-total b { font-size: 22px; }
.fl-trip-label { font-weight: 800; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; }
/* ---- Claude chats: the Claude sessions on the server (pages/panes.js) ----
   The phone's page (components/pages/PanesPage.tsx) in a browser: same
   structure, same words, same face. Two sibling screens, the same bargain
   Messages makes: on a phone one is on show at a time and picking a chat
   moves between them; given the width they sit side by side.

   The page brings its own composer, so the assistant's bar and its floating
   conversation pill are hidden while it is open — otherwise there are two
   boxes on screen and only one of them talks to the chat you are looking at.

   Nothing here scrolls sideways: every row truncates or wraps. */
body[data-page='panes'] .cmd-wrap > .cmd-line,
body[data-page='panes'] .convo-root,
body[data-page='panes'] .kb-space { display: none; }

.pane-layout {
  --pane-needs: #9c5a0a;
  /* A chat's turn that ended — done, or not finished: the colour of it, quietened. */
  --work-done: color-mix(in srgb, var(--success) 80%, var(--ink-muted));
  --work-failed: color-mix(in srgb, var(--danger) 80%, var(--ink-muted));
  --work-band: color-mix(in srgb, var(--ink) 4.5%, transparent);
  --work-band-edge: color-mix(in srgb, var(--ink) 7%, transparent);
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* A display rule below would otherwise beat the attribute. */
.pane-layout [hidden] { display: none !important; }
.pane-list, .pane-chat { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.pane-layout[data-view='list'] > .pane-chat { display: none; }
.pane-layout[data-view='chat'] > .pane-list { display: none; }

/* Pressed feels pressed: a little smaller and a little lighter. */
.pane-tap { transition: transform 0.16s ease-out, opacity 0.16s ease-out; -webkit-tap-highlight-color: transparent; }
.pane-tap:active:not(:disabled) { transform: scale(0.97); opacity: 0.75; transition-duration: 0.09s; }
.pane-tap:disabled { cursor: default; }

/* Arriving: rows fade up in turn, a chat slides in from the right and the
   list from the left, a new message rises 10px into place. */
.pane-in { animation: pane-in 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes pane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pane-enter-r { animation: pane-slide-r 0.22s cubic-bezier(0.2, 0.7, 0.3, 1); }
.pane-enter-l { animation: pane-slide-l 0.22s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes pane-slide-r { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes pane-slide-l { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.pane-msg-in { animation: pane-msg-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes pane-msg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.pane-loading { display: flex; align-items: center; justify-content: center; padding: 40px 0; margin: auto 0; }
.pane-spin-light { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
.pane-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; text-align: center; }
.pane-empty-title { font-size: 17px; font-weight: 700; margin-top: 8px; color: var(--ink); }
.pane-empty-text { font-size: 14px; line-height: 20px; color: var(--ink-muted); overflow-wrap: anywhere; }

/* ---- the list ---- */
/* It starts below the floating rail, which spans the top of every screen —
   a title tucked under the profile circle is a title nobody reads. */
.pane-list { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 0 14px 20px; }
.pane-list-head {
  position: sticky; top: 0; z-index: 2;
  /* Out to the column's edges, so what scrolls under it never shows beside it. */
  margin: 0 -14px;
  padding: calc(53px + env(safe-area-inset-top)) 16px 8px;
  background: var(--bg);
}
/* The list slides softly under the head rather than being cut by a line. */
.pane-list-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: linear-gradient(var(--bg), transparent); pointer-events: none;
}
.pane-list-top { min-height: 36px; display: flex; align-items: center; }
.pane-list-title { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); }
/* Pull to refresh: a spinner that opens under the title as you pull. */
.pane-pull { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pane-pull.settle { transition: height 0.2s ease; }
.pane-pull .spin { opacity: 0.35; animation-play-state: paused; transition: opacity 0.15s; }
.pane-pull.armed .spin, .pane-pull.busy .spin { opacity: 1; animation-play-state: running; }

.pane-sec { margin-top: 16px; }
/* The usage bars at the top of the home: a small table. The heads ("5 hours",
   "Week"), a row per Claude login with its two meters, then the disk's one
   meter across both. The name column is as wide as its longest name. */
.pane-usage { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 9px; align-items: end; padding: 10px 14px 13px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.pane-usage-head { font-size: 12px; line-height: 14px; font-weight: 600; color: var(--ink-muted); margin-bottom: -3px; }
.pane-usage-name { font-size: 13px; line-height: 16px; font-weight: 650; color: var(--ink); white-space: nowrap; padding-bottom: 5px; }
.pane-meter.stale { opacity: .75; }
.pane-usage-ago { display: block; font-size: 11.5px; line-height: 14px; font-weight: 500; color: var(--ink-muted); }
.pane-meter { min-width: 0; }
.pane-meter.wide { grid-column: span 2; }
.pane-meter-top { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; line-height: 16px; white-space: nowrap; min-width: 0; }
.pane-meter-pct { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pane-meter-note { margin-left: auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 0; text-align: right; }
.pane-meter-track { margin-top: 4px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.pane-meter-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.pane-meter.warn .pane-meter-fill { background: var(--pane-needs); }
.pane-meter.warn .pane-meter-pct { color: var(--pane-needs); }
.pane-meter.full .pane-meter-fill { background: var(--danger); }
.pane-meter.full .pane-meter-pct { color: var(--danger); }
/* A small phone: tighter gaps, so the countdowns keep their room (the phone's UsageCard under 360 too). */
@media (max-width: 359px) { .pane-usage { column-gap: 10px; padding-inline: 12px; } .pane-meter-top { gap: 4px; font-size: 12px; } }
.pane-sec.first { margin-top: 8px; }
.pane-sec-label { font-size: 13px; font-weight: 700; color: var(--ink-muted); margin: 4px 0 8px 2px; }
.pane-sec-label.needs { color: var(--pane-needs); margin: 0 0 6px 2px; }
/* A label with its one action on the same line: Recent · Show more. */
.pane-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pane-sec-more { border: 0; background: none; padding: 4px 2px 8px 8px; color: var(--accent); font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* New chat: a chip per business, wrapping. */
.pane-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pane-new-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0;
  padding: 5px 13px 5px 5px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.pane-new-chip.dim { opacity: 0.4; }
.pane-new-chip .pane-chip-av { flex: none; width: 28px; height: 28px; font-size: 11.5px; }
.pane-new-chip .pane-chip-av .spin { width: 14px; height: 14px; }
.pane-chip-label { min-width: 0; overflow-wrap: anywhere; }
.pane-more-link { border: 0; background: none; color: var(--ink-muted); font-size: 13.5px; font-weight: 600; padding: 8px; cursor: pointer; }

/* A business's picture, and what its chat is doing on top of it. */
.pane-av-wrap { position: relative; flex: none; display: inline-block; }
.pane-av {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden; white-space: nowrap;
  background: var(--ink-faint); color: #fff; font-weight: 800; letter-spacing: 0.2px;
}
.pane-av svg { width: 46%; height: 46%; stroke: #fff; fill: none; stroke-width: 36; }
.pane-av-badge { position: absolute; right: -5px; bottom: -5px; display: flex; padding: 2px; border-radius: 50%; background: var(--surface-solid); }
.pane-av-dot {
  position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; box-sizing: border-box;
  border-radius: 50%; background: var(--pane-needs); border: 2px solid var(--surface-solid);
}

/* Recent: one card, a row per chat. */
.pane-group { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.pane-sep { height: 1px; margin-left: 70px; background: var(--border); }
.pane-group.earlier .pane-sep { margin-left: 62px; }
.pane-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; color: var(--ink); cursor: pointer; outline-offset: -2px; }
.pane-row.inner { padding: 9px 12px 9px 26px; }
.pane-row.active { background: var(--accent-soft); }
@media (hover: hover) { .pane-row:not(.active):hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } }
.pane-lead { flex: none; width: 32px; display: flex; align-items: center; justify-content: center; }
.pane-row-main { flex: 1; min-width: 0; display: block; }
.pane-row-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pane-row-title {
  display: block; flex: 1; min-width: 0; margin-bottom: 2px;
  font-size: 16px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pane-row-title.small { font-size: 15px; font-weight: 600; margin-bottom: 1px; }
.pane-row-preview { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-row-preview.work, .pane-head-sub.work { color: var(--success); }
.pane-row-preview.needs, .pane-head-sub.needs { color: var(--pane-needs); }
.pane-row-preview.faint, .pane-head-sub.faint { color: var(--ink-faint); }
.pane-row-preview.draft { color: var(--danger); }
.pane-row-preview.fail { color: var(--danger); }
/* The light orange fails contrast on a light page; the bright one reads on dark. */
[data-theme="dark"] .pane-layout { --pane-needs: #e0902a; }
/* The end of a turn: Done / Needs your input / Didn't finish, and one line. */
.pane-end {
  margin: 10px 0 4px 38px; padding: 10px 14px; min-width: 0; max-width: 560px;
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
}
.pane-end.in { animation: pane-msg-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.pane-end-top { display: flex; align-items: center; line-height: 18px; gap: 7px; font-size: 14px; font-weight: 700; }
.pane-end-ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.pane-end-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }
.pane-end-label { min-width: 0; }
.pane-end-time { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pane-end-line { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.pane-end.work { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.pane-end.work .pane-end-top { color: var(--success); }
.pane-end.needs { border-color: var(--pane-needs); }
.pane-end.needs .pane-end-top { color: var(--pane-needs); }
.pane-end.fail { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.pane-end.fail .pane-end-top { color: var(--danger); }
.pane-end.quiet .pane-end-top { color: var(--ink-muted); }

/* Earlier: stopped conversations, each with its business, to pick back up. */
.pane-earlier-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 18px; }
.pane-earlier-when { display: block; font-size: 12px; color: var(--ink-muted); }
.pane-resume {
  flex: none; min-width: 74px; height: 30px; padding: 0 13px; border: 0; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer;
}
.pane-resume.dim { opacity: 0.4; }
.pane-resume .spin { width: 14px; height: 14px; }

/* ---- a chat ---- */
.pane-chat { background: var(--bg); }
.pane-chat-top { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane-chat-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; text-align: center; }
/* The band: the way back and the menu, under the floating rail. */
.pane-band {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(50px + env(safe-area-inset-top)) 8px 0;
}
.pane-back {
  display: inline-flex; align-items: center; gap: 1px; padding: 6px 8px 6px 2px;
  border: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer;
}
.pane-back svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 44; }
.pane-dots-btn { margin-left: auto; display: flex; padding: 6px 8px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.pane-dots-btn svg { width: 24px; height: 24px; stroke: none; fill: currentColor; }
/* The chat's own header, full width: whose, what, and what it is doing. */
.pane-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 14px 9px;
  border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--ink);
  text-align: left; font: inherit; cursor: pointer;
}
.pane-head-av { flex: none; display: flex; }
/* Whole, never cut (19 Oct 2026, late — "truncated stuff is bad"): a long title takes a second line, the status wraps. */
.pane-head-title { display: block; font-size: 16.5px; font-weight: 700; overflow-wrap: break-word; }
.pane-head-sub { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
/* The status line, with the token count at its right end. */
.pane-head-subrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; min-width: 0; }
/* The status wins the room: the count shrinks (and drops its ↓turn part on
   a phone) before the status is cut to a letter. */
.pane-head-subrow > .pane-head-sub { flex: 1 1 auto; min-width: min(96px, 45%); }
/* The numbers are never cut: the status gives (to its minimum), and the
   container rules below take parts off the line before that runs out. */
.pane-head-usage { flex: none; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pane-head-usage[hidden] { display: none; }

.pane-body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; padding: 10px 12px;
}
/* A short chat sits at the bottom, where the next message will appear. */
.pane-msgs { margin-top: auto; display: flex; flex-direction: column; }
/* A message: its sender's picture in a column of its own (shown by the last
   of a run only), the bubble, its time and its steps under it. */
.pane-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; margin: 2px 0; min-width: 0; }
.pane-msg > * { grid-column: 2; justify-self: start; }
.pane-msg.mine { grid-template-columns: minmax(0, 1fr) 30px; }
.pane-msg.mine > * { grid-column: 1; justify-self: end; }
.pane-msg > .pane-msg-av { grid-row: 1; grid-column: 1; align-self: end; width: 30px; height: 30px; }
.pane-msg.mine > .pane-msg-av { grid-column: 2; }
.pane-msg.tail { margin-bottom: 12px; }
.pane-me {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: var(--bubble-user); color: var(--bubble-user-ink); font-size: 13px; font-weight: 700;
}
.pane-me img { width: 100%; height: 100%; object-fit: cover; }
.pane-me svg { width: 16px; height: 16px; }
.pane-msg-time { margin: 3px 6px 0; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pane-bubble {
  max-width: 86%; min-width: 0; padding: 9px 13px; border-radius: 19px;
  font-size: 15px; line-height: 1.45; overflow-wrap: anywhere;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.pane-bubble.copied { transform: scale(0.97); }
.pane-msg.mine .pane-bubble { background: var(--bubble-user); color: var(--bubble-user-ink); }
.pane-msg.theirs .pane-bubble { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
/* The corner toward the picture is the one that points at who said it. */
.pane-msg.mine.tail .pane-bubble { border-bottom-right-radius: 6px; }
.pane-msg.theirs.tail .pane-bubble { border-bottom-left-radius: 6px; }
/* Claude's updates mid-turn ("Checking X…") are steps, not answers: plain
   muted lines, so the reply that ends the turn is the one bubble that stands out. */
.pane-msg.theirs.step { margin-top: 8px; }
/* Updates folded under the answer: one line between your question and it. */
.pane-fold { margin: 8px 0 8px 38px; min-width: 0; max-width: calc((100% - 38px) * 0.86); }
.pane-fold-line {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 0; border: 0; background: none;
  color: var(--ink-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pane-fold-line:hover { color: var(--ink); }
.pane-fold-rule { flex: 1; height: 1px; background: var(--border); min-width: 4px; }
.pane-fold-text { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pane-fold-line svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 48; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.pane-fold.open .pane-fold-line svg { transform: rotate(180deg); }
.pane-fold-steps { padding-bottom: 4px; }
.pane-fold-steps .pane-msg { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
/* An answer's first line: the outcome in one sentence, read first. */
.pane-answer-lead { font-weight: 650; }
.pane-answer-lead .md > :last-child { margin-bottom: 0; }
.pane-answer-lead + .md { margin-top: 6px; }
.pane-msg.theirs.step .pane-bubble {
  background: transparent; border-color: transparent; color: var(--ink-muted);
  font-size: 14px; padding-top: 2px; padding-bottom: 2px;
}
.pane-bubble.wide { width: 86%; }
/* A file Claude sent: a card under its bubble, a click downloads it. */
.pane-sent {
  display: flex; align-items: center; gap: 10px; width: min(86%, 360px); min-height: 44px; margin-top: 6px;
  padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.pane-sent:hover:not(:disabled) { border-color: var(--ink-faint); }
/* Pictures you sent (agent-bridge photo_refs; panes.js photoStrip): placed by
   work.js photoGrid for the strip's width — rows of ≤3 with one height each,
   or a tall one as a column beside two, every line the strip's width, no box
   past 2.5:1 — over your words, in one cell so the face beside it is the
   run's bottom. Each picture whole and never drawn bigger than its own pixels
   (scale-down), with plain space around it in its box. */
.pane-msg.mine > .pane-said-stack { justify-self: stretch; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.pane-photos { width: min(86%, 300px); display: flex; justify-content: flex-end; }
.pane-photo-grid { position: relative; flex: none; max-width: 100%; }
.pane-photo {
  position: absolute; display: block; padding: 0; border: 0; border-radius: 16px; overflow: hidden;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: zoom-in;
}
.pane-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: scale-down; opacity: 0; transition: opacity 0.18s ease; }
.pane-photo.in img { opacity: 1; }
/* The room a picture leaves in its box (work.js photoRoomy): a blurred, dimmed
   copy of the same picture behind it, as Telegram fills it. */
.pane-photo img.pane-photo-bg { inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); object-fit: cover; filter: blur(14px) brightness(0.72) saturate(1.15); display: none; }
.pane-photo.roomy .pane-photo-bg { display: block; }
.pane-photo-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-faint); }
.pane-photo-wait svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 32; }
.pane-photo.in .pane-photo-wait { display: none; }
.pane-photo.gone { cursor: pointer; }
.pane-photo.gone img { display: none; }
.pane-photo.gone .pane-photo-wait { color: var(--ink-muted); }
.pane-photo:focus-visible { outline: 2px solid var(--accent, var(--ink)); outline-offset: 2px; }
.pane-photos.failed .pane-photo { opacity: 0.55; cursor: pointer; }
/* "+44" over the last picture drawn of a message with more (work.js photosShown). */
.pane-photo-more {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 22px; font-weight: 700;
}
.pane-sent:focus-visible { outline: 2px solid var(--accent, var(--ink)); outline-offset: 2px; }
.pane-sent.gone { cursor: default; }
.pane-sent.gone .pane-sent-ico, .pane-sent.gone .pane-sent-name { opacity: 0.55; }
.pane-sent.busy { opacity: 0.7; cursor: progress; }
.pane-sent-ico {
  flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--bubble-user); color: var(--bubble-user-ink);
}
.pane-sent-ico svg, .pane-sent-go svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round;
}
.pane-sent-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pane-sent-name { display: flex; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
.pane-sent-stem { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pane-sent-tail { flex: none; }
.pane-sent-sub {
  font-size: 12.5px; color: var(--ink-muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pane-sent-go { flex: none; color: var(--ink-muted); display: flex; }
/* Sent is sent, as in any messenger: only a copy that failed looks faded. */
.pane-bubble.failed { opacity: 0.65; cursor: pointer; }
.pane-said { white-space: pre-wrap; font-size: 15.5px; line-height: 21px; }
.pane-bubble .md pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.pane-bubble .md table { table-layout: fixed; overflow-wrap: anywhere; }
.pane-bubble .md img { max-width: 100%; }
/* Press and hold copies, so on a touch screen the hold is not also a selection. */
@media (hover: none) { .pane-bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .pane-bubble a[href] { -webkit-touch-callout: default; } }
.pane-msg.mine .pane-bubble a { color: inherit; text-decoration: underline; }
.pane-msg-note { margin: 3px 6px 0; padding: 0; border: 0; background: none; font-size: 11.5px; color: var(--ink-muted); }
/* A tap target worth the name, without moving the line. */
.pane-msg-note.retry { color: var(--danger); cursor: pointer; padding: 12px 8px; margin: -9px -2px -12px; }

/* A new chat, before anything is said. */
.pane-hello { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 28px; text-align: center; }
.pane-hello-title { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--ink); }
.pane-hello-sub { font-size: 14px; color: var(--ink-muted); }

/* The face at the bottom of the chat, on Claude's side. */
.pane-buddy { display: flex; align-items: flex-end; gap: 8px; margin: 6px 0 2px; min-width: 0; }
.pane-buddy.in { animation: pane-msg-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.pane-buddy.out { opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; }
.pane-buddy-bubble {
  display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px 13px;
  border-radius: 18px; border-bottom-left-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-muted); font-size: 14px; font-weight: 600;
}
.pane-buddy-text { min-width: 0; overflow-wrap: anywhere; }
.pane-buddy.asking .pane-buddy-bubble { border-color: var(--pane-needs); color: var(--pane-needs); }
.pane-dots { display: inline-flex; align-items: center; gap: 3.5px; height: 12px; }
.pane-dots i { display: block; width: 4.5px; height: 4.5px; border-radius: 50%; background: currentColor; opacity: 0.3; animation: pane-dot 1.2s linear infinite; }
.pane-dots i:nth-child(2) { animation-delay: 0.19s; }
.pane-dots i:nth-child(3) { animation-delay: 0.38s; }
@keyframes pane-dot { 0%, 36%, 100% { opacity: 0.3; transform: none; } 18% { opacity: 1; transform: translateY(-3px); } }

/* Claude is asking: over the box, the thing to deal with first — but never
   over all of it: a long question scrolls inside its slot. */
/* The question card's slot: half the window at most, and less when the keyboard
   takes the room — it gives way (the body above it goes first) and scrolls, and
   never runs under the box. */
.pane-prompt-slot { flex-shrink: 1; min-height: 0; max-height: 50vh; max-height: 50dvh; overflow-y: auto; overscroll-behavior: contain; }
.pane-prompt-card { margin: 0 12px 8px; padding: 12px; border-radius: 16px; border: 1.5px solid var(--pane-needs); background: var(--surface-solid); }
.pane-prompt-label { margin-bottom: 6px; color: var(--pane-needs); font-size: 12.5px; font-weight: 800; }
/* The question whole (22 Oct 2026 review: cut at four lines, Claude's "Do you want to proceed?" never showed) — its slot scrolls. */
.pane-prompt-q {
  margin-bottom: 8px; font-size: 14.5px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere;
}
.pane-answer {
  display: block; width: 100%; margin-bottom: 6px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  font-size: 14.5px; font-weight: 600; text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.pane-answer.on { border-color: var(--accent); }
.pane-answer-label { display: block; }
.pane-answer-detail { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.pane-prompt-q.pre { white-space: pre-line; font-size: 13.5px; }
.pane-prompt-hint { margin-bottom: 4px; font-size: 12.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.pane-answer-typed { display: flex; gap: 6px; margin-bottom: 6px; }
.pane-answer-input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 16px;
}
.pane-answer-send, .pane-prompt-cancel {
  flex: none; padding: 0 14px; min-height: 40px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: 14.5px; font-weight: 700; cursor: pointer;
}
/* A slider (/effort) as a row of levels. */
.pane-levels { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.pane-level {
  flex: 1 1 auto; min-height: 38px; padding: 0 4px; border: 0; border-radius: 9px; background: none;
  color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pane-level.on { background: var(--accent); color: var(--on-accent, #fff); }
.pane-prompt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
/* The card's top line: what it is, and Dismiss at its right (a 44px target past its small face). */
.pane-prompt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pane-prompt-top .pane-prompt-label { min-width: 0; }
.pane-prompt-dismiss {
  position: relative; flex: none; height: 28px; margin: -6px -6px 0 0; padding: 0 10px; border: 0; border-radius: 9px;
  background: none; color: var(--ink-muted); font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.pane-prompt-dismiss::after { content: ''; position: absolute; inset: -8px -2px; }
@media (hover: hover) { .pane-prompt-dismiss:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); } }
.pane-keep { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-muted); cursor: pointer; }
.pane-keep-box { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
/* The slider's Ultracode toggle, a switch row under the levels. */
.pane-ultra-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding: 8px 10px 8px 12px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border); cursor: pointer;
}
.pane-ultra-words { display: flex; flex-direction: column; min-width: 0; }
.pane-ultra-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.pane-ultra-sub { font-size: 12.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.pane-prompt-btns { display: inline-flex; gap: 6px; flex: none; }
.pane-prompt-done {
  flex: none; padding: 0 14px; min-height: 40px; border-radius: 12px; border: 0;
  background: var(--accent); color: var(--on-accent, #fff); font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.pane-prompt-done[hidden] { display: none; }

/* Effort at the header's right end: ‹ high ›, one tap either way. */
.pane-head-row { display: flex; align-items: center; padding: 0 12px 0 0; border-bottom: 1px solid var(--border); }
.pane-head-row > .pane-head { flex: 1; min-width: 0; width: auto; border-bottom: 0; }
/* A phone's width: Model and Effort go under the title, which keeps the row and wraps by words (21 Oct 2026 review:
   beside them at 320–390 it stood one word to a line, split mid-word). The phone's PanesPage ChatHead `stack`. */
@media (max-width: 429px) {
  .pane-head-row { flex-wrap: wrap; gap: 0 5px; padding: 0 12px 8px 60px; }
  .pane-head-row > .pane-head { flex: 0 0 calc(100% + 60px); margin-left: -60px; padding-bottom: 6px; }
}
.pane-eff {
  flex: none;
  display: inline-flex; align-items: center; gap: 0; height: 36px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.pane-eff[hidden] { display: none; }
.pane-eff-arrow {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 36px;
  padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
}
.pane-eff-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 48; }
/* The slim arrows (a phone) still take a finger: the target reaches past the drawn width. */
.pane-eff-arrow { position: relative; }
.pane-eff-arrow::after { content: ''; position: absolute; inset: -4px -6px; }
.pane-eff-arrow.up svg { transform: scaleX(-1); }
.pane-eff-arrow:disabled { color: var(--ink-faint); cursor: default; }
.pane-eff-label { min-width: 40px; text-align: center; font-size: 13px; font-weight: 700; }
.pane-eff.busy .pane-eff-label { opacity: 0.55; }
.pane-eff-label .eff-short { display: none; }
/* Ultracode beside the stepper: a chip the stepper's height, lit when on. */
.pane-ultra {
  flex: none; height: 36px; margin-right: 6px; padding: 0 11px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pane-ultra[hidden] { display: none; }
.pane-ultra.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.pane-ultra.busy { opacity: 0.6; }
.pane-ultra:disabled { color: var(--ink-faint); cursor: default; }
/* The model, left of Ultra: a chip the stepper's height; one tap to change it. */
.pane-model {
  flex: none; height: 36px; margin-right: 6px; padding: 0 11px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  /* A long name (Muse Spark 1.3 Contributor) is shortened in words (modelWords);
     this is the backstop so no name can squeeze the title and the status. */
  max-width: 170px; overflow: hidden; text-overflow: ellipsis;
}
.pane-model[hidden] { display: none; }
.pane-model.busy { opacity: 0.6; }
.pane-model:disabled { color: var(--ink-faint); cursor: default; }
.pane-model .model-short { display: none; }
/* The header's right end is sized by the room it has -- the chat column's
   width, not the window's: a desktop's column is ~600px. Below ~610px the
   turn's cost goes, below ~560 the context, and below ~500 the row takes
   the phone look (family word, Ultra in the model sheet, slim stepper) --
   with the context back while that look leaves room for it. The viewport
   rules further down do the same for a phone, where the two agree. */
.pane-head-row { container: pane-head / inline-size; }
@container pane-head (max-width: 609px) { .pane-usage-turn { display: none; } }
@container pane-head (max-width: 559px) { .pane-usage-ctx { display: none; } }
@container pane-head (max-width: 499px) {
  .pane-model .model-long { display: none; }
  .pane-model .model-short { display: inline; }
  .pane-model { padding: 0 9px; margin-right: 5px; }
  .pane-ultra { display: none; }
  .pane-eff-label .eff-long { display: none; }
  .pane-eff-label .eff-short { display: inline; }
  .pane-eff-arrow { width: 26px; }
  .pane-eff-label { min-width: 32px; }
}
@container pane-head (min-width: 400px) and (max-width: 499px) { .pane-usage-ctx { display: inline; } }
/* A long model name ("Muse Contributor", ~65px more than "Opus 5.5") moves
   every one of those steps 65px earlier, so the title and the status keep
   their room; the chip has .long-name while the name is one (updateChat). */
@container pane-head (max-width: 674px) { .pane-head-row.long-model .pane-usage-turn { display: none; } }
@container pane-head (max-width: 624px) { .pane-head-row.long-model .pane-usage-ctx { display: none; } }
@container pane-head (max-width: 564px) {
  .pane-head-row.long-model .pane-model .model-long { display: none; }
  .pane-head-row.long-model .pane-model .model-short { display: inline; }
  .pane-head-row.long-model .pane-model { padding: 0 9px; margin-right: 5px; }
  .pane-head-row.long-model .pane-ultra { display: none; }
  .pane-head-row.long-model .pane-eff-label .eff-long { display: none; }
  .pane-head-row.long-model .pane-eff-label .eff-short { display: inline; }
  .pane-head-row.long-model .pane-eff-arrow { width: 26px; }
  .pane-head-row.long-model .pane-eff-label { min-width: 32px; }
}
/* Whatever the chip takes, the title block gives: it never draws under it. */
.pane-head .pane-row-main { min-width: 0; overflow: hidden; }
.pane-model .model-tiny { display: none; }
/* A phone: the family alone ("Opus"), the stepper slim, and Ultra leaves the
   header for the model sheet — with the model chip there too, the status line
   was cut to a letter and the cost had no room at all. */
@media (max-width: 430px) {
  .pane-model .model-long { display: none; }
  .pane-model .model-short { display: inline; }
  .pane-model { padding: 0 9px; margin-right: 5px; }
  .pane-ultra { display: none; }
  .pane-eff-label .eff-long { display: none; }
  .pane-eff-label .eff-short { display: inline; }
  .pane-eff-arrow { width: 26px; }
  .pane-eff-label { min-width: 32px; }
  .pane-head-row { padding-right: 8px; }
}
/* A small phone: the shortest word there is ("Muse·C"), or the title is a
   letter. After the 430px block and as specific as the .long-model rules
   above, so it is the one that wins there. */
@media (max-width: 359px) {
  .pane-head-row .pane-model .model-long, .pane-head-row.long-model .pane-model .model-long,
  .pane-head-row .pane-model .model-short, .pane-head-row.long-model .pane-model .model-short { display: none; }
  .pane-head-row .pane-model .model-tiny, .pane-head-row.long-model .pane-model .model-tiny { display: inline; }
}
/* The model sheet: a row per model, the one the chat is on ticked; on a
   small phone the Ultracode switch sits under them (its chip has no room). */
.pane-models { display: flex; flex-direction: column; }
.pane-models-wait, .pane-models-err { display: flex; align-items: center; gap: 10px; padding: 14px 4px; font-size: 14px; color: var(--ink-muted); }
.pane-model-row {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 4px; text-align: left;
  border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--ink); cursor: pointer;
}
.pane-model-row:last-child { border-bottom: none; }
.pane-model-words { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pane-model-name { font-size: 15px; font-weight: 600; }
.pane-model-row.on .pane-model-name { color: var(--accent); }
.pane-model-sub { font-size: 12.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.pane-model-tick { width: 22px; display: flex; color: var(--accent); flex: none; }
/* Meta's rows under the chat's own list: a section label, and a row that cannot be picked yet (no Meta key). */
.pane-models-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink-faint); padding: 14px 4px 4px; border-bottom: 1px solid var(--border); }
.pane-model-row.off { opacity: 0.45; cursor: default; }
/* "New chats": the row every new chat starts on. */
.pane-model-tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; vertical-align: 2px;
  font-size: 11px; font-weight: 600; color: var(--ink-muted); background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.pane-keep-row { margin: 2px 0 6px; }
/* Already what new chats start on: the switch shows it on, dimmed (nothing to do), as the phone draws it. */
.pane-keep-row.is-default { cursor: default; }
.pane-models-retry { align-self: flex-start; min-height: 40px; margin: 0 4px 10px; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--accent); background: none; border: 0; cursor: pointer; }
.pane-model-tick svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 48; }
/* The ••• menu's Cost line: a line of words under the chat's name, not a row to tap. */
.pane-menu-cost { margin-top: 4px; font-size: 12.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.pane-menu-cost b { font-weight: 600; color: var(--ink); }
@media (max-width: 379px) {
  .pane-model { padding: 0 8px; margin-right: 4px; font-size: 12px; }
}

/* The terminal, wrapped to the width it is read at. The server has already
   dropped the dividers and joined the pane's hard-wrapped lines. */
.pane-term-note {
  margin-bottom: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; line-height: 18px; color: var(--ink-muted);
}
.pane-screen {
  margin: 0; padding: 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 17px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---- the box ---- */
.pane-composer { padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--bg); }
.pane-composer-row { display: flex; align-items: flex-end; gap: 8px; }
/* The Claude chat's box in its line (barSides.js): the coins either side, the + inside it. */
.pane-composer .cmd-line.pane-composer-row { margin: 0; gap: 6px; }
.pane-field.pane-field-plus { padding-left: 3px; align-items: flex-end; min-height: 47px; box-sizing: border-box; }
/* A coin on its lip, as the phone's box has it since 21 Oct 2026 (ComposerPill's +; the assistant's .cmd-plus-face). */
.pane-field-plus > .pane-plus { position: relative; box-sizing: border-box; width: 29px; height: 32px; margin: 3px 4.5px; border-radius: 50%; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); color: var(--ink); }
.pane-field-plus > .pane-plus::after { content: ''; position: absolute; inset: -6px; }
.pane-field-plus > .pane-plus:active { transform: translateY(2px); }
.pane-field-plus > .pane-plus.open { border-color: var(--accent); color: var(--accent); }
.pane-field-plus > .pane-plus svg { width: 16px; height: 16px; }
.pane-field-plus > .pane-input { align-self: center; }
.pane-plus {
  flex: none; width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.pane-plus svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; transition: transform 0.2s ease; }
.pane-plus.open svg { transform: rotate(45deg); }
.pane-field {
  flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 6px;
  padding: 3px 3px 3px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface);
}
.pane-input {
  flex: 1; min-width: 0; max-height: 160px; padding: 5px 0; resize: none;
  border: 0; outline: none; background: none; color: var(--ink);
  font: inherit; font-size: 16px; line-height: 22px;
}
.pane-send {
  flex: none; align-self: center; width: 30px; height: 30px; border-radius: 15px; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--ink-faint); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s;
  position: relative;
}
/* 30px to see, 44 to hit: it is also Stop. */
.pane-send::after { content: ''; position: absolute; inset: -7px; }
.pane-send.ready { background: var(--accent); color: var(--on-accent, #fff); }
.pane-send:active { transform: scale(0.92); }
.pane-send svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Claude is answering and the box is empty: the button is Stop, a filled square. */
.pane-send.stop svg { fill: currentColor; stroke: none; }
/* The files, tiles and keys over the box sit over the chat, never under it: on
   a short screen with many files the chat gives way, and its pictures must not
   paint over a chip or its ×. */
.pane-bits { position: relative; z-index: 1; background: var(--bg); }
.pane-bits:empty { display: none; }
.pane-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 0 8px; }
.pane-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 4px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer;
}
.pane-tile span { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.pane-tile svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 32; }
.pane-tile.danger { color: var(--danger); }
.pane-keys { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
.pane-key {
  min-width: 40px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer;
}
/* Files waiting to go with the next message: one row, which slides sideways
   once there are more than fit (fifty photos filled the screen when it wrapped). */
.pane-files {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 2px 0 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.pane-files::-webkit-scrollbar { display: none; }
/* With a mouse, a thin bar under the row says it slides (a finger just swipes it). */
@media (hover: hover) and (pointer: fine) {
  .pane-files { scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
  .pane-files::-webkit-scrollbar { display: block; height: 6px; }
  .pane-files::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 3px; }
}
.pane-files > * { flex: none; }
/* Room for the × that sits on a picture's corner (a scrolling row clips what spills out of it). */
.pane-files:has(.pic) { column-gap: 12px; padding-top: 10px; padding-right: 10px; }
/* Over a long row: how many, and Remove all. */
.pane-files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0 2px; font-size: 12.5px; color: var(--ink-muted); }
.pane-files-clear { border: 0; background: none; min-height: 40px; padding: 0 0 0 12px; font: inherit; font-weight: 600; color: var(--accent, var(--ink)); cursor: pointer; }
.pane-file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
  padding: 4px 6px 4px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; color: var(--ink);
}
.pane-file-name { min-width: 0; max-width: 220px; overflow-wrap: anywhere; }
/* A picked picture is a small square of itself (panes.js chipThumb), × on its
   corner, no name: five go in one short row. */
.pane-file.pic { position: relative; padding: 0; width: 48px; height: 48px; border-radius: 10px; overflow: visible; }
.pane-file-thumb { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; display: block; background: var(--border); }
.pane-file.pic .pane-file-x {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-size: 15px; line-height: 24px; text-align: center; box-shadow: 0 0 0 2px var(--bg);
}
.pane-file.pic .pane-file-x::after { content: ''; position: absolute; inset: -8px; }
.pane-file-x { border: 0; background: none; color: var(--ink-faint); font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
.pane-uploading { font-size: 12.5px; color: var(--ink-muted); }

/* ---- the face (the phone's PaneBuddy; every size a fraction of --s) ---- */
.pb { position: relative; flex: none; display: inline-block; width: var(--s); height: var(--s); animation: pb-bob 2.6s ease-in-out infinite; }
.pb i { display: block; font-style: normal; }
.pb-hop, .pb-tilt { display: block; width: 100%; height: 100%; }
.pb-hop.k-hop { animation: pb-hop 0.62s cubic-bezier(0.3, 0.7, 0.4, 1); }
.pb-hop.k-nod { animation: pb-nod 0.46s ease-in-out; }
.pb-hop.k-start { animation: pb-start 0.45s cubic-bezier(0.3, 0.7, 0.4, 1); }
.pb-tilt { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pb-face { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; background: #FFC83D; overflow: hidden; }
.pb-brow {
  position: absolute; top: calc(var(--s) * 0.2); width: calc(var(--s) * 0.2); height: max(1.5px, calc(var(--s) * 0.045));
  border-radius: calc(var(--s) * 0.03); background: #2B2118;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pb-brow.l { left: calc(var(--s) * 0.2); }
.pb-brow.r { right: calc(var(--s) * 0.2); }
.pb-eyes {
  position: absolute; top: calc(var(--s) * 0.34); left: calc(var(--s) * 0.22); right: calc(var(--s) * 0.22);
  display: flex; justify-content: space-between; transition: transform 0.3s ease, opacity 0.17s ease;
}
.pb .pb-eye { display: flex; align-items: center; justify-content: center; width: calc(var(--s) * 0.2); height: calc(var(--s) * 0.2); border-radius: 50%; background: #FFFDF7; }
.pb-eyes.blink .pb-eye { animation: pb-blink 0.18s ease-in-out; }
.pb-pupil { width: calc(var(--s) * 0.1); height: calc(var(--s) * 0.1); border-radius: 50%; background: #2B2118; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pb-arcs {
  position: absolute; top: calc(var(--s) * 0.38); left: calc(var(--s) * 0.22); right: calc(var(--s) * 0.22);
  display: flex; justify-content: space-between; opacity: 0; transition: opacity 0.17s ease;
}
.pb-arc {
  box-sizing: border-box; width: calc(var(--s) * 0.2); height: calc(var(--s) * 0.11);
  border: solid #2B2118; border-width: max(1.5px, calc(var(--s) * 0.05)) max(1px, calc(var(--s) * 0.03)) 0;
  border-radius: calc(var(--s) * 0.2) calc(var(--s) * 0.2) 0 0;
}
.pb-cheeks {
  position: absolute; top: calc(var(--s) * 0.58); left: calc(var(--s) * 0.08); right: calc(var(--s) * 0.08);
  display: flex; justify-content: space-between; opacity: 0; transition: opacity 0.17s ease;
}
.pb-cheeks i { width: calc(var(--s) * 0.16); height: calc(var(--s) * 0.09); border-radius: calc(var(--s) * 0.05); background: #FF8A73; }
.pb.arcs .pb-arcs { opacity: 1; }
.pb.arcs .pb-eyes { opacity: 0; }
.pb.arcs .pb-cheeks { opacity: 0.55; }
.pb-mouth {
  position: absolute; left: 0; right: 0; top: calc(var(--s) * 0.6); display: flex; justify-content: center;
  opacity: 0; transform: scale(0.6); transition: opacity 0.17s ease-out, transform 0.17s ease-out;
}
.pb-mouth.on { opacity: 1; transform: none; }
.pb-m-flat {
  margin-top: calc(var(--s) * 0.09); width: calc(var(--s) * 0.24); height: max(1.5px, calc(var(--s) * 0.05));
  border-radius: 2px; background: #2B2118; transform: translateX(calc(var(--s) * 0.05));
}
.pb-m-smile {
  box-sizing: border-box; margin-top: calc(var(--s) * 0.01); width: calc(var(--s) * 0.32); height: calc(var(--s) * 0.13);
  border-bottom: max(1.5px, calc(var(--s) * 0.05)) solid #2B2118; border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.pb-m-o { margin-top: calc(var(--s) * 0.03); width: calc(var(--s) * 0.13); height: calc(var(--s) * 0.15); border-radius: 50%; background: #2B2118; }
.pb-m-grin {
  position: relative; width: calc(var(--s) * 0.38); height: calc(var(--s) * 0.19); overflow: hidden; background: #2B2118;
  border-radius: calc(var(--s) * 0.03) calc(var(--s) * 0.03) calc(var(--s) * 0.19) calc(var(--s) * 0.19);
}
.pb-m-grin::after {
  content: ''; position: absolute; left: 50%; bottom: calc(var(--s) * -0.04);
  width: calc(var(--s) * 0.2); height: calc(var(--s) * 0.1); margin-left: calc(var(--s) * -0.1);
  border-radius: calc(var(--s) * 0.05); background: #E8655A;
}
@keyframes pb-bob { 0%, 100% { transform: none; } 50% { transform: translateY(calc(var(--s) * -0.035)); } }
@keyframes pb-hop {
  0% { transform: none; } 24% { transform: translateY(calc(var(--s) * -0.2)); }
  55% { transform: translateY(calc(var(--s) * 0.03)); } 75% { transform: translateY(calc(var(--s) * -0.03)); } 100% { transform: none; }
}
@keyframes pb-nod { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: translateY(calc(var(--s) * 0.04)); } }
@keyframes pb-start {
  0% { transform: none; } 25% { transform: translateY(calc(var(--s) * -0.1)); }
  60% { transform: translateY(calc(var(--s) * 0.02)); } 100% { transform: none; }
}
@keyframes pb-blink { 0%, 100% { transform: none; } 40% { transform: scaleY(0.1); } }

/* ---- the sheets ---- */
.pane-new, .pane-menu { display: flex; flex-direction: column; gap: 2px; }
.pane-new-head h3 { margin: 0 0 2px; font-size: 20px; }
.pane-new .field-label { margin: 14px 0 6px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
}
.pill.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pill.off { opacity: 0.32; }
.pill.sm { padding: 6px 12px; font-size: 13px; }
.pill-initials { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; opacity: 0.75; }
/* Picking up a conversation that is not running: a row, because what tells
   two of these apart is a sentence, and a sentence does not fit on a pill. */
.pane-conv {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-bottom: 4px; text-align: left;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.pane-conv.on { border-color: var(--accent); background: var(--accent-soft, rgba(31, 91, 78, 0.08)); }
.pane-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pane-conv-title { font-size: 14px; overflow-wrap: anywhere; }
.pane-conv-tick { flex: none; width: 16px; color: var(--accent); }
.pane-conv-tick svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }
.pane-hint { margin-top: 6px; }
/* The button stays on screen: it sticks to the foot of the sheet's scroll. */
.pane-new-foot {
  position: sticky; bottom: -28px; z-index: 1;
  margin: 18px -18px -28px; padding: 10px 18px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(transparent, var(--bg) 14px);
}
.pane-new-foot .small { text-align: center; overflow-wrap: anywhere; }
.btn.wide { width: 100%; justify-content: center; padding: 13px; font-size: 15px; border-radius: 14px; }

.pane-menu-head { padding: 0 2px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.pane-menu-title { font-size: 18px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.pane-menu-meta { margin-top: 2px; font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.pane-menu-row {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 4px; text-align: left; font-size: 16px; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--border); background: none; cursor: pointer;
}
.pane-menu-row:last-child { border-bottom: none; }
.pane-menu-row.danger { color: var(--danger, #C43D3D); }
.pane-menu-ico { width: 20px; display: flex; color: var(--ink-muted); }
.pane-menu-row.danger .pane-menu-ico { color: inherit; }
.pane-menu-ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 36; }
.pane-ask h3 { margin-bottom: 6px; }
.pane-ask-body { margin: 0 0 16px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.pane-ask-row { display: flex; justify-content: flex-end; gap: 8px; }
.btn.pane-danger-btn { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Inside the phone app's WebView the page IS the screen: the app's own header
   sits above it, so the clearance both heads reserve for the rail is dead space. */
body.embedded .pane-list-head { padding-top: calc(12px + env(safe-area-inset-top)); }
body.embedded .pane-band { padding-top: 6px; }

/* ---- the work: the box that adds it, a card per business, a business's page, a task's sheet ----
   Tasks and ideas live beside the chats, under each business (pages/panes.js,
   pages/work.js; the phone's components/work/). Quiet on purpose: no pills,
   no heavy borders, a business's colour only in its small mark. One glyph set
   — ○ open, a spinner while Claude works, orange ● needs you, ✓ done, ◇ an
   idea — and a row's status only ever in its one slot at the end, so the row
   never jumps. Every target a thumb can hit is 44px. */

/* The box that adds work, in the head: it stays at the top as the list scrolls. */
.work-cap { margin-top: 8px; }
.work-cap-field { padding: 3px 3px 3px 14px; align-items: flex-end; }
.work-cap-input { max-height: 132px; }
/* The hint is one line, whatever the width; what is typed wraps. */
.work-cap-input:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* input: a placeholder cannot wrap */ }
.work-cap-field .pane-send, .work-cap-mic { position: relative; width: 36px; height: 36px; border-radius: 18px; }
/* 44px to hit, 36 to see. */
.work-cap-field .pane-send::after, .work-cap-mic::after { content: ''; position: absolute; inset: -4px; }
.work-cap-mic {
  flex: none; border: 0; background: none; color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.work-cap-mic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 34; }
.work-cap-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 2px 0; }
/* Where the line will go: "→ Catena · Task". Filled when you picked it. */
.work-chip {
  position: relative; display: inline-flex; align-items: center; max-width: 100%; min-height: 30px; padding: 4px 12px; border-radius: 15px;
  border: 1px solid var(--border); background: none; color: var(--ink-muted); font-size: 13px; font-weight: 700; cursor: pointer;
}
.work-chip-text { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.work-chip.on { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }
/* Sent with no network: it says so where the line still is, and a tap sends it again. */
.work-chip.unsent { border-color: color-mix(in srgb, var(--pane-needs) 50%, var(--border)); color: var(--pane-needs); }
.work-chip::after { content: ''; position: absolute; inset: -7px -4px; }
.work-picker { width: 100%; display: flex; flex-direction: column; gap: 8px; padding-bottom: 2px; }
.work-picker-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -8px 0 -6px; }
.work-picker-head { min-width: 0; max-width: 100%; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.work-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.work-pick {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; min-height: 36px; padding: 0 12px;
  border-radius: 18px; border: 1px solid var(--border); background: none; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
.work-pick.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.work-pick-label { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.work-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.work-segs { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.work-seg {
  min-width: 80px; min-height: 38px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--ink-muted); font-size: 14px; font-weight: 700; cursor: pointer;
}
.work-seg.on { background: var(--surface-solid); border-color: var(--border); color: var(--ink); }

/* A card per business: its header, then two chats, then up to three tasks. The header's left
   side is one tap into the business's page — the mark, the name, and under
   it the count that stands for every row the card has no room for — and ends
   in a ›. No line at the foot. */
.work-card { margin-bottom: 8px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.work-card-head { display: flex; align-items: center; min-height: 44px; padding: 0 2px 0 10px; }
.work-card-name { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 10px; cursor: pointer; outline-offset: -2px; border-radius: 12px; }
.work-card-words { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; }
.work-card-title { min-width: 0; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.work-card-count { min-width: 0; font-size: 12.5px; line-height: 16px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.work-card-today { white-space: nowrap; }
.work-card-done { color: var(--work-done); }
.work-card-go { flex: none; display: flex; margin-left: -4px; }
.work-card-go svg { width: 14px; height: 14px; stroke: var(--ink-faint); fill: none; stroke-width: 48; }
/* A row gives its title the room on a narrow card: the slot's padding
   shrinks, and on a phone under 360 wide (a card of 329 inside) "Working ·"
   goes — the spinner and "3m" stay. "Starting…", a bare "Working" and
   "Needs you" stay whatever the width. */
.work-card, .work-group { container-type: inline-size; }
@container (max-width: 300px) { .work-card-today:not(.alone) { display: none; } }
@container (max-width: 360px) { .work-row .work-slot { padding: 0 6px 0 4px; gap: 5px; } }
@container (max-width: 329px) { .work-slot.work .work-slot-word { display: none; } }
.work-icon-btn {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; background: none; color: var(--ink-muted); cursor: pointer;
}
.work-icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 34; }
.work-icon-btn:disabled { opacity: 0.45; }
.work-icon-btn .spin { width: 16px; height: 16px; }
@media (hover: hover) {
  .work-icon-btn:not(:disabled):hover, .work-play:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .work-row:not(.struck):hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
}
/* A chat, on a card or a business's page: the buddy's face in the column a
   task's ○ takes, wearing where the chat has got to (chatFace), and what it
   is doing in words at the row's end. A face and a ring never read alike. */
.work-group .pane-row.inner { padding: 7px 12px 7px 8px; }
.work-chat-face { display: inline-flex; }
.work-sheet-chat .work-chat-face { flex: none; }
.work-chat { cursor: pointer; outline-offset: -2px; }
/* A chat's title takes up to two lines (a task's, all it needs); its end says the rest. */
.work-chat .work-main { padding-right: 6px; }
.work-chat .work-title { display: block; overflow-wrap: break-word; }
/* A card's chats sit on a band of their own, above its tasks, so the two
   never read as one list; its last line opens the rest in place. */
.work-chats { background: var(--work-band); border-top: 1px solid var(--work-band-edge); }
.work-chats + .work-tasks { border-top: 1px solid var(--work-band-edge); }
.work-more-line { display: flex; align-items: stretch; }
.work-more {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 52px; margin: 0;
  border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; outline-offset: -2px;
}
.work-more-text { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.work-more.all { flex: none; padding: 0 14px; }
.work-more-chev, .work-more-go { flex: none; display: flex; }
.work-more-chev svg, .work-more-go svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 48; }
.work-more-chev svg { transform: rotate(90deg); transition: transform 0.2s; }
.work-more-chev.up svg { transform: rotate(-90deg); }
@media (hover: hover) { .work-more:hover { color: var(--ink); } }
.work-chat.active { background: var(--accent-soft); }
.work-lead { flex: none; width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; }
.work-chat .work-slot { cursor: inherit; }
/* The time: on a quiet row the only word on how fresh it is, so readable, not faint. */
.work-slot.time { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }
.work-slot.ended { font-size: 12.5px; font-weight: 500; color: var(--work-done); }
.work-slot.failed { font-size: 12.5px; font-weight: 500; color: var(--work-failed); }
/* On a business's page the end sits on the name's line: words, not a button. */
.pane-row-line .work-slot { min-width: 0; min-height: 0; max-width: 45%; padding: 0; }
.work-group .pane-sep { margin-left: 52px; }

/* Recent: the five chats last active, a column each across the width — the
   picture the chat's own header wears (its business's badge, the buddy in
   the corner saying where it has got to) over its name, two lines at most.
   Nothing scrolls sideways: at 320 a column is still 57px. */
.pane-sec-label.recent { margin: 0 0 2px 2px; }
/* Recent (21 Oct 2026, review round 2): a row each, as the Claude app's Recents — the chat's picture, its name
   beside it, whole, wrapping between words across the width at one size. Columns of faces made a long name a tower
   and split its words. The phone's WorkHome RecentRow. */
.work-recent { display: flex; flex-direction: column; gap: 2px; }
.work-recent-item {
  position: relative; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 12px;
  margin: 0; padding: 6px 8px; border: 0; border-radius: 12px; background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; outline-offset: -2px;
}
.work-recent-item > :first-child { flex: none; }
.work-recent-name { flex: 1; min-width: 0; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ink); overflow-wrap: break-word; }
/* The chat open beside the list (a wide screen): its name in the accent, and a line at its left. */
.work-recent-item.active .work-recent-name { color: var(--accent); }
.work-recent-item.active::after {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--accent);
}
@media (hover: hover) { .work-recent-item:not(.active):hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } }

/* Needs you: a row per ask, a chat row's weight — the business's mark, the
   chat's name over one line of what it asks, and at the end a Yes (a
   permission prompt) or a ›. The orange is a thin edge, not a box. */
/* The row holds two controls side by side: the part that opens the chat, and the Yes. */
.work-needs-row { position: relative; display: flex; align-items: center; min-height: 48px; padding-right: 4px; }
.work-needs-row::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--pane-needs); pointer-events: none; }
.work-needs-row + .work-needs-row { border-top: 1px solid var(--border); }
.work-needs-row.active { background: var(--accent-soft); }
.work-needs-open { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 5px 0 5px 12px; cursor: pointer; outline-offset: -2px; }
/* Before a Yes, the words stop short of it: the gap is nobody's, so a thumb meant for the row never answers. */
.work-needs-open:not(:last-child) { padding-right: 10px; }
.work-needs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.work-needs-title { font-size: 15px; line-height: 19px; font-weight: 600; color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.work-needs-q { font-size: 13px; line-height: 17px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.work-needs-go { flex: none; width: 36px; display: flex; justify-content: center; }
/* ✕ Dismiss: the row's last control, quiet until pointed at; a 44px target. */
.work-needs-x {
  position: relative; flex: none; width: 36px; height: 36px; margin-right: 2px; padding: 0; border: 0; border-radius: 18px;
  background: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.work-needs-x::after { content: ''; position: absolute; inset: -4px; }
.work-needs-x svg { width: 16px; height: 16px; stroke: var(--ink-faint); fill: none; stroke-width: 40; }
@media (hover: hover) { .work-needs-x:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); } }
@media (hover: hover) { .work-needs-x:not(:disabled):hover svg { stroke: var(--ink); } }
.work-needs-go svg { width: 15px; height: 15px; stroke: var(--ink-faint); fill: none; stroke-width: 48; }
/* Yes: its own 44px target, a gap from the words, so a tap meant for the row never answers. */
.work-yes {
  position: relative; flex: none; min-width: 56px; height: 34px; margin: 0 10px 0 4px; padding: 0 14px; border-radius: 17px;
  border: 1px solid var(--pane-needs); background: none; color: var(--pane-needs); font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.work-yes::after { content: ''; position: absolute; inset: -5px -4px; }
.work-yes .spin { width: 14px; height: 14px; border-top-color: var(--pane-needs); }
/* Held a moment after the question under it changed: dimmed, and taps go nowhere. */
.work-yes.held { opacity: 0.4; cursor: default; transition: opacity 0.2s; }
@media (hover: hover) { .work-needs-row:not(.active):hover { background: color-mix(in srgb, var(--ink) 3%, transparent); } }
@media (hover: hover) { .work-yes:not(:disabled):hover { background: color-mix(in srgb, var(--pane-needs) 10%, transparent); } }
/* A small phone: Yes and ✕ give the words room (the targets stay 44px). After .work-yes, which it overrides. */
@media (max-width: 359px) {
  .work-yes { min-width: 48px; padding: 0 10px; margin-right: 8px; }
  .work-needs-x { width: 32px; }
}

/* A task: ○ · its title · the slot. An idea: ◇ · its title · → Task. A
   title is never cut: it wraps, and the ○ and the slot stay by its first line. */
.work-row { display: flex; align-items: flex-start; min-height: 44px; padding: 0 4px; }
.work-tick { flex: none; width: 40px; height: 44px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.work-ring {
  width: 21px; height: 21px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--ink-faint);
  display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s;
}
.work-ring svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 56; stroke-linecap: round; stroke-linejoin: round; }
.work-ring.on { background: var(--success); border-color: var(--success); }
.work-ring.done { background: var(--ink-faint); border-color: var(--ink-faint); }
.work-ring.done svg { stroke: var(--bg); }
@media (hover: hover) { .work-tick:not(:disabled):hover .work-ring:not(.done) { border-color: var(--success); } }
.work-main { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: flex-start; padding: 12px 0 12px 8px; cursor: pointer; outline-offset: -2px; border-radius: 10px; }
.work-new-dot { flex: none; width: 7px; height: 7px; margin: 6.5px 7px 0 0; border-radius: 50%; background: var(--accent); }
.work-title { flex: 1; min-width: 0; font-size: 15.5px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.work-title.later, .work-row.struck .work-title, .work-row.done .work-title { color: var(--ink-faint); }
.work-row.struck .work-title, .work-row.done .work-title { text-decoration: line-through; }
.work-row.leaving { animation: work-leave 0.22s ease-in both; }
@keyframes work-leave { to { opacity: 0; transform: translateX(8px); } }
.work-idea-glyph { flex: none; width: 40px; padding-top: 12px; text-align: center; font-size: 16px; line-height: 20px; color: var(--ink-faint); }
.work-slot-empty { flex: none; width: 12px; }
.work-play {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; background: none; color: var(--accent); cursor: pointer;
}
.work-play svg { width: 17px; height: 17px; fill: currentColor; }
.work-slot {
  flex: none; max-width: 35%; min-width: 44px; min-height: 44px; padding: 0 8px;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  border: 0; background: none; color: var(--ink-muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.work-slot-text { min-width: 0; white-space: normal; overflow-wrap: break-word; }
/* "Working · 10m": if anything is cut it is the word, never the minutes. */
.work-slot-time { flex: none; white-space: nowrap; }
.work-slot.work { max-width: 40%; color: var(--success); }
/* On a row, "Working · 12m" is never cut to "Workin…": the slot is as wide as
   its words (under 360 wide only "3m" is left of them), and the title gives way. */
.work-row > .work-slot.work { max-width: none; }
.work-slot.needs { max-width: 40%; color: var(--pane-needs); }
/* "Starting…" (and "Open") whole on a 320 phone: the title gives way first. */
.work-slot.quiet { max-width: 40%; }
.work-slot.faint { color: var(--ink-faint); }
.work-slot.accent { color: var(--accent); }
.work-slot.strong { font-weight: 700; }
.work-slot .spin { flex: none; width: 13px; height: 13px; }
.work-slot.work .spin { border-top-color: var(--success); }
.work-slot.quiet .spin { border-top-color: var(--ink-muted); }
.work-needs-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pane-needs); }
/* The row the toast was tapped for: a flash, where it is. */
.work-row.flash { animation: work-flash 1.6s ease-out; }
@keyframes work-flash { 0%, 35% { background: var(--accent-soft); } 100% { background: transparent; } }

/* The foot of the home, and the notice when the chats can't be read. */
.pane-login-foot { align-items: center; gap: 2px; }
.pane-list .pane-login-foot { padding: 6px 0 4px; }
.work-foot-dot { color: var(--ink-faint); }
.work-notice { padding: 4px 2px; font-size: 13.5px; color: var(--ink-muted); }

/* A business's page: in the head, which stays, two rows as a chat's top has (and the phone's page):
   "‹ Claude" where the home's title is, then its mark, its name and New chat — so the top of the
   page always says where the box under it files. The word stays beside the ‹ at every width. */
.pane-list-top { container-type: inline-size; }
.work-band { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.work-band .pane-back { align-self: flex-start; min-height: 36px; margin-left: -6px; padding: 0 8px 0 0; }
.work-band-biz { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 2px -6px 0 0; }
.work-band-title { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.work-none { margin: 0 0 2px 2px; font-size: 14px; color: var(--ink-faint); }
/* Earlier: in the Chats rows' own columns, so the two read as one kind of thing. */
.work-group .pane-earlier-row { padding: 7px 12px 7px 8px; }
/* Resume: 30 to see, 44 to hit. */
.work-group .pane-resume { position: relative; }
.work-group .pane-resume::after { content: ''; position: absolute; inset: -7px -4px; }
.work-more-line { width: 100%; min-height: 44px; border: 0; background: none; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; }
.work-done-line {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -6px 0 2px; padding: 0 8px 0 2px;
  border: 0; background: none; color: var(--ink-muted); font-size: 13px; font-weight: 700; cursor: pointer;
}
.work-fold { display: inline-flex; }
.work-fold svg { width: 14px; height: 14px; stroke: var(--ink-faint); fill: none; stroke-width: 48; transition: transform 0.18s ease; }
.work-fold.open svg { transform: rotate(90deg); }

/* A task, opened (inside the shell's panel, so outside the page: its orange is set here too). */
.work-sheet { --pane-needs: #9c5a0a; position: relative; display: flex; flex-direction: column; }
/* ×, top right, as on the phone: the handle can't be dragged with a mouse. */
.work-sheet-x {
  position: absolute; top: -12px; right: -10px; z-index: 1; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; background: none; color: var(--ink-muted); cursor: pointer;
}
.work-sheet-x svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 40; }
@media (hover: hover) { .work-sheet-x:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
.work-sheet-top { padding-right: 36px; }
[data-theme="dark"] .work-sheet { --pane-needs: #e0902a; }
.work-sheet-title {
  width: 100%; padding: 2px 0 6px; resize: none; overflow: hidden; border: 0; outline: none; background: none;
  color: var(--ink); font: inherit; font-size: 19px; font-weight: 600; line-height: 1.35;
}
/* Done: greyed, not struck — it is still the field the title is edited in. */
.work-sheet-title.done { color: var(--ink-muted); }
.work-sheet-mid { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.work-sheet-note { margin-top: 12px; min-height: 64px; resize: vertical; font-size: 15px; line-height: 1.4; }
.work-sheet-rest { display: flex; flex-direction: column; align-items: stretch; }
.work-sheet-chat {
  display: flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 14px; padding: 0 12px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 15px; text-align: left; cursor: pointer;
}
.work-sheet-chat svg { flex: none; width: 18px; height: 18px; stroke: var(--ink-muted); fill: none; stroke-width: 34; }
.work-sheet-chat > svg:last-child { width: 15px; height: 15px; stroke: var(--ink-faint); stroke-width: 48; }
.work-sheet-chat-label { flex: none; font-weight: 600; }
.work-sheet-chat-state { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.work-sheet-chat-state.work { color: var(--success); }
.work-sheet-chat-state.needs { color: var(--pane-needs); }
.work-sheet-big {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 14px;
  border-radius: 14px; border: 0; background: var(--ink); color: var(--bg); font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.work-sheet-big svg { width: 16px; height: 16px; fill: currentColor; }
.work-sheet-big.ghost { background: none; border: 1px solid var(--border); color: var(--ink); }
/* A word above ▶: why it is there again (its chat ended, or the bridge's sentence when starting failed). */
.work-sheet-note-line { margin-top: 12px; font-size: 13.5px; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
.work-sheet-note-line.error { color: var(--pane-needs); }
.work-sheet-line { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; }
.work-sheet-line-text { font-size: 14.5px; color: var(--ink-muted); }
.work-sheet-line-text:first-child { padding-left: 2px; }
.work-sheet-done, .work-sheet-moon { display: inline-flex; }
/* Done's mark: a filled green circle, its tick cut out of it (the sheet shows through), as the phone's; Reopen at the far end. */
.work-sheet-done { flex: none; width: 17px; height: 17px; margin: 0 1px 0 2px; border-radius: 50%; background: var(--success); align-items: center; justify-content: center; }
.work-sheet-done svg { width: 11px; height: 11px; stroke: var(--bg); fill: none; stroke-width: 64; stroke-linecap: round; stroke-linejoin: round; }
.work-sheet-done + .work-sheet-line-text { flex: 1; min-width: 0; }
.work-sheet-moon svg { width: 16px; height: 16px; stroke: var(--ink-faint); fill: none; stroke-width: 34; }
.work-text-btn {
  align-self: flex-start; min-height: 44px; padding: 0 4px; border: 0; background: none;
  color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.work-text-btn.accent { color: var(--accent); font-weight: 700; }
.work-text-btn.danger { color: var(--danger); }
.work-sheet-log { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.work-sheet-log-line { display: flex; align-items: flex-start; gap: 10px; }
.work-sheet-log-text {
  flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere;
  display: block;
}
.work-sheet-log-when { flex: none; font-size: 11.5px; line-height: 1.6; color: var(--ink-muted); }

/* The page's toast: it can be answered. At the foot of the list, or the top of a chat.
   Every message is the same full-width bar — "Answered" as much as "Done · … Undo" —
   with its buttons, when it has any, at the end. */
.pane-toast {
  position: fixed; z-index: var(--z-toast, 50); left: 12px; width: calc(100% - 24px);
  bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none;
}
.pane-toast[data-place='top'] { top: calc(58px + env(safe-area-inset-top)); bottom: auto; }
.pane-toast-card {
  width: 100%; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 14px; border-radius: 14px;
  background: var(--ink); color: var(--bg); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.pane-toast.acts .pane-toast-card { padding: 0 4px 0 14px; pointer-events: auto; }
/* Two lines at most, cut at the second: the room above and below is margin, not
   padding, so nothing of a third line shows through it. */
.pane-toast-text {
  flex: 1 1 auto; min-width: 0; margin: 11px 0; padding: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; text-align: left; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Words that can be tapped (the row just added): a button that looks like the words. */
.pane-toast-go { border: 0; background: none; color: inherit; font-family: inherit; cursor: pointer; }
.pane-toast-btn {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; background: none;
  color: var(--bg); font-size: 14px; font-weight: 800; cursor: pointer;
}
.pane-toast.in .pane-toast-card { animation: pane-toast-up 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.pane-toast[data-place='top'].in .pane-toast-card { animation-name: pane-toast-down; }
@keyframes pane-toast-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pane-toast-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---- both screens at once ---- */
@media (min-width: 720px) {
  body[data-page='panes'] .app-shell { max-width: 1080px; }
  .pane-layout { flex-direction: row; }
  /* Beats the [data-view=…] rules above only by matching their specificity. */
  .pane-layout[data-view] > .pane-list,
  .pane-layout[data-view] > .pane-chat { display: flex; }
  /* Wide enough that a task's title is more than a word or two beside its status. */
  .pane-layout > .pane-list { flex: 0 0 min(440px, 42%); border-right: 1px solid var(--border); }
  .pane-layout > .pane-chat { flex: 1; min-width: 0; }
  /* Both are on screen, so the way back has nowhere to go. */
  .pane-band > .pane-back { visibility: hidden; }
  /* A sheet rises in the middle, a sheet's width — not across both columns. */
  body[data-page='panes'] .panel-card { left: max(0px, calc(50% - 290px)); right: max(0px, calc(50% - 290px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pane-in, .pane-enter-r, .pane-enter-l, .pane-msg-in, .pane-buddy.in, .pane-end.in,
  .pb, .pb-hop, .pb .pb-eye, .pane-dots i, .pane-toast.in .pane-toast-card, .work-row.leaving { animation: none !important; }
  .pane-dots i { opacity: 0.6; }
  .pane-tap, .pane-buddy.out, .pane-bubble, .pb * { transition: none !important; }
}

/* ---- Study (pages/study*.js · components/pages/StudyPage.tsx) ----
   Classes, material, the session player and the diagrams. Every colour is a
   theme token; amber is the one fixed colour (health/ui's AMBER), darkened
   for text on a light page so "Shaky" stays readable. A class's own colour
   is only ever its dot and its card's edge. */
:root { --st-amber: #B8701A; }
[data-theme="dark"] { --st-amber: #F59E3C; }

/* The session and the Ask tab bring their own bottom bar; the assistant's
   is hidden (still mounted), and a session hides the top rail as well —
   the ✕ is the way out. */
body.st-own-bar .shell-bar, body.st-own-bar .convo-root, body.st-own-bar .kb-space { display: none; }
body.st-focus .float-nav { display: none; }

.screen-scroll > .inner.st-page { padding-top: calc(52px + env(safe-area-inset-top)); padding-bottom: 28px; }
.st-title { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; margin: 2px 2px 14px; }
/* Study's titles wear the theme's display face (serif, mono, rounded — whatever the theme is). */
.st-title, .st-end-title, .st-step-title { font-family: var(--font-display, inherit); }
/* In class (MATH.md "In class"): the button by the title, the pages, a page */
.st-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 14px; }
.st-title-row .st-title { margin: 0; min-width: 0; }
.st-inclass-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 15px 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14.5px; font-weight: 700; }
.st-inclass-btn svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 36; }
@media (hover: hover) { .st-inclass-btn:hover { border-color: var(--accent); } }
.st-ic-new { display: flex; flex-direction: column; gap: 12px; }
.st-ic-new-top { display: flex; align-items: center; gap: 12px; }
.st-ic-badge { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.st-ic-badge svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 32; }
.st-ic-new-words { min-width: 0; }
.st-ic-new-title { font-size: 16px; font-weight: 800; }
.st-ic-for { display: flex; align-items: flex-start; gap: 10px; }
.st-ic-for > .small { flex: none; padding-top: 8px; }
.st-ic-for .fl-chips { flex: 1; min-width: 0; }
.st-ic-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.st-ic-chip > span:last-child { white-space: normal; overflow-wrap: break-word; }
.st-ic-row { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 14px; border-bottom: 1px solid var(--border); }
.st-ic-row:last-child { border-bottom: none; }
.st-ic-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; text-align: left; }
.st-ic-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-ic-title { white-space: normal; font-weight: 700; overflow-wrap: break-word; }
.st-ic-sub { white-space: normal; overflow-wrap: break-word; }
.st-ic-none { padding: 18px 8px; text-align: center; }
.st-ic-head { margin-bottom: 0; }
/* The turn: the phone on its side with the paper alone on it (study-inclass.js). */
.st-ic-turn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 19px; background: var(--surface); color: var(--ink); cursor: pointer; }
@media (hover: hover) { .st-ic-turn:hover { border-color: var(--accent); } }
.st-ic-turn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 32; }
.st-ic-turn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* Landscape: the page over the whole window; the app's rail and bar are out of sight; one short head row. */
body.st-land { overflow: hidden; }
body.st-land .st-ic-page { position: fixed; inset: 0; z-index: 90; max-width: none; margin: 0; background: var(--bg); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.st-land .float-nav, body.st-land .cmd-wrap.shell-bar { display: none; }
/* The page's own head says "Not saved yet"; the app's offline bar would cover the way back (the rail is hidden here). */
body.st-sheet .offline-bar { display: none; }
/* The page escaped the shell's 520px column: the Tutor sheet and its scrim follow it to the window. */
body.st-land .panel-back, body.st-land .panel-card { position: fixed; }
body.st-land .panel-card { left: 50%; right: auto; width: min(100%, 720px); transform: translateX(-50%); }
body.st-land .st-ic-page .st-player-top { padding: calc(2px + env(safe-area-inset-top)) 10px 4px; }
body.st-land .st-ic-page .st-ic-head { min-height: 40px; }
@media (min-width: 480px) {
  body.st-land .st-ic-page .st-ic-headwords { flex-direction: row; align-items: baseline; gap: 10px; }
  body.st-land .st-ic-page .st-ic-name { width: auto; flex: 0 1 auto; min-width: 0; white-space: normal; font-size: 16px; overflow-wrap: break-word; }
  body.st-land .st-ic-page .st-ic-headsub { flex: 0 0 auto; max-width: 45%; }
}
body.st-land .st-ic-page .st-mstep { max-width: none; padding: 0 6px 4px; }
body.st-land .st-ic-page .st-ic-ask > span:last-child { display: none; }
body.st-land .st-ic-page .st-ic-ask { padding: 0 6px; }
.st-ic-headwords { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-ic-name { flex: none; display: block; width: 100%; padding: 0; border: none; background: none; color: inherit; text-align: left; cursor: text; }
.st-ic-headsub { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.st-ic-course { flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.st-ic-state { flex: 0 0 auto; max-width: 100%; min-width: 0; white-space: normal; color: var(--ink-faint); overflow-wrap: break-word; }
.st-ic-state.warn { color: var(--danger); }
.st-ic-rename { display: flex; flex-direction: column; gap: 10px; padding: 0 2px 12px; }
.st-ic-menu-title { min-width: 0; margin-right: 12px; overflow-wrap: anywhere; display: block; }
.st-ic-ask { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px 0 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; }
@media (hover: hover) { .st-ic-ask:hover { border-color: var(--accent); } }
/* A small phone: the face alone, so the page's name keeps its room (the label stays for a screen reader). */
@media (max-width: 359px) { .st-ic-ask { padding: 0 6px; } .st-ic-ask > span:last-child { display: none; } }
.st-ic-page .st-mstep { padding-top: 4px; }
.st-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-muted); }
.st-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; }
.st-warn { margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; color: var(--ink);
  background: color-mix(in srgb, #F59E3C 14%, transparent); border: 1px solid color-mix(in srgb, #F59E3C 35%, transparent); }
.st-warn-title { font-weight: 700; margin-bottom: 2px; }
.st-danger { color: var(--danger); }
.st-hint { text-align: center; padding: 18px 10px; font-size: 14px; }
.st-link { padding: 0; color: var(--accent); font-weight: 600; font-size: 14px; align-self: flex-start; }
.st-link.danger { color: var(--danger); }

.st-bar { flex: 1; min-width: 40px; height: 6px; border-radius: 3px; background: var(--tint); overflow: hidden; }
.st-bar.thin { height: 4px; }
.st-bar.lg { height: 8px; border-radius: 4px; }
.st-bar-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.3s ease; }
.st-bar-fill.success { background: var(--success); }
.st-bar-fill.amber { background: #F59E3C; }
.st-bar-fill.faint { background: var(--ink-faint); }
.st-bar-fill.danger { background: var(--danger); }
.st-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 5px; }
.st-dot.lg { width: 12px; height: 12px; border-radius: 6px; }
.st-level { font-size: 12px; font-weight: 700; white-space: nowrap; }
.st-level.faint { color: var(--ink-faint); }
.st-level.accent { color: var(--accent); }
.st-level.success { color: var(--success); }
.st-level.amber { color: var(--st-amber); }
.st-wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.st-wide svg, .st-add-row svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 48; }
.st-go { padding: 13px 16px; font-size: 15px; border-radius: 14px; }
.st-kicker { margin-bottom: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent); }
.st-chev { display: flex; }
.st-chev svg { width: 16px; height: 16px; stroke: var(--ink-faint); fill: none; stroke-width: 44; }
.st-pill { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.st-cite { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--tint); color: var(--ink-muted); }
.st-quote { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--accent); font-style: italic; font-size: 13.5px; color: var(--ink-muted); }
.st-list { padding: 0; overflow: hidden; }
.st-empty-card p { margin-bottom: 10px; color: var(--ink-muted); }
.st-fold { margin-top: 14px; }
.st-fold summary { cursor: pointer; margin: 0 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-muted); }

/* home */
.st-first { padding-top: 30px; }
.st-coach { padding: 16px; }
.st-coach.done .st-kicker { color: var(--success); }
.st-coach-line { margin-bottom: 10px; font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.st-coach-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.st-coach-min { font-size: 13px; font-weight: 700; white-space: nowrap; }
.st-class-card { display: block; width: 100%; text-align: left; border-left: 4px solid var(--st-course, var(--accent)); }
.st-class-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.st-class-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.st-class-ready { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.st-class-ready .small { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.st-ready-word { font-size: 13px; font-weight: 700; white-space: nowrap; }
.st-add-row { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 13px; border: 1px dashed var(--border); border-radius: 14px; color: var(--ink-muted); font-weight: 600; }
.st-archived { margin-top: 22px; }
.st-arch-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; border-bottom: 1px solid var(--border); }
.st-arch-row:last-child { border-bottom: none; }
.st-arch-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 0; text-align: left; }
.st-arch-name { min-width: 0; white-space: normal; font-weight: 600; color: var(--ink-muted); overflow-wrap: break-word; }

/* a class */
.st-head { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-bottom: 12px; }
.st-head-title { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; white-space: normal; overflow-wrap: break-word; }
.st-back { margin-left: -6px; }
.st-seg { flex: none; margin-bottom: 14px; }
/* A class's pace (README "Pace"): the segment's one line under it; in the ⋯ sheet, each choice with its line. */
.st-field .st-seg { margin-bottom: 6px; }
.st-menu-row.st-pace-row { display: flex; align-items: center; gap: 12px; text-align: left; }
.st-pace-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-pace-name { font-weight: 700; }
.st-pace-tick { flex: none; color: var(--accent); font-weight: 800; font-size: 18px; }
.st-next { display: block; width: 100%; text-align: left; }
.st-next-line { margin-bottom: 8px; font-size: 14.5px; color: var(--ink-muted); }
.st-next-line b { color: var(--ink); }
.st-ready-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.st-ready-big { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; white-space: nowrap; }
.st-tab > .st-go { margin-bottom: 10px; }
.st-chips { margin: 2px 0 14px; }
.st-plan-working { margin: -2px 2px 10px; text-align: center; }
.st-coach-set { padding: 2px 14px; }
.st-set-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.st-set-row:last-child { border-bottom: none; }
.st-set-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
/* A row's label keeps its words; what does not fit beside it wraps under it. */
.st-set-row > .st-set-title.grow { flex: 1 0 auto; }
/* The class's tabs are as wide as their words (Material must not become "Mater…" at 360). */
.st-seg .seg-tab { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; }
.st-seg .seg-tab.active { flex: 1.35 1 auto; }
.st-time { width: auto; padding: 6px 10px; }
.st-topic { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.st-topic:last-child { border-bottom: none; }
.st-topic-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; }
.st-graph-ico { display: flex; flex: none; }
.st-graph-ico svg { width: 15px; height: 15px; stroke: var(--accent-2); fill: none; stroke-width: 40; }
.st-topic-meta { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 136px; }
.st-topic-meta .st-bar { flex: 0 0 44px; min-width: 44px; }
.st-add-material { margin-bottom: 12px; }
.st-source { padding: 12px 14px; }
.st-source-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.st-source-ico { display: flex; flex: none; }
.st-source-ico svg { width: 18px; height: 18px; stroke: var(--ink-muted); fill: none; stroke-width: 34; }
.st-source-title { flex: 1; min-width: 0; font-weight: 600; display: block; overflow-wrap: anywhere; }
.st-source-bar { margin-top: 8px; }
.st-exam-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.st-exam-row:last-child { border-bottom: none; }
.st-exam-title { font-weight: 700; }
.st-exam-right { flex: none; text-align: right; }
.st-tab > .btn.soft.st-wide { margin-top: 2px; }

/* sheets */
.st-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.st-label { font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.st-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.st-swatch { width: 30px; height: 30px; border-radius: 15px; border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--bg); }
.st-swatch.on { border-color: var(--ink); }
.st-menu-row { display: block; width: 100%; padding: 14px 4px; text-align: left; font-size: 16px; border-bottom: 1px solid var(--border); }
.st-menu-row:last-child { border-bottom: none; }
.st-menu-row.danger { color: var(--danger); }
.st-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.st-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-align: center; }
.st-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.st-tile-ico { display: flex; }
.st-tile-ico svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 34; }
.st-tile-title { font-size: 14px; font-weight: 700; }
.st-tile-sub { font-size: 11.5px; line-height: 1.3; color: var(--ink-muted); }
.st-paste { margin-top: 12px; min-height: 150px; }
/* Two long choices: they wrap rather than lose their words to an ellipsis. */
.st-add-body .seg-tab { white-space: normal; line-height: 1.25; padding: 8px 6px; }
/* Both halves share the row evenly, so neither is crushed at 320 px. */
.st-add-body .seg-tab, .st-add-body .seg-tab.active { flex: 1 1 0; min-width: 0; }
.st-picked { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.st-picked-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.st-picked-ico { display: flex; flex: none; }
.st-picked-ico svg { width: 16px; height: 16px; stroke: var(--ink-muted); fill: none; stroke-width: 34; }
.st-picked-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.st-picked-size { flex: none; color: var(--ink-muted); }
.st-picked-x { flex: none; width: 26px; height: 26px; color: var(--ink-faint); }
.st-picked-x svg { width: 14px; height: 14px; }
.st-sending { padding: 16px 0 4px; }
.st-writing { margin-top: 6px; }
.st-len { align-items: center; }
.sheet-title .st-level { margin-left: 6px; font-size: 13px; }

/* the exam */
.st-exam-when { margin: -6px 0 12px; font-size: 14px; }
.st-weak-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.st-weak-row:last-child { border-bottom: none; }
.st-weak-name { font-weight: 600; }
.st-plan { padding: 6px 0; }
.st-plan-row { display: flex; gap: 12px; padding: 7px 14px 7px 11px; font-size: 14px; border-left: 3px solid transparent; }
.st-plan-row.is-today { font-weight: 700; border-left-color: var(--accent); }
.st-plan-day { flex: none; width: 64px; color: var(--ink-muted); }
.st-plan-row.is-today .st-plan-day { color: var(--accent); }
.st-plan-row.is-mock .st-plan-what { color: var(--accent-2); font-weight: 600; }
.st-plan-more { display: block; width: 100%; padding: 4px 14px 4px 90px; text-align: left; font-size: 13px; color: var(--ink-faint); }
.st-mock { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
.st-mock > .small { text-align: center; text-wrap: balance; }
.st-prep-line { margin-top: 6px; }
.st-missing { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.st-missing-words { font-weight: 700; }
.st-foot-links { margin-top: 18px; text-align: center; color: var(--ink-faint); }

/* the topic sheet */
.st-topic-sheet { display: flex; flex-direction: column; }
.st-summary { margin-top: 12px; font-size: 15px; }
.st-facts { display: flex; flex-direction: column; gap: 10px; }
.st-fact { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 14.5px; }
.st-fact .st-cite { cursor: pointer; }
.st-counts { margin-top: 14px; }
.st-sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.st-sheet-actions .btn { flex: 1; padding: 12px; }

/* the diagram (study-graph.js) */
.st-graph { margin: 12px 0; padding: 10px 8px 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.st-g { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; overflow: visible; font-family: inherit; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.st-g.drag { touch-action: none; cursor: grab; }
.st-g.grabbing { cursor: grabbing; }
.st-g.tap { touch-action: manipulation; cursor: pointer; }
.st-g.locked { cursor: default; }
.st-g:focus { outline: none; }
.st-g:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.st-g-axis { stroke: var(--ink); stroke-width: 1.5; }
.st-g-axis-name { fill: var(--ink-muted); font-weight: 600; }
.st-g-tick { stroke: var(--ink-faint); stroke-width: 1; }
.st-g-tick-label { fill: var(--ink-muted); }
.st-g-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st-g-line.original { stroke: var(--ink-muted); stroke-width: 2; }
.st-g-line.user { stroke: var(--accent); stroke-width: 3; }
.st-g-line.new { stroke: var(--success); stroke-width: 3; }
.st-g-line.dash { stroke-dasharray: 7 5; }
.st-g-line.guide { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 3; }
.st-g-line.control { stroke: var(--accent-2); stroke-width: 2; }
.st-g-line.control.user { stroke-width: 2.5; }
.st-g-label, .st-g-point-label, .st-g-bracket-label { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.st-g-label { fill: var(--ink-muted); font-weight: 700; }
.st-g-label.user { fill: var(--accent); }
.st-g-label.new { fill: var(--success); }
.st-g-label.control { fill: var(--accent-2); }
.st-g-region { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: color-mix(in srgb, var(--accent) 28%, transparent); stroke-width: 0.75; }
.st-g-region.on { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.st-g-letter { fill: var(--ink); font-weight: 800; pointer-events: none; }
.st-g-arrow { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-g-bracket { fill: none; stroke: var(--ink-muted); stroke-width: 1.25; }
.st-g-bracket-label { fill: var(--ink-muted); font-weight: 600; }
.st-g-point { fill: var(--ink); }
.st-g-point-label { fill: var(--ink); font-weight: 600; }
.st-g-tap { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.st-g-target { fill: var(--success); }
.st-g-handle { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.st-g-handle.control { stroke: var(--accent-2); }
.st-g-grip { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.st-g-legend { margin-top: 6px; font-size: 13px; text-align: center; color: var(--ink-muted); }
.st-g-legend b { color: var(--ink); }
.st-g-caption { margin-top: 6px; font-size: 13px; text-align: center; color: var(--ink-muted); }

/* the player */
.st-player { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.st-player-top { flex: none; display: flex; flex-direction: column; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; }
.st-top-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.st-top-right { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.st-top-stat { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; }
.st-x { flex: none; margin-left: -4px; color: var(--ink-muted); }
.st-player-bar { flex: none; height: 4px; }
.st-skip-top { position: relative; flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 0 8px 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-muted); font-size: 13.5px; font-weight: 700; }
.st-skip-top svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 44; }
.st-skip-top:disabled { opacity: 0.5; }
.st-skip-top::before { content: ''; position: absolute; inset: -6px -4px; }
/* A small screen: Skip is the one word (no chevron, no "topic"), and the face says the streak — so the face's line keeps its room. */
.st-skip-short { display: none; }
@media (max-width: 359px) {
  .st-skip-top { padding: 0 12px; }
  .st-skip-top svg, .st-skip-word { display: none; }
  .st-skip-short { display: inline; }
  .st-top-right:has(.st-skip-top) .st-streak { display: none; }
}
/* The face's line in the header: up to three short lines, never cut. */
.st-top-row .st-buddy-line { font-size: 13px; line-height: 1.25; overflow-wrap: break-word; }
.st-skip-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 4px 4px 4px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13.5px; color: var(--ink-muted); animation: st-card-in 0.16s ease-out; }
.st-skip-note-text { flex: 1 1 200px; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.st-skip-acts { flex: none; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.st-skip-all { flex: none; white-space: nowrap; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.st-skip-note .st-skip-note-x { flex: none; width: 36px; height: 36px; }
.st-skip-note-x svg { width: 14px; height: 14px; }
@media (hover: hover) { .st-skip-top:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-faint); } }
.st-count-label { font-size: 13px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-timer { padding: 1px 6px; border-radius: 6px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--tint); }
.st-timer.low { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.st-player-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 18px 24px; }
.st-step { max-width: 620px; margin: 0 auto; }
.st-step > .st-kicker { margin: 6px 0 12px; color: var(--ink-faint, var(--ink-muted)); }
.st-nowrap { white-space: nowrap; }
.st-blank.is-right { border-color: var(--success); }
.st-blank.is-wrong { border-color: var(--danger); }
.st-player-foot { flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.st-player-foot > .btn, .st-rate, .st-mock-foot { max-width: 620px; margin: 0 auto; }
.st-mock-foot { display: flex; gap: 10px; }
.st-mock-foot > .st-skip { flex: none; padding-left: 22px; padding-right: 22px; }
.st-mock-foot > .st-wide { flex: 1; width: auto; }
.st-step-title { margin-bottom: 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.st-lesson .md { font-size: 15.5px; line-height: 1.55; }
/* A lesson diagram that plays (study-graph.js play): a tap plays it again. */
.st-graph-plays { cursor: pointer; }
.st-example { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); }
.st-example-label { margin-bottom: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent); }
.st-flash { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 260px; padding: 28px 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); }
.st-card-front { font-size: 22px; font-weight: 700; line-height: 1.35; }
.st-card-hint { margin-top: 16px; }
.st-card-back { width: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 16.5px; line-height: 1.5; }
.st-choose { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-muted); }
.st-stem { margin-bottom: 14px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.st-stem .md p, .st-option-text .md p, .st-story .md p { margin: 0; }
/* A stem of several paragraphs (story, then the question in bold): normal weight, the question stands out. */
.st-stem.long { font-size: 16.5px; font-weight: 400; line-height: 1.45; }
.st-stem.long .md p { margin: 0 0 10px; }
.st-stem.long .md p:last-child { margin-bottom: 0; }
.st-stem.long strong { font-weight: 700; }
/* A guided step's label ("Together · step 1 of 2", "Your turn") and its how. */
.st-guide { margin-bottom: 10px; }
.st-guide-label { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent); }
.st-guide-how { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft, rgba(124, 92, 255, 0.10)); font-size: 14.5px; line-height: 1.4; color: var(--ink); }
@media (max-width: 360px) { .st-guide-how { padding: 6px 9px; font-size: 13.5px; line-height: 1.35; } }
.st-graphq > .st-prompt + .st-options, .st-graphq > .st-helper + .st-options { margin-top: 10px; }
.st-guide-how .md p { margin: 0; }
.st-graphq > .st-options + .st-g, .st-graphq > .st-options + * { margin-top: 12px; }
.st-options { display: flex; flex-direction: column; gap: 8px; }
.st-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); text-align: left; font-size: 15px; }
.st-option:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.st-option.on { border-color: var(--accent); background: var(--accent-soft); }
.st-option.is-right { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.st-option.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.st-option-key { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.st-option.on .st-option-key { border-color: var(--accent); color: var(--accent); }
/* 💡 on a choice: a wrong option crossed off, with why under it (MATH.md "Help on a choice or a blank"). */
.st-option.crossed { flex-wrap: wrap; cursor: default; }
.st-option.crossed:hover { border-color: var(--border); }
.st-option.crossed .st-option-key, .st-option.crossed .st-option-text { opacity: 0.55; }
.st-option.crossed .st-option-text { text-decoration: line-through; }
/* The reason stays at full strength, under the option's words (24 px key + 12 px gap). */
.st-option-why { flex-basis: 100%; margin-top: -4px; padding-left: 36px; font-size: 13.5px; line-height: 1.35; color: var(--ink-muted); }
/* 💡 on a blank: the working with the answer masked, then the answer. */
.st-quick { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.st-quick[hidden] { display: none; }
.st-quick-line { padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); font-size: 14.5px; line-height: 1.4; color: var(--ink); animation: st-card-in 0.2s ease-out; }
.st-quick-line.reveal { background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
[data-theme="dark"] .st-quick-line.reveal { background: color-mix(in srgb, var(--success) 26%, var(--surface)); }
/* A diagram question: what the point or area is, quieter under the ask; its options clear of 💡's lines. */
.st-graph-what { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.st-graphq > .st-options { margin-top: 10px; }
/* The figure a choice, a blank or a written question comes with (README "Figures"). */
.st-mc > .st-figure { margin: -4px 0 14px; }
.st-cloze > .st-figure { margin-top: 12px; }
.st-shortq > .st-figure { margin: -4px 0 12px; }
/* Never so tall it pushes the options off a phone's screen. */
.st-figure svg { max-height: 38vh; }
/* 💡 beside Check under a choice or a blank. */
.st-player-foot > .st-foot-row { display: flex; gap: 10px; max-width: 620px; margin: 0 auto; }
.st-foot-row > .st-go { flex: 1; width: auto; }
.st-foot-row > .st-hint-btn { flex: none; min-width: 54px; border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.st-foot-row > .st-hint-btn:disabled { opacity: 0.4; }
/* Scratch paper (README "Scratch paper"): ✎ by Check, filled while the paper is out. */
.st-foot-row > .st-paper-btn.on, .st-mock-foot > .st-paper-btn.on { background: var(--accent); color: var(--on-accent, #fff); border-color: transparent; }
.st-mock-foot > .st-paper-btn { flex: none; min-width: 54px; border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.st-foot-row > .st-report-btn { color: var(--ink-muted); }
.st-report-act { display: inline-flex; align-items: center; gap: 6px; }
.st-report-act svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 34; }
.st-report { display: flex; flex-direction: column; gap: 12px; padding: 12px 2px 10px; }
.st-report .fl-chips { flex-wrap: wrap; }
.st-report-text { width: 100%; box-sizing: border-box; min-height: 64px; max-height: 160px; field-sizing: content; resize: none; }
.st-report .fl-chip { min-height: 40px; font-size: 14px; }
.st-report-err { color: var(--danger, #c0392b); font-size: 14px; font-weight: 600; }
.st-card-foot { display: flex; flex-direction: column; gap: 8px; }
.st-card-report { display: flex; justify-content: flex-end; }
/* The question over its scratch paper: the question scrolls in its share, the paper takes the rest. */
.st-player.scratch { overflow: hidden; container: st-scratch-player / size; }
.st-player.scratch .st-player-body { flex: 0 1 auto; max-height: max(42%, calc(100% - 340px)); padding-bottom: 8px; }
.st-scratch { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 12px 6px; container: st-scratch / size; }
.st-scratch .st-canvas { min-height: 0; }
/* A short player (a phone's keyboard up — iPhone shrinks the shell, not the viewport): the question gives up some of its share, Check stays in sight. */
@container st-scratch-player (max-height: 560px) { .st-player-body { max-height: 30%; } }
/* A paper too short for its line beside the trays: the line goes; too short to write on: the paper waits out of sight. */
@container st-scratch (max-height: 240px) { .st-cv-empty { display: none; } }
@container st-scratch (max-height: 120px) { .st-canvas { visibility: hidden; } }
.st-cloze-text { font-size: 18px; line-height: 2.1; }
.st-blank { width: 7ch; min-width: 7ch; max-width: 100%; margin: 0 4px; padding: 0 6px; border: none; border-bottom: 2px solid var(--accent); border-radius: 6px 6px 0 0; background: var(--accent-soft); color: var(--ink); font: inherit; outline: none; }
.st-short { min-height: 140px; font-size: 15.5px; }
.st-count { margin-top: 4px; text-align: right; }
.st-story { margin-bottom: 6px; font-size: 15px; color: var(--ink-muted); }
.st-prompt { margin-bottom: 4px; font-size: 17px; font-weight: 700; }
.st-graphq .st-graph { margin-top: 10px; }
.st-graph-under { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.st-helper { font-size: 13px; color: var(--ink-muted); }
.st-graphq > .st-helper { margin: -2px 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.st-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 0; color: var(--ink-muted); }
.st-rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st-rate-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 11px 4px; border-radius: 14px; font-size: 14px; font-weight: 700; color: #fff; }
/* Fixed colours, not the theme's: a dark theme's danger and success are pale and lose white text; these all read at 4.5:1 or better. */
.st-rate-btn.danger { background: #C8453A; }
.st-rate-btn.amber { background: #F59E3C; color: #2A1A05; }
.st-rate-btn.success { background: #2A7F4F; }
.st-rate-btn.easy { background: #2563EB; }
.st-rate-key { font-size: 10.5px; opacity: 0.75; }

/* the answer panel: it rises over the lower half; the question stays above */
.st-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; max-height: 62%; overflow: hidden; padding: 0;
  border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; background: var(--surface-solid); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  animation: panel-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.st-panel.is-right { background: color-mix(in srgb, var(--success) 12%, var(--surface-solid)); }
.st-panel.is-wrong { background: color-mix(in srgb, var(--danger) 10%, var(--surface-solid)); }
.st-panel.is-almost { background: color-mix(in srgb, #F59E3C 15%, var(--surface-solid)); }
.st-panel > * { max-width: 620px; margin-left: auto; margin-right: auto; }
.st-panel.inline { position: static; display: block; max-height: none; overflow: visible; margin: 0 12px 12px; padding: 16px 18px 14px; border: none; border-radius: 12px; box-shadow: none; animation: none; }
/* What it says scrolls; the actions and Continue are pinned under it. */
.st-panel > .st-panel-scroll { flex: 0 1 auto; min-height: 0; width: 100%; max-width: none; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 6px; }
.st-panel-scroll > * { max-width: 620px; margin-left: auto; margin-right: auto; }
.st-panel > .st-panel-foot { flex: none; width: 100%; max-width: none; padding: 8px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.st-panel-foot > .st-panel-actions { max-width: 620px; margin: 0 auto; }
/* The panel's secondary actions: one look, clear on a light and a dark theme. */
.st-panel-act { padding: 8px 13px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 11px; background: var(--surface-solid); color: var(--ink); font-size: 13.5px; font-weight: 700; }
.st-panel-act:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.st-panel-act:disabled { opacity: 0.55; }
.st-verdict { margin-bottom: 6px; font-size: 19px; font-weight: 800; }
.st-panel.is-right .st-verdict { color: var(--success); }
.st-panel.is-wrong .st-verdict { color: var(--danger); }
.st-panel.is-almost .st-verdict { color: var(--st-amber); }
.st-panel-line { margin-bottom: 4px; font-size: 14.5px; }
.st-wrote { font-style: italic; color: var(--ink); }
.st-rubric { display: flex; flex-direction: column; gap: 3px; margin: 8px auto; }
.st-rubric-row { display: flex; gap: 8px; font-size: 14px; }
.st-rubric-mark { flex: none; width: 14px; font-weight: 800; }
.st-rubric-row.met .st-rubric-mark { color: var(--success); }
.st-rubric-row.miss .st-rubric-mark { color: var(--danger); }
/* A right worked problem: each value beside its ✓. */
.st-rubric.values { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.st-rubric.values .st-rubric-row { align-items: center; font-size: 15.5px; }
.st-rubric-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.st-rubric-val.mat { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
/* A matrix inside a line of text (a lesson's example, a value beside a ✓). */
.st-mb-matwrap.st-mb-inline { display: inline-flex; vertical-align: middle; margin: 3px 4px; }
.st-mb-inline .st-mb-grid { font-size: 14.5px; }
.st-mb-inline .st-mb-cell { padding: 1px 6px; }
.st-feedback { margin: 6px auto; font-size: 14.5px; }
.st-model { margin: 6px auto; font-size: 14.5px; }
.st-model summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink-muted); }
.st-src-quote { margin: 10px auto 2px; padding-left: 10px; border-left: 3px solid var(--accent); font-size: 13.5px; font-style: italic; color: var(--ink-muted); }
.st-src-line { padding-left: 13px; }
.st-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.st-panel-foot .st-panel-actions { margin-top: 0; }
.st-continue { flex: 1 1 140px; padding: 12px 22px; border-radius: 12px; }
.st-continue:focus { outline: none; }
.st-continue:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }

/* the end of a session */
.st-end { display: flex; flex-direction: column; gap: 6px; max-width: 520px; margin: 0 auto; padding: 20px 2px; }
.st-end-title { margin-bottom: 4px; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.st-end-line { font-size: 16px; }
.st-end-ready { margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--accent); }
.st-end-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.st-ring-wrap { display: flex; justify-content: center; margin: 10px 0; }
.st-ring { width: 132px; height: 132px; }
.st-ring-bg { fill: none; stroke: var(--tint); stroke-width: 10; }
.st-ring-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; }
.st-ring-text { font-size: 26px; font-weight: 800; fill: var(--ink); }
.st-units { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.st-unit-row { display: flex; align-items: center; gap: 10px; }
.st-unit-name { flex: 0 0 44%; font-size: 14px; font-weight: 600; line-height: 1.3; }
.st-fix { border-bottom: 1px solid var(--border); }
.st-fix:last-child { border-bottom: none; }
.st-fix-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; font-size: 14px; }
.st-fix-head:disabled { cursor: default; color: inherit; }
.st-fix-head .grow > .small { display: block; overflow-wrap: break-word; }
.st-fix-prompt { margin: 0 14px 10px; font-size: 14px; line-height: 1.45; }
.st-fix-src { padding: 0 14px 12px; }
.st-skipped { margin-left: 8px; vertical-align: 1px; background: var(--tint); color: var(--ink-muted); }
.st-summary-end { align-items: center; text-align: center; }
.st-summary-end .st-end-actions { align-self: stretch; }

/* Ask */
.st-ask-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.st-ask-top { flex: none; padding: calc(52px + env(safe-area-inset-top)) 16px 0; }
.st-ask-top .st-seg { margin-bottom: 4px; }
.st-ask { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.st-ask-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 12px; }
.st-ask-list { display: flex; flex-direction: column; gap: 10px; }
.st-msg { display: flex; flex-direction: column; max-width: 86%; }
.st-msg.user { align-self: flex-end; align-items: flex-end; }
.st-about { margin: 0 2px 4px; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.st-msg.agent { align-self: flex-start; }
.st-bubble { padding: 10px 13px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.st-bubble.user { white-space: pre-wrap; background: var(--bubble-user); color: var(--bubble-user-ink); border-bottom-right-radius: 6px; }
.st-bubble.agent { background: var(--bubble-agent); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.st-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.st-ask-bar { align-items: flex-end; margin: 6px 16px calc(10px + env(safe-area-inset-bottom)); }
/* The class's Ask: the box between its coins (barSides.js). */
.cmd-line.st-ask-line { margin-top: 6px; }
.st-ask-line > .st-ask-bar { margin: 0; }
.st-ask-input { flex: 1; min-width: 0; max-height: 140px; padding: 8px 4px; border: none; outline: none; background: none; resize: none; font-size: 16px; line-height: 1.35; color: var(--ink); }
/* One line, cut with an ellipsis: "Ask about Microeconomics…" wrapped under the box's edge on a phone (19 Oct 2026). */
.st-ask-input::placeholder { color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* input: a placeholder cannot wrap */ }
.st-ask-bar .cmd-send { width: 32px; height: 32px; margin-bottom: 2px; }
.st-ask-bar .st-ask-plus { flex: none; width: 32px; height: 32px; margin-bottom: 2px; color: var(--ink-muted); transition: transform 0.15s ease; }
.st-ask-bar .st-ask-plus.on { color: var(--accent); transform: rotate(45deg); }
.st-ask-above { flex: none; padding: 4px 16px 0; }
.st-ask-empty { padding: 32px 10px 8px; text-align: center; }
.st-ask-empty-title { margin-bottom: 4px; font-size: 17px; font-weight: 700; }
.st-ask-error { text-align: center; color: var(--danger); }
.st-dots { display: flex; gap: 4px; padding: 14px 16px; }
.st-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--glow); animation: st-dot 1s infinite ease-in-out; }
.st-dots i:nth-child(2) { animation-delay: 0.15s; }
.st-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes st-dot { 0%, 80%, 100% { opacity: 0.3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.st-ask-sheet { display: flex; flex-direction: column; height: 70vh; margin: 0 -18px -28px; }
@media (prefers-reduced-motion: reduce) { .st-panel { animation: none; } .st-dots i { animation: none; opacity: 0.7; } .st-bar-fill { transition: none; } }

/* Math — worked problems (pages/study-math.js, study-paper.js · MATH.md
   "Round 2"). The layout language's blocks, the one-screen step (the
   question card, the infinite canvas, the answer row), the canvas's tools
   and blocks, the hint sheet, the check card, the face and its splash line,
   the walkthrough and the worked example. Theme tokens only; the canvas is
   the paper tone (surface-solid) with the theme's backdrop faintly under it. */
@media (min-width: 900px) { body.st-math .app-shell { max-width: 1100px; } }
/* The app's bar asks the tutor while a question is in front: the assistant's running reply is not drawn over it. */
body.st-claim .convo-root { display: none; }
.st-mb { display: flex; flex-direction: column; gap: 8px; }
.st-mb-md { font-size: 16px; line-height: 1.5; }
.st-mb-md .md p { margin: 0; }
.st-mb-eq { text-align: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.1px; }
.st-mb-sys { position: relative; display: flex; padding-left: 17px; align-self: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-mb-brace { position: absolute; left: 0; top: 0; width: 11px; height: 100%; }
.st-mb-brace path { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.st-mb-eqs { display: flex; flex-direction: column; gap: 3px; padding: 2px 0; }
.st-mb-matwrap { display: flex; flex-direction: column; align-items: center; align-self: center; max-width: 100%; }
.st-mb-mat { position: relative; display: inline-block; max-width: 100%; overflow-x: auto; padding: 3px 9px; }
.st-mb-mat::before, .st-mb-mat::after { content: ''; position: absolute; top: 0; bottom: 0; width: 6px; border: 2px solid var(--ink); }
.st-mb-mat::before { left: 0; border-right: none; border-radius: 3px 0 0 3px; }
.st-mb-mat::after { right: 0; border-left: none; border-radius: 0 3px 3px 0; }
.st-mb-grid { display: grid; align-items: stretch; row-gap: 0; font-size: 16.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-mb-cell { display: flex; align-items: center; justify-content: flex-end; padding: 2px 9px; text-align: right; white-space: nowrap; border-radius: 4px; }
.st-mb-cell.hl { background: var(--accent-soft); border-radius: 0; }
.st-mb-cell.hl.first { border-radius: 6px 0 0 6px; }
.st-mb-cell.hl.last { border-radius: 0 6px 6px 0; }
.st-mb-bar { align-self: stretch; width: 9px; background: linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat; }
.st-mb-bar.hl { background-color: var(--accent-soft); }
.st-mb-label { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); }
.st-mb-op { align-self: center; font-size: 15px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.st-mb-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.st-mb-row > .st-mb-op { padding: 0 2px; }

/* the face and its splash line (the buddy) */
.st-buddy { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
button.st-buddy { cursor: pointer; border-radius: 12px; }
button.st-buddy:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.st-buddy-face { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.st-buddy-face:not(.on) { background: var(--accent-soft); }
.st-buddy-face > * { max-width: 100%; max-height: 100%; }
.st-buddy-line { min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--accent-2); display: block; overflow-wrap: break-word; }
.st-buddy-line:empty { display: none; }
.st-buddy-line.in { animation: st-splash 0.42s cubic-bezier(0.22, 1.4, 0.36, 1); transform-origin: 0 50%; }
@keyframes st-splash { from { opacity: 0; transform: scale(0.86) rotate(-2deg); } to { opacity: 1; transform: none; } }
.st-top-buddy { flex: 1; }
.st-top-gap { flex: 1; }
.st-lesson-buddy { margin: 2px 0 12px; }
.st-lesson-buddy .st-buddy-line { font-size: 14.5px; }
.st-end-buddy { flex-direction: column; gap: 12px; margin: 14px auto 8px; text-align: center; }
.st-end-buddy .st-buddy-line { font-size: 15.5px; overflow-wrap: break-word; }
.st-ask-face { flex: none; }

/* the one-screen step: header · question · canvas · answers, then the app's bar */
.st-player.math { overflow: hidden; }
.st-mstep { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 12px 8px; }
.st-qcard { flex: none; position: relative; padding: 10px 14px 11px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); animation: st-card-in 0.22s ease-out; }
.st-qcard > .st-kicker { margin: 0 0 4px; font-size: 11px; white-space: normal; overflow-wrap: break-word; }
.st-q-body { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }
.st-q-blocks { gap: 6px; }
.st-q-blocks .st-mb-md { font-size: 15.5px; font-weight: 600; line-height: 1.45; }
.st-q-blocks .st-mb-eq { font-size: 17px; }
.st-qcard.long:not(.open) .st-q-body { max-height: 4.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - .6em), transparent); mask-image: linear-gradient(#000 calc(100% - .6em), transparent); }
.st-qcard.long { padding-bottom: 30px; }
.st-q-more { position: absolute; right: 10px; bottom: 7px; padding: 3px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 800; }
.st-q-more[hidden] { display: none; }
.st-q-more:focus-visible, .st-tool:focus-visible, .st-cv-sel-btn:focus-visible, .st-ins-tile:focus-visible, .st-sym:focus-visible, .st-reveal-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the answer row */
.st-mathq { display: none; }
.st-answer { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; max-height: 42%; overflow-y: auto; overscroll-behavior: contain; padding: 9px 10px 9px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.st-answer-acts { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.st-answer-acts[hidden] { display: none; }
/* A tall answer (a row operation and a matrix) scrolls in its row: 💡 and Check stay in view at its foot. */
.st-answer > .st-answer-acts { position: sticky; bottom: 0; z-index: 1; border-radius: 14px; background: var(--surface-solid); box-shadow: 0 0 0 4px var(--surface-solid); }
.st-answer-acts .st-go { padding: 11px 24px; font-size: 15px; }
.st-answer-acts .st-hint-btn { padding: 11px 13px; }
.st-answer-acts .st-mock-foot { margin: 0; }
.st-parts { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.st-parts.compact { padding: 0; border: none; background: none; gap: 8px; }
.st-parts.row { flex: 1 1 170px; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; padding: 0 0 0 2px; border: none; background: none; }
.st-parts.row .st-pgrid .st-mbox { height: 1.3em; padding: 2px 4px; font-size: 16px; border-radius: 8px; }
.st-parts.row { min-width: min-content; }
.st-parts.row .st-pgrid .st-mb-cell { padding: 2px 2px; }
.st-parts.row .st-part { gap: 3px; }
.st-parts.row .st-plabel { font-size: 10.5px; }
.st-parts.row .st-part-rowop, .st-parts.row .st-part-grid { flex: 1 1 100%; }
.st-part { display: flex; flex-direction: column; gap: 5px; }
.st-plabel { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); }
.st-pbody { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-pcells { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 2px 3px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-ptext { white-space: pre; }
.st-mbox { box-sizing: content-box; width: 3.2ch; min-width: 2.2ch; height: 1.5em; padding: 3px 7px; border: 1.5px solid color-mix(in srgb, var(--ink-faint) 45%, var(--border)); border-radius: 9px; background: var(--surface-solid); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; text-align: center; outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.st-mbox:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.st-mbox:disabled { opacity: 1; color: var(--ink); background: var(--tint); -webkit-text-fill-color: var(--ink); }
.st-pgrid .st-mbox { width: 2.8ch; }
.st-pgrid .st-mb-cell { padding: 3px 3px; }
.st-part.is-ok .st-mbox:disabled { border-color: var(--success); }
.st-part.is-no .st-mbox:disabled, .st-part.is-no .st-mbox { border-color: var(--danger); }
.st-pmark { font-size: 16px; font-weight: 800; }
.st-pmark.ok { color: var(--success); }
.st-pmark.no { color: var(--danger); }
.st-pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-pchip { padding: 7px 13px; font-size: 14px; }
.st-pchip:disabled { cursor: default; opacity: 0.8; }
.st-part.is-ok .st-pchip.on { background: var(--success); border-color: var(--success); color: var(--on-accent); }
.st-part.is-no .st-pchip.on { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.st-rowop { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.st-rowop-seg { flex: none; max-width: 320px; }
.st-rowop-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; }
.st-rowop-word { min-width: 92px; font-weight: 600; color: var(--ink-muted); }
.st-rowop-k { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; }
.st-rowop-preview { align-self: flex-start; padding: 4px 10px; border-radius: 8px; background: var(--accent-soft); font-weight: 800; color: var(--accent); }
.st-dock { flex: none; position: relative; z-index: 3; }
.st-hint-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.st-hint-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 34; }
.st-streak { flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.7px; color: var(--accent); white-space: nowrap; animation: st-splash 0.4s ease-out; }
.st-help-word { margin: -2px auto 6px; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.st-panel-answer { display: flex; flex-direction: column; gap: 6px; margin: 6px auto 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-size: 14.5px; }
.st-panel-answer > b { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); }
.st-explain p { margin: 0 0 4px; }
.st-tip { margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--border)); background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); font-size: 14.5px; line-height: 1.45; }
.st-tip > b { font-weight: 800; }
.st-panel-tip { margin: 8px auto 4px; }

/* the tutor sheet: the problem pinned, with the face */
.st-ask.pinned .st-ask-scroll { padding-top: 10px; }
.st-ask-pin { flex: none; margin: 4px 16px 0; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); }
.st-ask-pin-title { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--accent); }
.st-ask-pin-line { margin: 4px 0 8px; font-size: 14.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.st-ask-pin .fl-chip { background: var(--surface); }

/* hint cards (a sheet over the canvas's bottom) */
.st-hints { display: flex; flex-direction: column; gap: 10px; }
.st-hints[hidden] { display: none; }
.st-hint-card { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent-2) 38%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--accent-2) 7%, var(--surface-solid)); animation: st-card-in 0.2s ease-out; }
.st-hint-card.solved { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: color-mix(in srgb, var(--success) 9%, var(--surface-solid)); }
.st-hint-card.revealed { border-color: var(--border); background: var(--surface-solid); }
@keyframes st-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.st-hint-head { font-size: 14px; line-height: 1.35; }
.st-hint-n { font-weight: 800; color: var(--accent-2); }
.st-hint-card.solved .st-hint-n { color: var(--success); }
.st-hint-card.revealed .st-hint-n, .st-walk .st-hint-n, .st-worked .st-hint-n { color: var(--ink-muted); }
.st-hint-title { font-weight: 700; }
.st-hint-blocks .st-mb-md { font-size: 15px; }
.st-hint-reveal, .st-walk-reveal { padding-top: 9px; border-top: 1px dashed var(--border); }
.st-hint-miss { font-size: 13.5px; font-weight: 600; color: var(--danger); }
.st-hint-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-hint-used { padding: 0 4px; font-size: 12.5px; color: var(--ink-faint); }
.st-danger-text { color: var(--danger); }
.st-confirm { display: flex; flex-wrap: wrap; gap: 6px; }
.st-confirm .fl-chip { padding: 7px 12px; font-size: 13px; background: var(--surface); }
.st-confirm .st-confirm-yes { border-color: var(--danger); color: var(--danger); }
.st-cv-sheet { position: absolute; left: 8px; right: 8px; bottom: 60px; z-index: 6; display: flex; flex-direction: column; max-width: 560px; max-height: min(calc(100% - 126px), 62%); border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); }
.st-cv-sheet[hidden] { display: none; }
.st-cv-sheet.in { animation: st-sheet-in 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes st-sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.st-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px 2px 14px; }
.st-sheet-title { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--accent-2); }
.st-sheet-title svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 36; }
.st-sheet-hide svg { width: 18px; height: 18px; }
.st-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 10px 10px; }

/* Walk me through it · a worked example (done a step at a time) */
.st-walk { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; outline: none; }
.st-walk-page { display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.st-walk-answer { margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.st-walk-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-walk-arrow:disabled { opacity: 0.3; }
.st-walk-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.st-walk-dot { width: 8px; height: 8px; padding: 0; border-radius: 4px; background: var(--tint); border: 1px solid var(--border); transition: width 0.18s ease; }
.st-walk-dot.on { width: 20px; background: var(--accent); border-color: var(--accent); }
.st-walk-done { padding: 7px 16px; }
.st-lesson-explain .md { font-size: 16.5px; line-height: 1.55; }
.st-worked { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.st-worked-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-worked-head .st-example-label { margin: 0; }
.st-worked-dots { display: inline-flex; gap: 4px; }
.st-worked-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--tint); transition: background-color 0.2s ease, width 0.2s ease; }
.st-worked-dots i.on { width: 12px; background: var(--accent); }
.st-worked-title { font-weight: 700; }
.st-worked-step { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.st-worked-step.fresh { animation: st-card-in 0.22s ease-out; }
.st-worked-nav { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.st-worked-count { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.4px; color: var(--ink-muted); }
.st-worked-back:disabled { opacity: 0.3; }
.st-worked-next { flex: none; }
.st-worked-next[hidden] { display: none; }
.st-worked-slot { display: flex; flex-direction: column; gap: 10px; }
.st-worked-slot:empty { display: none; }
.st-reveal-box { width: 100%; padding: 12px; border: 1.5px dashed var(--border); border-radius: 12px; background: none; color: var(--ink-muted); font-size: 14px; font-weight: 600; transition: border-color 0.15s ease, color 0.15s ease; }
.st-reveal-box:hover { border-color: var(--accent); color: var(--accent); }

/* the canvas: infinite, dot grid, pan + zoom (pages/study-paper.js) */
.st-canvas { position: relative; flex: 1; min-height: 200px; overflow: hidden; overflow: clip; border: 1px solid var(--border); border-radius: 18px;
  background: color-mix(in srgb, var(--surface-solid) 93%, transparent); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; contain: layout paint; }
.st-canvas.tool-pen { cursor: crosshair; }
.st-canvas.tool-eraser { cursor: cell; }
.st-canvas.tool-text { cursor: text; }
.st-canvas.tool-cursor { cursor: default; }
.st-canvas.dragging, .st-canvas.dragging * { cursor: move !important; }
.st-canvas.space, .st-canvas.space * { cursor: grab !important; }
.st-canvas.panning, .st-canvas.panning * { cursor: grabbing !important; }
.st-cv-grid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 0 0; pointer-events: none; }
.st-cv-dots { fill: none; stroke: color-mix(in srgb, var(--ink-faint) 55%, var(--border)); stroke-width: 2.2; stroke-linecap: round; }
.st-cv-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.st-canvas.moving .st-cv-world, .st-canvas.moving .st-cv-grid { will-change: transform; }
.st-cv-ink { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.st-ink { fill: none; stroke: var(--pc, var(--ink)); stroke-linecap: round; stroke-linejoin: round; }
.st-ink.c-accent { stroke: var(--accent); }
.st-ink.c-danger { stroke: var(--danger); }
.st-stamp { fill: none; stroke: var(--success); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0.9; animation: st-stamp 0.5s ease-out forwards; }
.st-stamp.still { animation: none; stroke-dashoffset: 0; }
@keyframes st-stamp { to { stroke-dashoffset: 0; } }
.st-cv-empty { position: absolute; left: 50%; top: 40%; max-width: 250px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface-solid) 80%, transparent); transform: translate(-50%, -50%); font-size: 13px; line-height: 1.45; text-align: center; color: var(--ink-faint); pointer-events: none; }
.st-cv-empty[hidden], .st-canvas:has(.st-cv-sheet:not([hidden])) .st-cv-empty { display: none; }
.st-cv-blocks { position: absolute; left: 0; top: 0; }
/* The printed choices (MATH.md "Circle the answer"): lettered, under the ink; the pick in the accent, after Check right green, a wrong pick red. */
.st-cv-choices { position: absolute; left: 0; top: 0; }
/* Circled: the panel after Check leaves the marked choices some paper, even on a 568-tall screen (its text scrolls). */
.st-player.math.circled .st-panel { max-height: min(62%, max(250px, calc(100% - 330px))); }
.st-cv-choice { position: absolute; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1.25px solid color-mix(in srgb, var(--ink) 28%, var(--border)); border-radius: 12px; background: var(--surface-solid); color: var(--ink); cursor: pointer; }
.st-cv-choice.on { border: 2px solid var(--accent); background: var(--accent-soft); }
.st-cv-choice.right { border: 2px solid var(--success, #2e9d5b); background: color-mix(in srgb, var(--success, #2e9d5b) 12%, var(--surface-solid)); }
.st-cv-choice.wrong { border: 2px solid var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-solid)); }
.st-cv-choice-letter { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; box-sizing: border-box; border: 1.5px solid var(--ink-muted); border-radius: 13px; color: var(--ink-muted); font-size: 13px; font-weight: 800; }
.st-cv-choice.on .st-cv-choice-letter { border-color: var(--accent); background: var(--accent); color: var(--on-accent, #fff); }
.st-cv-choice.right .st-cv-choice-letter { border-color: var(--success, #2e9d5b); background: var(--success, #2e9d5b); color: #fff; }
.st-cv-choice.wrong .st-cv-choice-letter { border-color: var(--danger); background: var(--danger); color: #fff; }
.st-cv-choice-lines { display: flex; flex-direction: column; min-width: 0; font-size: 18px; line-height: 26px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-canvas.tool-pen .st-cv-choice { cursor: inherit; }
.st-cv-empty.low { top: auto; bottom: 64px; transform: translateX(-50%); }
.st-cv-block { position: absolute; border-radius: 8px; transition: box-shadow 0.12s ease; }
.st-cv-block.dragging { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); background: color-mix(in srgb, var(--surface-solid) 70%, transparent); }
/* A number being moved is just the digits (their own shadow), drawn over the bar it may be put back on. */
.st-cv-block.dragging:has(.st-cv-num) { box-shadow: none; background: none; }
.st-canvas.num-drag .st-cv-world { z-index: 9; }
.st-cv-block.bad { box-shadow: 0 0 0 2px var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.st-cv-in { position: absolute; margin: 0; padding: 0 4px; border: 4px solid transparent; border-radius: 10px; background: transparent; background-clip: padding-box; color: var(--ink);
  font: inherit; font-size: 19px; font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; outline: none; pointer-events: none; -webkit-user-select: text; user-select: text; caret-color: var(--accent); }
.st-cv-in:focus { pointer-events: auto; background-color: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.st-cv-in.cell:not(.filled):not(:focus), .st-cv-in.line:not(.filled):not(:focus) { background-color: color-mix(in srgb, var(--ink-faint) 13%, transparent); }
.st-cv-in.bad { background-color: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.st-cv-in.text { padding: 0 2px; border: 0; border-radius: 5px; text-align: left; font-size: 20px; font-weight: 500; }
.st-cv-in.text { color: var(--pc, inherit); }
.st-cv-in.text.c-accent { color: var(--accent); }
.st-cv-in.text.c-danger { color: var(--danger); }
.st-cv-in.line { text-align: left; font-size: 18px; border-width: 3px; }
.st-cv-in.op { padding: 0 12px; border: 0; border-radius: 999px; text-align: left; font-size: 16px; font-weight: 800; color: var(--accent); }
.st-cv-in.op::placeholder { color: color-mix(in srgb, var(--accent) 45%, transparent); }
.st-cv-block.t-op { border-radius: 999px; background: var(--accent-soft); }
.st-cv-brk { position: absolute; top: 2px; bottom: 2px; width: 8px; border: 2px solid var(--ink); pointer-events: none; }
.st-cv-brk.l { left: 3px; border-right: 0; border-radius: 4px 0 0 4px; }
.st-cv-brk.r { right: 3px; border-left: 0; border-radius: 0 4px 4px 0; }
.st-cv-aug { position: absolute; top: 7px; bottom: 7px; width: 1.5px; background: var(--ink); pointer-events: none; }
.st-cv-block.t-table { box-shadow: 0 0 0 1.5px var(--ink-muted); border-radius: 4px; background: color-mix(in srgb, var(--surface-solid) 80%, transparent); }
.st-cv-in.tcell { border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background-clip: border-box; }
.st-cv-in.tcell.lastc { border-right: 0; }
.st-cv-in.tcell.lastr { border-bottom: 0; }
.st-cv-in.tcell.head { font-weight: 800; border-bottom: 1.5px solid var(--ink-muted); background-color: var(--tint); }
.st-cv-in.tcell:not(.filled):not(:focus):not(.head) { background-color: transparent; }
.st-cv-brace { position: absolute; left: 2px; top: 3px; width: 12px; height: calc(100% - 6px); pointer-events: none; }
.st-cv-brace path { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.st-cv-fbar { position: absolute; left: 8px; right: 8px; top: 43px; height: 2px; border-radius: 1px; background: var(--ink); pointer-events: none; }
.st-cv-axes { display: block; pointer-events: none; }
.st-cv-axes-frame { fill: color-mix(in srgb, var(--surface-solid) 60%, transparent); stroke: var(--border); }
.st-cv-axes-line { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.st-cv-axes-tick { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; }
.st-cv-axes-label { fill: var(--ink-muted); font-size: 14px; font-style: italic; font-weight: 600; }
/* the selection: an outline, and ✕ / Next beside it (screen space, so they stay a finger's size) */
.st-cv-sel { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; transform-origin: 0 0; }
.st-cv-sel[hidden] { display: none; }
.st-cv-sel-box { position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 11px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.st-cv-sel-acts { position: absolute; right: -4px; top: -38px; display: flex; gap: 6px; pointer-events: auto; animation: st-card-in 0.16s ease-out; }
.st-cv-sel.below .st-cv-sel-acts { top: auto; bottom: -38px; }
/* The paper places them (study-paper.js placeActs): above on the right, else the left, else below — never under a tray. */
.st-cv-sel.inside .st-cv-sel-acts { top: 6px; right: 6px; bottom: auto; left: auto; flex-direction: row; }
.st-cv-sel.left .st-cv-sel-acts { right: auto; left: -4px; flex-direction: row-reverse; }
.st-cv-sel-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-solid); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); color: var(--ink); font-size: 13px; font-weight: 800; }
.st-cv-sel-btn.next { color: var(--accent); }
.st-cv-sel-btn.x { padding: 0; }
.st-cv-sel-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 48; }
/* the trays: tools and inserts bottom-left; undo, redo, ?, ⋯ on the right (top-right on a phone) */
.st-cv-tray { position: absolute; bottom: 8px; z-index: 5; display: flex; align-items: center; gap: 1px; padding: 4px; border: 1px solid var(--border); border-radius: 15px;
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
.st-cv-tray.left { left: 8px; }
.st-cv-tray.right { right: 8px; }
.st-canvas.narrow .st-cv-tray.right { top: 8px; bottom: auto; }
.st-cv-tray[hidden] { display: none; }
/* 💡 and Check at the end of the undo/redo tray; alone in the corner on a short screen. */
.st-cv-acts { display: flex; align-items: center; gap: 6px; }
.st-cv-acts[hidden], .st-cv-acts:empty, .st-cv-tray.right:has(.st-cv-acts[hidden]) .st-acts-sep, .st-cv-tray.right:has(.st-cv-acts:empty) .st-acts-sep { display: none; }
.st-cv-tray.right.solo { top: 8px; bottom: auto; }
.st-cv-tray.right.solo:not(:has(.st-tool.calc)):has(.st-cv-acts[hidden]), .st-cv-tray.right.solo:not(:has(.st-tool.calc)):has(.st-cv-acts:empty) { display: none; }
.st-cv-acts .st-answer-acts { margin: 0; gap: 6px; }
.st-cv-acts .st-answer-acts .st-go { padding: 0 16px; height: 36px; min-height: 36px; font-size: 14.5px; border-radius: 11px; }
.st-cv-acts .st-answer-acts .st-hint-btn { padding: 0; width: 36px; }
.st-cv-acts .st-mock-foot { margin: 0; display: flex; gap: 6px; }
/* A short screen: one tray row (Cursor, Pen, Eraser, Text, ⊕, ?, Undo, ⋯) along the bottom. */
.st-canvas.one-row .st-cv-tray.left { left: 6px; max-width: calc(100% - 12px); gap: 0; padding: 3px; }
/* A short canvas: the line sits over the tool row, clear of the corner tray — and goes when choices fill the paper. */
.st-canvas.one-row .st-cv-empty { top: auto; bottom: 54px; transform: translateX(-50%); }
.st-canvas.one-row.has-choices .st-cv-empty { display: none; }
/* 320-wide: the one row's eight buttons fit (⋯ stays on screen). */
/* 320-wide: the one row's nine buttons (with 123) fit, ⋯ on screen. */
@media (max-width: 360px) { .st-canvas.one-row .st-cv-tray.left .st-tool { min-width: 31px; } }
/* Number tiles (MATH.md "Number tiles"): a bar of big tiles over the tray, a tile under the finger while one is dragged. */
.st-tool.num .st-tool-glyph { font-size: 12px; letter-spacing: -0.4px; }
/* A narrow canvas with both tray rows: the tools a little tighter, so 123 and the three quick inserts all fit with ⊕. */
.st-canvas.narrow:not(.one-row) .st-cv-tray.left { gap: 0; padding: 3px; }
.st-canvas.narrow:not(.one-row) .st-cv-tray.left .st-tool { min-width: 35px; }
.st-canvas.narrow:not(.one-row) .st-cv-tray.left .st-tool.ins { padding: 0 3px; }
.st-canvas.narrow:not(.one-row) .st-cv-tray.left .st-tool-sep { margin: 0 2px; }
.st-cv-tiles { position: absolute; left: 8px; bottom: calc(58px + var(--st-sheet-lift, 0px)); z-index: 6; width: min(560px, calc(100% - 16px)); padding: 5px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); animation: st-card-in 0.16s ease-out; }
.st-cv-tiles[hidden], .st-cv-tiles.squeezed { display: none; }
.st-canvas.one-row .st-cv-tiles { bottom: calc(54px + var(--st-sheet-lift, 0px)); }
.st-canvas:has(.st-cv-tiles:not([hidden])) .st-cv-empty { display: none; }
.st-numtiles-line { margin: 0 2px 7px; font-size: 12px; line-height: 1.3; color: var(--ink-muted); }
.st-numtiles-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
/* One row (MATH.md "Number tiles", round 3): every tile on one line, smaller. */
.st-numtiles-grid.one { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.st-numtiles-grid.one .st-numtile { height: 38px; border-radius: 9px; font-size: 18px; }
.st-numtiles-grid.one .st-numtile { overflow: hidden; }
.st-numtiles-grid.one .st-numtile.back { font-size: 13px; letter-spacing: -1px; }
/* A number a dragged tile will join: its digits light. */
.st-cv-block.tile-join .st-cv-num { color: var(--accent); }
.st-numtile { min-width: 0; height: 46px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.st-numtile.back { color: var(--ink-muted); font-size: 18px; cursor: pointer; }
.st-numtile.down { border-color: var(--accent); background: var(--accent-soft); }
.st-numtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-numtile-ghost { position: absolute; left: 0; top: 0; z-index: 12; translate: -50% -50%; white-space: nowrap; font-size: 28px; line-height: 35px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); pointer-events: none;
  text-shadow: 0 0 2px var(--surface-solid), 0 0 5px var(--surface-solid), 0 6px 12px rgba(0, 0, 0, 0.28); }
.st-numtile-ghost { color: var(--pc, inherit); }
.st-numtile-ghost.c-accent { color: var(--accent); }
.st-numtile-ghost.c-danger { color: var(--danger); }
.st-numtile-ghost[hidden] { display: none; }
.st-numtile-ghost.off { opacity: 0.4; }
/* The bar's two faces: Numbers | Calculator (MATH.md "Calculator"). */
.st-tiles-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 7px; }
.st-tiles-head .st-numtiles-line { flex: 1 1 180px; margin: 0 2px; }
.st-tiles-tabs { flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: 11px; background: var(--tint); }
.st-tiles-tab { min-height: 32px; padding: 0 13px; border-radius: 9px; color: var(--ink-muted); font-size: 13.5px; font-weight: 700; }
.st-tiles-tab.on { background: var(--surface-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.st-cv-calc { position: absolute; right: 8px; z-index: 7; width: min(330px, calc(100% - 16px)); padding: 7px; overflow-y: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); animation: st-card-in 0.16s ease-out; }
.st-cv-calc[hidden], .st-cv-calc.away { display: none; }
/* Under the calculator on a very short canvas: the tools (its button brings them back) and the empty paper's line. */
.st-cv-tray.under-calc, .st-cv-empty.under-calc { visibility: hidden; }
.st-canvas .st-cv-calc.compact .st-calc-key { height: 30px; }
.st-canvas .st-cv-calc.compact .st-calc-keys { gap: 4px; }
.st-canvas .st-cv-calc.compact .st-calc-chip { height: 36px; }
.st-canvas .st-cv-calc.compact .st-calc-display { margin-bottom: 5px; padding: 4px; }
/* Tight: the smallest it goes (a very short canvas), still every key, nothing to scroll. */
.st-canvas .st-cv-calc.tight { padding: 4px; }
.st-canvas .st-cv-calc.tight .st-calc-key { height: 24px; font-size: 15px; border-radius: 8px; }
.st-canvas .st-cv-calc.tight .st-calc-keys { gap: 2px; }
.st-canvas .st-cv-calc.tight .st-calc-chip { height: 26px; font-size: 15px; }
.st-canvas .st-cv-calc.tight .st-calc-display { gap: 2px; margin-bottom: 3px; padding: 3px; }
.st-canvas .st-cv-calc.tight .st-calc-expr { font-size: 13px; }
.st-tool.calc.on { background: var(--accent-soft); color: var(--accent); }
.st-calc { outline: none; }
.st-calc-display { display: flex; flex-direction: column; gap: 5px; margin-bottom: 7px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.st-calc-expr { padding: 0 6px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; text-align: right; font-size: 15px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.st-calc-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-calc-expr::-webkit-scrollbar { display: none; }
.st-calc-out { flex: 1; min-width: 0; white-space: normal; font-size: 14px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.st-calc-approx { font-size: 14px; font-weight: 600; color: var(--ink-faint); }
.st-calc-out.bad { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: normal; color: var(--danger); }
.st-calc-chip { flex: 0 1 auto; min-width: 64px; max-width: 100%; height: 44px; padding: 0 14px; white-space: normal; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; overflow-wrap: break-word; }
.st-calc-chip[data-len='m'] { font-size: 16px; }
.st-calc-chip[data-len='l'] { font-size: 14px; }
.st-calc-chip:disabled { background: var(--tint); color: var(--ink-faint); cursor: default; }
.st-calc-chip.down { filter: brightness(0.92); }
.st-calc-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.st-calc-key { min-width: 0; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--ink); font-size: 19px; font-weight: 700; touch-action: manipulation; }
.st-calc-key.op { background: var(--surface); color: var(--accent); }
.st-calc-key.soft { color: var(--ink-muted); font-size: 16px; }
.st-calc-key.eq { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.st-calc-key:focus-visible, .st-tiles-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-canvas.one-row .st-calc-key { height: 36px; }
.st-cv-tiles.compact .st-calc-key { height: 30px; }
.st-cv-tiles.compact .st-calc-keys { gap: 4px; }
.st-cv-tiles.compact .st-calc-chip { height: 36px; }
.st-cv-tiles.compact .st-tiles-head { margin-bottom: 5px; }
/* A short canvas: the short line only (how a number goes away). */
.st-numtiles-line.short { display: none; }
.st-canvas.one-row .st-numtiles-line.long, .st-cv-tiles.compact .st-numtiles-line.long { display: none; }
.st-canvas.one-row .st-numtiles-line.short, .st-cv-tiles.compact .st-numtiles-line.short { display: inline; }
.st-cv-tiles.compact .st-calc-display { margin-bottom: 5px; padding: 4px; }
/* No room under the corner buttons: over them, scrolling inside if it must. */
.st-cv-tiles.over { z-index: 8; overflow-y: auto; }
.st-canvas.tile-drag, .st-canvas.tile-drag * { cursor: grabbing !important; }
/* A number from the tiles: just the digits on the paper (world px; the layer scales it). */
.st-cv-num { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 28px; line-height: 35px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); user-select: none; -webkit-user-select: none; }
.st-cv-num { color: var(--pc, inherit); }
.st-cv-num.c-accent { color: var(--accent); }
.st-cv-num.c-danger { color: var(--danger); }
.st-cv-block.t-text.dragging .st-cv-num { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); }
/* A number dragged over the bar: let go to put it away. */
.st-cv-tiles.drop-away { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface-solid)); }
.st-cv-in.tile-hover { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--accent-soft); }
/* One row (a short canvas): ⋯ is at the bottom left, so its menu opens above it. */
.st-canvas.one-row .st-cv-pop[data-pop='more'] { top: auto; bottom: 56px; left: 8px; right: auto; }
.st-tool { position: relative; flex: none; display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0; border-radius: 11px; color: var(--ink-muted); transition: background-color 0.12s ease, color 0.12s ease; }
.st-tool svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 34; }
.st-tool:hover:not(:disabled) { color: var(--ink); }
.st-tool.on { background: var(--accent-soft); color: var(--accent); }
.st-tool:disabled { opacity: 0.32; }
.st-tool.ins { padding: 0 5px; }
.st-tool.ask, .st-tool.all { color: var(--accent); }
.st-tool-glyph { font-size: 12.5px; font-weight: 800; letter-spacing: -0.2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-tool-ink { position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; border-radius: 4px; border: 1px solid var(--surface-solid); }
.st-tool-ink.thick { width: 9px; height: 9px; right: 4px; bottom: 4px; border-radius: 5px; }
.st-tool-ink, .st-swatch-ink, .st-width-dot { background: var(--pc, var(--ink)); }
.st-tool-ink.ink, .st-swatch-ink.ink { background: var(--ink); }
.st-tool-ink.accent, .st-swatch-ink.accent { background: var(--accent); }
.st-tool-ink.danger, .st-swatch-ink.danger { background: var(--danger); }
.st-tool-sep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--border); }
.st-cv-pop { position: absolute; left: 8px; bottom: 58px; z-index: 7; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100% - 16px); padding: 8px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-solid); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); animation: st-card-in 0.16s ease-out; }
.st-cv-pop[hidden] { display: none; }
.st-cv-pop[data-pop='more'] { left: auto; right: 8px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; min-width: 190px; padding: 0 10px; }
.st-canvas.narrow:not(.one-row) .st-cv-pop[data-pop='more'] { top: 56px; bottom: auto; }
.st-cv-pop .st-menu-row { padding: 12px 2px; font-size: 15px; }
.st-cv-pop .st-menu-row:disabled { opacity: 0.4; }
.st-pop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-swatch-ink { width: 28px; height: 28px; border-radius: 14px; border: 3px solid var(--surface-solid); box-shadow: 0 0 0 1px var(--border); }
/* Fifteen colours: a grid of them, eight to a row (266px, fits a 320 phone). On a narrow canvas the sizes go under the colours and the popover is only as wide as they are. */
.st-pop-row.st-inks { display: grid; grid-template-columns: repeat(8, 28px); gap: 6px; }
.st-canvas.narrow .st-cv-pop[data-pop='pen'] { flex-direction: column; align-items: flex-start; width: max-content; }
.st-swatch-ink.on { box-shadow: 0 0 0 2px var(--accent); }
.st-width { display: flex; align-items: center; justify-content: center; width: 36px; height: 32px; border-radius: 9px; }
.st-width.on { background: var(--accent-soft); }
.st-widths { gap: 2px; flex-wrap: nowrap; }
.st-widths .st-width { width: 34px; height: 34px; }
/* The sizes wrapped onto a row of their own: no divider left hanging after the colours. */
.st-cv-pop.wrapped .st-pen-sep { display: none; }
.st-width-dot { display: block; border-radius: 50%; background: var(--ink); }
.st-width-dot.c-accent { background: var(--accent); }
.st-width-dot.c-danger { background: var(--danger); }
/* ⊕ All: every insert, the symbols */
.st-ins-sheet { display: flex; flex-direction: column; gap: 16px; padding: 6px 0 10px; }
.st-ins-head { margin: 0 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-muted); }
.st-ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.st-ins-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 76px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color 0.12s ease, background-color 0.12s ease; }
.st-ins-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.st-ins-glyph { font-size: 17px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.st-ins-label { font-size: 12.5px; line-height: 1.25; text-align: center; color: var(--ink-muted); }
.st-sym-row { display: flex; flex-wrap: wrap; gap: 6px; }
.st-sym { min-width: 42px; height: 42px; padding: 0 8px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 17px; font-weight: 600; }
.st-sym:hover { border-color: var(--accent); color: var(--accent); }
/* Check my work: a card at the canvas's top, with the face */
.st-look { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; padding: 12px; border: 1.2px solid var(--border); border-radius: 14px; background: var(--surface); font-size: 15px; animation: st-card-in 0.2s ease-out; }
.st-look[hidden] { display: none; }
.st-look-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.st-look-line { padding: 1px 0 1px 8px; border-left: 3px solid var(--ink-muted); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-look-line.bad { border-left-color: var(--danger); }
.st-look-line.ok { border-left-color: var(--success); }
.st-look-what, .st-look-next { line-height: 1.4; }
.st-look-next b { color: var(--accent); font-weight: 800; margin-right: 4px; }
.st-why { line-height: 1.4; }
.st-help-chat { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.st-help-chat:empty { display: none; }
.st-help-turn { display: flex; flex-direction: column; gap: 8px; }
.st-help-q { align-self: flex-end; max-width: 86%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--accent-soft); color: var(--ink); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.st-help-a { display: flex; align-items: flex-start; gap: 8px; }
.st-help-a-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; padding-top: 2px; }
.st-help-a-text .md p { margin: 0 0 6px; }
.st-why b { color: var(--accent); font-weight: 800; margin-right: 4px; }
.st-look-calc { padding: 7px 10px; border-radius: 10px; background: var(--accent-soft); font-size: 14.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
/* A photo of the work done on paper (MATH.md "Photo of my paper"): the photo, small (a click shows it whole), and the answer read off it. */
.st-photo-part { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; }
.st-photo-thumb { width: 56px; height: 56px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--tint); cursor: zoom-in; }
.st-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-photo-part.big { grid-template-columns: 1fr; }
.st-photo-part.big .st-photo-thumb { width: auto; max-width: 100%; height: auto; max-height: 420px; justify-self: start; cursor: zoom-out; }
.st-photo-part.big .st-photo-img { width: auto; max-width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.st-photo-read { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.st-photo-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.st-photo-ans { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-photo-note { font-size: 14px; line-height: 1.35; }
.st-photo-note.muted { color: var(--ink-muted); }
/* The empty paper's photo button: the line around it lets touches through to the paper; the button does not. */
.st-cv-empty .st-cv-photo { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; margin: 10px auto 0; min-height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.st-cv-empty .st-cv-photo[hidden], .st-canvas.short .st-cv-empty .st-cv-photo { display: none; }
/* A short canvas: help's sheet comes down over the tools row, so it always has room to show a look. */
.st-canvas.short .st-cv-sheet { bottom: 6px; max-height: calc(100% - 64px); }
.st-cv-empty .st-cv-photo svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 34; }
.st-cv-empty > span { display: block; }
.st-look-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.st-look-acts .btn { min-height: 40px; }
.st-look-acts .btn svg { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; stroke: currentColor; fill: none; stroke-width: 36; }
.st-cv-mark { fill: none; stroke: var(--danger); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.st-pcheck-line { display: flex; gap: 8px; font-weight: 600; }
.st-pcheck-line.ok { color: var(--success); }
.st-pcheck-line.bad { color: var(--danger); }
.st-pcheck-mark { flex: none; font-weight: 800; }
.st-pcheck-ai { padding: 8px 10px; border-radius: 12px; background: var(--tint); }
.st-pcheck-ai.ok { background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.st-pcheck-ai.bad { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.st-pcheck-wait { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.st-pcheck-wait .st-dots { padding: 4px 0; }
.st-dots.sm i { width: 6px; height: 6px; }
.st-pcheck-where { font-weight: 700; }
.st-pcheck-nudge .md p { margin: 2px 0 0; }
@media (max-width: 560px) {
  .st-mstep { padding: 0 8px 6px; gap: 6px; }
  .st-qcard { padding: 8px 12px 9px; border-radius: 14px; }
  .st-q-blocks { gap: 4px; }
  .st-q-blocks .st-mb-md { font-size: 14.5px; line-height: 1.4; }
  .st-q-blocks .st-mb-eq, .st-q-blocks .st-mb-sys { font-size: 15.5px; }
  .st-q-blocks .st-mb-grid { font-size: 14.5px; }
  .st-q-blocks .st-mb-cell { padding: 1px 7px; }
  .st-q-blocks .st-mb-op { font-size: 14px; }
  .st-answer { padding: 7px 8px 7px 12px; border-radius: 14px; gap: 8px 10px; }
  .st-answer-acts .st-go { padding: 10px 18px; }
  .st-answer-acts .st-hint-btn { padding: 10px 11px; }
  .st-parts.row .st-mbox { font-size: 16px; }
  .st-canvas { border-radius: 14px; }
  /* a finger's size */
  .st-tool { min-width: 40px; height: 40px; }
  .st-cv-pop { bottom: 60px; }
  .st-canvas.one-row .st-cv-pop[data-pop='more'] { bottom: 58px; }
  .st-cv-tiles { bottom: calc(60px + var(--st-sheet-lift, 0px)); }
  .st-canvas.one-row .st-cv-tiles { bottom: calc(56px + var(--st-sheet-lift, 0px)); }
}

/* ready-made classes (Add a class, the first run) */
.st-packs { align-self: stretch; margin-top: 18px; text-align: left; }
.st-packs[hidden] { display: none; }
.st-packs-head { display: block; margin: 0 4px 8px; }
.st-pack { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.st-pack + .st-pack { border-top: 1px solid var(--border); }
.st-pack-name { font-size: 15.5px; font-weight: 700; }
.st-pack-line { margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .st-hint-card, .st-qcard, .st-cv-sheet.in, .st-look, .st-cv-pop, .st-cv-sel-acts, .st-worked-step.fresh, .st-buddy-line.in, .st-streak { animation: none; }
  .st-stamp { animation: none; stroke-dashoffset: 0; }
}

/* Claude sign-in (panes.js openSignIn): the card that says an account is out. */
.pane-login-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); cursor: pointer; }
.pane-login-title { font-weight: 700; color: var(--danger); }
.pane-login-text { margin-top: 2px; font-size: 14px; color: var(--ink-muted); }
.pane-login-words { flex: 1; min-width: 0; }
.pane-login-btn { flex: none; white-space: nowrap; }
.pane-login-foot { display: flex; justify-content: center; padding: 18px 0 8px; }
.pane-login-err { color: var(--danger); margin-top: 10px; }

/* ---- Today: the Calendar tab, and the strip that opens into the month ----
   pages/today.js. The tab sits over the strip's first day; dragged down (or
   clicked) the strip becomes the month. The band's height and the layers'
   opacity are set from the script — how far open it is. */
.today-caltab {
  margin-bottom: -6px !important;
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  margin: 2px 0 2px; padding: 4px 9px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  font: inherit; font-size: 12px; font-weight: 800; cursor: grab; touch-action: none; user-select: none;
}
.today-caltab:active { cursor: grabbing; }
.today-caltab.open { background: var(--accent-soft); color: var(--accent); }
.today-caltab > svg { width: 13px; height: 13px; fill: currentColor; }
.today-caltab-chev { display: inline-flex; transition: transform .2s ease; }
.today-caltab-chev svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 48; }
.today-caltab.open .today-caltab-chev { transform: rotate(180deg); }
.today-band { flex: none; position: relative; overflow: hidden; margin: 0 -14px; }
.today-band[data-state="closed"]:not(.live) .today-monthlayer,
.today-band[data-state="open"]:not(.live) .today-striplayer { display: none; }
.today-band.live .today-bandlayer { position: absolute; top: 0; left: 0; right: 0; }
.today-band.anim { transition: height .22s ease; }
.today-band.anim .today-bandlayer { transition: opacity .22s ease; }
.today-band .today-strip { margin: 0; }
.today-month { padding: 0 14px 6px; }
.today-monthgrid { border-bottom: 0; touch-action: pan-y; }
.cal2-day.blank { cursor: default; }
.cal2-day.blank:hover { background: none; }

/* The notes under the day. */
.today-notes { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.today-noteshead {
  display: flex; align-items: center; gap: 6px; padding: 0 4px;
  font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-muted);
}
.today-noteshead svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 36; }
.today-notebody { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; white-space: pre-wrap; }

/* ---- ages (ages.js, server/src/kids.mjs) ---- */
/* While the settings window is up (z 60), what it opens — a confirm, a toast —
   has to sit over it, not behind: the ladder's two top rungs step above it. */
body:has(> .settings-window) { --z-modal: 64; --z-toast: 66; }
/* A long toast (an email address in it) takes the width it needs up to the
   screen's, and breaks only a word too long for a line. */
#toast { width: max-content; max-width: min(90vw, 440px); overflow-wrap: anywhere; }
/* The birthday step covers everything, the way sign-in does: one question. */
.age-layer { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; }
.age-picker { display: grid; grid-template-columns: 1.35fr .75fr 1fr; gap: 8px; }
.age-select { width: 100%; min-width: 0; font-size: 16px; padding: 12px 8px; border-radius: 14px; }
/* A narrow phone: the month takes its own row, so the year is never cut. */
@media (max-width: 380px) {
  .age-picker { grid-template-columns: 1fr 1fr; }
  .age-picker .age-select:first-child { grid-column: 1 / -1; }
}
.auth-no { width: 100%; margin: 0; padding: 12px; border-radius: 14px; font-size: 15px; font-weight: 600; }
.invite-card { gap: 12px; }
.invite-kid { display: flex; align-items: center; gap: 12px; min-width: 0; }
.invite-name { font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.invite-head { font-size: 13px; font-weight: 700; color: var(--ink-muted); margin-top: 4px; }
.invite-points { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink); }
.invite-warn { padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 13.5px; line-height: 19px; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* Without the assistant there is no box: the corner row keeps the bar's bottom room. */
.cmd-wrap.no-box .wheel-row { margin-bottom: calc(10px + env(safe-area-inset-bottom)); }
/* Parents & kids (Settings) */
.kid-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-width: 0; }
.kid-row + .kid-row { border-top: 1px solid var(--border); }
.kid-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.kid-who { min-width: 0; }
.kid-name { font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.kid-sub, .kid-note { overflow-wrap: anywhere; }
.kid-note { margin-top: 2px; }
.kid-actions { display: flex; gap: 6px; flex: none; }
/* Every button here is a real target, never a sliver. */
.kid-btn { min-height: 40px; }
/* A narrow screen: the buttons go under the person, not beside them. */
@media (max-width: 480px) {
  .kid-row.with-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .kid-row.with-actions .kid-actions { padding-left: 44px; }
  .kid-row.with-actions .kid-actions .btn { flex: 1; }
}
.kid-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kid-head .kid-row { flex: 1; min-width: 180px; }
/* The kid's birthday and age sit in this line, so it reads at full contrast. */
.kid-head .kid-sub { color: var(--ink-muted); }
.invite-warn .auth-back { text-align: left; padding: 0; }
.kid-correct { font-size: 13px; padding: 10px 0; min-height: 40px; }
.kid-fix { display: flex; flex-direction: column; gap: 8px; }
.kid-fix:empty { display: none; }
.kid-fixrow { display: flex; gap: 8px; }
.kid-fix-status { color: var(--danger); min-height: 0; }
.kid-subhead { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-muted); margin: 12px 0 2px; }
.kid-none { padding: 6px 0; }
.kid-locked { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--ink); }
.kid-locked svg { flex: none; width: 22px; height: 22px; color: var(--accent); }
/* The glyphs are outlines (icons.js): drawn in the accent, never filled black. */
.kid-locked svg, .age-banner svg { fill: none; stroke: currentColor; stroke-width: 32; }
.kid-pending { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.kid-pending > div { overflow-wrap: anywhere; }
.kid-askrow { display: flex; gap: 8px; margin-top: 6px; }
.kid-askrow .input { flex: 1; min-width: 0; }
.kid-devlink a, .kid-link { color: var(--accent); overflow-wrap: anywhere; }
.birthday-line { margin-top: 2px; }
button.birthday-line { padding: 4px 0; color: var(--accent); background: none; border: 0; font: inherit; font-size: 13px; cursor: pointer; }
/* Messages: a kid with no parent yet, and why a thread is closed for writing. */
.age-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 8px 12px 0; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); font-size: 13.5px; line-height: 19px; }
.age-banner-line { display: flex; align-items: center; gap: 10px; }
.age-banner svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
.age-note { margin: 6px 16px 0; padding: 9px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 13.5px; line-height: 19px; overflow-wrap: anywhere; }
/* Standing where the box was: the same place, the same room under it. */
.age-note.in-place { margin: 8px 16px calc(10px + env(safe-area-inset-bottom)); padding: 13px 16px; border-radius: 24px; text-align: center; }
.age-note.in-sheet { margin: 0 0 10px; }
.age-note-btn { border: 0; background: none; padding: 0 2px; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; }

/* buddy face
   The buddy's other expressions (server/web/buddyFace.js, drawn from
   server/web/buddy.mjs): the eyes, mouths, extras and motions the chat face
   (.pb-* above) does not have. Every length is a fraction of --s; the colours
   are the face's own, fixed like its yellow, and the extras that sit off the
   face use mid tones that read on light and dark. */
.pb.bf .pb-eyes { opacity: 0; }
.pb.bf .pb-eyes.on { opacity: 1; }
.pb.bf .pb-arcs.on { opacity: 1; }
.pb.bf .pb-cheeks.on { opacity: 0.55; }
.pb.bf .pb-eye { transition: opacity 0.17s ease; animation: bf-blink 6.8s var(--bd, 0s) infinite; }
.pb.bf .pb-eyes.wink .pb-eye:last-child { opacity: 0; }
.pb.bf.still, .pb.bf.still .pb-eye, .pb.bf.still * { animation: none !important; }
.bf-eyes {
  position: absolute; top: calc(var(--s) * 0.34); left: calc(var(--s) * 0.22); right: calc(var(--s) * 0.22);
  height: calc(var(--s) * 0.2); display: flex; align-items: center; justify-content: space-between;
  opacity: 0; transition: opacity 0.17s ease;
}
.bf-eyes.on { opacity: 1; }
.bf-e-wink { top: calc(var(--s) * 0.38); height: auto; align-items: flex-start; }
.bf-blank { width: calc(var(--s) * 0.2); }
.bf-heart { position: relative; width: calc(var(--s) * 0.22); height: calc(var(--s) * 0.2); }
.bf-heart::before, .bf-heart::after {
  content: ''; position: absolute; top: 0; left: calc(var(--s) * 0.11); width: calc(var(--s) * 0.11); height: calc(var(--s) * 0.18);
  background: #E8414F; border-radius: calc(var(--s) * 0.11) calc(var(--s) * 0.11) 0 0; transform: rotate(-45deg); transform-origin: 0 100%;
}
.bf-heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.bf-e-heart.on .bf-heart { animation: bf-beat 0.9s ease-in-out infinite; }
.bf-star { position: relative; width: calc(var(--s) * 0.24); height: calc(var(--s) * 0.24); }
.bf-star::before, .bf-star::after, .bf-spark::before, .bf-spark::after {
  content: ''; position: absolute; inset: 15%; background: #2B2118; transform: scaleX(0.4) rotate(45deg);
}
.bf-star::after, .bf-spark::after { transform: scaleY(0.4) rotate(45deg); }
.bf-e-star.on .bf-star { animation: bf-twinkle 1.1s ease-in-out infinite; }
.bf-x { position: relative; width: calc(var(--s) * 0.17); height: calc(var(--s) * 0.17); }
.bf-x::before, .bf-x::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(1.5px, calc(var(--s) * 0.045)); transform: translateY(-50%) rotate(45deg);
  background: #2B2118; border-radius: 2px;
}
.bf-x::after { transform: translateY(-50%) rotate(-45deg); }
.bf-closed {
  box-sizing: border-box; width: calc(var(--s) * 0.2); height: calc(var(--s) * 0.1); margin-top: calc(var(--s) * 0.06);
  border: solid #2B2118; border-width: 0 max(1px, calc(var(--s) * 0.03)) max(1.5px, calc(var(--s) * 0.05));
  border-radius: 0 0 calc(var(--s) * 0.2) calc(var(--s) * 0.2);
}
.bf-e-shades { top: calc(var(--s) * 0.3); left: calc(var(--s) * 0.12); right: calc(var(--s) * 0.12); height: auto; align-items: flex-start; justify-content: center; }
.bf-lens {
  position: relative; overflow: hidden; width: calc(var(--s) * 0.33); height: calc(var(--s) * 0.2); background: #1D1D24;
  border-radius: calc(var(--s) * 0.04) calc(var(--s) * 0.04) calc(var(--s) * 0.16) calc(var(--s) * 0.16);
}
.bf-lens::after {
  content: ''; position: absolute; top: calc(var(--s) * 0.035); left: calc(var(--s) * 0.06); width: calc(var(--s) * 0.09); height: calc(var(--s) * 0.035);
  border-radius: calc(var(--s) * 0.02); background: rgba(255, 255, 255, 0.55); transform: rotate(-18deg);
}
.bf-bridge { width: calc(var(--s) * 0.06); height: max(1.5px, calc(var(--s) * 0.045)); margin-top: calc(var(--s) * 0.03); background: #1D1D24; }
.bf-spiral {
  position: relative; box-sizing: border-box; width: calc(var(--s) * 0.21); height: calc(var(--s) * 0.21); border-radius: 50%;
  border: max(1.2px, calc(var(--s) * 0.035)) solid #2B2118; border-top-color: transparent;
}
.bf-spiral i {
  position: absolute; inset: calc(var(--s) * 0.025); box-sizing: border-box; border-radius: 50%;
  border: max(1.2px, calc(var(--s) * 0.03)) solid #2B2118; border-bottom-color: transparent;
}
.bf-e-spiral.on .bf-spiral { animation: bf-spin 1.1s linear infinite; }

.bf-m-bigsmile {
  position: relative; overflow: hidden; width: calc(var(--s) * 0.4); height: calc(var(--s) * 0.17); background: #2B2118;
  border-radius: calc(var(--s) * 0.03) calc(var(--s) * 0.03) calc(var(--s) * 0.2) calc(var(--s) * 0.2) / calc(var(--s) * 0.03) calc(var(--s) * 0.03) calc(var(--s) * 0.17) calc(var(--s) * 0.17);
}
.bf-m-bigsmile::before { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 32%; background: #FFFDF7; border-radius: 0 0 calc(var(--s) * 0.02) calc(var(--s) * 0.02); }
.bf-m-smallo { margin-top: calc(var(--s) * 0.05); width: calc(var(--s) * 0.08); height: calc(var(--s) * 0.09); border-radius: 50%; background: #2B2118; }
.bf-m-frown {
  box-sizing: border-box; margin-top: calc(var(--s) * 0.07); width: calc(var(--s) * 0.26); height: calc(var(--s) * 0.09);
  border-top: max(1.5px, calc(var(--s) * 0.05)) solid #2B2118; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.bf-m-wavy { display: flex !important; margin-top: calc(var(--s) * 0.1); }
.bf-m-wavy i {
  box-sizing: border-box; width: calc(var(--s) * 0.12); height: calc(var(--s) * 0.065); margin: 0 calc(var(--s) * -0.006);
  border: max(1.5px, calc(var(--s) * 0.045)) solid #2B2118; border-top: 0; border-radius: 0 0 calc(var(--s) * 0.12) calc(var(--s) * 0.12) / 0 0 calc(var(--s) * 0.065) calc(var(--s) * 0.065);
}
.bf-m-wavy i:nth-child(2) {
  border-top: max(1.5px, calc(var(--s) * 0.045)) solid #2B2118; border-bottom: 0; transform: translateY(calc(var(--s) * -0.045));
  border-radius: calc(var(--s) * 0.12) calc(var(--s) * 0.12) 0 0 / calc(var(--s) * 0.065) calc(var(--s) * 0.065) 0 0;
}
.bf-m-tongue {
  position: relative; box-sizing: border-box; margin-top: calc(var(--s) * 0.01); width: calc(var(--s) * 0.3); height: calc(var(--s) * 0.12);
  border-bottom: max(1.5px, calc(var(--s) * 0.05)) solid #2B2118; border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.bf-m-tongue i {
  position: absolute; top: calc(100% - max(1px, calc(var(--s) * 0.02))); left: 52%; width: calc(var(--s) * 0.12); height: calc(var(--s) * 0.12);
  background: #E8655A; border: max(1px, calc(var(--s) * 0.025)) solid #2B2118; border-top: 0; box-sizing: border-box;
  border-radius: 0 0 calc(var(--s) * 0.06) calc(var(--s) * 0.06);
}
.bf-m-smirk {
  box-sizing: border-box; margin-top: calc(var(--s) * 0.03); width: calc(var(--s) * 0.22); height: calc(var(--s) * 0.09);
  border-bottom: max(1.5px, calc(var(--s) * 0.05)) solid #2B2118; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: translateX(calc(var(--s) * 0.06)) rotate(-14deg);
}
.bf-m-laugh {
  position: relative; overflow: hidden; margin-top: calc(var(--s) * -0.02); width: calc(var(--s) * 0.38); height: calc(var(--s) * 0.26); background: #2B2118;
  border-radius: calc(var(--s) * 0.04) calc(var(--s) * 0.04) calc(var(--s) * 0.19) calc(var(--s) * 0.19) / calc(var(--s) * 0.04) calc(var(--s) * 0.04) calc(var(--s) * 0.24) calc(var(--s) * 0.24);
}
.bf-m-laugh::after {
  content: ''; position: absolute; left: 50%; bottom: calc(var(--s) * -0.04); width: calc(var(--s) * 0.22); height: calc(var(--s) * 0.13);
  margin-left: calc(var(--s) * -0.11); border-radius: calc(var(--s) * 0.07); background: #E8655A;
}
.bf-m-teeth {
  position: relative; box-sizing: border-box; margin-top: calc(var(--s) * 0.03); width: calc(var(--s) * 0.34); height: calc(var(--s) * 0.13);
  background: #FFFDF7; border: max(1.2px, calc(var(--s) * 0.035)) solid #2B2118; border-radius: calc(var(--s) * 0.05);
}
.bf-m-teeth::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(1px, calc(var(--s) * 0.02)); transform: translateY(-50%); background: #2B2118; }
.bf-m-teeth i { position: absolute; top: 0; bottom: 0; left: 33%; width: max(1px, calc(var(--s) * 0.02)); background: #2B2118; }
.bf-m-teeth i + i { left: 64%; }

.bf-extra { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.bf-extra.on { opacity: 1; }
.bf-extra i { position: absolute; font-style: normal; }
.bf-sweat i, .bf-tear i { width: calc(var(--s) * 0.11); height: calc(var(--s) * 0.11); background: #5BB8F5; border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.bf-sweat i { top: calc(var(--s) * 0.08); right: calc(var(--s) * 0.08); }
.bf-sweat.on i { animation: bf-drip 2s ease-in infinite; }
.bf-tear i { top: calc(var(--s) * 0.52); left: calc(var(--s) * 0.25); width: calc(var(--s) * 0.08); height: calc(var(--s) * 0.08); }
.bf-tear.on i { animation: bf-tear 2.2s ease-in infinite; }
.bf-spark { width: calc(var(--s) * 0.2); height: calc(var(--s) * 0.2); }
.bf-spark::before, .bf-spark::after { background: #F5B000; }
.bf-spark:nth-child(1) { top: calc(var(--s) * -0.1); left: calc(var(--s) * -0.12); }
.bf-spark:nth-child(2) { top: calc(var(--s) * -0.06); right: calc(var(--s) * -0.14); width: calc(var(--s) * 0.15); height: calc(var(--s) * 0.15); }
.bf-spark:nth-child(3) { bottom: calc(var(--s) * 0.02); right: calc(var(--s) * -0.14); width: calc(var(--s) * 0.12); height: calc(var(--s) * 0.12); }
.bf-sparkles.on .bf-spark { animation: bf-twinkle 1.2s ease-in-out infinite; }
.bf-sparkles.on .bf-spark:nth-child(2) { animation-delay: -0.4s; }
.bf-sparkles.on .bf-spark:nth-child(3) { animation-delay: -0.8s; }
.bf-zzz i { font: 900 calc(var(--s) * 0.18) / 1 system-ui, sans-serif; color: #8C9EFF; }
.bf-zzz i:nth-child(1) { top: calc(var(--s) * 0.12); right: calc(var(--s) * -0.06); }
.bf-zzz i:nth-child(2) { top: calc(var(--s) * -0.04); right: calc(var(--s) * -0.18); font-size: calc(var(--s) * 0.23); }
.bf-zzz i:nth-child(3) { top: calc(var(--s) * -0.24); right: calc(var(--s) * -0.3); font-size: calc(var(--s) * 0.29); }
.bf-zzz.on i { animation: bf-float 2.4s ease-in-out infinite; }
.bf-zzz.on i:nth-child(2) { animation-delay: -0.8s; }
.bf-zzz.on i:nth-child(3) { animation-delay: -1.6s; }
.bf-question i { top: calc(var(--s) * -0.24); right: calc(var(--s) * -0.18); font: 900 calc(var(--s) * 0.42) / 1 system-ui, sans-serif; color: #4C9AFF; transform: rotate(12deg); }
.bf-question.on i { animation: bf-wob 1.6s ease-in-out infinite; }
.bf-exclaim .bf-bar { top: calc(var(--s) * -0.2); right: calc(var(--s) * -0.1); width: calc(var(--s) * 0.08); height: calc(var(--s) * 0.24); border-radius: calc(var(--s) * 0.04); background: #FF5A4E; transform: rotate(12deg); }
.bf-exclaim .bf-dot { top: calc(var(--s) * 0.08); right: calc(var(--s) * -0.15); width: calc(var(--s) * 0.08); height: calc(var(--s) * 0.08); border-radius: 50%; background: #FF5A4E; }
.bf-exclaim.on { animation: bf-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.bf-confetti i { top: calc(var(--s) * -0.1); width: calc(var(--s) * 0.07); height: calc(var(--s) * 0.12); border-radius: 1px; opacity: 0; }
.bf-confetti i:nth-child(1) { left: -8%; background: #FF5A4E; }
.bf-confetti i:nth-child(2) { left: 14%; background: #4C9AFF; }
.bf-confetti i:nth-child(3) { left: 36%; background: #2EC27E; }
.bf-confetti i:nth-child(4) { left: 60%; background: #B06CFF; }
.bf-confetti i:nth-child(5) { left: 82%; background: #F5B000; }
.bf-confetti i:nth-child(6) { left: 102%; background: #FF8A73; }
.bf-confetti.on i { animation: bf-fall 1.6s ease-in infinite; }
.bf-confetti.on i:nth-child(2n) { animation-delay: -0.55s; animation-duration: 1.9s; }
.bf-confetti.on i:nth-child(3n) { animation-delay: -1.1s; }
.bf-steam i { top: calc(var(--s) * -0.02); width: calc(var(--s) * 0.16); height: calc(var(--s) * 0.16); border-radius: 50%; background: #A7ADB5; opacity: 0; }
.bf-steam i:nth-child(1) { left: calc(var(--s) * -0.06); }
.bf-steam i:nth-child(2) { right: calc(var(--s) * -0.06); }
.bf-steam.on i { animation: bf-steam 1.5s ease-out infinite; }
.bf-steam.on i:nth-child(2) { animation-delay: -0.75s; }

.pb-hop.k-shake { animation: bf-shake 0.5s ease-in-out; }
.pb-hop.k-spin { animation: bf-spin-once 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.pb-hop.k-pulse { animation: bf-pulse 0.5s ease-in-out; }
.pb-hop.k-wiggle { animation: bf-wiggle 0.6s ease-in-out; }
.pb-hop.k-tilt { animation: bf-tilt 0.6s cubic-bezier(0.3, 0.7, 0.4, 1); }
.pb-hop.k-bob { animation: bf-bob 1.2s ease-in-out; }

@keyframes bf-blink { 0%, 43%, 46%, 88%, 91%, 100% { transform: none; } 44.5%, 89.5% { transform: scaleY(0.1); } }
@keyframes bf-beat { 0%, 100% { transform: none; } 30% { transform: scale(1.18); } 50% { transform: scale(0.96); } }
@keyframes bf-twinkle { 0%, 100% { transform: scale(0.75) rotate(0deg); } 50% { transform: scale(1.1) rotate(20deg); } }
@keyframes bf-spin { to { transform: rotate(360deg); } }
@keyframes bf-drip { 0%, 40% { transform: rotate(45deg); } 100% { transform: translateY(calc(var(--s) * 0.08)) rotate(45deg); } }
@keyframes bf-tear { 0% { transform: rotate(45deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(calc(var(--s) * 0.22)) rotate(45deg); opacity: 0; } }
@keyframes bf-float { 0%, 100% { transform: none; opacity: 1; } 50% { transform: translate(calc(var(--s) * 0.03), calc(var(--s) * -0.05)); opacity: 0.55; } }
@keyframes bf-wob { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-4deg) translateY(calc(var(--s) * -0.03)); } }
@keyframes bf-pop { from { transform: scale(0.3); } to { transform: none; } }
@keyframes bf-fall {
  0% { transform: translateY(calc(var(--s) * -0.2)) rotate(0deg); opacity: 0; }
  15% { opacity: 1; } 80% { opacity: 1; }
  100% { transform: translateY(calc(var(--s) * 0.4)) rotate(320deg); opacity: 0; }
}
@keyframes bf-steam { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: translateY(calc(var(--s) * -0.24)) scale(1.15); opacity: 0; } }
@keyframes bf-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(calc(var(--s) * -0.06)); } 40%, 80% { transform: translateX(calc(var(--s) * 0.06)); } }
@keyframes bf-spin-once { from { transform: none; } to { transform: rotate(360deg); } }
@keyframes bf-pulse { 0%, 100% { transform: none; } 40% { transform: scale(1.14); } 70% { transform: scale(0.97); } }
@keyframes bf-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-10deg); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-5deg); } }
@keyframes bf-tilt { 0%, 100% { transform: none; } 35% { transform: rotate(14deg); } }
@keyframes bf-bob { 0%, 100% { transform: none; } 25%, 75% { transform: translateY(calc(var(--s) * 0.06)); } 50% { transform: translateY(calc(var(--s) * -0.02)); } }
/* Held still (or Reduce Motion): the confetti and steam stay where they are
   caught mid-flight rather than vanishing with their animation. */
.pb.bf.still .bf-confetti i { opacity: 1; transform: translateY(calc(var(--s) * 0.02)) rotate(35deg); }
.pb.bf.still .bf-confetti i:nth-child(2n) { transform: translateY(calc(var(--s) * -0.12)) rotate(-25deg); }
.pb.bf.still .bf-steam i { opacity: 0.75; transform: translateY(calc(var(--s) * -0.08)) scale(0.8); }
@media (prefers-reduced-motion: reduce) {
  .pb.bf .pb-eye, .bf-eyes *, .bf-extra, .bf-extra i, .pb-hop { animation: none !important; }
  .bf-confetti i { opacity: 1; transform: translateY(calc(var(--s) * 0.02)) rotate(35deg); }
  .bf-steam i { opacity: 0.75; transform: translateY(calc(var(--s) * -0.08)) scale(0.8); }
}

/* short screens: an opened question never pushes Check under the composer */
@media (max-height: 760px) {
  .st-qcard.open .st-q-body { max-height: 24vh; }
  .st-canvas { min-height: 140px; }
}

/* a disabled Check reads as off in every theme (a pale primary in dark looked tappable) */
.st-go:disabled, .st-answer-acts .btn:disabled { background: var(--surface); color: var(--ink-faint); border: 1px solid var(--border); opacity: 1; }

/* A phone: the model chip and the stepper take the header's right end, so
   the turn's cost and the context go (the ••• menu's Cost line has them) and
   the status keeps its words beside the dollars. */
@media (max-width: 430px) { .pane-usage-turn, .pane-usage-ctx { display: none; } }
/* A small phone: the count goes altogether, so the status reads in full. */
@media (max-width: 379px) { .pane-head-usage { display: none; } }

/* ===========================================================================
   Messages, 1 Oct: flair, Discord-style run headers, iMessage receipts, and
   rounder bubbles. The phone twin is components/pages/ThreadPage.tsx; the
   rules for runs and receipts are shared (chatRules.mjs).
   =========================================================================== */

/* ---- flair: a name in its owner's colour, a ring round the face ----
   Both modes' inks arrive as custom properties (flairView.js); the theme
   picks one, so switching light/dark repaints every name with no redraw. */
.flair-name { min-width: 0; }
.flair-ink {
  background-image: var(--fl); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
[data-theme='dark'] .flair-ink { background-image: var(--fd); }
.flair-badge { margin-left: 4px; }
.flair-ring {
  --rw: max(2px, calc(var(--rs) * 0.075));
  --rp: calc(var(--rw) + max(1.5px, calc(var(--rs) * 0.05)));
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--rs); height: var(--rs); border-radius: 50%; vertical-align: middle;
}
/* The ring is a layer behind the face, cut to a band by a mask — so 'spin'
   turns the colours and never the photo, and the gap shows whatever is behind. */
.flair-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  padding: var(--rw); background: var(--rl);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-theme='dark'] .flair-ring::before { background: var(--rd); }
.flair-ring.turning::before { animation: flair-spin 3.6s linear infinite; }
@keyframes flair-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .flair-ring.turning::before { animation: none; } }
.flair-ring > * {
  width: calc(var(--rs) - 2 * var(--rp)) !important; height: calc(var(--rs) - 2 * var(--rp)) !important;
  border-radius: 50% !important; margin: 0 !important; position: relative; font-size: calc(var(--rs) * 0.34) !important;
}
.thread-row .avatar-wrap > .flair-ring { margin-right: 0; }
.with-face > .flair-ring { margin-right: 0; }

/* ---- a run: one speaker in one go (4 Oct 2026) ----
   10 between runs, 2 inside one. Mine: bubbles on the right, nothing else. A
   one-to-one: no names, no faces. A group: the name over the run's first
   bubble, the face (28) beside its last, bottom-aligned, and the run's other
   bubbles indented the same 28 + 8. */
.mrow { margin-top: 2px; }
.mrow.run-start { margin-top: 10px; }
.mrow.mine { display: flex; flex-direction: column; align-items: stretch; }
.mrow.theirs { display: flex; flex-direction: column; align-items: stretch; }
.mline { display: flex; align-items: flex-end; min-width: 0; }
.mrun-face { width: 28px; margin-right: 8px; flex: none; display: flex; justify-content: center; }
.mrun-col { flex: 1; min-width: 0; }
.mrun-avatar {
  width: 36px; height: 36px; border-radius: 18px; flex: none; object-fit: cover;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.mrun-avatar.ai svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 32; }
.thread-inner .mrun-avatar { width: 28px; height: 28px; border-radius: 14px; font-size: 11px; }
.thread-inner .mrun-avatar.ai svg { width: 16px; height: 16px; }
/* The name over a run: the one they chose, in their flair or else muted —
   never a @handle, never a time (the bubble has it). */
.mname {
  display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  margin: 0 0 3px 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1px; color: var(--ink-muted);
}
.mrow.in-group .mname { margin-left: 42px; max-width: calc(100% - 42px); }
.mname .flair-name, .mname .mname-text { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.mname .flair-badge { font-size: 12px; }
/* The header the Settings flair preview still draws (pages/settings.js). */
.mrun-head {
  display: flex; align-items: baseline; gap: 6px; margin: 0 4px 4px; min-width: 0;
  white-space: nowrap; text-align: left;
}
.mrun-head.mine { justify-content: flex-end; }
.mrun-name { font-size: 14.5px; font-weight: 700; color: var(--ink); min-width: 0; letter-spacing: 0.1px; white-space: normal; overflow-wrap: break-word; }
.mrun-handle { font-size: 12.5px; color: var(--ink-faint); min-width: 0; flex-shrink: 2; white-space: normal; overflow-wrap: break-word; }
.mrun-time { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; }
.mrun-ai { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; padding: 1px 5px; border-radius: 5px; background: var(--accent); color: var(--bg); align-self: center; flex: none; }
/* On a picture or a colour, the words sit on a soft band of the page. */
.thread-bubbles.has-bg .mname, .thread-bubbles.has-bg .msg-receipt, .thread-bubbles.has-bg .typing-who {
  width: fit-content; max-width: 100%; padding: 2px 9px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}

/* ---- a message: its wrapper, its bubble, the tapback under it ----
   The box is as wide as the bubble (at most 78% of the thread); the tapback
   hangs off its start, clear of the time in the bubble's other corner. */
.mwrap { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.mwrap.mine { align-items: flex-end; }
.mbox { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(78%, 560px); }
.mwrap.mine .mbox { align-items: flex-end; }
.mrow.in-group .mbox { max-width: min(84%, 560px); }
.mbox > .msg-chip { align-self: flex-start; margin: -6px 0 0 10px; }

/* ---- bubbles: radius 18, 6 where two of a run meet, 4 under the tail ----
   Theirs is the page's card colour with a whisper of shadow (a drop-shadow,
   so the tail shares it); mine is the theme's bubble. */
.mrow .mbox > .thread-bubble {
  width: fit-content; max-width: 100%; margin: 0; border: none; border-radius: 18px;
  padding: 7px 12px; text-align: left; cursor: pointer;
  font-size: 16.5px; line-height: 1.35;
  background: var(--surface-solid, var(--surface)); color: var(--ink);
  box-shadow: none; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.13));
}
.mrow .mbox > .thread-bubble.mine { background: var(--bubble-user); color: var(--bubble-user-ink); filter: none; }
.mrow .mbox > .thread-bubble:not(.mine):not(.run-first) { border-top-left-radius: 6px; }
.mrow .mbox > .thread-bubble:not(.mine):not(.run-last) { border-bottom-left-radius: 6px; }
.mrow .mbox > .thread-bubble.mine:not(.run-first) { border-top-right-radius: 6px; }
.mrow .mbox > .thread-bubble.mine:not(.run-last) { border-bottom-right-radius: 6px; }
.mrow .mbox > .thread-bubble.tail:not(.mine) { border-bottom-left-radius: 4px; }
.mrow .mbox > .thread-bubble.tail.mine { border-bottom-right-radius: 4px; }
/* The tail: the shared curl (components/BubbleTail.tsx TAIL_PATH), 12 x 18,
   its inner half over the bubble's corner, in the bubble's own fill. */
.mrow .thread-bubble.tail::after {
  content: ''; position: absolute; bottom: 0; right: -6px; width: 12px; height: 18px;
  background: inherit; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M0 0 H6 C6 9 8 15 12 18 C7.5 18.5 3.5 17.5 0 15 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M0 0 H6 C6 9 8 15 12 18 C7.5 18.5 3.5 17.5 0 15 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.mrow .thread-bubble.tail:not(.mine)::after { right: auto; left: -6px; transform: scaleX(-1); }
.mrow .mbox > .thread-bubble.game { width: 100%; max-width: 100%; padding: 0; background: none; filter: none; }
.mrow .mbox > .thread-bubble.emoji-only { padding: 0 2px; background: none; filter: none; }
.mrow .mbox > .thread-bubble.mentioned { border-left: none; background: var(--accent-soft); }
.mrow .mbox > .thread-bubble.unsent { background: var(--surface); color: var(--ink-faint); filter: none; box-shadow: inset 0 0 0 1px var(--border); }
.mrow .mbox:has(> .thread-bubble.game) { max-width: 100%; width: 100%; }
.mrow .mwrap:has(.thread-bubble.game) { align-items: stretch; }

/* ---- under a bubble: the tapback, "Edited", the receipt ---- */
.msg-chip {
  display: inline-flex; align-items: center; gap: 3px; position: relative; z-index: 1;
  margin: -9px 10px 0; padding: 2px 7px; border-radius: 13px; font-size: 14px;
  background: var(--raised, var(--surface)); border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.msg-chip b { font-size: 12px; color: var(--ink-muted); }
/* The receipt: one quiet line, "Read" and when, under your newest message they read. */
.msg-receipt { font-size: 12px; color: var(--ink-faint); margin: 3px 4px 0; text-align: right; }
.msg-receipt b { font-weight: 600; }

/* ---- the day, and someone typing ---- */
.day-sep { text-align: center; margin: 20px 0 6px; }
.day-sep span { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: var(--ink-muted); padding: 4px 12px; border-radius: 12px; }
.thread-bubbles.has-bg .day-sep span { background: var(--surface); }
.typing-who { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin: 0 4px 4px; }
.typing-dots {
  display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 15px;
  border-radius: 19px; border-bottom-left-radius: 7px;
  background: var(--surface); border: 1px solid var(--border);
}
.typing-dots i { width: 7.5px; height: 7.5px; border-radius: 4px; background: var(--ink-muted); opacity: 0.35; animation: typing-dot 1.2s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.16s; }
.typing-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 0.95; transform: translateY(-3.5px); } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; opacity: 0.5; } }

/* ---- the flair editor (Settings → Messages) ---- */
.flair-editor { padding: 8px 0 10px; }
.flair-preview { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg); }
.flair-sub { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); margin: 14px 0 8px; }
.flair-swatches { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.flair-swatches::-webkit-scrollbar { display: none; }
.flair-swatch { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; padding: 0; }
.flair-swatch-face {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 0 0 2px transparent, 0 0 0 4px transparent;
  color: var(--ink); font-size: 14px;
}
.flair-swatch.on .flair-swatch-face { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.flair-swatch-label { font-size: 11px; color: var(--ink-faint); }
.flair-swatch.on .flair-swatch-label { color: var(--ink); font-weight: 700; }
.flair-disc { width: 34px; height: 34px; border-radius: 50%; }
.flair-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.flair-badge-cell { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; display: grid; place-items: center; background: none; border: 1.5px solid transparent; }
.flair-badge-cell:hover { background: var(--accent-soft); }
.flair-badge-cell.on { border-color: var(--accent); background: var(--accent-soft); }
.flair-badge-cell svg { width: 18px; height: 18px; stroke: var(--ink-muted); fill: none; stroke-width: 36; }
.flair-segment { display: flex; gap: 3px; padding: 3px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); max-width: 360px; }
.flair-segment button { flex: 1; height: 36px; border-radius: 9px; font-weight: 700; font-size: 13.5px; background: none; color: var(--ink); }
.flair-segment button.on { background: var(--ink); color: var(--bg); }
/* A name never wraps its badge onto a line of its own; a long @handle gives
   way long before the name does; words in a bubble read left to right even
   on your side of the thread. */
.head-name .flair-name, .mrun-name, .thread-row .name .flair-name { white-space: nowrap; }
.head-name .flair-name { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.mrun-head .mrun-name { flex-shrink: 1; }
.mrun-head .mrun-handle { flex-shrink: 10; }
.mrow .thread-bubble { text-align: left; }

/* Review fixes, 1 Oct. The header's title may shrink (or a long name pushes
   call and search off a small phone); every colour is reachable on a wide
   screen; a long @handle gives way to the name and its badge; the online dot
   sits on the face, not 12px past it (the gap belongs to the wrapper). */
.stack-title.with-face { min-width: 0; }
.flair-swatches { flex-wrap: wrap; overflow: visible; }
.mrun-head .mrun-name { flex: 0 0 auto; max-width: calc(100% - 72px); }
.mrun-head .mrun-handle { flex: 0 1 auto; min-width: 0; }
.flair-preview .mrun-head .mrun-name { max-width: 75%; }
.thread-row .avatar-wrap { margin-right: 12px; }
.thread-row .avatar-wrap > .avatar { margin-right: 0; }
.mrun-head.mine .mrun-name { flex: 0 1 auto; max-width: none; }

/* ---- Messages, 4 Oct: the revamp — a calmer list with a pinned shelf, a
   header with Games and the two calls, the time inside every bubble, and one
   plain composer. The phone's twins: components/pages/MessagesPage.tsx and
   ThreadPage.tsx (the shared spec, MESSAGES-SPEC.md). Big targets: every
   button here is at least 44 x 44. ---- */

/* the two headers: 44px buttons */
.msg-stack .round-btn { width: 44px; height: 44px; border-radius: 22px; }
.msg-list .pill-btns { gap: 0; padding: 0 2px; }
.msg-list .pill-btns button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; }

/* the list: face 52, name 17, one line of what was said; the hairline
   starts under the words, not under the face */
.thread-item { position: relative; }
.msg-list-pane .thread-row {
  padding: 12px 16px; border-bottom: none; min-height: 76px;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.thread-item::after {
  content: ''; position: absolute; left: 80px; right: 0; bottom: 0;
  border-bottom: 1px solid var(--border); pointer-events: none;
}
.thread-item:last-child::after { display: none; }
.msg-list-pane .thread-row .avatar { width: 52px; height: 52px; border-radius: 26px; font-size: 18px; }
.msg-list-pane .thread-row .name { font-size: 17px; font-weight: 600; }
.msg-list-pane .thread-row.unread .name { font-weight: 700; }
.msg-list-pane .thread-row .time { font-size: 13px; }
.msg-list-pane .thread-row.unread .time { color: var(--accent); font-weight: 600; }
.msg-list-pane .thread-row .preview { font-size: 15px; line-height: 20px; margin-top: 3px; }
.msg-list-pane .thread-row .preview.typing { color: var(--accent); font-weight: 600; }
.msg-list-pane .unread-badge { min-width: 22px; height: 22px; border-radius: 11px; padding: 0 7px; font-size: 12.5px; color: var(--on-accent, #fff); }
/* With a mouse, a pin comes up at the row's end; the time steps aside for it. */
.row-pin {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-solid, var(--surface)); border: 1px solid var(--border);
  color: var(--ink-muted); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0; pointer-events: none; transition: opacity 120ms ease;
}
.row-pin svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 36; transform: rotate(30deg); }
.row-pin:hover { color: var(--accent); }
@media (hover: hover) {
  .thread-item:hover .row-pin, .row-pin:focus-visible { opacity: 1; pointer-events: auto; }
  .thread-item:hover .thread-row .time, .thread-item:hover .thread-row .unread-badge,
  .thread-item:has(.row-pin:focus-visible) .thread-row .time { opacity: 0; }
}
@media (hover: none) { .row-pin { display: none; } }

/* the pinned shelf: our own — a row of soft cards, not a grid of circles */
.list-label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink-faint); padding: 12px 16px 6px; }
.pin-shelf {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 12px;
  scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.pin-shelf::-webkit-scrollbar { display: none; }
.pin-card {
  position: relative; flex: none; width: 86px; height: 108px; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; padding: 12px 6px 0;
  background: linear-gradient(160deg, var(--accent-soft), var(--surface-solid, var(--surface)));
  border: 1px solid var(--border); color: var(--ink); scroll-snap-align: start;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  transition: transform 120ms ease;
}
.pin-card:active { transform: scale(0.96); }
.pin-card.unread {
  border: 2px solid var(--accent); padding-top: 11px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent);
}
.pin-card.active .pin-name { color: var(--accent); }
.pin-face { position: relative; display: inline-flex; flex: none; }
.pin-face .avatar { width: 50px; height: 50px; border-radius: 25px; font-size: 17px; }
.pin-name { margin-top: 7px; max-width: 100%; font-size: 13px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.pin-status { margin-top: 1px; max-width: 100%; font-size: 11px; color: var(--ink-faint); white-space: normal; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.pin-status.live { color: var(--accent); }
.pin-status.news { color: var(--accent); font-weight: 800; }
.pin-glyph { position: absolute; top: 9px; right: 11px; width: 11px; height: 11px; color: var(--ink-faint); transform: rotate(30deg); }
.pin-glyph svg { display: block; width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 44; }

/* no chats yet */
.msg-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 72px 28px 24px; }
.msg-empty-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.msg-empty-text { font-size: 15px; line-height: 1.4; color: var(--ink-muted); max-width: 280px; }
.msg-empty-btn {
  margin-top: 12px; min-height: 52px; padding: 0 30px; border-radius: 26px;
  background: var(--accent); color: var(--on-accent, #fff); font-size: 16.5px; font-weight: 700;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* a small menu by what was held: Pin to top / Unpin, Send later */
.pop-catch { position: fixed; inset: 0; z-index: 90; }
.pop-menu {
  position: fixed; min-width: 190px; max-width: min(280px, calc(100vw - 16px)); padding: 6px;
  background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); animation: menu-pop 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pop-title { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--ink-faint); padding: 6px 10px 4px; }
.pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
  border-radius: 10px; font-size: 15.5px; font-weight: 600; color: var(--ink); text-align: left;
}
.pop-item svg { width: 18px; height: 18px; flex: none; stroke: var(--ink-muted); fill: none; stroke-width: 34; }
.pop-item:hover, .pop-item:focus-visible { background: var(--accent-soft); outline: none; }

/* the conversation's header: back, face, the name alone, then Games and the two calls */
.msg-convo { position: relative; }
.msg-convo > .stack-head { gap: 2px; padding: 6px 6px 8px 8px; }
.head-who { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 44px; padding: 2px 2px 2px 4px; border-radius: 14px; text-align: left; color: var(--ink); }
.head-who:disabled { cursor: default; }
.head-who .head-face { width: 32px; height: 32px; border-radius: 16px; }
.head-who .head-words { min-width: 0; flex: 1; }
.head-who .head-name { display: block; font-size: 17px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.head-sub { font-size: 12px; font-weight: 400; color: var(--ink-faint); white-space: normal; margin-top: 1px; overflow-wrap: break-word; }
.head-sub.live { color: var(--success); }
.head-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.games-pill {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 9px; margin-right: 4px;
  border-radius: 17px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.games-pill::before { content: ''; position: absolute; inset: -5px -2px; }
.games-pill svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 34; }
.games-pill.open { background: var(--accent); color: var(--on-accent, #fff); }
.head-btn { position: relative; width: 38px; height: 44px; border-radius: 19px; display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
/* Drawn slimmer than a thumb so the name keeps its room; the target is 44 all the same. */
.head-btn::before { content: ''; position: absolute; inset: 0 -3px; }
.msg-convo > .stack-head > .round-btn { position: relative; width: 36px; height: 36px; border-radius: 18px; }
.msg-convo > .stack-head > .round-btn::before { content: ''; position: absolute; inset: -4px; }
.head-btn:hover { background: var(--accent-soft); }
.head-btn svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 32; }
.head-btn.in-call { color: var(--success, #2E7D4F); }
.head-btn .call-count {
  position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; margin: 0;
  border-radius: 9px; background: var(--success, #2E7D4F); color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
/* A narrow phone: Games keeps its icon, the name keeps its room. */
@media (max-width: 359.98px) {
  .games-word { display: none; }
  .games-pill { width: 40px; padding: 0; justify-content: center; }
  .msg-convo > .stack-head { padding-left: 6px; padding-right: 4px; gap: 2px; }
  .head-who { gap: 8px; }
}

/* the games list, hanging under the Games button */
.games-host { position: absolute; inset: 0; z-index: 25; }
.games-host[hidden] { display: none; }
.games-catch { position: absolute; inset: 0; }
.games-menu {
  position: absolute; width: 280px; max-width: calc(100% - 16px); max-height: calc(100% - 120px);
  display: flex; flex-direction: column; padding: 14px 0 6px;
  background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
  transform-origin: top right; animation: games-drop 170ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
[data-theme='dark'] .games-menu { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); }
@keyframes games-drop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.games-title { font-size: 16px; font-weight: 800; color: var(--ink); padding: 0 16px; }
.games-hint { font-size: 12.5px; color: var(--ink-faint); padding: 1px 16px 6px; }
.games-list { overflow-y: auto; padding: 0 4px; overscroll-behavior: contain; }
.game-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border-radius: 12px; text-align: left; }
.game-row:hover, .game-row:focus-visible { background: var(--accent-soft); outline: none; }
.game-row:active { transform: scale(0.98); }
.game-words { display: flex; flex-direction: column; min-width: 0; }
.game-name { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.game-blurb { font-size: 12.5px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .games-menu, .pop-menu { animation: none; } }

/* inside a bubble: the words, a quote, a picture, a link's card */
.bubble-text { white-space: pre-wrap; overflow-wrap: break-word; }
.bubble-quote {
  max-width: 100%; overflow: hidden; margin: 2px 0 5px; padding: 4px 9px; border-radius: 8px;
  border-left: 3px solid var(--accent); background: var(--accent-soft);
}
.bubble-quote-who { font-size: 12px; font-weight: 700; color: var(--accent); }
.bubble-quote-text { font-size: 13.5px; line-height: 1.3; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.thread-bubble.mine .bubble-quote { border-left-color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.thread-bubble.mine .bubble-quote-who, .thread-bubble.mine .bubble-quote-text { color: inherit; opacity: 0.85; }
.thread-bubble.k-media { padding: 3px; }
.media-frame { position: relative; }
.bubble-media { display: block; max-width: min(260px, 100%); max-height: 320px; border-radius: 15px; background: var(--bg); object-fit: cover; }
video.bubble-media { background: #000; }
.bubble-media.gif { max-width: min(240px, 100%); }
.media-caption { position: relative; padding: 5px 9px 4px; }
.link-card {
  display: block; max-width: 300px; margin-top: 6px; overflow: hidden; border-radius: 10px;
  background: var(--accent-soft); color: inherit; text-decoration: none;
}
/* In my own bubble the card wears my bubble's ink, faint — as the quote does —
   so its words read on a dark bubble and a light one alike. */
.thread-bubble.mine .link-card { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.thread-bubble.mine .link-card * { color: inherit !important; }
.big-emoji { font-size: 54px; line-height: 64px; }
.unsent-text { font-style: italic; font-size: 15px; }

/* the time in every bubble: in its corner, with the room for it kept at the
   end of the words; on a pill over a picture and under a sticker */
.stamp { font-size: 11.5px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-faint); pointer-events: none; }
.thread-bubble.mine .stamp { color: var(--bubble-user-ink); opacity: 0.72; }
.thread-bubble.unsent .stamp { color: var(--ink-faint); opacity: 1; }
.stamp-spacer { visibility: hidden; font-size: 11.5px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stamp-corner { position: absolute; right: 12px; bottom: 7px; }
.media-caption > .stamp-corner { right: 9px; bottom: 5px; }
.stamp-row { margin-top: 3px; text-align: right; }
.stamp-pill {
  display: inline-block; padding: 3px 7px; border-radius: 9px; line-height: 1;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: #fff; background: rgba(0, 0, 0, 0.42);
}
.media-stamp { position: absolute; right: 8px; bottom: 8px; pointer-events: none; }
/* A video's own controls run along its foot, so its time sits at the top. */
.media-frame:has(> video) .media-stamp { top: 8px; bottom: auto; }
.float-stamp { margin-top: 2px; text-align: left; line-height: 1; }
.thread-bubble.mine .float-stamp { text-align: right; }
.thread-bubble.emoji-only > .float-stamp { color: inherit; }

/* NEW: where the unread messages start */
.new-rule { display: flex; align-items: center; gap: 8px; margin: 14px 2px 2px; color: var(--accent); }
.new-rule i { flex: 1; height: 2px; border-radius: 1px; background: var(--accent); opacity: 0.6; }
.new-rule span { font-size: 11px; font-weight: 800; letter-spacing: 0.6px; }
.thread-bubbles.has-bg .new-rule span { padding: 2px 8px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 82%, transparent); }

/* someone typing: a bubble like theirs, with its tail corner */
.thread-inner .typing-dots {
  height: 36px; border: none; border-radius: 18px; border-bottom-left-radius: 4px;
  background: var(--surface-solid, var(--surface)); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.13));
}
.thread-hello { padding: 40px 20px; }

/* the composer: the gear; + · the box · smiley · send; the mic — each a 44px target */
.composer-dock .cmd-bar { gap: 0; padding: 3px 4px; }
.composer-dock .cmd-bar .cmd-icon { width: 44px; height: 44px; border-radius: 22px; }
.composer-dock .cmd-bar .cmd-icon svg { width: 22px; height: 22px; }
.composer-dock .cmd-bar .attach-btn svg { width: 25px; height: 25px; stroke-width: 36; }
/* Settings and the microphone are coins outside the box since 13 Oct 2026
   (barSides.js), the box in the middle between them. */
/* A phone-sized window: the box's buttons are 38px there, and once there are
   words to send, the paste button (it sends a picture) steps aside until the
   box is empty again. */
@media (max-width: 480px) {
  .composer-dock .cmd-bar .cmd-icon { width: 38px; height: 38px; border-radius: 19px; }
  .composer-dock .cmd-bar:has(.cmd-send.ready) .paste-btn { display: none; }
}
/* The narrowest: the paste button gives the words its room (the + still attaches a picture). */
@media (max-width: 380px) { .composer-dock .cmd-bar .paste-btn { display: none; } }
.composer-dock .cmd-bar .cmd-icon:disabled { opacity: 0.45; }
.composer-dock .cmd-bar .expr-btn.open { color: var(--accent); background: var(--accent-soft); }
.composer-dock .cmd-bar .cmd-send { position: relative; width: 38px; height: 38px; border-radius: 19px; margin: 0 3px; }
.composer-dock .cmd-bar .cmd-send::after { content: ''; position: absolute; inset: -3px; }
.composer-dock .cmd-bar .cmd-send svg { width: 19px; height: 19px; }
.composer-dock .cmd-bar input { font-size: 16.5px; padding: 10px 6px; }
@media (max-width: 380px) {
  .msg-convo .composer-dock .cmd-line { margin-left: 8px; margin-right: 8px; }
  .composer-dock .cmd-bar input { padding-left: 2px; padding-right: 2px; }
}


/* ---- Messages, 4 Oct: after the review ---- */
/* The header gives the name its room: the Games pill and the calls drawn a
   little slimmer (their targets stay 44). */
.games-pill { gap: 3px; padding: 0 9px 0 8px; margin-right: 2px; font-size: 13px; }
.games-pill svg { width: 18px; height: 18px; }
.head-btn { width: 36px; }
/* A picture is as wide as itself (up to 260), in a thin frame — a percentage
   inside a shrink-to-fit bubble let the bubble size itself to the original. */
.media-frame { width: fit-content; max-width: 260px; }
.media-frame .bubble-media { max-width: 100%; }
.media-frame .bubble-media.gif { max-width: 240px; }
.mrow .mbox > .thread-bubble.k-media { padding: 3px; }
/* The shelf starts under its label when it scrolls; with a mouse it wraps,
   since a wheel cannot scroll it sideways. */
.pin-shelf { scroll-padding-inline: 16px; }
@media (hover: hover) and (pointer: fine) {
  .pin-shelf { flex-wrap: wrap; overflow: visible; }
}
/* Readable for every age: the receipt and the presence line in the muted
   ink, a file's name on two lines, a card in my bubble in my own ink. */
.msg-receipt { color: var(--ink-muted); }
.head-sub { color: var(--ink-muted); }
.file-body b { white-space: normal; display: block; overflow-wrap: break-word; }
.thread-bubble.mine .file-card { background: color-mix(in srgb, currentColor 12%, transparent); }
/* The reply / edit bar's line: the message it answers, cut as a preview. */
.ctx-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
/* The reply / edit bar's close: a real 44 target. */
.ctx-close { width: 44px; height: 44px; border-radius: 22px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); }
.ctx-close:hover { background: var(--accent-soft); color: var(--ink); }
.ctx-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 36; }
/* The box grows with its words (up to five lines); the buttons stay on its last line. */
.composer-dock .cmd-bar { align-items: flex-end; }
.composer-dock .cmd-bar textarea.msg-input {
  flex: 1; min-width: 0; border: none; outline: none; background: none; resize: none;
  font: inherit; font-size: 16.5px; line-height: 22px; padding: 11px 6px; margin: 0;
  color: var(--ink); max-height: 120px; overflow-y: hidden; align-self: center;
}
.composer-dock .cmd-bar textarea.msg-input::placeholder { color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  .composer-dock .cmd-bar textarea.msg-input { padding-left: 2px; padding-right: 2px; }
}

/* ---- alarms on the day (dayAlarm.js) and the ring (alarmClock.js) ---- */
.today-alarms { display: flex; flex-direction: column; gap: 7px; }
.today-alarm { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); border-radius: 18px; padding: 9px 10px 9px 12px; }
.today-alarm.dim .today-alarm-time, .today-alarm.dim .today-alarm-label, .today-alarm.dim svg { color: var(--ink-faint); }
.today-alarm-main { flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: var(--accent); cursor: pointer; font: inherit; }
.today-alarm-main svg { width: 20px; height: 20px; flex: none; }
.today-alarm-face { flex: none; width: 36px; height: 36px; display: inline-flex; margin-right: 6px; }
.today-alarm.dim .today-alarm-face { opacity: .55; }
.today-alarm-text { min-width: 0; flex: 1; }
.today-alarm-timerow { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.today-alarm-time { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); white-space: nowrap; flex: none; }
.today-alarm-timerow { flex-wrap: wrap; row-gap: 0; }
/* a long label takes a line of its own rather than being crushed beside the time */
.today-alarm-label { flex: 1 1 7em; min-width: 7em; font-size: 14px; color: var(--ink-muted); overflow-wrap: anywhere; }
.today-alarm-bits { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }
.today-alarm-switch { position: relative; flex: none; width: 44px; height: 26px; cursor: pointer; }
.today-alarm-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.today-alarm-knob { position: absolute; inset: 0; border-radius: 13px; background: var(--border); transition: background .15s; }
.today-alarm-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.today-alarm-switch input:checked + .today-alarm-knob { background: var(--accent); }
.today-alarm-switch input:checked + .today-alarm-knob::after { left: 21px; }
.today-alarm-switch input:focus-visible + .today-alarm-knob { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the alarm editor (dayAlarm.js openAlarmSheet) — the phone's AlarmSheet.tsx:
   a header and the buddy's bar that stay put, everything else scrolls */
.modal.alarm-sheet { width: min(460px, 94vw); max-height: min(88vh, 860px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.as-top { flex: none; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); background: var(--surface-solid); }
.as-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.as-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.as-cancel, .as-save { background: none; border: 0; font: inherit; font-size: 16px; cursor: pointer; padding: 6px 2px; min-height: 36px; }
.as-cancel { color: var(--ink-muted); }
.as-save { color: var(--accent); font-weight: 800; }
.as-save:disabled { opacity: .6; cursor: default; }
.ab-bar { display: flex; align-items: center; gap: 12px; }
.ab-bubble { position: relative; flex: 1; min-width: 0; min-height: 42px; display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 8px 13px; }
.ab-bubble::before { content: ''; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--bg); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.ab-line { font-size: 15px; font-weight: 700; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.as-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 22px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.as-hero { position: relative; border-radius: 24px; padding: 14px; background: var(--accent-soft); display: flex; flex-direction: column; align-items: center; }
.as-sky { position: absolute; top: 14px; right: 16px; color: var(--accent); display: inline-flex; }
.as-sky svg { width: 20px; height: 20px; }
.as-ringsin { font-size: 13.5px; font-weight: 700; color: var(--ink-muted); margin-top: 2px; }
.alarm-sheet svg { stroke: currentColor; fill: none; stroke-width: 36; }
/* the editor is the screen on a phone: the offline bar would sit on Cancel and Save */
body:has(.alarm-sheet) .offline-bar { display: none; }
/* the time wheel: columns that scroll and snap, the middle row big */
.aw-wheel { position: relative; display: flex; align-items: stretch; justify-content: center; gap: 2px; height: 162px; margin: 18px 0 4px; align-self: stretch; }
.aw-band { position: absolute; left: 4px; right: 4px; top: 54px; height: 54px; border-radius: 16px; background: var(--surface-solid); border: 1px solid var(--border); pointer-events: none; }
.aw-col { position: relative; width: 84px; height: 162px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 54px 0; box-sizing: border-box; outline: none; border-radius: 16px; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.aw-col::-webkit-scrollbar { display: none; }
.aw-col:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.aw-item { height: 54px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-size: 26px; font-weight: 700; color: var(--ink-faint); cursor: pointer; font-variant-numeric: tabular-nums; user-select: none; transition: color .12s, font-size .12s; }
.aw-item.on { font-size: 42px; font-weight: 800; letter-spacing: -1px; color: var(--ink); }
.aw-ampm { width: 64px; }
.aw-ampm .aw-item, .aw-ampm .aw-item.on { font-size: 22px; letter-spacing: 0; }
.aw-ampm .aw-item.on { font-size: 26px; }
.aw-colon { align-self: center; font-size: 38px; font-weight: 800; color: var(--ink); position: relative; top: -3px; }
.as-labelrow { display: flex; align-items: center; gap: 8px; align-self: stretch; margin-top: 10px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 14px; padding: 0 12px; cursor: text; }
.as-labelrow svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
.as-label { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 600; padding: 11px 0; outline: none; }
.as-label::placeholder { color: var(--ink-faint); }
.as-card { border: 1px solid var(--border); background: var(--surface); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.as-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.as-cardhead h4 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.as-cardvalue { font-size: 13.5px; font-weight: 800; color: var(--accent); white-space: normal; min-width: 0; overflow-wrap: break-word; }
.as-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.as-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.as-presets .as-chip { padding: 8px 2px; font-size: 12.5px; white-space: nowrap; }
.as-chip { border-radius: 999px; border: 1px solid var(--border); background: var(--surface-solid); color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 800; padding: 8px 13px; min-height: 36px; cursor: pointer; transition: transform .1s; }
.as-chip:active, .as-day:active, .as-mission:active, .as-sound:active, .as-step:active { transform: scale(.95); }
.as-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.as-days { display: flex; justify-content: space-between; gap: 5px; }
.as-day { flex: 1; max-width: 44px; aspect-ratio: 1; border-radius: 999px; border: 1.5px solid var(--border); background: none; color: var(--ink-muted); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; padding: 0; transition: transform .1s, background .12s; }
.as-day.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.as-missions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.as-mission { display: flex; flex-direction: column; gap: 8px; text-align: left; min-height: 104px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface-solid); color: var(--ink); font: inherit; padding: 11px; cursor: pointer; transition: transform .1s, background .12s; min-width: 0; }
.as-mission.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }
.as-mission.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.as-demo { min-height: 46px; display: flex; align-items: center; }
.as-mission.wide .as-demo { min-height: 0; }
.as-missionfoot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 15px; font-weight: 800; }
.as-mission.wide .as-missionfoot { flex: 1; }
.as-tick { flex: none; width: 18px; height: 18px; border-radius: 9px; background: currentColor; display: inline-flex; align-items: center; justify-content: center; }
.as-tick svg { width: 12px; height: 12px; stroke: var(--accent); stroke-width: 64; }
.am-math { font-size: 17px; font-weight: 800; letter-spacing: -.3px; line-height: 21px; font-variant-numeric: tabular-nums; }
.am-type { font-size: 13px; font-weight: 600; font-style: italic; line-height: 17px; color: inherit; opacity: .85; }
.am-grid { display: grid; grid-template-columns: repeat(3, 13px); gap: 3px; }
.am-grid i { width: 13px; height: 13px; border-radius: 4px; background: var(--border); }
.am-grid i.lit { background: var(--accent); }
.as-mission.on .am-grid i { background: rgba(255,255,255,.28); }
.as-mission.on .am-grid i.lit { background: var(--on-accent); }
.am-shake { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.am-phone { width: 22px; height: 36px; box-sizing: border-box; border: 2.5px solid currentColor; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; }
.am-phone b { width: 4px; height: 4px; border-radius: 2px; background: currentColor; }
.am-shake.play .am-phone { animation: am-wiggle 0.86s linear infinite; }
@keyframes am-wiggle { 0% { transform: rotate(0); } 10% { transform: rotate(14deg); } 31% { transform: rotate(-14deg); } 42%, 100% { transform: rotate(0); } }
.am-stop { width: 22px; height: 22px; box-sizing: border-box; border-radius: 6px; border: 2.5px solid var(--accent); margin-right: 4px; }
.as-mission.on .am-stop { border-color: var(--on-accent); }
.as-knobs { display: flex; flex-direction: column; gap: 10px; }
.as-knobs:empty { display: none; }
.as-segment { display: flex; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-solid); padding: 3px; }
.as-segment button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 8px 0; min-height: 34px; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink-muted); cursor: pointer; }
.as-segment button.on { background: var(--accent); color: var(--on-accent); }
.as-stepper { display: flex; align-items: center; gap: 10px; }
.as-inlinelabel { font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.as-step { width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-solid); color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; }
.as-step:disabled { opacity: .4; cursor: default; }
.as-stepvalue { font-size: 18px; font-weight: 800; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.as-riserow { display: flex; align-items: center; gap: 14px; }
.as-bars { flex: 1; height: 42px; display: flex; align-items: flex-end; gap: 3px; }
.as-bars i { flex: 1; border-radius: 3px; background: var(--accent); transition: height .25s ease, background .1s; }
.as-bars i.off { background: var(--border); }
.as-play { flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.as-play svg { width: 18px; height: 18px; fill: currentColor; stroke-width: 24; }
.as-sounds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.as-sound { position: relative; min-width: 0; height: 74px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface-solid); color: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: inherit; cursor: pointer; transition: transform .1s; }
.as-sound span { font-size: 12px; font-weight: 800; color: var(--ink); max-width: 100%; white-space: normal; overflow-wrap: break-word; }
.as-sound svg { width: 24px; height: 24px; }
.as-sound.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.as-sound.on span { color: var(--on-accent); }
.as-sound.playing svg { fill: currentColor; }
.as-sound.playing::after { content: ''; position: absolute; inset: 6px; border-radius: 16px; border: 2px solid currentColor; animation: as-pulse 1.1s ease-out infinite; pointer-events: none; }
@keyframes as-pulse { from { opacity: .6; transform: scale(.7); } to { opacity: 0; transform: scale(1.25); } }
.as-stack { display: flex; flex-direction: column; gap: 10px; }
.as-inline { display: flex; flex-direction: column; gap: 7px; }
.as-switches { gap: 0; padding-top: 6px; padding-bottom: 6px; }
.as-switchrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; }
.as-switchrow + .as-switchrow { border-top: 1px solid var(--border); }
.as-switchicon { width: 30px; height: 30px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.as-switchicon svg { width: 16px; height: 16px; }
.as-switchlabel { flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); }
.as-browser { font-size: 12.5px; color: var(--ink-faint); text-align: center; }
.as-remove { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; border: 1px solid var(--border); background: none; color: var(--danger); font: inherit; font-size: 15px; font-weight: 700; padding: 13px; cursor: pointer; }
.as-remove svg { width: 16px; height: 16px; }
@media (max-width: 520px) {
  /* a phone: the editor is the screen, like the app's page sheet */
  .modal-backdrop:has(> .alarm-sheet) { padding: 0; align-items: stretch; }
  .modal.alarm-sheet { width: 100vw; max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .as-top { padding-top: max(14px, env(safe-area-inset-top)); }
  .as-scroll { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .aw-col { width: 70px; }
  .aw-item.on { font-size: 36px; }
  .as-sounds { grid-template-columns: repeat(3, 1fr); }
}
/* the repeat words are long: two to a row below 400, as on the phone */
@media (max-width: 400px) { .as-presets.as-repeat { grid-template-columns: 1fr 1fr; } }
.as-ringsin[hidden] { display: none; }

/* the ring: over everything, nothing else reachable */
body.alarm-ringing { overflow: hidden; }
.alarm-ring {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); box-sizing: border-box;
  background: #14130F; color: #F5F2EA; outline: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.alarm-top { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.alarm-top > svg { width: 26px; height: 26px; color: #F5B53C; }
.alarm-say { background: rgba(245,242,234,.12); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 700; margin-top: 2px; }
.alarm-say[hidden] { display: none; }
.alarm-clock { font-size: 56px; font-weight: 800; letter-spacing: -1.5px; line-height: 62px; }
.alarm-label { font-size: 20px; font-weight: 700; max-width: 100%; overflow-wrap: anywhere; }
.alarm-sub { font-size: 13px; color: rgba(245,242,234,.55); }
.alarm-middle { flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; width: 100%; max-width: 420px; margin: 0 auto; }
.alarm-dots { display: flex; gap: 8px; }
.alarm-dot { width: 10px; height: 10px; border-radius: 5px; border: 1.5px solid rgba(245,242,234,.55); }
.alarm-dot.done { background: #F5B53C; border-color: #F5B53C; }
.alarm-dot.now { border-color: #F5B53C; }
.alarm-task { font-size: 14px; font-weight: 700; color: rgba(245,242,234,.55); }
.alarm-mission { display: flex; flex-direction: column; gap: 14px; width: 100%; align-items: center; }
.alarm-prompt { font-size: 34px; font-weight: 800; letter-spacing: -.5px; text-align: center; min-height: 40px; }
.alarm-prompt.wrong, .alarm-sentence.wrong { color: #E0565B; }
.alarm-value { min-width: 24px; display: inline-block; }
.alarm-pad { display: grid; grid-template-columns: repeat(3, 86px); gap: 10px; justify-content: center; }
.alarm-key { height: 62px; border-radius: 16px; border: 0; background: rgba(245,242,234,.12); color: #F5F2EA; font-size: 26px; font-weight: 700; cursor: pointer; }
.alarm-key:active { opacity: .7; }
.alarm-key.go { background: #F5B53C; color: #14130F; }
.alarm-sentence { font-size: 20px; font-weight: 700; text-align: center; line-height: 28px; }
.alarm-input { width: 100%; box-sizing: border-box; color: #F5F2EA; font-size: 18px; border: 0; border-radius: 14px; background: rgba(245,242,234,.12); padding: 14px 16px; }
.alarm-input::placeholder { color: rgba(245,242,234,.55); }
.alarm-go, .alarm-ring .btn.alarm-go { background: #F5B53C; color: #14130F; border-color: #F5B53C; font-weight: 800; }
.alarm-grid { display: grid; grid-template-columns: repeat(3, 84px); gap: 9px; }
.alarm-tile { width: 84px; height: 84px; border-radius: 18px; border: 0; background: rgba(245,242,234,.12); cursor: pointer; transition: background .12s; }
.alarm-tile.lit { background: #F5B53C; }
.alarm-tile:active { opacity: .7; }
.alarm-again { font-size: 13px; font-weight: 700; color: #E0565B; min-height: 18px; text-align: center; }
.alarm-stop { display: inline-flex; align-items: center; gap: 10px; background: #F5B53C; color: #14130F; border: 0; border-radius: 999px; padding: 20px 40px; font-size: 22px; font-weight: 800; cursor: pointer; }
.alarm-stop svg { width: 26px; height: 26px; }
.alarm-unmute { color: #F5F2EA; border-color: rgba(245,242,234,.55); }
.alarm-bottom { display: flex; flex-direction: column; align-items: center; min-height: 44px; }
.alarm-snooze { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(245,242,234,.55); background: none; color: #F5F2EA; padding: 11px 18px; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.alarm-snooze svg { width: 16px; height: 16px; }
.alarm-ring svg { stroke: currentColor; fill: none; stroke-width: 36; }
@media (max-width: 360px) {
  .alarm-pad { grid-template-columns: repeat(3, 74px); }
  .alarm-key { height: 54px; font-size: 22px; }
  .alarm-grid { grid-template-columns: repeat(3, 72px); }
  .alarm-tile { width: 72px; height: 72px; }
  .alarm-clock { font-size: 44px; line-height: 50px; }
}
/* a short screen: the clock and the gaps give way so the keys and Snooze
   stay reachable (after the narrow rules, so a short narrow phone gets these) */
@media (max-height: 700px) {
  .alarm-ring { gap: 8px; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .alarm-clock { font-size: 36px; line-height: 40px; }
  .alarm-label { font-size: 17px; }
  .alarm-top { gap: 3px; }
  .alarm-middle, .alarm-mission { gap: 8px; }
  .alarm-key { height: 44px; font-size: 22px; }
  .alarm-say { padding: 4px 12px; font-size: 13px; margin-top: 0; }
  .alarm-pad { gap: 8px; }
  .alarm-prompt { font-size: 28px; min-height: 32px; }
  .alarm-bottom { min-height: 40px; }
  .alarm-tile { width: 68px; height: 68px; }
  .alarm-grid { grid-template-columns: repeat(3, 68px); }
}
/* Games moved to games.css (the hub and every solo game). */

/* ---- Hours & pay ---- */
/* The Work profile's own page (pages/hours.js): plain type, no colour of its
   own beyond the theme's accent, and every row fits a 320-wide screen. */
.hours-page { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
/* Under the floating rail, like every page with a title (the rail rule: padding-top 52px + the safe area). */
.screen-scroll > .inner.hours-page { padding-top: calc(52px + env(safe-area-inset-top)); }
.hours-head { display: flex; align-items: baseline; gap: 10px; }
.hours-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.6px; color: var(--ink); font-family: var(--font-display, inherit); }
.hours-quiet { font-size: 13.5px; line-height: 1.4; color: var(--ink-muted); }
.hours-small { font-size: 12.5px; color: var(--ink-muted); }
.hours-in {
  height: 56px; border: 0; border-radius: 16px; background: var(--accent); color: var(--bg);
  font-size: 16px; font-weight: 700; cursor: pointer; width: 100%;
}
.hours-in:disabled, .hours-out:disabled { opacity: 0.6; cursor: default; }
.hours-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
}
.hours-running { font-size: 40px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours-out {
  align-self: stretch; height: 48px; border-radius: 14px; border: 1.5px solid var(--ink); background: none;
  color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer;
}
.hours-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hours-tile { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.hours-tile-label { font-size: 11.5px; font-weight: 700; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.hours-tile-hours { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours-tile-pay { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: break-word; }
.hours-rate {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 0; background: none; cursor: pointer;
  border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  color: var(--ink); font-size: 15px; font-weight: 600; text-align: left;
}
.hours-rate-value { font-weight: 400; font-variant-numeric: tabular-nums; }
.hours-rate-set { color: var(--accent); }
.hours-chev { color: var(--ink-faint); font-size: 18px; line-height: 1; }
.hours-section { margin-top: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--ink-muted); }
.hours-list { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.hours-shift { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.hours-shift + .hours-shift { border-top: 1px solid var(--border); }
.hours-shift-day { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.hours-shift-nums { text-align: right; flex: 0 0 auto; }
.hours-shift-hours { font-size: 14.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours-trash {
  flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 16px; background: none;
  color: var(--ink-faint); font-size: 14px; cursor: pointer;
}
.hours-trash:hover { color: var(--danger); }
@media (max-width: 360px) { .hours-running { font-size: 34px; } .hours-tile { padding: 8px; } .hours-tile-hours { font-size: 16px; } }

/* ---- Admin ---- */
/* The owner's view of the whole platform (pages/admin.js), in Work. Since
   21 Oct 2026 it wears the arcade look (the buddy, candy fun cards, rounded
   heavy numbers that count) on the theme's own page; the chart's client
   colours are the same as lib/admin.ts PLATFORM_COLOR. */
.adm-page {
  --adm-ios: #2a78d6; --adm-android: #eb6834; --adm-web: #1baf7a; --adm-other: #55595f;
  --adm-up: #12805c; --adm-down: #c8364f; --adm-live: #1FC98F;
  position: relative; display: flex; flex-direction: column; gap: 10px;
}
[data-theme="dark"] .adm-page { --adm-ios: #3987e5; --adm-android: #d95926; --adm-web: #199e70; --adm-other: #b4b8bf; --adm-up: #4fd6a2; --adm-down: #ff7d93; }
.screen-scroll > .inner.adm-page { padding-top: calc(52px + env(safe-area-inset-top)); padding-bottom: 32px; max-width: 900px; margin: 0 auto; box-sizing: border-box; width: 100%; }
/* The head is where good news bursts from (confetti for a new join): it is always at the top of the page. */
.adm-head { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The burst's box: centred on the buddy's right edge (42px), wide enough for the confetti to spread. */
.adm-burst { position: absolute; left: -78px; top: 0; width: 240px; height: 100%; pointer-events: none; }
.adm-buddy { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.adm-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adm-title { margin: 0; font: 900 28px/1.1 var(--arc-font); letter-spacing: -0.4px; color: var(--ink); }
.adm-num { font-variant-numeric: tabular-nums; }
.adm-live {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 999px; background: var(--surface);
  color: var(--ink); font: 900 14px/1 var(--arc-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.adm-live:active { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px; }
.adm-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--adm-live); box-shadow: 0 0 0 0 var(--adm-live); animation: adm-pulse 2s ease-out infinite; }
.adm-live.busy .adm-live-dot { animation-duration: 0.7s; }
.adm-live.off .adm-live-dot { background: var(--ink-faint); animation: none; }
@keyframes adm-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 201, 143, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(31, 201, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 201, 143, 0); } }
.adm-dayline { min-height: calc(2 * 1.35em); }
.adm-chev { flex: 0 0 auto; display: inline-flex; color: var(--ink-faint); }
.adm-chev svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }
.adm-warn { color: var(--ink); }
.adm-quiet { font-size: 13.5px; line-height: 1.4; color: var(--ink-muted); }
.adm-small { font-size: 12.5px; line-height: 1.35; color: var(--ink-muted); min-width: 0; overflow-wrap: anywhere; }
.adm-ink { color: var(--ink); }
.adm-section { margin-top: 6px; font: 900 12px/1.2 var(--arc-font); letter-spacing: 1.1px; color: var(--ink-muted); }

/* The glance: eight numbers, four across, each its own key (a tap opens its tab). */
.adm-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
/* Activity's groups: three across, so a label of two words has room. */
.adm-glance.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-g {
  min-width: 0; min-height: 60px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  padding: 8px 9px; border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 14px;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.adm-g.still { cursor: default; }
button.adm-g:active { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px; }
.adm-g-top { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; row-gap: 1px; min-width: 0; }
.adm-g-num { font: 900 20px/1.1 var(--arc-font); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; color: var(--ink); overflow-wrap: anywhere; }
.adm-g.alarm .adm-g-num { color: var(--adm-down); }
.adm-g-delta { font: 900 11.5px/1.2 var(--arc-font); font-variant-numeric: tabular-nums; }
.adm-g-delta.up { color: var(--adm-up); }
.adm-g-delta.down { color: var(--adm-down); }
.adm-g-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--adm-live); animation: adm-pulse 2s ease-out infinite; }
.adm-g-dot.still { animation: none; }
.adm-g-label { font-size: 11.5px; line-height: 1.25; font-weight: 600; color: var(--ink-muted); overflow-wrap: anywhere; }

/* The fun cards: short candy stickers in a grid — the coin beside the number,
   the name and one line of what it is under them; two across on a phone,
   three where the column is wider. Every card whole, none off the edge. */
.adm-fun { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.adm-fun-card {
  min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 9px 11px 8px; border: 1px solid var(--edge); border-bottom: 4px solid var(--lip); border-radius: 16px;
  background: linear-gradient(var(--tint), var(--tint)), var(--surface); color: var(--ink); font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.adm-fun-card:active { transform: translateY(3px) scale(0.98); }
.adm-fun-top { display: flex; align-items: center; gap: 7px; min-width: 0; margin-bottom: 1px; }
.adm-fun-coin { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--glyph); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 var(--lip); }
.adm-fun-coin svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 36; }
.adm-fun-num { min-width: 0; font: 900 20px/1.1 var(--arc-font); font-variant-numeric: tabular-nums; letter-spacing: -0.4px; color: var(--ink); overflow-wrap: anywhere; }
.adm-fun-label { font: 900 13px/1.2 var(--arc-font); color: var(--ink); text-wrap: pretty; }
.adm-fun-sub { font-size: 11.5px; line-height: 1.3; color: var(--ink-muted); overflow-wrap: anywhere; text-wrap: pretty; }

/* The tabs: six keys, an icon over its word; the one open is inked. */
.adm-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; scroll-margin-top: 64px; }
.adm-tab {
  position: relative; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px; border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 14px; background: var(--surface);
  color: var(--ink-muted); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.adm-tab:active { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px; }
.adm-tab.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.adm-tab-icon { display: inline-flex; }
.adm-tab-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 36; }
.adm-tab-label { font: 800 11px/1.15 var(--arc-font); text-align: center; overflow-wrap: anywhere; }
.adm-badge { position: absolute; top: -5px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #c8364f; color: #FFFFFF; font: 900 11px/18px var(--arc-font); text-align: center; }
.adm-tab-body { display: flex; flex-direction: column; gap: 10px; }
/* A small phone: the numbers' keys tighter and their words smaller, never
   broken inside a word; the tabs in two rows of three, icon beside word. */
@media (max-width: 370px) {
  .adm-glance { gap: 5px; }
  .adm-g { padding: 7px 5px 7px 7px; }
  .adm-g-num { font-size: 17px; }
  .adm-g-label { font-size: 10px; overflow-wrap: normal; }
  .adm-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm-tab { flex-direction: row; min-height: 44px; gap: 6px; }
  .adm-tab-label { font-size: 12px; overflow-wrap: normal; }
  .adm-fun-card { padding: 8px 9px 7px; }
  .adm-fun-num { font-size: 18px; }
  .adm-fun-label { font-size: 12px; }
  .adm-fun-sub { font-size: 10.5px; }
}

.adm-big { font: 900 30px/1.15 var(--arc-font); letter-spacing: -0.5px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.adm-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 16px; background: var(--surface); }
.adm-card-title { font: 900 14.5px/1.25 var(--arc-font); color: var(--ink); }
.adm-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ink); }
.adm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.adm-swatch { width: 10px; height: 10px; border-radius: 3px; }
.adm-chart { display: flex; align-items: flex-end; gap: 3px; height: 96px; border-bottom: 1px solid var(--border); }
.adm-bar-slot {
  flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: stretch; padding: 0 1px; border: 0; background: none; cursor: pointer;
}
.adm-bar-slot.dim .adm-bar { opacity: 0.45; }
.adm-bar-slot:hover .adm-bar { opacity: 1; }
.adm-bar-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.adm-bar { display: flex; flex-direction: column; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; transform-origin: 50% 100%; }
/* A chart opened in its tab grows in, bar after bar, on the arcade spring. */
.adm-chart.grow .adm-bar { animation: adm-grow 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes adm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.adm-seg { min-height: 3px; }
.adm-ios { background: var(--adm-ios); }
.adm-android { background: var(--adm-android); }
.adm-web { background: var(--adm-web); }
.adm-other { background: var(--adm-other); }
.adm-msg { background: var(--ink); }
.adm-untracked { height: 2px; border-radius: 1px; background: var(--border); }
.adm-axis { display: flex; gap: 3px; }
.adm-axis span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 10px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.adm-axis span.on { color: var(--ink); font-weight: 700; }
.adm-list { border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 16px; background: var(--surface); overflow: hidden; }
.adm-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; background: none;
  font: inherit; text-align: left; color: var(--ink);
}
.adm-list > * + * { border-top: 1px solid var(--border); }
.adm-row.link { cursor: pointer; }
.adm-row.link .adm-row-value { color: var(--ink); font-weight: 600; }
.adm-row.link:hover { background: var(--hover, rgba(127, 127, 127, 0.08)); }
.adm-row-label { flex: 0 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.adm-row-value { flex: 1 1 0; min-width: auto; overflow-wrap: break-word; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
/* A count's dollars, on their own line under it (pages/admin.js costRow). */
.adm-row-sub { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink-muted); }
/* Memory, disk and load as a bar under their row (pages/admin.js meter). */
.adm-meter { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px; }
.adm-meter-head { display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.adm-meter-track { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.adm-meter-track i { display: block; height: 100%; border-radius: 4px; background: var(--adm-web); transition: width 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.adm-meter-track.warm i { background: #FF8A3D; }
.adm-meter-track.hot i { background: var(--adm-down); }
.adm-item { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* A report's answers (pages/admin.js reportItem): plain bordered buttons, 44px tall. */
.adm-mod-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.adm-mod-btn { min-height: 44px; min-width: 72px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.adm-mod-btn.danger { color: var(--danger); }
.adm-mod-btn:disabled { opacity: .5; cursor: default; }
.adm-item-title { font-size: 14.5px; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
/* A person: the name whole (it wraps), New beside it, when they were last seen at the end. */
.adm-person-head { display: flex; align-items: center; flex-wrap: wrap; column-gap: 7px; row-gap: 2px; }
.adm-person-head .adm-item-title { flex: 1 1 auto; }
.adm-person-head .adm-seen { flex: 0 0 auto; margin-left: auto; }
.adm-new { flex: 0 0 auto; padding: 2px 8px 1px; border-radius: 999px; background: #1FC98F; color: #2B2118; font: 900 11px/1.3 var(--arc-font); box-shadow: 0 2px 0 #168f66; }
@media (prefers-reduced-motion: reduce) { .adm-live-dot, .adm-g-dot { animation: none; } .adm-chart.grow .adm-bar { animation: none; } }

/* ---- an earlier start for a clock-in (org/clockStart.js): the key beside Clock in, and the wheel under it ---- */
.hours-in-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.hours-in-row > .hours-in { flex: 1; min-width: 0; width: auto; padding: 0 12px; line-height: 1.2; }
.clock-earlier {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--ink); border-radius: 14px; background: none; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.hours-in-row > .clock-earlier { border-radius: 16px; }
.clock-earlier.open { width: 48px; padding: 0; }
.hours-in-row > .clock-earlier.open { width: 56px; }
.clock-earlier:disabled { opacity: 0.45; cursor: default; }
.clock-earlier svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 40; }
.clock-start { display: flex; flex-direction: column; align-items: center; padding: 0 8px 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); min-width: 0; }
.clock-start > .aw-wheel { margin: 12px 0 4px; }
.clock-start-line { font-size: 13.5px; color: var(--ink-muted); text-align: center; font-variant-numeric: tabular-nums; }
.clock-start-line.bad { color: var(--danger); }

/* ---- Claude's browser (pages/cowork.js, 21 Oct 2026) ----
   The server's Chrome as a picture: a head (‹ Claude, the name), a bar
   (back, forward, reload, the address, tabs, more), a thin loading line,
   Claude's last step, and the picture filling the rest down to the box. */
.cw-page {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  /* No --bar-clear at the foot: .screen already ends at the bar (drive.css says the same of its floats). */
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  box-sizing: border-box; gap: 8px; max-width: 1600px; width: 100%; margin: 0 auto;
}
/* A computer's window gets the room a web page needs, as Mail and Messages widen (polish-comms.css, shell.css). */
@media (min-width: 720px) {
  body[data-page='cowork'] .app-shell { max-width: 1280px; }
}
.cw-head { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.cw-back {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface);
  padding: 7px 14px 7px 10px; min-height: 36px; box-sizing: border-box;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; border-radius: 18px;
}
.cw-back:hover { background: var(--accent-soft); }
.cw-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 36; }
.cw-title { flex: 1; min-width: 0; text-align: center; font-size: 17px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 360px) { .cw-title { font-size: 15px; } }
.cw-head-end { display: flex; justify-content: flex-end; min-width: 72px; }
.cw-keyboard {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 16px;
  padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
@media (pointer: fine) { .cw-keyboard { display: none; } }

.cw-bar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cw-nav { display: flex; align-items: center; gap: 4px; flex: none; }
/* .head-icon (shell.css) loads after this file: these win by being more specific, at a 40px target. */
.cw-bar .cw-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 20px; display: grid; place-items: center; padding: 0; }
.cw-bar .cw-icon svg { width: 20px; height: 20px; }
.cw-bar .cw-icon:disabled { opacity: 0.35; }
.cw-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border-radius: 20px; background: var(--surface-solid, var(--surface)); border: 1px solid var(--border);
}
.cw-field:focus-within { border-color: var(--accent); }
.cw-field-ico svg { width: 16px; height: 16px; stroke: var(--ink-faint); fill: none; stroke-width: 36; display: block; }
.cw-address {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink);
  font: inherit; font-size: 15px; padding: 0; height: 100%;
}
.cw-address::placeholder { color: var(--ink-faint); }
.cw-tabs-btn {
  flex: none; width: 40px; height: 40px; border-radius: 20px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
}
.cw-tabs-btn:hover { background: var(--accent-soft); }
.cw-tabs-n {
  min-width: 20px; height: 20px; padding: 0 3px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
}
/* At phone width the address keeps its room: Forward steps aside, Reload goes into ••• (cowork.js openMenu), no globe. */
@media (max-width: 520px) {
  .cw-page { padding-left: 8px; padding-right: 8px; }
  .cw-bar { gap: 2px; }
  .cw-nav .cw-icon:nth-child(2), .cw-bar .cw-reload, .cw-field-ico { display: none; }
  .cw-field { padding: 0 12px; }
}

.cw-progress { height: 2px; margin: -6px 4px 0; border-radius: 1px; background: transparent; overflow: hidden; position: relative; flex: none; }
.cw-progress.on::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 1px; background: var(--accent);
  animation: cw-load 1.1s ease-in-out infinite;
}
@keyframes cw-load { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .cw-progress.on::after { animation: none; width: 100%; opacity: 0.5; } }

/* Claude's last step, in the head where the title is (cowork.js paintClaude). */
.cw-title.claude { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--accent); font-size: 14.5px; }
.cw-claude-ico svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 36; display: block; }

.cw-area { flex: 1; min-height: 0; position: relative; display: flex; }
.cw-stage {
  flex: 1; min-width: 0; min-height: 0; position: relative; overflow: hidden; outline: none;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface));
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: default;
}
.cw-stage.typing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cw-img { display: block; width: 100%; height: auto; max-height: none; pointer-events: none; }
.cw-img:not([src]), .cw-stage.blank .cw-img { visibility: hidden; }
/* The keys' box: focusable and there, never seen. 16px so a phone does not zoom in on it. */
.cw-keys {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0;
  resize: none; overflow: hidden; font-size: 16px; color: transparent; background: transparent; caret-color: transparent;
  user-select: text; -webkit-user-select: text; /* Safari will not type into a box whose parent forbids selecting */
}
.cw-hint {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: min(86%, 380px);
  text-align: center; font-size: 15px; line-height: 1.4; color: var(--ink-muted); pointer-events: none;
}
.cw-hint[hidden] { display: none; }
.cw-cover {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background: var(--surface-solid, var(--surface));
}
.cw-cover[hidden] { display: none; }
.cw-cover-box { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 360px; text-align: center; }
.cw-cover-words { font-size: 15px; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
.cw-note { padding: 32px 16px; text-align: center; font-size: 15px; line-height: 1.4; color: var(--ink-muted); }

/* A page's own question (alert, confirm, prompt), over the picture. */
.cw-sheet { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 14px; }
.cw-sheet[hidden] { display: none; }
.cw-sheet-card {
  width: min(100%, 380px); box-sizing: border-box; padding: 18px; border-radius: 18px;
  background: var(--surface-solid, var(--surface)); border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; gap: 10px;
}
.cw-sheet-host { font-size: 13px; font-weight: 700; color: var(--ink-muted); overflow-wrap: anywhere; }
.cw-sheet-msg { font-size: 15px; line-height: 1.4; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.cw-sheet-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Tabs and the menu, in the app's panel. */
.cw-tabs, .cw-menu { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.cw-tabs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cw-tabs-head h2 { margin: 0; font-size: 19px; }
.cw-tabs-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.cw-tabs-head .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }
.cw-tab { display: flex; align-items: center; gap: 4px; padding-right: 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.cw-tab .head-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 20px; display: grid; place-items: center; padding: 0; flex: none; }
.cw-tab.on { border-color: var(--accent); }
.cw-tab-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer;
  padding: 10px 4px 10px 12px; text-align: left; font: inherit; color: var(--ink);
}
.cw-tab-ico svg { width: 18px; height: 18px; stroke: var(--ink-faint); fill: none; stroke-width: 36; display: block; }
.cw-tab-words { display: flex; flex-direction: column; min-width: 0; }
.cw-tab-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.cw-tab-host { font-size: 13px; color: var(--ink-muted); overflow-wrap: anywhere; }
.cw-menu-line { margin: 0 0 6px; font-size: 14px; color: var(--ink-muted); }
.cw-menu-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.cw-menu-row svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 36; flex: none; }
.cw-menu-row.danger { color: var(--danger); }
/* Study: files dragged onto a class page or the Add material sheet. A dashed
   plate over the whole surface saying what a drop will do; the page underneath
   stays visible through it. pointer-events: none so the drop still lands on the
   surface itself. */
.st-drop-on:not(.panel-card) { position: relative; }
.st-drop-on::after {
  content: attr(data-drop-label);
  position: absolute; inset: 8px; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--accent); border-radius: 18px;
  background: color-mix(in srgb, var(--accent-soft) 88%, transparent);
  color: var(--accent); font-weight: 600; font-size: 15px;
  pointer-events: none;
}
.st-drop-hint { text-align: center; margin-top: 8px; }