/* Base, layout and components. Values come from tokens.css only. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block: var(--space-5) var(--bar-height); }
html:has(body.page--chat) { scroll-padding-top: 76px; scroll-padding-bottom: 140px; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: var(--leading-tight); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-heading); text-wrap: balance; margin: 0 0 var(--space-4); }
h1 { font-size: var(--text-h1); }
h3 { font-weight: var(--weight-bold); letter-spacing: 0; }
h2 { font-size: var(--text-h2); margin-top: var(--space-7); }
h3 { font-size: var(--text-body); margin-top: var(--space-6); }
p, ul, ol, dl { margin: 0 0 var(--space-4); max-width: var(--measure); }
[hidden] { display: none !important; }  /* component display rules must never reveal hidden things */
ul, ol { padding-left: var(--space-5); }
li + li { margin-top: var(--space-2); }
.lead { font-size: var(--text-lead); line-height: 1.45; }
.secondary { color: var(--color-text-secondary); }
.figures { font-variant-numeric: tabular-nums lining-nums; }

a { color: var(--color-link); text-decoration-thickness: max(1px, 0.0625rem); text-underline-offset: 0.15em; }
a:visited { color: var(--color-link-visited); }
a:hover { text-decoration-thickness: max(3px, 0.1875rem); }

:focus-visible {
  outline: 3px solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 10;
  background: var(--color-panel); color: var(--color-text);
  padding: var(--space-3) var(--space-4); font-weight: var(--weight-bold);
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--width-page); margin-inline: auto; padding-inline: var(--gutter); }
.page { flex: 1; padding-block: var(--space-6) var(--space-8); }
.page:focus { outline: none; }
.reading { max-width: var(--measure); }
.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.grid-2 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* Page template: back link, title, summary, primary action, content. */
.page-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.page-head__title { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; }
.page-head__title h1 { margin: 0; }
.page-head__summary { margin: 0; color: var(--color-text-secondary); }
@media (min-width: 1024px) {
  .page-head--with-action { grid-template-columns: 1fr auto; align-items: start; }
  .page-head--with-action .page-head__action { grid-row: 1 / span 3; grid-column: 2; }
}

/* Red marks the one thing to press (buttons) and where you are (navigation, progress).
   Emphasis and information use ink, so red never reads as a warning by accident. */

/* ---------- Header and navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--color-header); color: var(--color-on-header); border-bottom: var(--border-width) solid var(--color-border); view-transition-name: site-header; }
.site-header__end { display: flex; align-items: center; gap: var(--space-3); }
.header-cta { min-height: 40px; padding-inline: var(--space-4); font-size: var(--text-small); }
.site-header a.header-cta { color: var(--color-on-brand); }
@media (max-width: 719px) { .site-header .header-cta { display: none; } }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--bar-height); }
.site-header a { color: var(--color-on-header); }
.wordmark { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-on-header); }
.logo { display: block; height: 2rem; width: auto; }
@media (max-width: 479px) { .logo { height: 1.5rem; } }

.nav { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; max-width: none; }
.nav li + li { margin: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tap-target);
  padding-inline: var(--space-3); text-decoration: none; font-weight: var(--weight-medium); white-space: nowrap;
  border-bottom: 4px solid transparent;
}
.nav a:hover { border-bottom-color: var(--color-border-strong); }
.nav a[aria-current="page"] { border-bottom-color: var(--color-brand); }

/* Signed-in navigation moves to a bottom bar on phones, reachable with one thumb. */
@media (max-width: 639px) {
  .nav--app {
    position: fixed; inset: auto 0 0 0; z-index: 5;
    justify-content: space-around; background: var(--color-header);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: var(--border-width) solid var(--color-border);
  }
  .nav--app a { flex-direction: column; justify-content: center; font-size: var(--text-small); min-height: var(--bar-height); }
  body:has(.nav--app) .page { padding-bottom: calc(var(--bar-height) + var(--space-8)); }
}

.back-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-target); color: var(--color-text); font-size: var(--text-small);
}
.back-link::before {
  content: ""; width: 0.5em; height: 0.5em; border: solid currentColor;
  border-width: 0 0 2px 2px; transform: rotate(45deg);
}
.back-link:visited { color: var(--color-text); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-6); font-size: var(--text-small); color: var(--color-text-secondary);
}
.site-footer p { margin-bottom: var(--space-2); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.footer-nav li { margin: 0; }
.footer-nav a { color: var(--color-text); font-weight: var(--weight-bold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-grid; place-items: center; min-height: var(--tap-target);
  padding: var(--space-2) var(--space-5);
  font: inherit; font-weight: var(--weight-bold); line-height: var(--leading-tight);
  border: var(--border-width-field) solid transparent; border-radius: var(--radius-control);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color 100ms var(--ease-standard);
}
.btn--primary { background: var(--color-brand); color: var(--color-on-brand); box-shadow: 0 1px 2px rgb(16 24 40 / 0.12); }
.btn--secondary { background: var(--color-panel); color: var(--color-text); border-color: var(--color-border-strong); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--color-brand-hover); }
  .btn--secondary:hover { background: var(--color-fill); }
}
.btn--primary:active { background: var(--color-brand-hover); transition-duration: 0ms; }
.btn--secondary:active { background: var(--color-fill); transition-duration: 0ms; }
.btn--warning { background: var(--color-deadline); color: var(--color-panel); }
.btn:visited { color: inherit; }
.btn--primary:visited { color: var(--color-on-brand); }

/* Busy state: label and busy text share one grid cell so the button keeps its width. */
.btn__label, .btn__busy { grid-area: 1 / 1; }
.btn__busy { display: inline-flex; align-items: center; gap: var(--space-2); visibility: hidden; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .btn__label { visibility: hidden; }
.btn[aria-busy="true"] .btn__busy { visibility: visible; }

.spinner {
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  opacity: 0; animation: spinner-in 1ms var(--spinner-delay) forwards, spin 700ms linear infinite;
}
@keyframes spinner-in { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--space-5); max-width: var(--measure); }
.field__label { display: block; font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.field__hint { color: var(--color-text-secondary); margin: 0 0 var(--space-2); }
.field__error { color: var(--color-deadline); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); }
.field--error { border-left: 4px solid var(--color-deadline); padding-left: var(--space-4); }
.input {
  width: 100%; min-height: var(--tap-target); padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--color-text); background: var(--color-panel);
  border: var(--border-width-field) solid var(--color-border-strong); border-radius: var(--radius-control);
  transition: border-color var(--duration-state) var(--ease-standard);
}
.input:hover { border-color: var(--color-text-secondary); }
.input--short { max-width: 12em; }
.input--2 { width: 3.5em; text-align: center; }
.input--4 { width: 5.5em; text-align: center; }
.date-input { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.date-input__item { display: grid; gap: var(--space-1); }
.date-input__label { font-weight: var(--weight-regular); }
.field--error .input { border-color: var(--color-deadline); }

.error-summary {
  border: 4px solid var(--color-deadline); padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6); max-width: var(--measure); background: var(--color-panel);
}
.error-summary h2 { margin-top: 0; }
.error-summary ul { list-style: none; padding: 0; margin: 0; }
.error-summary a { color: var(--color-deadline); font-weight: var(--weight-bold); }

/* ---------- Tags and status ---------- */
.tag {
  display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-control);
  font-size: var(--text-small); font-weight: var(--weight-bold); line-height: var(--leading-tight);
}
.tag--deadline { color: var(--color-deadline); background: var(--color-deadline-fill); }
.tag--you { color: var(--color-you); background: var(--color-you-fill); }
.tag--them { color: var(--color-them); background: var(--color-them-fill); }
.tag--done { color: var(--color-done); background: var(--color-done-fill); }
.tag--neutral { color: var(--color-text); background: var(--color-fill); }

.status-card {
  background: var(--color-panel); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-panel); padding: var(--space-5); margin-bottom: var(--space-6);
  view-transition-name: status-card;
}
.status-card dl { display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin: 0; max-width: none; }
.status-card dt { font-size: var(--text-small); color: var(--color-text-secondary); }
.status-card dd { margin: var(--space-1) 0 0; font-weight: var(--weight-bold); }

/* ---------- Summary list ---------- */
.summary-list { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr auto; margin: 0 0 var(--space-6); max-width: var(--measure); }
.summary-list > div { display: contents; }
.summary-list dt, .summary-list dd { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border); margin: 0; }
.summary-list dt { font-weight: var(--weight-bold); }
.summary-list .summary-list__action { text-align: right; padding-right: 0; }
@media (max-width: 639px) {
  .summary-list { grid-template-columns: 1fr auto; }
  .summary-list dt { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; }
}

/* ---------- Progress stepper ---------- */
.stepper { margin-bottom: var(--space-5); }
.stepper__caption { font-size: var(--text-small); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.stepper__bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.stepper__step { margin: 0 !important; font-size: var(--text-small); color: var(--color-text-secondary); border-top: 6px solid var(--color-border); padding-top: var(--space-2); }
.stepper__step.is-done { border-top-color: var(--color-brand); }
.stepper__step.is-current { border-top-color: var(--color-brand); color: var(--color-text); font-weight: var(--weight-bold); }

/* ---------- Job progress (long-running work) ---------- */
.job > h2 { margin-top: 0; }
.job { background: var(--color-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); padding: var(--space-5); max-width: var(--measure); }
.job__bar { height: 8px; background: var(--color-fill); margin: var(--space-3) 0 var(--space-4); }
.job__bar-fill { display: block; height: 100%; background: var(--color-brand); width: calc(var(--job-done, 0) / var(--job-total, 1) * 100%); transition: width var(--duration-page) var(--ease-standard); }
.job__stages { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.job__stage { display: flex; gap: var(--space-3); align-items: center; color: var(--color-text-secondary); }
.job__stage::before { content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--color-border-strong); }
.job__stage.is-done { color: var(--color-text); }
.job__stage.is-done::before { background: var(--color-brand); border-color: var(--color-brand); }
.job__stage.is-current { color: var(--color-text); font-weight: var(--weight-bold); }
.job__stage.is-current::before { border-color: var(--color-brand); border-right-color: transparent; animation: spin 900ms linear infinite; }
.job__note { font-size: var(--text-small); color: var(--color-text-secondary); margin: 0; }

/* Job bar widths come from data attributes so no inline style is ever needed. */
.job__bar[data-done="0"] { --job-done: 0; } .job__bar[data-done="1"] { --job-done: 1; }
.job__bar[data-done="2"] { --job-done: 2; } .job__bar[data-done="3"] { --job-done: 3; }
.job__bar[data-done="4"] { --job-done: 4; } .job__bar[data-done="5"] { --job-done: 5; }
.job__bar[data-total="4"] { --job-total: 4; } .job__bar[data-total="5"] { --job-total: 5; }

/* ---------- Banners, empty states, skeletons ---------- */
.banner { border: 4px solid var(--color-band); background: var(--color-panel); margin-bottom: var(--space-6); max-width: var(--measure); }
.banner__title { max-width: none; margin: 0; padding: var(--space-1) var(--space-4); background: var(--color-band); color: var(--color-on-band); font-size: var(--text-small); font-weight: var(--weight-bold); }
.banner__body { padding: var(--space-4); }
.banner__body > :last-child { margin-bottom: 0; }
.banner--success { border-color: var(--color-done); }
.banner--success .banner__title { background: var(--color-done); color: var(--color-panel); }

.empty { border: 2px dashed var(--color-border); border-radius: var(--radius-panel); padding: var(--space-6) var(--space-5); max-width: var(--measure); }
.empty h2 { margin-top: 0; }
.empty > :last-child { margin-bottom: 0; }

.skeleton { display: grid; gap: var(--space-3); max-width: var(--measure); }
.skeleton__line { height: 1rem; background: var(--color-border); border-radius: var(--radius-control); animation: pulse 1.4s ease-in-out infinite; }
.skeleton__line:last-child { width: 60%; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* ---------- Toasts and the navigation progress bar ---------- */
.toasts { position: fixed; z-index: 20; inset: auto var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) auto; display: grid; gap: var(--space-2); max-width: min(28rem, calc(100vw - 2 * var(--space-4))); }
body:has(.nav--app) .toasts { bottom: calc(var(--bar-height) + var(--space-4)); }
.toast {
  display: flex; gap: var(--space-4); align-items: start; justify-content: space-between;
  background: var(--color-panel); color: var(--color-text); border-left: 6px solid var(--color-done);
  padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-float);
  animation: toast-in var(--duration-state) var(--ease-standard);
}
.toast--error { border-left-color: var(--color-deadline); }
.toast p { margin: 0; padding-block: var(--space-3); }
.toast__close { background: none; border: 0; font: inherit; color: var(--color-link); text-decoration: underline; cursor: pointer; min-height: var(--tap-target); padding: 0 var(--space-1); }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-2)); } }

.nav-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; background: var(--color-brand); transform-origin: left; animation: nav-progress 8s var(--ease-standard) forwards; }
@keyframes nav-progress { from { transform: scaleX(0.05); } to { transform: scaleX(0.9); } }

/* ---------- Gallery-only helpers ---------- */
.specimen { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-5); margin-top: var(--space-7); }
.specimen > h2 { margin-top: 0; }
.specimen__states { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.specimen__label { font-size: var(--text-small); color: var(--color-text-secondary); margin-bottom: var(--space-2); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: fade-out var(--duration-page) var(--ease-exit) both; }
  ::view-transition-new(root) { animation: fade-in var(--duration-page) var(--ease-standard) both; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .spinner, .job__stage.is-current::before { animation: none !important; opacity: 1; border-right-color: currentColor; }
  .skeleton__line { animation: none !important; }
  .nav-progress { animation: none !important; transform: scaleX(0.5); }
}
.as-h1 { font-size: var(--text-h1); margin: 0; }

/* ---------- Radios and checkboxes (large targets) ---------- */
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset legend { padding: 0; }
.choices { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.choices--inline { grid-auto-flow: column; justify-content: start; gap: var(--space-5); }
.choice { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--tap-target); }
.choice input {
  flex: none; width: 2rem; height: 2rem; margin: 0; accent-color: var(--color-brand); cursor: pointer;
}
.choice__label { padding-top: var(--space-1); cursor: pointer; max-width: var(--measure); }
.input[type="file"] { padding: var(--space-3); min-height: auto; }

/* ---------- Upload progress ---------- */
.upload-progress { display: grid; gap: var(--space-2); max-width: var(--measure); margin-top: var(--space-4); }
.upload-progress progress { width: 100%; height: 8px; accent-color: var(--color-brand); }

/* ---------- Lists of links and cases ---------- */
.link-list { list-style: none; padding: 0; }
.link-list li { padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); margin: 0; }
.link-list a { font-weight: var(--weight-bold); }
.link-list p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); }
.case-list { list-style: none; padding: 0; max-width: none; display: grid; gap: var(--space-4); }
.case-list li { margin: 0; }
.case-row {
  display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5);
  background: var(--color-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel);
}
.case-row__title { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; font-weight: var(--weight-bold); }

/* ---------- Home and other marketing pages ---------- */
.page--marketing { background: var(--color-surface); }
.page--marketing .page { padding-block: 0 var(--space-8); }
.page--marketing .site-header { background: var(--color-surface); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: start; padding-block: var(--space-7) var(--space-8); }
@media (min-width: 1024px) { .hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--space-8); padding-block: var(--space-8) calc(var(--space-8) * 1.5); } }
.hero h1 { font-size: clamp(2.5rem, 1.4rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 var(--space-5); max-width: 13em; }
.hero .lead { max-width: 30em; margin-bottom: var(--space-6); }
.hero .upload { max-width: 34rem; }
.hero__small { margin: 0; font-size: var(--text-small); color: var(--color-text-secondary); }

/* The example letter, marked up in our red pen: what we read in the small print. */
.sample { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 640px) { .sample { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 1024px) { .sample { margin-top: var(--space-4); } }
.sample__sheet {
  position: relative; padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-paper); color: var(--color-paper-ink); border-radius: 3px;
  box-shadow: var(--shadow-raised); rotate: -1deg; line-height: 1.5;
}
.sample__sheet p { margin: 0 0 var(--space-3); max-width: none; }
.sample__sheet p:last-child { margin-bottom: 0; }
.sample__tag { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0 !important; padding: 0 var(--space-2); border: var(--border-width) solid var(--color-paper-line); border-radius: var(--radius-control); font-size: var(--text-small); color: var(--color-paper-soft); }
.sample__head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-paper-ink); }
.sample__head p { margin: 0; color: var(--color-paper-soft); font-size: var(--text-small); }
.sample__head .sample__from { color: var(--color-paper-ink); font-size: var(--text-lead); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-heading); }
.sample__title { font-weight: var(--weight-heavy); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-small); }
.sample__details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); max-width: none; margin: 0 0 var(--space-4); padding-block: var(--space-3); border-block: var(--border-width) solid var(--color-paper-line); font-size: var(--text-small); }
.sample__details div { display: contents; }
.sample__details dt { color: var(--color-paper-soft); }
.sample__details dd { margin: 0; font-variant-numeric: tabular-nums; }
.ink--circle {
  padding: 0 0.3em; border: 2px solid var(--color-brand);
  border-radius: 1em 0.75em 1.1em 0.8em / 0.9em 1.1em 0.8em 1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ink--circle { white-space: nowrap; }
.ink--under { text-decoration: underline 2px var(--color-brand); text-underline-offset: 0.22em; text-decoration-skip-ink: none; }
.ink__num, .sample__notes li::before {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--color-brand); color: var(--color-on-brand); font-size: var(--text-small); font-weight: var(--weight-heavy); line-height: 1;
}
.ink__num { margin-left: var(--space-1); vertical-align: 0.1em; text-decoration: none; }
.sample__notes { counter-reset: note; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); max-width: none; }
@media (min-width: 640px) { .sample__notes { padding-top: var(--space-8); } }
.sample__notes li { counter-increment: note; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); margin: 0; color: var(--color-text-secondary); }
.sample__notes li::before { content: counter(note); }
.sample__notes strong { display: block; color: var(--color-text); }
.sample__notes p { margin: 0; }

