/* The look — visual pass, 7 October 2026 (direction 3). Dark by default; Light is chosen in
   Settings and kept on that device only. Violet is an accent and nowhere else: the mark, Send,
   the Face ID button, Lock it in, the offer's Yes, the badge, the selected Settings option, the
   area Clive is in now, Send feedback, and small links as violet text; and, as a tint only, Clive's
   bubble (follow-up brief, 7 October 2026). Every other border, rule and button is neutral. The phone's own font; nothing loads. The mark is the only thing that
   moves while Clive writes; the interview's pane keeps its motion as built. */

:root {
  --bg: #0F0C15;
  --surface: #1A1521;
  --owner: #2A2333;              /* the owner's messages */
  --clive: #1E1630;              /* Clive's bubble: a deep violet tint, never bright violet */
  --on-clive: #FFFFFF;           /* text in it: 17.3:1, at least the bare page's 17.0 */
  --line: rgba(255, 255, 255, 0.09);
  --text: #F2EFF6;
  --muted: #9A92A6;
  --violet: #8A05FF;             /* fills only */
  --violet-text: #B57BFF;        /* small violet text and links */
  --on-violet: #FFFFFF;
  --error: #FF7A7A;              /* errors only (Dan's ruling, 7 Oct 2026) */
  --scrim: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #FCFBFD;
  --surface: #FFFFFF;
  --owner: #EFECF3;
  --clive: #F5F0FD;              /* a very light violet */
  --on-clive: #07050A;           /* 18.1:1, at least the bare page's 18.05 */
  --line: #E2DEE8;
  --text: #15111B;
  --muted: #5F5869;
  --violet-text: #7400D6;
  --error: #C62828;
  --scrim: rgba(21, 17, 27, 0.35);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- the artwork ---------------- */
.lockup { display: block; height: 30px; width: auto; aspect-ratio: 1231.37 / 276; color: var(--text); flex: none; }
.lockup .lk-mark { color: var(--violet); }
.lockup.big { height: 45px; margin: 0 auto 10px; }
.poweredby { margin: 0 0 22px; text-align: center; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); }

/* The mark in Clive's place while he writes: one blade at a time, upright to flattest, 1.6 s round (50% faster, 11 Oct 2026).
   The blades are lit by four overlays masked to the mark; the wedges fit Clive-Icon-Violet.svg. */
