/* Phone-first prototype on Carnet (DESIGN.md): white page (black in dark), flat grey groups,
   ink selection, green only for the one main action, Bricolage Grotesque, six text styles.
   Contrast checked in both schemes (design council a11y pass, 2026-11-04). */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('./bricolage-grotesque.woff') format('woff');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface: #f2f2f2;
  --ink: #111111;
  --ink2: #5c5c5c;
  --ink3: #a0a0a0;
  --rule: #e6e6e6;
  --forest: #0a3d1f;
  --action: #0a3d1f;
  --action-press: #072b16;
  --danger: #b42318;
  --danger-tint: #feeceb;
  --amber: #7a4f00;
  --on-action: #ffffff;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --pad: 20px;
  --thumb-h: 76px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --ink: #ffffff;
    --ink2: #a3a3a3;
    --ink3: #636366;
    --rule: #2c2c2e;
    --forest: #7bd69f;
    --action: #1e6b3f;
    --action-press: #185a35;
    --danger: #ff8a80;
    --danger-tint: #3a1614;
    --amber: #f2c063;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  /* Focused rows never hide under the bars. */
  scroll-padding-top: calc(var(--safe-t) + 80px);
  scroll-padding-bottom: calc(var(--bar-h) + var(--thumb-h) + var(--safe-b) + 24px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
button,
a,
label,
summary {
  touch-action: manipulation;
}
button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
[tabindex='-1']:focus {
  outline: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
h2 {
  margin: 0;
}

/* ---------- Type: the six styles ---------- */
.display {
  font-size: 44px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.heading {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.title {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.lead {
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink2);
  margin: 0;
  text-wrap: pretty;
}
.body {
  font-size: 17px;
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.strong {
  font-weight: 600;
}
.caption {
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink2);
  margin: 0;
  font-weight: 400;
}
.num {
  font-variant-numeric: tabular-nums;
}

/* ---------- Frame ---------- */
.screen {
  min-height: 100dvh;
  padding: calc(var(--safe-t) + 12px) calc(var(--pad) + env(safe-area-inset-right, 0px)) 32px
    calc(var(--pad) + env(safe-area-inset-left, 0px));
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 24px;
}
.screen.with-bar {
  padding-bottom: calc(var(--bar-h) + var(--safe-b) + 32px);
}
.screen.no-bar {
  padding-bottom: calc(var(--safe-b) + 32px);
}
.screen.has-thumb.no-bar {
  padding-bottom: calc(var(--safe-b) + 200px);
}
.screen.has-thumb.with-bar {
  padding-bottom: calc(var(--bar-h) + var(--safe-b) + var(--thumb-h) + 32px);
}
.enter {
  animation: enter 240ms var(--ease-out);
}
.enter-back {
  animation: enter-back 240ms var(--ease-out);
}
@keyframes enter {
  from {
    opacity: 0.3;
    transform: translateX(24px);
  }
}
@keyframes enter-back {
  from {
    opacity: 0.3;
    transform: translateX(-24px);
  }
}
.fade {
  animation: fade 120ms linear;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}

/* Same-document View Transitions (Safari 18+): old screen slides out as the new one slides in;
   the bars never move. */
.bar {
  view-transition-name: bar;
}
::view-transition-group(root) {
  animation-duration: 240ms;
  animation-timing-function: var(--ease-out);
}
[data-dir='forward']::view-transition-old(root) {
  animation: vt-out-l 240ms var(--ease-out);
}
[data-dir='forward']::view-transition-new(root) {
  animation: vt-in-r 240ms var(--ease-out);
}
[data-dir='back']::view-transition-old(root) {
  animation: vt-out-r 240ms var(--ease-out);
}
[data-dir='back']::view-transition-new(root) {
  animation: vt-in-l 240ms var(--ease-out);
}
@keyframes vt-in-r {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
@keyframes vt-in-l {
  from {
    transform: translateX(-24px);
    opacity: 0;
  }
}
@keyframes vt-out-l {
  to {
    transform: translateX(-12px);
    opacity: 0;
  }
}
@keyframes vt-out-r {
  to {
    transform: translateX(12px);
    opacity: 0;
  }
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin-left: -8px;
  padding: 0 8px;
  color: var(--ink);
  border-radius: 10px;
}
.back svg {
  width: 22px;
  height: 22px;
}
.head {
  display: grid;
  gap: 8px;
}
.fresh,
.last {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-size: 14px;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.fresh svg,
.last svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.last {
  color: var(--ink);
  font-size: 17px;
  animation: fade 200ms var(--ease-out);
}
.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  padding: 0 4px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-weight: 600;
}

/* ---------- Bottom tab bar ---------- */
.bar {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 0 env(safe-area-inset-right, 0px) var(--safe-b) env(safe-area-inset-left, 0px);
  background: var(--bg);
  border-top: 1px solid var(--rule);
}
.bar button {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: var(--bar-h);
  padding: 6px 2px;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.1;
}
.bar button span:not(.badge) {
  text-align: center;
  overflow-wrap: anywhere;
}
.bar button[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}
.bar button:active svg {
  opacity: 0.55;
}
.bar svg {
  width: 24px;
  height: 24px;
}
.badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  min-width: 20px;
  min-height: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.badge.urgent {
  background: var(--danger);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .badge.urgent {
    color: #000;
  }
}

/* ---------- Thumb bar: the decision, within reach ---------- */
.thumb {
  position: fixed;
  z-index: 15;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 8px;
  padding: 12px calc(var(--pad) + env(safe-area-inset-right, 0px)) calc(var(--safe-b) + 12px)
    calc(var(--pad) + env(safe-area-inset-left, 0px));
  background: var(--bg);
  border-top: 1px solid var(--rule);
}
.thumb > * {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.with-bar .thumb {
  bottom: calc(var(--bar-h) + var(--safe-b));
  padding-bottom: 12px;
}
.thumb .btn-text {
  justify-content: center;
}

/* ---------- Rows ---------- */
.rows {
  list-style: none;
  margin: 0 calc(-1 * var(--pad));
  padding: 0;
}
.rows li {
  overflow: hidden;
}
.row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 16px;
  gap: 4px 12px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 12px var(--pad);
  text-align: left;
  border-top: 1px solid var(--rule);
  transition: background-color 120ms ease;
}
.rows li:last-child .row {
  border-bottom: 1px solid var(--rule);
}
/* Highlight waits a beat, so a scroll that starts on a row doesn't flash it. */
.row:active {
  background: var(--surface);
  transition: background-color 0s 90ms;
}
.row.static {
  cursor: default;
}
.row.static:active {
  background: none;
}
.row .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.row .dot.danger {
  background: var(--danger);
}
/* Amber is a ring, not a second filled dot: the two read apart without colour. */
.row .dot.warn {
  box-shadow: inset 0 0 0 2px var(--amber);
}
.row .what {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.row .line1 {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.row .line2 {
  font-size: 14px;
  color: var(--ink2);
  overflow-wrap: anywhere;
}
.row .when {
  font-size: 14px;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: start;
  padding-top: 2px;
}
.row .when.late {
  color: var(--danger);
  font-weight: 500;
}
.chev {
  color: var(--ink2);
  width: 16px;
  height: 16px;
  flex: none;
}
.rows.plain .row {
  grid-template-columns: minmax(0, 1fr) auto 16px;
  min-height: 60px;
}
.rows.plain .row.static {
  grid-template-columns: minmax(0, 1fr) auto;
}
.amount {
  font-weight: 500;
  white-space: nowrap;
}
.amount.muted {
  color: var(--ink2);
  font-weight: 400;
}
.rows li.leaving {
  opacity: 0;
  transition:
    opacity 160ms ease,
    height 260ms var(--ease-out) 60ms;
}
.rows li.leaving .row {
  border-color: transparent;
}
.rows li.returning {
  transition:
    height 260ms var(--ease-out),
    opacity 200ms ease 60ms;
}

.section-title {
  font-size: 14px;
  color: var(--ink2);
  margin: 4px 0 10px;
  font-weight: 500;
}
section > .rows {
  margin-top: 0;
}

/* ---------- Groups, buttons, fields ---------- */
.group {
  background: var(--surface);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.stack {
  display: grid;
  gap: 10px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition:
    transform 110ms var(--ease-out),
    background-color 120ms ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.btn-main {
  background: var(--action);
  color: var(--on-action);
}
.btn-main:active {
  background: var(--action-press);
}
/* Disabled reads as grey, not faded green: it still carries the instruction. */
.btn-main[disabled] {
  background: var(--surface);
  color: var(--ink2);
  transform: none;
  cursor: not-allowed;
}
.btn-second {
  background: var(--surface);
  color: var(--ink);
}
.group .btn-second {
  background: var(--bg);
}
/* Danger as red text on its light fill: loud enough, never louder than the call. */
.btn-danger-soft {
  background: var(--danger-tint);
  color: var(--danger);
}
.btn-text {
  min-height: 44px;
  padding: 0;
  color: var(--ink2);
  font-weight: 500;
  justify-content: flex-start;
}
.btn-block {
  width: 100%;
}
.actions {
  display: grid;
  gap: 10px;
}
.actions.two {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.field {
  display: grid;
  gap: 6px;
}
.field label {
  font-size: 14px;
  color: var(--ink2);
  font-weight: 500;
}
.field input,
.field textarea {
  font: inherit;
  font-size: 17px;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.field textarea {
  min-height: 96px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink2);
  opacity: 1;
}

/* What the other person will receive, shown before the tap. */
.sends {
  display: grid;
  gap: 4px;
  padding-left: 14px;
  box-shadow: inset 2px 0 0 var(--rule);
}

/* Choice rows: native radios, grey group, ink check. */
.choices {
  display: grid;
  gap: 8px;
}
.legend {
  margin-bottom: 4px;
  padding: 0;
}
.choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: transform 110ms var(--ease-out);
}
.choice:active {
  transform: scale(0.97);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.choice .ring {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ink2);
  display: grid;
  place-items: center;
  transition:
    background-color 120ms ease,
    box-shadow 120ms ease;
}
.choice:has(input:checked) .ring {
  background: var(--ink);
  box-shadow: none;
  color: var(--bg);
}
.choice .ring svg {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 120ms ease,
    transform 160ms var(--ease-out);
}
.choice:has(input:checked) .ring svg {
  opacity: 1;
  transform: scale(1);
}
.choice .sub {
  display: block;
  font-size: 14px;
  color: var(--ink2);
}

/* One-tap outcomes: grey rows that act at once. */
.taps {
  display: grid;
  gap: 8px;
}
.tap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--surface);
  font-weight: 500;
  text-align: left;
  transition: transform 110ms var(--ease-out);
}
.tap:active {
  transform: scale(0.97);
}
.tap svg {
  width: 18px;
  height: 18px;
  color: var(--ink2);
}

/* The person, with the two ways to reach them; the name opens the file. */
.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.link-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -6px 0;
  font-weight: 600;
  text-align: left;
}
.reach {
  display: flex;
  gap: 8px;
}
.icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--bg);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: transform 110ms var(--ease-out);
}
.icon-btn.plain {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
}
.icon-btn:active {
  transform: scale(0.97);
}
.icon-btn svg {
  width: 22px;
  height: 22px;
}

.facts {
  display: grid;
  gap: 10px;
  margin: 0;
}
.facts div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 12px;
}
.facts dt {
  color: var(--ink2);
  font-size: 14px;
  padding-top: 2px;
}
.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.facts .link {
  margin: -8px 0 -12px;
  padding: 0;
}

details.fold {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
details.fold + details.fold {
  border-top: 0;
}
details.fold > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  font-weight: 500;
  cursor: pointer;
}
details.fold > summary::-webkit-details-marker {
  display: none;
}
details.fold > summary svg {
  width: 18px;
  height: 18px;
  color: var(--ink2);
  transition: transform 200ms var(--ease-out);
}
details.fold[open] > summary svg {
  transform: rotate(90deg);
}
details.fold > .fold-body {
  padding: 0 0 16px;
  display: grid;
  gap: 10px;
}

.notice {
  display: grid;
  gap: 6px;
  border-radius: 16px;
  padding: 16px;
  background: var(--surface);
}
.notice.danger {
  background: var(--danger-tint);
  color: var(--danger);
}
.notice.danger .body {
  color: var(--ink);
}

.sos-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--danger);
  font-weight: 600;
}
.sos-mark .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
}