/* Sections read like a short document: a heading in the margin, then plain prose. */
.chapter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-8); padding-block: var(--space-7); border-top: var(--border-width) solid var(--color-border); }
@media (min-width: 960px) { .chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding-block: var(--space-8); } }
.chapter h2 { margin: 0; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -0.025em; }
.chapter__body > :last-child { margin-bottom: 0; }
.chapter__body p { max-width: 36em; }
.chapter--last { padding-bottom: 0; }
.numbered { counter-reset: n; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); max-width: 38em; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 2rem minmax(0, 1fr); margin: 0; }
.numbered li::before { content: counter(n) "."; font-weight: var(--weight-heavy); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.price-line { font-size: var(--text-lead); }
.price-line strong { display: block; margin-bottom: var(--space-2); font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); font-weight: var(--weight-heavy); letter-spacing: -0.04em; line-height: 1; }

.result-card { background: var(--color-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); padding: var(--space-5); }
.result-card__label { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-small); color: var(--color-text-secondary); margin-top: 0; }
.result-card__title { font-size: var(--text-lead); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); margin-block: var(--space-3) var(--space-4); }
.result-card__facts { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); padding-block: var(--space-4); border-block: var(--border-width) solid var(--color-border); }
.result-card__price { margin-bottom: var(--space-5); }
.result-card__price p { margin: 0 0 var(--space-1); }
.result-card__price strong { font-size: var(--text-h1); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-heading); }

.btn--large { display: inline-flex; gap: var(--space-2); min-height: 3.5rem; padding-inline: var(--space-6); font-size: var(--text-lead); }
.btn--large .icon { transition: translate var(--duration-state) var(--ease-standard); }
.btn--large:hover .icon { translate: 3px 0; }
@media (max-width: 640px) { .btn--large { width: 100%; justify-content: center; } }

.faq { max-width: var(--measure); border-top: var(--border-width) solid var(--color-border); }
.faq details { border-bottom: var(--border-width) solid var(--color-border); }
.faq summary {
  position: relative; display: flex; align-items: center; min-height: var(--tap-target);
  padding: var(--space-4) var(--space-7) var(--space-4) 0; cursor: pointer; list-style: none;
  font-weight: var(--weight-bold); font-size: var(--text-lead); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus. */
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: var(--space-2); top: 50%; width: 16px; height: 2px; margin-top: -1px;
  background: currentColor; border-radius: 2px; transition: rotate var(--duration-state) var(--ease-standard);
}
.faq summary::before { rotate: 90deg; }
.faq details[open] summary::before { rotate: 0deg; }
.faq summary:hover { color: var(--color-text-secondary); }
.faq details > p { margin-top: 0; padding-bottom: var(--space-5); max-width: var(--measure); color: var(--color-text-secondary); }
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--duration-page) var(--ease-standard), content-visibility var(--duration-page) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

.inset { border-left: 6px solid var(--color-border-strong); padding: var(--space-2) var(--space-5); margin-block: var(--space-5); max-width: var(--measure); }
.inset > :last-child { margin-bottom: 0; }
.notice-dev { border: 4px dashed var(--color-you); padding: var(--space-4) var(--space-5); max-width: var(--measure); background: var(--color-you-fill); }

/* ---------- Staff ---------- */
.lanes { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr)); align-items: start; }
.lane__title { display: flex; gap: var(--space-3); align-items: baseline; margin-top: 0; }
.lane__count { font-size: var(--text-small); color: var(--color-text-secondary); font-weight: var(--weight-regular); }
.lane__empty { color: var(--color-text-secondary); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: end; margin-bottom: var(--space-6); }
.filters .field { margin: 0; flex: 1 1 16rem; }
.workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 1024px) { .workbench { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; } }
.workbench__side { display: grid; gap: var(--space-5); }
.panel { background: var(--color-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); padding: var(--space-5); }
.panel > h2, .panel summary h2 { margin-top: 0; font-size: var(--text-body); }
.panel--action { border-left: 6px solid var(--color-text); }
.panel .field:last-of-type { margin-bottom: var(--space-4); }
.panel details summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--space-2); }
.panel details summary::-webkit-details-marker { display: none; }
.panel details summary::before {
  content: ""; flex: none; width: 0.5em; height: 0.5em; translate: 0 -0.1em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: -45deg; transition: rotate var(--duration-state) var(--ease-standard);
}
.panel details[open] summary::before { rotate: 45deg; }
.panel details[open] summary { margin-bottom: var(--space-4); }
.summary-heading { display: inline; }
.facts { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); }
.facts dt { font-size: var(--text-small); color: var(--color-text-secondary); }
.facts dd { margin: 0; font-weight: var(--weight-bold); }
.input--textarea { min-height: 6rem; resize: vertical; }
select.input { appearance: auto; }
.timeline { list-style: none; padding: 0; max-width: none; display: grid; gap: var(--space-4); }
.timeline__item { margin: 0; padding: var(--space-4) var(--space-5); background: var(--color-panel); border: var(--border-width) solid var(--color-border); border-left: 4px solid var(--color-border-strong); border-radius: var(--radius-panel); }
.timeline__item--from_consumer { border-left-color: var(--color-you); }
.timeline__item--to_consumer { border-left-color: var(--color-text); }
.timeline__item--note { background: var(--color-fill); border-style: dashed; }
.timeline__item--event { background: transparent; }
.timeline__meta { font-size: var(--text-small); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.timeline__body > :last-child { margin-bottom: 0; }
.timeline__status { margin: var(--space-3) 0 0; font-size: var(--text-small); }
.timeline__item--email_out { border-left-color: var(--color-them); }
.timeline__item--email_in { border-left-color: var(--color-you); }
.timeline__item--letter { border-left-color: var(--color-text); }
.input--tall { min-height: 16rem; }
.letter-preview { white-space: pre-line; background: var(--color-panel); border: var(--border-width) solid var(--color-border); padding: var(--space-5); max-width: var(--measure); margin-bottom: var(--space-4); }
.letter-preview__to { color: var(--color-text-secondary); }

/* ---------- Icons (always beside a text label) ---------- */
.icon { flex: none; vertical-align: -0.2em; stroke-width: 2; }
.with-icon { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---------- Upload ---------- */
.upload { max-width: 42rem; }
.upload__card { background: var(--color-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-feature); padding: var(--space-5); margin-bottom: var(--space-5); max-width: none; box-shadow: var(--shadow-card); }
.upload__tips { margin-top: var(--space-4); font-size: var(--text-small); }
.upload__tips summary { display: inline-flex; align-items: center; min-height: var(--tap-target); cursor: pointer; color: var(--color-text-secondary); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 0.2em; }
.upload__tips summary:hover { color: var(--color-text); }
.upload__tips ul { margin: 0; color: var(--color-text-secondary); }
.upload__heading { font-weight: var(--weight-bold); margin-bottom: var(--space-4); }
.dropzone__target { border-radius: var(--radius-panel); }
.upload__submit { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; margin-top: var(--space-4); }
.upload__submit p { margin: 0; }
.js-upload:not(.has-file) .upload__submit { display: none; }

.dropzone { position: relative; }
.dropzone__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dropzone__target {
  display: grid; gap: var(--space-2); justify-items: center; text-align: center;
  padding: var(--space-6) var(--space-5); border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-panel); background: var(--color-page); cursor: pointer;
  transition: background-color var(--duration-state) var(--ease-standard), border-color var(--duration-state) var(--ease-standard);
}
.dropzone__target:hover, .dropzone.is-dragging .dropzone__target { background: var(--color-fill); border-color: var(--color-brand); }
.dropzone__title { font-weight: var(--weight-bold); font-size: var(--text-lead); line-height: var(--leading-tight); }
.dropzone__hint { color: var(--color-text-secondary); max-width: 30em; }
.dropzone__title--touch { display: none; }
/* Touchscreens can't drag files, so the drop area becomes a plain hint above the buttons. */
@media (hover: none) {
  .dropzone__title--drag, .dropzone__title--touch { display: none; }
  .dropzone__target { padding: 0; border: 0; background: none; justify-items: start; text-align: left; cursor: auto; }
  .dropzone__target:hover { background: none; }
}
@media (max-width: 639px) { .hero { padding-block: var(--space-5) var(--space-6); } }
.dropzone__actions { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-top: var(--space-4); }
.dropzone__actions .btn { display: flex; justify-content: center; align-items: center; gap: var(--space-2); width: 100%; }
.dropzone__input:focus-visible + .btn { outline: 3px solid var(--focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner); }
/* The camera button only helps where there is a camera to hand: phones and tablets. */
@media (hover: hover) and (pointer: fine) { .dropzone__camera { display: none; } }
.dropzone.has-file .dropzone__target, .dropzone.has-file .dropzone__actions { display: none; }
.dropzone__chosen { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-page); }
.dropzone__preview { max-height: 16rem; width: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); }
.dropzone__file { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--color-link); text-decoration: underline; cursor: pointer; min-height: var(--tap-target); }

/* ---------- Customer case page ---------- */
.case-layout__side { display: grid; gap: var(--space-4); }
.case-layout__main > section + section { margin-top: var(--space-7); }
.case-layout__main h2 { margin-top: 0; }
.letter-card { background: var(--color-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); padding: var(--space-5); margin-bottom: var(--space-4); }
.letter-card__title { margin-top: 0; }
.letter-card > :last-child { margin-bottom: 0; }
.composer { margin-top: var(--space-5); }
.address { white-space: pre-line; margin-bottom: var(--space-3); }
.panel .link-list { margin: 0; }
.panel .link-list li:last-child { border-bottom: 0; }

/* ---------- Tabs ---------- */
.tabs__list { display: none; }
.tabs.is-ready .tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: var(--border-width) solid var(--color-border); margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5); padding: 0 var(--space-3); }
.tabs__tab {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3); background: none; border: 0; border-bottom: 4px solid transparent;
  font: inherit; font-weight: var(--weight-bold); color: var(--color-text-secondary); cursor: pointer;
}
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-brand); }
.tabs.is-ready .tabs__heading { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabs:not(.is-ready) .tabs__panel + .tabs__panel { border-top: var(--border-width) solid var(--color-border); margin-top: var(--space-6); padding-top: var(--space-5); }
.tabs__heading { margin-top: 0; font-size: var(--text-body); }
.timeline__order { font-size: var(--text-small); font-weight: var(--weight-regular); }

/* ---------- Account and information pages ---------- */
.account-sections { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; }
.account-sections .panel > :last-child, .contact-card > :last-child { margin-bottom: 0; }
.contact-card { margin-bottom: var(--space-5); }
.reading .faq { margin-bottom: var(--space-6); }
.numbered p { margin: 0; }

/* ---------- Minimal direction (preview at /design/minimal/) ----------
   Monochrome, one composer box, medium-weight type; red lives only in the logo. */
.page--minimal .site-header { border-bottom-color: transparent; }
.page--minimal .site-header a.header-cta { background: var(--color-text); color: var(--color-surface); border-radius: var(--radius-control); box-shadow: none; }
.page--minimal .site-header a.header-cta:hover { background: var(--color-text-secondary); }
.page--minimal h1, .page--minimal h2 { font-weight: var(--weight-medium); }
.page--minimal .faq summary { font-weight: var(--weight-medium); }

.m-hero { display: grid; justify-items: center; text-align: center; padding-block: clamp(4rem, 14vh, 9rem) var(--space-8); }
.m-hero h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 var(--space-3); }
.m-hero__sub { color: var(--color-text-secondary); margin: 0 0 var(--space-7); max-width: 32em; }

.composer { width: 100%; max-width: 46rem; text-align: left; }
.composer__box {
  position: relative; max-width: none; margin: 0; padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 28px rgb(16 24 40 / 0.08);
  transition: border-color var(--duration-state) var(--ease-standard);
}
.composer__box:focus-within, .composer__box.is-dragging { border-color: var(--color-border-strong); }
.composer__prompt { padding: var(--space-3) var(--space-2) var(--space-6); color: var(--color-text-secondary); font-size: var(--text-lead); cursor: pointer; }
@media (hover: none) { .composer__prompt .dropzone__title--touch { display: inline; } }
.composer__box.has-file .composer__prompt { display: none; }
.composer__attachment { display: flex; align-items: center; gap: var(--space-3); max-width: 26rem; margin-bottom: var(--space-4); padding: var(--space-2); background: var(--color-surface-alt); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); }
.composer__thumb { flex: none; width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--radius-control); }
.composer__file-text { display: grid; flex: 1; min-width: 0; }
.composer__file { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer__note { font-size: var(--text-small); color: var(--color-text-secondary); }
.composer__remove, .composer__tool {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  color: var(--color-text); background: transparent; cursor: pointer;
  transition: background-color var(--duration-state) var(--ease-standard);
}
.composer__remove { border: 0; color: var(--color-text-secondary); }
.composer__tool { border: var(--border-width) solid var(--color-border); }
@media (hover: hover) { .composer__remove:hover, .composer__tool:hover { background: var(--color-fill); } }
.composer__tool-wrap { position: relative; display: inline-flex; }
.dropzone__input:focus-visible + .composer__tool { outline: 3px solid var(--focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner); }
.composer__bar { display: flex; align-items: center; gap: var(--space-2); }
.composer__hint { flex: 1; min-width: 0; padding-inline: var(--space-2); font-size: var(--text-small); color: var(--color-text-secondary); }
@media (max-width: 479px) { .composer__hint { display: none; } .composer__bar { justify-content: flex-start; } .composer__bar .btn--send { margin-left: auto; } }
.btn--send { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--color-text); color: var(--color-surface); }
@media (hover: hover) { .btn--send:hover { background: var(--color-text-secondary); } }
.btn--send .icon { rotate: -90deg; }
.btn--send .btn__busy { font-size: 0; gap: 0; }
.js-upload:not(.has-file):not(.has-text) .btn--send { opacity: 0.3; pointer-events: none; }

.m-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-5) 0 0; max-width: none; }
.m-chips li { margin: 0; }
.m-chips button, .m-chips a { display: inline-flex; background: var(--color-surface); font: inherit; cursor: pointer; align-items: center; min-height: 2.75rem; padding: 0 var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text); text-decoration: none; font-size: var(--text-small); font-weight: var(--weight-medium); }
.m-chips button:hover, .m-chips a:hover { background: var(--color-fill); }

.m-section { max-width: 52rem; margin-inline: auto; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); border-top: var(--border-width) solid var(--color-border); }
.m-section h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.025em; margin: 0 0 var(--space-6); }
.m-steps { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.m-steps h3 { margin: 0 0 var(--space-2); font-size: var(--text-body); }
.m-steps p, .m-muted { margin: 0; color: var(--color-text-secondary); }
.m-price { margin: 0 0 var(--space-3); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: var(--weight-medium); letter-spacing: -0.035em; line-height: 1.1; }
.m-faq { max-width: none; }
.btn--send .spinner { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) and (pointer: fine) { .composer__tool-wrap.dropzone__camera { display: none; } }
.composer__file-icon { display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-control); background: var(--color-panel); color: var(--color-text-secondary); font-size: var(--text-lead); }
.composer__thumb:not([hidden]) + .composer__file-icon { display: none; }