.fan4 { position: relative; display: inline-block; vertical-align: middle; aspect-ratio: 237.43 / 216; --hi: #E6CCFF; }
.fan4 i { position: absolute; inset: 0;
  -webkit-mask: url(/Clive-Icon-Violet.svg) center / contain no-repeat;
          mask: url(/Clive-Icon-Violet.svg) center / contain no-repeat; }
.fan4 .b0 { background: #8A05FF; }
.fan4 .bl { opacity: 0; animation: blade 1.6s ease-in-out infinite; }
.fan4 .b1 { background: conic-gradient(from -90deg at 10% 91%, var(--hi) 0 104deg, transparent 104deg); }
.fan4 .b2 { background: conic-gradient(from 14deg at 10% 91%, var(--hi) 0 22deg, transparent 22deg); animation-delay: .4s; }
.fan4 .b3 { background: conic-gradient(from 36deg at 10% 91%, var(--hi) 0 24deg, transparent 24deg); animation-delay: .8s; }
.fan4 .b4 { background: conic-gradient(from 60deg at 10% 91%, var(--hi) 0 120deg, transparent 120deg); animation-delay: 1.2s; }
@keyframes blade { 0% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fan4 .bl { animation: none; } }

/* ---------------- buttons ---------------- */
button {
  padding: 12px 18px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
button:hover { background: var(--owner); }
button.primary { background: var(--violet); color: var(--on-violet); border-color: transparent; }
button.primary:hover { background: var(--violet); filter: brightness(1.08); }
button.secondary { font-weight: 500; }
button:disabled { opacity: 0.5; cursor: default; }
button:disabled:hover { background: var(--surface); }
button.primary:disabled:hover { background: var(--violet); filter: none; }
:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
.linky { background: none; border: none; padding: 6px 0 0; color: var(--violet-text); font-size: 13px;
  font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 4px; }
.linky:hover { background: none; text-decoration: underline; }
.back-row { margin: 22px 0 0; text-align: center; }

/* Every text field at 16px or more (follow-up brief): below that, Safari on iPhone zooms the page
   when the field is tapped. Pinch-zoom is never blocked. */
input, textarea { font: inherit; font-size: 16px; color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus { outline: none; border-color: var(--muted) !important; }

/* ---------------- gate: start page, welcome page, close panel ---------------- */
.gate {
  position: fixed; inset: 0; display: flex; overflow-y: auto; background: var(--bg);
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
.gate-box { width: 400px; max-width: 100%; margin: auto; }
.gate-box.wide { width: 560px; }
.tag { margin: 0 0 30px; text-align: center; color: var(--muted); font-size: 15px; }
.login { margin: 0 0 10px; font-size: 17px; font-weight: 650; }
.gate-box .faceid { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; padding: 0 18px; font-size: 16px; }
.faceid .pk-icons { display: inline-flex; gap: 6px; flex: none; }
.faceid .pk-icons svg { width: 22px; height: 22px; display: block; }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#faceid.hidden + .or { display: none; }   /* no Face ID on this device yet: the email is the only way */
#code-note { margin: 0 0 10px; }
.code-links { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
/* "New code sent." under the code box, and Send another greyed while it counts down (16 Oct 2026). */
.sent { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.linky:disabled { color: var(--muted); opacity: 1; }
.linky:disabled:hover { background: none; text-decoration: none; }
.code-links .linky { padding: 6px 0; }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1 1 auto; min-width: 0; margin: 0; }
.code-row button { flex: none; height: 50px; padding: 0 18px; }
.gate-box input {
  width: 100%; height: 50px; padding: 0 14px; font-size: 16px; margin: 18px 0 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.gate-box .code-row input { margin: 0; }
.lede { margin: 0 0 22px; text-align: center; color: var(--muted); font-size: 15px; }
#daily-lede { color: var(--text); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.frame p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.gate-box h1 { font-size: 20px; margin: 6px 0 14px; font-weight: 650; letter-spacing: -0.01em; text-align: center; }
.lang-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.lang-row button { flex: 1 1 46%; height: 50px; }
.error { color: var(--error); margin-top: 10px; min-height: 1em; font-size: 14px; }
.welcome { color: var(--text); margin: 0 0 10px; font-size: 15px; }
.thanks { color: var(--text); margin: 0 0 18px; font-size: 15px; line-height: 1.6; text-align: center; }

/* ---------------- the conversation surface ---------------- */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
  padding: calc(6px + env(safe-area-inset-top)) 16px 6px; border-bottom: 1px solid var(--line); }
/* The mark at twice its old size in a bar only 3 px taller (follow-up brief): the padding gives way. */
.topbar-right #close { background: none; border: none; padding: 4px 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.topbar-right #close:hover { color: var(--text); }
.panes { flex: 1; display: flex; min-height: 0; }
.left { flex: 1 1 58%; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.right { flex: 1 1 42%; max-width: 460px; position: relative; background: var(--bg); }
/* Shown order: the pickup, the conversation, the offer (just above the input), the input. */
.left > .pickup { order: 0; }
.left > .transcript { order: 1; }
.left > .offer { order: 2; }
.left > .composer { order: 3; }

.transcript { flex: 1; overflow-y: auto; padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.transcript > * { flex: none; }
.transcript .msg { margin: 0; max-width: 680px; white-space: pre-wrap; overflow-wrap: anywhere; }
.transcript .msg .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.transcript .msg.clive { max-width: min(92%, 680px); }
.transcript .msg.you { align-self: flex-end; max-width: min(82%, 560px); }
.transcript .msg.you .body { background: var(--owner); padding: 9px 13px; border-radius: 16px 16px 4px 16px; }
/* Clive's replies in a bubble (follow-up brief): the owner's shape mirrored, left-aligned, a violet tint.
   The mark he writes with stays bare. */
.transcript .msg.clive { align-self: flex-start; }
.transcript .msg.clive .body { background: var(--clive); color: var(--on-clive); padding: 9px 13px; border-radius: 16px 16px 16px 4px; }
/* The link to an email Clive quoted (ruled 9 Oct 2026): small and light, after what it backs. */
.transcript .msg.clive .body a.maillink { font-size: 0.8em; color: inherit; opacity: 0.75; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.transcript .msg.thinking .body { line-height: 1; padding: 2px 0 0; background: none; }
/* The mark at twice its old size, with its own room underneath (live test, 9 Oct 2026: it sat on the line below). The room
   is padding inside the message, because Safari drops a scrolling column's bottom padding and the last message lands on the line. */
.transcript .msg.thinking { padding-bottom: 20px; }
.transcript .msg.thinking .fan4 { display: block; width: 36px; }
/* The activity line (brief of 13 Oct 2026): small, light text to the right of the blades, saying what the app is doing.
   One line on any width, cut with an ellipsis, never wrapped; centred on the mark. A new line fades in over 150 ms;
   with reduced motion it simply changes. The muted colour holds 6:1 or better on the page in both themes. */
.transcript .msg.thinking .working { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.transcript .msg.thinking .fan4 { flex: none; }
.activity { min-width: 0; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 150ms ease; }
.activity.out { opacity: 0; }
/* The wait so far, after the activity words (small fixes 5, part 3): never cut, figures that don't jiggle as they count. */
.waited { flex: none; margin-left: -4px; font-size: 13px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.waited:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .activity { transition: none; } }
/* Under Clive's reply: what that turn put up to check. Violet text, a violet dot; tappable. */
.tocheck { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin: -8px 0 0; padding: 4px 0;
  border: 0; background: none; color: var(--violet-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tocheck::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex: none; }
.tocheck:hover { background: none; text-decoration: underline; }
/* Nothing from that turn waits any more: plain grey, no dot, not tappable. The record stays. */
.tocheck.checked { color: var(--muted); font-weight: 500; cursor: default; }
.tocheck.checked::before { display: none; }
.tocheck.checked:hover { text-decoration: none; }
/* Nothing left to check, but something held: grey like Checked, still tappable (brief of 8 Oct 2026). */
.tocheck.held { color: var(--muted); font-weight: 500; }
.tocheck.held::before { display: none; }

/* The pickup: a centred system line; only "Start fresh instead" is violet. */
.pickup { margin: 0; padding: 12px 16px 0; text-align: center; color: var(--muted); font-size: 13px; }
.pickup .linky { padding: 0 0 0 4px; font-size: 13px; }

/* The input: always three lines; Dictate and Send beneath it, side by side, equal width. */
.composer { border-top: 1px solid var(--line); padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); flex: none; }
.composer textarea { display: block; width: 100%; height: 68px; padding: 7px 12px; font-size: 16px; line-height: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; resize: none; }
.composer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.composer-row button { height: 44px; padding: 0 12px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.composer-row #next { grid-column: 1 / -1; }
.mic { color: var(--text); }
.mic.recording { background: var(--text); color: var(--bg); border-color: var(--text); }
.mic.unsupported { opacity: 0.4; cursor: not-allowed; }
.ctl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ctl-row button { height: 44px; padding: 0 12px; }

/* Demo mode (DEMO_CODES): no brain pane, no Pause. Its controls stand in for the text box. */
body.demo .right { display: none !important; }
body.demo #pause { display: none !important; }
body.demo .ctl-row { grid-template-columns: 1fr; }
.composer.choosing #input, .composer.choosing #mic, .composer.choosing #send { display: none !important; }
.composer.choosing .composer-row { margin-top: 10px; }
.choices { margin-bottom: 4px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; text-align: left; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; min-width: 0; }
.tile small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted); }
.tile.selected { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.tile.off { opacity: 0.45; cursor: default; }
.tile.off:hover { background: var(--surface); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; font-size: 15px; line-height: 1.3; background: var(--surface); }
.opt:has(input:checked) { border-color: var(--text); }
.opt input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--text); }
.choice-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* ---------------- the interview's pane: node-and-wire, as built; recoloured only ---------------- */
.brain { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.brain line { stroke: var(--muted); }
.brain text { fill: var(--muted); }
.brain .now text, .brain text.now { fill: var(--text); font-weight: 600; }
.brain .kernel { fill: var(--muted); }
.brain .glow { fill: var(--muted); }
.pane-empty { position: absolute; left: 0; right: 0; bottom: 28px; margin: 0; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------------- daily mode (working notes 83, 84) ---------------- */
body.daily .right { display: none; }
body.daily .left { border-right: none; }
body.daily #pause { display: none; }
body.daily .ctl-row { display: none; }
.dailybar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.dailybar .tile { position: relative; height: 50px; min-height: 0; padding: 0 6px; display: grid; place-items: center;
  text-align: center; font-size: 12.5px; line-height: 1.15; font-weight: 500; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.dailybar .tile.live { color: var(--text); font-weight: 600; }
.dailybar .tile:disabled { opacity: 1; cursor: default; }
.dailybar .tile:disabled:hover { background: var(--surface); }
/* The badge on Add a fact: violet, a white number centred on a grid so it cannot drift. */
.badge { position: absolute; top: -7px; right: -6px; height: 20px; min-width: 20px; padding: 0 6px; border-radius: 10px;
  display: grid; place-items: center; background: var(--violet); color: var(--on-violet);
  font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg); }

/* The review and Settings: panels over the conversation. */
.review { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.review-box { background: var(--bg); color: var(--text); width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  border-radius: 22px 22px 0 0; border-top: 1px solid var(--line);
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) { .review { align-items: center; } .review-box { border-radius: 22px; border: 1px solid var(--line); } }
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.review-head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.review-head button.secondary { background: none; border: none; padding: 4px 0; font-size: 14px; color: var(--muted); }
.review-head button.secondary:hover { color: var(--text); }
.newfact { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.newfact-row { display: flex; gap: 8px; align-items: center; }
.mic-note { margin: 6px 0 0; }
.newfact textarea, .fact textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font: inherit; resize: vertical; }
.note { color: var(--muted); font-size: 14px; margin: 4px 0; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 8px; }
.fact .where { order: 1; font-size: 13px; color: var(--muted); }
.fact textarea { order: 0; font-size: 16px; font-weight: 600; line-height: 1.35; background: var(--bg); }
.fact .old { order: 2; font-size: 13px; color: var(--muted); margin: 0; }
.fact .old.replaces { padding-left: 10px; border-left: 2px solid var(--line); }
.fact .old.replaces s { text-decoration-thickness: 1px; }
.fact .warn { order: 3; color: var(--text); font-size: 14px; margin: 0; }
.fact .row { order: 4; display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.fact .row button { flex: 1 1 auto; height: 42px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
.fact .row .lock { flex: 2 1 auto; background: var(--violet); color: var(--on-violet); border-color: transparent; }
.fact .row .lock:hover { background: var(--violet); filter: brightness(1.08); }
.fact .row .lock:disabled:hover { background: var(--violet); filter: none; }
/* Keep both: a violet-text link beneath the answers, not a fourth button. */
.fact .row .keep { order: 9; flex: 0 0 100%; height: auto; padding: 2px 0; text-align: left; background: none; border: none;
  color: var(--violet-text); font-size: 13px; font-weight: 600; }
.fact .row .keep:hover { background: none; text-decoration: underline; }
.fact .checking, .fact .msg { order: 5; }
/* A card for a line already in the books ("Instead of: …") shows the line first, the old one beneath. */

.setcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.setlabel { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.seg button { height: 38px; padding: 0; border: none; border-radius: 9px; background: none; color: var(--muted); font-size: 14px; }
.seg button:hover { background: none; color: var(--text); }
.seg button[aria-checked="true"] { background: var(--violet); color: var(--on-violet); }

/* ---------------- Face ID (working note 86) ---------------- */
.offer { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.offer p { margin: 0 0 12px; color: var(--text); font-size: 15px; }
.offer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.offer-row button { height: 42px; padding: 0 12px; }
.offer.inchat { margin: 0 12px 10px; }

/* ---------------- close panel ---------------- */
#feedback { margin: 8px 0 20px; text-align: left; }
#feedback h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 8px 0 16px; }
.fq { margin: 0 0 18px; }
.fq label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.fq textarea { width: 100%; padding: 10px 12px; font-size: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; resize: vertical; }
.ta-wrap { position: relative; }
.ta-wrap textarea { padding-right: 46px; }
.fb-mic { position: absolute; right: 8px; bottom: 8px; padding: 6px 8px; border-radius: 10px; display: inline-flex; }
.scale { display: flex; flex-wrap: wrap; gap: 8px; }
.scale button { flex: 1 1 auto; padding: 9px 12px; font-size: 14px; font-weight: 500; border-radius: 12px; }
.scale button.selected, .scale button.selected:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
#feedback-send { width: 100%; height: 50px; margin-top: 4px; }
.back-row button { height: 44px; padding: 0 22px; }
#measurements { margin: 8px 0 18px; }
#measurements table { width: 100%; border-collapse: collapse; font-size: 14px; }
#measurements td { padding: 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
#measurements td:first-child { color: var(--muted); padding-right: 16px; white-space: nowrap; }
#artifacts-close h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
#artifacts-close ul { list-style: none; margin: 0; padding: 0; }
#artifacts-close li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
#artifacts-close .connect { font-size: 13px; padding: 6px 12px; }

/* ---------------- phones and narrow windows ---------------- */
@media (max-width: 760px) {
  .panes { flex-direction: column; }
  /* the interview's pane: a pinned strip above the conversation, as built */
  .right { order: 0; flex: 0 0 140px; width: 100%; max-width: none; border-bottom: 1px solid var(--line); }
  .brain text { font-size: 18px; }
  .pane-empty { bottom: 10px; }
  .left { order: 1; flex: 1 1 auto; min-height: 0; border-right: none; }
  .transcript .msg { max-width: 100%; }
  .transcript .msg.you { max-width: 82%; }
  .transcript .msg.clive { max-width: 92%; }
  .dailybar { grid-template-columns: repeat(3, 1fr); }
  .opts { grid-template-columns: 1fr; gap: 6px; }
  .opt { padding: 8px 10px; }
  .tile { padding: 10px 12px; font-size: 14px; }
  .gate { align-items: flex-start; }
  .gate-box, .gate-box.wide { width: 100%; }
  #gate-code, #gate-welcome { padding-top: 6vh; }
}
@media (min-width: 761px) {
  .topbar { padding-left: 24px; padding-right: 24px; }
  .transcript { padding: 24px 24px 36px; }
  .composer { padding-left: 24px; padding-right: 24px; }
  .offer.inchat { margin: 0 24px 10px; }
}

/* ---- Clive connected: Google (working note 94) ---- */
/* The connection card: what Google returned, read-only, where a fact card has its wording. */
.fact.connection .line { order: 0; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.fact.connection > .note:not(.checking):not(.msg) { order: 3; margin: 0; font-size: 13px; }
.fact.connection .old.copy { padding-left: 10px; border-left: 2px solid var(--line); overflow-wrap: anywhere; }
/* A send card, under the reply that made it: the email as it will go, and the owner's tap. */
.sendcard, .pickcard { align-self: flex-start; width: min(92%, 560px); background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.sendcard .sc-head { font-size: 13px; color: var(--muted); }
.sendcard .sc-row { display: flex; gap: 10px; font-size: 14px; overflow-wrap: anywhere; }
.sendcard .sc-k { flex: 0 0 64px; color: var(--muted); }
.sendcard .sc-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sendcard .row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.sendcard .row button { flex: 1 1 auto; height: 42px; padding: 0 12px; font-size: 14px; }
.sendcard .row .sc-send { flex: 2 1 auto; }
.sendcard.settled { opacity: 0.85; }
/* Plainly sent (small fixes 17, part 11): a tick, "Sent" and the time, at full strength. */
.sendcard.sent { opacity: 1; }
.sendcard.sent .sc-msg { margin: 4px 0 0; color: var(--text); font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sendcard .sc-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #15803d; color: #fff; font-size: 13px; font-weight: 700; }
/* A Connect card (the per-feature consent brief): the disclosure just above the button. */
.connectcard { align-self: flex-start; width: min(92%, 560px); background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.connectcard .cc-head { font-size: 15px; font-weight: 600; }
.connectcard .cc-what { margin: 0; font-size: 14px; line-height: 1.45; }
.connectcard .cc-first { margin: 0; font-size: 13px; color: var(--muted); }
.connectcard .row { display: flex; gap: 8px; flex-wrap: wrap; }
.connectcard .row button { flex: 1 1 auto; height: 42px; padding: 0 12px; font-size: 14px; }
.connectcard .row .cc-go { flex: 2 1 auto; }
.pickcard { gap: 4px; }
.pickcard button { height: 42px; font-size: 14px; }
/* Settings: Google. */
#google-card { margin-top: 12px; }
#google-card .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#google-card .row button { height: 42px; padding: 0 14px; font-size: 14px; }
/* Reports: a plain list, newest first. */
#reports-list { display: flex; flex-direction: column; gap: 8px; }
#reports-list .report { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; }
#reports-list .report:hover { border-color: var(--violet); }
#reports-list .rp-date { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
#reports-list .rp-name { overflow-wrap: anywhere; }

/* The sheets Clive can read (8 Oct 2026). */
#sheets-card { margin-top: 12px; }
#sheets-card .row { display: flex; gap: 8px; margin-top: 8px; }
#sheets-card .row button { height: 42px; padding: 0 14px; font-size: 14px; }
#sheets-list .sheet { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
#sheets-list .sh-name { flex: 1 1 auto; overflow-wrap: anywhere; }
#sheets-list .sh-date { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
#sheets-list .sh-remove { flex: 0 0 auto; height: 34px; padding: 0 10px; font-size: 13px; }
/* Our way back, above Google's picker the whole time it is open: its error screens have none of their own. */
.picker-back { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); z-index: 2147483647;
  height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; background: var(--violet); color: var(--on-violet); border: 0; border-radius: 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
/* A reminder card and a contact line (the reminders brief of 17 Oct 2026): two buttons side by side, the number tap-to-call. */
.remcard { align-self: flex-start; width: min(92%, 560px); background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.remcard .sc-head { font-size: 13px; color: var(--muted); }
.remcard .rc-title { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.remcard .rc-when { font-size: 15px; }
.remcard .rc-note { font-size: 13px; color: var(--muted); }
.remcard .row { display: flex; gap: 8px; margin-top: 4px; }
.remcard .rc-btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 42px; padding: 0 10px; font-size: 14px;
  font-weight: 600; border-radius: 12px; background: var(--violet); color: var(--on-violet); text-decoration: none; text-align: center; }
.remcard .rc-btn:hover { filter: brightness(1.08); }
/* After a tap (part 10): both buttons dimmed, still tappable; the grey line says which calendar was opened. */
.remcard.tapped .rc-btn { opacity: 0.5; }
.remcard .rc-opened { font-size: 13px; color: var(--muted); }
.contactline { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 14px;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.contactline.in-card { padding: 0; background: none; border: 0; }
.contactline .pc-name { font-weight: 600; }
.contactline .pc-tel { color: var(--violet-text); }
.contactline .pc-dot { color: var(--muted); }
.sendcard .sc-check { font-size: 13px; font-weight: 600; color: var(--violet-text); padding-left: 74px; }

/* Disconnect, second tap (the small-fixes-2 brief, item 1): greyed (button:disabled), "Disconnecting" and a small turning
   ring in the button's own colour. With reduced motion the ring is gone and the word ends in an ellipsis. */
button.busy { display: inline-flex; align-items: center; gap: 8px; }
button.busy .ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ring 0.8s linear infinite; flex: none; }
@keyframes ring { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.busy .ring { display: none; } button.busy .busy-word::after { content: "\2026"; } }


/* The W (the Outside answers brief of 17 Oct 2026): one small letter at the end of a sentence that used a web page. All Ws
   look alike. The letter is small; its tap area is not: an invisible 34 px square centred on it, so a thumb finds it on a
   phone without the line spacing changing. Two Ws are never side by side (the tags of one sentence make one W), so the
   areas of two sentences' Ws stay apart by at least a word. No callout on a long press: the app shows the site's name. */
.transcript .msg.clive .body .wlink {
  /* The W letter's own baseline on the text's (small fixes 6, part 2, measured on the iPhone after small fixes 5): the box
     shows its overflow, so the button's baseline is the W's own, in any font; the box's padding and border hang below the
     line, inside the room every line already has under its baseline, so the spacing between lines doesn't change. */
  position: relative; display: inline-block; vertical-align: baseline;
  margin: 0 1px 0 3px; padding: 0; border: 0; background: transparent; color: inherit; opacity: 0.7;
  font-family: inherit; font-weight: 600; font-size: 10px; line-height: 0; letter-spacing: 0; cursor: pointer;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.transcript .msg.clive .body .wlink .wbox {
  display: inline-block; box-sizing: border-box; min-width: 14px; padding: 1px 4px 2px; border-radius: 5px;
  border: 1px solid currentColor; text-align: center; line-height: 10px; vertical-align: baseline; pointer-events: none;
}
.transcript .msg.clive .body .wlink::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); }
.transcript .msg.clive .body .wlink:hover { opacity: 1; }
.wtip, .wpop {
  position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px));
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); font-size: 13px;
}
.wtip { padding: 6px 10px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpop { padding: 6px; }
.wpop-head { padding: 4px 8px 6px; color: var(--muted); font-size: 12px; }
.wpop a { display: block; padding: 8px; border-radius: 8px; color: inherit; text-decoration: none; min-height: 34px; }
.wpop a:hover, .wpop a:focus-visible { background: var(--line); }
.wpop a b { display: block; font-weight: 600; }
.wpop a span { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The notice under the greeting: quiet, once (ruled 21:42, item 4). */
.transcript .notice { margin: -4px 0 14px; padding: 0 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; max-width: 560px; }

/* ---------------- Past conversations (working note 139; ruled 25 Oct 2026) ---------------- */
/* In the header beside Done for now, in the same small grey words. */
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-right #past { background: none; border: none; padding: 4px 0; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.topbar-right #past:hover { color: var(--text); }
.topbar-right #past, .topbar-right #close { white-space: nowrap; }
/* A phone: both on one line each, beside the mark, with no sideways scroll. Below 400 px the two are a size smaller; below
   380 px (an iPhone mini or SE) the mark gives way a little, as it does nowhere else, since the words are ruled. */
@media (max-width: 400px) {
  .topbar { gap: 8px; }
  .topbar-right { gap: 12px; }
  .topbar-right #past, .topbar-right #close { font-size: 12px; }
}
@media (max-width: 380px) { .topbar .lockup { height: 24px; } }
@media (max-width: 340px) { .topbar .lockup { height: 20px; } .topbar-right { gap: 10px; } .topbar-right #past, .topbar-right #close { font-size: 11.5px; } }
#past-panel .review-head { gap: 12px; }
#past-panel .review-head h2 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#past-panel #past-back { flex: none; }
/* The list: the Reports list's rows, a tap target the full width. */
#past-list .past-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px;
  padding: 10px 14px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  color: var(--text); text-align: left; font: inherit; height: auto; }
#past-list .past-item:hover { border-color: var(--violet); }
#past-list .pi-when { font-size: 13px; color: var(--muted); }
#past-list .pi-title { font-size: 15px; overflow-wrap: anywhere; }
/* One opened: the conversation's own bubbles, read only, in the panel. */
.past-transcript { flex: none; overflow: visible; padding: 4px 0 8px; }
.past-transcript .msg.removed .body { background: none; color: var(--muted); border: 1px dashed var(--line); font-style: italic; }
.past-transcript .past-ask { align-self: flex-start; padding: 4px 0 0 2px; font-size: 13px; }
.past-transcript .msg.removed { display: flex; flex-direction: column; }
.past-card { align-self: flex-start; width: min(92%, 560px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.past-card .pc-line { font-size: 15px; overflow-wrap: anywhere; }
.past-card .pc-meta { font-size: 13px; color: var(--muted); }
.past-line { align-self: flex-start; margin: 0; font-size: 13px; color: var(--muted); }
.past-del { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; }
.past-del #past-delete { background: none; border: none; padding: 6px 0; font-size: 14px; color: var(--muted); }
.past-del #past-delete:hover { color: var(--text); text-decoration: underline; }
.past-del p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.past-del .row { display: flex; gap: 8px; }
.past-del .row button { flex: 1 1 0; height: 44px; }
#closed .back-row #past-closed { margin-right: 8px; }
@media (max-width: 760px) { #closed .back-row #past-closed { margin: 0 0 10px; } }

/* ---- Past conversations down the left on a wide screen (small fixes 16, part 1) ----
   Only in a daily conversation, from 1024 px wide (app.js SIDE_MEDIA); narrower, the header's Past conversations button as
   built. The list scrolls on its own; the conversation keeps the rest of the width. */
.side { flex: 0 0 272px; width: 272px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto;
  padding: 14px 12px 20px; border-right: 1px solid var(--line); background: var(--bg); }
.side .side-new { width: 100%; height: auto; min-height: 44px; padding: 10px 12px; text-align: left; font-weight: 600; font-size: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text); }
.side-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.side-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; height: auto; min-height: 44px;
  padding: 8px 10px; background: none; border: 1px solid transparent; border-radius: 10px; color: var(--text); text-align: left; font: inherit; }
.side-item .si-when { font-size: 12px; color: var(--muted); }
.side-item .si-title { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.side-item:hover, .side .side-new:hover { border-color: var(--violet); background: var(--surface); }
.side-item.on, .side .side-new.on { background: var(--surface); border-color: var(--line); box-shadow: inset 3px 0 0 var(--violet); }
.side-msg { margin: 6px 2px 0; font-size: 13px; }
/* A past one open in the main pane: read only, the conversation and its box set aside until the owner goes back. */
.side-view { order: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 18px 24px 28px; }
.side-view-head h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--muted); }
.side-transcript { display: flex; flex-direction: column; gap: 14px; }
body.viewing-past .left > .transcript, body.viewing-past .left > .composer, body.viewing-past .left > .pickup,
body.viewing-past .left > .offer { display: none !important; }
body.side-on #past { display: none; }
.past-del #side-delete { background: none; border: none; padding: 6px 0; font-size: 14px; color: var(--muted); height: auto; }
.past-del #side-delete:hover { color: var(--text); text-decoration: underline; }
.side-del { max-width: 680px; }
/* The payment details warning under Clive's reply (small fixes 17, part 5): plain, set apart by a warning edge, no digits. */
.paywarn { align-self: flex-start; max-width: min(92%, 560px); margin: -6px 0 0; padding: 9px 12px; font-size: 14px; line-height: 1.4;
  color: var(--text); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #d97706; border-radius: 10px; }
/* The register's link under Clive's reply (small fixes 16, part 3). */
.reglink { align-self: flex-start; margin: -6px 0 0 4px; font-size: 14px; }
.reglink a { color: var(--violet-text); }

/* Settings, Google: what's connected, part by part (the per-feature consent brief). */
.google-rows { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.google-rows li.off { color: var(--muted); }

/* Back from Google (small fixes 17, part 10): while the return ticket is traded, the background and one quiet line, never the
   sign-in form. The mark is set in index.html's head before the first paint and taken off by app.js. */
.returning-line { display: none; margin: 30vh 0 0; text-align: center; color: var(--muted); font-size: 15px; }
html.returning .returning-line { display: block; }
html.returning #gate-code, html.returning #gate-welcome { display: none !important; }

/* ---- The six buttons on a desktop (small fixes 17, part 6) ----
   From 1024 px wide, in a daily conversation: a right-hand column of square tiles, two to a row, three rows; Dictate and Send
   at the box's two ends, each about a third of its old width (a sixth of the row), never too narrow for its label. The phone
   and anything narrower keep the bottom row as built. */
.tilebar { flex: 0 0 232px; width: 232px; padding: 18px 16px; border-left: 1px solid var(--line); background: var(--bg); }
@media (min-width: 1024px) {
  body.tiles-on .tilebar .dailybar { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 0; }
  body.tiles-on .tilebar .dailybar .tile { height: auto; aspect-ratio: 1 / 1; font-size: 13.5px; line-height: 1.2; padding: 8px; border-radius: 14px; }
  body.tiles-on .composer-row { grid-template-columns: minmax(118px, 17%) 1fr minmax(118px, 17%); }
  body.tiles-on .composer-row #send { grid-column: 3; }
  body.tiles-on .composer-row #next { grid-column: 1 / -1; }
}

/* ---- The small round of 31 October 2026 ----
   Part 1, the margins (ruled 20:43): more room above the wordmark and at the bottom of the screen, in a daily conversation only;
   the interview's and the demo's screens keep theirs. Phone 14 / 10 / 20 px; from 761 px, 20 / 12 / 28 px. */
body.daily .topbar { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: 10px; }
body.daily .composer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) {
  body.daily .topbar { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: 12px; }
  body.daily .composer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}
/* Part 2, the six tiles in colour (ruled 20:43: full colour for all six, built or not, both themes). The colours are the
   homepage's jobs: Have a chat blue (Answers), Reports green, Build me something orange (Assets), Keep an eye out pink
   (Monitor); Add a fact violet (the record); Settings neutral. Light: the homepage's tints and deep shades; dark: new, each
   label at 8.6:1 or better on its tile. The icon above the label, in the homepage's line style. */
.dailybar .tile { --t-bg: var(--surface); --t-line: var(--line); --t-fg: var(--text); }
.dailybar .tile.t-violet { --t-bg: #231340; --t-line: #4E2A86; --t-fg: #CDA8FF; }
.dailybar .tile.t-orange { --t-bg: #2E1F0E; --t-line: #6A431B; --t-fg: #F4BA80; }
.dailybar .tile.t-blue   { --t-bg: #12223A; --t-line: #27496E; --t-fg: #A0CDF6; }
.dailybar .tile.t-pink   { --t-bg: #2F1520; --t-line: #6A2D45; --t-fg: #F4A6C1; }
.dailybar .tile.t-green  { --t-bg: #13281A; --t-line: #2B5637; --t-fg: #97D8A6; }
.dailybar .tile.t-grey   { --t-bg: #1C1824; --t-line: #3A3446; --t-fg: #D8D2E0; }
:root[data-theme="light"] .dailybar .tile.t-violet { --t-bg: #EEE3FD; --t-line: #C9AEF2; --t-fg: #5A0FA8; }
:root[data-theme="light"] .dailybar .tile.t-orange { --t-bg: #FBE7D2; --t-line: #E9C29A; --t-fg: #8A4B14; }
:root[data-theme="light"] .dailybar .tile.t-blue   { --t-bg: #DCEAF7; --t-line: #A9C8E6; --t-fg: #1F4E79; }
:root[data-theme="light"] .dailybar .tile.t-pink   { --t-bg: #F7DDE6; --t-line: #E3B0C2; --t-fg: #8A2E4F; }
:root[data-theme="light"] .dailybar .tile.t-green  { --t-bg: #DDEBDD; --t-line: #AFCCB1; --t-fg: #2F5D3A; }
:root[data-theme="light"] .dailybar .tile.t-grey   { --t-bg: #EEECF1; --t-line: #D3CEDB; --t-fg: #3A3646; }
.dailybar .tile, .dailybar .tile.live, .dailybar .tile:disabled, .dailybar .tile:hover, .dailybar .tile:disabled:hover {
  background: var(--t-bg); border-color: var(--t-line); color: var(--t-fg); font-weight: 600; }
.dailybar .tile { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 5px; height: 62px; }
.dailybar .tile:disabled { cursor: default; }
.dailybar .tile .t-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) {
  body.tiles-on .tilebar .dailybar .tile { gap: 10px; }
  body.tiles-on .tilebar .dailybar .tile .t-icon { width: 30px; height: 30px; }
}
.dailybar .tile.live:hover { filter: brightness(1.12); }
:root[data-theme="light"] .dailybar .tile.live:hover { filter: brightness(0.96); }