/* WhatsApp conversation: plain lines, not bubbles. */
.convo {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.convo li {
  display: grid;
  gap: 2px;
}
.convo .who {
  font-size: 14px;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.convo .office {
  padding-left: 16px;
}

/* Search */
.search {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: calc(-1 * (var(--safe-t) + 12px)) calc(-1 * var(--pad)) 0;
  padding: calc(var(--safe-t) + 12px) var(--pad) 12px;
  background: var(--bg);
}
.search-box {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--surface);
}
.search-box svg {
  width: 20px;
  height: 20px;
  color: var(--ink2);
}
.search-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  height: 52px;
}
.search-box input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
.search-box input:focus {
  outline: none;
}
.search-box:focus-within {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.search-box .clear {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  display: grid;
  place-items: center;
  color: var(--ink2);
}
.search-box .clear[hidden] {
  display: none;
}
mark {
  background: none;
  color: inherit;
  font-weight: 600;
}

/* Switch: a native checkbox; the whole row is the target. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  cursor: pointer;
}
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: 16px;
  background: var(--ink2);
  flex: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 200ms var(--ease-out);
}
.switch:checked {
  background: var(--action);
}
@media (prefers-color-scheme: dark) {
  .switch:checked {
    background: var(--forest);
  }
  .switch:checked::after {
    background: #000;
  }
}
.switch:checked::after {
  transform: translateX(20px);
}

/* Segmented control (buttons with aria-pressed) */
.segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface);
}
.segment button {
  min-height: 44px;
  border-radius: 8px;
  font-weight: 500;
  color: var(--ink2);
  padding: 4px 8px;
}
.segment button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--bg);
}