/* ---------- Chat ---------- */
.page--chat { background: var(--color-surface); }
.page--chat .page { padding-block: 0; }
.page--chat .site-footer { display: none; }
.chat-main { display: flex; flex-direction: column; width: 100%; max-width: 48rem; margin-inline: auto; min-height: calc(100dvh - var(--bar-height)); }
.chat-title { margin: var(--space-5) 0 var(--space-6); font-size: var(--text-body); font-weight: var(--weight-medium); letter-spacing: 0; text-align: center; color: var(--color-text-secondary); }
.thread { flex: 1; display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-6); }
.msg { margin: 0; }
.msg--mine { align-self: flex-end; max-width: min(80%, 34rem); }
.bubble { padding: var(--space-3) var(--space-4); background: var(--color-fill); border-radius: var(--radius-panel); overflow-wrap: anywhere; }
.msg--theirs { align-self: flex-start; max-width: 100%; }
.msg__who { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.msg__avatar { border-radius: 6px; }
.msg__text p:last-child { margin-bottom: 0; }
.msg__links { margin-top: var(--space-3); }
.msg__links-title { margin: 0 0 var(--space-1); font-weight: var(--weight-medium); }
.msg__links .link-list { margin: 0; }
.msg__ai { margin: var(--space-2) 0 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.msg--status { align-self: center; font-size: var(--text-small); color: var(--color-text-secondary); text-align: center; }
.msg--card { align-self: stretch; }
/* One line: a long name (a phone's file_0000…) ends in "…" and the size never splits. */
.file-chip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; }
.file-chip__name { min-width: 0; overflow: hidden; font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.file-chip__size { flex: none; font-size: var(--text-small); color: var(--color-text-secondary); white-space: nowrap; }

.card { padding: var(--space-5); background: var(--color-panel); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.card--done { box-shadow: none; }
.card--stop { border-left: 4px solid var(--color-deadline); }
.card > :last-child { margin-bottom: 0; }
.card__eyebrow { margin: 0 0 var(--space-1); font-size: var(--text-small); color: var(--color-text-secondary); }
.card__title { margin: 0 0 var(--space-3); font-size: var(--text-lead); letter-spacing: var(--tracking-heading); }
/* A card heading gets focus only so screen readers start reading there; it is not a control. */
.card__title:focus, .card__title:focus-visible { outline: none; box-shadow: none; }
.card__title--question { font-size: var(--text-body); font-weight: var(--weight-bold); letter-spacing: 0; }
.card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-3) var(--space-5); max-width: none; margin: var(--space-4) 0; padding-block: var(--space-4); border-block: var(--border-width) solid var(--color-border); }
.card__facts dt { font-size: var(--text-small); color: var(--color-text-secondary); }
.card__facts dd { margin: 0; font-weight: var(--weight-bold); }
.card__note, .card__list { color: var(--color-text-secondary); }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.card__actions form { margin: 0; }
.card-done { margin: 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.card .job { border: 0; padding: 0; box-shadow: none; max-width: none; }
.choices-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: var(--space-4); }
.choice-tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); }
.choice-tile h3 { margin: 0; font-size: var(--text-body); }
.choice-tile p { margin: 0; }
.choice-tile__price { font-size: var(--text-h2); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-heading); }
.choice-tile__price span { font-size: var(--text-small); font-weight: var(--weight-regular); letter-spacing: 0; color: var(--color-text-secondary); }
.choice-tile p:not(.choice-tile__price) { color: var(--color-text-secondary); }
.choice-tile form { margin-top: auto; padding-top: var(--space-3); }

.chat-dock { position: sticky; bottom: 0; z-index: 4; padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--color-surface); }
.chat-dock .composer { max-width: none; }
.chat-dock__note { margin: var(--space-2) 0 0; max-width: none; font-size: var(--text-small); color: var(--color-text-secondary); text-align: center; }
body:has(.nav--app) .chat-dock { bottom: 0; }
@media (max-width: 639px) { body:has(.nav--app) .chat-dock { bottom: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px)); } }

.composer__box:focus-within { border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text), 0 8px 28px rgb(16 24 40 / 0.08); }
.composer__text {
  display: block; width: 100%; min-height: 2.75rem; max-height: 12rem; margin: 0; padding: var(--space-2) var(--space-2) var(--space-3);
  border: 0; resize: none; background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-lead);
  field-sizing: content;
}
.composer__text:focus { outline: none; }
.composer__text::placeholder { color: var(--color-text-secondary); opacity: 1; }
.composer__drop { display: none; }
.composer__box.is-dragging .composer__drop {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: var(--color-surface); border: 2px dashed var(--color-border-strong); border-radius: inherit; font-weight: var(--weight-bold);
}
.composer__manual { margin: var(--space-3) 0 0; text-align: center; }
.m-hero__small { margin: var(--space-4) 0 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.m-section--wide { max-width: 64rem; }

/* ---------- Case thread ---------- */
.case-facts summary { display: inline-flex; align-items: center; min-height: var(--tap-target); cursor: pointer; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 0.2em; }
.case-facts__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding-block: var(--space-4); }
.case-facts__grid h2 { margin: 0 0 var(--space-3); font-size: var(--text-body); letter-spacing: 0; }
.case-facts__grid .facts { margin: 0; }
.msg__time { margin: var(--space-1) var(--space-2) 0; font-size: var(--text-small); color: var(--color-text-secondary); text-align: right; }
.msg__initial { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-text); color: var(--color-surface); font-size: var(--text-small); font-weight: var(--weight-bold); }
.msg--person .msg__who { color: var(--color-text); }
.composer__to { display: block; padding: 0 var(--space-2) var(--space-1); font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.composer--case { max-width: none; }
.thread .letter-card { margin: 0; }
.thread .banner { margin: 0; max-width: none; }
/* Messages scroll into view above the pinned composer, never underneath it. */
.thread > * { scroll-margin-bottom: 9rem; }

/* ---------- Chat motion: streaming text, typing dots, cards arriving ---------- */
/* New messages wait for the script to play them; if it never runs, they show after 4 seconds. */
.js .thread > .msg[data-fresh]:not(.is-played):not(.is-waiting) { visibility: hidden; animation: show-anyway 0s 4s forwards; }
@keyframes show-anyway { to { visibility: visible; } }
.w { opacity: 0; transition: opacity 180ms var(--ease-standard); }
.w.is-in { opacity: 1; }
.is-arriving { animation: msg-in 160ms var(--ease-standard); }
.msg--card.is-arriving { animation: card-in 200ms var(--ease-standard); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
.typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: var(--space-3) var(--space-4); background: var(--color-fill); border-radius: var(--radius-panel); }
.typing > span:not(.nl-stage) { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-secondary); animation: typing 1s ease-in-out infinite; }
.typing > span:not(.nl-stage):nth-child(2) { animation-delay: 150ms; }
.typing > span:not(.nl-stage):nth-child(3) { animation-delay: 300ms; }
@keyframes typing { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing > span:not(.nl-stage), .is-arriving { animation: none; } .w { opacity: 1; transition: none; } }

.quick-replies { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-surface);
  color: var(--color-text); font: inherit; font-size: var(--text-small); font-weight: var(--weight-bold);
  text-decoration: none; text-align: left; cursor: pointer; transition: background-color 100ms var(--ease-standard);
}
.chip::after { content: ""; position: absolute; inset: -4px -2px; }
@media (hover: hover) { .chip:hover { background: var(--color-fill); } }
.chip:active { background: var(--color-fill); transition-duration: 0ms; }
.chip:visited { color: var(--color-text); }
.m-hero--page { padding-block: var(--space-8) var(--space-6); }
/* Standalone links in lists get a full-height tap area (WCAG 2.2 target size). */
.link-list li > a { display: inline-flex; align-items: center; min-height: 1.75rem; }

/* ---------- Compact chat (the density of Meta AI and ChatGPT) ---------- */
.page--chat {
  --text-body: 1rem; --text-lead: 1.0625rem; --text-small: 0.875rem;
  --text-h2: 1.25rem; --text-h1: 1.5rem; --bar-height: 56px;
  /* Three weights only, as in the design rules: regular, 600 and 800. */
  --weight-medium: var(--weight-bold);
}
.page--chat strong, .page--chat b { font-weight: var(--weight-bold); }
/* Quiet labels stay regular rather than going up to 600. */
.page--chat .composer__to, .page--chat .msg__who time, .page--chat .file-chip__name { font-weight: var(--weight-regular); }
.page--chat .page { padding-block: 0; }
.page--chat .site-footer { display: none; }
/* Pages to read, and your letters, end with the site's footer: the legal lines live there. */
.page--doc .site-footer, .page--letters .site-footer { display: block; }

/* ---------- The top bar: the name and where you can go, on every page ---------- */
/* A phone: the name (on a letter's page, back), the letter's name and next date in the middle,
   then New letter and your initials. A computer adds Your letters and Help beside the name, and
   New letter in words. The account menu opens from the initials, without JavaScript. */
.appbar {
  position: sticky; top: 0; z-index: 20; display: grid; align-items: center; gap: var(--space-2);
  grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
  min-height: var(--bar-height); padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  background: var(--color-surface);
}
.appbar__start { display: flex; align-items: center; gap: var(--space-4); justify-self: start; min-width: 0; }
.appbar__button {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--color-text); cursor: pointer;
}
@media (hover: hover) { .appbar__button:hover { background: var(--color-fill); } }
.appbar__back { margin-left: calc(-1 * var(--space-1)); }
.appbar__brand { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-text); }
.appbar__brand .logo { height: 1.375rem; }
.appbar__nav { display: none; }
.appbar__end { display: flex; align-items: center; gap: var(--space-2); justify-self: end; }
.appbar__pill { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--space-4); border-radius: var(--radius-control); background: var(--color-fill); color: var(--color-text); font-size: var(--text-small); font-weight: var(--weight-medium); text-decoration: none; }
.appbar__pill:visited { color: var(--color-text); }
button.appbar__pill { border: 0; font: inherit; font-size: var(--text-small); font-weight: var(--weight-medium); cursor: pointer; }
.appbar__new { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--color-text); text-decoration: none; }
.appbar__new:visited { color: var(--color-text); }
.appbar__new .icon { width: 1.5rem; height: 1.5rem; }
.appbar__new-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.appbar__avatar {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; margin: 2px; padding: 0; border: 0; border-radius: 50%;
  background: var(--color-fill); color: var(--color-text); font: inherit; font-size: var(--text-small); font-weight: var(--weight-heavy); cursor: pointer;
}
.appbar__avatar:has(+ .account-menu:popover-open) { box-shadow: inset 0 0 0 1.5px var(--color-text); }
@media (hover: hover) {
  .appbar__new:hover { background: var(--color-fill); }
  .appbar__avatar:hover { box-shadow: inset 0 0 0 1.5px var(--color-border-control); }
}
/* A phone, on a letter's page: back in the name's place, and no New letter, so the name fits.
   By :has(), so it holds the moment the name arrives after reading, not only after a reload
   (the logo stayed and both were cut short: owner's phone, 18 Oct 2026). */
.appbar:has(.appbar__title) .appbar__brand, .appbar:has(.appbar__title) .appbar__new,
.appbar:not(:has(.appbar__title)) .appbar__back { display: none; }

/* The account menu, under the initials */
.account-menu {
  position: fixed; inset: auto; top: calc(env(safe-area-inset-top, 0px) + var(--bar-height) + var(--space-1)); right: var(--gutter);
  width: min(18rem, calc(100vw - 2 * var(--gutter))); margin: 0; padding: var(--space-2);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel);
  background: var(--color-panel); color: var(--color-text); box-shadow: var(--shadow-float); transform-origin: top right;
}
@supports (anchor-name: --account) {
  .appbar__avatar { anchor-name: --account; }
  .account-menu { position-anchor: --account; top: calc(anchor(bottom) + var(--space-2)); right: anchor(right); }
}
@media (prefers-reduced-motion: no-preference) { .account-menu:popover-open { animation: menu-in var(--duration-state) var(--ease-standard); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.account-menu__who { display: grid; max-width: none; margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.account-menu__who span { color: var(--color-text-secondary); font-size: var(--text-small); overflow-wrap: anywhere; }
.account-menu__list { max-width: none; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.account-menu__list li, .account-menu__list form { margin: 0; }
.account-menu__list a, .account-menu__list button {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 2.75rem; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-control); background: none; color: var(--color-text);
  font: inherit; font-weight: var(--weight-bold); text-align: left; text-decoration: none; cursor: pointer;
}
.account-menu__list a:visited { color: var(--color-text); }
.account-menu__list .icon { color: var(--color-text-secondary); }
@media (hover: hover) { .account-menu__list a:hover, .account-menu__list button:hover { background: var(--color-fill); } }
.account-menu__legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); max-width: none; margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-3) 0; border-top: var(--border-width) solid var(--color-border); font-size: var(--text-small); }
.account-menu__legal a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--color-text-secondary); }

/* The staff menu (templates/staff/base.html): a popover sheet from the left on phones (opens
   without JavaScript), a sidebar on desktops. Customers have the top bar instead. */
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(20rem, 86vw); height: 100dvh; max-height: none; margin: 0;
  flex-direction: column; padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-2) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border: 0; border-right: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  overflow-y: auto; font-size: var(--text-body);
}
.drawer:popover-open { display: flex; }
.drawer::backdrop { background: rgb(0 0 0 / 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .drawer { translate: -100% 0; transition: translate var(--duration-page) var(--ease-standard), display var(--duration-page) allow-discrete, overlay var(--duration-page) allow-discrete; }
  .drawer:popover-open { translate: 0 0; }
  @starting-style { .drawer:popover-open { translate: -100% 0; } }
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--bar-height); padding-left: var(--space-2); }
.drawer__brand { display: inline-flex; align-items: center; color: var(--color-text); }
.drawer__list { list-style: none; padding: 0; margin: 0; max-width: none; }
.drawer__list li { margin: 0; }
.drawer__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 2.75rem; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-control); background: none; color: var(--color-text);
  font: inherit; font-weight: var(--weight-medium); text-decoration: none; cursor: pointer;
}
.drawer__item:visited { color: var(--color-text); }
.drawer__item:hover { background: var(--color-fill); }
.drawer__foot { margin-top: auto; padding-top: var(--space-5); }
.drawer__foot form { margin: 0; }
@media (min-width: 1024px) {
  .drawer { display: flex; width: 16rem; translate: none; z-index: 25; }
  .drawer__close, .appbar__menu { display: none; }
}

/* A computer: Your letters and Help beside the name, New letter in words, and on a letter's page
   the name stays (Your letters is the way back). */
@media (min-width: 1024px) {
  .appbar__nav { display: flex; align-items: center; gap: var(--space-1); }
  .appbar__nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-3); border-radius: var(--radius-control); color: var(--color-text); font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: none; }
  .appbar__nav a[aria-current="page"] { border-radius: 0; box-shadow: inset 0 -3px 0 var(--color-brand); }
  .appbar:has(.appbar__title) .appbar__brand { display: inline-flex; }
  .appbar__back { display: none; }
  .appbar__new, .appbar:has(.appbar__title) .appbar__new {
    display: inline-flex; align-items: center; gap: var(--space-2); width: auto; height: 2.5rem; padding: 0 var(--space-4);
    border-radius: var(--radius-control); box-shadow: inset 0 0 0 1.5px var(--color-border-control); font-size: var(--text-small); font-weight: var(--weight-bold);
  }
  .appbar__new .icon { width: 1.25rem; height: 1.25rem; }
  .appbar__new-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 1024px) and (hover: hover) { .appbar__nav a:hover { background: var(--color-fill); } }

.chat-main { max-width: 46rem; min-height: calc(100dvh - var(--bar-height)); }
.thread { gap: var(--space-4); padding-block: var(--space-3) var(--space-5); }
.thread--empty { justify-content: center; }
.chat-empty__title { margin: 0 0 var(--space-2); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); letter-spacing: -0.025em; }
.chat-empty__sub { margin: 0 0 var(--space-6); max-width: 30em; color: var(--color-text-secondary); }
.msg--intro { align-self: stretch; }
.suggestions { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); max-width: none; }
.suggestions li { margin: 0; }
.suggestion {
  display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-1) 0;
  border: 0; border-radius: var(--radius-control); background: none; color: var(--color-text);
  font: inherit; text-align: left; cursor: pointer;
}
.suggestion__icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--radius-panel); background: var(--color-fill); color: var(--color-brand); transition: background-color var(--duration-state) var(--ease-standard); }
.suggestion:hover .suggestion__icon { background: var(--color-border); }

.page--chat .bubble { padding: var(--space-2) var(--space-4); border-radius: var(--radius-panel); }
.page--chat .msg--mine { max-width: 85%; }
.page--chat .card { padding: var(--space-4); }
.page--chat .card__title { font-size: var(--text-lead); }
.page--chat .card__facts { gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; padding-block: var(--space-3); }
.page--chat .btn { min-height: 2.75rem; padding-inline: var(--space-4); }
.page--chat .choice-tile { padding: var(--space-4); }
.page--chat .choice-tile__price { font-size: var(--text-h2); }
.page--chat .chip { min-height: 2.25rem; padding: 0 var(--space-3); }
.page--chat .field { margin-bottom: var(--space-4); }

