/* Bon Voyage — mockup 27 ("the app, today open") dressed onto the real app.
   Camera on ink, Receipts on paper; every receipt is a ticket on a rail of days that fold; the coin-toss
   review; five send-offs (sendoff.css); the drawer out of the pill; fix a receipt. House rule: lime and
   mint are BACKGROUND FILLS ONLY, never a text colour. Motion is CSS transitions and keyframes only —
   nothing here waits on an animation frame or an intersection. Heights are 100%, never 100dvh. */

@font-face { font-family: 'Montserrat'; src: url('/fonts/montserrat-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/montserrat-var.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --ink: #101E30; --ink-2: #17293D; --ink-3: #22384F; --paper: #F6F1EE; --white: #FFFFFF;
  --muted: #5A6576; --quiet: #4A5566; --hair: #E2DBD5; --hair-2: #C9C1BA; --dash: #8C96A3;
  --lime: #E7FA86; --mint: #9ADDBC; --mint-pale: #E3F4EA; --blue: #5B82B4;
  --rose: #FBE6DF; --rose-line: #C0573F; --rose-ink: #8A2E1B; --faint: #98A0AB;
  --sky: #E6EEF7; --sky-line: #5B82B4; --sky-ink: #2C4A70;
  --display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --body: 'Poppins', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --pill-bottom: calc(14px + max(14px, var(--safe-bottom)));   /* the pill sits above the home indicator */
  --pill-h: 50px;
  --pill-space: calc(var(--pill-bottom) + var(--pill-h) + 30px);   /* what a page keeps clear under the pill, drawer included */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--ink); color: var(--ink); font: 400 15px/1.5 var(--body);
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
}
h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font-size: 16px; }   /* iOS zooms on focus below 16px and never zooms back in standalone */

