/* PaceNotes for phones. One column, large touch targets, light and dark.
   No inline styles anywhere: the server sends a strict content security policy. */

/* One display face in two files (2026-11-14, first-load diet): the Latin set every heading uses, and the rest of Barlow's
   characters, which the browser fetches only when a heading holds one of them (an agent or job name in another language). */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('./fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('./fonts/BarlowCondensed-ExtraBold-ext.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0113, U+0116-012B, U+012D-0130, U+0133-0137, U+0139-013E, U+0140-0148, U+014A-014D, U+014F-0151, U+0154-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01CE, U+01D4, U+01E5, U+01E7, U+01E9, U+01EF, U+01FF, U+0218-021B, U+021F, U+0228-0229, U+0237, U+0259, U+0292, U+02BB-02BC, U+02C7, U+02C9, U+02D8-02D9, U+02DB, U+02DD, U+0300-0304, U+0306-030C, U+0312-0313, U+031B, U+0323, U+0326-0328, U+0335-0338, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+1EA0-1EF9, U+2074-2079, U+20A3, U+20BA, U+20BD, U+2113, U+2126, U+212E, U+215B-215E, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+27E9, U+FB01-FB02;
}

:root {
  color-scheme: light dark;
  /* Tread Connection: #FF5600 on the treadconnection.ai darks, white light mode. Buttons carry near-black text (white on
     the orange is 3.2:1). shared/look.js derives custom colors. test/ui/contrast.test.mjs checks every pair. */
  --bg: #fafafa;
  --panel: #ffffff;
  --line: #e4e4e7;
  --edge: #71717a;        /* borders of fields and outlined buttons, 3:1 or better */
  --text: #18181b;
  --dim: #52525b;
  --accent: #a83a00;      /* accent used as text or as a focus ring */
  --btn: #ff5600;
  --on-btn: #18181b;
  --btn-edge: #c44400;
  --mark: #c44400;        /* small colored marks: left edges, bars */
  --hl: #fff1e8;          /* soft highlight for a chosen mode or an answer */
  --cue-bg: #18181b;
  --on-cue: #fafafa;
  --on-cue-dim: #a1a1aa;
  --cue-edge: #ff5600;
  --cue-label: #ff8a4d;
  --cue-btn: #ffffff;
  --on-cue-btn: #18181b;
  --pr-bg: #0f1117;       /* full screen prompter, the same in light and dark */
  --pr-fg: #fafafa;
  --pr-dim: #a1a1aa;
  --pr-btn: #27272a;
  --pr-edge: #8a8a93;
  --pr-bad: #ff8f85;      /* an error line on the full screen views */
  --call-end: #b3261e;    /* Hang up, the same in light and dark */
  --on-call-end: #ffffff;
  --call-go: #2a7400;     /* Call */
  --on-call-go: #ffffff;
  --si-on-bg: #2a7400;    /* the SI tag beside a desk's name: green connected, grey not. The same in light and dark */
  --si-on-fg: #ffffff;
  --si-off-bg: #52525b;
  --si-off-fg: #fafafa;
  --ok: #2a7400;
  --warn: #664700;
  --meter-warn: #c97100;     /* the usage meter at 80%, amber. Red at 95% is --meter-crit */
  --meter-crit: #c4261c;
  --bad: #b3261e;
  --scrim: rgba(15, 17, 23, 0.55);
  /* the moving background (lib/pace-flow.js): how much of the card color covers the glow, the veil behind the header,
     and the two floor glows. test/ui/flow-contrast.test.mjs sweeps every text color against the worst glow. */
  --glass: 72%;
  --veil: #fafafa;
  --floor-a: rgba(255, 150, 60, 0.14);
  --floor-b: rgba(255, 86, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1117;
    --panel: #18181b;
    --line: #27272a;
    --edge: #8a8a93;
    --text: #fafafa;
    --dim: #b4b4bc;
    --accent: #ff8a4d;
    --btn-edge: #ff5600;
    --mark: #ff5600;
    --hl: #27272a;
    --cue-bg: #27272a;
    --ok: #6fd02f;
    --warn: #f2c300;
    --meter-warn: #f5a524;
    --meter-crit: #ff5247;
    --bad: #ff8f85;
    --scrim: rgba(0, 0, 0, 0.65);
    --glass: 82%;
    --veil: #0b0c10;
    --floor-a: rgba(255, 140, 60, 0.16);
    --floor-b: rgba(255, 86, 0, 0.14);
  }
}
/* A picked theme wins over the system (shared/look.js). */
:root[data-theme="dark"] { --bg: #0f1117; --panel: #18181b; --line: #27272a; --edge: #8a8a93; --text: #fafafa; --dim: #b4b4bc; --accent: #ff8a4d; --btn-edge: #ff5600; --mark: #ff5600; --hl: #27272a; --cue-bg: #27272a; --ok: #6fd02f; --warn: #f2c300; --meter-warn: #f5a524; --meter-crit: #ff5247; --bad: #ff8f85; --scrim: rgba(0, 0, 0, 0.65); --glass: 82%; --veil: #0b0c10; --floor-a: rgba(255, 140, 60, 0.16); --floor-b: rgba(255, 86, 0, 0.14); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* No double-tap zoom delay on anything that is tapped. */
button, a, summary, label, select { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: anywhere;
  min-height: 100vh;
  position: relative;
  isolation: isolate;   /* the moving background sits at z-index -1 inside the body, above the page color and under every card */
}

.app {
  max-width: 40rem;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

h1 { margin: 0; font-size: 1.4rem; line-height: 1.2; }
h2 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
h1, h2, h3, .agent-window-name { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 800; }
p { margin: 0; }

/* links take the theme color (dark orange on light, light orange on dark), never the browser's default blue */
a { color: var(--accent); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- header and status ------------------------------------------------ */

.top { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }

.top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.6rem; min-width: 0; }
.top h1 { flex: none; }
.top .call-pill { margin-bottom: 0; }
/* Phone width: title and the three header controls stay on one row (QA 2026-10-23, the gear used to drop to its own line). */
@media (max-width: 480px) {
  .top { gap: 0.5rem; }
  .top-actions { flex-wrap: nowrap; gap: 0.4rem; }
  .top-actions .running-open, .top .call-pill { min-height: 44px; padding-inline: 0.6rem; font-size: 0.85rem; }
  .top .icon-btn { width: 44px; height: 44px; }
}

/* Online agents above the sidebar, room and PaceNotes. Four portraits and the overflow circle fit on a phone. */
.agent-bar.pn-banner {
  position: sticky; top: 0; z-index: 30; flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 5);
  gap: 8px; min-height: 110px; margin: 0; padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--edge) transparent;
}
@media (min-width: 700px) { .agent-bar.pn-banner { grid-auto-columns: 92px; } }
.agent-bar.pn-banner::-webkit-scrollbar { display: block; height: 4px; }
.agent-bar.pn-banner::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 4px; }
.agent-bar.pn-banner .agent-badge { width: 100%; padding: 0 0 4px; }
.agent-bar.pn-banner .agent-face { width: 100%; height: 72px; border-radius: 0; overflow: visible; margin-bottom: 6px; }
.agent-bar.pn-banner .agent-face-img { width: 100%; height: 100%; border-radius: 0; object-fit: contain; }
/* No picture: a round letter plate (or the default face on a call), up to 72px, never wider than the tile, centred. */
.agent-bar.pn-banner .agent-initials { width: min(72px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; }
.agent-bar.pn-banner .agent-initials-square { border-radius: 14px; }
.agent-bar.pn-banner .agent-initials-hex { border-radius: 0; }
.agent-bar.pn-banner .agent-face-art { inset: 0; width: min(72px, 100%); margin-inline: auto; }
.agent-bar.pn-banner .agent-ring { top: 13px; }
.agent-bar.pn-banner .agent-dot { top: 56px; }
.agent-bar.pn-banner .agent-ear-off { top: 50px; }
.agent-bar.pn-banner .agent-name { max-width: 100%; padding: 2px 4px; border-radius: 6px; background: var(--panel); color: var(--text); }
.agent-bar.pn-banner .agent-overflow { justify-self: center; margin: 14px 0 0; position: relative; }
/* The count sits in the circle and "All agents" under it, like the names under the faces. */
.agent-bar.pn-banner .agent-overflow::after {
  content: "All agents"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; padding: 2px 4px; border-radius: 6px;
  background: var(--panel); color: var(--text); font-size: 0.75rem; line-height: 1.2; font-family: var(--font-ui, inherit); white-space: nowrap;
}
.agent-bar.pn-banner .agent-slot .agent-badge { width: 100%; }
.agent-bar.pn-banner .agent-done-chip { margin-top: 18px; }
/* The bar takes its own space (app.js watchBarSpace sets --pn-bar-h and data-pn-bar). Everything that opens over the page starts
   below it, so no Done or Close is ever under the bar (Jake 2026-10-23), and the bar already covers the status bar and the Dynamic
   Island, so what sits under it does not add that room a second time. */
html[data-pn-bar] .sheet-head { padding-top: 1rem; }
html[data-pn-bar] .sheet { scroll-padding-top: 5rem; }
html[data-pn-bar] .call-screen { padding-top: 1rem; }
html[data-pn-bar]:not([data-desktop-layout]) .app { padding-top: 1rem; }
/* On a phone the agent window is a bottom sheet: it stops at the bar, so the bar stays in view and another agent is one tap away. */
@media (max-width: 699px) { .agent-sheet-box { max-height: calc(100dvh - max(var(--pn-bar-h, 0px), env(safe-area-inset-top, 0px))); } }
/* With the agent sidebar on the left and a room on the right, PaceNotes sits between them (shared/agent-dock.js and
   features/room-panel.js set the widths). */
/* Dock width, capped so PaceNotes keeps ~400px beside it (iPad portrait at 70% left 230px). */
:root { --agent-dock-cap: max(280px, calc(100vw - 416px)); --agent-dock-used: min(var(--agent-dock-w, 0px), var(--agent-dock-cap)); }
@media (min-width: 700px) { .agent-sheet[data-dock="docked"]:not([data-dock-horizontal]) .agent-sheet-box { max-width: var(--agent-dock-cap); } }
html[data-agent-docked] .app { margin-left: max(calc(var(--agent-dock-used, 0px) + var(--agent-dock-gap, 16px)), calc(50vw - 20rem)); }
html[data-room-open] .app { margin-right: max(calc(var(--room-w, 0px) + 16px), calc(50vw - 20rem)); }
html[data-agent-docked][data-room-open] .app { max-width: none; }
.icon-btn[hidden] { display: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--edge); border-radius: 12px;
  background: var(--panel); color: var(--text); cursor: pointer;
}

.status {
  margin-bottom: 1rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--line); border-left-width: 6px; border-radius: 12px;
  background: var(--panel); font-weight: 600;
}
.status.ok { border-left-color: var(--ok); color: var(--ok); }
.status.warn { border-left-color: var(--warn); color: var(--warn); }
.status.bad { border-left-color: var(--bad); color: var(--bad); }
.status.idle { border-left-color: var(--mark); }
/* The status row: the plain status line, and while something runs the pill that is the control (features/status-control.js).
   The dot is green while listening, amber when paused or the mic is muted, orange on a call. */
.status-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; }
.status-row > .status { flex: 1 1 100%; }
.status-controls { display: flex; align-items: center; gap: 0.5rem; max-width: 100%; margin-bottom: 1rem; }
.status-pill {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; margin-bottom: 1rem; padding: 0.35rem 1rem 0.35rem 0.85rem;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--panel); color: var(--text);
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
}
.status-controls .status-pill { min-width: 0; margin-bottom: 0; padding-inline: 0.6rem; gap: 0.35rem; font-size: 0.9rem; }
#status-pill-text { overflow: hidden; text-overflow: ellipsis; }
.btn.status-end { flex: none; min-height: 44px; padding: 0.4rem 0.6rem; border-radius: 999px; font-size: 0.85rem; white-space: nowrap; }
.btn.status-end.armed { background: var(--call-end); border-color: var(--call-end); color: var(--on-call-end); }
.status-pill::after {
  content: ""; flex: none; width: 0.45rem; height: 0.45rem; margin-left: 0.1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15rem) rotate(45deg);
}
.status-dot { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--ok); }
.status-pill[data-tone="warn"] .status-dot { background: var(--meter-warn); }
.status-pill[data-tone="call"] .status-dot { background: var(--btn); }
.call-screen .status-row { justify-content: center; }
.call-screen .status-pill, .call-screen .status { background: var(--pr-btn); border-color: var(--pr-edge); color: var(--pr-fg); }
/* The call pill beside it (features/call-pill.js): whether the desk may ring you. The phone mark is green when Available,
   amber when Silent, red for Do not disturb; the words carry the meaning. */
.call-pill {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; margin-bottom: 1rem; padding: 0.35rem 0.9rem 0.35rem 0.75rem;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 0.95rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.call-pill svg { flex: none; color: var(--ok); }
.call-pill svg path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.call-pill[data-mode="silent"] svg { color: var(--meter-warn); }
.call-pill[data-mode="dnd"] svg { color: var(--bad); }
.call-pill[data-mode="dnd"] { border-color: var(--bad); }
.call-screen .call-pill { background: var(--pr-btn); border-color: var(--pr-edge); color: var(--pr-fg); }
.call-screen .call-pill svg { color: var(--pr-fg); }

/* The small sheet the status opens: a native modal dialog at the bottom, so it sits over the call screen too and Escape closes it.
   Its body fills it, so a tap that lands on the dialog itself is a tap on the dimmed page around it. */
dialog.mini-sheet {
  width: min(100%, 26rem); max-width: 100%; margin: auto auto 0; padding: 0;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--panel); color: var(--text);
}
dialog.mini-sheet::backdrop { background: rgba(15, 17, 23, 0.55); }
.mini-sheet-body { padding: 1.1rem 1rem max(1rem, env(safe-area-inset-bottom)); }
.mini-sheet-body > * + * { margin-top: 0.75rem; }
.mini-actions { display: grid; gap: 0.6rem; }
.mini-actions .btn { width: 100%; }
.mini-actions .btn.big { font-size: 1.1rem; }
.mini-actions .btn.call-end { min-height: 60px; }

.desk-line { margin: -0.6rem 0 1rem; padding: 0 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--dim, var(--mark)); }
.desk-line.on { color: var(--ok); }
/* The SI tag beside a desk's name: green while a desk is connected now, grey when not. Small on purpose. */
.si-tag {
  display: inline-block; padding: 0 0.35rem; border-radius: 4px; vertical-align: 0.08em;
  font-size: 0.72rem; font-weight: 800; line-height: 1.35; letter-spacing: 0.04em;
  background: var(--si-off-bg); color: var(--si-off-fg);
}
.si-tag.on { background: var(--si-on-bg); color: var(--si-on-fg); }
/* One small button per agent on the call (features/desk-agents.js); a tap shows its role under the row. */
.desk-agents { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.5rem 0 0.2rem; }
.desk-agent {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%; padding: 0 10px 0 6px;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.desk-agent[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn-edge); }
.desk-agent-role { margin: 0.3rem 0 0; font-size: 13px; color: var(--dim); }
/* On the dark tip card the buttons are outlined in the card's own text color; the open one takes the orange edge. */
.cue-card .desk-agent, .call-tip .desk-agent { background: transparent; color: var(--on-cue); border-color: var(--on-cue-dim); }
.cue-card .desk-agent[aria-pressed="true"], .call-tip .desk-agent[aria-pressed="true"] { background: transparent; color: var(--on-cue); border-color: var(--cue-edge); box-shadow: inset 0 0 0 1px var(--cue-edge); }
.cue-card .desk-agent-role, .call-tip .desk-agent-role { color: var(--on-cue-dim); }

/* ---- cards, buttons, fields ------------------------------------------- */

.card {
  margin-bottom: 1rem; padding: 1rem;
  border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) var(--glass), transparent);   /* a little see-through, so the glow shows at the edges */
}
.card > * + * { margin-top: 0.85rem; }

/* Signed-out card: on a wide screen (iPad, desktop) keep it a card, centered, not a full-width bar. */
#screen-signin { max-width: 30rem; margin-inline: auto; }

.steps { margin: 0.5rem 0 0; padding-left: 1.4rem; }