.chat-dock { padding: 0 0 max(var(--space-2), env(safe-area-inset-bottom, 0px)); }
.page--chat .composer__box { padding: var(--space-2); border-color: transparent; border-radius: var(--radius-panel); background: var(--color-fill); box-shadow: none; }
.page--chat .composer__box:focus-within { border-color: var(--color-border-strong); box-shadow: none; }
.page--chat .composer__text { min-height: 2.5rem; padding: var(--space-2) var(--space-3) var(--space-1); font-size: 1rem; }
.page--chat .composer__tool, .page--chat .btn--send { width: 2.5rem; height: 2.5rem; }
.page--chat .composer__tool { border-color: var(--color-border); background: var(--color-surface); }
.page--chat .composer__hint { display: none; }
.page--chat .composer__bar .btn--send { margin-left: auto; }
.page--chat .composer__thumb, .page--chat .composer__file-icon { width: 2.75rem; height: 2.75rem; }
.page--chat .composer__attachment { margin-bottom: var(--space-2); background: var(--color-surface); }
/* Card answers sit side by side as equal buttons, stacking only when there's no room. */
.page--chat .card__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: var(--space-2); }
.page--chat .card__actions .btn { width: 100%; }

/* ---------- The character (static/js/mascot.js, artwork from the owner's package) ----------
   Sized by the envelope you see, not the SVG box: the envelope is 312 of the character's 450
   units across, and 312 of the letter rig's 480. --nl-envelope is the visible width. */
.nl-stage { display: inline-block; flex: none; line-height: 0; vertical-align: middle; --nl-envelope: 4rem; }
.nl-stage--character, .nl-stage--logo { width: calc(var(--nl-envelope) * 450 / 312); }
.nl-stage--letter { width: calc(var(--nl-envelope) * 480 / 312); }
.nl-mascot { display: block; width: 100%; height: auto; overflow: visible; }
/* The still face beside the name: its height is the envelope's, plus the box around it. */
.appbar__icon { height: 2.25rem; width: auto; }
.staff-drawer__mark { height: 2rem; width: auto; }
/* The starting page, as plain as ChatGPT's: the question, one line, and the ways in, together
   as one group just above the middle (the space below it is the room the eye wants there). */
.thread--empty .msg--intro { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 6vh; text-align: center; }
.msg--intro .chat-empty__sub { margin: 0 auto; max-width: 22rem; }
.msg--intro .starters { justify-content: center; margin-top: var(--space-5); }
.appbar__wordmark { font-size: var(--text-lead); font-weight: var(--weight-bold); letter-spacing: -0.01em; text-decoration: none; }
.appbar__wordmark:visited { color: var(--color-text); }
.with-mascot { display: flex; align-items: center; gap: var(--space-2); }
.job__face { --nl-envelope: 2rem; }

.chat-empty__icon { width: 3.5rem; margin-bottom: var(--space-4); }

/* ---------- The welcome: someone not signed in, like a banking app's first screen ---------- */
/* A phone: a photo of a letter being opened with the question over it, then the one thing to do,
   at the bottom where the thumb is. A first visit opens with three slides on what we do (early.js
   sets data-intro until they're done). A computer: the photo on the left, the drop zone on the
   right, the footer below. The bank-app look the owner chose on 18 Oct 2026. */
.page--welcome { background: var(--color-surface); }
.page--welcome .page { padding-block: 0; }
.page--welcome .page > .container { max-width: none; padding-inline: 0; }
.page--welcome .site-footer { display: none; }
.welcome-app { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; }
.welcome, .intro { flex: 1; flex-direction: column; min-height: 100dvh; }
.welcome { display: flex; }
.intro { display: none; width: 100%; max-width: 27rem; margin-inline: auto; padding-inline: var(--gutter); }
html[data-intro="show"] .intro { display: flex; }
html[data-intro="show"] .welcome { display: none; }
/* The photo sits under a flat tint (a token, never a gradient) so the words on it read. */
.welcome__hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-height: min(33rem, 64dvh); padding: env(safe-area-inset-top, 0px) var(--gutter) var(--space-6);
  overflow: hidden; background: var(--color-band); color: var(--color-on-photo);
}
.welcome__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; }
.welcome__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-photo-tint); }
.welcome__hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3.5rem; }
.welcome__brand, .welcome__hero-signin { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-on-photo); }
.welcome__brand:visited, .welcome__hero-signin:visited { color: var(--color-on-photo); }
.welcome__hero-signin { margin-right: calc(-1 * var(--space-2)); padding: 0 var(--space-2); font-weight: var(--weight-bold); }
.welcome__words { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.welcome__words > * { max-width: 30rem; }
.welcome__title { margin: 0; font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); font-weight: var(--weight-heavy); letter-spacing: -0.04em; line-height: 1; text-wrap: balance; }
.welcome__sub { margin: var(--space-3) 0 0; }
.welcome__scope { margin: var(--space-4) 0 0; font-size: var(--text-small); font-weight: var(--weight-medium); }
.welcome__panel { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 27rem; margin-inline: auto; padding-inline: var(--gutter); }
.welcome__nav { display: none; }
.intro__title { margin: 0 0 var(--space-2); font-size: var(--text-h1); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); text-wrap: balance; }
.intro__text { margin: 0; max-width: 19rem; color: var(--color-text-secondary); text-wrap: balance; }
.welcome__bottom, .intro__bottom { display: grid; gap: var(--space-3); padding-block: var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.app-button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 3.5rem; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-control); background: var(--color-fill); color: var(--color-text); font: inherit; font-weight: var(--weight-bold); cursor: pointer; transition: transform var(--duration-press) var(--ease-standard), background-color var(--duration-state) var(--ease-standard); }
.app-button--primary { background: var(--color-brand); color: var(--color-on-brand); }
@media (hover: hover) { .app-button--primary:hover { background: var(--color-brand-hover); } }
.app-button:active { transform: scale(0.98); }
.app-button .icon { width: 1.375rem; height: 1.375rem; }
.app-button.is-busy { cursor: progress; opacity: 0.85; }
.welcome__bottom input[type="file"]:focus-visible + .app-button { outline: 3px solid var(--focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner); }
/* What it costs, as two rows like a statement. */
.welcome__prices { margin: 0; max-width: none; }
.welcome__prices div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--border-width) solid var(--color-border); }
.welcome__prices div:last-child { border-bottom: var(--border-width) solid var(--color-border); }
.welcome__prices dt, .welcome__prices dd { margin: 0; }
.welcome__prices dd { font-weight: var(--weight-heavy); }
.welcome__links { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); font-size: var(--text-small); }
.welcome__links a { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-text-secondary); }
.welcome__error { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-deadline-fill); color: var(--color-deadline); font-weight: var(--weight-bold); text-align: center; }
.welcome__error p { margin: 0; }
/* The drop zone. On a phone it's only the button; a computer shows it as the place to drop. */
.welcome__zone, .welcome__upload { display: grid; gap: var(--space-3); }
.welcome__zone-title { display: none; }
.welcome__hint, .welcome__alt { margin: 0; max-width: none; text-align: center; font-size: var(--text-small); color: var(--color-text-secondary); }
.welcome__alt { font-size: var(--text-body); }
.welcome__alt .link-button { color: var(--color-text); font-weight: var(--weight-bold); text-underline-offset: 0.2em; }
/* Most letters are on paper: a code that opens this site on the phone, to carry on there. */
.welcome__phone { display: grid; gap: var(--space-4); text-align: left; }
.welcome__phone-title { margin: 0; font-size: var(--text-lead); }
.welcome__phone-title:focus { outline: none; }
.welcome__phone-row { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 560px) { .welcome__phone-row { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); } }
.welcome__qr { margin: 0; line-height: 0; }
.welcome__qr img { display: block; width: 9.25rem; padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); background: var(--color-qr-ground); }
.welcome__phone-steps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: step; font-size: var(--text-small); }
.welcome__phone-steps li { counter-increment: step; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-2); align-items: start; margin: 0; }
.welcome__phone-steps li::before { content: counter(step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: -2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-border-control); font-weight: var(--weight-heavy); line-height: 1; }
.welcome__phone-note { margin: 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.welcome__phone .link-button { justify-self: start; font-weight: var(--weight-bold); }

/* The three slides: swipe, the dots or Continue; Skip at any time */
.intro__top { display: flex; justify-content: flex-end; align-items: center; min-height: 3.5rem; }
.intro__skip { min-height: var(--tap-target); margin-right: calc(-1 * var(--space-3)); padding: 0 var(--space-3); border: 0; background: none; color: var(--color-text-secondary); font: inherit; font-weight: var(--weight-bold); cursor: pointer; }
.intro__skip.is-done { visibility: hidden; }
.intro__track { flex: 1; display: flex; margin-inline: calc(-1 * var(--gutter)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.intro__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .intro__track { scroll-behavior: smooth; } }
.intro__slide { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--space-6); scroll-snap-align: center; scroll-snap-stop: always; text-align: center; }
.intro__art { display: grid; place-items: center; width: 100%; height: 15rem; margin-bottom: var(--space-6); }
.intro__face { --nl-envelope: 7.5rem; }
.intro__dots { display: flex; justify-content: center; gap: var(--space-2); padding-top: var(--space-5); }
.intro__dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--color-border-control); cursor: pointer; transition: width var(--duration-page) var(--ease-standard), background-color var(--duration-page) var(--ease-standard); }
.intro__dot::after { content: ""; position: absolute; inset: -18px -8px; }
.intro__dot[aria-current="true"] { width: 22px; background: var(--color-text); }
.intro__fine { margin: 0; visibility: hidden; text-align: center; font-size: var(--text-small); color: var(--color-text-secondary); }
.intro__fine.is-shown { visibility: visible; }
.intro__paper { width: 14rem; padding: var(--space-4) var(--space-4) var(--space-3); border-radius: 4px; background: var(--color-paper); color: var(--color-paper-ink); box-shadow: var(--shadow-raised); rotate: -3deg; font-size: 0.875rem; line-height: 1.5; text-align: left; }
.intro__paper p { margin: 0 0 var(--space-2); }
.intro__paper-title { padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-paper-ink); font-weight: var(--weight-heavy); letter-spacing: 0.06em; text-transform: uppercase; }
.intro__paper-line { display: block; height: 6px; margin: 0 0 var(--space-2); border-radius: 3px; background: var(--color-paper-line); }
.intro__paper-line--short { width: 60%; }
.intro__chat { width: 15rem; text-align: left; }
.intro__who { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-small); font-weight: var(--weight-bold); }
.intro__avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-brand); color: var(--color-on-brand); }
.intro__avatar .icon { width: 1.25rem; height: 1.25rem; }
.intro__bubble { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-panel) var(--radius-panel) var(--radius-panel) var(--space-1); background: var(--color-fill); }
.intro__sent { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); font-size: var(--text-small); }
.intro__sent .icon { color: var(--color-done); }
/* A phone or a touch-only tablet takes a photo; anything with a mouse drops, pastes or chooses a
   file. Decided by what the device can do, never by the screen's width: an iPad is wide too. */
.app-button .for-touch, .app-button .for-mouse { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (hover: none), (pointer: coarse), (pointer: none) { .for-mouse { display: none !important; } }
@media (hover: hover) and (pointer: fine) { .for-touch { display: none !important; } }
.intro__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.welcome__drop { position: fixed; inset: var(--space-4); z-index: 30; display: grid; place-items: center; border: 3px dashed var(--color-brand); border-radius: var(--radius-feature); background: var(--color-surface); }
.welcome__drop p { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-heavy); }
/* A computer-sized window: the photo on the left with the name and the question on it, the menu
   and the drop zone on the right, the site's footer below. The slides are for phones. */
@media (min-width: 900px) {
  .page--welcome .page { display: flex; flex-direction: column; }
  .page--welcome .page > .container { flex: 1; display: flex; flex-direction: column; }
  .page--welcome .site-footer { display: block; }
  .welcome-app { flex: 1; min-height: 0; }
  .intro, html[data-intro="show"] .intro { display: none; }
  .welcome, html[data-intro="show"] .welcome { display: flex; flex-direction: row; min-height: 100dvh; }
  .welcome__hero { flex: 1 1 50%; min-height: 0; padding: var(--space-6) var(--space-8) var(--space-7); }
  .welcome__hero::after { background: var(--color-photo-tint-wide); }
  .welcome__photo { object-position: 100% 50%; }
  .welcome__hero-signin { display: none; }
  .welcome__sub { font-size: var(--text-lead); }
  .welcome__panel { flex: 1 1 50%; max-width: none; margin: 0; padding: var(--space-5) var(--space-8) var(--space-7); }
  .welcome__nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
  .welcome__nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-3); border-radius: var(--radius-control); color: var(--color-text); font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: none; transition: background-color var(--duration-state) var(--ease-standard); }
  .welcome__nav .welcome__nav-signin { margin-left: var(--space-2); padding: 0 var(--space-4); box-shadow: inset 0 0 0 1.5px var(--color-border-control); }
  .welcome__bottom { flex: 1; align-content: center; width: 100%; max-width: 34rem; margin-inline: auto; padding-block: var(--space-6); }
  .welcome__zone { width: 100%; }
  .welcome__upload { justify-items: center; }
  .welcome__upload .app-button { width: auto; min-width: 16rem; }
  .welcome__links { display: none; }
}
/* The box to drop on shows only where a file can be dragged in: a mouse, not a touch screen. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .welcome__zone {
    padding: var(--space-6) var(--space-6) var(--space-5);
    border: 1.5px dashed var(--color-border-control); border-radius: var(--radius-feature); background: var(--color-surface);
    transition: background-color var(--duration-state) var(--ease-standard), border-color var(--duration-state) var(--ease-standard);
  }
  .welcome__zone.is-over { border-style: solid; border-color: var(--color-brand); background: var(--color-fill); }
  .welcome__zone-title { display: block; margin: 0; font-size: var(--text-lead); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-heading); }
}
@media (min-width: 900px) and (max-height: 760px) {
  .welcome__hero, .welcome__panel { padding-block: var(--space-5); }
  .welcome__bottom { padding-block: var(--space-4); }
}
@media (min-width: 900px) and (max-height: 760px) and (hover: hover) and (pointer: fine) {
  .welcome__zone { padding-block: var(--space-5) var(--space-4); }
}
@media (hover: hover) { .welcome__nav a:hover { background: var(--color-fill); } }
/* Shorter phones keep everything on one screen: a little smaller, then tighter. */
@media (max-width: 899px) and (max-height: 720px) {
  .intro__face { --nl-envelope: 6.5rem; }
  .intro__art { height: 13rem; margin-bottom: var(--space-5); }
  .welcome__hero { min-height: min(26rem, 56dvh); }
}
@media (max-width: 899px) and (max-height: 600px) {
  .intro__face { --nl-envelope: 5rem; margin-bottom: var(--space-4); }
  .intro__art { height: 10.5rem; margin-bottom: var(--space-4); }
  .welcome__hero { min-height: min(20rem, 50dvh); padding-bottom: var(--space-5); }
  .welcome__bottom, .intro__bottom { gap: var(--space-2); padding-top: var(--space-3); }
  .welcome__links a { min-height: 2.5rem; }
}
.reading-progress { flex: 1; min-width: 0; }
.reading-progress .job { border: 0; padding: 0; box-shadow: none; max-width: none; }

/* The send arrow sits dead centre: the hidden "Send" label must not take any space. */
.btn--send { display: grid; place-items: center; }
.btn--send .btn__label { display: grid; place-items: center; line-height: 0; }
.btn--send .icon { width: 1.25rem; height: 1.25rem; }

/* Chat pages use the compact scale set above (16px body, 14px labels): the new design's rule
   is that nothing a person needs to read is smaller than 16px (owner, 13 Oct 2026). */
.page--chat .appbar__brand .logo { height: 1.25rem; }
.page--chat .chat-empty__title { font-size: 1.875rem; } /* 30px: the largest size in the scale */
.page--chat .suggestion__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-panel); }
.page--chat .suggestion { gap: var(--space-3); }
.page--chat .bubble { padding: var(--space-2) var(--space-3); border-radius: var(--radius-panel); }
.page--chat .btn { min-height: var(--tap-target); padding-inline: var(--space-4); font-size: var(--text-body); }
.page--chat .card { padding: var(--space-3) var(--space-4); }
.page--chat .composer__text { min-height: 2.25rem; padding-block: var(--space-1); }
.page--chat .composer__tool, .page--chat .btn--send { width: 2.5rem; height: 2.5rem; }
.composer__tool, .btn--send { position: relative; }
.composer__tool::after { content: ""; position: absolute; inset: -2px; }
/* 44px to tap, whatever size the circle is drawn at. */
.btn--send::after { content: ""; position: absolute; inset: -4px; }
.page--chat .appbar__button { position: relative; }
.page--chat .appbar__button::after { content: ""; position: absolute; inset: -2px; }
.page--chat .appbar__pill { min-height: 2rem; padding-inline: var(--space-3); }
/* The round send button: no inherited padding or min-height, so it stays a true circle. */
.page--chat .btn--send, .btn--send { width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; }
.page--chat .composer--case .btn--send { width: 2.25rem; height: 2.25rem; }