/* ─────────────────────────── the app shell ─────────────────────────── */
main { position: absolute; inset: 0; background: var(--ink); color: var(--paper); }
main[data-view="history"] { background: var(--paper); color: var(--ink); }
.view { position: absolute; inset: 0; overscroll-behavior: contain; }
.lk { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.lk svg { display: block; flex: none; }
.w2 { font-family: var(--display); font-style: italic; font-weight: 800; letter-spacing: -.02em; line-height: 1; }

/* ─────────────────────────── camera · on ink ─────────────────────────── */
.view-camera { display: flex; flex-direction: column; overflow: hidden; padding: calc(var(--safe-top) + 8px) 0 var(--pill-space); }
.ctop { display: flex; align-items: center; justify-content: space-between; height: 40px; margin: 0 14px 6px 18px; flex: none; z-index: 6; transition: opacity .3s; }
.ctop .w2 { font-size: 17px; color: var(--paper); }
.icbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(246, 241, 238, .08); display: grid; place-items: center; padding: 0; color: var(--paper); }
.icbtn svg { width: 20px; height: 20px; }
.vf {
  position: relative; flex: 1; min-height: 120px; margin: 0 12px; border-radius: 26px; overflow: hidden; background: #2b2724; z-index: 3;
  touch-action: none; transition: transform .5s var(--spring), box-shadow .3s;
}
.vf video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink-2); }
.vf .review { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink-2); z-index: 2; }
.vf .vig { position: absolute; inset: 0; background: radial-gradient(90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .38) 100%); pointer-events: none; z-index: 3; }
.vf .corners { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .25s; z-index: 4; }
.focus { position: absolute; left: 50%; top: 48%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border: 1.5px solid rgba(231, 250, 134, .9); border-radius: 10px; opacity: 0; pointer-events: none; z-index: 4; }
#app[data-mode="camera"][data-view="camera"] .focus { animation: focus 5.5s 1.2s ease-out infinite; }
@keyframes focus { 0% { opacity: 0; transform: scale(1.35); } 6% { opacity: 1; transform: scale(1); } 16% { opacity: 1; } 22%, 100% { opacity: 0; transform: scale(1); } }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; }
.flash.on { animation: flash .32s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.camera-note { position: absolute; left: 16px; right: 16px; top: 16px; margin: 0; z-index: 5; color: var(--paper); background: rgba(16, 30, 48, .82); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }

/* review: the frozen photo becomes a card you can throw */
#app.rv .vf { box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(246, 241, 238, .14); }
#app.rv .vf .corners { opacity: 0; }
#app.rv .vf { cursor: grab; }
.vf.drag { transition: none; cursor: grabbing; }
.vf .stamp-fresh { position: absolute; left: 16px; top: 16px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(16, 30, 48, .72); font: 500 12px var(--body); color: var(--paper); opacity: 0; transform: translateY(-4px); transition: opacity .3s .15s, transform .3s .15s; }
#app.rv .vf .stamp-fresh { opacity: 1; transform: none; }
.hint { position: absolute; left: 50%; bottom: calc(var(--pill-space) + 96px); transform: translate(-50%, 6px); z-index: 8; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 12.5px var(--body); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); white-space: nowrap; }
.hint svg { width: 14px; height: 14px; }
.hint.on { opacity: 1; transform: translate(-50%, 0); }
.hint.on svg { animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
#app.rv .ctop { opacity: .35; pointer-events: none; }
/* taking the right one (18): a banner over the viewfinder says what the new photo replaces */
.repl { position: absolute; left: 24px; right: 24px; top: calc(var(--safe-top) + 62px); z-index: 8; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s, transform .35s var(--ease); }
#app.replacing .repl { opacity: 1; transform: none; pointer-events: auto; }
body.play .repl { opacity: 0 !important; pointer-events: none !important; }
.repl .g { width: 28px; height: 28px; border-radius: 50%; background: var(--sky); border: 1.5px solid var(--sky-line); display: grid; place-items: center; font: 600 13px/1 var(--body); color: var(--sky-ink); flex: none; }
.repl .t { flex: 1; min-width: 0; font: 600 13px/1.3 var(--display); }
.repl .t small { display: block; font: 400 11.5px var(--body); color: var(--muted); }
.repl button { border: 0; background: transparent; font: 500 12px var(--body); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 6px; min-height: 44px; }

/* controls: Photos · the shutter (which becomes ✓) · retake */
.ctl-row { position: relative; height: 92px; flex: none; margin-top: 4px; z-index: 7; }
.shutter { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 0; padding: 0; background: transparent; z-index: 2; }
.shutter:disabled { opacity: .7; }
.sh-p { position: absolute; inset: 0; perspective: 560px; transform-style: preserve-3d; transition: transform .12s var(--ease); }
.shutter:active .sh-p, .shutter.press .sh-p { transform: scale(.9); }
.sh-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.sh-face { position: absolute; inset: 0; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sh-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--paper); }
.sh-disc { position: absolute; inset: 7px; border-radius: 50%; background: var(--lime); }
.sh-glyph { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: .8; }
.sh-back { background: var(--lime); display: grid; place-items: center; transform: rotateX(180deg); }
.sh-back svg { width: 34px; height: 34px; }
.sh-halo { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.sh-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; pointer-events: none; }
#app.rv .sh-halo { animation: halo 420ms 560ms ease both, ready 2.4s 980ms ease-in-out infinite; }
@keyframes halo { from { box-shadow: 0 0 0 0 rgba(231, 250, 134, 0); } to { box-shadow: 0 0 0 5px rgba(231, 250, 134, .18); } }
@keyframes ready { 0%, 100% { box-shadow: 0 0 0 5px rgba(231, 250, 134, .18); } 50% { box-shadow: 0 0 0 11px rgba(231, 250, 134, .08); } }
.lib { position: absolute; left: 38px; top: 50%; width: 52px; height: 52px; margin-top: -26px; border: 0; padding: 0; background: transparent; border-radius: 14px; z-index: 1; }
.lib::before { content: ""; position: absolute; inset: -8px -10px -22px; }   /* 44px+ target including the word */
.lib .stack { position: absolute; inset: 0; }
.lib .stack i { position: absolute; inset: 0; border-radius: 12px; border: 1.5px solid rgba(246, 241, 238, .9); background: #4a4038; }
.lib .stack i:nth-child(1) { transform: rotate(-9deg) translate(-3px, 1px); opacity: .45; }
.lib .stack i:nth-child(2) { transform: rotate(-4deg) translate(-1px, 0); opacity: .75; }
.lib .stack i:nth-child(3) { overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, #6a5c50, #2a2420); }
.lib .stack i:nth-child(3) svg { position: absolute; left: 50%; top: 50%; width: 26px; height: 37px; margin: -18px 0 0 -13px; transform: rotate(5deg); }
.lib .word { position: absolute; left: 50%; top: 100%; margin-top: 7px; transform: translateX(-50%); font: 500 11px var(--body); color: rgba(246, 241, 238, .82); white-space: nowrap; }
.retake { position: absolute; right: 38px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1.5px solid rgba(246, 241, 238, .55); background: rgba(246, 241, 238, .06); display: grid; place-items: center; padding: 0; opacity: 0; pointer-events: none; z-index: 1; }
.retake svg { width: 20px; height: 20px; }
#app.rv .retake { pointer-events: auto; }
#app.rv .lib { pointer-events: none; }
body.play .ctl-row * { pointer-events: none; }

/* THE REVIEW — the coin toss: a quick lift, one and a half turns on the X axis, a small bounce, a lime ring */
#app.rv .shutter { animation: cn-lift 720ms linear both; }
@keyframes cn-lift {
  0% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.22, .6, .4, 1); }
  40% { transform: translateY(-64px) scale(1); animation-timing-function: cubic-bezier(.55, 0, .8, .45); }
  72% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
  79% { transform: translateY(0) scale(1.08, .9); }
  88% { transform: translateY(-8px) scale(1); }
  100% { transform: translateY(0) scale(1); } }
#app.rv .sh-in { animation: cn-spin 518ms cubic-bezier(.35, .15, .55, 1) both; }
@keyframes cn-spin { from { transform: rotateX(0deg); } to { transform: rotateX(540deg); } }
#app.rv .sh-pulse { animation: cn-pulse 560ms ease-out 520ms forwards; }
@keyframes cn-pulse { 0% { opacity: .95; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.75); } }
/* Photos tips, then drops as if into a pocket */
#app.rv .lib { transform-origin: 50% 100%; animation: cn-pocket 540ms linear both; }
@keyframes cn-pocket {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.3, .7, .5, 1); }
  26% { transform: translate(-2px, -9px) rotate(-16deg) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { transform: translate(-12px, 104px) rotate(28deg) scale(.72); opacity: 0; } }