/* First run: the rest of Tread Connection, one row per app (lib/suite.js) */
.suite-list { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.suite-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.suite-list li:first-child { border-top: 0; }
.suite-app { flex: 1; min-width: 0; }
.suite-app b { display: block; }
.suite-app span { color: var(--dim); font-size: 0.92rem; }
.suite-list li.suite-more { display: block; }
.suite-more summary { min-height: 44px; display: flex; align-items: center; gap: 0.5rem; color: var(--dim); cursor: pointer; list-style: none; }
.suite-more summary::-webkit-details-marker { display: none; }
.suite-more summary::before { content: '\25B8'; transition: transform 0.15s; }
.suite-more details[open] > summary::before { transform: rotate(90deg); }
.suite-more .suite-list { margin: 0; }
.suite-list .btn { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 420px) { .suite-list li { flex-wrap: wrap; } .suite-list .btn { width: 100%; justify-content: center; } }
.steps li { padding: 0.15rem 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.55rem 1rem;
  border: 1px solid var(--edge); border-radius: 12px;
  background: var(--panel); color: var(--text);
  font: inherit; font-weight: 600; line-height: 1.25; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
a.btn { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--btn); border-color: var(--btn-edge); color: var(--on-btn); }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.big { width: 100%; min-height: 60px; font-size: 1.25rem; }
.btn.small { min-height: 44px; padding: 0.4rem 0.8rem; font-size: 0.95rem; }
.btn.wide { grid-column: 1 / -1; min-height: 52px; font-size: 1.1rem; }
.btn[aria-pressed="true"] { border-color: var(--mark); border-width: 2px; }

.linklike {
  min-height: 44px; padding: 0 0.25rem; border: 0; background: none;
  color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer;
}

.field-label, legend { display: block; margin-bottom: 0.35rem; font-weight: 600; }

textarea, input[type="text"], input[type="search"], input[type="password"], input[type="url"], input[type="tel"], #approval-purchase-limit, #approval-purchase-daily-limit, #approval-company, .approval-row select {
  display: block; width: 100%; min-height: 44px; padding: 0.6rem 0.75rem;
  border: 1px solid var(--edge); border-radius: 12px;
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 1rem;   /* 16px or more keeps iOS from zooming on focus */
}
textarea { resize: vertical; min-height: 5.5rem; }
::placeholder { color: var(--dim); opacity: 1; }

.help, .hint { color: var(--dim); font-size: 0.95rem; }
.result { min-height: 1.5rem; margin-top: 0.6rem; }
.result.ok, .help.ok { color: var(--ok); }
.result.bad, .help.bad { color: var(--bad); }

.check {
  display: flex; align-items: flex-start; gap: 0.75rem;
  min-height: 44px; padding: 0.4rem 0; cursor: pointer;
}
.check input { flex: none; width: 24px; height: 24px; margin: 0.1rem 0 0; accent-color: var(--accent); }