.appbar__icon { height: 1.75rem; width: auto; }

/* allow-effects: composer fade, requested by the owner on 2026-10-06 */
/* Messages fade out as they scroll towards the composer, like ChatGPT: the dock itself is solid,
   and above it a tall band goes smoothly from clear to the page colour, with a gentle blur
   that grows towards the bottom. No step anywhere, so there's never a hard edge. */
.chat-dock { background: var(--chat-ground, var(--color-surface)); }
.chat-dock::before, .chat-dock::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* A 16px fade that finishes 4px inside the input box, behind it (z-index -1). */
  inset: auto 0 calc(100% - 4px) 0; height: 1rem;
}
.chat-dock::after { background: linear-gradient(to bottom, transparent, var(--chat-ground, var(--color-surface))); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .chat-dock::before {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black);
    mask-image: linear-gradient(to bottom, transparent, black);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .chat-dock::before { display: none; }
}
/* end allow-effects */
/* The whole composer box shows focus; the text area inside needs no second ring. */
.composer__text:focus-visible { outline: none; box-shadow: none; }
/* The composer sits right at the top of the dock, so the fade ends at the input itself. */
.chat-dock .composer { margin-top: 0; }
/* The composer box is a form field for error styling, but must not carry a field's bottom margin. */
.chat-dock .composer__box { margin-bottom: 0; }

/* ---------- Chat cards you answer: compact sheets in the conversation ---------- */
/* One hairline, no shadow; quiet labels; 16px inputs so iPhones don't zoom on focus. */
.page--chat .card { border-radius: var(--radius-panel); box-shadow: none; }
.page--chat .card--form { padding: var(--space-4); }
.page--chat .card--form .card__title { margin-bottom: var(--space-1); font-size: var(--text-lead); font-weight: var(--weight-bold); letter-spacing: 0; }
.page--chat .card--form .card__title + p { margin-top: 0; color: var(--color-text-secondary); }
.page--chat .card--form form { margin-top: var(--space-4); }
.page--chat .card--form .field { margin-bottom: var(--space-4); max-width: none; }
.page--chat .card--form .field__label,
.page--chat .card--form .fieldset legend { margin-bottom: var(--space-2); font-size: var(--text-small); font-weight: var(--weight-medium); }
.page--chat .card--form .field__hint { margin: calc(-1 * var(--space-1)) 0 var(--space-2); font-size: var(--text-small); }
.page--chat .card--form .input {
  min-height: 2.75rem; padding: var(--space-2) var(--space-3); font-size: 1rem;
  border-width: 1px; border-radius: var(--radius-panel); background: var(--color-surface);
}
.page--chat .card--form .input:focus-visible { border-color: var(--color-brand); }
.page--chat .card--form .input--short { max-width: 14rem; }
/* The code: big, evenly spaced digits, easy to check against the email. */
.page--chat .input--code {
  max-width: none; min-height: 3.25rem; padding-left: 0.5em; text-align: center;
  font-size: 1.5rem; font-weight: var(--weight-medium); letter-spacing: 0.5em; font-variant-numeric: tabular-nums;
}

/* Errors: a field says what's wrong under its label; the summary is a small note, not a box. */
.page--chat .card--form .field--error { padding-left: 0; border-left: 0; }
.page--chat .card--form .field__error { margin-bottom: var(--space-2); font-size: var(--text-small); font-weight: var(--weight-medium); }
.page--chat .card--form .field--error .input { border-color: var(--color-deadline); }
.page--chat .card .error-summary {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); max-width: none;
  border: 0; border-radius: var(--radius-panel); background: var(--color-deadline-fill);
}
.page--chat .card .error-summary h2 { margin: 0 0 var(--space-1); font-size: var(--text-small); color: var(--color-deadline); }
.page--chat .card .error-summary a { font-size: var(--text-small); font-weight: var(--weight-medium); }

/* Choices: one grouped list of rows, the whole row tappable, the chosen row tinted. */
.page--chat .card--form .choices {
  gap: 0; margin-top: 0; overflow: hidden;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-panel);
}
.page--chat .card--form .choices--inline { grid-auto-flow: column; grid-auto-columns: 1fr; }
.page--chat .card--form .choice {
  align-items: center; gap: var(--space-3); min-height: 2.75rem; padding: 0 var(--space-3);
  transition: background-color var(--duration-state) var(--ease-standard);
}
.page--chat .card--form .choice + .choice { border-top: 1px solid var(--color-border); }
.page--chat .card--form .choices--inline .choice + .choice { border-top: 0; border-left: 1px solid var(--color-border); }
.page--chat .card--form .choice:has(input:checked) { background: var(--color-fill); }
.page--chat .card--form .choice input { width: 1.25rem; height: 1.25rem; }
.page--chat .card--form .choice__label { flex: 1; padding-block: var(--space-3); line-height: var(--leading-tight); }
/* Ticks (the consent card) stay as plain rows: the wording matters more than the box. */
.page--chat .card--form .field > .choice { padding: 0; align-items: flex-start; }
.page--chat .card--form .field > .choice .choice__label { padding-block: 0; font-size: var(--text-small); line-height: var(--leading-body); }
.page--chat .card--form .field > .choice input { margin-top: 1px; }

/* Buttons: pill-shaped and full width in a card; the main one carries the brand colour. */
.page--chat .card .btn { min-height: 2.75rem; border-radius: var(--radius-control); }
.page--chat .card--form form > .btn { width: 100%; }
.page--chat .card .btn--secondary { background: var(--color-fill); border-color: transparent; }
@media (hover: hover) { .page--chat .card .btn--secondary:hover { background: var(--color-border); } }
.btn--text {
  min-height: 2.75rem; padding-inline: var(--space-2); border-color: transparent; background: none;
  color: var(--color-text-secondary); font-weight: var(--weight-medium);
  text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px;
}
.btn--text:hover { color: var(--color-text); }
.page--chat .card__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-2); margin-top: var(--space-2); }
.page--chat .card__more form { margin: 0; }
.page--chat .card__more .btn { min-height: 2.75rem; font-size: var(--text-small); }

/* Answered: the card shrinks to one quiet line; the conversation already shows the answer. */
.page--chat .card--form.card--done { padding: var(--space-2) var(--space-4); background: none; }
.page--chat .card--form.card--done .card__title { margin: 0; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.page--chat .card--form.card--done > :not(.card__title) { display: none; }
/* One mistake: the field already says it, so its summary is kept for screen readers only.
   The code card's "Code" label repeats its title, so it's for screen readers too. */
.page--chat .card .error-summary:has(li:only-child),
.page--chat .card--form .field:has(.input--code) .field__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.page--chat .card--form form + .secondary { margin: var(--space-3) 0 0; font-size: var(--text-small); text-align: center; }

/* ---------- Replies: what the assistant shows, as formatted text with answers under it ---------- */
/* No box: the facts are text, the answers are chips, as in any chat app. */
.reply > :first-child { margin-top: 0; }
.reply > :last-child { margin-bottom: 0; }
.reply__title { margin: 0 0 var(--space-2); font-size: var(--text-body); font-weight: var(--weight-bold); letter-spacing: 0; }
.reply__title:focus, .reply__title:focus-visible { outline: none; }
.reply__note { color: var(--color-text-secondary); font-size: var(--text-small); }
.reply .signposts, .reply ul { max-width: none; }
.quick-replies form { margin: 0; }

/* ---------- The letter card and the options: the two bordered cards of the conversation ---------- */
/* 8px inside a card; labels and notes 14px; one red date, the next one that costs money. */
.page--chat .card--letter, .page--chat .card--options { display: grid; gap: var(--space-2); padding: var(--space-4); }
.page--chat .card--letter > *, .page--chat .card--options > * { margin: 0; }
.page--chat .card--letter .card__title { font-size: var(--text-lead); font-weight: var(--weight-heavy); letter-spacing: -0.01em; }
.card__sub { font-size: var(--text-small); color: var(--color-text-secondary); }
.page--chat .card__note { font-size: var(--text-small); }
.facts-list { list-style: none; padding: 0; max-width: none; }
/* Label beside value; with large text, where the value would get squeezed, the value moves
   under its label instead. */
.facts-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3);
  margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--color-border);
}
.facts-list__key { flex: 0 0 5.25rem; font-size: var(--text-small); color: var(--color-text-secondary); }
.facts-list__value { flex: 1 1 9rem; min-width: 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.facts-list__value > small { display: block; }
.facts-list small { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.facts-list__value--missing { font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.due { color: var(--color-deadline); }
.nowrap { white-space: nowrap; }
.genuine { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-small); }
.genuine .icon { flex: none; margin-top: 2px; color: var(--color-done); }
.genuine--unsure .icon { color: var(--color-text-secondary); }
.done-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); color: var(--color-text-secondary); }
.done-line .icon { color: var(--color-done); }
.page--chat .card .quick-replies { margin-top: var(--space-2); }
.card__ask { font-size: var(--text-small); }
.card__ask a, .card__ask .link-button { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-text); text-underline-offset: 3px; }
/* Correcting the details in place: each row becomes a labelled box. */
.page--chat .card--letter.is-editing form { margin-top: var(--space-2); }

.option { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.option:first-of-type { padding-top: 0; }
.option > * { margin: 0; }
.option__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-2); }
.option__name { margin: 0; font-size: var(--text-body); font-weight: var(--weight-bold); }
.option__price { margin: 0; font-size: var(--text-lead); font-weight: var(--weight-bold); }
.option__price small { font-size: var(--text-small); color: var(--color-text-secondary); white-space: nowrap; }
.option form { margin: var(--space-1) 0 0; }
/* Three equal choices: the same outlined button for each, none pushed. */
.page--chat .option .btn--secondary { width: 100%; min-height: 3rem; border: 1px solid var(--color-border-control); background: var(--color-surface); }
@media (hover: hover) { .page--chat .option .btn--secondary:hover { background: var(--color-fill); } }
.page--chat .option .btn--secondary:active { background: var(--color-fill); }
/* On a wide screen they keep one shared width rather than spanning the card. */
@media (min-width: 40rem) { .page--chat .option .btn--secondary { width: auto; min-width: 15rem; } }

/* Doing it yourself: numbered steps, then the free guides on one line. */
.steps-list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding-left: 1.25em; }
.steps-list li { margin: 0; }
.reply__links, .msg__note { font-size: var(--text-small); color: var(--color-text-secondary); }
.msg__note { margin: var(--space-2) 0 0; }
.reply__links a { color: var(--color-text); }
/* A jump back to a card clears the top bar. */
.msg--card { scroll-margin-top: calc(var(--bar-height) + var(--space-4)); }

/* ---------- The steps before paying: one question or one check per page ---------- */
/* 16px between blocks; the way on is pinned at the bottom of the screen, except where a short
   screen or large text would leave it covering too much (then it sits after the content). */
.page--step .page { display: flex; flex-direction: column; }
.step { display: grid; gap: var(--space-4); width: 100%; max-width: 34rem; margin: 0 auto; padding: var(--space-4) 0 var(--space-6); }
.step > * { margin: 0; }
.step__title { font-size: var(--text-h1); font-weight: var(--weight-heavy); letter-spacing: -0.02em; line-height: 1.2; }
.step__lead { color: var(--color-text-secondary); }
.step__choices { display: grid; gap: var(--space-3); margin: 0; }
.page--step .btn { width: 100%; min-height: 3rem; }
.page--step .btn--secondary { border: 1px solid var(--color-border-control); background: var(--color-surface); }
@media (hover: hover) { .page--step .btn--secondary:hover { background: var(--color-fill); } }
.page--step .btn--secondary:active { background: var(--color-fill); }
.step__section { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.step__section > * { margin: 0; }
.step__section h2 { margin: 0; font-size: var(--text-body); font-weight: var(--weight-bold); letter-spacing: 0; }
.step__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-2); }
.step__head form { margin: 0; }
.step__head .link-button { color: var(--color-text); text-underline-offset: 3px; }
.timeline { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.timeline li { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin: 0; }
.timeline strong { flex: 0 0 7.5rem; font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.timeline span { flex: 1 1 12rem; min-width: 0; }
.step__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.step__amount { font-size: var(--text-h1); font-weight: var(--weight-heavy); letter-spacing: -0.02em; line-height: 1.1; }
.step__note, .step__fine { font-size: var(--text-small); color: var(--color-text-secondary); }
.page--step form { display: grid; gap: var(--space-3); margin: 0; }
.page--step form > * { margin: 0; }
.page--step .field { margin: 0; max-width: none; }
.page--step .field > .choice .choice__label { font-size: var(--text-body); }
.step__actions {
  position: sticky; bottom: 0; z-index: 2; display: grid; gap: var(--space-2);
  margin: 0 calc(-1 * var(--gutter)); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.step__fine { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; }
.step__fine a { display: inline-flex; align-items: center; min-height: var(--tap-target); }
@media (max-height: 34em) { .step__actions { position: static; margin: 0; padding-inline: 0; border-top: 0; } }
/* ---------- The case page: the next step, progress, then the messages ---------- */
.case-page { gap: var(--space-4); padding-top: var(--space-4); }
.case-page > * { margin: 0; }
.success-line { display: flex; align-items: flex-start; gap: var(--space-2); }
/* Straight after paying: "Payment received" over the whole screen. The ring draws from the top,
   then the tick, and the words rise in. After a pause the tick and words fade, then the green
   does, to the case page underneath. It takes taps until it has gone; reduced motion skips it
   (the status line above stays). */
.paid-moment { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--gutter); background: var(--color-paid); color: var(--color-on-paid); text-align: center; animation: paid-out 360ms var(--ease-exit) 1900ms both; }
.paid-moment__body { animation: paid-out 240ms var(--ease-exit) 1750ms both; }
.paid-moment__tick { display: block; width: clamp(4.5rem, 3.5rem + 4vw, 6rem); aspect-ratio: 1; margin: 0 auto var(--space-5); fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.paid-moment__ring, .paid-moment__check { stroke-dasharray: 1; stroke-dashoffset: 1; }
.paid-moment__ring { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); animation: paid-ring 560ms var(--ease-standard) 100ms forwards; }
.paid-moment__check { stroke-width: 4; animation: paid-draw 340ms var(--ease-standard) 560ms forwards; }
.paid-moment__title { margin: 0 0 var(--space-2); font-size: var(--text-h1); font-weight: var(--weight-heavy); letter-spacing: -0.02em; animation: paid-rise 380ms var(--ease-standard) 640ms both; }
.paid-moment__sub { margin: 0; font-size: var(--text-lead); animation: paid-rise 380ms var(--ease-standard) 740ms both; }
@keyframes paid-ring { from { transform: rotate(-90deg) scale(0.86); } to { stroke-dashoffset: 0; transform: rotate(-90deg) scale(1); } }
@keyframes paid-draw { to { stroke-dashoffset: 0; } }
@keyframes paid-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes paid-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .paid-moment { display: none; } }
.success-line .icon { flex: none; margin-top: 2px; color: var(--color-done); }
.page--chat .next-step { display: grid; gap: var(--space-3); padding: var(--space-4); }
.page--chat .next-step > * { margin: 0; }
.page--chat .next-step .card__title { font-size: var(--text-lead); font-weight: var(--weight-heavy); letter-spacing: -0.01em; }
.page--chat .next-step .card__eyebrow { margin: 0; }
.next-step form { display: grid; gap: var(--space-3); margin: 0; }
.next-step form > * { margin: 0; }
.next-step .field { margin: 0; max-width: none; }
.next-step .btn { width: 100%; }
.next-step .address { margin: 0; font-weight: var(--weight-bold); }
.field__aside { font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.field__more summary { display: inline-flex; align-items: center; min-height: var(--tap-target); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.field__more[open] summary { margin-bottom: var(--space-2); }
.input--file { padding: var(--space-2); }
.input--file::file-selector-button {
  margin-right: var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-control);
  border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: var(--weight-bold); cursor: pointer;
}
.sent-mark { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-done); }

.progress { display: grid; gap: var(--space-2); }
.progress__title { margin: 0; font-size: var(--text-body); font-weight: var(--weight-bold); letter-spacing: 0; }
.track { display: grid; margin: 0; padding: 0; list-style: none; }
.track__step { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); margin: 0; padding-bottom: var(--space-3); }
/* The line joining each step to the next. */
.track__step:not(:last-child)::before { content: ""; position: absolute; left: calc(0.75rem - 1px); top: 1.5rem; bottom: 0; width: 2px; background: var(--color-border); }
.track__step.is-done:not(:last-child)::before { background: var(--color-done); }
.track__mark { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 2px solid var(--color-border-control); border-radius: 50%; background: var(--color-surface); }
.track__mark .icon { width: 0.875rem; height: 0.875rem; }
.is-done .track__mark { border-color: var(--color-done); background: var(--color-done); color: var(--color-surface); }
.is-now .track__mark, .is-you .track__mark { border-color: var(--color-text); box-shadow: inset 0 0 0 4px var(--color-surface); background: var(--color-text); }
.is-you .track__mark { border-color: var(--color-brand); background: var(--color-brand); }
.track__text { display: grid; padding-top: 1px; }
.track__text strong { font-weight: var(--weight-bold); }
.is-todo .track__text strong { font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.track__text small { font-size: var(--text-small); color: var(--color-text-secondary); }
.is-you .track__text small { color: var(--color-text); }
.case-note { font-size: var(--text-small); color: var(--color-text-secondary); }
/* The messages take only the room they need here: the next step and progress come first. */
.page--chat .case-page .case-thread { flex: none; padding-block: var(--space-2); }
.page--chat .case-page .case-thread:not(:has(*)) { display: none; }
.history summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-target); cursor: pointer; font-size: var(--text-small); color: var(--color-text-secondary); }
.history summary strong { font-weight: var(--weight-bold); color: var(--color-text); }
.history ol { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding-left: 1.25em; font-size: var(--text-small); color: var(--color-text-secondary); }
@media (prefers-reduced-motion: no-preference) {
  .track__mark { transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard); }
}