/* ↺ rolls in from the right edge, spinning once as it arrives */
#app.rv .retake { animation: cn-roll 600ms cubic-bezier(.2, .9, .3, 1) 380ms both; }
@keyframes cn-roll { from { transform: translateX(96px) rotate(360deg); opacity: 1; } to { transform: translateX(0) rotate(0deg); opacity: 1; } }
/* ↺ reverses it all */
#app.rvx .retake { animation: cn-roll-out 380ms cubic-bezier(.55, 0, .8, .4) both; }
@keyframes cn-roll-out { from { transform: translateX(0) rotate(0deg); opacity: 1; } to { transform: translateX(96px) rotate(360deg); opacity: 1; } }
#app.rvx .shutter { animation: cn-lift 720ms linear 140ms both; }
#app.rvx .sh-in { animation: cn-unspin 518ms cubic-bezier(.35, .15, .55, 1) 140ms both; }
@keyframes cn-unspin { from { transform: rotateX(540deg); } to { transform: rotateX(0deg); } }
#app.rvx .lib { transform-origin: 50% 100%; animation: cn-unpocket 520ms var(--spring) 420ms both; }
@keyframes cn-unpocket { from { transform: translate(-12px, 104px) rotate(28deg) scale(.72); opacity: 0; } to { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; } }