.link-row { margin-top: 0; }
.link-row .linklike { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
#phone-setup-link { display: inline-flex; align-items: center; min-height: 44px; }
.notice { padding: 0.75rem 0.9rem; border-left: 4px solid var(--mark); background: var(--bg); border-radius: 8px; }
.limits-notice { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; min-width: 0; }
#limits-notice-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.limits-notice .linklike { flex: none; min-width: 44px; min-height: 44px; }
.phone-tip { margin-bottom: 0.75rem; }
.phone-tip-title { margin: 0 0 0.35rem; font-weight: 700; }
.phone-tip .help { margin: 0 0 0.5rem; }
.phone-tip-steps { margin: 0 0 0.6rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
/* Which name the recording notice says, asked before dialing (shared/notice-names.js). */
.notice-pick { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.notice-pick-title { margin: 0; font-weight: 700; }
.notice-pick .help { margin: 0; }
.notice-pick-names { display: flex; flex-direction: column; gap: 0.5rem; }
.notice-pick-names .btn { width: 100%; overflow-wrap: anywhere; }

/* ---- the cue card (the hero while listening) -------------------------- */

.cue-card {
  margin-bottom: 1rem; padding: 1rem 1rem 0.9rem;
  border: 0; border-left: 8px solid var(--cue-edge); border-radius: 16px;
  background: var(--cue-bg); color: var(--on-cue);
}
.cue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
/* The flag on the newest tip. Held down, it fills with orange until the mark is made. */
.cue-flag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem;
  min-width: 44px; min-height: 44px; padding: 0 0.8rem; border: 1.5px solid var(--on-cue-dim); border-radius: 999px;
  background: linear-gradient(to right, rgba(255, 86, 0, 0.45) calc(var(--hold, 0) * 100%), transparent 0);
  color: var(--on-cue); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.cue-flag svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cue-flag.holding { border-color: var(--cue-edge); }
/* Whose tip it is: the desk's name, or "PaceNotes quick tip". The words carry the meaning; the quick tip is also drawn quieter. */
.source-chip {
  display: inline-block; padding: 0.05rem 0.6rem; border: 1.5px solid currentColor; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; line-height: 1.5; color: var(--on-cue); background: transparent;
}
.source-chip.fast { font-weight: 500; color: var(--on-cue-dim); border-style: dashed; }
.row > .source-chip { flex: none; align-self: flex-start; margin-right: 0.5rem; color: var(--text); }
.row > .source-chip.fast { color: var(--dim, var(--text)); }
.source-chip[hidden] { display: none; }
.cue-label { color: var(--cue-label); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.cue { margin: 0.4rem 0 0.9rem; font-size: 1.5rem; font-weight: 650; line-height: 1.35; }
.cue.quiet { color: var(--on-cue-dim); font-size: 1.05rem; font-weight: 500; }
.cue-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cue-nav .btn { padding: 0.45rem 0.7rem; font-size: 0.95rem; }
.cue-steps { display: inline-flex; align-items: center; gap: 0.35rem; }
.cue-card .btn { background: var(--cue-btn); border-color: var(--cue-btn); color: var(--on-cue-btn); }
.cue-card .btn[aria-pressed="true"] { border-color: var(--cue-edge); }
.cue-card :focus-visible { outline-color: var(--on-cue); }
.cue-pos { min-width: 3rem; color: var(--on-cue-dim); font-size: 0.9rem; text-align: center; white-space: nowrap; }
/* Before the first tip there is no position to show; an empty 3rem slot pushed Later tip away from Earlier tip. */
.cue-pos:empty { min-width: 0; }

/* ---- listening controls ----------------------------------------------- */

.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ask { display: flex; gap: 0.6rem; }
.ask input { flex: 1 1 auto; min-width: 0; }
.ask .btn { flex: none; }

/* ---- transcript ------------------------------------------------------- */

.feed-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.feed-head h2 { flex: 1 1 auto; }
.feed-head > button, .feed-head > details { flex: none; }
.feed { margin: 0.85rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.feed.chat { flex-direction: column-reverse; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.item {
  display: block; padding: 0.55rem 0.8rem; border-radius: 12px; background: var(--bg);
  text-align: left;
}
.item .meta { display: block; margin-bottom: 0.1rem; color: var(--dim); font-size: 0.8rem; font-weight: 600; }
.item .text { display: block; }
.item.cue { background: var(--cue-bg); color: var(--on-cue); border-left: 5px solid var(--cue-edge); font-weight: 650; }
.item.cue .meta { color: var(--on-cue-dim); }
.item.ask { margin-left: 1.5rem; background: var(--btn); color: var(--on-btn); }
.item.ask .meta { color: var(--on-btn); }
.item.answer { margin-right: 1.5rem; background: var(--hl); border-left: 5px solid var(--mark); }
.item.mark { padding: 0.2rem 0.4rem; background: none; color: var(--dim); font-size: 0.95rem; font-style: italic; }
.item.note { padding: 0.2rem 0.4rem; background: none; color: var(--dim); font-size: 0.95rem; font-style: italic; }

/* ---- footer ----------------------------------------------------------- */

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding-top: 0; color: var(--dim); font-size: 0.9rem;
}

/* ---- settings sheet --------------------------------------------------- */

.scrim { position: fixed; inset: 0; z-index: 10; background: var(--scrim); }

.sheet {
  position: fixed; top: var(--pn-bar-h, 0px); right: 0; bottom: 0; z-index: 20;
  width: min(100%, 26rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) 1rem;
  scroll-padding-top: calc(max(1rem, env(safe-area-inset-top)) + 4rem);
  border-left: 1px solid var(--line); background: var(--panel);
  visibility: hidden; transform: translateX(100%);
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.sheet.open { visibility: visible; transform: none; transition: transform 0.22s ease, visibility 0s; }
.sheet:focus { outline: none; }
/* The header stays put and opaque while the sheet scrolls, and its top padding is the status bar and Dynamic Island,
   so no line of content ever shows under them. */
.sheet-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) 0 0.75rem; margin-bottom: 0.25rem;
  background: var(--panel);
}
.sheet-head { flex-wrap: wrap; }
.sheet-head h2 { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.sheet-head .btn { flex: none; white-space: nowrap; }
.voice-dials summary { flex-wrap: wrap; }
.voice-dials summary .help { font-weight: 400; }
.dial-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.dial-group + .dial-group { margin-top: 1rem; }
.dial-group input[type="range"] { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); }
.dial-ends { display: flex; justify-content: space-between; margin-top: 0; }
.support-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.support-row .help { margin: 0; min-width: 0; flex: 1 1 10rem; }
.support-row .btn { flex: none; white-space: nowrap; }
.problem-preview { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; }
.problem-markup { touch-action: none; cursor: crosshair; }
.sheet-head h2:focus { outline: none; }
.sheet-body > * + * { margin-top: 1.25rem; }
.field > * + * { margin-top: 0.6rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.adv summary {
  display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.25rem;
  font-weight: 600; cursor: pointer; list-style: none;
}
.adv summary::-webkit-details-marker { display: none; }
.adv summary::before {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.adv[open] summary::before { transform: rotate(45deg); }
.adv[open] summary { margin-bottom: 0.6rem; }

/* Settings ranked by use (2026-11-10): search on top, Approvals one tap away, set-once groups folded shut. */
.settings-search input { width: 100%; min-height: 44px; }
.settings-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; width: 100%; min-height: 56px;
  padding: 0.6rem 2rem 0.6rem 0.9rem; text-align: left; font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; position: relative;
}
.settings-link::after {
  content: ""; position: absolute; right: 1rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.settings-link-title { font-weight: 600; }
.settings-link .help { margin: 0; }
.settings-group { border-top: 1px solid var(--line); }
.settings-group + .settings-group { margin-top: 0; }
.settings-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 52px; padding: 0 0.25rem;
  font-weight: 600; cursor: pointer; list-style: none;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::after {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.4rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease;
}
.settings-group[open] > summary::after { transform: rotate(-135deg); }
.settings-group[open] { padding-bottom: 1rem; }
.settings-group > :not(summary) + :not(summary) { margin-top: 1.25rem; }
.settings-group.solo > .field:first-of-type > h3.mini:first-child { display: none; }
.settings-group.solo > .field:first-of-type > h3.mini:first-child + * { margin-top: 0; }
.search-miss { display: none !important; }
@media (prefers-reduced-motion: reduce) { .settings-group > summary::after { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.open, .adv summary::before { transition: none; }
}

@media (min-width: 40rem) {
  .cue { font-size: 1.75rem; }
}

/* ---- v2 additions ------------------------------------------------------ */

h3.mini { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
ul.plain { margin: 0; padding: 0; list-style: none; }
ul.plain li { padding: 0.2rem 0; }
.rows { display: flex; flex-direction: column; gap: 0.5rem; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
/* ul.plain li (0.2rem 0) is more specific than .row and was zeroing the side padding. */
ul.plain li.row { padding: 0.6rem 0.85rem; flex-wrap: wrap; }
ul.plain li.row > .row-text { flex-basis: 11rem; }
.row-text { flex: 1 1 auto; min-width: 0; }
.row-text .row-title { display: block; font-weight: 600; overflow-wrap: break-word; }
.row-text .row-sub { display: block; margin-top: 0.2rem; color: var(--dim); font-size: 0.9rem; }
.row-actions { display: flex; flex: none; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.row.confirm { flex-wrap: wrap; border-color: var(--bad); }
.row.confirm .row-text { flex-basis: 100%; }
.history-note { color: var(--dim); }
.btn.reason .reason-art { flex: none; display: inline-flex; margin-right: 0.7rem; color: var(--dim); }
.btn.reason[aria-checked="true"] .reason-art { color: var(--accent); }
.btn.reason .reason-art svg { width: 64px; height: 40px; }
.btn.reason .reason-art .art-live { fill: var(--bad); }
.btn.reason .reason-art .art-live-text { fill: #fff; font: 700 7px sans-serif; }
.btn.reason .reason-art .art-cutout { fill: var(--bg); stroke: none; }
.btn.reason .reason-text { text-align: left; }
.row .btn { flex: none; }
.row.homework { border-left: 5px solid var(--mark); }

.select {
  display: block; width: 100%; min-height: 44px; padding: 0.5rem 0.7rem;
  border: 1px solid var(--edge); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit;
}

.dial { min-width: 0; margin: 0; padding: 0; border: 0; }
.dial legend { padding: 0; }
.dial-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dial-btn {
  flex: 1 1 6rem; flex-direction: column; gap: 0.1rem;
  padding-left: 0.5rem; padding-right: 0.5rem;
  /* body sets overflow-wrap: anywhere; a gear or mode name breaks only between words */
  overflow-wrap: normal; word-break: normal;
}
.dial-name { white-space: nowrap; }
.dial-sub { font-size: 0.8rem; font-weight: 500; line-height: 1.1; }
.dial-btn[aria-pressed="true"] { border-color: var(--mark); border-width: 2px; background: var(--hl); }
.dial-btn.locked { color: var(--dim); }
.scale-hint { display: block; font-size: 0.8rem; font-weight: 400; color: var(--dim); }
/* Until the config has loaded (first run, before the OK to listen) the choices have no rows, so don't show a heading with nothing under it. */
.choice-set:has(.choice-rows:empty) { display: none; }
.fine-print, .fine-print a { font-size: 0.8rem; }
@media (pointer: coarse) {
  .fine-print a { display: inline-flex; align-items: center; min-height: 44px; }
}

.results .btn { width: 100%; justify-content: flex-start; text-align: left; }
.more { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1rem; }

.toast {
  position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 40;
  max-width: min(92vw, 28rem); transform: translateX(-50%);
  padding: 0.65rem 1rem; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 600;
}

/* ---- prompter ---------------------------------------------------------- */

.prompter {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: var(--pr-bg); color: var(--pr-fg);
}
.prompter-status { min-height: 1.5rem; color: var(--pr-dim); font-size: 1rem; }
.prompter-text {
  flex: 1 1 auto; display: flex; align-items: center; margin: 0;
  font-size: clamp(2rem, 9vw, 4.5rem); font-weight: 700; line-height: 1.2; white-space: pre-line;
}
.prompter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.prompter-bar .btn { background: var(--pr-btn); color: var(--pr-fg); border-color: var(--pr-edge); }
.prompter-bar .cue-pos { color: var(--pr-dim); }
body.prompter-view { background: var(--pr-bg); }
/* Phones (features/phone-view.js): the large print view comes from turning the phone sideways, so its button goes, and the
   pop-out goes on phones and in the native shells. Sideways the tip is sized to the short screen and the bar stays on it. */
html.phone #prompter-open, html.no-popout #popout-open { display: none; }
/* The agent window's Pop out opens a second browser window, which a phone and the phone app do not have. There the window is the
   bottom sheet (or the side panel on an iPad) and nothing offers a pop-out. */
html.no-popout .agent-dock-toggle { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .prompter { gap: 0.5rem; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .prompter-text { font-size: clamp(1.5rem, 10vh, 3.25rem); line-height: 1.15; overflow-y: auto; }
  .prompter-status { min-height: 1.25rem; }
}

/* ---- pairing, usage ---------------------------------------------------- */

.pair { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.pair-code { font-size: 2rem; font-weight: 800; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.pair-qr { width: 12rem; height: 12rem; background: #fff; border-radius: 8px; }
.usage > * + * { margin-top: 0.4rem; }
.billing { margin-top: 0.8rem; }
.billing > * + * { margin-top: 0.6rem; }
.billing .notice-row { display: flex; align-items: flex-start; gap: 0.5rem; justify-content: space-between; }
.billing input[type="number"], .billing input[type="text"], .billing select { width: 100%; max-width: 14rem; }
.bars { display: block; width: 100%; max-width: 20rem; height: 2.5rem; fill: var(--mark); }

/* ---- calling ---------------------------------------------------------- */
.calling-code { font-size: 2rem; font-weight: 800; letter-spacing: 0.2em; text-align: center; }
.btn.danger { border-color: var(--bad); color: var(--bad); }

/* Make a call, on the main screen. */
.call-entry { margin: 0 0 0.75rem; }
.btn.call-open { width: 100%; min-height: 52px; font-size: 1.1rem; }

/* The dial pad (the calling sheet) and the keypad on the call screen. Three keys a row, phone style. */
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; width: 100%; max-width: 20rem; margin: 0.75rem auto 0; }
.key {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem;
  min-height: 62px; padding: 0.25rem; border: 1px solid var(--edge); border-radius: 18px;
  background: var(--bg); color: var(--text); font: inherit; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.key:active { background: var(--hl); }
.key-d { font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.key-l { min-height: 0.95rem; color: var(--dim); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; }
.key-gap { display: block; }
.calling-from { max-width: 20rem; margin: 0.6rem auto 0; }
.calling-from-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.calling-from-line { margin: 0; font-size: 0.95rem; color: var(--muted, inherit); }
.calling-from-row .linklike { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.key-back svg { width: 1.9rem; height: 1.9rem; }
input.dial-number { font-size: 1.6rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.btn.call-go {
  display: flex; width: 100%; max-width: 20rem; min-height: 60px; margin: 0.9rem auto 0; border-radius: 30px;
  background: var(--call-go); border-color: var(--call-go); color: var(--on-call-go); font-size: 1.25rem;
  opacity: 1;
}

.btn.call-go:disabled { opacity: 0.5; }

/* The call screen covers the page for the whole call, the way a phone's own call screen does. Its own scroll, no bounce. */
html.in-call, html.in-call body { overflow: hidden; }
.call-screen {
  position: fixed; inset: var(--pn-bar-h, 0px) 0 0; z-index: 25;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow-y: auto; overscroll-behavior: none;
  background: var(--pr-bg); color: var(--pr-fg);
}
.call-screen > * { flex: none; width: 100%; max-width: 32rem; margin-left: auto; margin-right: auto; }
.call-screen > * + * { margin-top: 0; }
.call-head { padding-top: 0.75rem; text-align: center; }
.call-who { font-size: clamp(1.75rem, 8vw, 2.5rem); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.call-state { margin-top: 0.25rem; color: var(--pr-dim); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.call-route { margin-top: 0.15rem; color: var(--pr-dim); font-size: 0.95rem; }
/* The call's voice pattern, sized to read in a recording of the screen. */
.call-pattern { display: inline-block; margin-top: 0.35rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--pr-btn); color: var(--pr-fg);
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; }
.call-pattern[hidden] { display: none; }
.call-pattern-swap { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.call-pattern-swap[hidden] { display: none; }
.call-pattern-swap button { min-width: 2.6rem; padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--pr-btn); background: transparent; color: inherit; font-weight: 600; }
.call-pattern-swap button[aria-pressed="true"] { background: var(--pr-btn); color: var(--pr-fg); }
.call-remote .call-pattern:not([hidden]) { display: block; width: fit-content; }
.call-note { color: var(--pr-dim); font-size: 0.95rem; text-align: center; }
.call-note:empty { display: none; }
.call-audio { padding: 0.75rem 0.9rem; border-left: 5px solid var(--cue-edge); border-radius: 12px; background: var(--pr-btn); color: var(--pr-fg); font-weight: 600; }
.call-screen .notice { background: var(--pr-btn); color: var(--pr-fg); }
.call-screen .notice > * + * { margin-top: 0.6rem; }
.call-screen .help { color: var(--pr-dim); }
.call-screen .result.bad { color: var(--pr-bad); }
/* The middle takes the free space and never shrinks under its content, so the controls sit at the bottom and a long list
   scrolls the screen instead of sliding under them. With the keypad open the keypad takes the middle, as on a phone. */
.call-body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.call-screen.keypad-open .call-body { display: none; }
.call-screen.keypad-open .call-keypad { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.call-plan { padding: 0.9rem 1rem; border-radius: 16px; background: var(--panel); color: var(--text); }
.call-tip { padding: 0.9rem 1rem; border-left: 6px solid var(--cue-edge); border-radius: 16px; background: var(--cue-bg); color: var(--on-cue); }
.call-tip .cue { margin: 0.3rem 0 0.7rem; font-size: 1.4rem; line-height: 1.35; }
.call-tip .cue.quiet { font-size: 1.05rem; }
.call-tip .btn { background: var(--cue-btn); border-color: var(--cue-btn); color: var(--on-cue-btn); }
.call-screen .call-said .btn, .btn.call-quiet { background: var(--pr-btn); border-color: var(--pr-edge); color: var(--pr-fg); }
.btn.call-quiet { align-self: center; width: auto; }
.call-lines { max-height: 32vh; margin-top: 0.6rem; overflow-y: auto; overscroll-behavior: contain; }
.call-lines .item { background: var(--pr-btn); color: var(--pr-fg); }
.call-lines .item .meta { color: var(--pr-dim); }
.call-lines .item.me { margin-left: 2rem; }
.call-lines .item.them { margin-right: 2rem; }
.call-keypad .keys { margin-top: 0.25rem; }
.call-keypad .key { background: var(--pr-btn); border-color: var(--pr-edge); color: var(--pr-fg); }
.call-keypad .key:active { background: var(--pr-edge); }
.call-keypad .key-l { color: var(--pr-dim); }
.keypad-digits { min-height: 2.2rem; color: var(--pr-fg); font-size: 1.6rem; letter-spacing: 0.12em; text-align: center; font-variant-numeric: tabular-nums; }
/* Two thin bars: how loud the call hears you, and how loud they are reaching you. Flat bars with a voice on the line mean the
   sound is stuck, which Fix sound is for. */
.call-levels { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.4rem 0.6rem; color: var(--pr-dim); font-size: 0.85rem; }
.lvl { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--pr-btn); }
.lvl-fill { display: block; width: 100%; height: 100%; background: var(--cue-edge); transform: scaleX(var(--lvl, 0)); transform-origin: left center; }
.call-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.6rem; }
.call-controls .remote-controls { grid-column: 1 / -1; }
.call-ctl {
  min-height: 64px; padding: 0.4rem; border: 1px solid var(--pr-edge); border-radius: 16px;
  background: var(--pr-btn); color: var(--pr-fg); font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.call-ctl[aria-pressed="true"], .call-ctl[aria-expanded="true"] { background: var(--pr-fg); border-color: var(--pr-fg); color: var(--pr-bg); }
.call-ctl:disabled { opacity: 0.5; cursor: not-allowed; }
.call-screen :focus-visible { outline-color: var(--pr-fg); }
.btn.call-end, .btn.call-done { width: 100%; min-height: 64px; border-radius: 32px; font-size: 1.25rem; }
.btn.call-end { background: var(--call-end); border-color: var(--call-end); color: var(--on-call-end); }

/* End call (and the note under it) stays at the bottom edge of the screen however the rest is laid out. When everything fits nothing
   scrolls; when it does not, the part above scrolls and this stays put. */
.call-foot { display: flex; flex-direction: column; gap: 0.5rem; }
.call-foot:empty { display: none; }
html:not([data-duo-posture]) .call-foot { position: sticky; bottom: calc(-1 * max(0.75rem, env(safe-area-inset-bottom))); z-index: 2; margin-top: auto;
  padding: 0.35rem 0 max(0.75rem, env(safe-area-inset-bottom)); background: inherit; }
html:not([data-duo-posture]) .call-screen.ended .call-foot { display: contents; }
/* A phone on its side: little height, so the header is tighter and the level bars give way. */
@media (max-height: 480px) {
  html:not([data-duo-posture]) .call-who { font-size: 1.25rem; }
  html:not([data-duo-posture]) .call-head { padding-top: 0; }
  html:not([data-duo-posture]) .call-levels { display: none; }
  html:not([data-duo-posture]) .call-controls .call-ctl { min-height: 44px; }
  html:not([data-duo-posture]) .btn.call-end, html:not([data-duo-posture]) .btn.call-done { min-height: 48px; }
}
/* After the call: Done right under the header, never at the bottom edge, where a short screen, the home bar or a band over the
   bottom of the page can hide it. Done is the one way out (no corner X), so the header keeps the screen's own margins. */
html:not([data-duo-posture]) .call-screen.ended .call-head { order: -3; }
html:not([data-duo-posture]) .call-screen.ended #call-done { order: -2; }
html:not([data-duo-posture]) .call-screen.ended #call-warning { order: -1; }

/* One page (Jake, 2026-11-03): on a phone everything for the call fits one screen. From the top: who and the time, the controls
   (Speaker, Mute, Pause, More), the newest tip big, earlier tips as keys, Show what was said. End call is fixed at the bottom.
   Only the middle scrolls, inside itself. More holds Keypad, Fix sound, Lock, Camera and Stop writing this down. A Duo keeps its
   own regions (the rules for it are further down, keyed to data-duo-posture), where More does not exist and all of these show. */
.call-more { display: contents; }
#call-more { display: none; }
html:not([data-duo-posture]) .call-screen { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; gap: 0.5rem; padding-top: max(0.5rem, env(safe-area-inset-top)); padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
html:not([data-duo-posture]) .call-head { padding-top: 0.25rem; }
html:not([data-duo-posture]) .call-who { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
html:not([data-duo-posture]) .call-state { margin-top: 0.1rem; font-size: 1rem; }
html:not([data-duo-posture]) .call-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
html:not([data-duo-posture]) .call-controls > .call-ctl { flex: 1 1 0; min-width: 0; }
html:not([data-duo-posture]) .call-controls > .remote-controls, html:not([data-duo-posture]) .call-more { flex: 0 0 100%; }
html:not([data-duo-posture]) .call-controls .call-ctl { min-height: 52px; padding: 0.3rem 0.2rem; border-radius: 14px; font-size: 0.95rem; }
html:not([data-duo-posture]) #call-more { display: block; }
html:not([data-duo-posture]) .call-controls .remote-controls { gap: 0.5rem; }
html:not([data-duo-posture]) .call-controls .remote-controls .call-ctl { flex: 1 1 0; min-height: 44px; }
html:not([data-duo-posture]) .call-more { display: none; }
html:not([data-duo-posture]) .call-more .call-ctl { min-height: 48px; }
html:not([data-duo-posture]) .call-screen.more-open .call-more { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; }
/* Fix sound stays in view while the sound has a problem, even with More closed. */
html:not([data-duo-posture]) .call-screen.audio-problem:not(.more-open) .call-more { display: grid; }
html:not([data-duo-posture]) .call-screen.audio-problem:not(.more-open) .call-more > :not(#call-fix) { display: none; }
html:not([data-duo-posture]) .call-screen:not(.more-open) #call-stop { display: none; }
html:not([data-duo-posture]) .btn.call-quiet { align-self: stretch; width: 100%; min-height: 44px; }
html:not([data-duo-posture]) .call-audio { padding: 0.5rem 0.8rem; }
html:not([data-duo-posture]) .call-screen .notice { padding: 0.6rem 0.8rem; }
html:not([data-duo-posture]) .call-screen .notice > * + * { margin-top: 0.4rem; }
html:not([data-duo-posture]) .call-body { flex: 1 1 0; min-height: 9rem; overflow-y: auto; overscroll-behavior: contain; gap: 0.5rem; }
html:not([data-duo-posture]) .call-screen.keypad-open .call-body { display: none; }
/* More adds a row of keys and Stop writing this down. On a short screen (a phone in Safari, under its bars) the middle's 9rem floor
   then pushed the screen past its height, so two scrollers met: Another tip was cut in half and Show what was said and the level
   bars sat under End call. With More open the middle does not scroll by itself: everything above End call scrolls as one. */
html:not([data-duo-posture]) .call-screen.more-open:not(.lines-open) .call-body { flex: 1 0 auto; min-height: 0; overflow: visible; }
html:not([data-duo-posture]) .call-screen.keypad-open .call-keypad { flex: 1 1 0; min-height: 0; overflow-y: auto; justify-content: flex-start; }
html:not([data-duo-posture]) .call-keypad .keys { gap: 0.4rem; }
html:not([data-duo-posture]) .call-keypad .key { min-height: 44px; }
html:not([data-duo-posture]) .keypad-digits { min-height: 1.6rem; font-size: 1.3rem; }
html:not([data-duo-posture]) .call-levels { font-size: 0.8rem; }
html:not([data-duo-posture]) .btn.call-end, html:not([data-duo-posture]) .btn.call-done { min-height: 56px; }
/* The newest tip is the first thing in the middle; a very long one scrolls inside its own card, so the keys are never pushed out of reach. */
html:not([data-duo-posture]) .call-tip { flex: none; max-height: 40vh; overflow-y: auto; padding: 0.7rem 0.9rem; }
html:not([data-duo-posture]) .call-tip .cue { margin: 0.2rem 0 0; font-size: clamp(1.25rem, 5.4vw, 1.6rem); line-height: 1.3; overflow-wrap: anywhere; }
html:not([data-duo-posture]) .call-tip .cue.quiet { font-size: 1rem; }
html:not([data-duo-posture]) .call-tip .cue.long { font-size: 1.1rem; line-height: 1.35; }
/* Earlier tips: keys in two columns. The tip is three lines on the key; an open key shows all of it across both columns. */
.call-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.call-tips:not(:has(> :not([hidden]))) { display: none; }
.call-tile {
  min-height: 56px; padding: 0.5rem 0.7rem; border: 1px solid var(--pr-edge); border-left: 5px solid var(--cue-edge); border-radius: 14px;
  background: var(--pr-btn); color: var(--pr-fg); font: inherit; font-size: 0.95rem; line-height: 1.3; text-align: left; cursor: pointer;
  overflow-wrap: anywhere;
}
.call-tile-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.call-tile.priority-red { border-left-color: #dc4545; }
.call-tile.priority-yellow { border-left-color: #c58a18; }
.call-tile.priority-green { border-left-color: #359765; }
.call-tile.open { grid-column: 1 / -1; }
.call-tile.open .call-tile-text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.call-tile-another { display: flex; align-items: center; justify-content: center; border-left-width: 1px; font-weight: 600; text-align: center; }
.call-tile:active { background: var(--pr-edge); }
/* What was said takes the place of the tips; its button turns into the way back. */
html:not([data-duo-posture]) .call-screen.lines-open .call-tip, html:not([data-duo-posture]) .call-screen.lines-open .call-tips, html:not([data-duo-posture]) .call-screen.lines-open .call-plan { display: none; }
html:not([data-duo-posture]) .call-screen.lines-open .call-said { order: -1; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
html:not([data-duo-posture]) .call-said { flex: none; }
html:not([data-duo-posture]) .call-screen.lines-open .call-lines { flex: 1 1 0; min-height: 0; max-height: none; margin-top: 0; }
html:not([data-duo-posture]) .call-said .btn { width: 100%; min-height: 44px; }
.call-lines .item.agent { margin-right: 2rem; }
.call-lines .item .meta { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .lvl-fill { transition: transform 0.08s linear; } }

/* v0.4.7: the start screen. One big button, a line of what is remembered, and everything else closed. */
.start-card .btn.big { margin-top: 0; }
/* What Start does, under its name ("Listen with Grant") and one line (2026-10-22). */
.listen-head { margin-bottom: 8px; }
#brief { min-height: 44px; height: 44px; overflow-y: hidden; }
#brief:focus, #brief.grow { min-height: 88px; overflow-y: auto; }
.listen-name { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.reason-card { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, #d9dce5); }
.reason-card .field-label { margin-top: 0; }
.settings-line { margin-top: 8px; font-size: 15px; opacity: 0.8; }
.start-hint { margin-top: 12px; }
.start-hint.blocked { color: var(--warn); font-weight: 600; }
.status.warn { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
.home-more > summary { display: flex; align-items: center; min-height: 44px; padding: 0 4px; cursor: pointer; color: var(--dim); font-weight: 600; list-style: none; }
.home-more > summary::-webkit-details-marker { display: none; }
.home-more > summary::before { content: "\25B8"; margin-right: 0.5rem; }
.home-more[open] > summary::before { content: "\25BE"; }
@media (min-width: 700px) { .home-more > summary { display: none; } }
.settings-line .linklike, .reason-summary .linklike { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.reasons { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.reasons[hidden] { display: none; }
.btn.reason { width: 100%; justify-content: flex-start; text-align: left; font-weight: 500; }
.btn.reason[aria-checked="true"] { border-color: var(--mark); border-width: 2px; background: var(--hl); font-weight: 700; }
.btn.reason::before { content: ""; flex: none; box-sizing: border-box; width: 22px; height: 22px; margin-right: 0.7rem; border: 2px solid var(--dim); border-radius: 50%; }
.btn.reason[aria-checked="true"]::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, transparent 6px); }
.reason-card #basis-other-toggle { margin-top: 8px; }
.reason-summary { margin-top: 16px; font-size: 15px; }
.reason-summary .field-label { display: block; margin: 0 0 2px; }
.more { margin-top: 12px; }
.more > summary { padding: 12px 0; font-weight: 600; cursor: pointer; }
.more > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 2026-10-22, the start screen folded: the Response dropdown in place of the three mode buttons (the menu opens over what is
   under it, the chosen row checked, the speaker for Voice response as its last row), and Add details over the optional
   session details. Closed, Add details and More options share one line; the one that opens takes the whole width. */
.response-row { margin-top: 8px; }
.call-settings > summary { width: fit-content; padding: 8px 0; cursor: pointer; font-size: 0.9rem; }
.call-settings #more-options > summary { display: none; }
.call-settings #live-sources { margin: 0; padding: 0; border: 0; }
#start { display: block; width: 100%; margin-top: 0; }
/* Start stays in reach: it sticks to the bottom of the screen while the card scrolls past, so a first-time member sees one
   obvious action without scrolling (2026-11-13, home simplify). The hint rides above it. */
.start-dock {
  position: sticky; bottom: 0; z-index: 5; margin: 8px -1px 0; padding: 12px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--panel, var(--bg)); box-shadow: 0 -10px 12px -6px var(--panel, var(--bg));
}
.start-dock .start-hint { margin: 0 0 8px; font-size: 0.875rem; }
html.suite .start-dock { padding-bottom: 8px; } /* the tab bar already clears the home indicator */
#more-options > .response-row { margin-top: 4px; }
#more-options > .settings-line { margin: 4px 0 12px; }
#basis-other-toggle { min-height: 44px; }
/* Smaller picker rows and art on a phone, so the three choices and Start share the first screen. */
@media (max-width: 480px) {
  .btn.reason { min-height: 44px; padding-block: 6px; }
  .btn.reason .reason-art { margin-right: 0.5rem; }
  .btn.reason .reason-art svg { width: 44px; height: 28px; }
  .reasons { gap: 6px; }
  #basis-help:empty { display: none; }
  .reason-card .field-label { font-size: 0.95rem; }
}
/* The "waiting on you" line is quiet: a thin neutral row with a plain Review button, never a second primary action. */
#agent-asks { padding: 0.25rem 0.5rem 0.25rem 0.8rem; margin: 4px 0; border-color: var(--line, var(--edge)); font-size: 0.95rem; }
#agent-asks > .btn { margin-left: auto; }
.response { position: relative; display: inline-block; max-width: 100%; }
.response-summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0.5rem 0.9rem;
  border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); color: var(--text);
  font-size: 0.95rem; cursor: pointer; list-style: none;
}
.response-summary::-webkit-details-marker { display: none; }
.response-summary::after { content: ""; width: 7px; height: 7px; margin: -4px 0 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.response[open] .response-summary::after { margin-top: 4px; transform: rotate(225deg); }
.response-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.response-k { color: var(--dim); }
.response-current { font-weight: 600; }
.response-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: max-content; min-width: 100%; max-width: min(340px, calc(100vw - 2rem));
  padding: 4px; background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.response-choices { display: flex; flex-direction: column; }
.response-opt {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 4px; align-items: baseline; width: 100%; min-height: 44px;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  overflow-wrap: normal; touch-action: manipulation;
}
.response-opt:hover, .response-opt[aria-checked="true"] { background: var(--hl); }
.response-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.response-check { visibility: hidden; color: var(--accent); font-weight: 700; }
.response-opt[aria-checked="true"] .response-check { visibility: visible; }
.response-name { font-size: 0.95rem; font-weight: 600; }
.response-blurb { grid-column: 2; font-size: 0.8rem; color: var(--dim); }
.response-speaker { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--dim); }
.response-speaker .linklike { display: inline-flex; align-items: center; min-height: 44px; padding: 0; vertical-align: middle; }
.start-details { margin-top: 8px; }
.start-details > summary { padding: 12px 0 8px; font-weight: 600; cursor: pointer; }
.start-details > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#setup > .start-details:not([open]) { display: inline-block; margin-right: 1.5rem; }
#setup > .more:not([open]) { display: inline-block; margin-bottom: 0; }
/* Fit at 390 x 844 (review, 2026-10-22): the links under the start card sit right on the footer, and the footer's 44 px
   Settings button gives it its height, so the first-run screen fits without scrolling too. */
.link-row.more { margin-bottom: 0; }
/* What is already open elsewhere stays in sight under the line on what Start will do: it says what Start does. */
.start-card .sess-open-line { margin: 4px 0 0; font-size: 0.85rem; }
/* Settings > Tips: the Response choice and How much should PaceNotes say, one radio row each (lib/start-screen.js choiceRows). */
.choice-set + .choice-set { margin-top: 1rem; }
.choice-rows { display: flex; flex-direction: column; }
.choice-row { padding: 0.35rem 0; }
.choice-words { display: flex; flex-direction: column; min-width: 0; }
.choice-name { font-weight: 600; }
.choice-blurb { font-size: 0.875rem; }
.job-text { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.job-row { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line, #d9dce5); }

/* ---- flags, notes and the mode line ---------------------------------------------------------------------------- */
.moments { margin-bottom: 0.9rem; }
/* The chips after a flag, under the tip card. */
.flag-toast { margin-bottom: 1rem; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--mark); }
.mode-line { display: inline-block; margin: 0 0 0.5rem; padding: 0.15rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--hl); font-weight: 700; }
.mode-line.note, .mode-line.mic { border-color: var(--edge); background: var(--panel); }
.mode-line.all { background: var(--btn); color: var(--on-btn); border-color: var(--btn-edge); }
.moment-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.btn.moment-btn { min-height: 48px; font-weight: 700; }
.btn.moment-btn[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn-edge); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9em; overflow: auto; overscroll-behavior: contain; }
.timeline { position: relative; height: 2rem; margin: 0.5rem 0.4rem; border-bottom: 2px solid var(--edge); }
.timeline button { position: absolute; bottom: -0.55rem; width: 1.1rem; height: 1.1rem; margin-left: -0.55rem; padding: 0; border-radius: 50%; border: 2px solid var(--btn-edge); background: var(--btn); cursor: pointer; }
.timeline button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.item.mark.flag { border-left: 4px solid var(--btn-edge); }

/* ---- questions for this call (design 12.28) ------------------------------------------------------------------------------
   Each row: a 44 px check box, the question (it wraps), then Skip (an X) and Later (a clock), 44 px square on a phone, and a
   small menu button. Drawn lines, never emoji, so they look the same everywhere. The list sits in the start card before
   Start and in the box under the tip while listening. */
.cp-card > * + * { margin-top: 0.6rem; }
.cp-title { margin: 0; font-size: 1.1rem; }
.cp-card .help { margin-top: 0.2rem; }
.cp-body > * + * { margin-top: 0.6rem; }
/* The one questions box: a text field that is always there, a round mic inside it while a session runs (it turns into a stop
   square with a timer while it listens), and "Make a list from the call" as a small link under it. */
.cp-box > * + * { margin-top: 0.35rem; }
.cp-box-field { position: relative; }
.cp-box textarea { min-height: 52px; padding-top: 0.8rem; padding-bottom: 0.8rem; resize: none; overflow-y: auto; max-height: 9rem; field-sizing: content; }
.cp-box.has-mic textarea { padding-right: 4.25rem; }
.cp-mic {
  position: absolute; right: 4px; bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  min-width: 44px; height: 44px; padding: 0 0.6rem; border: 1px solid var(--btn-edge); border-radius: 999px;
  background: var(--btn); color: var(--on-btn); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.cp-mic svg { flex: none; }
.cp-mic-on path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cp-mic-stop rect { fill: currentColor; }
.cp-mic .cp-mic-stop, .cp-mic.recording .cp-mic-on { display: none; }
.cp-mic.recording .cp-mic-stop { display: block; }
.cp-mic.recording { background: var(--cue-bg); border-color: var(--cue-edge); color: var(--on-cue); }
.cp-mic:disabled { opacity: 0.6; cursor: progress; }
.cp-mic-time:empty { display: none; }
.cp-box-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; }
.cp-box-row .btn { margin-left: auto; }
.linklike.cp-make { padding: 0 0.15rem; font-size: 0.95rem; }
.cp-progress, .cp-prompter-line { font-weight: 600; }
.cp-group-name { margin: 0.75rem 0 0.25rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.cp-rows { list-style: none; margin: 0; padding: 0; }
.cp-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px 36px; align-items: start; gap: 0.4rem;
  padding: 0.35rem 0; border-bottom: 1px solid var(--line);
}
.cp-row:last-child { border-bottom: 0; }
.cp-body-text { min-width: 0; padding-top: 0.6rem; }
.cp-text { margin: 0; overflow-wrap: normal; word-break: normal; line-height: 1.35; }
.cp-answer { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--dim); overflow-wrap: anywhere; }
.cp-by { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--dim); }
.cp-desk { display: inline-block; margin: 0.15rem 0 0; padding: 0 0.5rem; border: 1px dashed var(--edge); border-radius: 999px; background: none;
  font: inherit; font-size: 0.85rem; color: var(--dim); cursor: pointer; }
p.cp-desk { cursor: default; }
.cp-desk-note { font-style: italic; overflow-wrap: anywhere; }
.cp-tag, .cp-mark { display: inline-block; margin-top: 0.25rem; padding: 0 0.5rem; border: 1px solid var(--edge); border-radius: 999px; font-size: 0.85rem; color: var(--text); }
.cp-mark { flex: none; margin: 0.6rem 0 0; white-space: nowrap; }
.cp-row.cp-read-only { display: flex; flex-wrap: wrap; }
.cp-read-only .cp-body-text { flex: 1 1 12rem; min-width: 0; }
@media (max-width: 600px) {
  .cp-read-only .cp-body-text { flex-basis: 100%; }
  .cp-read-only .cp-mark { margin-top: 0; }
}
.cp-row.state-dropped .cp-text { text-decoration: line-through; color: var(--dim); }
.cp-check, .cp-skip, .cp-later, .cp-more {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cp-more { width: 36px; border-color: transparent; background: transparent; }
.cp-check svg, .cp-skip svg, .cp-later svg, .cp-more svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cp-more svg { stroke-width: 3.5; }
/* An empty box until it is checked; then filled, with the check showing. */
.cp-check[aria-checked="false"] svg { visibility: hidden; }
.cp-check[aria-checked="true"], .cp-skip[aria-pressed="true"], .cp-later[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn-edge); }
.cp-check:focus-visible, .cp-skip:focus-visible, .cp-later:focus-visible, .cp-more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cp-menu { grid-column: 2 / -1; padding-bottom: 0.35rem; }
.cp-edit { margin-top: 0.25rem; }
.cp-undo { margin: 0; }
.cp-tip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.cp-tip-label { margin: 0; font-weight: 600; color: var(--dim); }
.cp-controls { display: flex; gap: 0.5rem; }
.cp-history { margin: 0.75rem 0; }
.prompter .cp-prompter-line { color: var(--pr-fg); }


/* ---- the moving background: voice flow ----------------------------------------------------------------------------------
   One canvas behind everything (lib/pace-flow.js), drawn at 0.4 scale and stretched by the browser, which is the blur. It fades to
   the page color by 400 px. The cards above are lightly see-through (--glass 72% light, 82% dark) with no backdrop blur on
   purpose. The tip card is solid TC dark and stays so. */
.flow { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 400px; pointer-events: none; }

/* The Tread Connection worker (features/agent-char.js): a canvas in the corner, over the page and under every sheet and scrim. */
.agent-char {
  position: fixed; right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); z-index: 5;
  width: 150px; height: 200px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
}
.agent-char.ready { opacity: 1; }
.agent-char canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 640px), (max-height: 480px) { .agent-char { width: 96px; height: 128px; } }
@media (max-width: 640px) {
  body:where(:has(.agent-char.ready)) { padding-bottom: calc(128px + max(0.75rem, env(safe-area-inset-bottom))); }
  .agent-char.ready.editing { opacity: 0; }
}
/* Keep corner characters in their own space below the phone's controls, even after dragging. */
@media (max-width: 639px) {
  body:has(.agent-char.ready, > .rc-companion) { padding-bottom: calc(224px + env(safe-area-inset-bottom)); }
  body:has(> #app) .agent-char, body:has(> #app) > .rc-companion {
    position: absolute; left: auto !important; top: auto !important; right: 16px !important; bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
}
@media (prefers-reduced-motion: reduce) { .agent-char { transition: none; } }
@media print { .agent-char { display: none; } }
body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 320px; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 100% at 20% 120%, var(--floor-b), transparent 70%), radial-gradient(90% 100% at 85% 125%, var(--floor-a), transparent 70%);
}
@media (prefers-reduced-transparency: reduce) { .card { background: var(--panel); } }
/* A feathered veil behind the page title only: it keeps the title readable when the glow peaks and fades to nothing under it. */
.top::before {
  content: ""; position: absolute; z-index: -1;
  left: -1rem; right: -1rem; top: calc(-1rem - env(safe-area-inset-top, 0px)); bottom: -0.9rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--veil) 80%, transparent) 0%, color-mix(in srgb, var(--veil) 80%, transparent) 62%, color-mix(in srgb, var(--veil) 36%, transparent) 84%, transparent 100%);
}
/* A tip arriving: the engine writes --arrive (1 down to 0) on the tip card, so the halo is drawn from the same clock as the canvas. */
.cue-card { box-shadow: 0 0 calc(var(--arrive, 0) * 34px) calc(var(--arrive, 0) * 5px) rgba(255, 110, 30, calc(var(--arrive, 0) * 0.62)); }
.cue-card.arrived-static { outline: 2px solid var(--cue-label); outline-offset: 2px; }   /* reduced motion or setting off: a quiet ring instead of a pulse */
html[data-motion="off"] .cue-card { box-shadow: none; }


/* ---- the store shells (v0.4.21) ----------------------------------------------------------------------------------------
   app.js sets html.shell inside the iOS and Android apps only (Capacitor.isNativePlatform() is true there and nowhere else; the native extras come from native/pacenotes-bridge.js). There the page
   acts like an app: the header stays put, only the middle scrolls, nothing rubber-bands, and a long press does not select
   button text or open a callout. Safari, Chrome, the desktop app and the extension never get the class. The tips, the
   transcript and every field stay selectable. Capacitor already turns off pinch zoom and the root bounce in the web view. */
html.shell, html.shell body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.shell body { min-height: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* The banner takes its own space at the top of the screen and the page gets what is left (before this the page was a full screen
   tall below the banner, so its bottom ran off the screen). */
html.shell body { display: flex; flex-direction: column; }
html.shell .app { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: 0; padding-bottom: 0; }
html.shell .top { flex: none; }
html.shell main {
  flex: 1 1 auto; min-height: 0; margin: 0 -0.4rem; padding: 0 0.4rem max(1rem, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch;
}
html.shell .sheet, html.shell .feed.chat, html.shell .note-text, html.shell .call-lines { overscroll-behavior: none; }
html.shell input, html.shell textarea, html.shell select, html.shell .cue, html.shell .item .text, html.shell .note-text,
html.shell .prompter-text, html.shell .call-who, html.shell .calling-code {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

.names-menu { position: static; }
.names-menu summary { display: flex; align-items: center; min-width: 44px; min-height: 44px; white-space: nowrap; cursor: pointer; padding: 0.3rem 0.6rem; border-radius: 8px; border: 1px solid var(--btn-edge, #999); font-size: 0.9rem; list-style: none; }
.names-menu .names-panel { position: absolute; right: 0; z-index: 5; width: min(22rem, 100%); margin-top: 0.3rem; padding: 0.75rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--btn-edge, #999); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.names-menu .names-panel { margin-top: calc(0.3rem + var(--names-shift, 0px)); max-height: calc(min(var(--names-space, 100dvh), 100dvh) - max(0.75rem, env(safe-area-inset-bottom), var(--suite-tabs-h, 0px)) - 0.3rem); overflow-y: auto; overscroll-behavior: contain; }
.names-menu.names-up .names-panel { bottom: calc(100% + max(0.3rem, env(safe-area-inset-bottom), var(--suite-tabs-h, 0px)) + var(--names-shift, 0px)); margin-top: 0; max-height: calc(min(var(--names-space, 100dvh), 100dvh) - max(0.75rem, var(--pn-bar-h, 0px), env(safe-area-inset-top)) - max(0.3rem, env(safe-area-inset-bottom), var(--suite-tabs-h, 0px))); }
.names-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.names-list li { display: flex; gap: 0.4rem; align-items: center; }
.names-list input { flex: 1; min-width: 0; }
.name-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.5rem 0; }
.name-form input { flex: 1; min-width: 10rem; min-height: 44px; }
.name-form .hint { flex-basis: 100%; margin: 0; }

.option-confirm { padding: 0.6rem 0.8rem; margin: 0.5rem 0; border: 1px solid var(--btn-edge, #999); border-radius: 12px; }
.option-confirm p { margin: 0 0 0.5rem; }

/* What the member's agent asked to save (features/approvals.js). The words get their own box so the member reads exactly
   what goes into JobTread; long notes wrap and keep their line breaks. */
.agent-asks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; padding: 0.6rem 0.8rem; margin: 0.5rem 0;
  border: 1px solid var(--btn-edge); border-left: 4px solid var(--mark); border-radius: 12px; background: var(--panel); }
.agent-asks p { margin: 0; flex: 1 1 12rem; }
.ask-list > * + * { margin-top: 1rem; }
.ask-card { padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-left: 4px solid var(--mark); border-radius: 12px; background: var(--panel); }
.ask-source { display: inline-block; padding: 0.15rem 0.5rem; margin-bottom: 0.5rem; border-radius: 1rem; background: var(--line); font-size: 0.8rem; }
.ask-open { display: inline-block; margin: 0.5rem 0; }
.ask-reply { display: block; width: 100%; box-sizing: border-box; margin: 0.6rem 0; }
.ask-title { margin: 0 0 0.6rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.ask-rows { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.8rem; margin: 0 0 0.6rem; }
.ask-rows dt { color: var(--dim); }
.ask-rows dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-content { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0 0 0.6rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; }
.ask-typed { width: 100%; max-width: 14rem; margin: 0 0 0.6rem; padding: 0.5rem 0.6rem; font-size: 1rem; }
.ask-note { margin: 0 0 0.4rem; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-note-label { font-weight: 600; }
.ask-what { margin: 0 0 0.5rem; }
.ask-facts { margin: 0 0 0.7rem; padding-left: 1.1rem; color: var(--dim); }
.ask-card .btn-row .btn { flex: 1 1 max-content; min-height: 44px; justify-content: center; white-space: nowrap; }
.ask-tight { gap: 0.15rem 0.7rem; margin: 0 0 0.5rem; }
.ask-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.ask-showall { margin: 0 0 0.6rem; }
.ask-quote { margin: 0 0 0.4rem; padding-left: 0.7rem; border-left: 3px solid var(--line); font-style: italic; }
.ask-details { margin: 0.8rem 0 0; }
.ask-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--dim); }
.ask-details[open] > summary { margin-bottom: 0.4rem; }
.ask-group-sum { margin: 0.5rem 0; font-weight: 600; }
.ask-group-apart { margin: 0.5rem 0 0; }
.ask-when { margin: 0 0 0.6rem; }
.ask-card .result { margin-top: 0.4rem; }
.ask-level-info { border-left-color: var(--muted); }
.ask-level-needs_you { border-left-color: var(--mark); }
.ask-level-urgent { border-left-color: #c64733; }
.ask-attachment { margin: 0.6rem 0; }
.ask-viewer img, .ask-viewer iframe { width: 100%; max-height: 65vh; border: 0; object-fit: contain; }
.ask-viewer iframe { height: 55vh; }
.ask-answer-bar { position: sticky; bottom: 0; background: var(--panel); padding: 0.6rem 0; }
.ask-composer { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0.6rem 0; }
.ask-composer .ask-reply { flex: 1; min-width: 0; margin: 0; }
.ask-composer .btn { flex: 0 0 auto; }
.ask-thread { display: flex; flex-direction: column; gap: 0.7rem; list-style: none; margin: 0.7rem 0; padding: 0; }
.ask-turn { max-width: 92%; padding: 0.65rem 0.85rem; background: color-mix(in srgb, var(--text) 5%, var(--panel)); border: 1px solid var(--line); border-radius: 12px; }
.ask-turn-user { align-self: flex-end; background: color-mix(in srgb, var(--mark) 9%, var(--panel)); }
.ask-turn-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--dim); font-size: 0.75rem; }
.ask-current-request p { white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-turn p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.3rem 0 0; }
.ny-sort-label { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--dim); }
.ny-sort { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.6rem; background: var(--panel); color: var(--text); font: inherit; }

/* Needs you inbox (features/approvals/controller.js renderInbox). Rows, not cards: one line of what is needed, a gray preview, the
   time on the right, a small x. Tap a row to open the card inline. Full width, no boxes in boxes. */
.ny-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; margin: -7px 0 calc(0.5rem - 7px); padding: 7px 0; overflow-x: auto; scrollbar-width: none; }
.ny-bar::-webkit-scrollbar { display: none; }
.ny-chip { flex: none; min-height: 30px; padding: 0.1rem 0.75rem; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.9rem; cursor: pointer; }
/* Chips look 30px tall but take a 44px tap; the bar's 7px padding keeps the extra area inside its scroll box. */
.ny-chip { position: relative; }
.ny-chip::after { content: ''; position: absolute; inset: -7px 0; }
/* The filter chip is a filter, not an action: outlined, so the card's one solid orange button (Approve) stays the primary. */
.ny-chip.on { background: transparent; border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); color: inherit; font-weight: 600; }
/* Dark mode marks in #ff5600, where white text is 3.2:1; use the button's dark text like every other orange fill (4.5:1 minimum). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.suite-badge) { color: var(--on-btn, #18181b); } }
:root[data-theme="dark"] :is(.suite-badge) { color: var(--on-btn, #18181b); }
.ny-link { flex: none; white-space: nowrap; min-height: 44px; padding: 0 0.4rem; border: 0; background: none; color: var(--mark); font: inherit; font-size: 0.9rem; cursor: pointer; }
.ny-barrow { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; }
.ask-group + .ny-barrow { margin-top: 1rem; }
.ny-barrow .ny-bar { flex: 1 1 auto; min-width: 0; margin: 0; }
.ny-barrow .ny-clearall { min-height: 30px; }
.ny-section { margin: 0.6rem 0 0.2rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.ny-rows { border-top: 1px solid var(--line); }
.ny-row { position: relative; border-bottom: 1px solid var(--line); touch-action: pan-y; transition: opacity 0.15s, transform 0.15s; }
.ny-row.ny-swiped { transform: translateX(-100%) !important; opacity: 0 !important; }
.ny-head { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.1rem 0.7rem 0.1rem; min-height: 56px; cursor: pointer; }
.ny-head:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; }
.ny-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--h, 210) 45% 42%); color: #fff; font-weight: 600; }
.ny-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.ny-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding-right: 1.9rem; }
.ny-agent { font-size: 0.75rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ny-title { padding-right: 1.9rem; overflow-wrap: anywhere; white-space: normal; font-weight: 600; line-height: 1.4; }
.ny-row.open .ny-title { white-space: normal; overflow-wrap: anywhere; }
.ny-preview { padding-right: 1.9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; color: var(--dim); font-size: 0.9rem; line-height: 1.4; }
.ny-next { margin-top: 0.3rem; color: var(--mark); font-size: 0.85rem; }
.ny-meta { flex: none; display: flex; gap: 0.5rem; font-size: 0.75rem; color: var(--dim); white-space: nowrap; }
.ny-updated { opacity: 0.8; }
.ny-dot { position: absolute; left: -0.55rem; top: 1.55rem; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); }
.ny-row.urgent .ny-title { color: #c64733; }
.ny-x { position: absolute; top: 0; right: -0.4rem; width: 44px; height: 44px; padding: 0 0 0 0; border: 0; background: none; color: var(--dim); font-size: 16px; line-height: 44px; cursor: pointer; }
.ny-x:hover, .ny-x:focus-visible { color: inherit; }
.ny-body { padding: 0 0 0.8rem 2.9rem; }
.ny-when { margin: 0 0 0.4rem; }
.ny-body > .ask-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.ny-body > .ask-card > .ask-title, .ny-body > .ask-card > .ask-source { display: none; }
.ny-body > .ask-card .ask-composer { position: relative; margin: 0.6rem 0 0; }
.ny-body > .ask-card .ask-composer .ask-reply { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0.6rem 5rem 0.6rem 1rem; border: 1px solid var(--line); border-radius: 22px; resize: none; }
.ny-body > .ask-card .ask-composer .btn { position: absolute; right: 6px; bottom: 6px; min-height: 32px; padding: 0 0.9rem; border-radius: 16px; }
.ny-body > .ask-card .ask-answer-bar { position: static; padding: 0; background: transparent; }
.ny-toast { position: sticky; bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.8rem 0 0; padding: 0.2rem 0.4rem 0.2rem 1rem; border-radius: 22px; background: #222; color: #fff; }
.ny-toast .ny-link { color: #8ab4ff; }
@media (min-width: 700px) { .ny-body { padding-left: 3.4rem; } }

.result.wait { color: var(--warn); }
.help + ul.rows { margin-top: 0.5rem; }

/* Live captions (2026-10-14): the words being said, before the speech service finishes the sentence. */
.item.live .text { opacity: .72; }
.item.live .text::after { content: '\2026'; }

/* Agenda items open on a tap: the detail the assistant wrote, and Go deeper (2026-10-14). */
.cp-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cp-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cp-detail { margin: 4px 0 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.cp-deeper { margin-top: 6px; }

/* Parallel sessions (docs/parallel-sessions.md): this device's session name and the other open ones. */
.sess-setup { margin: 0.75rem 0 1rem; }
.sess-setup input, .sess-setup select { width: 100%; min-height: 44px; padding: 0.5rem 0.7rem; border: 1px solid var(--edge); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; }
.sess-bar { margin: 0.25rem 0 0.75rem; }
.sess-me { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.sess-me .field-label { margin: 0; color: var(--dim); font-weight: 500; }
.sess-me #sess-name { font-weight: 600; overflow-wrap: anywhere; }
.sess-rename { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.sess-rename input { flex: 1; min-width: 0; }
.sess-others { margin-top: 0.5rem; }
.sess-others ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0; }

/* The Phone page (docs/call-me.md): three panes side by side that the member swipes between, with tabs over them. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.phone-tabs {
  position: sticky; top: calc(max(1rem, env(safe-area-inset-top)) + 3.4rem); z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem;
  padding: 0.25rem; margin-bottom: 0.75rem; border-radius: 0.75rem; background: var(--line);
}
.phone-tab {
  min-height: 40px; border: 0; border-radius: 0.55rem; background: transparent; color: inherit;
  font: inherit; font-weight: 600; cursor: pointer;
}
.phone-tab[aria-selected="true"] { background: var(--panel); box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }
.phone-pages {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; gap: 1rem;
}
.phone-pages::-webkit-scrollbar { display: none; }
.sheet-body.phone-pages > * + * { margin-top: 0; }
.phone-pane { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.phone-pane > * + * { margin-top: 1.25rem; }
.callme .call-go { width: 100%; }
.switch-row { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.switch-row input { width: 1.4rem; height: 1.4rem; }
.phone-who, .phone-availability { border: 0; padding: 0; margin: 0.75rem 0 0; }
.phone-availability select { min-height: 40px; font: inherit; margin-top: 0.25rem; }
.phone-who label, .phone-availability label { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; }
.phone-quiet .btn-row { align-items: center; }
.phone-quiet input[type="time"] { min-height: 40px; font: inherit; }
.phone-settings h3.mini:not(:first-child) { margin-top: 1.5rem; }

/* A short fade when light and dark swap. :where() = zero specificity, so own transitions win. */
@media (prefers-reduced-motion: no-preference) {
  :where(html, body, body *) { transition-property: background-color, border-color, color, fill, stroke; transition-duration: 0.2s; transition-timing-function: ease; }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Desk voices (settings): one label and picker per desk. */
.desk-voices { display: flex; flex-direction: column; gap: 0.25rem; }
.desk-voices .field-label { margin-top: 0.6rem; }
/* Current limits, shared by the listening and call screens and the usage sheet. */
.usage-meter { min-width: 0; width: 100%; margin-block: 0.5rem; --usage-color: var(--edge); --usage-border: var(--line); }
.usage-chip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100%; padding: 0.35rem 0.75rem; text-wrap: balance; border: 2px solid var(--usage-border); border-radius: 1.5rem; background: var(--panel); color: var(--text); font: inherit; font-size: 0.85rem; line-height: 1.2; cursor: pointer; }
.usage-bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.usage-fill { display: block; height: 100%; width: 0; background: var(--usage-color, var(--mark)); }
.usage-row { --usage-color: var(--edge); }
.lvl-warn { --usage-color: var(--meter-warn); --usage-border: var(--meter-warn); }
.lvl-crit { --usage-color: var(--meter-crit); --usage-border: var(--meter-crit); }
.usage-notice { margin-top: 0.5rem; }
.usage-notice > * + * { margin-top: 0.5rem; }
ul.usage-rows { display: grid; gap: 1rem; margin-top: 1rem; }
.usage-row > * + * { margin-top: 0.25rem; }
.call-screen { --meter-warn: #f5a524; --meter-crit: #ff5247; }   /* the call screen is dark in both themes */
.call-screen .usage-chip { background: var(--pr-btn); color: var(--pr-fg); }
#usage.sheet { z-index: 30; }

/* ---- the touch lock (features/touch-lock.js) ----------------------------------------------------------------------------
   One clear layer over everything while locked, so the tips stay readable under it. It takes every tap and swipe
   (touch-action none stops scroll and pinch); the page under it is inert. The badge sits low, small, 44 px tall. */
.touch-lock {
  position: fixed; inset: 0; z-index: 60; touch-action: none; overscroll-behavior: none;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem 1rem max(1.25rem, env(safe-area-inset-bottom));
  background: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* A toast while locked sits above the badge, so neither hides the other. */
html.touch-locked .toast { bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4rem); }
.lock-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.35rem 1rem 0.35rem 0.4rem;
  border: 1px solid var(--pr-edge); border-radius: 999px; background: var(--pr-bg); color: var(--pr-fg);
  font: inherit; font-weight: 700; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
}
.lock-badge:focus-visible { outline: 3px solid var(--cue-label); outline-offset: 2px; }
.lock-ring { width: 36px; height: 36px; flex: none; transform: rotate(-90deg); }
.lock-ring circle { fill: none; stroke-width: 3.5; }
.lock-ring-track { stroke: var(--pr-btn); }
.lock-ring-fill { stroke: var(--cue-edge); stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: var(--lock-offset, 100.53); }
.lock-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 20px 20px; }

/* The question about a change the assistant asked for: at the top of the page, and on the call screen. */
.option-confirm { position: sticky; top: 0; z-index: 5; background: var(--panel); border-color: var(--btn-edge); }
.option-confirm .btn + .btn { margin-left: 0.4rem; }
.call-option { text-align: center; }
.call-option .btn-row { justify-content: center; }

.priority-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; }
.priority-dot.red { background: #dc4545; }
.priority-dot.yellow { background: #c58a18; }
.priority-dot.green { background: #359765; }
.camera-preview { position: fixed; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 35; width: min(280px, calc(100vw - 2rem)); padding: .65rem; border-radius: 12px; background: var(--panel); box-shadow: 0 4px 20px #0006; }
.camera-preview[hidden] { display: none; }
.camera-preview video { display: block; width: 100%; max-height: 180px; object-fit: contain; margin: .5rem 0; }
.camera-on { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: #b91c1c; color: #fff; font-size: .8rem; }

/* ---- owner screen panel ----------------------------------------------- */
.screen-panel {
  position: fixed; z-index: 9; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
}
.screen-panel[hidden] { display: none; }
.screen-panel.side { inset: 0 0 0 auto; width: 50vw; }
body.screen-open-side { padding-right: 50vw; }
body.screen-open-sheet { padding-bottom: 60vh; }   /* the call controls scroll above the sheet instead of under it */
.screen-panel.sheet { inset: auto 0 0; height: 60vh; border-radius: 16px 16px 0 0; overflow: hidden; }
.screen-panel-header { display: flex; gap: 0.5rem; align-items: center; padding: 0.75rem; }
.screen-panel-header select { flex: 1; min-width: 0; }
.screen-panel form { padding: 0 0.75rem 0.75rem; }
.screen-panel iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: #000; }

.agents-list-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; margin-top: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.agents-list-description { display: contents; }
.agents-list-row strong { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-list-row p { grid-column: 2 / -1; grid-row: 2; min-width: 0; margin: 0; color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-list-row img, .agents-list-avatar { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 56px; object-fit: contain; }
.agents-list-row img[src*="/room-portraits/dog/"], .limits-agent img[src*="/room-portraits/dog/"] { object-view-box: inset(3% 6% 50% 24%); }
.agents-list-avatar { display: grid; place-items: center; color: var(--accent); font-weight: 700; }
.agents-list-row .call-target-actions { grid-column: 3; grid-row: 1; flex-wrap: nowrap; }
.agents-list-row .btn { min-width: 44px; padding-inline: 10px; }
.agents-list-more > summary { min-height: 44px; padding-block: 10px; cursor: pointer; }

/* Ring destinations and controls stay usable on a 390px phone. */
.call-targets { margin-block: 16px; }
.call-target-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; padding-block: 6px; }
.call-target-row label { display: flex; flex: 1 1 180px; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; overflow-wrap: anywhere; }
.call-target-row button, .call-target-menu button, .call-target-pick, .remote-controls button { min-height: 44px; min-width: 44px; }
.call-target-row input[type="radio"] { width: 20px; height: 20px; }
.call-target-row input:not([type="radio"]):not([type="checkbox"]) { min-width: 0; flex: 1; }
.target-online { color: #30874a; }
.target-offline { opacity: .6; }
.call-target-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.call-target-pick { flex: 0 0 44px; touch-action: manipulation; }
.call-target-menu { flex: 1 0 100%; }
.call-target-menu button { display: block; width: 100%; text-align: left; white-space: normal; }
.call-target-menu button:disabled { opacity: .45; }
.call-remote { padding: 12px; margin-block: 12px; border: 1px solid currentColor; border-radius: 12px; }
.call-remote > span { margin-left: 12px; }
.remote-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.remote-controls[hidden], .call-remote[hidden], .call-target-menu[hidden], .call-target-pick[hidden] { display: none; }

.call-controls > .remote-controls { grid-column: 1 / -1; }
.remote-controls > p { flex-basis: 100%; }

.callme .call-target-actions { justify-content: center; margin: .9rem auto 0; }
.callme .call-target-actions .call-go { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }

/* The pick arrow is drawn, so it never depends on a font having the triangle glyph. */
.call-target-pick::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.call-target-row input[type="radio"] { accent-color: var(--accent); }

.call-target-row .target-rings { flex: 0 0 auto; cursor: pointer; min-height: 44px; }
.target-rings input { appearance: none; width: 40px; height: 24px; margin: 0; border: 1px solid currentColor; border-radius: 12px; background: transparent; }
.target-rings input::before { content: ''; display: block; width: 18px; height: 18px; margin: 2px; border-radius: 50%; background: currentColor; }
.target-rings input:checked { background: var(--accent); }
.target-rings input:checked::before { transform: translateX(16px); background: white; }
.call-incoming[hidden] { display: none; }
/* Where a call is ringing, over every screen and the agent sheet. A ring here takes the same place, with its buttons. */
.call-banner {
  position: fixed; top: max(8px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 70;
  width: max-content; max-width: min(92vw, 34rem); padding: 12px 20px; border-radius: 14px;
  background: #ff8a4d; color: #111; font-size: 20px; font-weight: 700; line-height: 1.25; text-align: center;
  box-shadow: 0 6px 24px rgb(0 0 0 / 45%);
}
.call-banner[hidden] { display: none; }

.call-incoming:not([hidden]) {
  position: fixed; top: max(8px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 70;
  width: min(92vw, 30rem); padding: 16px 18px; border: 2px solid #ff8a4d; border-radius: 16px;
  background: var(--panel, #111); box-shadow: 0 8px 32px rgb(0 0 0 / 55%);
}
.call-incoming strong { display: block; font-size: 22px; }
.call-incoming .btn { min-height: 48px; min-width: 120px; font-size: 18px; }
/* One End call on the call screen: the pinned red one. */
#call-strip:has(#call-hangup:not([hidden])) #status-end { display: none; }

.call-ring-settings { border: 0; margin: 0; padding: 0; }
.call-ring-settings > label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.call-ring-settings input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.call-ring-settings .call-busy-target { display: block; margin-left: 28px; }
.call-busy-target select { display: block; width: 100%; min-height: 44px; margin-top: 0.25rem; padding: 0.5rem 0.7rem; border: 1px solid var(--edge); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; }
.call-ring-settings small { display: block; margin-left: 28px; }

/* Login limits use the spending meter's 80/95 states. */
.limits-page { --bg: #0b0b0b; --ink: #fafafa; --edge: #ff5600; --line: #393939; color: #fafafa; background: #0b0b0b; --panel: #0b0b0b; width: min(100%, 1120px); }
.limits-page .sheet-body { max-width: 1060px; width: 100%; margin-inline: auto; }
.limits-page .help { color: #b8b8b8; }
.limits-page .btn, .limits-page .select { color: #fafafa; background: #181818; border-color: #555; }
.limits-page .btn.primary { background: #ff5600; color: #080808; }
.limits-page .linklike { color: #ff7936; }
.limits-host, .limits-alerts, .limits-recent { margin-top: 2rem; }
.limits-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; margin-block: 1rem; }
.limits-card { padding: 1.1rem; border: 1px solid #444; border-radius: 12px; background: #141414; min-width: 0; overflow-wrap: anywhere; }
.limits-card-heading, .limits-meter-label { display: flex; justify-content: space-between; gap: .8rem; align-items: center; }
.limits-card-heading { justify-content: flex-start; }
.limits-card h4, .limits-card p { margin: 0; }
.limits-provider { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #666; border-radius: 50%; flex-shrink: 0; font-weight: 700; }
.limits-status { margin-block: 1rem !important; font-weight: 700; }
.verdict-ease .limits-status::before { content: '△ '; }
.verdict-stop .limits-status::before { content: '■ '; }
.limits-meter { margin-block: 1rem; --usage-color: #b8b8b8; }
.limits-meter.lvl-warn { --usage-color: #ffb36b; }
.limits-meter.lvl-crit { --usage-color: #ff5600; }
.limits-meter .usage-bar { margin-block: .4rem; background: #333; }
.limits-meter.lvl-warn .usage-fill { background-image: repeating-linear-gradient(135deg, transparent 0 6px, #0005 6px 9px); }
.limits-meter.lvl-crit .usage-bar { outline: 1px solid #ff5600; outline-offset: 2px; }
.limits-faces, .limits-agent { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.limits-faces { margin-top: 1rem; }
.limits-agent img, .limits-initial { width: 32px; height: 32px; border-radius: 50%; }
.limits-initial { display: grid; place-items: center; background: #333; }
.limits-agents li, .limits-recent li { border-bottom: 1px solid #393939; padding-block: .8rem; }
.limits-agents p, .limits-recent p { margin-block: .2rem; }
.limits-rule { border: 1px solid #444; border-radius: 8px; margin-block: 1rem; padding: 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; min-width: 0; }
.limits-rule legend { padding-inline: .3rem; }
.limits-rule .select { width: auto; }
.limits-page input { accent-color: #ff5600; }
[data-limits-badge] { border-radius: 1rem; background: #ff5600; color: #080808; padding: .1rem .45rem; }
.limits-box-status { margin-block: 1rem 2rem; scroll-margin-top: 1rem; }
.limits-box-host { border-bottom: 1px solid #393939; padding-block: .5rem 1rem; overflow-wrap: anywhere; }
.limits-box-host h4, .limits-box-host p { margin-block: .4rem; }
.limits-box-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.limits-box-meters .help { font-size: .85rem; }
.limits-box-warn { color: #ffb36b; }
.limits-box-bad { color: #ff5600; }
.limits-box-sessions li { display: flex; flex-wrap: wrap; column-gap: .7rem; padding-block: .25rem; font-size: .85rem; }
.limits-box-inbox { font-family: monospace; font-size: .75rem; margin-top: 1rem; }
.box-status-chip { border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .8rem; padding: .3rem .65rem; cursor: pointer; margin-block: .4rem; }
.box-status-chip.lvl-warn { color: #ff5600; }
.box-status-chip.lvl-crit { color: #ef4444; }
@media (max-width: 480px) { .limits-page .sheet-head { flex-wrap: wrap; } .limits-page .sheet-body { padding: 1rem; } .limits-rule { gap: .7rem; } }

.agents-list-more summary { cursor: pointer; min-height: 44px; padding: 12px 0; }
.agents-list-row .agent-actions { grid-column: 2 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.agents-list-more .agents-list-row p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the room beside PaceNotes (features/room-panel.js) --------------------------------------------- */
.room-panel {
  position: fixed; z-index: 35; right: 0; bottom: 0; top: 0; width: 100%; display: flex; flex-direction: column;
  background: var(--panel); color: var(--text); border-left: 1px solid var(--line);
  box-shadow: -10px 0 24px color-mix(in srgb, var(--text) 14%, transparent);
}
.room-panel[hidden] { display: none; }
.room-panel-head { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px 6px 20px; border-bottom: 1px solid var(--line); }
.room-panel-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-panel-full, .room-panel-close { min-height: 44px; }
.room-panel-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg); }
.room-panel-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; cursor: ew-resize; touch-action: none; z-index: 2; }
.room-panel-grip::after { content: ""; position: absolute; left: 4px; top: 50%; width: 4px; height: 40px; margin-top: -20px; border-radius: 2px; background: var(--edge); opacity: 0.6; }
.room-panel-grip:hover::after, .room-panel[data-dragging] .room-panel-grip::after { background: var(--accent); opacity: 1; }
.room-panel[data-dragging] .room-panel-frame { pointer-events: none; }
@media (max-width: 699px) { .room-panel-grip { display: none; } }

/* ---- Running now (features/running-now.js) and the end-one chooser ---------------------------------------- */
.running-open { min-height: 36px; white-space: nowrap; }
.running-now { flex: none; max-height: 40%; overflow-y: auto; padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--bg); }
.running-now[hidden] { display: none; }
#running-sheet .running-now { max-height: none; padding: 0 0 12px; border-top: 0; background: none; }
@media (max-width: 699px) { .running-now { max-height: 30%; } }
.running-title { margin: 0 0 6px; font-size: 1rem; }
.running-list { display: grid; gap: 8px; margin: 0; padding: 0; }
.running-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.running-row.here { border-color: var(--accent); }
.running-what { grid-column: 1; font-weight: 600; overflow-wrap: anywhere; }
.running-meta { grid-column: 1; font-size: 0.85rem; color: var(--dim); }
.running-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.running-view-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.running-tips, .running-lines { display: grid; gap: 6px; margin: 6px 0 12px; padding: 0; }
.running-tip { font-weight: 600; }
.running-line { color: var(--text); }
.too-many { display: grid; gap: 10px; margin-top: 10px; }
.too-many[hidden] { display: none; }

/* ---- Watch or share (features/watch-share.js) ------------------------------------------------------- */
.watch-share { display: grid; gap: 10px; }
.watch-share[hidden] { display: none; }
.ws-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-row input[type="url"] { flex: 1 1 14rem; min-width: 0; min-height: 44px; }
.ws-agent-row .select { flex: 1 1 10rem; }
.ws-agent-row[hidden] { display: none; }
/* Anything scrolled into view lands below the sticky banner, not under it. */
html { scroll-padding-top: 136px; }

/* The web desktop uses the window; native tablets and narrow screens keep their existing layout. */
@media (min-width: 1000px) {
  html[data-desktop-layout] { scroll-padding-top: 200px; }
  html[data-desktop-layout] .app { max-width: none; margin-inline: 0; padding: 24px; }
  html[data-desktop-layout][data-room-open] .app { margin-right: calc(var(--room-w, 0px) + 16px); }
  html[data-desktop-layout] main { max-width: 1800px; margin-inline: auto; }
  .desktop-banner { position: sticky; top: 0; z-index: 30; width: 100%; background: var(--bg); border-bottom: 1px solid var(--line); }
  .desktop-banner .pn-banner { position: static; border-bottom: 0; }
  .desktop-banner .top { margin: 0; padding: 12px 24px; }
  .desktop-banner .top::before { inset: 0; }
  .desktop-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
  .desktop-listen, .desktop-secondary, .desktop-share, .desktop-activity { display: flex; flex-direction: column; min-width: 0; gap: 20px; }
  .desktop-layout .card, .desktop-layout .cue-card, .desktop-layout .link-row { margin-block: 0; }
  .desktop-layout .agent-sheet[data-dock="docked"] { position: relative; inset: auto; z-index: auto; display: block; }
  .desktop-layout .agent-sheet[data-dock="docked"][hidden] { display: none; }
  .desktop-layout .agent-sheet[data-dock="docked"] .agent-sheet-box {
    width: 100% !important; max-width: none; height: max(440px, min(720px, calc(100dvh - 220px)));
    border: 1px solid var(--line); border-radius: 12px; box-shadow: none;
  }
  .desktop-layout .agent-sheet[data-dock="docked"] .agent-dock-grip { display: none; }
  /* Agent window is a grid card here: nothing beside the page to make room for. */
  /* desktop-layout.js always moves the sheet into the grid when it sets data-desktop-layout (no :has, so iOS 15.0-15.3 too) */
  html[data-desktop-layout] { --agent-dock-used: 0px; --agent-dock-gap: 0px; }
}
@media (min-width: 1500px) {
  .desktop-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .desktop-secondary { display: contents; }
}
/* Nothing running in the activity column (no tips, agent window or assignments): keep two columns instead of a third column
   holding only two links. */
@media (min-width: 1500px) {
  .desktop-layout:not(:has(.desktop-activity > :not([hidden]):not(.more))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* iPad in the store app (features/desktop-layout.js, tablet mode): the page uses the whole screen in two columns, listen controls on
   the left and share, notes and activity on the right. Cards keep their own width, so lines stay short. Beside the agents sidebar
   there is less room, so it stays one column until the screen is wide enough for both. */
@media (min-width: 700px) {
  html[data-tablet-layout]:not([data-agent-docked]) .app { max-width: none; margin-inline: 0; }
  html[data-tablet-layout] main { max-width: none; }
  html[data-tablet-layout] .desktop-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
  html[data-tablet-layout] .desktop-listen, html[data-tablet-layout] .desktop-secondary, html[data-tablet-layout] .desktop-share,
  html[data-tablet-layout] .desktop-activity { display: flex; flex-direction: column; min-width: 0; gap: 16px; }
  html[data-tablet-layout] .desktop-layout .card, html[data-tablet-layout] .desktop-layout .cue-card,
  html[data-tablet-layout] .desktop-layout .link-row { margin-block: 0; }
}
@media (min-width: 700px) {
  html[data-tablet-layout][data-agent-docked] .desktop-layout { grid-template-columns: minmax(0, 1fr); }
}
#approval-settings { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
#approval-settings .sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 1rem; }
.approval-footer { flex: none; padding-bottom: max(1rem, env(safe-area-inset-bottom)); background: var(--panel); }
.approval-footer .btn { width: 100%; }
.approval-footer .result:empty { display: none; }
.approval-row + .approval-row { margin-top: 1.5rem; }
.approval-soon { font-size: 0.8rem; }
.approval-choices { display: flex; }
.approval-choices .btn { flex: 1; min-width: min-content; padding-inline: 6px; overflow-wrap: normal; border-radius: 0; }
.approval-choices .btn + .btn { border-left: 0; }
.approval-choices .btn:first-child { border-radius: 12px 0 0 12px; }
.approval-choices .btn:last-child { border-radius: 0 12px 12px 0; }
.approval-choices .btn[aria-pressed="true"] { background: var(--accent); color: var(--bg); }

/* ---- the Tread Connection app's bar (features/suite-tabs.js) -------------------------------------------------------------
   Only the new app shell sets html.suite. The bar is the last row of the page (html.shell body is a column), so it takes its
   own space instead of covering the page, and sits over the home indicator. Modal sheets slide over it.
   It steps aside on a call unless call_keep_bar is on, and while the keyboard is up. */
.suite-tabs {
  display: flex; flex: none; justify-content: center; gap: 4px; position: relative; z-index: 5;
  padding: 3px max(8px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: var(--panel); border-top: 1px solid var(--line);
}
/* Tabs stay tappable over Grant's sheet (40), but not over the prompter, camera or room panel open beside it. */
html.suite:has(.agent-sheet:not([hidden])):not(:has(.prompter:not([hidden]), .camera-preview:not([hidden]), .room-panel:not([hidden]))) .suite-tabs { z-index: 41; }
.suite-tabs[hidden], html.in-call:not(.call-keep-bar) .suite-tabs, html.suite-kb .suite-tabs { display: none; }
html.in-call.call-keep-bar .suite-tabs { z-index: 26; }
html.in-call.call-keep-bar .call-screen { padding-bottom: calc(var(--suite-tabs-h, 0px) + max(0.75rem, env(safe-area-inset-bottom))); }
html.in-call.call-keep-bar .call-foot { bottom: var(--suite-tabs-h, 0px); }
html.call-away #call-strip { display: none; }
#livePill { position: fixed; z-index: 43; right: 1rem; bottom: calc(var(--suite-tabs-h, 0px) + 0.5rem); border-radius: 999px; }
/* What PaceNotes knows: no heading over an empty list. */
h3.mini:has(+ #profile-facts:empty), h3.mini:has(+ #profile-habits:empty) { display: none; }
/* The bar from the first frame, until features/suite-boot.js draws the working one (suite-first.js). !important, because [hidden] above is. */
html.suite-boot .suite-tabs[hidden] { display: flex !important; min-height: calc(50px + env(safe-area-inset-bottom)); }
a.suite-tab { text-decoration: none; }
/* Idle for a few seconds, the bar slides down out of sight (features/suite-tabs.js watchIdle); any touch or a scroll up brings it back. While
   it is away it leaves the page's flow, so the agent window and its Tell box take the room. Moved by transform only (never visibility or
   display) so it stays in the accessibility tree; focus landing in it wakes it. */
.suite-tabs { transition: transform 0.22s ease; }
html.suite-bar-away .suite-tabs { position: fixed; left: 0; right: 0; bottom: 0; transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) { .suite-tabs, html.suite-bar-away .suite-tabs { transition: none; } }
.suite-tab {
  flex: 1 1 0; max-width: 140px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 2px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 10.5px; font-weight: 500;
  -webkit-tap-highlight-color: transparent; position: relative;
  /* A press and hold picks the tab up to move it (suite-tabs.js watchReorder), so the browser must not scroll or select instead. */
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.suite-tab.suite-lifted { z-index: 2; transition: none; background: color-mix(in srgb, var(--text) 14%, transparent); border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.suite-tabs.suite-reordering .suite-tab:not(.suite-lifted) { transition: transform 0.16s ease; }
.suite-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The selected tab is told apart by a short line under its word, not by colour: an agent's face is orange too. */
.suite-tab[aria-current="page"] { font-weight: 700; }
.suite-tab[aria-current="page"] > span:not(.suite-badge) { position: relative; }
.suite-tab[aria-current="page"] > span:not(.suite-badge)::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: var(--mark);
}
.suite-tab[data-face] svg { display: none; }
.suite-tab .suite-face[hidden] { display: none; }
.suite-tab .suite-face { order: -1; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
/* Like an iOS app badge: pinned to the icon's top right corner, so it adds no height to the tab. */
.suite-badge {
  position: absolute; top: 0; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: var(--mark); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  pointer-events: none;
}
.suite-badge[hidden] { display: none; }
.suite-tab-off, .suite-tab[hidden], .ny-layout-field[hidden] { display: none; }
/* Needs you as a count beside the main agent's name, and the asks it drops open under his header (features/ny-layout.js). */
.ny-peek { flex: none; align-self: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 7px; box-sizing: border-box; border: 0; border-radius: 11px;
  background: var(--mark); color: #fff; font: inherit; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; cursor: pointer; }
.ny-peek[hidden] { display: none; }
html[data-ny-peek] #agent-asks { display: none; }
.ny-peek::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: 2px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; }
.ny-peek.open::after { border-top: 0; border-bottom: 4px solid currentColor; }
.ny-peek:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
/* An invisible 44px hit area around the small pill. */
.ny-peek { position: relative; }
.ny-peek::before { content: ''; position: absolute; inset: -11px -8px; }
.ny-drop { max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 4px; border-bottom: 1px solid var(--line); }
.ny-drop[hidden] { display: none; }
.ny-drop-item + .ny-drop-item { border-top: 1px solid var(--line); }
.ny-drop .ask-card { margin: 0; padding: 10px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ny-drop .ask-source { display: none; }
.ny-drop .ask-title { margin: 2px 0 4px; font-size: 1rem; }
.ny-drop .ask-why, .ny-drop .ask-recommend { margin: 0 0 2px; font-size: 0.85rem; color: var(--dim); }
.ny-drop .ask-composer { display: none; }
.ny-drop .ask-answer-bar { position: static; padding: 0; background: none; border: 0; box-shadow: none; }
/* The card's own words, one short block: the latest message only, two lines, no who/when line. */
.ny-drop .ask-thread { margin: 2px 0 0; padding: 0; list-style: none; }
.ny-drop .ask-turn:not(:last-child), .ny-drop .ask-turn-meta, .ny-drop .ask-current-request h4 { display: none; }
.ny-drop .ask-turn p, .ny-drop .ask-current-request p { margin: 0; font-size: 0.85rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ny-drop .btn-row { margin-top: 8px; gap: 8px; }
.ny-drop .btn-row .btn { min-height: 44px; padding: 0 14px; font-size: 0.95rem; }
.ny-drop-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); }
.ny-drop-all, .ny-drop-fold { min-height: 44px; padding: 0; border: 0; background: none; color: var(--mark); font: inherit; font-size: 0.9rem; cursor: pointer; }
.ny-drop-fold { color: var(--dim); }
/* Needs you slides in over the whole width, to the left edge (the sheet's 26rem cap left a strip of page on a wide phone). */
html.suite #approvals { bottom: var(--suite-tabs-h, 0px); left: 0; width: 100%; max-width: none; border-left: 0; }
/* iPad and the open Duo: icon and word side by side, like the system tab bar on a wide screen. */
@media (min-width: 700px) {
  .suite-tab { flex-direction: row; justify-content: center; gap: 8px; max-width: 180px; font-size: 13px; }
  /* The count sits after the word on a wide screen instead of on top of it. */
  .suite-tab .suite-badge { position: static; order: 2; flex: none; margin-left: -2px; }
  /* Needs you: the whole screen, with short lines and small reply boxes because the asks sit side by side. */
  html.suite #approvals .sheet-body { width: 100%; max-width: none; padding-inline: 16px; }
  html.suite #approvals-list, html.suite #approvals-list .ny-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; align-items: start; }
  /* Only asks sit side by side. The filter row, headings and notes get their own full row. */
  html.suite #approvals-list > * { grid-column: 1 / -1; margin-top: 0; }
  /* One ask alone takes the width, not the first of three columns. */
  html.suite #approvals-list .ny-rows { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
  html.suite #approvals-list > .ask-card, html.suite #approvals-list > .btn { grid-column: auto; }
  html.suite #approvals-list > .btn { justify-self: start; width: auto; }
  html.suite #approvals-list textarea { height: 3.5rem; min-height: 0; }
  .suite-tab svg { width: 22px; height: 22px; }
  .suite-tab .suite-face { width: 22px; height: 22px; }
}
html.shell.suite:has(.suite-tabs:not([hidden])) main { padding-bottom: 1rem; }
html.suite .agent-sheet { bottom: var(--suite-tabs-h, 0px); }
/* The agent page is a tab, so no Done while the bar is up, typing included (Done once covered the gear, Android QA 11/08). */
html.suite:not(.in-call):has(.suite-tabs:not([hidden])) .agent-sheet-close,
html.suite:not(.in-call):not(.suite-kb):has(.suite-tabs:not([hidden])) [data-tour="needs-you-close"] {
  /* Visually hidden, not display:none: a screen reader still finds Done (the bar sits outside the dialog). */
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Needs you opened from the "waiting on you" bar has no Done in the app (the tab bar replaces it), so it gets a plain Back
   that closes the sheet and returns to the page the member came from. Where Done shows, Back stays away. */
.ny-back { display: none; }
html.suite:not(.in-call):not(.suite-kb):has(.suite-tabs:not([hidden])) .ny-back { display: inline-flex; align-items: center; min-height: 44px; order: -1; margin-left: -0.4rem; }
/* The Tell box takes text, paste and its edit menu whatever the shell sets on the page around it. */
html.shell .agent-compose-input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
html.suite:not(.suite-bar-away):has(.suite-tabs:not([hidden])) .agent-sheet-box { --ag-safe-bottom: 0px; }
/* With the bar hidden nothing covers the notch, so the sheet's Done and handle stop below the status bar (iPhone QA 2026-10-28). */
@media (max-width: 699px) { html.suite .agent-sheet-box { max-height: calc(100dvh - max(var(--pn-bar-h, 0px), env(safe-area-inset-top, 0px)) - var(--suite-tabs-h, 0px)); } }
html.suite #agents-empty { bottom: var(--suite-tabs-h, 0px); }

label.call-ring-settings { display: flex; align-items: center; gap: 8px; min-height: 44px; }

.call-target-row > details.call-target-actions { display: block; flex: none; }
.call-target-actions > summary { cursor: pointer; min-width: 44px; min-height: 44px; text-align: center; }
.call-target-backup > summary { cursor: pointer; padding-block: 10px; }

/* ---- the Grant tab on a phone (the Tread Connection app) -------------------------------------------------------------------
   The agent page is the whole screen above the tab bar: no inset card, no dock bar, no gap above. It shows one gear and one
   availability control (the agent's own); the page header under it is covered, and the agent's settings carry "App settings".
   Header shrinks to one row while the thread is scrolled up; the Tell box is one line, iMessage style, over the thread's bottom. */
@media (max-width: 699px) {
  /* The sheet reaches 1px into the tab bar's top edge: the bar's measured height is rounded up, and a sub-pixel gap let the page show through. */
  html.suite .agent-sheet { bottom: calc(var(--suite-tabs-h, 0px) - 1px); }
  html.suite .agent-sheet-box {
    height: 100% !important; max-height: none; max-width: none; border: 0; border-radius: 0; box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Full height, edge to edge: from the status bar down to the tab bar. No page header above it (the wordmark, the Available pill and
     the gear all live behind the sheet's own header), no drag handle and no "Agents" title row: the agent strip is the title. */
  html.suite .agent-sheet { top: 0 !important; left: 0; right: 0; }
  html.suite .agent-sheet-scrim { display: none; }
  html.suite .agent-dock-bar, html.suite .agent-dock-grip { display: none !important; }
  html.suite:has(.agent-sheet:not([hidden])) .top, html.suite:has(.agent-sheet:not([hidden])) .top-actions { display: none; }
  html.suite .agent-window[data-single][data-strip] { background: var(--panel, #111); }
  /* The Agents strip runs the full width and scrolls sideways; a fade, not a cutoff, at the right edge. */
  html.suite .agent-window[data-single][data-strip] .agent-tabs {
    margin: 0; width: 100%; box-sizing: border-box; padding: 8px 28px 6px 12px; background: none; border-bottom: 1px solid var(--line, currentColor);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  html.suite .agent-panel { position: relative; }
  html.suite .agent-header { padding: 10px 16px 0; }
  html.suite .agent-window-head { gap: 10px; }
  /* Messages | Calls, then Select and Filter at the right end */
  html.suite .agent-view-bar { display: flex; flex: none; align-items: center; gap: 8px; margin: 10px 16px 0; }
  html.suite .agent-view-bar .agent-seg { flex: 1 1 auto; margin: 0; }
  html.suite .agent-select-bar { margin: 4px 12px 0; }
  html.suite .agent-entry.agent-selecting, html.suite .agent-entry.agent-system-line.agent-selecting { padding-left: 52px; }
  html.suite .agent-recent-item.agent-selecting { padding-left: 52px; }
  html.suite .agent-selecting::before { left: 16px; top: 16px; }
  html.suite .agent-select-count { color: var(--text, inherit); }
  html.suite .agent-archived-bar { margin: 4px 16px 0; padding: 0; }
  html.suite .agent-menu { top: 104px; right: 8px; background: var(--panel, #111); border-color: var(--line, currentColor); }
  html.suite .agent-swipe-sheet { background: var(--panel, #111); }
  html.suite .agent-swipe-group .agent-seg { margin: 0; }
  /* Messages run edge to edge, 16px of text padding, a hairline between them, and scroll under the Tell box */
  html.suite .agent-thread-scroll { gap: 0; padding: 0 0 calc(var(--compose-h, 64px) + var(--ag-safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px); }
  html.suite .agent-thread-scroll > .agent-search { width: auto; margin: 10px 16px 6px; }
  html.suite .agent-thread-scroll > .agent-more, html.suite .agent-thread-scroll > .agent-state { padding: 0 16px; }
  html.suite .agent-thread { gap: 0; }
  html.suite .agent-entry { border: 0; border-bottom: 1px solid var(--line, currentColor); border-radius: 0; padding: 12px 16px; background: none; }
  html.suite .agent-entry.agent-system-line { padding: 8px 16px; }
  /* Conversation rows: bubbles carry the separation, so no hairline and less air between them */
  html.suite .agent-entry.agent-task { border-bottom: 0; padding-top: 6px; padding-bottom: 6px; }
  html.suite .agent-older { min-height: 40px; padding: 0 14px; }
  /* iMessage-style Tell box: one line that grows, with + , Send and the mic inside it */
  html.suite .agent-task-box {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-height: none; overflow: visible;
    padding: 8px 12px calc(8px + var(--ag-safe-bottom, 0px)); box-sizing: border-box;
    background: var(--panel, #111); border-top: 1px solid var(--line, currentColor);
  }
}
/* Phone and iPad: one rounded field, + at the left edge, Send and the mic inside at the right. Each button is a 44px target. */
html.suite .agent-compose {
  align-items: flex-end; gap: 0; padding: 0 2px; border: 1px solid var(--edge, currentColor); border-radius: 24px;
  background: var(--field, var(--panel, #111));
}
html.suite .agent-compose-input {
  flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 10px 4px; border: 0; border-radius: 0; background: transparent; line-height: 22px; box-shadow: none; outline: 0; max-height: 98px; overflow-y: auto;
}
html.suite .agent-compose > .agent-plus + .agent-compose-input { padding-left: 0; }
html.suite .agent-compose > .agent-compose-input:first-child { padding-left: 14px; }
/* The + at the left edge inside the field (Files; Photos and Camera wait for an upload route) */
html.suite .agent-task-box-plus .agent-compose { width: 100%; box-sizing: border-box; }
html.suite .agent-plus {
  flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; font: inherit; font-size: 0; line-height: 0;
  /* The + is two drawn bars, not a text glyph, so it is centred in its 44px box exactly (a "+" character sits about 1px right and 1px high of centre). */
  background: linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat;
  color: var(--dim, inherit); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.suite .agent-plus[aria-expanded="true"] { color: var(--accent, #ff5600); }
html.suite .agent-plus-menu {
  position: absolute; left: 12px; bottom: calc(100% - 4px); z-index: 3; display: flex; flex-direction: column; min-width: 160px; padding: 4px;
  border: 1px solid var(--edge, currentColor); border-radius: 14px; background: var(--panel, #111); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html.suite .agent-plus-menu[hidden], html.suite .agent-plus-file { display: none; }
html.suite .agent-plus-item { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--text, inherit); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
html.suite .agent-compose:focus-within { border-color: var(--accent, currentColor); }
html.suite .agent-mic { flex: none; min-width: 44px; height: 44px; min-height: 44px; border: 0; }
html.suite .agent-mic.recording { background: var(--bad, #ff5600); color: #fff; }
html.suite .agent-send {
  position: relative; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; font-size: 0; line-height: 0;
  background: none; color: var(--accent, #ff5600);
}
html.suite .agent-send::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6v5a3 3 0 0 1-3 3H5M9.5 9.5 5 14l4.5 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6v5a3 3 0 0 1-3 3H5M9.5 9.5 5 14l4.5 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
/* The mic and Send swap (agent-window.js sets hidden on the one not in use); this also hides a disabled Send when nothing is typed. */
html.suite .agent-compose:not(.agent-compose-filled) .agent-send:disabled { display: none; }
html.suite .agent-mic { width: 44px; padding: 0; background: none; border-radius: 50%; color: var(--dim, inherit); }
html.suite .agent-mic.recording, html.suite .agent-mic.sending { width: auto; height: 44px; min-height: 44px; margin: 0; padding: 0 14px; border-radius: 22px; }
html.suite .agent-send:disabled { opacity: 1; background: none; border-color: transparent; color: var(--dim, inherit); }
/* Header, phone and iPad: one compact row, avatar, name with a status dot, Call, gear in the corner. The role line and the big picture are gone. */
html.suite .agent-header { padding: 6px 12px 0 12px; gap: 0; }
html.suite .agent-window-head { display: flex; align-items: center; gap: 8px; min-height: 48px; }
html.suite .agent-window-title, html.suite .agent-name-row { display: contents; }
html.suite .agent-window-face { order: 0; width: 40px; height: 40px; flex: none; }
html.suite .agent-window-face svg, html.suite .agent-window-face img { width: 40px; height: 40px; }
html.suite .agent-window-name { order: 1; flex: 0 1 auto; font-size: 1.35rem; }
html.suite .agent-pill { order: 2; flex: none; min-height: 0; margin: 0; padding: 0; border: 0; font-size: 0; line-height: 0; gap: 0; }
html.suite .agent-pill.presence-deaf { font-size: 12px; line-height: 1.2; gap: 5px; color: var(--muted, #9aa); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.suite .agent-window-role, html.suite .agent-card-picker, html.suite .agent-now { display: none; }
html.suite .agent-head-call { order: 3; margin-left: auto; flex-flow: row nowrap; align-items: center; gap: 6px; }
html.suite .agent-head-call .agent-call, html.suite .agent-head-call .agent-talk-button { min-height: 44px; min-width: 0; padding: 0 12px; }
html.suite .agent-settings-toggle, html.suite .ab-open-gear { order: 4; margin: 0 -8px 0 0; }
html.suite .agent-view-bar { margin: 4px 12px 0; }
html.suite .agent-seg-btn { min-height: 32px; font-size: 0.875rem; position: relative; }
/* The control stays 32px tall; the tap area reaches 44px (Apple's minimum) above and below it. */
html.suite .agent-seg-btn::after { content: ''; position: absolute; inset: -6px 0; }

/* Every sheet opens over the Grant tab's agent sheet (z-index 40), so Done is reachable and closing returns to Grant. */
/* The dim stops above the app bar, so a tab tapped while Needs you is open goes to that tab instead of only closing the sheet. */
html.suite .scrim { z-index: 44; bottom: var(--suite-tabs-h, 0px); }
html.suite .sheet { z-index: 45; }
/* On an iPad a sheet is a side panel: it stops at the app bar like the dim does, so the bar is never half covered. */
@media (min-width: 700px) { html.suite .sheet { bottom: var(--suite-tabs-h, 0px); } }
/* Sheets with their own z-index rule, and the toast, stay above the agent sheet too. */
html.suite #usage.sheet { z-index: 46; }
html.suite .toast { z-index: 60; }
/* Grant's status dot is the member's Available / Silent / Do not disturb: a 44px target around a 10px dot, coloured by the state. */
html.suite .agent-pill[data-avail] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.suite .agent-window-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Big iOS text sizes (data-text-big): Call and its picker get their own row on a phone. */
@media (max-width: 600px) {
  html.suite[data-text-big] .agent-window-head { flex-wrap: wrap; row-gap: 6px; }
  html.suite[data-text-big] .agent-window-name { flex: 1 1 0; }
  html.suite[data-text-big] .agent-head-call { order: 5; flex: 1 0 100%; margin-left: 0; }
  html.suite[data-text-big] .agent-head-call .agent-call { flex: 1 1 auto; }
  /* Like iOS segmented controls, the Messages/Calls row stops growing at accessibility sizes (20px), so it stays on one row. */
  html.suite[data-text-big] .agent-view-bar :is(.agent-seg-btn, .agent-select-btn) { font-size: min(0.875rem, 20px); white-space: nowrap; }
  html[data-text-big] .running-row { grid-template-columns: 1fr; }
  html[data-text-big] .running-actions { grid-column: 1; grid-row: auto; flex-wrap: wrap; }
}
/* On a phone the row can't hold the face, the name and every button, and the strip just above already shows the face. The name stays. */
@media (max-width: 480px) {
  html.suite .agent-window-head { gap: 4px; }
  html.suite .agent-window-face { display: none; }
  html.suite .agent-window-name { font-size: 1.2rem; }
  html.suite .agent-talk-long { display: none; }
  html.suite .agent-head-call { gap: 4px; }
  html.suite .agent-head-call .agent-call, html.suite .agent-head-call .agent-talk-button { padding: 0 10px; }
}
/* Narrow iPad sidebar: name and gear on one row, Walkie-talkie and Call under it. */
@media (min-width: 700px) {
  html.suite .agent-sheet[data-dock="docked"] .agent-sheet-box { container-type: inline-size; }
  html.suite .agent-seg-btn { white-space: nowrap; }
  @container (max-width: 520px) {
    html.suite .agent-window-head { flex-wrap: wrap; gap: 4px 8px; }
    html.suite .agent-window-face, html.suite .agent-window-face svg, html.suite .agent-window-face img { width: 32px; height: 32px; }
    html.suite .agent-window-name { flex: 0 1 auto; max-width: calc(100% - 144px); }
    html.suite .agent-settings-toggle, html.suite .ab-open-gear { order: 3; margin: 0 0 0 auto; }
    html.suite .agent-head-call { order: 4; flex: 1 0 100%; margin: 0; justify-content: flex-start; }
    html.suite .agent-head-call .agent-talk-button { flex: 1 1 auto; }
  }
  /* iOS 15 has no container queries: every docked iPad sidebar gets the two rows there (a wide one just has room to spare). */
  @supports not (container-type: inline-size) {
    html.suite .agent-sheet[data-dock="docked"] .agent-window-head { flex-wrap: wrap; gap: 4px 8px; }
    html.suite .agent-sheet[data-dock="docked"] .agent-window-face, html.suite .agent-sheet[data-dock="docked"] .agent-window-face svg, html.suite .agent-sheet[data-dock="docked"] .agent-window-face img { width: 32px; height: 32px; }
    html.suite .agent-sheet[data-dock="docked"] .agent-window-name { flex: 0 1 auto; max-width: calc(100% - 144px); }
    html.suite .agent-sheet[data-dock="docked"] .agent-settings-toggle, html.suite .agent-sheet[data-dock="docked"] .ab-open-gear { order: 3; margin: 0 0 0 auto; }
    html.suite .agent-sheet[data-dock="docked"] .agent-head-call { order: 4; flex: 1 0 100%; margin: 0; justify-content: flex-start; }
    html.suite .agent-sheet[data-dock="docked"] .agent-head-call .agent-talk-button { flex: 1 1 auto; }
  }
}
html.suite .agent-pill[data-avail="silent"]::before { background: var(--meter-warn, #f5a623); }
html.suite .agent-pill[data-avail="dnd"]::before { background: var(--bad, #ff5600); }

/* Voice-note capture lives only in the phone and web app. */
.note-recording-strip { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: .7rem 1rem; background: #a71922; color: #fff; }
.note-recording-strip[hidden] { display: none; }
.note-recording-strip button { color: inherit; }
.note-recording-dot { color: #a71922; background: #fff; border-radius: 50%; padding: .12rem; line-height: 1; }
.note-outbox-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--line, #7775); font-size: .85rem; }
.note-outbox-row button, .note-job-chip, .note-recording-strip button { background: transparent; border: 0; padding: .3rem; font: inherit; cursor: pointer; }
.note-outbox-row button, button.note-job-chip { color: var(--accent, #1765bb); }
.note-job-chip { display: inline-block; font-size: .85rem; }
.note-reason { flex-basis: 100%; }
.note-sheet { box-sizing: border-box; width: min(100%, 42rem); height: 100dvh; max-height: 100dvh; margin: 0 auto; padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem; border: 0; background: var(--bg, #fff); color: var(--text, #171717); }
.note-sheet::backdrop { background: #0008; }
.note-sheet > button, .note-job-list > button { display: block; width: 100%; padding: 1rem; margin: .35rem 0; text-align: left; font: inherit; }
.note-sheet input { width: 100%; box-sizing: border-box; padding: .8rem; font: inherit; }
/* Answer sources and replay share the thread's width and the composer's bottom edge. */
.reply-sources { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; max-width: 100%; margin-top: 7px; }
.reply-source { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; max-width: 250px; border: 1px solid var(--border, #667085); border-radius: 12px; padding: 3px 8px; color: inherit; background: transparent; font: inherit; font-size: 11px; text-decoration: none; }
.reply-source span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-actions { display: inline-flex; gap: 6px; margin-left: 5px; }
.reply-control { flex: none; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; min-width: 28px; min-height: 32px; padding: 4px; }
.reply-player { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; padding: 4px 0; }
.reply-player[hidden], .reply-error[hidden] { display: none; }
.reply-player { order: -1; }
.agent-task-box:has(.reply-player:not([hidden])) { display: flex; flex-direction: column; }
.reply-scrubber { min-width: 20px; flex: 1; width: 100%; }
.reply-time { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reply-error { min-width: 0; flex: 1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-player:has(.reply-error:not([hidden])) > :is(.reply-scrubber, .reply-time, .reply-control:not(:last-child)) { display: none; }
.reply-sentence { cursor: pointer; border-radius: 2px; }
.reply-speaking, .transcript-jump { background: #e2c16f55; }
.reply-word-speaking { color: var(--accent); }
/* Suite settings keep the native checkbox semantics under an iOS switch. */
html.suite #settings .check { align-items: center; min-height: 44px; }
html.suite #settings .check span { flex: 1; min-width: 0; }
html.suite #settings .check:has(input[type="radio"]) { align-items: flex-start; }
html.suite #settings .check input[type="radio"] { margin-top: 0.15rem; }
html.suite #settings input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; order: 1; flex: none;
  width: 51px; height: 31px; margin: 0; border: 0; border-radius: 16px; background: #787880; cursor: pointer;
}
html.suite #settings input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
}
html.suite #settings input[type="checkbox"]:checked { background: var(--accent); }
html.suite #settings input[type="checkbox"]:checked::before { transform: translateX(20px); }
html.suite #settings input[type="checkbox"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
html.suite #settings .check + .help { margin-top: 0; padding-right: 63px; }
/* The whole row is the tap target (44pt); the ring stays 22pt. */
#settings label:has(> input[type="radio"]:not(.call-target-row input)) { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; box-sizing: border-box; cursor: pointer; }
/* Radios: an empty ring when off (the native dark radio draws a black disc that reads as a hole), accent dot when on. */
#settings input[type="radio"]:not(.call-target-row input) {
  appearance: none; -webkit-appearance: none; flex: none; box-sizing: border-box;
  width: 22px; height: 22px; margin: 0; border: 2px solid var(--edge); border-radius: 50%; background: transparent; cursor: pointer;
}
#settings input[type="radio"]:not(.call-target-row input):checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 40%, transparent 46%); }
#settings input[type="radio"]:not(.call-target-row input):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
html.suite .start-card, html.suite .reason-card { width: 100%; border: 0; border-radius: 0; background: none; padding: 0; }
html.suite .reasons { gap: 0; }
html.suite .btn.reason { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
/* A dock takes space out of the shell's full-width page. */
html.suite[data-agent-docked] .app {
  width: calc(100vw - var(--agent-dock-used, 0px) - var(--agent-dock-gap, 16px)); max-width: 100%; min-width: 0;
  margin-left: calc(var(--agent-dock-used, 0px) + var(--agent-dock-gap, 16px)); margin-right: 0;
}
html.suite[data-agent-docked] main { margin-inline: 0; }
/* The sheet sits in the page's own column (desktop-layout.js): no sidebar to make room for, whatever the dock last measured. */
html.suite[data-agent-docked]:has(.desktop-layout #agent-sheet, .duo-grid #agent-sheet) .app { width: auto; margin-left: 0; }
html.suite[data-agent-docked] .app > *, html.suite[data-agent-docked] main > * { min-width: 0; max-width: 100%; }


.note-draft { display: flex; flex-direction: column; gap: .75rem; }
.note-draft:not([open]) { display: none; }
.note-draft > button { width: auto; margin: 0; padding: .5rem; align-self: flex-start; }
.note-draft h2 { margin: 0; }
.note-draft-text { flex: 1; min-height: 10rem; overflow-y: auto; white-space: pre-wrap; font-size: 1.25rem; line-height: 1.5; outline-offset: 4px; }
.note-draft-text input { width: auto; padding: .1rem; font-size: inherit; }
.note-draft-span { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; cursor: text; }
.note-guess { color: var(--dim); }
.note-draft-kinds, .note-draft-actions, .note-audio { display: flex; align-items: center; gap: .5rem; }
.note-draft-kinds button { flex: 1; padding: .65rem .3rem; border: 1px solid var(--line); border-radius: .4rem; background: transparent; color: inherit; font: inherit; }
.note-draft-kinds [aria-pressed="true"] { background: var(--accent); color: white; }
.note-draft-actions { justify-content: space-between; padding-bottom: env(safe-area-inset-bottom); }
.note-draft-actions button { padding: .75rem 1.25rem; font: inherit; border: 0; border-radius: 1.5rem; }
.note-post-button { background: var(--accent); color: white; }
.note-discard-button { color: #b42525; background: transparent; }
.note-audio { font-size: .8rem; }
.note-audio input { flex: 1; min-width: 0; padding: 0; }
.note-audio button { padding: .35rem; font: inherit; }

/* PaceNotes tool chips (features/tool-chips/tool-chips.js): the selected chip is filled orange; a pinned one carries a small dot. */
.tool-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.tool-chips[hidden] { display: none; }
.tool-chip { min-height: 44px; padding: 0 1rem; border: 1px solid var(--edge); border-radius: 22px; background: none; color: inherit; font: inherit; font-weight: 600; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tool-chip.selected { background: var(--btn); border-color: var(--btn-edge); color: var(--on-btn); }
.tool-chip.pinned::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 0.4rem; border-radius: 50%; background: currentColor; vertical-align: middle; }
.tool-off { display: none !important; }

/* A trackpad or mouse (iPad Magic Keyboard, desktop): the control under the pointer lights up a little. A tint laid over the
   button's own colour, so filled and outlined buttons both show it; touch screens never get a stuck hover. A pressed or active
   control keeps its own ring. */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled), summary, [role="button"], [role="tab"], select { cursor: pointer; }
  :is(.btn, .icon-btn, .suite-tabs button, .agent-badge, .agent-call, .agent-call-pick, .agent-talk-button, .agent-seg-btn,
  .agent-settings-toggle, .chip, .link-row, details > summary):hover:not(:disabled, .active, [aria-pressed="true"]) {
    box-shadow: inset 0 0 0 100vmax rgba(128, 128, 128, 0.14);
    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 10%, transparent);
  }
}
.agent-talk-through { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; padding: 8px; }
.agent-talk-through small { grid-column: 2; }

/* ---- iPhone Duo (features/duo.js, shared/duo-layout.js) ------------------------------------------------------------------
   Two stylings. The outer screen and every regular iPhone keep the phone page: none of this applies there, because the page only
   sets html[data-duo-posture] on the inner screen (flat or folded). The inner screen splits into two sides, left and right when
   open flat, top and bottom when propped up, and each side holds the page's own panels in the order the member chose. Apple's
   advice is size classes, not poses, so the columns follow the width and the posture only decides the preset and the fold gap. */
html[data-duo-posture] { --duo-fold: 28px; scroll-padding-top: 160px; }
html[data-duo-posture] .app { max-width: none; margin-inline: 0; }
html[data-duo-posture] main { max-width: none; }
html[data-duo-posture="folded"] .app { padding-bottom: 0; }
.duo-grid { display: flex; gap: 20px; align-items: flex-start; width: 100%; min-width: 0; }
.duo-region { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.duo-region:not(:has(> :not([hidden]))) { display: none; }
/* Half of a propped Duo, another app on the other half (data-duo-pane top or bottom): one column, the order from shared/duo-layout.js.
   Hang up stays pinned to the bottom of the call screen however long the column gets. */
html[data-duo-posture="pane"] .duo-grid { flex-direction: column; align-items: stretch; gap: 12px; }
html[data-duo-posture="pane"] .duo-region { gap: 12px; }
html[data-duo-posture="pane"] .call-screen { overflow-y: auto; overscroll-behavior: contain; }
html[data-duo-posture="pane"] .call-screen .duo-region #call-hangup { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 2; }
.duo-grid .card, .duo-grid .cue-card, .duo-grid .link-row { margin-block: 0; }
.duo-region > .duo-bar { flex: none; }
.duo-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.duo-bar-btn {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 22px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.duo-bar-btn[aria-pressed="true"] { background: var(--btn); border-color: var(--btn-edge); color: var(--on-btn); }
.duo-bar-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.call-screen .duo-bar-btn { background: var(--pr-btn); border-color: var(--pr-edge); color: var(--pr-fg); }
.call-screen .duo-bar-btn[aria-pressed="true"] { background: var(--pr-fg); border-color: var(--pr-fg); color: var(--pr-bg); }
/* The agent chat docks into its side like it does on the desktop page. */
.duo-grid .agent-sheet[data-dock="docked"] { position: relative; inset: auto; z-index: auto; display: block; }
.duo-grid .agent-sheet[data-dock="docked"][hidden] { display: none; }
.duo-grid .agent-sheet[data-dock="docked"] .agent-sheet-box {
  width: 100% !important; max-width: none; height: max(360px, min(620px, calc(100dvh - 260px)));
  border: 1px solid var(--line); border-radius: 12px; box-shadow: none;
}
.duo-grid .agent-sheet[data-dock="docked"] .agent-dock-grip { display: none; }
html:has(.duo-grid .agent-sheet[data-dock="docked"]:not([hidden])) { --agent-dock-used: 0px; --agent-dock-gap: 0px; }
/* Half folded: the top half and the bottom half, with the fold between them. Nothing to tap sits on the fold. */
html[data-duo-posture="folded"] .duo-grid { flex-direction: column; align-items: stretch; gap: var(--duo-fold); height: calc(100dvh - var(--duo-grid-top, 0px)); }
html[data-duo-posture="folded"] .duo-region { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html[data-duo-posture="folded"] .duo-region[data-region="first"] { flex: 0 0 calc(50dvh - var(--duo-grid-top, 0px) - var(--duo-fold) / 2); }
html[data-duo-posture="folded"] .duo-region[data-region="second"] { flex: 1 1 0; }
/* The call screen keeps its dark look. Its head leads the first side and its end buttons close the second. */
.call-screen > .duo-grid { flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; }
/* The page's own middle block is empty once its tip and notes have moved into the sides. It must not keep its share of the free space. */
html[data-duo-posture] .call-screen > .call-body:not(:has(> *)) { display: none; }
.call-screen .duo-region > * { flex: none; width: 100%; max-width: 34rem; margin-inline: auto; }
.call-screen .duo-region > .duo-bar { justify-content: center; }
.call-screen.keypad-open .duo-region .call-tip, .call-screen.keypad-open .duo-region .call-said { display: none; }
.call-screen .duo-region .agent-bar.pn-banner { position: static; z-index: auto; min-height: 0; padding: 4px 0 8px; border-bottom: 0; background: transparent; }
.call-screen .duo-region .agent-bar.pn-banner .agent-name { background: var(--pr-btn); color: var(--pr-fg); }
html[data-duo-posture="folded"] .call-screen { padding-bottom: 0; }
/* The agent bar belongs to the page's top on a phone. Beside the call it sits in its side. */
/* Walk the job: the camera takes a side. The preview is drawn over this slot (features/duo.js placeCamera). */
.duo-camera-slot { flex: 1 1 auto; min-height: min(62dvh, 520px); border: 1px dashed var(--edge); border-radius: 16px; }
.duo-camera-slot[hidden] { display: none; }
html[data-duo-posture="folded"] .duo-camera-slot { min-height: 160px; }
.camera-preview.duo-placed {
  position: fixed; z-index: 35; display: flex; flex-direction: column; box-sizing: border-box; max-width: none; padding: 0.5rem;
  border: 1px solid var(--line); border-radius: 16px; box-shadow: none;
}
.camera-preview.duo-placed video { flex: 1 1 auto; min-height: 0; max-height: none; width: 100%; margin: 0.4rem 0; border-radius: 12px; object-fit: cover; background: #000; }
/* A room opens beside the page on the inner screen: right when flat, bottom half when folded. */
html[data-duo-posture="flat"][data-room-open] .app { margin-right: calc(var(--room-w, 0px) + 16px); }
html[data-duo-posture="folded"][data-room-open] .room-panel {
  left: 0; right: 0; top: 50% !important; bottom: 0; width: 100% !important; border-left: 0; border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--text) 14%, transparent);
}
html[data-duo-posture="folded"][data-room-open] .room-panel-grip { display: none; }
html[data-duo-posture="folded"][data-room-open] .duo-region[data-region="first"] { flex: 0 0 calc(50dvh - var(--duo-grid-top, 0px) - var(--duo-fold) / 2); }
/* Hands-free: big tip text, few buttons, the Companion big. On the outer screen too. */
html[data-duo-big-tip] .cue-card .cue, html[data-duo-big-tip] .call-tip .cue { font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1.22; }
html[data-duo-big-tip] .call-tip .cue.quiet { font-size: clamp(1.3rem, 4vw, 1.8rem); }
html[data-duo-big-tip] .call-said, html[data-duo-big-tip] .call-levels, html[data-duo-big-tip] #call-keypad-toggle { display: none; }
html[data-duo-companion="off"] .agent-char { display: none; }
html[data-duo-companion="big"] .agent-char { width: 200px; height: 266px; z-index: 27; }
html[data-duo-companion="big"] .call-screen { padding-bottom: calc(266px + max(1rem, env(safe-area-inset-bottom))); }
html[data-duo-companion="big"][data-duo-posture="closed"] .agent-char { right: 50%; transform: translateX(50%); }
html[data-duo-companion="big"][data-duo-posture="closed"] body:where(:has(.agent-char.ready)) { padding-bottom: calc(266px + max(0.75rem, env(safe-area-inset-bottom))); }
html[data-duo-companion="big"]:not([data-duo-posture="closed"]) .duo-region[data-region="second"]::after { content: ""; flex: none; height: 250px; }
/* ---- Settings > Duo layout --------------------------------------------------------------------------------------------- */
.duo-settings { display: grid; gap: 1rem; }
.duo-settings[hidden] { display: none; }
.duo-posture { margin: 0; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.duo-posture legend { padding: 0 0.4rem; font-size: 1rem; }
.duo-posture .help { margin-bottom: 0.5rem; }
.duo-posture .choice-rows { display: grid; gap: 0.4rem; }
.duo-arrange { margin-top: 0.75rem; }
.duo-arrange summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.duo-panel-list { display: grid; gap: 6px; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.duo-panel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.duo-panel-name { flex: 1 1 8rem; min-width: 0; font-weight: 600; }
.duo-panel-side { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--soft, var(--panel)); border: 1px solid var(--line); font-size: 0.8rem; color: var(--dim); }
.duo-panel-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.duo-panel-btns .btn { min-height: 44px; }
.duo-settings-foot { display: flex; flex-wrap: wrap; gap: 8px; }

/* The open Duo's two sides: the bar stays on the left side, clear of the fold. */
html[data-duo-posture="flat"] .suite-tabs { justify-content: flex-start; padding-right: calc(50% + var(--duo-fold, 28px) / 2); }