/* Alma on the web: the iPhone app's screens (ios/GenUI/Views) in HTML. Liquid-glass panels over a soft mesh, the
   system accent, and the system's green, orange and red only for the connection dot, a question and trouble. */
:root {
  --accent: #007aff; --on-accent: #fff; --green: #34c759; --orange: #ff9500; --red: #ff3b30; --teal: #30b0c7;
  --ground: #f2f2f7; --text: #000; --secondary: rgba(60, 60, 67, 0.6); --tertiary: rgba(60, 60, 67, 0.3);
  --fill: rgba(118, 118, 128, 0.12); --fill-2: rgba(118, 118, 128, 0.2);
  --glass: rgba(255, 255, 255, 0.62); --glass-edge: rgba(255, 255, 255, 0.7); --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  --surface-solid: #fff; --divider: rgba(60, 60, 67, 0.18);
  --mesh-1: rgba(88, 86, 214, 0.22); --mesh-2: rgba(48, 176, 199, 0.16); --mesh-3: rgba(175, 82, 222, 0.10);
  --tray-w: 340px; --column: 760px;
  /* The Android system sheet's surfaces (Material 3 baseline, light): the question over the phone looks like the phone's own (js/question.js). */
  --m3-surface: #f3edf7; --m3-surface-high: #ece6f0; --m3-field: #e6e0e9; --m3-on-surface: #1d1b20; --m3-on-surface-variant: #49454f;
  --m3-outline: #79747e; --m3-outline-variant: #cac4d0; --m3-primary: #6750a4; --m3-on-primary: #fff; --m3-scrim: rgba(0, 0, 0, 0.32);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #0a84ff; --ground: #000; --text: #fff; --secondary: rgba(235, 235, 245, 0.6); --tertiary: rgba(235, 235, 245, 0.3);
    --fill: rgba(118, 118, 128, 0.24); --fill-2: rgba(118, 118, 128, 0.32);
    --glass: rgba(44, 44, 48, 0.58); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    --surface-solid: #1c1c1e; --divider: rgba(84, 84, 88, 0.6);
    --mesh-1: rgba(94, 92, 230, 0.28); --mesh-2: rgba(64, 200, 224, 0.14); --mesh-3: rgba(191, 90, 242, 0.14);
    --m3-surface: #2b2930; --m3-surface-high: #36343b; --m3-field: #36343b; --m3-on-surface: #e6e0e9; --m3-on-surface-variant: #cac4d0;
    --m3-outline: #938f99; --m3-outline-variant: #49454f; --m3-primary: #d0bcff; --m3-on-primary: #381e72; --m3-scrim: rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --accent: #0a84ff; --ground: #000; --text: #fff; --secondary: rgba(235, 235, 245, 0.6); --tertiary: rgba(235, 235, 245, 0.3);
  --fill: rgba(118, 118, 128, 0.24); --fill-2: rgba(118, 118, 128, 0.32);
  --glass: rgba(44, 44, 48, 0.58); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  --surface-solid: #1c1c1e; --divider: rgba(84, 84, 88, 0.6);
  --mesh-1: rgba(94, 92, 230, 0.28); --mesh-2: rgba(64, 200, 224, 0.14); --mesh-3: rgba(191, 90, 242, 0.14);
  --m3-surface: #2b2930; --m3-surface-high: #36343b; --m3-field: #36343b; --m3-on-surface: #e6e0e9; --m3-on-surface-variant: #cac4d0;
  --m3-outline: #938f99; --m3-outline-variant: #49454f; --m3-primary: #d0bcff; --m3-on-primary: #381e72; --m3-scrim: rgba(0, 0, 0, 0.5);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
/* The installed app (2026-10-20): no rubber band and no pull-to-refresh on the app's own chrome (a sheet or the sign-in
   page still scrolls), no grey flash on a tap, and the bars not selected or called out by a long press. */
html, body { overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
.chan-head, .tray-head, .conv-head, .sheet-top, .install-hint, .composer .round, .composer .mic, .composer .send, .offer, .qbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body {
  background: var(--ground); color: var(--text);
  font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.4; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.icon { display: block; flex: none; }
.loading { text-align: center; margin-top: 40vh; color: var(--secondary); }

/* The page behind everything: the mesh of the home (HomeBackdrop), and the phone's own picture, blurred (AndroidBackdrop). */
.backdrop { position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(60% 45% at 0% 0%, var(--mesh-1), transparent 70%),
  radial-gradient(55% 40% at 100% 0%, var(--mesh-2), transparent 70%),
  radial-gradient(60% 45% at 50% 100%, var(--mesh-3), transparent 70%), var(--ground); }
.backdrop canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(60px) saturate(0.8); opacity: 0; transition: opacity 0.8s; transform: scale(1.2); }
.backdrop.has-picture canvas { opacity: 0.55; }   /* not .picture: the phone picture's own rule (container-type: size) folded it to no height */

.glass { background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.btn-glass { border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-radius: 999px; padding: 8px 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--glass-shadow); }
.btn-glass:not(:disabled):hover { background: color-mix(in srgb, var(--glass) 80%, var(--text) 6%); }
.btn-glass.small { padding: 6px 12px; font-size: 14px; }
.btn-prominent { border: none; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 8px 18px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-prominent:not(:disabled):hover { filter: brightness(1.08); }
.btn-prominent.danger-bg { background: var(--red); box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 35%, transparent); }
.circle { width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
.plain { background: none; border: none; padding: 0; }
.round { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; flex: none;
  background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--glass-shadow); }
.round:not(:disabled):hover { background-color: color-mix(in srgb, var(--glass) 80%, var(--text) 8%); }
.x { width: 28px; height: 28px; display: grid; place-items: center; border: none; background: none; color: var(--secondary); border-radius: 50%; flex: none; }
.x:hover { background: var(--fill); }
.grow { flex: 1; min-width: 0; text-align: left; }
.when { font-size: 12px; color: var(--secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fill-2); border-top-color: var(--secondary); animation: spin 0.8s linear infinite; flex: none; }
.spinner.mini { width: 12px; height: 12px; border-width: 1.5px; }   /* ProgressView's .mini */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } }
.text-btn { background: none; border: none; color: var(--accent); font-size: 15px; font-weight: 500; padding: 4px; }

/* The sign-in and pairing page (WelcomeView, HomeView setup) */
.page { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px;
  padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
@media (min-width: 600px) { .page { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } }
.header { display: flex; flex-direction: column; gap: 12px; }
.title-row { display: flex; align-items: center; justify-content: space-between; }
h1.title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: 0.01em; font-stretch: expanded; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); }
.dot.ready { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot.off { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.dot.bad { background: var(--red); box-shadow: 0 0 6px var(--red); }
.setup { align-items: stretch; text-align: center; gap: 28px; }
.setup .badge { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); margin: 24px auto 0; }
.setup h2 { margin: 0 0 10px; font-size: 28px; font-weight: 800; font-stretch: expanded; }
.setup p.lead { margin: 0; color: var(--secondary); }
.steps { border-radius: 28px; padding: 22px; display: flex; flex-direction: column; gap: 18px; text-align: left; }
.step { display: flex; gap: 14px; align-items: baseline; }
.step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--fill-2); display: grid; place-items: center; font-size: 15px; font-weight: 700; flex: none; transform: translateY(5px); }
.pair-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
/* Sign in with Apple (Apple's HIG, as WelcomeView): black on a light page, white on a dark one, the logo and title in the
   button's one other colour; at least 140 x 30; the title 43% of the height; the capsule the page's other buttons have. */
