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

: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); }

* { 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; }
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; align-items: center; gap: 0.6rem; }
.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; }

.steps { margin: 0.5rem 0 0; padding-left: 1.4rem; }
.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;
}
.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="password"], input[type="url"], input[type="tel"] {
  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; }
.notice { padding: 0.75rem 0.9rem; border-left: 4px solid var(--mark); background: var(--bg); border-radius: 8px; }
.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 two mode buttons --------------------------------------------- */

.modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
  min-width: 0; margin: 0; padding: 0; border: 0;
}
.modes legend { grid-column: 1 / -1; padding: 0; }
.mode { position: relative; display: block; min-width: 0; cursor: pointer; }
.mode input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mode-face {
  display: flex; flex-direction: column; gap: 0.2rem; height: 100%; min-height: 76px;
  padding: 0.75rem; border: 2px solid var(--edge); border-radius: 14px; background: var(--bg);
}
.mode-title { font-weight: 700; font-size: 1.05rem; }
.mode-help { color: var(--dim); font-size: 0.9rem; line-height: 1.3; }
.mode input:checked + .mode-face { border-color: var(--mark); background: var(--hl); }
.mode input:checked + .mode-face .mode-title::before { content: "\2713\00a0"; color: var(--accent); }
.mode input:focus-visible + .mode-face { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- 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; }

/* ---- 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 { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.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.5rem; color: var(--dim); font-size: 0.9rem;
}

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

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

.sheet {
  position: fixed; top: 0; 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; }
.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; }

@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); }
.fine-print, .fine-print a { font-size: 0.8rem; }

.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; }
@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; }
.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;
}

/* 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: 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; }
.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-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(4.5rem, 1fr)); gap: 0.6rem; }
.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); }
@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; }
.reason-card { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line, #d9dce5); }
.reason-card .field-label { margin-top: 0; }
.settings-line { margin-top: 16px; font-size: 15px; opacity: 0.8; }
.start-hint { margin-top: 12px; }
.settings-line .linklike, .reason-summary .linklike { display: inline; min-height: 0; 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[aria-checked="true"]::after { content: "\2713"; margin-left: auto; padding-left: 8px; color: var(--accent); }
.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; }
.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; }
}
@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: -1rem; 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; }
html.shell .app { display: flex; flex-direction: column; height: 100%; height: 100dvh; 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;
}

/* Who said it (design 12.26): the member's own lines are blue, every other speaker another colour, an unnamed group neutral. */
.item.who-me { background: var(--who-me-bg, #e3eefc); border-left: 5px solid var(--who-me-edge, #2a6fdb); }
.item.who-me .meta { color: var(--who-me-edge, #1f5bb8); }
.item.who-other { background: var(--who-other-bg, #f1e8f8); border-left: 5px solid var(--who-other-edge, #8a4bb0); }
.item.who-other .meta { color: var(--who-other-edge, #6d3a8c); }
.item.who-unsure { border-left: 5px solid var(--who-unsure-edge, #8b8f9c); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .item.who-me { background: #172133; --who-me-edge: #6aa6ff; }
  :root:not([data-theme="light"]) .item.who-other { background: #241b2c; --who-other-edge: #c493e6; }
  :root:not([data-theme="light"]) .item.who-unsure { --who-unsure-edge: #8b8f9c; }
}
:root[data-theme="dark"] .item.who-me { background: #172133; --who-me-edge: #6aa6ff; }
:root[data-theme="dark"] .item.who-other { background: #241b2c; --who-other-edge: #c493e6; }
:root[data-theme="dark"] .item.who-unsure { --who-unsure-edge: #8b8f9c; }
.names-menu { position: relative; }
.names-menu summary { 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, 90vw); margin-top: 0.3rem; padding: 0.75rem; border-radius: 12px; background: var(--card, #fff); border: 1px solid var(--btn-edge, #999); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.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; }
.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-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-note { margin: 0 0 0.4rem; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-note-label { font-weight: 600; }
.ask-when { margin: 0 0 0.6rem; }
.ask-card .result { margin-top: 0.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%; }
.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: flex; align-items: center; gap: 12px; padding: 8px 0; }
.agents-list-row > div { flex: 1; min-width: 0; }
.agents-list-row p { margin: 4px 0 0; }
.agents-list-row img { object-fit: contain; }

/* 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, #call-output { 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; }

.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; }
.limits-menu { margin: .5rem 1rem; }
.limits-menu summary { cursor: pointer; }
[data-limits-badge] { border-radius: 1rem; background: #ff5600; color: #080808; padding: .1rem .45rem; }
@media (max-width: 480px) { .limits-page .sheet-head { flex-wrap: wrap; } .limits-page .sheet-body { padding: 1rem; } .limits-rule { gap: .7rem; } }