/* Terrain: a state is a word and a dot, never a colour alone. */
.state-word {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.state-word .sdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink2);
}
.state-word.ok .sdot {
  background: var(--ink2);
  box-shadow: none;
}
.state-word.danger {
  color: var(--danger);
}
.state-word.danger .sdot {
  background: var(--danger);
  box-shadow: none;
}
.state-word.warn {
  color: var(--amber);
}
.state-word.warn .sdot {
  box-shadow: inset 0 0 0 2px var(--amber);
}

/* Creator figures */
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.trio div {
  display: grid;
  gap: 2px;
}
.trio b {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.code-big {
  font-size: 44px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
}
.story {
  width: 168px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  background: #000;
  color: #fff;
  display: grid;
  align-content: space-between;
  padding: 18px 14px;
}
.story .brand {
  font-size: 18px;
}
.story .brand span {
  color: #7bd69f;
}
.story-code {
  font-size: 34px;
  line-height: 1;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.story-line {
  font-size: 14px;
  line-height: 1.3;
}

/* Sign-up */
.progress {
  height: 4px;
  border-radius: 2px;
  background: var(--surface);
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width 240ms var(--ease-out);
}
.accord {
  max-height: 40dvh;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
}

/* Skeleton */
.skel {
  display: block;
  border-radius: 8px;
  background: var(--surface);
}

/* Toast: prototype notes only. It sits at the top, clear of both bottom bars. */
.toast {
  position: fixed;
  z-index: 30;
  left: 12px;
  right: 12px;
  top: calc(var(--safe-t) + 8px);
  max-width: 536px;
  margin: 0 auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 200ms var(--ease-out);
}
.toast.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Sheet: rare actions behind « ⋯ » */
.sheet {
  border: 0;
  padding: 0;
  margin: auto 0 0;
  width: 100%;
  max-width: none;
  background: transparent;
  color: var(--ink);
}
.sheet::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.sheet-body {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 4px;
  padding: 12px var(--pad) calc(var(--safe-b) + 16px);
  border-radius: 16px 16px 0 0;
  background: var(--bg);
}
.sheet-row {
  min-height: 56px;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.sheet-body .btn {
  margin-top: 12px;
}
.sheet[open] .sheet-body {
  animation: sheet-in 260ms var(--ease-out);
}
@keyframes sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0.4;
  }
}

/* Start */
.start-choice {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 20px;
  border-radius: 16px;
  background: var(--surface);
  text-align: left;
  transition: transform 110ms var(--ease-out);
}
.start-choice:active {
  transform: scale(0.97);
}
.brand {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.brand span {
  color: var(--forest);
}

/* The bars step aside while the keyboard is up. */
body.typing .bar,
body.typing .thumb {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .enter,
  .enter-back,
  .fade,
  .last,
  .sheet[open] .sheet-body {
    animation: fade 120ms linear;
  }
  .btn:active,
  .choice:active,
  .tap:active,
  .start-choice:active,
  .icon-btn:active {
    transform: none;
  }
  .toast {
    transform: none;
  }
  .switch::after,
  .choice .ring svg,
  details.fold > summary svg,
  .progress span {
    transition: none;
  }
  .choice .ring svg {
    transform: none;
  }
  .rows li.leaving,
  .rows li.returning {
    transition: opacity 120ms linear;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: fade 120ms linear;
  }
}
.last {
  flex-wrap: nowrap;
  align-items: baseline;
}
.last svg {
  align-self: center;
}
.last span {
  flex: 0 1 auto;
  min-width: 0;
}
section > .section-title {
  margin-top: 0;
}