/* Read and sign: the appeal on a sheet of paper, then who is signing and the one button. */
.paper { padding: var(--space-4); border: 1px solid var(--color-paper-line); border-radius: var(--radius-panel); background: var(--color-paper); color: var(--color-paper-ink); }
.paper > * { margin: 0; }
.paper__to { margin-bottom: var(--space-3); font-size: var(--text-small); color: var(--color-paper-soft); }
.paper__body p { margin: 0 0 var(--space-3); }
.paper__body p:last-child { margin-bottom: 0; }
.signing { margin: 0; font-size: var(--text-small); }

/* No menu on these pages: on a wide screen the bar and the back button sit over the column. */
.page--step .appbar { width: 100%; max-width: calc(34rem + 2 * var(--gutter)); margin-inline: auto; }
.chip--primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.chip--primary:visited { color: var(--color-on-brand); }
@media (hover: hover) { .chip--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); } }
.chip--primary:active { background: var(--color-brand-hover); }
.chip:disabled { opacity: 0.6; cursor: progress; }
/* One line when the composer asks for one thing: an email, a code, a name. */
.composer--line .composer__text { resize: none; }

/* ---------- The 6-digit code: one input drawn as six boxes ---------- */
/* Without JavaScript it's an ordinary input. With it, the input sits invisibly over the boxes,
   so typing, pasting, autofill and screen readers all still work on a single field. */
.composer--code .composer__tool-wrap { display: none; }
.otp { position: relative; padding: 0 var(--space-1); }
.otp__slots { display: none; }
.js .otp__slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.otp__slot {
  display: grid; place-items: center; height: 2.5rem; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-panel); background: var(--color-surface); font-size: 1.25rem; font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums; transition: border-color var(--duration-state) var(--ease-standard);
}
.otp__slot.is-active { border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); }
.otp__slot.is-active:empty::after { content: ""; width: 1px; height: 1.25rem; background: var(--color-text); animation: otp-caret 1s step-end infinite; }
@keyframes otp-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .otp__slot.is-active:empty::after { animation: none; } }
.js .otp__input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; padding: 0;
  border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 1rem;
  letter-spacing: 2.5rem; outline: none; opacity: 0.01;
}
.otp__paste { min-height: 2.25rem; margin-left: var(--space-1); font-size: var(--text-small); }

/* ---------- Reading a letter: the envelope and its status, as a reply ---------- */
/* The reading status: a line of text (the character on the message box does the reading), the
   same size from upload to finish, so nothing shifts when it completes. */
.page--chat .card--reading, .card--reading {
  display: block; min-height: 3rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.reading-status { min-width: 0; min-height: 3rem; }
.reading-status__title { margin: 0; font-size: var(--text-body); font-weight: var(--weight-medium); }
.reading-status__detail { margin: var(--space-1) 0 0; max-width: 22rem; font-size: var(--text-small); color: var(--color-text-secondary); }

/* A reply waiting its turn takes no space: the typing indicator sits where it will appear, and
   it replaces the indicator in the same frame, so nothing above or below it moves. */
.thread > .msg.is-waiting { display: none; }
/* While a letter goes up, its preview leaves the composer: the bubble and the envelope card in
   the conversation show it, and the card says how far the upload has got. */
.composer.is-sending .composer__attachment, .composer.is-sending [data-upload-progress] { display: none; }
.page--chat .otp__paste { min-height: 2.25rem; }
/* The typing indicator is one line of text tall, and so is a status line, so whatever replaces
   the indicator only ever grows the thread downwards: nothing above it moves. */

.thread > .msg--status { min-height: 1.4375rem; display: flex; align-items: center; justify-content: center; }
/* Answers appear once the question has finished arriving; their space is kept, so nothing moves. */
.msg .quick-replies { transition: opacity 200ms var(--ease-standard); }
.msg.is-streaming .quick-replies { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .msg .quick-replies { transition: none; } }

/* ---------- The letter's name in the middle of the top bar ---------- */
/* On chat pages the bar is see-through: messages scroll up behind it and fade out (below), while
   the buttons sit on their own filled circles so they stay clear over text. The sides keep their
   size; the title takes what's left and shortens with an ellipsis. */
.appbar__centre { display: flex; justify-content: center; min-width: 0; }
.appbar__title {
  display: block; max-width: min(100%, 30rem); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-body); font-weight: var(--weight-bold); line-height: 1.3; text-align: center;
}
/* The next date that matters, in the deadline colour: the one red line on the screen. Where the
   case is, when there's no date to watch, is quiet. */
.appbar__sub.appbar__sub--quiet { color: var(--color-text-secondary); }
.appbar__sub {
  display: block; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-deadline); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .appbar__centre > * { animation: appbar-title-in 200ms var(--ease-standard); }
}
@keyframes appbar-title-in { from { opacity: 0; } }
.page--chat .appbar__button, .page--chat .appbar__new { width: 2.5rem; height: 2.5rem; background: var(--color-fill); }
@media (min-width: 1024px) { .page--chat .appbar__new { width: auto; background: var(--color-surface); } }
@media (hover: hover) { .page--chat .appbar__button:hover { background: var(--color-border); } }
.page--chat .appbar__pill { min-height: 2.5rem; padding-inline: var(--space-4); white-space: nowrap; }
.page--chat .thread { padding-top: var(--space-5); }

/* allow-effects: top bar fade, requested by the owner on 2026-10-07 ("like on chatgpt") */
.page--chat .appbar { background: transparent; }
.page--chat .appbar::before, .page--chat .appbar::after {
  content: ""; position: absolute; inset: 0 0 -1.25rem 0; pointer-events: none;
}
/* Solid at the top, clear 20px below the bar: text fades out as it slides under. */
.page--chat .appbar::before {
  z-index: -1; background: linear-gradient(to bottom, var(--chat-ground, var(--color-surface)) 55%, transparent);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .page--chat .appbar::after {
    z-index: -2; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent); mask-image: linear-gradient(to bottom, black 40%, transparent);
  }
}
/* end allow-effects */

/* ---------- Signing in: one calm column, like ChatGPT's own sign-in pages ---------- */
.page--auth { background: var(--color-surface); }
.page--auth .site-footer { display: none; }
.auth-bar { display: flex; justify-content: center; padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-4) 0; }
.auth-bar__brand { display: inline-flex; color: var(--color-text); }
.auth-bar__brand .logo { height: 1.5rem; }
.auth { max-width: 24rem; margin: 0 auto; padding-block: clamp(var(--space-6), 8vh, var(--space-8)) var(--space-7); }
.auth__title { margin: 0 0 var(--space-2); font-size: var(--text-h2); text-align: center; }
.auth__lead { margin: 0 0 var(--space-6); color: var(--color-text-secondary); text-align: center; }
.auth .field { max-width: none; margin-bottom: var(--space-4); }
.auth .input { border-width: 1px; border-radius: var(--radius-panel); font-size: 1rem; }
.auth form > .btn { width: 100%; border-radius: var(--radius-control); }
.auth__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-3); margin-top: var(--space-3); }
.auth__links form { margin: 0; }
.auth__small { margin: var(--space-6) 0 0; font-size: var(--text-small); color: var(--color-text-secondary); text-align: center; }
.auth__check { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); text-align: center; }
.auth__check p { margin: 0 0 var(--space-3); }
.auth__check form { margin: 0; }
.auth__check form + form { margin-top: var(--space-1); }
.auth__check form > .btn { width: 100%; border-radius: var(--radius-control); }
.auth .otp { padding: 0; }
.auth .otp__slot { height: 3.25rem; font-size: 1.5rem; }
.auth .otp__paste { display: block; margin: var(--space-2) auto 0; }
/* Errors and focus as in the chat: a quiet line under the label, a brand-coloured ring. */
.auth .field--error { padding-left: 0; border-left: 0; }
.auth .field__error { font-size: var(--text-small); font-weight: var(--weight-medium); }
.auth .input:focus-visible { outline: none; border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); }
.auth .field--error .input { border-color: var(--color-deadline); }

/* =================== Staff area =================== */
/* A work tool: denser type, hairline rows, colour only where something is urgent. */
.page--staff {
  --text-body: 0.9375rem; --text-small: 0.8125rem; --text-lead: 1rem; --text-h2: 1.125rem; --text-h1: 1.375rem;
  background: var(--color-surface);
}
.page--staff .site-footer, .page--staff .skip-link:not(:focus) { display: none; }
.page--staff main.page { padding: 0; }
.page--staff main.page > .container { max-width: none; padding: 0; }
/* The frame: a slim top bar and a menu, like the customer chat. The menu is a sheet on phones
   and a fixed sidebar from 1024px. */
.page--staff { --bar-height: 56px; }
.staff-top { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-1); padding-inline: var(--space-2); border-bottom: 1px solid var(--color-border); }
.staff-top__start { display: flex; }
.staff-top__end { display: flex; justify-content: flex-end; min-width: 3rem; padding-right: var(--space-1); }
.staff-top__title { min-width: 0; text-align: center; }
.staff-top__h1 { margin: 0; font-size: var(--text-lead); font-weight: var(--weight-bold); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-top__h1--case { font-variant-numeric: tabular-nums; }
.staff-top__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.staff-drawer__brand { gap: var(--space-2); font-weight: var(--weight-bold); text-decoration: none; }
.staff-drawer__mark { width: 1.75rem; height: auto; }
.staff-drawer__count { margin-left: auto; min-width: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-small); background: var(--color-fill); color: var(--color-text); font-size: var(--text-small); font-variant-numeric: tabular-nums; text-align: center; }
.staff-drawer .drawer__item[aria-current="page"] { background: var(--color-fill); }
.staff-drawer__me { display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-2); font-size: var(--text-small); }
.staff-drawer__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.staff-drawer__email { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.staff-drawer__out { min-height: 2.25rem; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-control); background: var(--color-fill); color: var(--color-text); font: inherit; cursor: pointer; }
.staff-avatar { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-fill); color: var(--color-text); font-size: 0.75rem; font-weight: var(--weight-bold); }
.staff-main { min-width: 0; padding: var(--space-3) var(--space-4) var(--space-7); }
.staff-page { max-width: 64rem; }
@media (min-width: 1024px) {
  .page--staff .staff-top, .page--staff .staff-main { margin-left: 16rem; }
  .page--staff .staff-top { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: var(--space-5); }
  .page--staff .staff-top__title { text-align: left; }
  .page--staff .staff-top__start:empty, .page--staff .staff-top__start:has(.appbar__menu) { display: none; }
  .staff-main { padding: var(--space-5) var(--space-6) var(--space-7); }
}

/* Inbox: search, one row of tabs, one row of who, then the list */
.staff-list { max-width: 52rem; }
.staff-intro { max-width: 40rem; margin: 0 0 var(--space-5); }
.staff-search { margin: 0 0 var(--space-3); }
.staff-search__input { width: 100%; min-height: 2.75rem; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-control); background: var(--color-fill); color: var(--color-text); font: inherit; }
.staff-search__input::placeholder { color: var(--color-text-secondary); }
.staff-search__input:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 0; }
.staff-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
.tabs-line { display: flex; gap: var(--space-5); }
.tabs-line__item { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2.75rem; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--color-text-secondary); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.tabs-line__item[aria-current] { border-color: var(--color-text); color: var(--color-text); }
.tabs-line__count { color: var(--color-text-secondary); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; }
.chips-who { display: flex; gap: var(--space-1); padding-bottom: var(--space-2); }
.chip-who { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--space-3); border-radius: var(--radius-control); color: var(--color-text-secondary); font-size: var(--text-small); font-weight: var(--weight-medium); text-decoration: none; }
.chip-who:visited { color: var(--color-text-secondary); }
.chip-who[aria-current] { background: var(--color-fill); color: var(--color-text); }
@media (max-width: 599px) { .chips-who { order: -1; width: 100%; padding: var(--space-1) 0 0; } .tabs-line { width: 100%; justify-content: space-between; gap: var(--space-3); } }
.staff-alert { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-panel); background: var(--color-deadline-fill); color: var(--color-text); }
.staff-empty { padding: var(--space-8) 0; text-align: center; color: var(--color-text-secondary); }
.staff-empty__title { margin: 0 0 var(--space-1); color: var(--color-text); font-weight: var(--weight-medium); }

/* One case per row: who, why, then the details, newest first. Colour only for urgent. */
.queue { list-style: none; margin: 0; padding: 0; }
.queue li { margin: 0; }
.queue__row {
  position: relative; display: grid; gap: 2px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none;
}
.queue__row:visited { color: var(--color-text); }
.queue__row:hover { background: var(--color-surface-alt); }
.queue__row:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; border-radius: 8px; }
.queue__row::before { content: ""; position: absolute; left: var(--space-2); top: 1.2rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.queue__row--new::before { background: var(--color-text); }
.queue__row--urgent::before { background: var(--color-deadline); }
.queue__top { display: flex; align-items: baseline; gap: var(--space-3); }
.queue__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.queue__row--new .queue__name, .queue__row--urgent .queue__name { font-weight: var(--weight-bold); }
.queue__when { flex: none; font-size: var(--text-small); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.queue__why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue__row--urgent .queue__why { color: var(--color-deadline); font-weight: var(--weight-medium); }
.queue__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-small); color: var(--color-text-secondary); }
.queue__meta > span + span::before { content: "·"; margin: 0 var(--space-2); }
.queue__ref { font-variant-numeric: tabular-nums; }

/* Small shared bits */
.pill { display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-small); background: var(--color-fill); color: var(--color-text-secondary); font-size: var(--text-small); font-weight: var(--weight-medium); vertical-align: middle; letter-spacing: 0; }
.pill--warn { background: var(--color-deadline-fill); color: var(--color-deadline); }
.page--staff .btn { min-height: 2.25rem; padding-inline: var(--space-4); border-radius: var(--radius-control); font-size: var(--text-body); }
.page--staff .btn--secondary { background: var(--color-fill); border-color: transparent; }
.page--staff .btn--secondary:hover { background: var(--color-border); }
.page--staff .input { border-width: 1px; border-radius: var(--radius-panel); min-height: 2.25rem; }
.page--staff .input:focus-visible { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand); }
.page--staff .field { margin-bottom: var(--space-3); max-width: none; }
.page--staff .field__label, .page--staff .fieldset legend { font-size: var(--text-small); font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.page--staff .field__hint { font-size: var(--text-small); }
.page--staff .field--error { padding-left: 0; border-left: 0; }
.page--staff .error-summary { padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-panel); background: var(--color-deadline-fill); margin-bottom: var(--space-3); }
.page--staff .error-summary h2 { margin: 0 0 var(--space-1); font-size: var(--text-small); color: var(--color-deadline); }
.page--staff .choices { gap: var(--space-1); }
.page--staff .choice input { width: 1.125rem; height: 1.125rem; }

/* The case workspace: next step, then the story, then the composer docked at the bottom. The
   details are a column on wide screens and a sheet from the right below 1100px. */