/* ─────────────────────────── the pill ─────────────────────────── */
.tabs { position: fixed; left: 0; right: 0; bottom: var(--pill-bottom); display: flex; justify-content: center; pointer-events: none; z-index: 60; }
.pill {
  position: relative; pointer-events: auto; display: flex; padding: 4px; border-radius: 999px;
  background: rgba(246, 241, 238, .12); border: 1px solid rgba(246, 241, 238, .22);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.pill > button { position: relative; border: 0; background: transparent; color: var(--paper); font: 600 13.5px var(--display); padding: 0 24px; min-height: 42px; border-radius: 999px; transition: background .3s, color .3s, transform .22s var(--ease); }
.pill > button.on { background: var(--paper); color: var(--ink); }
.pill > button[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transform: translateX(-50%); }
.pill > button.bump { animation: bounce 380ms var(--spring) both; }
@keyframes bounce { 0% { transform: scale(1); } 35% { transform: scale(1.18) translateY(-3px); } 100% { transform: scale(1); } }
.cnt { display: none; }   /* the rose badge is gone: trouble grows a drawer instead */
body.light .pill { background: rgba(255, 255, 255, .92); border-color: var(--hair); box-shadow: 0 10px 26px rgba(16, 30, 48, .14); }
body.light .pill > button { color: var(--ink); }
body.light .pill > button.on { background: var(--ink); color: var(--paper); }
body.sheet-open .tabs, body:has(main[data-view="install"]) .tabs { display: none; }
/* the drawer (17 · B): a thin line of words grows out of the top of the pill when something needs you.
   See-through while receipts only wait for signal, solid paper once one has failed. It folds back the moment
   Receipts opens, is gone on the way back to Camera, and returns only for something new. */
.drawer { position: absolute; left: 50%; bottom: 100%; margin-bottom: 1px; transform: translateX(-50%); transform-origin: 50% 100%; display: none; align-items: center; gap: 6px; height: 25px; padding: 0 13px; border-radius: 12px 12px 0 0; background: rgba(246, 241, 238, .12); border: 1px solid rgba(246, 241, 238, .22); border-bottom: 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 400 11.5px/1 var(--body); color: rgba(246, 241, 238, .9); white-space: nowrap; pointer-events: none; }
.drawer b { font: 700 11.5px/1 var(--display); color: var(--paper); }
.drawer .g { width: 12px; height: 12px; flex: none; display: block; overflow: visible; }
.drawer .sep { opacity: .45; margin: 0 1px; }
.drawer .seg { display: inline-flex; gap: 5px; align-items: center; }
.drawer.solid { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.drawer.solid b { color: var(--ink); }
.drawer.solid .seg-w { color: var(--quiet); }
.pill.dr-fresh .drawer { display: flex; animation: dgrow .55s var(--ease) both; }
.pill.dr-fresh .drawer > * { animation: dtext .4s .25s ease both; }
.pill.dr-fold .drawer { display: flex; animation: dfold .36s var(--ease) forwards; }
@keyframes dgrow { from { transform: translateX(-50%) scaleY(0); opacity: .2; } to { transform: translateX(-50%) scaleY(1); opacity: 1; } }
@keyframes dtext { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes dfold { from { transform: translateX(-50%) scaleY(1); opacity: 1; } to { transform: translateX(-50%) scaleY(0); opacity: 0; } }

/* ─────────────────────────── the send-off stage ─────────────────────────── */
/* a module plays in a 390 × 844 box scaled to the screen, on top of everything but the pill's landing */
.sostage { position: fixed; inset: 0; z-index: 62; overflow: hidden; pointer-events: none; display: none; background: var(--ink); }
.sostage.on { display: block; pointer-events: auto; cursor: pointer; }
.sobox { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; overflow: hidden; }
.skip { position: absolute; top: calc(var(--safe-top) + 14px); right: 18px; z-index: 63; font: 500 11.5px var(--body); color: rgba(246, 241, 238, .75); opacity: 0; pointer-events: none; }
body.play:not(.landed) .skip { animation: fadein 300ms 400ms both; }
body.play .ctl-row, body.play .ctop, body.play .hint { animation: fadeout 260ms ease both; }
@keyframes fadeout { to { opacity: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* the landing, when the module's duration ends: the tab bounces, Receipts slides in over the stage */
body.landed .tabs { z-index: 66; }
body.landed .pill { animation: pilllight 300ms 160ms ease both; }
body.landed #navHistory { animation: bounce 380ms var(--spring) both, liston 300ms 160ms ease both; }
body.landed #navCamera { animation: camoff 300ms 160ms ease both; }
body.landed .view-history { z-index: 64; animation: slidein 380ms 120ms var(--ease) both; }
body.landed.calm .view-history { animation: calmin 280ms ease both; }
@keyframes liston { to { background: var(--ink); color: var(--paper); } }
@keyframes camoff { to { background: transparent; color: var(--ink); } }
@keyframes pilllight { to { background: rgba(255, 255, 255, .92); border-color: #E2DBD5; box-shadow: 0 10px 26px rgba(16, 30, 48, .14); } }
@keyframes slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes calmin { from { opacity: 0; } to { opacity: 1; } }
/* the photographed receipt a module carries */
.bv-rc { display: block; width: 228px; height: 327px; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 22px 26px rgba(0, 0, 0, .5); }
.bv-rc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sostage .so-postcard-till > .bv-rc, .sostage .so-plane-rc > .bv-rc { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.sostage .so-loop-rcpt > .bv-rc, .sostage .so-stars-rc > .bv-rc { transform: rotate(-4deg); }
.sostage .so-loop-photo, .sostage .so-stars-card { background: radial-gradient(120% 90% at 50% 30%, #5b5046 0%, #3b332d 52%, #1e1a17 100%); }
.sostage .so-stars-tab, .sostage .so-stars-tabfill { display: none !important; }
.sostage .so-stars-ground { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--bv-cut, 748px) - 18px), transparent var(--bv-cut, 748px)); mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--bv-cut, 748px) - 18px), transparent var(--bv-cut, 748px)); }

/* ─────────────────────────── receipts · on paper, with days that fold ─────────────────────────── */
.view-history { background: var(--paper); color: var(--ink); overflow: hidden; }
.lhead { position: absolute; top: 0; left: 0; right: 0; z-index: 6; padding: calc(var(--safe-top) + 6px) 16px 10px 20px; background: var(--paper); }
.lhead::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(var(--paper), rgba(246, 241, 238, 0)); pointer-events: none; }
.lh0 { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.lh0 .w2 { font-size: 15px; color: var(--ink); }
.lh1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.lhead h1 { font-size: 28px; font-weight: 700; line-height: 1.1; }
.foldall { flex: none; border: 0; background: transparent; color: var(--muted); font: 500 12.5px var(--body); padding: 6px 8px; min-height: 44px; margin-right: -6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.foldall svg { width: 12px; height: 12px; }
.gear { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; display: grid; place-items: center; padding: 0; flex: none; color: var(--ink); }
.gear svg { width: 19px; height: 19px; }
/* the top line (16 · A): one plain sentence about what needs you; trouble is a quiet white card you tap to jump */
.sum { margin-top: 8px; min-height: 30px; }
.sa-line { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 30px; border: 0; background: none; padding: 0; text-align: left; font: 400 13.5px/1.35 var(--body); color: var(--muted); }
.sa-line b { font-weight: 500; color: var(--ink); }
button.sa-line { background: #fff; border-radius: 14px; padding: 9px 12px 9px 10px; box-shadow: 0 1px 0 rgba(16, 30, 48, .05), 0 0 0 1px rgba(16, 30, 48, .05); min-height: 44px; }
.sa-line .go { margin-left: auto; width: 14px; height: 14px; flex: none; transform: rotate(-90deg); color: var(--ink); }
.sa-tail { font: 400 12.5px var(--body); color: var(--muted); margin: 4px 0 0 27px; }
button.sa-line + .sa-tail { margin: 6px 0 0 11px; }
.gl { flex: none; position: relative; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 500 10px/1 var(--body); letter-spacing: -.04em; }
.gl.s { background: #fff; border: 1.5px solid var(--ink); color: var(--ink); }
.gl.q { background: #fff; border: 1.5px dashed var(--dash); color: var(--quiet); font-size: 12px; }
.gl.x { background: var(--ink); color: var(--paper); font-size: 9px; }
.gl.s::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; animation: ping 1.8s ease-out infinite; }
.lscroll { position: absolute; inset: 0; padding: 200px 16px calc(var(--pill-space) + 60px); overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior: contain; }
.lscroll::-webkit-scrollbar { display: none; }
.lfade { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--pill-space) + 50px); background: linear-gradient(rgba(246, 241, 238, 0), var(--paper) 64%); pointer-events: none; z-index: 5; }
.rail { position: relative; padding-left: 28px; }
.rail:not(:empty)::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 30px; border-left: 1.5px dashed var(--hair-2); }
.dg { position: relative; }
.day { position: relative; display: flex; align-items: center; width: 100%; min-height: 32px; border: 0; background: none; padding: 0; margin: 12px 0 4px; text-align: left; font: 600 10.5px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dg:first-child .day { margin-top: 0; }
.day::before { content: ""; position: absolute; left: -22px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 2px; background: var(--paper); border: 1.5px solid var(--hair-2); transform: rotate(45deg); transition: background .3s, border-color .3s; }
.day .dl-s { display: none; }
.day .chev { margin-left: auto; width: 14px; height: 14px; flex: none; transition: transform .35s var(--ease); }
.day .ds { position: absolute; right: 22px; top: 50%; transform: translate(-8px, -50%); opacity: 0; pointer-events: none; font: 400 12px var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; transition: opacity .25s, transform .35s var(--ease); }
.day .ds b { font-weight: 500; color: var(--ink); }
.day .ds b.x { color: var(--rose-ink); }
.day .ds .g { display: inline-block; min-width: 12px; text-align: center; font-size: 11px; }
.dg.folded .day .dl-f { display: none; }
.dg.folded .day .dl-s { display: inline; }
.dg.folded .day { color: var(--ink); margin-bottom: 2px; }
.dg.folded .day .chev { transform: rotate(-90deg); }
.dg.folded .day .ds { opacity: 1; transform: translate(0, -50%); transition-delay: .12s; }
/* every day marker wears its day's status, folded AND open: green once every receipt that day is in Moneybird */
.dg.tone-ok .day::before { background: var(--mint); border-color: var(--ink); }
.dg.tone-w .day::before { background: #fff; border-color: var(--ink); }
.dg.tone-q .day::before { background: #fff; border-style: dashed; border-color: var(--dash); }
.dg.tone-x .day::before { background: var(--rose); border-color: var(--rose-line); }
.dbody { overflow: hidden; transition: max-height .42s var(--ease), opacity .3s; }
.dg.folded .dbody { opacity: 0; }
.dbody.open { overflow: visible; }
.row { position: relative; margin-bottom: 9px; max-height: 190px; transition: max-height .45s var(--ease), margin .45s var(--ease), opacity .35s; }
.row.enter { animation: enter .7s var(--ease) both; }
.row.enter .tkt { animation: justin 3s ease both; }
@keyframes justin { 0%, 55% { box-shadow: 0 0 0 2px var(--lime), 0 10px 24px rgba(16, 30, 48, .12); } 100% { box-shadow: 0 1px 0 rgba(16, 30, 48, .05), 0 0 0 1px rgba(16, 30, 48, .03); } }
@keyframes enter { 0% { max-height: 0; opacity: 0; transform: translateY(-26px) rotate(-2deg); margin-bottom: 0; } 55% { opacity: 1; } 100% { max-height: 190px; opacity: 1; transform: none; margin-bottom: 9px; } }
.node { position: absolute; left: -24px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--paper); border: 1.5px dashed var(--dash); z-index: 2; }
.node.s { border: 2px solid var(--ink); }
.node.m, .node.b { background: var(--mint); border: 1.5px solid var(--ink); }   /* green is the final state on the rail */
.node.fl { background: var(--sky); border: 1.5px solid var(--sky-line); }
.node.fx { background: #fff; border: 1.5px solid var(--sky-line); }
.node.wd { background: var(--paper); border: 1.5px dashed var(--hair-2); }
.node.f { background: var(--rose); border: 1.5px solid var(--rose-line); }
.node.f::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 7.5px/1 var(--body); color: var(--rose-line); }
.node.travel::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { opacity: .5; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
.row.fresh .node, .row.fresh .chip { animation: pop .5s var(--spring); }
@keyframes pop { 0% { transform: scale(.6) rotate(-6deg); } 100% { transform: none; } }
.row.hl .tkt { animation: hl 2.6s ease both; }
.row.hl .node { animation: pop .5s var(--spring); }
@keyframes hl { 0% { box-shadow: 0 0 0 0 rgba(231, 250, 134, 0); } 12%, 62% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px var(--lime); } 100% { box-shadow: 0 1px 0 rgba(16, 30, 48, .05), 0 0 0 1px rgba(16, 30, 48, .03); } }
.tkt { display: flex; align-items: stretch; background: #fff; border-radius: 14px; min-height: 74px; cursor: pointer; box-shadow: 0 1px 0 rgba(16, 30, 48, .05), 0 0 0 1px rgba(16, 30, 48, .03); transition: box-shadow .2s, transform .15s var(--ease); }
.tkt:active { transform: scale(.99); }
.stub { position: relative; width: 58px; flex: none; display: grid; place-items: center; }
.stub .ph { position: absolute; width: 30px; height: 43px; filter: drop-shadow(0 1px 2px rgba(16, 30, 48, .28)); }
.stub .thumb { position: relative; width: 34px; height: 46px; object-fit: cover; border-radius: 3px; background: var(--hair); transform: rotate(var(--tilt, 0deg)); filter: drop-shadow(0 1px 2px rgba(16, 30, 48, .28)); }
.stub .thumb:not([src]) { visibility: hidden; }
.perf { width: 0; flex: none; border-left: 1.5px dashed var(--hair); position: relative; }
.perf::before, .perf::after { content: ""; position: absolute; left: -6.5px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); }
.perf::before { top: -5.5px; } .perf::after { bottom: -5.5px; }
.tb { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.tr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tt { font: 500 12px var(--display); color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.tm { font: 600 14px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tm.wait { font: 400 12.5px var(--body); color: var(--muted); }
.ta { font: 600 14px var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
/* the stage chip: outline → filled, a journey */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 500 11.5px/1.35 var(--body); white-space: nowrap; border: 1.5px solid transparent; flex: none; }
.chip .g { font-size: 11px; line-height: 1; min-width: 12px; text-align: center; font-weight: 500; letter-spacing: -.04em; }
.chip.q { border: 1.5px dashed var(--dash); color: var(--quiet); background: #fff; }
.chip.s { border-color: var(--ink); color: var(--ink); background: #fff; }
.chip.m { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.chip.b { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.f { background: var(--rose); border-color: var(--rose-line); color: var(--rose-ink); }
.chip.fl { background: var(--sky); border-color: var(--sky-line); color: var(--sky-ink); }
.chip.fx { background: #fff; border-color: var(--sky-line); color: var(--sky-ink); }
.chip.wd { background: transparent; border: 1.5px dashed var(--hair-2); color: var(--muted); }
/* fix a receipt (18): a flagged receipt is outlined in its sky blue; a withdrawn one stays in the list, greyed */
.row.flagged .tkt { box-shadow: 0 0 0 1.5px var(--sky-line); }
.row.wd .tkt { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--hair); }
.row.wd .stub .ph, .row.wd .stub .thumb { opacity: .45; filter: grayscale(1); }
.row.wd .tt, .row.wd .tm.wait { color: var(--faint); }
.rl3 { font: 400 11.5px var(--body); color: var(--sky-ink); display: flex; align-items: center; gap: 5px; }
.rl3.q { color: var(--muted); }
.rl3 .g { font-size: 11px; }
.rowbtn { align-self: flex-start; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 11.5px var(--display); padding: 6px 12px; min-height: 32px; margin-top: 1px; }
.empty { text-align: center; padding: 60px 20px 0; }
.empty svg { width: 88px; height: 112px; margin: 0 auto 18px; display: block; }
.empty h2 { font-size: 18px; font-weight: 600; }
.empty p { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }

/* ─────────────────────────── the sheets ─────────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(16, 30, 48, .36); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 70; }
.scrim.on { opacity: 1; pointer-events: auto; }
#scrim2 { z-index: 74; background: rgba(16, 30, 48, .28); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); color: var(--ink); border-radius: 28px 28px 0 0; transform: translateY(105%); transition: transform .42s var(--ease); z-index: 72; display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(16, 30, 48, .2); max-height: calc(100% - var(--safe-top) - 8px); }
#detailSheet { top: calc(var(--safe-top) + 8px); max-height: none; }
.sheet.open { transform: none; }
#wrongSheet { z-index: 76; }
.handle { width: 38px; height: 5px; border-radius: 3px; background: var(--hair-2); margin: 9px auto 6px; flex: none; }
.shd { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 10px 20px; min-height: 44px; }
.shd .when { font: 600 11px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.shd h2 { font-size: 20px; font-weight: 700; }
.xbtn { width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; display: grid; place-items: center; padding: 0; }
.xbtn svg { width: 14px; height: 14px; }
.sbody { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 20px calc(28px + var(--safe-bottom)); scrollbar-width: none; }
.sbody::-webkit-scrollbar { display: none; }
.photo-wrap { position: relative; border-radius: 20px; height: 262px; overflow: hidden; background: var(--ink-2); display: grid; place-items: center; margin-bottom: 16px; }
.photo-wrap .photo { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-wrap .photo:not([src]) { visibility: hidden; }
.photo-wrap.wd .photo { opacity: .5; filter: grayscale(1); }
.dt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dt h3 { font-size: 21px; font-weight: 700; line-height: 1.2; min-width: 0; }
.dt .amt { font: 700 21px var(--display); font-variant-numeric: tabular-nums; flex: none; }
.dt.unknown h3 { font: 500 14.5px var(--body); color: var(--muted); white-space: normal; }
.dnum { font: 400 12.5px var(--body); color: var(--muted); margin: 4px 0 18px; }
.dnum code { font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: #fff; border: 1px solid var(--hair); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.jl { font: 600 10.5px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 0 0 18px; }
.tl li::before { content: ""; position: absolute; left: 16px; top: 28px; bottom: 0; border-left: 1.5px dashed var(--hair-2); }
.tl li:last-child::before { display: none; }
.tl li.done::before { border-left: 1.5px solid var(--ink); }
.tn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--body); background: var(--paper); border: 1.5px dashed var(--dash); color: var(--quiet); margin-top: -2px; position: relative; z-index: 1; }
.tn svg { width: 14px; height: 14px; }
.tn.s { border: 2px solid var(--ink); color: var(--ink); background: #fff; }
.tn.m { background: var(--mint); border: 1.5px solid var(--ink); color: var(--ink); }
.tn.b { background: var(--ink); border: 1.5px solid var(--ink); color: var(--paper); }
.tn.f { background: var(--rose); border: 1.5px solid var(--rose-line); color: var(--rose-ink); }
.tn.cap { background: var(--ink); border: 0; color: var(--paper); }
.tn.fl { background: var(--sky); border: 1.5px solid var(--sky-line); color: var(--sky-ink); }
.tn.fx { background: #fff; border: 1.5px solid var(--sky-line); color: var(--sky-ink); }
.tn.wd { background: var(--paper); border: 1.5px dashed var(--hair-2); color: var(--muted); }
.tl li.fresh { animation: fadeup .5s var(--ease) both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tx b { display: block; font: 600 14px var(--display); }
.tx b span { font: 500 12px var(--display); color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.tx small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.tl li.todo .tx b { color: var(--muted); font-weight: 500; }
.btn-ink { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; border: 0; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 9px 16px; min-height: 44px; font: 600 12.5px var(--display); }
.btn-ink:disabled { background: var(--hair); color: var(--muted); cursor: default; }
.btn-ink svg, .btn-ghost svg { width: 15px; height: 15px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; border: 1px solid var(--hair-2); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 15px; min-height: 44px; font: 600 12.5px var(--display); }
.row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.spin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hair-2); border-top-color: var(--ink); animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.err { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.actions { margin-top: 4px; }
/* the call-outs at the top of a receipt that was flagged, fixed, withdrawn or that replaces another */
.call { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 11px 12px; margin: 0 0 16px; background: var(--sky); border: 1.5px solid var(--sky-line); font-size: 12.5px; line-height: 1.45; }
.call .g { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #fff; border: 1.5px solid var(--sky-line); display: grid; place-items: center; font: 600 11px/1 var(--body); color: var(--sky-ink); }
.call b { display: block; font: 600 13px var(--display); color: var(--ink); }
.call.fx { background: #fff; }
.call.wd { background: #fff; border: 1.5px dashed var(--hair-2); }
.call.wd .g { border: 1.5px dashed var(--dash); color: var(--muted); }
.lnk { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; border: 0; background: none; padding: 0; font-size: 12.5px; }
/* the action bar at the foot of the detail sheet */
.actbar { flex: none; display: flex; gap: 12px; align-items: center; padding: 12px 20px calc(16px + max(14px, var(--safe-bottom))); border-top: 1px solid var(--hair); background: var(--paper); }
.actbar:empty { display: none; }
.actbar .ab { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 12px 18px; min-height: 48px; font: 600 13.5px var(--display); border: 1px solid var(--hair-2); background: #fff; color: var(--ink); white-space: nowrap; }
.actbar .ab.wide { flex: 1; }
.actbar .ab.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.actbar .ab svg { width: 16px; height: 16px; flex: none; }
.actbar .hint2 { flex: 1; font: 400 12px var(--body); color: var(--muted); line-height: 1.35; }
/* the "Wrong photo?" sheet */
.wbody { padding: 0 20px calc(30px + var(--safe-bottom)); overflow-y: auto; scrollbar-width: none; }
.wsub { font-size: 13px; color: var(--quiet); margin: -2px 0 14px; line-height: 1.5; }
.wsub b { font-weight: 500; color: var(--ink); }
.reasons { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); }
.rsn { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 14px 14px; min-height: 56px; text-align: left; font: 500 14px var(--body); color: var(--ink); }
.rsn + .rsn, .note-in + .rsn { border-top: 1px solid var(--hair); }
.rsn.on { background: #FBF8F6; }
.rsn .g { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--paper); border: 1px solid var(--hair-2); display: grid; place-items: center; font: 500 13px/1 var(--body); color: var(--quiet); }
.rsn .t { flex: 1; }
.rsn svg { width: 14px; height: 14px; transform: rotate(-90deg); color: var(--dash); }
.note-in { padding: 0 14px 14px; border-top: 1px solid var(--hair); background: #FBF8F6; animation: fadeup .3s var(--ease) both; }
.note-in textarea { display: block; width: 100%; margin-top: 12px; min-height: 66px; border: 1px solid var(--hair-2); border-radius: 12px; padding: 10px 12px; font: 400 16px var(--body); color: var(--ink); background: #fff; resize: none; outline: none; user-select: text; -webkit-user-select: text; }
.note-in textarea:focus { border-color: var(--ink); }
.wout { margin-top: 12px; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.wout .g { flex: none; font-size: 12px; margin-top: 1px; }
.res { text-align: center; padding: 6px 6px 0; animation: fadeup .4s var(--ease) both; }
.res .big { width: 58px; height: 58px; margin: 4px auto 12px; border-radius: 50%; display: grid; place-items: center; font: 600 26px/1 var(--body); }
.res .big.fl { background: var(--sky); border: 2px solid var(--sky-line); color: var(--sky-ink); }
.res .big.wd { background: #fff; border: 2px dashed var(--dash); color: var(--muted); }
.res h3 { font-size: 20px; font-weight: 700; }
.res p { font-size: 13.5px; color: var(--quiet); margin: 8px auto 0; max-width: 31ch; line-height: 1.5; }
.res p b { font-weight: 500; color: var(--ink); }
.res .btns { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.res .btns button { margin: 0; justify-content: center; padding: 13px 16px; font-size: 14px; }
.linkbtn { border: 0; background: none; padding: 8px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font: 500 12.5px var(--body); min-height: 44px; }
.res .undo { margin-top: 8px; }
/* settings */
#settingsSheet .sbody { padding-top: 2px; }
.card { background: #fff; border-radius: 16px; margin: 0 0 12px; padding: 2px 16px; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; min-height: 60px; }
.srow + .srow { border-top: 1px solid var(--hair); }
.srow .t { font: 500 14px var(--body); line-height: 1.35; min-width: 0; }
.srow .t small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.srow .t .fun { font: 700 15px var(--display); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srow .t .fun .tag { font: 600 9.5px var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 3px 7px; border-radius: 999px; }
.sw { position: relative; width: 48px; height: 29px; border-radius: 15px; border: 0; background: #D5CEC8; flex: none; padding: 0; transition: background .25s; }
.sw::before { content: ""; position: absolute; inset: -8px; }   /* 44px target */
.sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(16, 30, 48, .25); transition: transform .3s var(--spring), background .25s; }
.sw[aria-checked="true"] { background: var(--ink); }
.sw[aria-checked="true"]::after { transform: translateX(19px); background: var(--lime); }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who .t { overflow-wrap: anywhere; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 600 13px var(--display); flex: none; }
.btn-out { border: 1px solid var(--hair-2); background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 13px; min-height: 44px; font: 500 12.5px var(--body); flex: none; white-space: nowrap; }
.ver { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.capp2 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.capp2 svg { width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 1px var(--hair); }

/* ─────────────────────────── sign-in: Departure's splash, exactly ─────────────────────────── */
.view-signin { background: var(--ink); color: var(--paper); overflow: hidden; }
.view-signin .trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.view-signin .sp { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 72px) 32px calc(var(--safe-bottom) + 30px); font: 400 15px/1.45 var(--body); }
.view-signin .spm2 { position: absolute; right: 44px; top: calc(var(--safe-top) + 58px); transform: rotate(-6deg); }
.view-signin .spm2 svg { display: block; width: min(170px, 42vw); height: min(170px, 42vw); }
.view-signin .spw { margin-top: min(250px, 30vh); }
.view-signin .spw .w2 { font-size: min(46px, 11.5vw); color: var(--paper); }
.view-signin .ssub { font: 300 16px/1.5 var(--body); color: rgba(246, 241, 238, .86); margin: 16px 0 0; }
.view-signin .sbot { margin-top: auto; width: 100%; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink); font: 600 16px var(--display); transition: transform .12s var(--ease); }
.gbtn:active { transform: scale(.98); }
.gbtn svg { width: 22px; height: 22px; }
.fine { text-align: center; font-size: 12px; opacity: .7; margin-top: 14px; font-weight: 400; }
.capp { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; font: 500 13px var(--body); color: rgba(246, 241, 238, .75); }
.capp svg { width: 22px; height: 22px; border-radius: 6px; }

/* ─────────────────────────── install, on ink ─────────────────────────── */
.fr { display: flex; flex-direction: column; color: var(--paper); padding: calc(var(--safe-top) + 64px) 28px calc(var(--safe-bottom) + 28px); overflow-y: auto; }
.fr-top { display: flex; align-items: center; gap: 10px; }
.fr-top svg { width: 28px; height: 28px; }
.fr-top .w2 { font-size: 17px; }
.fr h1 { font-size: 32px; font-weight: 700; line-height: 1.1; margin-top: 26px; letter-spacing: -.02em; }
.fr p { font-weight: 300; font-size: 15px; opacity: .85; margin: 12px 0 0; line-height: 1.5; }
.fr-foot { margin-top: auto; padding-top: 30px; }
.btn-lime { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink); font: 600 15px var(--display); }
.plat .btn-lime { margin-top: 22px; }
.btn-quiet { width: 100%; min-height: 48px; margin-top: 10px; border: 1px solid rgba(246, 241, 238, .45); border-radius: 999px; background: transparent; color: var(--paper); font: 500 14px var(--body); }
.steps { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; }
.steps .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(246, 241, 238, .10); display: grid; place-items: center; flex: none; }
.steps .ic svg { width: 22px; height: 22px; }
.steps b { font-weight: 500; }
.oneline { margin-top: 26px; padding: 12px 14px; border-radius: 12px; background: var(--lime); color: var(--ink); font-size: 13.5px; line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; }
.oneline i { font-style: normal; font-size: 16px; line-height: 1.1; }

/* ─────────────────────────── the install nudge ─────────────────────────── */
.nudge { position: fixed; left: 18px; right: 18px; top: calc(var(--safe-top) + 56px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 10px; background: rgba(246, 241, 238, .10); font: 400 12px/1.35 var(--body); color: var(--paper); }
.nudge .link { position: relative; background: none; border: 0; color: var(--paper); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; padding: 4px 0; }
.nudge .link::before { content: ""; position: absolute; inset: -10px -8px; }
body:has(#installNudge:not([hidden])) .ctop { margin-bottom: 54px; }
body:has(main[data-view="history"]) .nudge { top: calc(var(--safe-top) + 56px); background: #fff; color: var(--ink); border: 1px solid var(--hair); }
body:has(main[data-view="history"]) .nudge .link { color: var(--ink); }
body:has(#installNudge:not([hidden])) .lhead .lh1 { margin-top: 54px; }
body.sheet-open .nudge, body.play .nudge, body:has(main[data-view="signin"]) .nudge, body:has(main[data-view="install"]) .nudge { display: none; }

/* ─────────────────────────── toast ─────────────────────────── */
.toast { position: fixed; left: 50%; bottom: calc(var(--pill-space) + 8px); transform: translateX(-50%); z-index: 80; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 9px 14px; font-size: 13px; max-width: 90vw; text-align: center; }
main[data-view="camera"] ~ .toast, main[data-view="signin"] ~ .toast, main[data-view="install"] ~ .toast { background: var(--paper); color: var(--ink); }

.snap, .snap * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .focus, .hint.on svg, .node.travel::before, .gl.s::before, .spin, .row.enter, .row.enter .tkt, .row.fresh .node, .row.fresh .chip { animation: none !important; }
  #app.rv .shutter, #app.rv .sh-in, #app.rv .sh-pulse, #app.rv .lib, #app.rv .retake, #app.rvx .shutter, #app.rvx .sh-in, #app.rvx .lib, #app.rvx .retake { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  #app.rv .sh-halo { animation: none !important; }
  .vf, .sheet, .scrim, .pill > button { transition: none !important; }
}