/* ============================================================
   Biojrnl: the doors (home page, owner 2026-09-26)
   ------------------------------------------------------------
   The first thing on the home page. The visitor picks the door that
   sounds like them; it swings open, light fills the screen, and the
   room behind it walks them through that part of the app, one tap at
   a time, on look-alikes of the app's own cards (no phone frames).
   The launch offer stays pinned on top throughout.

   Loads after biojrnl.css and uses its mood tokens, so Tide, Blush and
   Dusk all work. The door colours are fixed; a door is a door.
   Every string on an app look-alike is the app's own (checked in
   lib/ on 2026-09-26); sample people and dates are made up.
   ============================================================ */

/* ── The offer: pinned, ONE size, nothing moves ───────────── */
/* It used to shrink once the page scrolled; the page then moved, the scroll
   was pulled back over the line, and the bar flipped size every frame (the
   owner's "jittery" bar, measured 2026-09-26). Now the bar is the same size
   whatever the scroll, and on a phone the headline, the count, the clock and
   the button all fit in one short block. */
:root { --ok: #2E6B55; }
html[data-theme='dusk'] { --ok: #8FD0AF; }
.offer { position: sticky; top: 0; }
.nav { top: var(--offer-h, 0px); }
/* Kept from the first paint (js/offer-boot.js) until the server answers:
   the space is there, the words are not, and nothing can be tapped. */
html.offer-pending .offer[hidden] { display: block; pointer-events: none; }
html.offer-pending .offer[hidden] .offer-in { visibility: hidden; opacity: 0; }
.offer-in { transition: opacity .3s var(--ease); }
/* The nav keeps one height too: a padding change on scroll fed the same
   loop on a computer (biojrnl.css). With the offer above it, the notch is
   already cleared. */
html.offer-pending .nav, html.has-offer .nav { padding-top: 12px; padding-bottom: 15px; }

@media (max-width: 980px) {
  .offer { padding: max(9px, env(safe-area-inset-top)) var(--gutter) 9px; }
  .offer-in {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "head head cta" "count clock cta" "ts ts ts" "fine fine fine";
    align-items: center; justify-items: start; text-align: left; gap: 0 8px;
  }
  /* The headline's pieces join the grid: headline on top, count and
     clock on one line under it, the button beside both. */
  .offer-head { display: contents; }
  .offer-head > b { grid-area: head; font-size: 17px; line-height: 1.25; }
  .offer-head > span:not(.offer-count) { display: none; }
  .offer-count { grid-area: count; display: inline; margin: 0; font-size: 12.5px; line-height: 1.4; color: #F2C98A !important; font-weight: 600 !important; white-space: nowrap; }
  .offer-count:not(:empty)::after { content: '·'; margin-left: 7px; color: rgba(242, 201, 138, .7); }
  .offer-clock { grid-area: clock; display: inline-flex; gap: 4px; font-size: 12.5px; line-height: 1.4; white-space: nowrap; }
  .offer-ends { display: none; }
  .oc { display: inline; min-width: 0; padding: 0; border: 0; background: none; border-radius: 0; }
  .offer.is-last-day .oc { background: none; }
  .oc b { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #F4F7F9; }
  .oc i { display: none; }
  .oc b[data-t="d"]::after { content: 'd'; font-weight: 500; opacity: .75; }
  .oc b[data-t="h"]::after { content: 'h'; font-weight: 500; opacity: .75; }
  .oc b[data-t="m"]::after { content: 'm'; font-weight: 500; opacity: .75; }
  .oc b[data-t="s"]::after { content: 's'; font-weight: 500; opacity: .75; }
  .offer-cta { grid-area: cta; display: flex; flex-direction: column; gap: 6px; width: auto; justify-self: end; }
  .offer-btn { flex: none; min-height: 44px; padding: 10px 18px; font-size: 14.5px; }
  .offer-ts { grid-area: ts; justify-self: center; margin-top: 6px; }
  .offer-fine { grid-area: fine; margin-top: 6px; font-size: 11px; line-height: 1.4; opacity: .72; text-align: left; justify-self: stretch; }
  /* Closed: the headline says so, and there is nothing to claim. */
  .offer.is-closed .offer-in { grid-template-areas: "head head head" "fine fine fine"; }
}
@media (max-width: 360px) {
  .offer-head > b { font-size: 15.5px; }
  .offer-btn { padding-inline: 14px; }
}

/* ── The hall ─────────────────────────────────────────────── */
.dh {
  position: relative; z-index: 2;
  padding: clamp(18px, 4vw, 44px) var(--gutter) clamp(34px, 5vw, 60px);
  text-align: center;
}
/* A very soft shadow where the doors end and the section below begins:
   a hint of an edge, never a line. */
.dh::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -14px; height: 28px;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, #0F1B22 9%, transparent), transparent);
}
.dh-kicker { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dh-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 420;
  font-size: clamp(31px, 8.8vw, 52px); line-height: 1.05; letter-spacing: -.022em;
  color: var(--ink); text-wrap: balance;
}
.dh-title em { font-style: italic; font-weight: 380; color: var(--accent); }
.dh-sub { margin: 8px auto 0; max-width: 30ch; font-size: 16px; color: var(--ink2); }
.dh-doors {
  margin: 24px auto 0; max-width: 380px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 12px;
}
.dh-door { grid-column: span 2; display: grid; justify-items: center; align-content: start; gap: 9px; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; }
.dh-door:nth-child(4) { grid-column: 2 / span 2; }
.dh-frame {
  position: relative; width: 100%; aspect-ratio: 2 / 3;
  border-radius: 50% 50% 7px 7px / 30% 30% 7px 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 78%, #000), var(--c2));
  box-shadow: 0 2px 4px rgba(15, 27, 34, .12), 0 16px 30px color-mix(in srgb, var(--c2) 30%, transparent);
  perspective: 520px;
  transition: transform .25s var(--ease-out);
}
.dh-inside, .dh-leaf, .dh-portal { border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px; }
.dh-inside {
  position: absolute; inset: 5px 5px 0;
  background: radial-gradient(120% 90% at 50% 70%, #FFFBF2, #FFF3DC 40%, #F6D9A6 100%);
}
.dh-leaf {
  position: absolute; inset: 5px 5px 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .08), transparent 14%, transparent 86%, rgba(0, 0, 0, .1)),
    linear-gradient(165deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 88%, #000));
  transform-origin: 0% 50%;
  transition: transform .5s cubic-bezier(.3, .6, .2, 1), filter .5s var(--ease);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.dh-leaf::before, .dh-leaf::after {
  content: ''; position: absolute; left: 16%; right: 16%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), inset 0 -1px 0 rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
}
.dh-leaf::before { top: 12%; height: 40%; border-radius: 50% 50% 5px 5px / 34% 34% 5px 5px; }
.dh-leaf::after { top: 58%; bottom: 8%; border-radius: 6px; }
.dh-emblem {
  position: absolute; z-index: 1; left: 50%; top: 32%; translate: -50% -50%;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
}
.dh-emblem img { width: 24px; height: 24px; }
.dh-emblem svg { width: 21px; height: 21px; fill: none; stroke: var(--c2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dh-knob {
  position: absolute; z-index: 1; right: 11%; top: 60%;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF1C9, #D9A441 55%, #8A6414);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* A line of light at the gap, breathing door by door: "open me". */
.dh-frame::after {
  content: ''; position: absolute; z-index: 2; right: 5px; top: 22%; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, #FFF3DC, transparent);
  opacity: 0; pointer-events: none;
  animation: dh-gap 4.8s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * .7s + .6s);
}
@keyframes dh-gap { 0%, 70%, 100% { opacity: 0; } 82% { opacity: .95; } }
.dh-label { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink); max-width: 11ch; text-wrap: balance; }
/* Hover only where there is a real pointer: a phone keeps :hover on the last
   thing tapped, which left a door standing ajar after its room closed. */
@media (hover: hover) and (pointer: fine) {
  .dh-door:hover .dh-frame { transform: translateY(-3px); }
  .dh-door:hover .dh-leaf { transform: rotateY(-14deg); }
}
.dh-door:active .dh-frame { transform: scale(.97); }
.dh-door:focus-visible { outline: none; }
.dh-door:focus-visible .dh-frame { outline: 2px solid var(--accent); outline-offset: 4px; }
.dh-door.is-open .dh-leaf { transform: rotateY(-104deg); filter: brightness(.8); }
.dh-door.is-open .dh-frame { transform: none; }
.dh-door.is-open .dh-frame::after { animation: none; opacity: 0; }
.dh.is-leaving .dh-door:not(.is-open) { opacity: .35; transition: opacity .4s var(--ease); }
.dh-hint { margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.dh-hint[hidden] { display: none; }
/* A short phone (iPhone SE): all five doors and their names on the first
   screen, under the offer and the nav. */
@media (max-width: 420px) and (max-height: 720px) {
  .dh { padding-top: 12px; }
  .dh-kicker { margin-bottom: 4px; font-size: 11px; }
  .dh-title { font-size: 30px; }
  .dh-sub { margin-top: 4px; font-size: 15px; }
  .dh-doors { margin-top: 14px; gap: 12px 12px; }
  .dh-frame { aspect-ratio: 3 / 4; }
  .dh-emblem { top: 34%; }
}

/* The doorway's light, scaled past the screen's edges as you walk in. */
.dh-portal {
  position: fixed; z-index: 240; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 70%, #FFFBF2, #FFF3DC 45%, #F6D9A6);
  transform-origin: 50% 55%; opacity: 0;
}
.dh-portal.is-go { opacity: 1; transition: transform .4s cubic-bezier(.55, 0, .35, 1); }
.dh-portal.is-fade { opacity: 0; transition: opacity .4s var(--ease); }

@media (min-width: 760px) {
  .dh-doors { max-width: 900px; grid-template-columns: repeat(5, 1fr); gap: 26px; margin-top: 40px; }
  .dh-door, .dh-door:nth-child(4) { grid-column: auto; }
  .dh-label { font-size: 15px; }
  .dh-emblem { width: 52px; height: 52px; }
  .dh-emblem img { width: 30px; height: 30px; }
  .dh-emblem svg { width: 26px; height: 26px; }
  .dh-knob { width: 12px; height: 12px; }
}

/* ── A room: full screen, under the pinned offer ─────────── */
html.in-room { overflow: hidden; }
.rooms {
  position: fixed; z-index: 230; left: 0; right: 0; bottom: 0; top: var(--offer-h, 0px);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--ambient), var(--bg);
}
.rooms[hidden] { display: none; }
.rm-bar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.rm-back {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px 8px 4px; border-radius: 999px;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--accent-deep); background: none; border: 0; cursor: pointer;
}
.rm-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rm-dots { display: flex; gap: 5px; }
.rm-dots i { width: 7px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 16%, transparent); transition: background .3s var(--ease), width .3s var(--ease); }
.rm-dots i.is-done { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.rm-dots i.is-now { width: 18px; background: var(--accent); }
.rm { max-width: 560px; margin: 0 auto; padding: 18px var(--gutter) 160px; }
.rm[hidden] { display: none; }
.rm-head { text-align: center; }
.rm-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
.rm-title {
  margin-top: 8px; font-family: 'Fraunces', Georgia, serif; font-weight: 420;
  font-size: clamp(30px, 8.4vw, 44px); line-height: 1.05; letter-spacing: -.022em; color: var(--ink);
}
.rm-title em { font-style: italic; font-weight: 380; color: var(--accent); }
.rm-sub { margin: 8px auto 0; max-width: 32ch; font-size: 15.5px; color: var(--ink2); }
.rm-body { margin-top: 22px; display: grid; gap: 16px; }
/* Pieces that arrive as the story moves on. */
.rm-body [hidden] { display: none !important; }
.is-arriving { animation: rm-arrive .55s var(--ease-out) both; }
@keyframes rm-arrive { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* The coach: what to tap next, pinned to the bottom of the room. */
.rm-coach {
  position: fixed; z-index: 235; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  translate: -50% 0; width: min(528px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 16px; border-radius: 18px;
  background: #13232E; color: #E7EEF3;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 30px rgba(15, 27, 34, .28);
}
.rm-coach[hidden] { display: none; }
.rm-coach-text { flex: 1; font-size: 14.5px; line-height: 1.35; }
.rm-coach-text b { color: #F2C98A; font-weight: 700; }
.rm-coach-next {
  flex: none; min-height: 44px; min-width: 64px; padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.rm-coach.is-pop { animation: rm-pop .35s var(--ease-out); }
@keyframes rm-pop { 0% { transform: translateY(6px); opacity: .4; } 100% { transform: none; opacity: 1; } }
.rm-coach.is-nudge { animation: rm-nudge .4s var(--ease); }
@keyframes rm-nudge { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* The thing to tap carries .hi (a marker only); the spotlight below draws it. */

/* ── The spotlight ────────────────────────────────────────────
   One box laid over the thing that matters now. Its huge soft shadow
   washes the rest of the room pale, so the one bright spot is obvious.
   A gold sticker on it says "Tap here"; while something is still
   writing it says "Hold on"; where nothing needs a tap, a short note
   says what the thing is and moves on by itself. It never takes a tap:
   taps fall through to the real control underneath. */
.rm-spot {
  --wash: color-mix(in srgb, var(--bg) 30%, transparent);
  position: absolute; z-index: 4; left: 0; top: 0; width: 0; height: 0;
  border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 200vmax var(--wash);
  transition: top .42s var(--ease-out), left .42s var(--ease-out), width .42s var(--ease-out),
              height .42s var(--ease-out), border-radius .42s var(--ease-out), box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.rm-spot[hidden] { display: none; }
.rm-spot.no-slide { transition: box-shadow .35s var(--ease), opacity .3s var(--ease); }
.rm-spot.is-off { box-shadow: 0 0 0 200vmax transparent; opacity: 0; }
.rm-spot::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2.5px solid #E8A640; }
.rm-spot.is-tap::before, .rm-spot.is-end::before { animation: spot-pulse 1.5s var(--ease) infinite; }
.rm-spot.is-end { --wash: transparent; }
@keyframes spot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 166, 64, .55); }
  50% { box-shadow: 0 0 0 11px rgba(232, 166, 64, 0); }
}
/* While something writes itself, nothing is greyed: they should read it.
   The dashed ring and "Hold on" already sit on what comes next. */
.rm-spot.is-wait { --wash: transparent; }
.rm-spot.is-wait::before { border: 2px dashed color-mix(in srgb, var(--ink) 32%, transparent); }
.rm-spot.is-info::before { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }

/* The sticker. --dx keeps it on screen near an edge; the caret still points home. */
.rm-tag {
  position: absolute; left: 50%; bottom: calc(100% + 13px);
  translate: calc(-50% + var(--dx, 0px)) 0;
  display: inline-flex; align-items: center; gap: 7px; width: max-content;
  padding: 8px 15px 8px 11px; border-radius: 999px; white-space: nowrap;
  background: #F2C98A; color: #1B2A33;
  font-size: 14.5px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(15, 27, 34, .24);
  animation: tag-bob 1.1s var(--ease) infinite;
  pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rm-tag::after {
  content: ''; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%;
  translate: -50% -1px; border: 7px solid transparent; border-top-color: #F2C98A;
}
.rm-tag svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tag-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.rm-tag.is-bounce { animation: tag-shake .45s var(--ease); }
@keyframes tag-shake { 20%, 60% { transform: translateY(-8px) scale(1.06); } 40%, 80% { transform: translateY(0) scale(1); } }
.rm-spot[data-place='below'] .rm-tag { bottom: auto; top: calc(100% + 13px); }
.rm-spot[data-place='below'] .rm-tag::after { top: auto; bottom: 100%; translate: -50% 1px; border-top-color: transparent; border-bottom-color: #F2C98A; }
.rm-spot[data-place='inside'] .rm-tag { bottom: auto; top: 10px; }
.rm-spot[data-place='inside'] .rm-tag::after { display: none; }
.rm-spot.is-wait .rm-tag { background: #1B2A33; color: #fff; animation: none; }
.rm-spot.is-wait .rm-tag::after { border-top-color: #1B2A33; }
.rm-spot.is-wait[data-place='below'] .rm-tag::after { border-top-color: transparent; border-bottom-color: #1B2A33; }
.rm-spot.is-wait .rm-tag svg { display: none; }
.rm-dots3 { display: inline-flex; gap: 3px; margin-left: 1px; }
.rm-dots3 i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dots3 1s infinite; }
.rm-dots3 i:nth-child(2) { animation-delay: .15s; }
.rm-dots3 i:nth-child(3) { animation-delay: .3s; }
@keyframes dots3 { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.rm-spot:not(.is-wait) .rm-dots3 { display: none; }
.rm-spot.is-info .rm-tag { display: none; }

/* The note, for things that need no tap. */
.rm-call {
  position: absolute; left: 50%; bottom: calc(100% + 13px);
  translate: calc(-50% + var(--dx, 0px)) 0;
  width: min(330px, calc(100vw - 28px)); pointer-events: auto;
  padding: 13px 15px 11px; border-radius: 16px; text-align: left;
  background: #13232E; color: #E7EEF3; box-shadow: 0 12px 30px rgba(15, 27, 34, .3);
  animation: rm-arrive .4s var(--ease-out) both;
}
.rm-call::after {
  content: ''; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%;
  translate: -50% -1px; border: 8px solid transparent; border-top-color: #13232E;
}
.rm-spot[data-place='below'] .rm-call { bottom: auto; top: calc(100% + 13px); }
.rm-spot[data-place='below'] .rm-call::after { top: auto; bottom: 100%; translate: -50% 1px; border-top-color: transparent; border-bottom-color: #13232E; }
.rm-spot[data-place='inside'] .rm-call { bottom: auto; top: 10px; }
.rm-spot[data-place='inside'] .rm-call::after { display: none; }
.rm-spot:not(.is-info) .rm-call { display: none; }
.rm-call-text { font-size: 15.5px; line-height: 1.42; }
.rm-call-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rm-call-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.rm-call-bar i { display: block; height: 100%; width: 0; background: #F2C98A; }
.rm-call.is-running .rm-call-bar i { animation: call-bar var(--ms, 4000ms) linear forwards; }
@keyframes call-bar { to { width: 100%; } }
.rm-call-next { flex: none; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #1B2A33; background: #F2C98A; }

/* The app's toast. */
.ap-toast {
  position: fixed; z-index: 236; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 84px);
  translate: -50% 12px; opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 10px 16px; border-radius: 12px; background: #1B2A33; color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(15, 27, 34, .25);
  transition: opacity .25s var(--ease), translate .3s var(--ease-out);
}
.ap-toast.is-on { opacity: 1; translate: -50% 0; }

/* The end of every room. */
.rm-end { margin-top: 18px; text-align: center; }
.rm-end-plan { max-width: 34ch; margin: 0 auto; font-size: 15.5px; color: var(--ink2); }
.rm-end-plan b { color: var(--ink); }
html:not(.has-offer) .rm-end-offer, html.offer-closed .rm-end-offer { display: none; }
.rm-end .store-badges { justify-content: center; margin-top: 18px; }
/* "Try another door": a card with the doors still to open drawn small. */
.rm-another {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 380px; margin: 20px auto 0;
  padding: 14px 16px 14px 16px; border-radius: 20px; cursor: pointer;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: var(--shadow-card);
  transition: transform .15s var(--ease-out);
}
.rm-another:active { transform: scale(.98); }
.rm-another-doors { flex: none; display: flex; align-items: flex-end; padding-right: 6px; }
.rm-mini {
  position: relative; width: 21px; height: 32px; margin-right: -6px;
  border-radius: 50% 50% 3px 3px / 30% 30% 3px 3px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 60%, var(--c2));
  box-shadow: 0 0 0 2px var(--surface), 0 3px 6px rgba(15, 27, 34, .16);
}
.rm-mini::after {
  content: ''; position: absolute; right: 3px; top: 58%; width: 4px; height: 4px; border-radius: 50%;
  background: #E3B458;
}
.rm-another-text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.rm-another-text b { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.rm-another-left { font-size: 13.5px; color: var(--ink2); }
.rm-another-go { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--accent-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* In the hall, a door already opened wears a small tick and stops glowing,
   so the ones still to open stand out. */
.dh-door.is-seen .dh-frame::before {
  content: ''; position: absolute; z-index: 3; top: 7%; right: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #2E6B55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 2.5px var(--bg), 0 2px 6px rgba(15, 27, 34, .2);
}
.dh-door.is-seen .dh-frame::after { animation: none; opacity: 0; }

/* ── App look-alikes (shared) ─────────────────────────────── */
.ap-card {
  background: var(--surface); border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow: var(--shadow-card);
  text-align: left; overflow: hidden;
}
.ap-cap { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); }
.ap-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-deep);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.ap-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ap-pill.no-dot::before { display: none; }
.ap-pill.is-done { background: color-mix(in srgb, #3B7860 12%, var(--surface)); color: var(--ok); border-color: color-mix(in srgb, #3B7860 30%, transparent); }
.ap-pill.is-warm { background: color-mix(in srgb, #966324 12%, var(--surface)); color: #7A4F1C; border-color: color-mix(in srgb, #966324 30%, transparent); }
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: 14px; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(170deg, var(--btn-a, #47799C), var(--btn-b, #2C5470));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 26%, transparent);
}
.ap-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ap-btn--ghost { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); color: var(--accent-deep); box-shadow: none; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.ap-btn--wide { width: 100%; }
.ap-quote {
  position: relative; margin: 4px 0 0; padding: 4px 0 4px 16px;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 16.5px; line-height: 1.45; color: var(--ink);
  border-left: 3px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* A tickable row, the app's checklist style. */
.ap-tick { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 0; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); }
.ap-box {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); background: var(--surface);
  display: grid; place-items: center; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ap-box::after {
  content: ''; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform .22s var(--ease-out);
}
.ap-tick-text { font-size: 15.5px; background: linear-gradient(currentColor, currentColor) 0 55% / 0 1.5px no-repeat; transition: color .2s var(--ease), background-size .3s var(--ease); }
.ap-tick[aria-pressed='true'] .ap-box { background: var(--accent-deep); border-color: var(--accent-deep); }
.ap-tick[aria-pressed='true'] .ap-box::after { transform: rotate(-45deg) scale(1); }
.ap-tick[aria-pressed='true'] .ap-tick-text { color: var(--ink3); background-size: 100% 1.5px; }

/* The PDF the app makes: a sheet of paper. */
.ap-paper {
  background: #FFFFFF; color: #1B2A33; border-radius: 6px; padding: 18px 16px 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 18px 40px rgba(15, 27, 34, .18);
  font-size: 12px; line-height: 1.45; text-align: left;
}
.ap-paper-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 8px; border-bottom: 1.5px solid #1B2A33; }
.ap-paper-head img { height: 16px; width: auto; }
.ap-paper-head b { display: block; margin-top: 4px; font-size: 14px; }
.ap-paper-meta { text-align: right; color: #566F7E; font-size: 10.5px; }
.ap-paper table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ap-paper th, .ap-paper td { text-align: left; vertical-align: top; padding: 5px 4px; border-bottom: 1px solid #DCE3E8; }
.ap-paper th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #566F7E; }
.ap-paper caption { caption-side: top; text-align: left; font-weight: 700; font-size: 12.5px; padding-bottom: 4px; }
.ap-paper h5 { margin-top: 10px; font-size: 12.5px; }
.ap-paper dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 6px; }
.ap-paper dt { color: #566F7E; }
.ap-paper-foot { margin-top: 12px; padding-top: 6px; border-top: 1px solid #DCE3E8; display: flex; justify-content: space-between; gap: 8px; color: #566F7E; font-size: 9.5px; }

/* ── Appointments ─────────────────────────────────────────── */
.ap-appt { display: grid; grid-template-columns: 88px 1fr; }
.ap-appt-date {
  padding: 18px 6px; text-align: center;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  border-right: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  display: grid; align-content: start; justify-items: center; gap: 2px;
}
.ap-appt-date small { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink2); }
.ap-appt-date b { font-family: 'Fraunces', Georgia, serif; font-size: 40px; line-height: 1; font-weight: 600; color: var(--ink); }
.ap-appt-date span { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink2); }
.ap-appt-date em { margin-top: 8px; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.ap-appt-main { padding: 16px 12px 12px 16px; min-width: 0; }
.ap-appt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.ap-appt-type { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; color: var(--accent-deep); }
.ap-appt-title { margin-top: 6px; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.ap-appt-who { margin-top: 3px; font-size: 15px; font-weight: 600; color: var(--accent-deep); }
.ap-appt-where { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--ink2); }
.ap-appt-where > svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-copy { margin-left: auto; flex: none; width: 44px; height: 44px; margin-right: -6px; display: grid; place-items: center; border-radius: 10px; background: none; border: 0; cursor: pointer; color: var(--ink2); }
.ap-copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-followtag { display: inline-flex; margin-top: 6px; }
.ap-appt-foot { grid-column: 1 / -1; padding: 0 16px 16px; }
.ap-well {
  margin-top: 4px; padding: 12px 14px 6px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.ap-well-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.ap-well-top b { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-deep); }
.ap-well-top span { font-size: 12.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.ap-appt .ap-quote { margin-top: 14px; }
.ap-appt-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ap-appt-actions .ap-btn { flex: 1; }
.ap-summary {
  margin-top: 14px; padding: 12px 14px 14px; border-radius: 14px;
  background: color-mix(in srgb, #3B7860 10%, var(--surface));
  border: 1px solid color-mix(in srgb, #3B7860 32%, transparent);
}
.ap-summary-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ok); }
.ap-summary-head svg { width: 16px; height: 16px; fill: currentColor; }
.ap-summary p { margin-top: 6px; min-height: 2.9em; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.ap-journey { padding: 16px; }
.ap-journey-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ap-journey-top > span { display: inline-flex; align-items: center; gap: 10px; }
.ap-journey-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.ap-journey-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--ink2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ap-jrow { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 14px 0 12px; border-top: 1px solid var(--line); }
.ap-jrow:first-of-type { margin-top: 12px; }
.ap-jdate { font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.ap-jtitle { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.ap-jtitle::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--accent)); flex: none; }
.ap-jwho { margin-top: 3px; font-size: 14px; color: var(--ink2); }
.ap-jnote { margin-top: 5px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15px; line-height: 1.4; color: var(--ink2); }

/* ── Journal ─────────────────────────────────────────────── */
.ap-screen-title { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--ink); text-align: left; }
.ap-screen-sub { margin-top: 4px; font-size: 14.5px; color: var(--ink2); text-align: left; }
.ap-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.ap-tile {
  display: grid; justify-items: center; align-content: start; gap: 3px;
  padding: 12px 5px 11px; border-radius: 16px; cursor: pointer;
  background: color-mix(in srgb, var(--c) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  font: inherit; color: var(--ink); text-align: center;
  transition: transform .15s var(--ease-out), opacity .3s var(--ease);
}
.ap-tile:active { transform: scale(.96); }
.ap-tile img { width: 34px; height: 34px; margin-bottom: 4px; }
.ap-tile b { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.ap-tile span { font-size: 11.5px; line-height: 1.25; color: var(--ink2); }
.ap-tile--ask { background: color-mix(in srgb, var(--ink) 3%, var(--surface)); border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.ap-tile--ask i { width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; border: 2.5px solid var(--ink); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 18px; }
.ap-grid.is-picked .ap-tile:not(.is-on) { opacity: .55; }
.ap-catline { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.ap-catline img { width: 30px; height: 30px; }
.ap-catline span { color: var(--ink2); font-weight: 500; }
.ap-subs { margin-top: 12px; display: grid; gap: 8px; }
.ap-sub {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; border-radius: 16px; cursor: pointer;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: 0 1px 2px rgba(15, 27, 34, .04);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-align: left;
  transition: opacity .3s var(--ease);
}
.ap-sub::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--ink)) 60%, var(--surface)); flex: none; }
.ap-sub::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink2); border-top: 2px solid var(--ink2); transform: rotate(45deg); }
.ap-subs.is-picked .ap-sub:not(.is-on) { opacity: .55; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ap-chip {
  padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 45%, transparent); color: var(--ink);
}
.ap-field { margin-top: 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-left: 4px solid var(--c, var(--accent)); text-align: left; }
.ap-field p { min-height: 4.4em; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.ap-field small { display: block; text-align: right; font-size: 12px; color: var(--ink3); }
.ap-sev { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.ap-sev button { padding: 12px 4px; border-radius: 12px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink2); transition: background .2s var(--ease), color .2s var(--ease); }
.ap-sev button[aria-pressed='true'] { background: var(--surface); color: var(--sv, var(--ink)); box-shadow: 0 1px 3px rgba(15, 27, 34, .12); }
.ap-sec-label { margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); text-align: left; }
.ap-sec-label i { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink3); }
.ap-origin {
  padding: 18px; border-radius: 22px; color: #1B2A33; text-align: left;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--c) 35%, transparent);
}
.ap-origin small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.ap-origin h4 { margin-top: 2px; font-family: 'Fraunces', Georgia, serif; font-size: 22px; line-height: 1.15; }
.ap-origin p { margin-top: 10px; padding-left: 12px; border-left: 3px solid rgba(27, 42, 51, .35); font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.45; }
.ap-origin .ap-chips { margin-top: 12px; }
.ap-origin .ap-chip { background: rgba(255, 255, 255, .5); border-color: rgba(27, 42, 51, .18); color: #1B2A33; font-size: 13px; padding: 5px 11px; }
.ap-thread-line { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15.5px; color: var(--ink2); text-align: left; }
.ap-update { padding: 14px 16px; border-radius: 18px; text-align: left; border: 1px solid color-mix(in srgb, var(--st) 35%, transparent); border-left: 4px solid var(--st); background: color-mix(in srgb, var(--st) 8%, var(--surface)); }
.ap-update-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-update-top b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.ap-update-top span { font-size: 14px; color: var(--ink2); font-weight: 600; }
.ap-update .ap-pill { background: color-mix(in srgb, var(--st) 14%, var(--surface)); border-color: color-mix(in srgb, var(--st) 40%, transparent); color: var(--ink); }
.ap-update p { margin-top: 8px; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--st) 55%, transparent); font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.45; color: var(--ink); min-height: 1.45em; }

/* ── Care ─────────────────────────────────────────────────── */
.ap-who { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); font-size: 15px; font-weight: 700; color: var(--accent-deep); text-align: left; }
.ap-alert { padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1.5px solid color-mix(in srgb, #B04A3F 40%, transparent); text-align: left; }
.ap-alert-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ap-alert-head svg { width: 18px; height: 18px; fill: none; stroke: #B04A3F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-allergy { display: inline-flex; align-items: center; gap: 8px; margin: 10px 8px 0 0; padding: 7px 12px; border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--sv) 18%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--sv) 55%, transparent); }
.ap-allergy::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }
.ap-allergy i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; color: #fff; background: var(--sv); }
.ap-conds { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.ap-conds + p { margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--ink); }
.ap-note { padding: 14px 16px; border-radius: 18px; text-align: left; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.ap-note-head { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.ap-for { margin-top: 10px; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; color: var(--ink2); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.ap-for b { color: var(--ink); }
.ap-note > p { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.ap-note small { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-style: italic; font-size: 13px; color: var(--ink3); }
.ap-note-label { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.ap-reply { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #3B7860 10%, var(--surface)); border: 1px solid color-mix(in srgb, #3B7860 30%, transparent); }
.ap-reply b { display: block; font-size: 15px; color: var(--ink); }
.ap-reply span { font-size: 13px; color: var(--ink3); }
.ap-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ap-quick button { padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, #3B7860 35%, transparent); background: color-mix(in srgb, #3B7860 8%, var(--surface)); cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ap-form { padding: 16px; }
.ap-form-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ap-form h4 { margin-top: 4px; font-family: 'Fraunces', Georgia, serif; font-size: 23px; line-height: 1.15; color: var(--ink); }
.ap-form > p { margin-top: 4px; font-size: 14.5px; color: var(--ink2); }
.ap-input { margin-top: 10px; padding: 11px 14px; border-radius: 12px; font-size: 15px; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.ap-input small { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink3); }
.ap-rows { margin-top: 6px; }
.ap-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); text-align: left; }
.ap-row:first-child { border-top: 0; }
.ap-row-main { flex: 1; min-width: 0; }
.ap-row-main b { display: block; font-size: 15px; color: var(--ink); }
.ap-row-main span { display: block; font-size: 13px; color: var(--ink2); }
.ap-seg3 { flex: none; display: flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.ap-seg3 button { min-height: 36px; padding: 6px 11px; border-radius: 999px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink2); }
.ap-seg3 button[aria-pressed='true'] { background: var(--accent-deep); color: #fff; }
.ap-seg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ap-seg button { min-height: 40px; padding: 8px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: var(--surface); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink2); }
.ap-seg button[aria-pressed='true'] { background: var(--accent-deep); color: #fff; border-color: transparent; }
.ap-fine { margin-top: 10px; font-size: 13px; color: var(--ink3); }
.ap-audit-head h4 { margin-top: 2px; font-family: 'Fraunces', Georgia, serif; font-size: 23px; color: var(--ink); }
.ap-audit-head p { margin-top: 2px; font-size: 14px; color: var(--ink2); }
.ap-audit-row { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); text-align: left; }
.ap-audit-row:first-of-type { margin-top: 10px; }
.ap-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; line-height: 1; color: #fff; background: var(--avc, var(--accent)); }
.ap-audit-row b { font-size: 15px; color: var(--ink); }
.ap-audit-row div > span { display: block; font-size: 13.5px; color: var(--ink2); }
.ap-audit-row em span { display: inline; font-size: inherit; color: inherit; }
.ap-audit-row em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink3); }
.ap-med { padding: 14px 16px; }
.ap-med-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ap-med-top h4 { font-family: 'Fraunces', Georgia, serif; font-size: 20px; color: var(--ink); }
.ap-med > span { display: block; font-size: 14px; color: var(--ink2); }
.ap-dayline { margin-top: 4px; font-family: 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1.15; color: var(--ink); text-align: left; }
.ap-dayline em { font-style: italic; color: var(--accent); }
.ap-slots { margin-top: 12px; display: grid; gap: 8px; }
.ap-slot {
  display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding: 10px 12px 10px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.ap-slot-when { flex: 1; display: grid; font-size: 13.5px; color: var(--ink2); }
.ap-slot-when b { font-size: 16px; color: var(--ink); }
.ap-slot-btn { flex: none; padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; color: #fff; background: linear-gradient(170deg, var(--btn-a, #47799C), var(--btn-b, #2C5470)); }
.ap-slot-later { font-size: 13.5px; color: var(--ink3); }
.ap-slot-done { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 800; color: var(--ok); }
.ap-slot-done svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ap-slot.is-taken { background: color-mix(in srgb, #3B7860 10%, var(--surface)); border-color: color-mix(in srgb, #3B7860 32%, transparent); }
.ap-slot.is-taken .ap-slot-btn, .ap-slot.is-taken .ap-slot-later { display: none; }
.ap-history .ap-hrow { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; }
.ap-history .ap-hrow + .ap-hrow { border-top: 1px solid var(--line); padding-top: 10px; }
.ap-hmain { flex: 1; display: grid; }
.ap-hmain b { font-size: 15.5px; color: var(--ink); }
.ap-hmain span { font-size: 13px; color: var(--ink3); }
.ap-by { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); white-space: nowrap; }
.ap-by .ap-actor { margin-left: 0; }
.ap-actor.is-sam { background: color-mix(in srgb, #0B766C 14%, var(--surface)); }
.ap-joined { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ap-joined b { display: block; font-size: 16px; color: var(--ink); }
.ap-joined div > span { display: block; font-size: 14px; color: var(--ink2); }
.ap-joined .ap-av { width: 42px; height: 42px; font-size: 15px; color: #fff; }
.ap-dose { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; cursor: pointer; font: inherit; text-align: left; width: 100%; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--surface); color: var(--ink); }
.ap-dose[aria-pressed='true'] { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.ap-dose[aria-pressed='true'] .ap-box { background: #fff; border-color: #fff; }
.ap-dose[aria-pressed='true'] .ap-box::after { border-color: var(--accent-deep); transform: rotate(-45deg) scale(1); }
.ap-dose b { display: block; font-size: 15px; }
.ap-dose span { display: block; font-size: 12.5px; opacity: .85; }
.ap-history { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.ap-hrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--ink2); }
.ap-hrow b { color: var(--ink); }
.ap-actor { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.ap-actor svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ap-list { margin-top: 10px; display: grid; gap: 6px; }
.ap-list li { list-style: none; display: flex; gap: 8px; font-size: 14.5px; color: var(--ink); }
.ap-list li::before { content: ''; flex: none; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ap-list.is-no li { color: var(--ink2); }
.ap-list.is-no li::before { background: color-mix(in srgb, var(--ink) 30%, transparent); }

/* ── Travel ───────────────────────────────────────────────── */
.ap-trip { display: grid; grid-template-columns: 62px 1fr; }
.ap-trip-side { display: grid; place-items: start center; padding-top: 64px; background: color-mix(in srgb, #D26A5A 12%, var(--surface)); border-right: 1px solid color-mix(in srgb, #D26A5A 22%, transparent); }
.ap-trip-side span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid color-mix(in srgb, #B04A3F 60%, transparent); }
.ap-trip-side svg { width: 18px; height: 18px; fill: none; stroke: #B04A3F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-trip-main { padding: 16px; min-width: 0; }
.ap-trip-dest { margin-top: 8px; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--ink); }
.ap-trip-dates { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); }
.ap-trip-dates span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ap-trip-dep { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--accent-deep); }
.ap-trip-main .ap-pill { margin-top: 8px; }
.ap-stamps { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.ap-stamp { padding: 4px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); background: color-mix(in srgb, #3B7860 10%, var(--surface)); border: 1px solid color-mix(in srgb, #3B7860 30%, transparent); }
.ap-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 14.5px; font-weight: 600; color: var(--ink2); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border-top: 1px solid var(--line); }
.ap-strip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap-details { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); cursor: pointer; width: 100%; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: var(--accent-deep); }
.ap-tripx { grid-column: 1 / -1; padding: 12px 16px 16px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.ap-box2 { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 3%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.ap-box2-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ap-box2-top b { font-size: 15px; color: var(--ink); }
.ap-box2 > p { margin-top: 4px; font-size: 14.5px; color: var(--ink2); }
.ap-box2 .ap-tick { padding: 7px 0; }
.ap-call { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: #fff; background: #2E6B55; }
.ap-call svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ap-vacc { padding: 16px; }
.ap-vacc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ap-vacc-top h4 { margin-top: 2px; font-family: 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1.1; color: var(--ink); }
.ap-vacc-top p { margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--ink2); }
.ap-ring { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent-deep) calc(var(--p, 67) * 1%), color-mix(in srgb, var(--ink) 10%, transparent) 0); }
.ap-ring b { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 16px; color: var(--ink); }
.ap-dosecard { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: color-mix(in srgb, var(--ink) 2%, var(--surface)); text-align: left; }
.ap-dosecard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ap-dosecard-top small { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.ap-dosecard b { display: block; margin-top: 8px; font-size: 15.5px; color: var(--ink); }
.ap-dosecard span { display: block; font-size: 14px; color: var(--ink2); }
.ap-dosecard .ap-due { color: var(--accent-deep); font-weight: 700; }
.ap-vacc .ap-btn { margin-top: 14px; }
.ap-pass-top { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--ink2); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ap-pass-body { padding: 14px 16px; display: grid; grid-template-columns: 60px 1fr; gap: 12px; text-align: left; }
.ap-pass-av { width: 60px; height: 68px; border-radius: 10px; display: grid; place-items: center; font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; color: var(--ink2); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.ap-pass-f small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.ap-pass-f b { font-size: 14.5px; color: var(--ink); }
.ap-pass-name { font-family: 'Fraunces', Georgia, serif; font-size: 22px !important; }
.ap-pass-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ap-pass-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ap-pass-mrz { padding: 10px 16px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: .16em; color: var(--ink2); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); word-break: break-all; }
.ap-pass-opts { padding: 6px 16px 14px; }

@media (prefers-reduced-motion: reduce) {
  .dh-frame::after, .caret, .rm-tag, .rm-spot::before, .rm-dots3 i { animation: none !important; }
  .rm-spot { transition: none; }
  .dh-leaf, .dh-frame, .dh-portal.is-go { transition: none; }
  .is-arriving { animation: none; }
}

/* ============================================================
   Below the doors (owner 2026-09-26: Codex ideas 1 to 7).
   Flat surfaces with a thin line, like the doors; no lifted
   shadows; less empty space on a phone.
   ============================================================ */

/* Anchor jumps (Download, Themes) land below the pinned offer and nav,
   not under them. --offer-h only changes when the bar itself does. */
html { scroll-padding-top: calc(var(--offer-h, 0px) + 92px); }

/* 1. The stores, straight under the doors: two side by side on a phone. */
.dh-get { margin: 26px auto 0; max-width: 380px; }
.dh-get-note { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.dh-get .store-badges { flex-wrap: nowrap; gap: 10px; }
.dh-get .store-badge {
  flex: 1 1 0; min-width: 0; justify-content: center;
  min-height: 52px; padding: 7px 12px; gap: 9px; border-radius: 14px;
  box-shadow: none;
}
.dh-get .store-badge svg { width: 22px; height: 22px; }
.dh-get .sb-pre { font-size: 9.5px; letter-spacing: .08em; white-space: nowrap; }
.dh-get .sb-name { font-size: 15.5px; white-space: nowrap; }
@media (max-width: 380px) {
  .dh-get .store-badge { padding-inline: 10px; gap: 8px; }
  .dh-get .store-badge svg { width: 20px; height: 20px; }
  .dh-get .sb-pre { letter-spacing: .04em; }
}
@media (max-width: 340px) {
  .dh-get .store-badges { flex-wrap: wrap; }
  .dh-get .store-badge { flex-basis: 100%; }
}
@media (min-width: 760px) {
  .dh-get { margin-top: 34px; max-width: none; }
  .dh-get .store-badge { flex: none; padding: 8px 20px 8px 16px; }
}

/* The one strip left from the old page, made flat to match. */
.steps { box-shadow: none; background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: var(--line); }

/* 4. Care: one card, four short points, one link. */
.care-one {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 4px 16px 18px;
}
.care-list { display: grid; }
.care-list li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px; line-height: 1.5; color: var(--ink2);
}
.care-list b {
  display: block; margin-bottom: 1px;
  font-family: 'Fraunces', Georgia, serif; font-weight: 460;
  font-size: 17px; line-height: 1.3; letter-spacing: -.012em; color: var(--ink);
}
.cl-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-deep);
}
html[data-theme='dusk'] .cl-icon { color: var(--accent); }
.cl-icon svg { width: 18px; height: 18px; }
.cl-icon img { width: 20px; height: 20px; }
.care-one > .tlink { margin-top: 14px; }
@media (min-width: 760px) {
  .care-one { padding: 8px 26px 24px; }
  .care-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .care-list li { padding: 18px 0; }
}

/* 3. Privacy: one short list. On a phone each point is a row, icon
   on the left, instead of a tall tile. */
@media (max-width: 640px) {
  #privacy .band-tiles { gap: 0; margin-top: 18px; }
  #privacy .band-tile { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; }
  #privacy .band-tile .bt-icon { grid-row: span 2; margin: 3px 0 0; }
  #privacy .band-tile h3 { font-size: 17.5px; margin-bottom: 2px; }
  #privacy .band-tile p { font-size: 14.5px; line-height: 1.5; }
}

/* 6. Plans: a short row each, the price on the right. */
.plan-rows { display: grid; gap: 8px; }
.plan-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 14px 12px 18px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), scale 90ms var(--ease-out);
}
.plan-row:active { scale: .98; }
@media (hover: hover) and (pointer: fine) {
  .plan-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface); }
}
.plan-row--pro {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.pr-text { display: grid; gap: 1px; min-width: 0; }
.pr-name {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 19px; font-weight: 460; letter-spacing: -.02em; line-height: 1.2;
}
.pr-for { font-size: 13.5px; line-height: 1.35; color: var(--ink2); }
.pr-price { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.pr-price b { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 430; letter-spacing: -.02em; line-height: 1; }
.pr-price span { font-size: 12.5px; color: var(--ink3); }
.pr-go { width: 18px; height: 18px; color: var(--ink3); }
.plan-more { margin-top: 18px; }
@media (min-width: 760px) {
  .plan-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .plan-row { min-height: 76px; padding: 14px 18px 14px 22px; }
  .plan-more { margin-top: 24px; }
}

/* 5. The colours, now small buttons in the footer. */
.footer-moods { margin-top: 24px; }
.footer-moods h2 { margin-bottom: 10px; }
.fm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fm {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  font-size: 14px; font-weight: 600; color: var(--ink2);
  transition: border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.fm .mc-dot { width: 14px; height: 14px; flex: none; }
.fm[aria-pressed='true'] {
  color: var(--ink); background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent);
}
@media (hover: hover) and (pointer: fine) { .fm:hover { color: var(--ink); border-color: var(--ink3); } }
.fm:active { transform: scale(.97); }

/* 7. Less empty space on a phone: the sections sit closer together. */
@media (max-width: 640px) {
  #care { padding-block: 40px; }
  #plans { padding-block: 40px 44px; }
  #privacy, #download { padding-block: 46px; }
  #care .sec-head, #privacy .sec-head, #plans .sec-head { gap: 10px; margin-bottom: 18px; }
}