.apple-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.btn-apple { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 140px; height: 50px; padding: 0 20px;
  border: none; border-radius: 999px; background: #000; color: #fff; font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.btn-apple .icon { width: 20px; height: 20px; transform: translateY(-1px); }
.btn-apple:not(:disabled):hover { filter: brightness(1.15); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-apple { background: #fff; color: #000; } :root:not([data-theme="light"]) .btn-apple:not(:disabled):hover { filter: brightness(0.92); } }
:root[data-theme="dark"] .btn-apple { background: #fff; color: #000; }
:root[data-theme="dark"] .btn-apple:not(:disabled):hover { filter: brightness(0.92); }
/* Continue with Google (js/clerk.js): Google's own light button, a white capsule with a grey outline, the same size as Apple's. */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-width: 140px; height: 50px; padding: 0 20px;
  border: 1px solid #747775; border-radius: 999px; background: #fff; color: #1f1f1f; font-size: 19px; font-weight: 500; }
.btn-google .g { font-weight: 700; font-size: 20px; color: #4285f4; }
.btn-google:not(:disabled):hover { background: #f2f2f2; }
.btn-google:disabled, .btn-apple:disabled { opacity: 0.6; }
.or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--secondary); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
.field { width: 100%; border: none; border-radius: 14px; background: var(--fill); padding: 13px 14px; min-height: 48px; outline: none; }
.field:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.trouble { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--secondary); }
.trouble.warn { color: var(--text); font-weight: 500; }
.trouble.warn .icon { color: var(--orange); }
.fine { font-size: 12px; color: var(--secondary); }
.unavailable { text-align: center; color: var(--secondary); max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.unavailable .h { color: var(--text); font-weight: 700; font-size: 22px; }

/* ---- The channel page (2026-10-24; ChannelView, TrayView, AndroidPhoneView, Composer) ------------------------------------
   Its height is the visible viewport (100dvh: on Android Chrome and iOS Safari the part under the browser's bars, which
   100vh is not; --vvh from js/viewport.js where the keyboard does not shrink the page), so the composer is never under a
   bar or the keyboard. A wide window shows the tray as a column at the left; a phone slides it in as a drawer. */
.shell { position: fixed; inset: 0; height: 100%; height: 100dvh; height: var(--vvh, 100dvh); display: grid; grid-template-columns: 1fr; }

.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.28); z-index: 19; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.shell.tray-open .scrim { opacity: 1; pointer-events: auto; }
/* The tray (TrayView; Engine/TrayState.swift): 340 wide, or 82% of a narrower screen, a 0.5 px separator along its edge. */
.tray { display: flex; flex-direction: column; min-height: 0; background: var(--ground); border-right: 0.5px solid var(--divider); }
@media (max-width: 899px) {
  .tray { position: fixed; top: 0; bottom: 0; left: 0; width: min(82vw, 340px); z-index: 20; transform: translateX(-102%); transition: transform 0.25s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); padding-left: env(safe-area-inset-left); }
  .tray.open { transform: none; }
  /* As the iPhone's (ChannelShell): the tray is a material over the backdrop, and the page slides aside with it, its ≡
     still showing at the tray's edge to close it (2026-10-27). */
  .tray { background: color-mix(in srgb, var(--ground) 70%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); }
  .chan { transition: transform 0.25s ease; }
  .shell.tray-open .chan { transform: translateX(min(82vw, 340px)); }
}
@media (min-width: 900px) {
  .shell { grid-template-columns: var(--tray-w) 1fr; }
  .scrim, .chan-menu { display: none; }
  .tray { padding-left: env(safe-area-inset-left); }
}
/* The head: the name (title, bold, expanded) with the new-channel circle, and under them how the server and the phone are, as a glass
   capsule (a tap asks again). */
.tray-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 20px 8px; }
.tray-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.tray-title { margin: 0; font-size: 28px; font-weight: 700; font-stretch: expanded; }
.tray-actions { display: flex; gap: 6px; }
.tray-actions .round { width: 40px; height: 40px; }
.tray-conn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text); max-width: 100%; }
.tray-conn:hover { background: color-mix(in srgb, var(--glass) 80%, var(--text) 8%); }
.tray-conn > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The list (a plain List): the words 22 in from the edge, the current row's highlight 10 in, the groups' titles caption semibold. */
.tray-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 12px; }
.tray-group { margin-top: 10px; }
.tray-group .group-title { margin: 0 12px 4px; font-size: 12px; font-weight: 600; color: var(--secondary); text-transform: none; }
.tray-row { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 8px 12px; min-height: 44px; border-radius: 12px; border: none; background: none; text-align: left; }
.tray-row:hover { background: var(--fill); }
.tray-row.current { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tray-row .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; }
.tray-row.current .t { font-weight: 600; }
.tray-row .sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--secondary); white-space: nowrap; overflow: hidden; min-width: 0; }
.tray-row .sub > * { flex: none; }
.tray-row .sub .last { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tray-row .sub .ic { display: grid; color: var(--orange); }
.tray-note { padding: 14px 12px; color: var(--secondary); font-size: 13px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tray-note .spinner { align-self: center; }
/* The foot: a divider 20 in, Settings and Help as rows of the body size, and who is signed in with the server's name. */
.tray-foot { display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.tray-foot .divider { height: 0.5px; background: var(--divider); margin: 0 20px; }
.tray-foot .foot-row { display: flex; align-items: center; gap: 10px; padding: 11px 22px; border: none; background: none; text-align: left; font-size: 17px; width: 100%; color: var(--text); }
.tray-foot .foot-row:hover { background: var(--fill); }
.tray-foot .account { display: flex; align-items: center; gap: 10px; padding: 10px 22px 14px; }
.tray-foot .account .ic { display: grid; color: var(--secondary); flex: none; }
.tray-foot .account .name { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-foot .account .server { display: block; font-size: 12px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.group .glyph { width: 28px; height: 28px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; color: var(--secondary); flex: none; }


.chan { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); }
/* The bar floats over the page (ChannelTopBar: 44 px glass circles 16 in from the sides, 4 under the status bar, 10 apart): the stage has the
   whole height under it. The capsule between them is the channel's name, or Alma's state while it has the phone (2026-10-25: "Alma is using
   the phone" with a spinner, "Alma has a question" in amber). */
.chan-head { position: absolute; top: calc(4px + env(safe-area-inset-top)); left: 16px; right: calc(16px + env(safe-area-inset-right)); z-index: 8; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.chan-head > * { pointer-events: auto; }
.chan-head .chan-more { margin-left: auto; }
.chan-title { min-width: 0; margin: 0; height: 44px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.chan-title .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chan-title .spinner { display: none; }
.chan.working .chan-title .spinner { display: block; border-top-color: var(--accent); }
/* The words in the text's own colour, on a capsule solid enough to read over any picture (2026-10-27: blue words on the glass
   over the blue glow could not be read); the spinner, the glow and the asking glyph carry the colour. */
.chan-title.glass { background: color-mix(in srgb, var(--surface-solid) 84%, transparent); }
.chan[data-use="working"] .chan-title.state, .chan[data-use="asking"] .chan-title.state { color: var(--text); }
.chan[data-use="asking"] .chan-title.state .qmark { color: var(--orange); }
/* Asking, the capsule's glyph is the question's (AndroidControls); a brand-new channel has no capsule while the phone is the person's. */
.chan-title .qmark { display: none; }
.chan[data-use="asking"] .chan-title.state .qmark { display: grid; place-items: center; }
.chan-title.away { display: none; }
.chan > .install-hint { width: calc(100% - 32px); max-width: var(--column); margin: 52px auto 0; }
.chan-body { flex: 1; min-height: 0; position: relative; }
.stage-host { position: absolute; inset: 0; display: flex; flex-direction: column; animation: fade 0.25s ease; }
/* The stage (LiveStage): the picture as large as fits, 8 in from the sides, from under the status bar down to the composer. */
.stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 8px; position: relative; }
/* The foot (ChannelView's bottom inset): 4 under the stage, the composer 16 in from the sides and 6 up, a code's card or the failure notice 10
   above it; once the person takes the phone, the hand-back bar in the composer's place (2026-10-27). */
.chan-foot { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px calc(6px + env(safe-area-inset-bottom)); position: relative; width: 100%; max-width: calc(var(--column) + 32px); margin: 0 auto; }
.composer[hidden] { display: none; }


/* The stage: the phone's picture, as large as fits, the glow that breathes around it while Alma uses it, and what comes and goes over it. The
   picture's corners are 14 (AndroidPhoneView.corner), its shadow 18% black, 16 wide, 6 down. The picture is the person's by default: the
   cursor says so; while Alma works a click offers Take control. */
.picture { position: relative; border-radius: 14px; container-type: size; }
.screen { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 6px 32px rgba(0, 0, 0, 0.18); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.screen.yours { cursor: crosshair; }
.screen canvas, .screen img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.screen img { object-fit: fill; }
.screen.dim > * { opacity: 0.5; }
.notice { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 32px); padding: 12px; border-radius: 12px; font-size: 16px; text-align: center; opacity: 1 !important; }
.stage .unavailable { margin: 0 auto; }
/* The glow (WorkingRing, 2026-10-25: the owner's "clear indicator on the boundary like some form of glow"): a 4 px stroke 5 out from the picture
   with a wide halo outside and a soft bleed inside its edge, breathing every 2 s while Alma works (the accent) or waits for an answer (amber);
   nothing while the phone is the person's. */
.working-ring { --ring: var(--accent); position: absolute; inset: -5px; border-radius: 19px; border: 4px solid var(--ring); opacity: 0; pointer-events: none; transition: opacity 0.4s, border-color 0.5s, box-shadow 0.5s; }
.working-ring[data-tone="amber"] { --ring: var(--orange); }
.working-ring.on { opacity: 1; animation: ringbreathe 2s ease-in-out infinite;
  box-shadow: 0 0 28px 8px color-mix(in srgb, var(--ring) 85%, transparent), 0 0 80px 18px color-mix(in srgb, var(--ring) 50%, transparent), inset 0 0 22px 3px color-mix(in srgb, var(--ring) 45%, transparent); }
@keyframes ringbreathe {
  0%, 100% { opacity: 0.8; box-shadow: 0 0 20px 5px color-mix(in srgb, var(--ring) 70%, transparent), 0 0 56px 12px color-mix(in srgb, var(--ring) 35%, transparent), inset 0 0 14px 2px color-mix(in srgb, var(--ring) 30%, transparent); }
  50% { opacity: 1; box-shadow: 0 0 34px 10px color-mix(in srgb, var(--ring) 95%, transparent), 0 0 96px 22px color-mix(in srgb, var(--ring) 55%, transparent), inset 0 0 26px 4px color-mix(in srgb, var(--ring) 50%, transparent); }
}
/* The offer to take the phone (TakeControlPill): "Take control · Alma stops" as a capsule over the picture's middle, up for a few seconds; 32 lower
   while the question's sheet is up; on a narrow picture only the first two words. */
.offer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; border-radius: 999px; padding: 12px 18px; display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 15px; white-space: nowrap; animation: pop 0.2s ease; color: var(--text); transition: transform 0.3s; max-width: calc(100% - 24px); }
.offer .sub { color: var(--secondary); font-weight: 500; white-space: pre; margin-left: -4px; }
@container (max-width: 250px) { .offer .sub { display: none; } }
.picture.sheet-up .offer { transform: translate(-50%, calc(-50% + 32px)); }
.offer:hover { background: color-mix(in srgb, var(--glass) 80%, var(--text) 8%); }
.offer[hidden] { display: none; }
/* Over the picture's foot: the question's sheet, flush with the picture's sides and bottom, as a system sheet is. */
.stage-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: stretch; z-index: 4; pointer-events: none; }
.stage-foot > * { pointer-events: auto; }
/* Over the picture's top, 60 under its edge (under the floating bar) and 10 in from the sides: the question folded to its bar and the answered
   pill, clear of the hands and of Android's nav bar; the sheet itself rises from the foot. */
.stage-head { position: absolute; left: 0; right: 0; top: 60px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 10px; z-index: 4; pointer-events: none; }
.stage-head > * { pointer-events: auto; }
.stage-head .qbar, .stage-head .qpill { animation: drop 0.25s ease; }


/* Alma's question as an Android system sheet (QuestionSheet; js/question.js, 2026-10-25): a scrim over the whole picture (a tap folds the sheet),
   a surface in Material's colours following the phone's light or dark, 28 px top corners, a drag handle, the primary button in the phone's accent,
   the system font; at most two thirds of the picture's height (cqh: the picture is the container). Folded, a glass capsule along the picture's
   top; answered, a capsule for a moment. Inside it the page's tokens are Material's, so the document's fields and buttons follow. */
.qscrim { position: absolute; inset: 0; border-radius: 14px; background: var(--m3-scrim); z-index: 2; animation: fade 0.3s ease; cursor: pointer; }
.qscrim[hidden] { display: none; }
.qhost { display: flex; flex-direction: column; align-items: stretch; }
.qhost:empty { display: none; }
.qsheet { --accent: var(--m3-primary); --on-accent: var(--m3-on-primary); --text: var(--m3-on-surface); --secondary: var(--m3-on-surface-variant); --tertiary: var(--m3-outline);
  --fill: var(--m3-field); --fill-2: var(--m3-surface-high); --divider: var(--m3-outline-variant); --glass: var(--m3-surface-high); --glass-edge: var(--m3-outline-variant); --glass-shadow: none; --surface-solid: var(--m3-surface);
  --openui-background: var(--m3-surface); --openui-foreground: var(--m3-surface-high); --openui-popover-background: var(--m3-surface-high);
  --openui-text-neutral-primary: var(--m3-on-surface); --openui-text-neutral-secondary: var(--m3-on-surface-variant); --openui-text-neutral-link: var(--m3-primary);
  --openui-border-default: var(--m3-outline-variant); --openui-interactive-accent-default: var(--m3-primary); --openui-interactive-accent-hover: var(--m3-primary); --openui-interactive-accent-pressed: var(--m3-primary);
  display: flex; flex-direction: column; border-radius: 28px 28px 14px 14px; overflow: hidden; max-height: 60vh; max-height: 66cqh;
  background: var(--m3-surface); color: var(--m3-on-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  font-family: Roboto, "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.qsheet.rise { animation: sheetrise 0.4s cubic-bezier(0.05, 0.7, 0.1, 1); }
@keyframes sheetrise { from { transform: translateY(40%); opacity: 0; } }
.qsheet[hidden], .qbar[hidden] { display: none; }
.qhandle { width: 32px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--m3-outline) 40%, transparent); margin: 12px auto 0; flex: none; }
.qhead { display: flex; align-items: center; gap: 10px; padding: 10px 10px 4px 20px; flex: none; }
.qicon { color: var(--m3-primary); display: grid; place-items: center; }
.qtitle { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; color: var(--m3-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em; }   /* one line even on a narrow picture */
.qfold { width: 36px; height: 36px; border-radius: 50%; border: none; background: none; display: grid; place-items: center; color: var(--m3-on-surface-variant); flex: none; }
.qfold:hover { background: color-mix(in srgb, var(--m3-on-surface) 8%, transparent); }
.qbody { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; scrollbar-gutter: stable; outline: none; }
.qsheet.scrolls:not(.at-end) .qbody { -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent); mask-image: linear-gradient(#000 calc(100% - 32px), transparent); }
.qwords { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.qhint { margin: 0; color: var(--m3-on-surface-variant); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.qactions { margin-top: 4px; }
.qactions .btn-glass { background: none; border: 1px solid var(--m3-outline); color: var(--m3-primary); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.qactions .btn-glass:not(:disabled):hover { background: color-mix(in srgb, var(--m3-primary) 8%, transparent); }
.qactions .btn-prominent { box-shadow: none; }
.qbar { border-radius: 999px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; justify-content: center; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; color: var(--text); animation: rise 0.25s ease; }
.qbar .qicon { color: var(--orange); }
.qbar .chev { color: var(--secondary); display: grid; }
.qbar:hover { background: color-mix(in srgb, var(--glass) 80%, var(--text) 8%); }
.qpill { border-radius: 999px; padding: 10px 16px; display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--text); animation: rise 0.3s ease; }
.qpill .ic { display: grid; color: var(--green); }
.qpill .words { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }   /* two lines at most */
/* The sheet's document: Material's sizes (body large 16, the fields 12 round in the field colour, the buttons 20 round). */
.qbody .doc { font-size: 16px; line-height: 1.5; }
.qbody .doc > p:first-child { margin-top: 0; }
.qsheet .openui.openui .openui-button-base { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; min-height: 40px; border-radius: 20px; }
.qsheet .openui.openui .openui-button-base-primary { box-shadow: none; }
.qsheet .openui.openui .openui-button-base-secondary { background: none; border: 1px solid var(--m3-outline); color: var(--m3-primary); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.qsheet .openui.openui .openui-input, .qsheet .openui.openui .openui-textarea, .qsheet .openui.openui .openui-select-trigger { font-size: 16px; border-radius: 4px 4px 0 0; border-bottom: 1px solid var(--m3-on-surface-variant); background: var(--m3-field); }
.qsheet .openui.openui .openui-option-card, .qsheet .openui.openui .openui-chip-item { background: var(--m3-surface-high); border-radius: 12px; }
.qsheet .openui.openui .openui-chip-item { border-radius: 8px; border: 1px solid var(--m3-outline-variant); }
.qsheet .openui.openui .openui-option-card--selected { background: color-mix(in srgb, var(--m3-primary) 14%, var(--m3-surface)); border-color: var(--m3-primary); }
.qsheet .openui.openui .openui-chip-item--selected { background: color-mix(in srgb, var(--m3-primary) 18%, var(--m3-surface)); color: var(--m3-on-surface); border-color: transparent; }
.qsheet .openui.openui .openui-follow-up-item { background: none; border: 1px solid var(--m3-outline); box-shadow: none; }
.qsheet .openui.openui .openui-follow-up-item::before { background: var(--m3-primary); }


/* Over the stage's top, 56 under the bar and 24 in from the sides (FinishPill): the pill a shortcut ends on (js/finish.js), and a shortcut's
   current step; callout text, a 22 px glyph, 26 round (22 opened out). */
.finish-host { position: absolute; top: 56px; left: 24px; right: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 6; pointer-events: none; }
.finish-host > * { pointer-events: auto; }
.finish { max-width: 100%; width: max-content; border-radius: 26px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; animation: drop 0.3s ease; }
.finish .ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); flex: none; }
.finish.answer .ic { color: var(--text); }
.finish.failed .ic { color: var(--orange); }
.finish.question .ic { color: var(--orange); }   /* another channel's question (FinishNotice): its pill opens that channel */
.finish .msg { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finish.expanded { border-radius: 22px; padding: 12px 14px; align-items: flex-start; cursor: default; }
.finish.expanded .msg { white-space: normal; max-height: 50vh; overflow: auto; }
/* A run's pill opens the Conversation page (2026-10-25); a failed one carries Try again. */
.finish .again { min-height: 30px; padding: 4px 12px; font-size: 14px; flex: none; color: var(--text); }
.finish.opens:hover { background: color-mix(in srgb, var(--glass) 80%, var(--text) 6%); }
.status { max-width: 100%; border-radius: 26px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 16px; animation: drop 0.3s ease; }
.status .req { font-weight: 600; flex: none; }
.status .msg { min-width: 0; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* The Conversation page (ConversationPage; js/conversation.js, 2026-10-25): the whole chat over the channel's column (the tray stays beside it on
   a wide window), under a floating bar of its own: Back, the channel's name as a capsule. The transcript's column (TranscriptView): 16 in from
   the sides, its first lines 56 under the bar (the content margin) and 6 more, the turns 20 apart; no wider than --column on a wide window. */
.conversation { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; min-height: 0; animation: fade 0.2s ease;
  background: color-mix(in srgb, var(--ground) 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.conv-head { position: absolute; top: calc(4px + env(safe-area-inset-top)); left: 16px; right: calc(16px + env(safe-area-inset-right)); z-index: 2; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.conv-head > * { pointer-events: auto; }
.conv-title { flex: 1; min-width: 0; margin: 0; height: 44px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.conv-spacer { width: 44px; flex: none; }
.conversation .scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(56px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); scroll-padding-bottom: 20px; }
.transcript { max-width: var(--column); margin: 0 auto; padding-top: 6px; display: flex; flex-direction: column; gap: 20px; }
.chan.loading .conversation .scroll { opacity: 0.5; }
/* The transcript (TurnViews): the person's words trailing in the accent's tint, Alma's work leading; a turn's parts 10 apart. */
.turn { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; }
.row.me { justify-content: flex-end; }
.row.alma { flex-direction: column; align-items: flex-start; gap: 12px; }
.bubble.me { max-width: calc(100% - 56px); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); border-radius: 20px; padding: 9px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Words that steered a run going (SteerBubble): a smaller bubble, ↳ before it. */
.row.steer { align-items: center; gap: 6px; }
.row.steer .turn-ic { display: grid; color: var(--secondary); flex: none; }
.row.steer .bubble.me { font-size: 15px; max-width: calc(100% - 72px); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 16px; padding: 7px 12px; }
/* A question Alma asked while the run went (AskedLine), over the answer it got: one quiet line, leading. */
.asked { display: flex; gap: 8px; align-items: flex-start; color: var(--secondary); font-size: 15px; padding-left: 4px; max-width: calc(100% - 40px); align-self: flex-start; }
.asked .ic { display: grid; color: var(--orange); flex: none; margin-top: 2px; }
.empty { color: var(--secondary); display: flex; gap: 8px; align-items: center; justify-content: center; padding: 40px 0; }
/* The replay card (ReplayCard; js/replay.js): 210 wide at the phone's proportions, 18 round, the screen at the end with a 56 px play circle over
   it, Replay and its length as caption capsules, Full Screen a 32 px circle at the top right, all 8 in; playing, how far it is along the bottom. */
.card.replay { position: relative; width: 210px; max-width: 100%; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16); flex: none; cursor: pointer; }
.card.replay .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card.replay .poster.blank { background: linear-gradient(#2a2a2e, #0c0c0e); }
.card-top { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.card-top > * { pointer-events: auto; }
.card-foot { position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 3; display: flex; pointer-events: none; }
.card .pill { border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.card .expand { width: 32px; height: 32px; border-radius: 50%; padding: 0; display: grid; place-items: center; color: var(--text); }
.card .expand:not(:disabled):hover, .card .play:not(:disabled):hover { background: color-mix(in srgb, var(--glass) 80%, var(--text) 8%); }
.card .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; padding: 0; display: grid; place-items: center; color: var(--text); z-index: 3; transition: opacity 0.25s; }
.card .play .icon { margin-left: 2px; }
.card.active .play:not(:focus-visible) { opacity: 0; pointer-events: none; }   /* playing: the picture alone; a tap on it pauses */
.card.replay .working-ring { inset: 0; border-radius: 18px; }
.card.replay.cant-play { cursor: default; }   /* the video could not be loaded: the poster again, "Can't play" in its pill */
.card.cant-play .replay-video, .card.cant-play .play { display: none; }
.card .replay-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; z-index: 2; display: block; }
.card .progress { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 0 6px 2px; color: #fff; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)); }
.card .progress .bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.card .progress .bar i { display: block; height: 100%; min-width: 4px; width: 0; border-radius: 999px; background: #fff; }
.card .progress .time { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* The replay the size of the window (ReplayFullScreen): black, the video fitted with 18 px corners, 16 in and 56 under the top; its play and pause
   (44), a scrubber and the time (caption), and the steps as chapters (footnote, glass capsules; the current one in the accent) along the bottom. */
.replay-full { position: fixed; inset: 0; background: #000; color: #fff; z-index: 30; display: flex; flex-direction: column; animation: fade 0.2s; }
.replay-full .fs-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: calc(56px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.replay-full .fs-stage { flex: 1; min-height: 0; display: grid; place-items: center; cursor: pointer; }
.replay-full .fs-stage video { display: block; border-radius: 18px; background: #000; }
.replay-full .fs-controls { display: flex; flex-direction: column; gap: 10px; flex: none; }
.replay-full .fs-row { display: flex; align-items: center; gap: 14px; }
.replay-full .round { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: none; }
.replay-full .round:not(:disabled):hover { background: rgba(255, 255, 255, 0.22); }
.replay-full .fs-close { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 16px; width: 40px; height: 40px; }
.replay-full .fs-slider { flex: 1; min-width: 0; margin: 0; accent-color: #fff; }
.replay-full .fs-time { font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.chapters { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px; max-width: 100%; scrollbar-width: none; }
.chapters::-webkit-scrollbar { display: none; }
.chapter { flex: none; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.14); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.chapter.current { background: var(--accent); border-color: transparent; }
/* The answer (AnswerView): a document (or the sentence) at the page's width, no box around it; its links (LinkRow) and pictures 12 under it. */
.answer { width: 100%; max-width: 100%; }
.answer-words { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; line-height: 1.5; }
.answer-words a, .doc a { color: var(--accent); }
.linkcards { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.linkcard { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--fill); color: inherit; text-decoration: none; max-width: 520px; }
.linkcard:hover { background: var(--fill-2); }
.linkcard .ic { display: grid; place-items: center; width: 20px; color: var(--accent); flex: none; }
.linkcard .arrow { display: grid; color: var(--tertiary); flex: none; }
.linkcard .t { display: block; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkcard .host { display: block; font-size: 12px; color: var(--secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.thumb { border: none; padding: 0; background: #000; border-radius: 10px; overflow: hidden; width: 72px; height: 128px; cursor: zoom-in; outline: 0.5px solid var(--divider); outline-offset: -0.5px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A question the run ended on (QuestionBubble): the glyph beside the words, its form still answering (a new turn), Cancel / Go Ahead large. */
.ask { border-radius: 22px; padding: 14px; width: 100%; max-width: calc(100% - 40px); display: flex; flex-direction: column; gap: 12px; }
.ask-row { display: flex; gap: 10px; align-items: flex-start; }
.ask-row .ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); flex: none; }
.ask-row > .doc, .ask-row > .ask-words { flex: 1; min-width: 0; }
.ask-words { margin: 0; font-size: 17px; }
.ask-hint { margin: 0; font-size: 12px; color: var(--secondary); }
.actions { display: flex; gap: 10px; margin-top: 12px; }
.actions > * { flex: 1; justify-content: center; min-height: 44px; }
.ask .actions { margin-top: 0; }
.ask .actions > * { min-height: 50px; }
/* A run that could not finish (ErrorBubble): the words beside the glyph, in glass with an amber edge, Try Again small under them. */
.trouble-bubble { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 22px; max-width: calc(100% - 40px); color: var(--secondary); border-color: color-mix(in srgb, var(--orange) 50%, var(--glass-edge)); }
.trouble-row { display: flex; gap: 10px; align-items: flex-start; }
.trouble-row .ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--secondary); flex: none; }
.trouble-row .words { flex: 1; min-width: 0; }
.trouble-bubble .btn-glass.small { min-height: 28px; padding: 4px 12px; font-size: 15px; color: var(--text); }


/* The document (MarkdownBlocksView; js/answer.js): Markdown as prose, the blocks 10 apart, and the OpenUI blocks. */
.doc { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.doc > :first-child { margin-top: 0; }
.doc > :last-child { margin-bottom: 0; }
.doc p { margin: 0 0 10px; }
/* Headings: title2 bold, title3 bold, headline, then subheadline semibold; 6 more above the first two, 2 above the rest. */
.doc .md-h { margin: 16px 0 10px; font-weight: 700; line-height: 1.25; }
.doc .md-h1 { font-size: 22px; } .doc .md-h2 { font-size: 20px; }
.doc .md-h3 { font-size: 17px; font-weight: 600; margin-top: 12px; } .doc .md-h4, .doc .md-h5, .doc .md-h6 { font-size: 15px; font-weight: 600; margin-top: 12px; }
.doc ul, .doc ol { margin: 0 0 10px; padding-left: 26px; }
.doc li { margin: 0; }
.doc li + li { margin-top: 6px; }
.doc li > ul, .doc li > ol { margin: 6px 0 0; }
.doc pre { background: var(--fill); border-radius: 12px; padding: 12px; overflow-x: auto; font-size: 13px; margin: 0 0 10px; }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.doc pre code { font-size: 13px; }
.doc :not(pre) > code { background: var(--fill); border-radius: 6px; padding: 1px 6px; }
.doc blockquote { margin: 0 0 10px 2px; padding: 0 0 0 12px; border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 1.5px 0 0 1.5px; }
.doc blockquote p { margin-bottom: 8px; }
.doc hr { border: none; border-top: 0.5px solid var(--divider); margin: 2px 0 12px; }
.md-table { overflow-x: auto; margin: 0 0 10px; padding: 2px 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td { padding: 4px 7px; border-bottom: 1px solid color-mix(in srgb, var(--divider) 50%, transparent); vertical-align: top; }
.doc th { font-weight: 600; border-bottom-color: var(--divider); }
.doc tr:last-child td { border-bottom: none; }
.md-figure { margin: 0 0 10px; }
.md-figure img { max-width: 100%; max-height: 320px; border-radius: 14px; outline: 0.5px solid var(--divider); outline-offset: -0.5px; display: block; cursor: zoom-in; }
.md-figure figcaption { font-size: 13px; color: var(--secondary); margin-top: 4px; }
.md-inline-img { max-height: 1.4em; vertical-align: middle; }
.md-missing { color: var(--secondary); font-style: italic; }
.openui { margin: 0 0 10px; min-height: 24px; }
.openui.loading { min-height: 72px; border-radius: 16px; background: linear-gradient(90deg, var(--fill) 25%, var(--fill-2) 50%, var(--fill) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.openui.failed { color: var(--secondary); }
/* OpenUI's own tokens (vendor/openui/openui-styles.css) in the page's colours; html:root outranks its :root rules. */
html:root {
  --openui-background: var(--ground); --openui-foreground: var(--surface-solid); --openui-popover-background: var(--surface-solid);
  --openui-text-neutral-primary: var(--text); --openui-text-neutral-secondary: var(--secondary); --openui-text-neutral-link: var(--accent);
  --openui-border-default: var(--divider);
  --openui-interactive-accent-default: var(--accent); --openui-interactive-accent-hover: color-mix(in srgb, var(--accent) 85%, var(--text)); --openui-interactive-accent-pressed: var(--accent);
  --openui-interactive-accent-disabled: color-mix(in srgb, var(--accent) 40%, transparent);
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) { --openui-background: var(--ground); --openui-foreground: var(--surface-solid); --openui-popover-background: var(--surface-solid);
    --openui-text-neutral-primary: var(--text); --openui-text-neutral-secondary: var(--secondary); --openui-text-neutral-link: var(--accent); --openui-border-default: var(--divider);
    --openui-interactive-accent-default: var(--accent); --openui-interactive-accent-pressed: var(--accent); }
}
html:root[data-theme="dark"] { --openui-background: var(--ground); --openui-foreground: var(--surface-solid); --openui-popover-background: var(--surface-solid);
  --openui-text-neutral-primary: var(--text); --openui-text-neutral-secondary: var(--secondary); --openui-text-neutral-link: var(--accent); --openui-border-default: var(--divider);
  --openui-interactive-accent-default: var(--accent); --openui-interactive-accent-pressed: var(--accent); }
.openui { font-family: inherit; }
/* OpenUI's own components (vendor/openui/openui-styles.css) at the iPhone's sizes (Views/OpenUIForms.swift, AnswerView.swift): the mount's class
   before the bundle's outranks its single classes. Buttons: the primary one prominent, the others glass, a tertiary one borderless; semibold. */
.openui.openui .openui-button-base { height: auto; min-height: 36px; width: auto; justify-content: center; padding: 6px 16px; border-radius: 999px; font-size: 17px; font-weight: 600; font-variation-settings: normal; line-height: 1.3; letter-spacing: normal; }
.openui.openui .openui-button-base-medium { padding: 6px 16px; border-radius: 999px; }   /* 36 tall with the glass edge, as .regular */
.openui.openui .openui-button-base-small, .openui.openui .openui-button-base-extra-small { min-height: 28px; padding: 3px 12px; border-radius: 999px; font-size: 15px; letter-spacing: normal; }
.openui.openui .openui-button-base-large { min-height: 50px; padding: 12px 20px; }
.openui.openui .openui-button-base-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.openui.openui .openui-button-base-secondary { background: var(--glass); color: var(--text); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.openui.openui .openui-button-base-tertiary { background: none; color: var(--accent); border-color: transparent; box-shadow: none; }
.openui.openui .openui-button-base-destructive-primary { background: var(--red); color: #fff; border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 35%, transparent); }
.openui.openui .openui-button-base-destructive-secondary, .openui.openui .openui-button-base-destructive-tertiary { color: var(--red); }
.openui.openui .openui-buttons { gap: 8px; flex-wrap: wrap; width: auto; margin-top: 2px; }
/* A form's control: its name subheadline semibold 6 above the field, a hint caption; the fields body text 10 × 12 in, 12 round, in the tertiary fill,
   a red edge when wrong. */
.openui.openui .openui-form-control { gap: 6px; }
.openui.openui .openui-label { font-size: 15px; font-weight: 600; font-variation-settings: normal; line-height: 1.3; letter-spacing: normal; }
.openui.openui .openui-hint { font-size: 12px; line-height: 1.3; letter-spacing: normal; }
.openui.openui .openui-input, .openui.openui .openui-textarea, .openui.openui .openui-select-trigger { font-size: 17px; line-height: 1.35; font-weight: 400; font-variation-settings: normal; letter-spacing: normal; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: var(--fill); color: var(--text); }
.openui.openui .openui-input-error, .openui.openui .openui-textarea-error { border-color: color-mix(in srgb, var(--red) 60%, transparent); box-shadow: none; }
.openui.openui .openui-select-trigger-icon { color: var(--secondary); }
/* Chips: subheadline capsules 8 × 14 in, 8 apart; a chosen one in the tint, white, semibold. Option cards: 14 in, 16 round, body semibold over subheadline;
   a chosen one tinted with a 1.5 px edge. Checks and radios: 22 px marks beside body words and caption descriptions, the rows 6 up and down. */
.openui.openui .openui-chips { gap: 8px; }
.openui.openui .openui-chip-item { padding: 8px 14px; border: none; border-radius: 999px; background: var(--fill); color: var(--text); font-size: 15px; font-weight: 400; font-variation-settings: normal; line-height: 1.3; }
.openui.openui .openui-chip-item--selected { background: var(--accent); color: #fff; font-weight: 600; font-variation-settings: normal; }
.openui.openui .openui-option-cards__grid, .openui.openui .openui-option-cards__row { gap: 8px; }
.openui.openui .openui-option-card { padding: 14px; border: 1.5px solid transparent; border-radius: 16px; background: var(--fill); }
.openui.openui .openui-option-card--selected { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.openui.openui .openui-option-card__title { font-size: 17px; font-weight: 600; font-variation-settings: normal; line-height: 1.3; letter-spacing: normal; }
.openui.openui .openui-option-card__subtitle { font-size: 15px; font-weight: 400; font-variation-settings: normal; line-height: 1.35; letter-spacing: normal; margin-top: 3px; }
.openui.openui .openui-checkbox-group, .openui.openui .openui-radio-group { gap: 4px; border: none; }
.openui.openui .openui-checkbox-item-container, .openui.openui .openui-radio-item-container { gap: 12px; padding: 6px 0; align-items: flex-start; }
.openui.openui .openui-checkbox-item-root, .openui.openui .openui-radio-item-root { width: 22px; height: 22px; margin-top: 1px; border-width: 1.5px; }
.openui.openui .openui-checkbox-item-root { border-radius: 6px; }
.openui.openui .openui-checkbox-item-label, .openui.openui .openui-radio-item-label { font-size: 17px; line-height: 1.3; letter-spacing: normal; }
.openui.openui .openui-checkbox-item-description { font-size: 12px; line-height: 1.3; letter-spacing: normal; margin-top: 2px; }
.openui.openui .openui-slider-block__label { font-size: 15px; font-weight: 400; font-variation-settings: normal; color: var(--secondary); letter-spacing: normal; }
.openui.openui .openui-slider-thumb-value { font-size: 15px; font-weight: 600; font-variation-settings: normal; font-variant-numeric: tabular-nums; letter-spacing: normal; }
/* Tables, entity lists, lists and steps: subheadline cells 4 × 7 in with half-strength dividers; rows 8 (small 6) up and down; list items 9 (6) with a
   26 px ordinal or a 44 (36) px picture 10 round; steps 10 apart with the same ordinal. */
.openui.openui .openui-table-container { border: none; border-radius: 0; margin-bottom: 0; }
.openui.openui .openui-table-head { padding: 4px 7px; font-size: 15px; font-weight: 600; font-variation-settings: normal; letter-spacing: normal; }
.openui.openui .openui-table-cell { padding: 4px 7px; font-size: 15px; white-space: normal; letter-spacing: normal; }
.openui.openui .openui-table-row { border-bottom: 1px solid color-mix(in srgb, var(--divider) 50%, transparent); }
.openui.openui .openui-table-row:nth-child(even) { background: none; }   /* no stripes: the iPhone's Grid has dividers only */
.openui.openui .openui-table-head-label { font-size: 15px; font-weight: 600; font-variation-settings: normal; color: var(--text); letter-spacing: normal; }
.openui.openui .openui-entity-list__row { padding: 8px 0; gap: 12px; border-bottom: 1px solid color-mix(in srgb, var(--divider) 60%, transparent); align-items: baseline; }
.openui.openui .openui-entity-list--small .openui-entity-list__row { padding: 6px 0; }
.openui.openui .openui-entity-list__cell-left, .openui.openui .openui-entity-list__cell-right { font-size: 15px; line-height: 1.35; letter-spacing: normal; }
.openui.openui .openui-entity-list--small .openui-entity-list__cell-left, .openui.openui .openui-entity-list--small .openui-entity-list__cell-right { font-size: 13px; }
.openui.openui .openui-entity-list__cell-left { color: var(--secondary); }
.openui.openui .openui-entity-list__cell-right { font-weight: 400; font-variation-settings: normal; color: var(--text); }
.openui.openui .openui-entity-list__row--header .openui-entity-list__cell-left, .openui.openui .openui-entity-list__row--header .openui-entity-list__cell-right { font-weight: 600; font-variation-settings: normal; color: var(--text); }
.openui.openui .openui-list-item-wrapper { gap: 0; }
.openui.openui .openui-list-item { gap: 12px; padding: 9px 0; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--divider) 60%, transparent); }
.openui.openui .openui-list-item-wrapper--small .openui-list-item { padding: 6px 0; }
.openui.openui .openui-list-item:last-child { border-bottom: none; }
.openui.openui .openui-list-item-indicator { width: 26px; height: 26px; margin-top: 0; scale: 1; border-radius: 50%; background: var(--fill); color: var(--secondary); }
.openui.openui .openui-list-item-indicator-number { font-size: 13px; font-weight: 600; font-variation-settings: normal; font-variant-numeric: tabular-nums; letter-spacing: normal; line-height: 1; }
.openui.openui .openui-list-item-indicator:has(.openui-list-item-indicator-image) { width: 44px; height: 44px; border-radius: 10px; }
.openui.openui .openui-list-item-wrapper--small .openui-list-item-indicator:has(.openui-list-item-indicator-image) { width: 36px; height: 36px; }
.openui.openui .openui-list-item-indicator-image { border-radius: 10px; }
.openui.openui .openui-list-item-title { font-size: 17px; font-weight: 500; font-variation-settings: normal; line-height: 1.3; letter-spacing: normal; }
.openui.openui .openui-list-item-subtitle { font-size: 15px; line-height: 1.35; letter-spacing: normal; margin-top: 2px; }
.openui.openui .openui-list-item-wrapper--small .openui-list-item-title { font-size: 15px; }
.openui.openui .openui-list-item-wrapper--small .openui-list-item-subtitle { font-size: 13px; }
.openui.openui .openui-list-item-action-label { font-size: 13px; font-weight: 600; font-variation-settings: normal; color: var(--accent); letter-spacing: normal; }
.openui.openui .openui-steps { gap: 10px; }
.openui.openui .openui-step-item { gap: 12px; }
.openui.openui .openui-step-number { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--fill); color: var(--secondary); font-size: 13px; font-weight: 600; font-variation-settings: normal; font-variant-numeric: tabular-nums; }
.openui.openui .openui-step-title { font-size: 17px; font-weight: 500; font-variation-settings: normal; color: var(--text); line-height: 1.3; letter-spacing: normal; }
.openui.openui .openui-step-details { font-size: 15px; color: var(--secondary); line-height: 1.35; letter-spacing: normal; margin-top: 2px; }
/* Callouts: 12 in, 14 round, the tint at 12% (neutral 8%), subheadline; tags: caption medium capsules 5 × 10 in, the tint at 14%; follow-ups:
   subheadline glass capsules 8 apart with ↗ in the tint, drawn here (the bundle draws no icon, and its "Related Queries" heading, which
   sat in the row with the chips, is hidden: the chips say what they are, as the iPhone's do). */
.openui.openui .openui-callout { padding: 12px; border-left: none; border-radius: 14px; gap: 3px; background: color-mix(in srgb, var(--secondary) 8%, transparent); }
.openui.openui .openui-callout-info { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.openui.openui .openui-callout-warning { background: color-mix(in srgb, var(--orange) 12%, transparent); }
.openui.openui .openui-callout-danger { background: color-mix(in srgb, var(--red) 12%, transparent); }
.openui.openui .openui-callout-success { background: color-mix(in srgb, var(--green) 12%, transparent); }
.openui.openui .openui-callout-title { font-size: 15px; font-weight: 600; font-variation-settings: normal; line-height: 1.3; letter-spacing: normal; }
.openui.openui .openui-callout-description { font-size: 15px; line-height: 1.35; letter-spacing: normal; }
.openui.openui .openui-tag { height: auto; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; font-variation-settings: normal; letter-spacing: normal; line-height: 1.2; background: color-mix(in srgb, var(--secondary) 14%, transparent); color: var(--secondary); -webkit-backdrop-filter: none; backdrop-filter: none; }
.openui.openui .openui-tag-sm { font-size: 11px; }
.openui.openui .openui-tag-lg { font-size: 15px; }
.openui.openui .openui-tag-info { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.openui.openui .openui-tag-success { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.openui.openui .openui-tag-warning { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
.openui.openui .openui-tag-danger { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.openui.openui .openui-follow-up-block { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.openui.openui .openui-follow-up-item { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); box-shadow: var(--glass-shadow); font-size: 15px; letter-spacing: normal; }
.openui.openui .openui-follow-up-block__header { display: none; }
.openui.openui .openui-follow-up-item::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; }
.openui.openui .openui-text-block--title-text .openui-text-block__primary { font-size: 20px; font-weight: 700; font-variation-settings: normal; }
.openui.openui .openui-text-block--title-text .openui-text-block__secondary { font-size: 15px; }
.openui.openui .openui-separator { margin: 2px 0; }


/* The composer (Composer; js/composer.js): one glass shape 26 round and at least 52 tall, "+" at the start, a field of one to five lines, the
   microphone in the owner's black (or, once something is typed, the send arrow) at the end; each a 40 px circle, 6 apart and 6 in. Listening
   (2026-10-25): ✕ at the start, the voice's bars and the words in the field's place, the square to stop at the end. */
.composer { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 26px; min-height: 52px; position: relative; margin: 0; }
.composer.listening { border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-edge)); }
.composer .round { width: 40px; height: 40px; background: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.composer .round:not(:disabled):hover { background: var(--fill-2); }
.compose-field { flex: 1; min-width: 0; border: none; background: none; outline: none; resize: none; padding: 9px 6px; margin: 0; line-height: 22px; height: 40px; max-height: calc(22px * 5 + 18px); font-size: 17px; overflow-y: auto; }
.compose-field::placeholder { color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* a wrapped placeholder would grow the field */
.compose-field[hidden], .composer .heard[hidden], .composer .send[hidden], .composer .mic[hidden] { display: none; }
.composer .heard { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 6px; font-size: 17px; line-height: 22px; color: var(--text); min-height: 40px; }
.composer .heard .words { min-width: 0; max-height: calc(22px * 3); overflow: auto; }   /* three lines at most */
.composer .heard.empty .words { color: var(--secondary); }   /* "Listening…" */
/* The voice's bars (VoiceBars): five capsules 3 wide, 2.5 apart, in a 20 tall box, each rising with the level (4 + 16 × level × its share); flat
   dots in silence. */
.composer .bars { display: flex; align-items: center; gap: 2.5px; height: 20px; flex: none; }
.composer .bars i { display: block; width: 3px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 80%, transparent); transition: height 0.15s; }
.composer .send { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; padding: 0; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.composer .send:not(:disabled):hover { filter: brightness(1.08); }
.composer .mic { width: 40px; height: 40px; border-radius: 50%; border: none; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; padding: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.1s, box-shadow 0.12s; }
.composer .mic:not(:disabled):hover { background: #1d1d1f; }
.composer .mic:not(:disabled):active { transform: scale(0.96); }
/* The square to stop, in the microphone's place while listening, with a halo that swells with the voice (1 + 0.5 × the level, as the iPhone's). */
.composer .mic.listening { box-shadow: 0 0 0 calc(10px * var(--level, 0)) rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.25); }
.composer .mic.finishing { opacity: 1; cursor: default; }
.composer .mic .spinner { width: 16px; height: 16px; border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }
/* Black in dark mode too, as the owner asked: a hairline keeps it apart from a dark page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .composer .mic { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.5); }
  :root:not([data-theme="light"]) .composer .mic.listening { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 calc(1px + 10px * var(--level, 0)) rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5); }
}
:root[data-theme="dark"] .composer .mic { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .composer .mic.listening { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 calc(1px + 10px * var(--level, 0)) rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5); }

/* The tip over the composer (VoiceNote): what voice or paste has to say, for a moment; footnote in a glass shape 18 round, 10 × 16 in. */
.tip { position: absolute; left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%); max-width: min(calc(100% - 32px), 520px); width: max-content;
  padding: 10px 16px; border-radius: 18px; font-size: 13px; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 7; }   /* above the stage's foot and the question sheet */
.tip.on { opacity: 1; }
/* The notice over the composer (js/channel.js paintNotice): since 2026-10-27 only a failure's (below); a takeover's is the hand-back bar. */
.notice-host:empty { display: none; }
.takeover-notice { border-radius: 22px; padding: 10px 10px 10px 14px; display: flex; align-items: center; gap: 12px; animation: rise 0.3s ease; }
.takeover-notice .ic { display: grid; color: var(--teal); flex: none; }
/* The hand-back bar (HandBackBar, 2026-10-27): alone in the composer's place once the person takes the phone, the composer's glass
   capsule and its height (54 with the edge, so the picture stays put), You're in control, Hand back to Alma (sends "continue"; it
   waits, dimmed, while Alma is stopping) and ✕. */
.handback { min-height: 54px; border-radius: 26px; padding: 6px 6px 6px 14px; display: flex; align-items: center; gap: 6px; animation: rise 0.3s ease; }
.handback .ic { display: grid; color: var(--teal); flex: none; }
.handback .h { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* footnote, semibold */
.handback .back { flex: none; min-height: 36px; padding: 7px 13px; font-size: 15px; white-space: nowrap; }   /* subheadline, semibold */
.handback .back:disabled { opacity: 0.5; box-shadow: none; }
@media (max-width: 389px) { .handback .to { display: none; } }   /* a phone narrower than 390: "Hand back", so You're in control keeps its words */
/* The notice when the newest run could not finish (FailNotice, 2026-10-27): its trouble in up to three lines, Try again, ✕; an amber edge. */
.fail-notice { border-color: color-mix(in srgb, var(--orange) 50%, var(--glass-edge)); }
.fail-notice .ic { color: var(--orange); }
.fail-notice .words { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.fail-notice .again { flex: none; min-height: 32px; padding: 4px 12px; font-size: 14px; color: var(--text); }
/* The phone relay on with no iPhone relaying (js/relay.js, 2026-10-27): under the phone, above the composer's notices; ✕ for the
   visit. An amber edge as FailNotice's, since those apps fail on the phone until an iPhone relays; it blocks nothing. */
.relay-notice { border-color: color-mix(in srgb, var(--orange) 50%, var(--glass-edge)); }
.relay-notice .ic { color: var(--orange); }
.relay-notice .h { font-size: 14px; }
.relay-notice .when { font-size: 13px; color: var(--secondary); }
/* The One-Time Code / Password card over the composer (js/shortcuts.js secretCard). */
.secret-host:empty { display: none; }
.secret { border-radius: 24px; padding: 14px; display: flex; flex-direction: column; gap: 10px; animation: rise 0.3s ease; }
.secret .head { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.secret .head .icon { color: var(--accent); }
.secret .head span { flex: 1; }
.secret .lead { font-size: 15px; margin: 0; }
.secret .entry { display: flex; gap: 10px; }
.secret .entry .field { flex: 1; font-size: 20px; font-variant-numeric: tabular-nums; }
.secret .entry .field[type="password"] { font-size: 17px; }

/* A picture large, over the page (js/replay.js openLightbox). */
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 30; display: grid; place-items: center; animation: fade 0.2s; cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 12px; }
.lightbox .round { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; }

/* The sheets: ⋯ (the menu), + (the shortcuts) and Settings (SettingsView, the parts the web has) */
.sheet-wrap { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); display: grid; place-items: end center; z-index: 25; animation: fade 0.2s;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); overscroll-behavior: contain; }
@media (min-width: 700px) { .sheet-wrap { place-items: center; } }
.sheet { width: 100%; max-width: 520px; max-height: 90vh; max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top) - 12px)); overflow: auto; overscroll-behavior: contain; border-radius: 28px 28px 0 0; background: var(--ground); padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 700px) { .sheet { border-radius: 28px; } }
.sheet:focus { outline: none; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; }
.sheet-top h2 { margin: 0; font-size: 17px; font-weight: 600; }
.group-title { font-size: 13px; color: var(--secondary); text-transform: uppercase; margin: 0 16px 6px; }
.group { background: var(--surface-solid); border-radius: 12px; overflow: hidden; }
.group .item { padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; }
.group .item + .item { border-top: 0.5px solid var(--divider); }
.group .item .v { color: var(--secondary); text-align: right; overflow-wrap: anywhere; }
.group button.item { width: 100%; border: none; background: none; text-align: left; }
.danger { color: var(--red); }
.group-head { display: flex; justify-content: space-between; align-items: baseline; }
.group-head .text-btn { margin-right: 8px; }
.group .item.menu-row { align-items: center; justify-content: flex-start; gap: 14px; }
.group .glyph.big { width: 36px; height: 36px; color: var(--accent); }
.group .h { font-weight: 600; }
.group button.item:hover { background: var(--fill); }
.group .chev { color: var(--tertiary); display: grid; }
.status-line { display: flex; align-items: center; gap: 12px; width: 100%; }
.help .item { font-size: 15px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.shortcut-form { display: flex; flex-direction: column; gap: 12px; background: var(--surface-solid); border-radius: 12px; padding: 14px; }
.shortcut-form .h { font-size: 20px; font-weight: 700; }
.shortcut-form .lead { margin: 0; color: var(--secondary); font-size: 15px; }
.shortcut-form .lead.why { color: var(--orange); font-size: 14px; }   /* a tray row's Rename or Delete the server did not take */
.shortcut-form .text-btn { align-self: center; }
.shortcut-form .actions { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .btn-glass { font-size: 15px; padding: 6px 14px; }
.foot { font-size: 13px; color: var(--secondary); margin: 6px 16px 0; }
/* The iPhone's install hint (Share, then Add to Home Screen) and the menu's Notifications switch (2026-10-20). */
.install-hint { display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 10px 8px 10px 14px; font-size: 15px; text-align: left; }
.install-hint .share { color: var(--accent); }
.own-sign-in { margin: 10px 0 0; }
.switch { position: relative; width: 51px; height: 31px; flex: none; padding: 0; border: none; border-radius: 999px; background: var(--fill-2); transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16); transition: transform 0.2s; }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* The "Add to Home Screen" popup (app.js showInstallPopup): a centred card of the sheet family. */
.install-sheet { max-width: 360px; align-items: center; text-align: center; gap: 14px; border-radius: 28px; }
@media (max-width: 699px) { .install-sheet { border-radius: 28px 28px 0 0; } }
.install-icon { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.install-icon img { border-radius: 12px; display: block; }
.install-title { font-size: 20px; margin: 0; }
.install-sub { color: var(--secondary); font-size: 15px; margin: 0; line-height: 1.4; }
.install-steps { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.install-step { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 15px; }
.install-step .n { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.install-step .share { display: inline-flex; color: var(--accent); }
.install-actions { display: flex; gap: 10px; width: 100%; }
.install-actions button { flex: 1; }

/* Set Up Your Phone (js/onboarding.js, js/setup.js openSetup, 2026-10-24): the iPhone's OnboardingView as a sheet of the
   family above: a badge and a title, a card of numbered steps, a card of app rows with a mark at each row's end, a stage
   card (working, done, failed), the wide prominent button. */
/* Import from Apple (2026-10-27): while the person signs in to Apple on the phone, the sheet steps aside to a bar at the
   top and the page under it (the live phone) takes touches and keys again. */
.sheet-wrap.aside { background: transparent; place-items: start center; pointer-events: none; }
.sheet-wrap.aside .sheet { pointer-events: auto; max-height: 60vh; border-radius: 0 0 28px 28px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); gap: 12px; padding-bottom: 16px; }
@media (min-width: 700px) { .sheet-wrap.aside { place-items: start end; padding: 16px; } .sheet-wrap.aside .sheet { max-width: 380px; border-radius: 28px; } }
.onboarding .apple-stay { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.sheet-top .step-label { font-size: 13px; font-weight: 500; color: var(--secondary); font-variant-numeric: tabular-nums; }
.onboarding { display: flex; flex-direction: column; gap: 20px; text-align: center; padding-bottom: 8px; }
.onboarding .badge { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); margin: 4px auto 0; }
.onboarding h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; font-stretch: expanded; }
.onboarding p.lead { margin: 0; color: var(--secondary); }
.onboarding .steps { gap: 16px; }
.onboarding .step .h { font-weight: 500; }
.onboarding .step .when { font-size: 15px; }
.onboarding .step .n .icon { color: var(--accent); }
.onboarding .fine { margin: 0; font-size: 13px; }
.onboarding .fine.lock { display: flex; gap: 8px; align-items: flex-start; text-align: left; }
.onboarding .fine.lock .icon { margin-top: 2px; }
.onboarding .center { text-align: center; }
.onboarding .wide { width: 100%; min-height: 50px; font-size: 17px; }
.onboarding .shortcut-form { text-align: left; }
.onboarding > .btn-glass { align-self: center; min-height: 44px; padding: 8px 22px; }
.onboarding > .spinner { margin: 8px auto; }
.onboarding .secret { margin: 0; text-align: left; }
.onboarding .status-card { border-radius: 20px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.onboarding .status-card > .ic { color: var(--accent); flex: none; margin-top: 2px; }
.onboarding .status-card > .ic.good { color: var(--green); }
.onboarding .status-card > .ic.bad { color: var(--secondary); }
.onboarding .status-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.onboarding .status-card .actions { display: flex; flex-direction: column; gap: 8px; }
.onboarding .section { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.onboarding .section .title { font-size: 20px; font-weight: 600; font-stretch: expanded; }
.onboarding .section .note { font-size: 13px; color: var(--secondary); margin-top: 2px; }
/* The iPhone import (2026-10-27, js/setup.js importSection): its tools in a row that wraps, its help card's fine print. */
.onboarding .import-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.onboarding .status-card .note { font-size: 13px; color: var(--secondary); }
.onboarding .status-card .bad-text { font-size: 13px; color: var(--orange); }
.onboarding .card { border-radius: 24px; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.onboarding .row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; width: 100%; border: none; background: none; text-align: left; }
.onboarding .row + .row::before { content: ""; position: absolute; left: 60px; right: 0; top: 0; height: 0.5px; background: var(--divider); }
.onboarding button.row:hover { background: var(--fill); }
.onboarding .row .glyph { width: 30px; height: 30px; border-radius: 8px; background: var(--fill); display: grid; place-items: center; color: var(--secondary); font-size: 13px; font-weight: 600; flex: none; }
/* An app's row (2026-10-28, js/setup.js appIcon): its icon at 40 px, rounded as the iPhone's (22%), over its letter's tile,
   which shows until the picture loads and stays when there is none. The divider starts past the larger tile. */
.onboarding .row .glyph.app-icon { position: relative; width: 40px; height: 40px; border-radius: 22%; overflow: hidden; font-size: 16px; }
.onboarding .row .glyph.app-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.15s; }
.onboarding .row .glyph.app-icon.loaded { background: none; color: transparent; }
.onboarding .row .glyph.app-icon.loaded img { opacity: 1; }
.onboarding .row + .row:has(> .app-icon)::before { left: 70px; }
.onboarding .row .name { font-weight: 500; }
.onboarding .row .sub { font-size: 13px; color: var(--secondary); }
.onboarding .row .mark { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--tertiary); }
.onboarding .row .mark.good { color: var(--green); }
.onboarding .row .mark.person { color: var(--orange); }
.onboarding .row .mark.bad { color: var(--secondary); }
.onboarding .row .mark.on { color: var(--accent); }
.onboarding .row .mark.off::before, .onboarding .row .mark.wait::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--tertiary); }
.onboarding .row .mark.wait::before { border-style: dotted; }


/* Every part keeps the iPhone's size on every screen (the owner, 2026-10-24: the web the same size as the iPhone); only the page's width
   differs. A phone on its side (a short, wide viewport) just loses the install hint, so the picture has the height. */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .chan > .install-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .composer .bars i, .composer .mic { transition: none; }
  .switch, .switch::after, .tray, .scrim { transition: none; }
  .working-ring.on, .openui.loading { animation: none; }
  .qsheet.rise, .qscrim, .qbar, .qpill, .offer, .finish, .status, .secret, .takeover-notice, .handback, .stage-host, .conversation, .sheet-wrap, .lightbox, .replay-full { animation: none; }
}

.phone-keys-input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px;
  color: transparent; background: transparent; caret-color: transparent; pointer-events: none; }
.keys-show { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; min-height: 44px; padding: 10px 20px; font-size: 16px; }
.keys-show[hidden], .keys-bar[hidden] { display: none; }
.keys-bar { position: fixed; left: 0; right: 0; height: 56px; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left)); pointer-events: none; }
.keys-bar .round { pointer-events: auto; }
.screen.typing { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent), 0 6px 16px rgba(0, 0, 0, 0.18); }

.webkbd { --gap: 6px; width: 100%; display: flex; flex-direction: column; gap: 9px; color: var(--kb-ink);
  padding: 8px 3px max(8px, env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--kb-tray);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 -0.5px 0 var(--glass-edge), 0 -8px 30px rgba(0, 0, 0, 0.08);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; animation: kb-rise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes kb-rise { from { transform: translateY(48px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .webkbd { animation: none; } }
/* The strip: the mirror field in a capsule, then paste and hide. */
.webkbd .strip { display: flex; align-items: center; gap: 2px; padding: 0 3px 0 5px; }
.webkbd .pill { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px;
  background: var(--kb-field); box-shadow: 0 1px 0 var(--kb-edge); cursor: text; }
.webkbd .pill:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.webkbd .lock { display: grid; color: var(--secondary); flex: none; }
.webkbd .lock[hidden] { display: none; }
/* 17 px: iOS Safari zooms the page into a field under 16 px. */
.webkbd .mirror { flex: 1; min-width: 0; height: 100%; border: none; background: none; outline: none; padding: 0; font-size: 17px; color: var(--kb-ink); -webkit-user-select: text; user-select: text; }
.webkbd .mirror::placeholder { color: var(--secondary); }
.webkbd .tool { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: none; border-radius: 50%; background: none; color: var(--kb-ink); opacity: 0.75; }
.webkbd .tool:hover { opacity: 1; background: color-mix(in srgb, var(--kb-ink) 8%, transparent); }
/* The keys: ten letter widths to a row (--kw); shift and delete share what the third row leaves; space and go take the
   fourth row's rest. */
.webkbd .kbd-keys { display: flex; flex-direction: column; gap: 11px; }
.webkbd.own .kbd-keys { display: none; }
.webkbd .keys-row { display: flex; gap: var(--gap); justify-content: center; }
.webkbd .key { --kw: calc((100% - 9 * var(--gap)) / 10); position: relative; flex: 0 0 var(--kw); min-width: 0; height: 44px; padding: 0;
  display: grid; place-items: center; border: none; border-radius: 8px; background: var(--kb-key); color: var(--kb-ink);
  box-shadow: 0 1px 0 var(--kb-edge); font-size: 23px; font-weight: 400; line-height: 1; touch-action: manipulation; }
.webkbd .key.mod, .webkbd .key.space, .webkbd .key.go { flex: 1 1 0; font-size: 16px; }
.webkbd .key.mod { background: var(--kb-mod); }
.webkbd .key.go { background: var(--accent); color: var(--on-accent); }
.webkbd .key.on { background: var(--kb-key); }
.webkbd .k-shift { margin-right: calc(var(--gap) * 1.5); }
.webkbd .k-back { margin-left: calc(var(--gap) * 1.5); }
.webkbd .k-sym, .webkbd .k-abc { flex-grow: 1.25; }
.webkbd .key.space { flex-grow: 4; }
.webkbd .key.go { flex-grow: 1.6; }
/* Symbols' third row: six signs and delete, spread as iOS spreads them. */
.webkbd [data-layout="symbols"] .keys-row:nth-child(3) .key.char { flex: 1.4 1 0; }
.webkbd [data-layout="symbols"] .keys-row:nth-child(3) .k-back { flex-grow: 1.6; }
/* The number pad: three wide columns of digits, a fourth of the special keys. */
.webkbd [data-layout="numeric"] .key { flex: 1 1 0; margin: 0; font-size: 26px; }
.webkbd [data-layout="numeric"] .key:nth-child(4) { flex-grow: 0.8; font-size: 16px; }
.webkbd [data-layout="numeric"] .key.char:nth-child(4) { font-size: 26px; }
/* Held: modifiers light up, letters darken, and on a touch screen a letter's bigger copy rises over the finger. */
.webkbd .key.down { background: var(--kb-down); }
.webkbd .key.mod.down { background: var(--kb-key); }
.webkbd .key.go.down { filter: brightness(0.85); background: var(--accent); }
@media (hover: none) {
  .webkbd .key.char.down { background: var(--kb-key); }
  .webkbd .key.char.down::after { content: attr(data-l); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    min-width: calc(100% + 14px); height: 56px; display: grid; place-items: center; border-radius: 12px; background: var(--kb-key);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), 0 0 0 0.5px var(--kb-edge); font-size: 34px; pointer-events: none; z-index: 2; }
  .webkbd .keys-row .key.char:first-child.down::after { left: 0; transform: none; }
  .webkbd .keys-row .key.char:last-child.down::after { left: auto; right: 0; transform: none; }
}
@media (hover: hover) { .webkbd .key:not(.go):not(.down):hover { filter: brightness(0.97); } }
/* With the device's own keyboard up, the strip sits right on it (no home-indicator room under it). */
.webkbd.own { padding-bottom: 8px; }
@media (max-width: 767px) { .phone.kbd-up { padding-bottom: 0; } }
/* A short phone (an iPhone SE, a mini): slightly shorter keys and strip, so the phone's picture keeps its room. */
@media (max-width: 767px) and (max-height: 740px) {
  .webkbd { gap: 7px; }
  .webkbd .kbd-keys { gap: 9px; }
  .webkbd .key { height: 40px; }
  .webkbd .pill, .webkbd .tool { height: 36px; }
}
/* A tablet or a computer: the tray floats, a phone's width, centred, its corners all round. */
@media (min-width: 768px) {
  .webkbd { border-radius: 26px; padding: 8px 6px 10px; box-shadow: 0 0 0 0.5px var(--glass-edge), var(--glass-shadow); }
}
/* A phone on its side: the tray spans the foot of the screen under the three columns, with shorter keys. */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .phone.kbd-up { padding-bottom: 206px; }
  .webkbd { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; gap: 6px; padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); border-radius: 20px 20px 0 0; }
  .webkbd .kbd-keys { gap: 6px; }
  .webkbd .key { height: 34px; font-size: 19px; }
  .webkbd .pill, .webkbd .tool { height: 34px; }
  .phone.kbd-up:has(.webkbd.own) { padding-bottom: 54px; }
}

.stage-keyboard { display: contents; }
:root { --kb-tray: rgba(206, 210, 217, 0.88); --kb-key: #fdfdfe; --kb-mod: #abb1bb; --kb-ink: #000; --kb-edge: rgba(0, 0, 0, 0.3); --kb-field: #fff; --kb-down: #c3c7cf; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --kb-tray: rgba(34, 34, 37, 0.9); --kb-key: #6b6b70; --kb-mod: #46464b; --kb-ink: #fff; --kb-edge: rgba(0, 0, 0, 0.6); --kb-field: rgba(118, 118, 128, 0.3); --kb-down: #8a8a90; }
}
:root[data-theme="dark"] { --kb-tray: rgba(34, 34, 37, 0.9); --kb-key: #6b6b70; --kb-mod: #46464b; --kb-ink: #fff; --kb-edge: rgba(0, 0, 0, 0.6); --kb-field: rgba(118, 118, 128, 0.3); --kb-down: #8a8a90; }
.stage-keyboard-panel { position: absolute; inset: auto 0 0; z-index: 8; }
.stage-keyboard-panel[hidden] { display: none; }
.shell.native-typing { height: var(--layout-height, 100dvh); }
.shell.native-typing .chan-head, .shell.native-typing .chan-foot { display: none; }
.shell.native-typing .stage { align-items: start; }

/* Web parity, area A (2026-10-27): Settings (SettingsView.swift), Saved on Your Phone (VaultView.swift, js/vault.js) and
   the menu's Help (HomeHelpView, js/shortcuts.js helpGroups). Only the sheet's
   own tokens (styles.css :root, its dark values included), so light and dark both follow. */

/* Settings: the name and the build at the top, the person's initials, a confirmation in its row. */
.settings-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.settings-brand .badge { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); }
.settings-name { font-size: 22px; font-weight: 700; font-stretch: expanded; }
.group .item.settings-identity { padding-top: 10px; padding-bottom: 10px; }
.settings-initials { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-weight: 600; font-stretch: expanded;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); }
.group button.item:disabled { opacity: 0.45; }
.group .item.trouble { justify-content: flex-start; color: var(--text); }
.group .item.trouble .icon { color: var(--red); }
.group .item .grow, .vault .grow { flex: 1; min-width: 0; }

/* A question asked in its row (Delete Your Account?, Forget This Phone Number?, Sign Out of Zomato?). */
.group .item.vault-confirm { flex-direction: column; align-items: stretch; gap: 4px; justify-content: flex-start; }
.vault-confirm .h { font-weight: 600; }
.vault-confirm .actions { margin-top: 8px; }

/* Saved on Your Phone. */
.vault { display: flex; flex-direction: column; gap: 24px; }
.vault-top { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vault-lead { margin: 0; color: var(--secondary); font-size: 15px; }
.vault-check { font-size: 15px; }
.vault-check:disabled { opacity: 0.7; }
.vault-check .icon { color: var(--accent); }
.vault-section { display: flex; flex-direction: column; gap: 10px; }
.vault-head { display: flex; align-items: flex-end; gap: 12px; margin: 0 4px; }
.vault-title { font-size: 20px; font-weight: 600; font-stretch: expanded; }
.vault-note { font-size: 13px; color: var(--secondary); margin-top: 2px; }
.vault-add.circle { width: 34px; height: 34px; color: var(--accent); }
.group .item.vault-row { padding-top: 10px; padding-bottom: 10px; }
.vault-reveal { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; border: none; background: none; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.vault-value { font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vault-eye { font-size: 13px; color: var(--tertiary); flex: none; }
.vault-reveal:hover .vault-eye, .vault-reveal:focus-visible .vault-eye { color: var(--accent); }
.vault-forget:hover { color: var(--red); }
.group .glyph.vault-letter { font-weight: 700; font-size: 14px; color: var(--secondary); }
.group .glyph.vault-letter.square { border-radius: 8px; }
.vault-status { display: flex; align-items: center; gap: 6px; }
.vault-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fill-2); flex: none; }
.vault-dot.on { background: var(--green); }
.vault-checked { color: var(--tertiary); }
.vault-sign-out { flex: none; border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red);
  border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 500; }
.vault-sign-out:hover { background: color-mix(in srgb, var(--red) 18%, transparent); }
.group .item.vault-action { color: var(--accent); font-weight: 500; }
.group .item.vault-action .glyph { color: var(--accent); }
.vault-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 24px; border-radius: 28px; }
.vault-card .lead { margin: 0; color: var(--secondary); font-size: 15px; }
.vault-card .fine { margin: 2px 0 0; color: var(--tertiary); }
.vault-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--secondary); }
.vault-badge.accent { color: var(--accent); }
.vault-big { font-size: 20px; font-weight: 600; font-stretch: expanded; }
.vault-center { display: grid; place-items: center; min-height: 160px; }
.vault-trouble { width: 100%; }
.vault-trouble .btn-glass { align-self: flex-end; }
.vault-promise { display: flex; gap: 8px; align-items: flex-start; margin: 0 4px; }
.vault-promise .icon { margin-top: 2px; }
.vault-back { display: inline-flex; align-items: center; gap: 2px; min-width: 72px; padding: 4px 0; }

/* Help in the menu: the intro above the groups. */
.foot.help-intro { margin: 0 4px; font-size: 15px; }

/* Send to Android Phone (web/js/transfer.js, 2026-10-27): the sheet's rows, its state line and the QR scanner over it.
   Uses styles.css's tokens (--accent, --green, --red, --fill…) and
   its .group/.item/.menu-row/.glyph/.foot/.spinner/.btn-glass. */

/* The rows that start something read as the iPhone Form's tinted buttons. A picker row is a <label> around its file
   input, so a tap opens the picker natively (Safari on the iPhone offers Photo Library, Take Photo and Files). */
.group .transfer-row { position: relative; width: 100%; border: none; background: none; text-align: left; color: var(--accent); cursor: pointer; font: inherit; align-items: center; }
.group .transfer-row:hover { background: var(--fill); }
.group .transfer-row:focus-within, .group .transfer-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px; }
.group .transfer-row:disabled, .group .transfer-row.off { opacity: 0.4; cursor: default; }
.group .transfer-row:disabled:hover, .group .transfer-row.off:hover { background: none; }
.group .transfer-glyph { color: var(--accent); }
.transfer-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; }

/* The link field and Open on Android. */
.group .item.transfer-field { padding: 0 16px; }
.transfer-link { width: 100%; min-height: 46px; border: none; outline: none; background: none; color: var(--text); font: inherit; font-size: 16px; padding: 0; }
.transfer-link::placeholder { color: var(--tertiary); }
.group .transfer-open { width: 100%; border: none; background: none; text-align: left; color: var(--accent); font: inherit; cursor: pointer; }
.group .transfer-open:hover:not(:disabled) { background: var(--fill); }
.group .transfer-open:disabled { color: var(--tertiary); cursor: default; }

/* What is happening: working (spinner, and the share sent when the browser says), sent ✓ or the server's words. */
.transfer-status[hidden] { display: none; }
.group .item.transfer-state { justify-content: flex-start; align-items: center; gap: 12px; }
.transfer-state .spinner { border-top-color: var(--accent); }
.transfer-state.done { color: var(--green); }
.transfer-state.failed { color: var(--red); }
.transfer-state-icon { display: grid; flex: none; }
.transfer-pct { color: var(--secondary); font-variant-numeric: tabular-nums; }
.transfer-progress { display: block; width: calc(100% - 32px); height: 4px; margin: 0 16px 12px; border: none; border-radius: 2px; background: var(--fill-2); overflow: hidden; appearance: none; -webkit-appearance: none; }
.transfer-progress::-webkit-progress-bar { background: var(--fill-2); border-radius: 2px; }
.transfer-progress::-webkit-progress-value { background: var(--accent); border-radius: 2px; transition: width 0.2s; }
.transfer-progress::-moz-progress-bar { background: var(--accent); border-radius: 2px; }

/* The scanner: the whole screen, over the sheet (the iPhone's fullScreenCover), the camera with a 250 pt frame. */
.transfer-scan { position: fixed; inset: 0; z-index: 40; background: #000; color: #fff; display: flex; flex-direction: column; animation: fade 0.2s;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.transfer-scan:focus { outline: none; }
.transfer-scan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.transfer-scan-top h2 { margin: 0; font-size: 17px; font-weight: 600; }
.transfer-scan-top .btn-glass { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.22); min-width: 72px; }
.transfer-scan-spacer { width: 72px; flex: none; }
.transfer-scan-body { position: relative; flex: 1; min-height: 0; display: grid; }
.transfer-scan-view { position: relative; overflow: hidden; }
.transfer-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.transfer-scan-frame { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; max-width: 70vw; max-height: 70vw; transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: 24px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 0 100vmax rgba(0, 0, 0, 0.25); pointer-events: none; }
.transfer-scan-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 16px 16px; text-align: center; }
.transfer-scan-note { margin: 0; min-height: 1.3em; max-width: 520px; font-size: 15px; color: rgba(255, 255, 255, 0.85); overflow-wrap: anywhere; }
.transfer-scan-note:empty { display: none; }
.transfer-scan-photo { position: relative; display: inline-flex; align-items: center; gap: 8px; color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.22); cursor: pointer; }
.transfer-scan-photo:focus-within { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
.transfer-scan-photo-icon { display: grid; }
.transfer-scan-empty { align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 360px; padding: 24px; text-align: center; }
.transfer-scan-empty-icon { display: grid; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; }
.transfer-scan-empty h3 { margin: 0; font-size: 22px; font-weight: 700; }
.transfer-scan-empty p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.7); }

/* Web parity, area D (2026-10-27). */

/* The line about the live video over the picture (js/stage.js note): a browser without WebCodecs, or a stream the
   server refused ("already open elsewhere"). At the picture's top, above the status bar, clear of the question's host
   (.stage-head, 60px down) and of Android's nav bar; touches pass through it to the phone. */
.stage-note { position: absolute; left: 10px; right: 10px; top: 10px; margin: 0 auto; width: fit-content; z-index: 3;
  padding: 6px 12px; border-radius: 12px; font-size: 13px; line-height: 1.3; text-align: center; color: var(--text); pointer-events: none; animation: drop 0.25s ease; }
.stage-note[hidden] { display: none; }
.stage.keyboard-up .stage-note { display: none; }

/* The Location sheet (js/place.js): Where I Am and the chosen place, a checkmark on the one in use (a spinner while sent). */
.group .item.menu-row .place-check { color: var(--accent); }
.group button.item.menu-row:disabled { opacity: 0.6; }
.foot.trouble { display: block; color: var(--secondary); }
.place-search-note { margin-top: 0; }

/* The pop-up menu (js/popmenu.js; the iPhone's Menu and .contextMenu, 2026-10-27): a glass card by its button, about 250 wide,
   rows of a 17 pt title with its symbol before it, a wider band between sections, Delete in red. */
.popmenu { position: fixed; z-index: 60; min-width: 230px; max-width: min(300px, calc(100vw - 24px)); padding: 6px 0; border-radius: 22px;
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid var(--glass-edge); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); animation: popmenu-in 0.16s ease-out; transform-origin: top right; }
@keyframes popmenu-in { from { opacity: 0; transform: scale(0.94); } }
.popmenu-section + .popmenu-section { border-top: 7px solid color-mix(in srgb, var(--text) 6%, transparent); margin-top: 6px; padding-top: 6px; }
.popmenu-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 8px 18px; border: none; background: none; color: var(--text);
  font: inherit; font-size: 17px; line-height: 1.25; text-align: left; cursor: pointer; }
.popmenu-item:not(:disabled):hover, .popmenu-item:focus-visible { background: var(--fill); outline: none; }
.popmenu-item:disabled { color: var(--tertiary); cursor: default; }
.popmenu-item.danger:not(:disabled) { color: var(--red); }
.popmenu-icon { display: grid; place-items: center; width: 22px; flex: none; }
.popmenu-title { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .popmenu { animation: none; } }