.ws-hold { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-panel); background: var(--color-deadline-fill); }
.ws-hold p { margin: 0; flex: 1; min-width: 16rem; }
.ws-hold__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.ws-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.ws-thread { min-width: 0; max-width: 46rem; margin-inline: auto; width: 100%; }
.ws-step { margin-bottom: var(--space-5); padding: var(--space-4); border-radius: var(--radius-panel); background: var(--color-surface-alt); }
.ws-step__label { margin: 0 0 var(--space-1); font-size: var(--text-small); color: var(--color-text-secondary); }
.ws-step__title { margin: 0; font-size: var(--text-lead); letter-spacing: 0; }
.ws-step__text { margin: var(--space-1) 0 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.ws-step__go { margin-top: var(--space-3); }
.ws-step__form { margin-top: var(--space-3); }
.ws-step__more { margin: var(--space-3) 0 0; font-size: var(--text-small); }
.ws-owner { display: flex; gap: var(--space-2); align-items: center; margin: 0; }
.ws-owner__select { flex: 1; min-width: 0; }

.ws-side { display: grid; gap: var(--space-3); align-content: start; }
.ws-side__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--bar-height); }
.ws-side__heading { margin: 0; font-size: var(--text-lead); letter-spacing: 0; }
@media (max-width: 1099px) {
  .ws-side[popover] {
    position: fixed; inset: 0 0 0 auto; width: min(26rem, 92vw); height: 100dvh; max-height: none; margin: 0;
    padding: env(safe-area-inset-top, 0px) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    border: 0; border-left: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); overflow-y: auto;
  }
  .ws-side[popover]:popover-open { display: grid; }
  .ws-side[popover]::backdrop { background: rgb(0 0 0 / 0.45); }
  .ws-side .side-card { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; padding: var(--space-3) 0 var(--space-4); }
}
@media (max-width: 1099px) and (prefers-reduced-motion: no-preference) {
  .ws-side[popover] { translate: 100% 0; transition: translate var(--duration-page) var(--ease-standard), display var(--duration-page) allow-discrete, overlay var(--duration-page) allow-discrete; }
  .ws-side[popover]:popover-open { translate: 0 0; }
  @starting-style { .ws-side[popover]:popover-open { translate: 100% 0; } }
}
@media (min-width: 1100px) {
  .ws-body { grid-template-columns: minmax(0, 1fr) 21rem; }
  .ws-side[popover] { display: grid; position: sticky; top: calc(var(--bar-height) + var(--space-4)); inset: auto; width: auto; height: auto; max-height: calc(100dvh - var(--bar-height) - var(--space-6)); overflow-y: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; }
  .ws-side__top, .ws-details-open { display: none; }
}

.ws-chat { margin-bottom: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.ws-chat summary { padding: var(--space-2) var(--space-3); color: var(--color-text-secondary); font-size: var(--text-small); cursor: pointer; }
.ws-chat__list { list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-3); display: grid; gap: var(--space-2); }
.ws-chat__item { font-size: var(--text-small); color: var(--color-text-secondary); }
.ws-chat__item--customer { justify-self: end; padding: var(--space-1) var(--space-3); border-radius: var(--radius-panel); background: var(--color-fill); color: var(--color-text); }

/* The thread */
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.tl { margin: 0; }
.tl__who { margin: 0 0 var(--space-1); font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--color-text); }
.tl__when { margin-left: var(--space-1); font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.tl__bubble { padding: var(--space-2) var(--space-3); border-radius: var(--radius-panel); background: var(--color-fill); white-space: normal; overflow-wrap: anywhere; }
.tl--them { max-width: 85%; }
.tl--us { max-width: 85%; margin-left: auto; text-align: right; }
.tl--us .tl__bubble { text-align: left; background: var(--color-fill); color: var(--color-text); }
.tl--them .tl__bubble { background: transparent; border: 1px solid var(--color-border); }
.tl--note { padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-panel); }
.tl--note .tl__who { color: var(--color-text-secondary); font-weight: var(--weight-regular); }
.tl--card { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.tl--in { border-color: var(--color-border-strong); }
.tl__subject { margin: 0 0 var(--space-2); font-weight: var(--weight-medium); }
.tl__text { overflow-wrap: anywhere; }
.tl__text p:last-child { margin-bottom: 0; }
.tl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-2) 0 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.tl__actions { margin-top: var(--space-3); }
.tl__actions form { margin: 0; }
.tl--event { text-align: center; font-size: var(--text-small); color: var(--color-text-secondary); }

/* The composer: docked at the bottom like a chat box, three kinds of message */
.ws-thread { padding-bottom: var(--space-2); }
.composer-staff {
  position: sticky; bottom: 0; z-index: 5; margin-top: var(--space-5); padding: var(--space-2) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
}
.composer-staff .tabs { padding: var(--space-2) var(--space-3) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: 0 4px 24px -12px rgb(0 0 0 / 0.35); }
.composer-staff .tabs__list, .composer-staff .tabs.is-ready .tabs__list { display: flex; flex-wrap: nowrap; gap: var(--space-1); margin: 0 0 var(--space-2); padding: 0; border: 0; overflow-x: auto; }
.composer-staff .tabs__tab { flex: none; min-height: 2rem; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-control); background: none; color: var(--color-text-secondary); font: inherit; font-size: var(--text-small); font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; }
.composer-staff .tabs__tab[aria-selected="true"] { background: var(--color-fill); color: var(--color-text); }
.composer-staff .field { margin-bottom: var(--space-2); }
.composer-staff .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.composer-staff .field__hint { display: none; }
.composer-staff .input--textarea { min-height: 3.25rem; max-height: 40dvh; padding: var(--space-2) var(--space-1); border: 0; background: transparent; resize: none; field-sizing: content; }
.composer-staff .input--textarea:focus-visible { box-shadow: none; }
.composer-staff__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 var(--space-3); }
.composer-staff__pair .field__label { position: static; width: auto; height: auto; clip-path: none; }
.composer-staff__send { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.composer-staff__send .secondary { font-size: var(--text-small); }

/* The side panel */
.side-card { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.side-card--step { background: var(--color-surface-alt); }
.side-card__label { margin: 0 0 var(--space-1); font-size: var(--text-small); color: var(--color-text-secondary); }
.side-card__title { margin: 0 0 var(--space-1); font-size: var(--text-lead); letter-spacing: 0; }
.side-card__heading { margin: 0 0 var(--space-2); font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--color-text-secondary); letter-spacing: 0; }
.side-card__value { margin: 0 0 var(--space-1); font-weight: var(--weight-medium); }
.side-card__text { margin: 0 0 var(--space-1); font-size: var(--text-small); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.side-card__go { margin-top: var(--space-3); width: 100%; }
.side-card__form { margin-top: var(--space-3); }
.side-card__more { margin: var(--space-3) 0 0; font-size: var(--text-small); }
.side-edit { margin-top: var(--space-2); }
.side-edit summary { font-size: var(--text-small); color: var(--color-text-secondary); cursor: pointer; }
.side-edit[open] summary { margin-bottom: var(--space-3); }
/* On a touchscreen, the case page's small fold-outs and links get a full-size tap area
   (padding, so a fold-out keeps its triangle). */
@media (pointer: coarse) {
  .side-edit summary { padding-block: 0.75rem; }
  .side-edit[open] summary { margin-bottom: 0; }
  .ws-step__more a, .tl__meta a { display: inline-block; padding-block: 0.75rem; }
}
.side-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.facts { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; }
.facts div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); }
.facts dt { color: var(--color-text-secondary); }
.facts dd { margin: 0; text-align: right; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-2); }
.docs__item { display: grid; gap: var(--space-1); color: var(--color-text); text-decoration: none; font-size: var(--text-small); }
.docs__thumb { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-fill); }
.docs__icon { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-fill); }
.docs__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); }

/* Narrow forms (letter, finish, refund) and the mail list */
.page-narrow { max-width: 44rem; }
.staff-form { margin-top: var(--space-5); }
.staff-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.mail-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.mail-item { border-bottom: 1px solid var(--color-border); }
.mail-item__head { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 3rem; gap: var(--space-3); padding: var(--space-3) var(--space-2); cursor: pointer; list-style: none; }
.mail-item__head::-webkit-details-marker { display: none; }
.mail-item__head:hover { background: var(--color-surface-alt); }
.mail-item__from { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item__subject { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item__when { text-align: right; font-size: var(--text-small); color: var(--color-text-secondary); }
.mail-item__body { padding: 0 var(--space-2) var(--space-4); max-width: 46rem; }
.mail-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.mail-item__actions form { margin: 0; }
.mail-item__file { display: flex; gap: var(--space-2); }

/* Lists and text in the staff area use the full width they're given. */
.page--staff ul, .page--staff ol, .page--staff p, .page--staff dl { max-width: none; }
.page--staff .staff-intro { max-width: 40rem; }
.add-doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.add-doc__pick { cursor: pointer; }
.add-doc__hint { font-size: var(--text-small); }
.add-doc:focus-within .add-doc__pick { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.page--staff .choice { align-items: center; min-height: 2rem; }
.page--staff .choice__label { padding-top: 0; }

/* The /design/mascot/ check page */
.mascot-lab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block: var(--space-3) var(--space-5); }
.mascot-lab__stage { --nl-envelope: 10rem; }
.mascot-lab__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mascot-lab__size { display: grid; justify-items: center; gap: var(--space-1); font-size: var(--text-small); color: var(--color-text-secondary); }
.mascot-lab__size--32 .nl-stage { --nl-envelope: 32px; }
.mascot-lab__size--48 .nl-stage { --nl-envelope: 48px; }
.mascot-lab__size--64 .nl-stage { --nl-envelope: 64px; }

/* The starting page's character on its way into the conversation (see flyMascot in app.js). */
.nl-flight { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; transform-origin: 0 0; }
.nl-flight .chat-empty__mascot { margin: 0; }

/* The buddy: the character sitting on the top-left edge of the message box. Both rigs are
   stacked so their envelopes coincide; the class buddy--letter crossfades to the one holding a
   letter. --nl-envelope is the visible envelope's width. */
.buddy { --nl-envelope: 3.25rem; transform-origin: 50% 100%; position: absolute; left: 2rem; bottom: calc(100% - 1px); z-index: 1;
  width: var(--nl-envelope); height: calc(var(--nl-envelope) * 251 / 312); pointer-events: none; transition: opacity 220ms var(--ease-standard); }
.buddy.is-away { opacity: 0; translate: 0 10px; }
@media (prefers-reduced-motion: no-preference) { .buddy { transition: opacity 200ms var(--ease-standard), translate 200ms var(--ease-standard); } }
/* Options under the newest reply: it moves along the edge to the right end, out from under them. */
.buddy--aside { left: calc(100% - 2rem - var(--nl-envelope)); }

.buddy .nl-stage { --nl-envelope: inherit; position: absolute; transition: opacity 200ms var(--ease-standard); }
.buddy__char { left: calc(var(--nl-envelope) * -65 / 312); top: calc(var(--nl-envelope) * -48 / 312); }
.buddy__letter { left: calc(var(--nl-envelope) * -85 / 312); top: calc(var(--nl-envelope) * -83 / 312); opacity: 0; }
/* Swapping rigs, the letter rig (on top) fades in or out over a solid character, which hides
   only once it's covered: the body never goes see-through mid-swap. */
.buddy .buddy__char { transition: opacity 0s; }
.buddy--letter .buddy__char { opacity: 0; transition: opacity 0s 200ms; }
.buddy--letter .buddy__letter { opacity: 1; }
/* Room above the message box for it, so it never sits on the last line of a reply. */
.page--chat .thread { padding-bottom: calc(3.25rem * 0.8 + var(--space-5)); }

/* =================== Pages outside the chat: the same frame, crisp and spacious ===================
   One reading column, generous air, restrained type, hairlines instead of boxes. The space does
   the work: sections are separated by distance, not borders, and nothing is boxed unless it is
   something you act on. */
.page--doc .page { padding-block: var(--space-7) calc(var(--space-8) * 1.5); }
.page--doc .page > .container { max-width: 40rem; padding-inline: var(--space-5); }
.page--doc .page .reading, .page--doc .page .page-narrow { max-width: none; }
.page--doc .page h1 { margin: 0 0 var(--space-3); font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.02em; }
.page--doc .page h2 { margin: var(--space-7) 0 var(--space-3); font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.005em; }
.page--doc .page h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1rem; }
.page--doc .page p, .page--doc .page li:not([class]) { line-height: 1.7; }
.page--doc .page p { margin: 0 0 var(--space-4); }
.page--doc .page ul:not([class]), .page--doc .page ol:not([class]) { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
.page--doc .page :is(ul, ol):not([class]) > li + li { margin-top: var(--space-2); }
.page--doc .page .lead, .page--doc .page .doc-lead { margin-bottom: var(--space-6); color: var(--color-text-secondary); font-size: 1.0625rem; }
.page--doc .page a { text-underline-offset: 3px; }
/* The draft note on legal pages: quiet, but impossible to miss. */
.page--doc .page .notice-dev { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-panel); background: var(--color-fill); font-size: var(--text-small); }
.page--doc .page .notice-dev p { margin: 0; }
.page--doc .page .faq details { border-color: var(--color-border); }
.page--doc .page .faq summary { padding-block: var(--space-4); }

/* A list of things you open (cases): rows with hairlines, the name first, the state quiet. */
.doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.doc-list li { margin: 0; }
.doc-list__row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.doc-list__row:visited { color: var(--color-text); }
.doc-list__row:hover { background: var(--color-surface-alt); }
.doc-list__main { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.doc-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.doc-list__meta { font-size: var(--text-small); color: var(--color-text-secondary); }
/* A long state wraps in its own column instead of squeezing the title to nothing. */
.doc-list__state { flex: 0 1 auto; max-width: 40%; text-align: right; font-size: var(--text-small); color: var(--color-text-secondary); }
.doc-list__state--you { color: var(--color-text); font-weight: var(--weight-medium); }
.doc-list__row .icon { flex: none; color: var(--color-text-secondary); }
.doc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.doc-head h1 { margin: 0; }
.doc-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-4); border-radius: var(--radius-control); background: var(--color-fill); color: var(--color-text); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.doc-pill:visited { color: var(--color-text); }
.doc-pill:hover { background: var(--color-border); }

/* Settings (your account): groups of rows, like a phone's settings. */
.settings { margin: 0 0 var(--space-7); }
.page--doc .page .settings__title { margin: 0 0 var(--space-2); font-size: 1.0625rem; font-weight: var(--weight-medium); color: var(--color-text); letter-spacing: -0.005em; }
.settings__group { border-top: 1px solid var(--color-border); }
.settings__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.settings__row p { margin: 0; }
.settings__label { font-weight: var(--weight-medium); }
.settings__hint { flex-basis: 100%; margin: 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.settings__row form { margin: 0; }
.settings__name { display: flex; gap: var(--space-2); flex-basis: 100%; }
.settings__name .input { flex: 1; min-width: 0; }
.settings__row--danger .settings__label { color: var(--color-deadline); }

/* The case page's header: quiet, so the conversation leads. No rule under it; the facts sit
   behind one small line that opens them. */
.page--chat .case-facts summary { min-height: 2.25rem; margin-top: var(--space-1); gap: var(--space-1); list-style: none; font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-text-secondary); text-decoration: none; }
.page--chat .case-facts summary::-webkit-details-marker { display: none; }
.page--chat .case-facts summary::after { content: ""; width: 0.4rem; height: 0.4rem; margin-left: 0.15rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); transition: transform var(--duration-state) var(--ease-standard); }
.page--chat .case-facts[open] > summary::after { transform: translateY(0.08rem) rotate(-135deg); }
.page--chat .case-facts summary:hover { color: var(--color-text); }
.page--chat .case-facts[open] .case-facts__grid { margin-top: var(--space-2); padding: var(--space-5); border-radius: var(--radius-panel); background: var(--color-fill, var(--color-surface-alt)); }

/* How it works in the same frame: a left-aligned opening like the other pages, sections
   separated by space rather than rules, the type a step larger than a document but not a poster. */
.page--marketing.page--doc .m-hero { justify-items: start; text-align: left; padding-block: var(--space-7) var(--space-6); }
.page--marketing.page--doc .m-hero h1 { font-size: 2rem; margin-bottom: var(--space-3); }
.page--marketing.page--doc .m-hero__sub { margin-bottom: var(--space-5); font-size: 1.0625rem; }
.page--marketing.page--doc .m-section { max-width: none; padding-block: var(--space-7); border-top: 0; }
.page--marketing.page--doc .m-section h2 { margin: 0 0 var(--space-5); font-size: 1.375rem; letter-spacing: -0.015em; }
.page--marketing.page--doc .m-price { font-size: 2rem; }

/* =================== Controls in the same frame: one shape, one weight ===================
   Every page outside the chat (documents, the letter steps, sign-in) uses the same buttons and
   fields as the chat: pill buttons, 12px fields with a hairline, and an ink focus ring (red
   is kept for the brand and for errors, so a focused field never looks like a wrong one). */
:is(.page--doc .page, .page--auth) .btn { min-height: 2.75rem; padding-inline: var(--space-5); border-radius: var(--radius-control); font-weight: var(--weight-medium); }
:is(.page--doc .page, .page--auth) .btn--primary { box-shadow: none; }
:is(.page--doc .page, .page--auth) .btn--secondary { border-width: 1px; border-color: var(--color-border-strong); }
:is(.page--doc .page, .page--auth) .btn--text { min-height: 2.75rem; padding-inline: var(--space-2); border-radius: 8px; }
.page--doc .page .input { border-width: 1px; border-radius: var(--radius-panel); }
.page--doc .page .input:focus-visible { outline: none; border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); }
.page--doc .page .field__label { font-weight: var(--weight-medium); }
.page--doc .page .field--error { padding-left: 0; border-left: 0; }
.page--doc .page .field--error .input { border-color: var(--color-deadline); }
.page--doc .page .field__error { font-size: var(--text-small); font-weight: var(--weight-medium); }

/* The letter steps: a thin ink progress line, not four red blocks. */
.page--doc .stepper { margin-bottom: var(--space-6); }
.page--doc .stepper__step { border-top-width: 3px; border-top-color: var(--color-border); }
.page--doc .stepper__step.is-done, .page--doc .stepper__step.is-current { border-top-color: var(--color-text); }
.page--doc .stepper__step.is-current { font-weight: var(--weight-medium); }
/* A note set apart: a soft fill, not a heavy bar or band. */
.page--doc .inset, .page--doc .banner { max-width: none; margin-block: var(--space-5); padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-panel); background: var(--color-fill); }
.page--doc .banner__title { padding: 0; margin: 0 0 var(--space-1); background: none; color: var(--color-text); font-size: var(--text-body); font-weight: var(--weight-medium); }
.page--doc .banner__body { padding: 0; }
/* The upload: the drop area is the only box. */
.page--doc .upload__card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.page--doc .dropzone__target { border-width: 1.5px; border-radius: var(--radius-panel); }
/* Waiting on a job (a scan, a payment): one quiet panel. */
.page--doc .job { max-width: none; border-radius: var(--radius-panel); }
.page--doc .job__bar { height: 4px; border-radius: 2px; overflow: hidden; }
/* Signposts and other link lists: hairline rows, the name first. */
.page--doc .page .link-list { max-width: none; margin: 0 0 var(--space-5); border-top: 1px solid var(--color-border); }
.page--doc .page .link-list li { padding-block: var(--space-4); }
.page--doc .page .link-list a { font-weight: var(--weight-medium); }
.page--doc .page .summary-list dt { font-weight: var(--weight-medium); }
.page--doc .page .summary-list { max-width: none; }

/* Rows you act on in place (a passkey: rename, remove). */
.doc-list__row--still:hover { background: none; }
.doc-list__action { flex: none; padding: var(--space-2); border-radius: 8px; color: var(--color-text-secondary); font-size: var(--text-small); font-weight: var(--weight-medium); text-decoration: none; }
.doc-list__action:hover { color: var(--color-text); background: var(--color-fill); }
.doc-list__action--danger { color: var(--color-deadline); }

/* Auth extras: setup steps, the QR code, recovery codes, a second way in. */
.auth__steps { margin: 0 0 var(--space-5); padding-left: 1.25rem; color: var(--color-text-secondary); }
.auth__steps li + li { margin-top: var(--space-1); }
.auth__qr { margin: 0 0 var(--space-3); text-align: center; }
.auth__qr img { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-qr-ground); }
.auth__small--tight { margin: 0 0 var(--space-5); }
.auth__key { overflow-wrap: anywhere; color: var(--color-text); }
.auth__alt { margin-top: var(--space-3); }
.auth__alt .btn { width: 100%; }
.auth__codes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); padding: var(--space-4) var(--space-5); list-style: none; border-radius: var(--radius-panel); background: var(--color-fill); font-size: 1rem; letter-spacing: 0.04em; text-align: center; }
.auth__codes li { margin: 0; }
.auth__stack { display: grid; gap: var(--space-2); }
.auth__stack .btn { width: 100%; }
.auth-bar__brand--text { min-height: 1.5rem; align-items: center; font-weight: var(--weight-bold); letter-spacing: -0.01em; text-decoration: none; }
.page--doc .page .job > h2 { margin: 0 0 var(--space-3); font-size: 1.0625rem; }

/* =================== The chat: crisp and compact ===================
   Same type sizes (the owner asked for the smaller scale), with the bank design's spacing: 16px
   between turns and a 1.5 line height (24px and 1.6 felt "big and cramped" on a 360px phone,
   owner, 18 Oct 2026). Turns are separated by space rather than lines, and paragraphs run the
   full column. */
.page--chat .thread { gap: var(--space-4); }
.page--chat .thread p, .page--chat .thread li { max-width: none; }
.page--chat .msg--theirs { line-height: 1.5; }
.page--chat .msg--theirs p { margin: 0 0 var(--space-3); }
.page--chat .msg--theirs p:last-child { margin-bottom: 0; }
.page--chat .bubble { padding: 0.625rem var(--space-4); border-radius: var(--radius-panel); line-height: 1.5; }
.page--chat .quick-replies { gap: var(--space-2); margin-top: var(--space-4); }
.page--chat .chip { min-height: 2.5rem; padding: 0 var(--space-4); font-size: 0.875rem; }
.page--chat .reply__title { margin-bottom: var(--space-2); }
.page--chat .reply__note { margin-top: var(--space-3); }
.page--chat .chat-empty__title { margin-bottom: var(--space-3); letter-spacing: -0.03em; }

/* The letter that blows in to be caught (catchLetter in app.js): over everything while it flies,
   then under the letter rig in the character's hands. Moved only by the Web Animations API. */
.paper-flight { position: fixed; left: 0; top: 0; z-index: 60; width: 2.5rem; pointer-events: none; opacity: 0; transform-origin: 50% 50%; }
.paper-flight--held { position: absolute; z-index: 0; }
.paper-flight__sheet { display: block; width: 100%; height: auto; }

/* ---------- Large text on a phone ---------- */
/* em-based, so it follows the browser's own text size: 125% or more on a small phone, 150% or more
   on most. The top bar keeps the letter's name on two lines and leaves the date to the letter
   card; the message box keeps its tools small (on the case page, beside the text). Last in the
   file, so it wins over the rules it changes. */
@media (max-width: 19em) {
  .page--chat .appbar__title { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .page--chat .appbar__sub { display: none; }
  .page--chat .appbar__pill { padding-inline: var(--space-2); }
  /* The round buttons keep a fixed 44px, so the letter's name has the room. */
  .page--chat .appbar__button { width: 44px; height: 44px; }
  .page--chat .appbar__button .icon { width: 24px; height: 24px; }
  .page--chat .composer__box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 2px; }
  .page--chat .composer__attachment, .page--chat .upload-progress { flex-basis: 100%; }
  .page--chat .composer__text { flex: 1 1 100%; min-width: 0; }
  .page--chat .composer--case .composer__text { flex-basis: 5em; }
  .page--chat .composer__bar { flex: 1 1 100%; gap: 2px; }
  .page--chat .composer--case .composer__bar { flex: none; }
  .page--chat .composer__tool, .page--chat .btn--send { width: 36px; height: 36px; }
  .page--chat .composer__tool .icon, .page--chat .btn--send .icon { width: 18px; height: 18px; }
  /* "+" offers the camera on phones too, so its shortcut can go. */
  .page--chat .dropzone__camera { display: none; }
  /* Who the message goes to stays for screen readers; the box's own text says "Write a message". */
  .page--chat .composer__to { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ---------- Your letters: home once signed in (owner, 16 Oct 2026) ---------- */
/* What needs you first, the most urgent with the one red button, then every letter as the top of
   its photo: a list on a phone, a grid on a wider screen. One letter gets one large card. The bar
   is solid here: nothing scrolls under it but the page. */
.page--letters .appbar { background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
.page--letters .appbar::before, .page--letters .appbar::after { content: none; }
.letters { width: 100%; padding-block: var(--space-5) var(--space-8); }
.letters__title { margin: 0 0 var(--space-5); font-size: var(--text-h1); }
.letters__group { margin: var(--space-7) 0 var(--space-4); font-size: var(--text-lead); }
.letters__another { margin: var(--space-5) 0 0; }
.letters__another a { font-weight: var(--weight-bold); }
.letters__others { display: grid; gap: var(--space-2); max-width: none; margin: 0; padding: 0; list-style: none; }
.letters__others li { margin: 0; }

.needs { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-panel); }
.needs__title { margin: 0; padding: var(--space-4) var(--space-4) 0; color: var(--color-you); font-size: var(--text-small); font-weight: var(--weight-heavy); letter-spacing: 0; }
.needs__list { max-width: none; margin: 0; padding: 0; list-style: none; }
.needs__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center; margin: 0; padding: var(--space-4); }
.needs__row + .needs__row { border-top: var(--border-width) solid var(--color-border); }
.needs__text p { margin: 0; max-width: none; }
.needs__name { font-weight: var(--weight-bold); }
.needs__what { color: var(--color-text-secondary); }
.needs__row .btn { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .needs__row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .needs__row .btn { grid-column: auto; }
}

.letters__grid { display: grid; gap: var(--space-4); max-width: none; margin: 0; padding: 0; list-style: none; }
.letters__grid li { margin: 0; }
.letter { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); align-items: center; color: var(--color-text); text-decoration: none; }
.letter:visited { color: var(--color-text); }
.letter__body { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.letter__name { max-width: 100%; overflow: hidden; font-weight: var(--weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.letter__kind, .letter__when { color: var(--color-text-secondary); font-size: var(--text-small); }
.letter__when--you { color: var(--color-deadline); }
.letter--done .letter-thumb { opacity: 0.72; }
.letter--new { grid-template-columns: minmax(0, 1fr); }
@media (hover: hover) {
  .letter:hover .letter__name { text-decoration: underline; text-underline-offset: 0.18em; }
  .letter:hover .letter-thumb { outline: 1.5px solid var(--color-border-control); outline-offset: 2px; }
}
@media (min-width: 640px) {
  .letters__grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--space-6) var(--space-5); }
  .letter { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-3); }
}

.letter-status { display: inline-block; margin-bottom: var(--space-1); padding: 2px var(--space-2); border-radius: 6px; font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1.35; }
.letter-status--you { background: var(--color-you-fill); color: var(--color-you); }
.letter-status--them { background: var(--color-them-fill); color: var(--color-them); }
.letter-status--done { background: var(--color-done-fill); color: var(--color-done); }
.letter-status--neutral { background: var(--color-fill); color: var(--color-text-secondary); }

/* The thumbnail: the top of the photo they sent, or plain paper with the sender's name */
.letter-thumb { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-panel); background: var(--color-fill); object-fit: cover; object-position: top; }
.letter-thumb--paper { position: relative; overflow: hidden; padding: 14% 12%; background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-paper-line); color: var(--color-paper-ink); }
.letter-thumb__name { display: -webkit-box; overflow: hidden; font-size: var(--text-small); font-weight: var(--weight-heavy); line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: break-word; }
.letter-thumb__lines { display: block; width: 80%; height: 4px; margin-top: 18%; border-radius: 2px; background: var(--color-paper-line); box-shadow: 0 10px 0 var(--color-paper-line), 0 20px 0 var(--color-paper-line), 0 30px 0 var(--color-paper-line); }
/* A small tile has no room for the name (the text beside it says it): a letterhead mark instead. */
.needs__row .letter-thumb__name { display: none; }
.needs__row .letter-thumb--paper::before { content: ""; display: block; width: 60%; height: 5px; margin-bottom: 22%; border-radius: 2px; background: var(--color-paper-ink); }
.needs__row .letter-thumb__lines { margin-top: 0; box-shadow: 0 8px 0 var(--color-paper-line), 0 16px 0 var(--color-paper-line); }
@media (max-width: 639px) {
  .letter .letter-thumb__name { display: none; }
  .letter .letter-thumb--paper::before { content: ""; display: block; width: 60%; height: 5px; margin-bottom: 22%; border-radius: 2px; background: var(--color-paper-ink); }
  .letter .letter-thumb__lines { margin-top: 0; box-shadow: 0 8px 0 var(--color-paper-line), 0 16px 0 var(--color-paper-line), 0 24px 0 var(--color-paper-line); }
}
.letter-thumb--new { display: flex; align-items: center; justify-content: center; gap: var(--space-2); aspect-ratio: auto; min-height: 3.5rem; background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-border-control); color: var(--color-text); font-weight: var(--weight-bold); text-align: center; }
.letter-thumb--new .icon { width: 1.5rem; height: 1.5rem; }
@media (min-width: 640px) {
  .letter-thumb--new { flex-direction: column; aspect-ratio: 4 / 5; }
  .letter-thumb--new .icon { width: 1.75rem; height: 1.75rem; }
}

/* One letter: one large card, its photo and its next step */
.letter-feature { display: grid; gap: var(--space-5); align-items: start; padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-feature); background: var(--color-panel); }
.letter-feature__photo { display: block; width: min(11rem, 55%); }
.letter-feature__body { display: grid; gap: var(--space-2); justify-items: start; min-width: 0; }
.letter-feature__body p { margin: 0; }
.letter-feature__title { margin: 0; font-size: var(--text-h2); }
.letter-feature__kind { color: var(--color-text-secondary); }
.letter-feature__summary { font-size: var(--text-lead); }
.letter-feature .btn { margin-top: var(--space-3); }
@media (min-width: 640px) {
  .letter-feature { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); }
  .letter-feature__photo { width: 100%; }
}

/* ---------- The bank look (owner, 18 Oct 2026) ----------
   A banking app's calm: the conversation, your letters and your case sit on a grey ground with
   white cards and no outlines, and your own messages are ink. Pages to read and the one-question
   steps stay white. The two fades above start from whichever ground the page has. */
.page--chat:not(.page--doc):not(.page--step) { --chat-ground: var(--color-page); background: var(--chat-ground); }
.page--chat:not(.page--doc):not(.page--step) .card { border-color: transparent; }
.page--chat:not(.page--doc):not(.page--step) .composer__box { background: var(--color-panel); }
.page--chat .msg--mine .bubble { background: var(--color-text); color: var(--color-page); }
.page--chat .msg--mine .file-chip__size { color: inherit; }

/* The letter card opens with the money, as a bank shows a balance: the amount that matters now,
   when it changes, and the days left in the one red there is. The days left sit beside the
   amount and the line runs the full width under both, so it doesn't break on a 360px phone. */
.money { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-1) 0 var(--space-2); }
.money > * { margin: 0; }
.money__amount { grid-column: 1; grid-row: 1; font-size: 3rem; line-height: 1; font-weight: var(--weight-heavy); letter-spacing: -0.035em; }
.money__line { grid-column: 1 / -1; grid-row: 2; font-size: var(--text-small); color: var(--color-text-secondary); }
.money__left {
  grid-column: 2; grid-row: 1; display: inline-flex; align-items: center;
  min-height: 1.875rem; padding: 0 var(--space-2); border-radius: var(--radius-small);
  background: var(--color-deadline-fill); color: var(--color-deadline); font-size: var(--text-small); font-weight: var(--weight-heavy); white-space: nowrap;
}
/* Whether it looks genuine: a tinted box, green when the letter names its appeals service. */
.page--chat .card--letter .genuine { padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-done-fill); }
.page--chat .card--letter .genuine--unsure { background: var(--color-fill); }
/* A card's answers: equal outlined buttons, side by side while their words fit on one line each
   (they do on a 360px phone), otherwise one above the other. Never a word broken inside one. */
.page--chat .card .quick-replies { display: flex; flex-wrap: wrap; }
.page--chat .card .quick-replies > * { flex: 1 1 0; min-width: fit-content; }
.page--chat .card .quick-replies form { display: grid; }
.page--chat .card .quick-replies .chip { justify-content: center; min-height: 2.875rem; padding-inline: var(--space-3); text-align: center; }
/* The options: three white cards of their own on the grey, each price large. */
.page--chat:not(.page--doc):not(.page--step) .card--options { gap: var(--space-3); padding: 0; background: none; }
.page--chat:not(.page--doc):not(.page--step) .card--options .option { padding: var(--space-4); border: 0; border-radius: var(--radius-panel); background: var(--color-panel); }
.page--chat:not(.page--doc):not(.page--step) .card--options > :not(.option) { padding-inline: var(--space-1); }
.option__price { font-size: 1.5rem; font-weight: var(--weight-heavy); letter-spacing: -0.02em; }
/* The assistant's replies carry the mascot's face, still, beside the words. */
.page--chat .msg--theirs:has(> .msg__face) { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.page--chat .msg--theirs > :not(.msg__face) { grid-column: 2; }
.msg__face { grid-column: 1; grid-row: 1 / span 20; width: 1.875rem; height: auto; margin-top: 2px; }