/* TL;DW: every save is an instant print pinned to a cobalt wall, and the verdict is a sticker slapped on it. */

/* Schibsted Grotesk and Shantell Sans (SIL Open Font License), self-hosted so the installed app keeps its voice offline. */
/* Schibsted Grotesk, latin-ext */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Schibsted Grotesk, latin */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Shantell Sans, latin-ext */
@font-face {
  font-family: "Shantell Sans";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/shantell-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Shantell Sans, latin */
@font-face {
  font-family: "Shantell Sans";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/shantell-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --wall: #2336d9;
  --wall-deep: #1a29b0;
  --on-wall: #ffffff;
  --on-wall-2: #c9cffa;          /* secondary text on the wall, 5:1 */
  --wall-glass: rgba(255, 255, 255, .14);
  --paper: #ffffff;
  --paper-2: #f2f3fa;
  --paper-line: #e3e5f0;
  --ink: #12131a;
  --ink-2: #44475a;
  --ink-3: #636679;
  --worth: #2fd27f;
  --partly: #ffc531;
  --skip: #ff4d6a;
  --worth-ink: #0f7a45;
  --partly-ink: #8a5d00;
  --skip-ink: #c4203f;
  --highlight: #ffe27a;
  --fun-ink: #c4520c;             /* fun words on prints; no verdict uses orange */
  --radius: 16px;
  --ui: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --hand: "Shantell Sans", "Schibsted Grotesk", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.16, 1, .3, 1); /* ease-out-expo; the sticker's squash lives in its keyframes */
  /* Four stacked cobalt layers (contact, near, mid, far) read softer and more like paper than one big blur. */
  --print-shadow: 0 1px 1px rgba(8, 14, 80, .18), 0 3px 5px -1px rgba(8, 14, 80, .16), 0 10px 18px -4px rgba(8, 14, 80, .26), 0 22px 34px -12px rgba(8, 14, 80, .3);
  --print-shadow-lifted: 0 1px 1px rgba(8, 14, 80, .16), 0 5px 8px -2px rgba(8, 14, 80, .16), 0 16px 26px -6px rgba(8, 14, 80, .3), 0 32px 48px -14px rgba(8, 14, 80, .34);
  /* Pinboard grain: light specks at about 6%, tiled. Prints are opaque, so it only shows on the wall. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grain) var(--wall); color: var(--on-wall); }
body {
  font: 400 15px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(96px + var(--safe-b));
  min-height: 100dvh;
  caret-color: var(--wall);
}
::selection { background: var(--highlight); color: var(--ink); }
a { color: inherit; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--highlight); outline-offset: 2px; border-radius: 8px; }
/* After a mouse click, hide the ring on links, buttons, tabs and focusable cards. Keyboard users keep it; inputs always keep theirs. */
html.using-mouse a:focus, html.using-mouse a:focus-visible,
html.using-mouse button:focus, html.using-mouse button:focus-visible,
html.using-mouse summary:focus, html.using-mouse summary:focus-visible,
html.using-mouse [role=tab]:focus, html.using-mouse [role=tab]:focus-visible,
html.using-mouse [role=button]:focus, html.using-mouse [role=button]:focus-visible,
html.using-mouse [tabindex]:focus, html.using-mouse [tabindex]:focus-visible { outline: none; box-shadow: none; }
[hidden] { display: none !important; }
html { scrollbar-color: rgba(255, 255, 255, .35) transparent; }

#app { overflow-x: clip; } /* tilted prints and stickers may overhang the edge without widening the page */
.wrap { max-width: 1180px; margin: 0 auto; padding: calc(14px + var(--safe-t)) 16px 24px; }

/* Phone hit areas */
@media (max-width: 700px) {
  body :is(button, a[href], summary, [role=button], [role=tab], select, label:has(input[type=checkbox]), label:has(input[type=radio]), input:not([type=checkbox]):not([type=radio])) {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  :where(a[href]) { display: inline-flex; align-items: center; }
  body label:has(input:is([type=checkbox], [type=radio])) { display: flex; align-items: center; }
  body :is(.back, .wordmark, .tape, .link-quiet, .ts, .note-src, .mm-src) { display: inline-flex; align-items: center; }
  body .week-row { gap: 20px; }
  body .cook-nav { gap: 20px; }
}

/* ---------- top of the library ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.wordmark { font: 900 34px/1 var(--ui); letter-spacing: -.035em; text-decoration: none; color: var(--on-wall); }
.wordmark span { color: var(--partly); }
.tally {
  font: 600 13px/1.2 var(--hand); color: var(--ink); background: var(--partly);
  padding: 6px 12px; border-radius: 999px; rotate: 2deg; white-space: nowrap;
  box-shadow: 0 3px 8px rgba(8, 14, 80, .3); border: 0; cursor: pointer;
}
.tally.low { background: var(--skip); }
.tally.plain { display: inline-block; cursor: default; } /* a friend's count: not a button */
.meter { margin-top: 18px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.meter-head b { font: 700 18px var(--hand); }
.meter-head span { font-size: 14px; color: var(--ink-2); text-align: right; }
.meter-head b { flex: none; }
.meter-bar { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin: 8px 0 6px; }
.meter-bar i { display: block; height: 100%; border-radius: inherit; transition: width .6s var(--ease-out); }
.meter-bar.worth i { background: var(--worth); }
.meter-bar.partly i { background: var(--partly); }
.meter-bar.skip i { background: var(--skip); }
.meter-note { font-size: 13.5px; color: var(--ink-3); margin: 4px 0 0; }
.meter-note a { color: var(--wall); font-weight: 600; }
.meter-note.warn { color: var(--skip-ink); font-weight: 600; }
.spend-meter { display: block; width: 100%; height: 10px; margin: 8px 0 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--paper-2); accent-color: var(--worth); }
.spend-meter::-webkit-progress-bar { background: var(--paper-2); }
.spend-meter::-webkit-progress-value { background: var(--worth); border-radius: 999px; }
.spend-meter::-moz-progress-bar { background: var(--worth); border-radius: 999px; }

.search {
  display: flex; align-items: center; gap: 9px; background: var(--paper); color: var(--ink);
  border-radius: 14px; padding: 0 14px; height: 46px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(8, 14, 80, .2);
}
.search svg { width: 19px; height: 19px; stroke: var(--ink-3); fill: none; stroke-width: 2; flex: none; }
.search input { flex: 1; border: 0; background: none; outline: none; height: 100%; font-size: 16px; color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }

/* ---------- filters ---------- */
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 10px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--wall-glass); color: var(--on-wall); font: 600 14px var(--ui);
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 3px 10px rgba(8, 14, 80, .25); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); }
.chip.worth .dot { background: var(--worth); }
.chip.partly .dot { background: var(--partly); }
.chip.skip .dot { background: var(--skip); }
.chip.none .dot { background: #c9ccda; }
.chips.sub { padding-bottom: 16px; }
.chips.sub .chip { height: 30px; font-size: 13px; padding: 0 12px; background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.chips.sub .chip[aria-pressed="true"] { background: var(--paper); box-shadow: none; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--wall-glass); border-radius: 14px; padding: 3px; margin-bottom: 10px; }
.seg .chip { height: 38px; justify-content: center; padding: 0 4px; background: none; border-radius: 11px; font-size: 14px; gap: 6px; min-width: 0; }
.seg .chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.seg .chip:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .12); }

/* ---------- the wall of prints ---------- */
.grid { display: flex; gap: 14px; align-items: flex-start; }
.grid > .col { flex: 1; min-width: 0; }
@media (min-width: 640px) { .grid { gap: 20px; } }
@media (min-width: 960px) { .grid { gap: 26px; } }

.card {
  display: block; text-decoration: none; color: var(--ink); position: relative;
  background: var(--paper); padding: 7px 7px 12px; border-radius: 3px; margin: 14px 0 6px;
  box-shadow: var(--print-shadow); rotate: var(--tilt, 0deg);
  transition: rotate .35s var(--spring), transform .25s var(--ease-out), box-shadow .25s;
}
.card:active { transform: scale(.97); }
.thumb { position: relative; background: #2a2622; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.wide { aspect-ratio: 16 / 11; }
.thumb.tall { aspect-ratio: 4 / 5; }
.thumb .noimg {
  width: 100%; height: 100%; display: grid; place-items: center; text-transform: capitalize;
  font: 600 16px var(--hand); color: #b9b0a0; background: radial-gradient(120% 90% at 30% 35%, #57504a, #2a2622);
}
.print-tape { position: absolute; top: -7px; left: 14px; z-index: 2; width: 56px; height: 16px; background: var(--tape); rotate: -4deg; opacity: .92; box-shadow: 0 1px 2px rgba(8, 14, 80, .15); }
.platform {
  position: absolute; left: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 7px;
  background: rgba(10, 10, 20, .62); display: grid; place-items: center; backdrop-filter: blur(6px);
}
.platform svg { width: 14px; height: 14px; fill: #fff; }
.cap { font: 600 15px/1.17 var(--hand); margin: 9px 1px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.by { font: 500 11.5px/1.35 var(--ui); color: var(--ink-3); margin: 4px 1px 0; }
.why { font: 400 12.5px/1.35 var(--ui); color: var(--ink-2); margin: 6px 1px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.why.dev { font: 600 13px var(--hand); color: #6e6250; }
.why.failed { color: var(--skip-ink); }
.why.idle { font: 600 13px var(--hand); color: var(--ink-3); }

/* ---------- stickers (verdict seals) ----------
   Shape = verdict (scalloped seal / circle / octagon). Size = score: 8+ hero, 5-7 normal, under 5 small and matte. --d is the diameter. */
.sticker {
  --d: 62px;
  position: absolute; top: calc(var(--d) * -.18); right: calc(var(--d) * -.15); z-index: 2; width: var(--d); height: var(--d);
  display: grid; place-items: center; text-align: center; color: var(--ink);
  filter: drop-shadow(0 4px 6px rgba(8, 14, 80, .32));
}
.sticker.w-hero { --d: 74px; }
.sticker.w-low { --d: 50px; filter: drop-shadow(0 2px 3px rgba(8, 14, 80, .28)) saturate(.8); }
.sticker.big { --d: 96px; }
.sticker .seal { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal > * { stroke: var(--paper); stroke-width: 3; stroke-linejoin: round; }
.seal .gloss { fill: #fff; opacity: .42; stroke: none; }
.sticker.worth_it { rotate: 10deg; } .sticker.partly { rotate: -8deg; } .sticker.skip { rotate: 7deg; }
.sticker.worth_it .seal > :not(.gloss) { fill: var(--worth); }
.sticker.partly .seal > :not(.gloss) { fill: var(--partly); }
.sticker.skip .seal > :not(.gloss) { fill: var(--skip); }
.sticker-t { position: relative; max-width: calc(var(--d) * .62); font: 900 11px/1 var(--ui); letter-spacing: .02em; text-transform: uppercase; }
.sticker b { display: block; font-size: calc(var(--d) * .37); letter-spacing: -.035em; margin-bottom: 1px; }
.sticker.w-low b { font-size: 21px; }
.sticker.big b { font-size: 34px; }
.sticker.big .sticker-t { font-size: 13px; }
.sticker .glint {
  position: absolute; z-index: 1; top: -8px; left: -6px; width: 22px; height: 22px; background: #fff; rotate: -10deg;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9));
}

/* ---------- developing (the AI is still watching) ---------- */
.developing img { filter: sepia(.7) brightness(.48) contrast(.7) blur(3px) saturate(.35); }
.developing::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 35% 40%, rgba(150, 132, 104, .45), rgba(40, 34, 28, .55));
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
  .developing img { animation: murk 3.4s ease-in-out infinite alternate; }
  .developing.offscreen img { animation-play-state: paused; } /* app.js pauses prints that are off screen */
  @keyframes murk { to { filter: sepia(.55) brightness(.62) contrast(.8) blur(2px) saturate(.5); } }
  /* a verdict just landed: the print develops, then the sticker slaps on */
  .card.fresh .thumb img, .hero-media.fresh img { animation: develop 1.8s var(--ease-out) backwards; }
  @keyframes develop { from { filter: sepia(.7) brightness(.48) contrast(.7) blur(3px) saturate(.35); } }
  /* each verdict lands its own way: worth it thunks on, partly wobbles on, skip drops on */
  .sticker.fresh.worth_it { animation: slap-w .6s cubic-bezier(.16, 1, .3, 1) 1.2s backwards; }
  .sticker.fresh.partly { animation: slap-p .55s cubic-bezier(.16, 1, .3, 1) 1.2s backwards; }
  .sticker.fresh.skip { animation: slap-s .5s cubic-bezier(.2, .9, .3, 1) 1.2s backwards; }
  .sticker.fresh .glint { animation: twinkle 1s ease-out 1.75s backwards; }
  @keyframes slap-w { from { transform: scale(2.2); opacity: 0; } 55% { transform: scale(.88); opacity: 1; } 80% { transform: scale(1.05); } }
  @keyframes slap-p { from { transform: scale(1.9) rotate(-28deg); opacity: 0; } 55% { transform: scale(.93) rotate(4deg); opacity: 1; } 78% { transform: scale(1.02) rotate(-2deg); } }
  @keyframes slap-s { from { transform: translateY(-30px) scale(1.5); opacity: 0; } 55% { transform: translateY(2px) scale(.94); opacity: 1; } 78% { transform: translateY(-1px); } }
  @keyframes twinkle { from { transform: scale(0) rotate(-40deg); opacity: 0; } 40% { transform: scale(1.5) rotate(10deg); opacity: 1; } }
}

/* ---------- one video ---------- */
.back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--on-wall); font-weight: 600; font-size: 15px; margin: 2px 0 18px; }
.back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.save-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; } /* minmax(0,…): the print never grows to a photo's natural width */
@media (min-width: 880px) { .save-grid { grid-template-columns: minmax(300px, 400px) 1fr; gap: 40px; } .save-grid > .print { position: sticky; top: 24px; } }
.print { background: var(--paper); color: var(--ink); padding: 10px 10px 16px; border-radius: 3px; box-shadow: var(--print-shadow); position: relative; rotate: -1.2deg; max-width: 460px; min-width: 0; }
.hero-media { position: relative; overflow: hidden; contain: paint; background: #2a2622; }
.hero-media.wide { aspect-ratio: 16 / 10; }
.hero-media.tall { aspect-ratio: 4 / 5; max-height: 62dvh; margin: 0 auto; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* out of flow: the picture's natural size can never size the box, loaded or not */
.print h1 { font: 700 22px/1.15 var(--hand); margin: 12px 2px 0; text-wrap: balance; }
.print .by { font-size: 12.5px; margin-top: 6px; }

.panel { background: var(--paper); color: var(--ink); border-radius: 22px; padding: 22px 20px 26px; box-shadow: 0 12px 30px rgba(8, 14, 80, .28); min-width: 0; }
@media (max-width: 879px) { .panel { margin: 0 -16px; border-radius: 22px 22px 0 0; padding-bottom: 40px; } }
.verdict-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.verdict-line .v { font: 800 30px/1 var(--ui); letter-spacing: -.03em; }
.v.worth_it { color: var(--worth-ink); } .v.partly { color: var(--partly-ink); } .v.skip { color: var(--skip-ink); }
.score { font: 500 13px var(--ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.score b { font: 800 22px var(--ui); color: var(--ink); }
.reason { font: 500 17.5px/1.45 var(--ui); margin: 10px 0 0; max-width: 62ch; text-wrap: pretty; }
.tapes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tape {
  font: 600 13px var(--hand); color: var(--ink); text-decoration: none; padding: 5px 12px 4px;
  background: var(--tape, #ff8fc8); rotate: -1.5deg; border-radius: 2px; border: 0; cursor: pointer;
}
.tape:nth-child(even) { rotate: 1.5deg; }
.tape.add { background: var(--paper-2); color: var(--ink-2); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 2px; }
.del-row { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--paper-line); }
.link-danger { background: none; border: 0; padding: 6px 0; color: var(--skip-ink); font: 600 14px var(--ui); cursor: pointer; }
.link-danger:hover { text-decoration: underline; text-underline-offset: 3px; }

.btn {
  height: 42px; padding: 0 16px; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--paper-2); color: var(--ink); font: 600 14.5px var(--ui);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn.primary { background: var(--wall); color: var(--on-wall); }
.btn.light { background: var(--paper); color: var(--ink); box-shadow: 0 3px 10px rgba(8, 14, 80, .22); }
.btn.danger { color: var(--skip-ink); }
.btn.danger-fill { background: var(--skip); color: var(--ink); }
.btn.done { background: var(--worth); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

.section { margin-top: 30px; }
.section h2 { font: 700 20px/1.2 var(--hand); margin: 0 0 10px; color: var(--ink); }
.best { font: 500 17px/1.5 var(--ui); margin: 0; max-width: 62ch; }
.best mark { background: linear-gradient(transparent 55%, var(--highlight) 55%); color: inherit; padding: 0 2px; }
.promise { margin: 12px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 62ch; }
.promise b { color: var(--ink); }
ul.clean, ol.clean { margin: 0; padding-left: 20px; max-width: 64ch; }
ul.clean li, ol.clean li { margin: 6px 0; }
ul.clean li::marker { color: var(--wall); }
ol.clean li::marker { color: var(--wall); font-weight: 700; }

/* timestamps hang in a margin rail beside the notes */
.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--paper-line); }
.rail li:last-child { border-bottom: 0; }
.ts { font: 700 13px var(--ui); color: var(--wall); text-decoration: none; font-variant-numeric: tabular-nums; }
a.ts:hover { text-decoration: underline; }
.rail .flag b { display: block; font-size: 14px; }
.rail .flag span { color: var(--ink-2); font-size: 14px; }
.flag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--skip); margin-right: 6px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(255, 77, 106, .35); }

.notes .note-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 14px; color: var(--ink); }
.notes .contradicts .note-mark { background: var(--skip); }
.notes .supports .note-mark { background: var(--worth); }
.notes .adds .note-mark { background: var(--paper-line); }
.notes li { grid-template-columns: 36px 1fr; }
.notes b { font-weight: 700; }
.note-src { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--wall); text-decoration: none; }
.note-src:hover { text-decoration: underline; }
.backfill { text-align: center; margin: 18px 0 0; }
.link-quiet { background: none; border: 0; padding: 6px 0; color: var(--on-wall-2); font: 600 14px var(--ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-quiet:hover { color: var(--on-wall); }
.repos .repo-mark { display: inline-block; width: 18px; font-weight: 800; }
.repo-mark.verified { color: var(--worth-ink); }
.repo-mark.corrected { color: var(--partly-ink); }
.repo-mark.not_found { color: var(--skip-ink); }
.repo-mark.unchecked { color: var(--ink-3); }
.repo-name { font-weight: 700; color: var(--wall); text-decoration: none; overflow-wrap: anywhere; }
.repo-name:hover { text-decoration: underline; }
.repo-facts { font-size: 13px; color: var(--ink-3); margin: 2px 0 0 18px; font-variant-numeric: tabular-nums; }
.item-card { background: var(--paper-2); border-radius: 14px; padding: 14px 16px 15px; margin-bottom: 10px; color: var(--ink); position: relative; }
.item-card h3 { margin: 0; font: 700 17px/1.25 var(--hand); }
.item-card .meta { font: 500 12.5px var(--ui); color: var(--ink-3); margin: 3px 0 8px; }
.item-card b { display: block; font-size: 13px; margin: 10px 0 2px; }
.item-card .ts { display: inline-block; margin-top: 8px; }

/* ask */
.qa { display: grid; gap: 10px; }
.q { justify-self: end; background: var(--wall); color: var(--on-wall); padding: 9px 13px; border-radius: 16px 16px 4px 16px; max-width: 85%; }
.a { background: var(--paper-2); padding: 10px 13px; border-radius: 16px 16px 16px 4px; max-width: 92%; white-space: pre-wrap; }
.a.failed { color: var(--skip-ink); }
.ask-form { display: flex; gap: 8px; margin-top: 12px; }
.ask-form input, .note, .field {
  background: var(--paper-2); border: 1.5px solid transparent; border-radius: 12px; color: var(--ink); outline: none;
  transition: border-color .2s, background-color .2s;
}
.ask-form input:focus, .note:focus, .field:focus { border-color: var(--wall); background: var(--paper); }
.ask-form input { flex: 1; height: 44px; padding: 0 13px; font-size: 16px; }
.note { width: 100%; min-height: 80px; resize: vertical; padding: 11px 13px; font: 500 15px/1.45 var(--hand); }
.field { width: 100%; height: 48px; padding: 0 14px; font-size: 16px; margin-bottom: 10px; }
::placeholder { color: var(--ink-3); }

/* a save that's still being watched */
.status-panel { display: flex; gap: 14px; align-items: center; background: var(--paper-2); border-radius: 14px; padding: 14px 16px; margin-top: 16px; }
.status-panel b { font: 700 16px var(--hand); }
.status-panel .byline { color: var(--ink-3); font-size: 13.5px; }
.status-panel .failed { color: var(--skip-ink); }
.sheet-wait { display: flex; gap: 14px; align-items: center; padding: 18px 0 28px; color: var(--ink-3); }
.reel { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--paper-line); border-top-color: var(--wall); flex: none; }
@media (prefers-reduced-motion: no-preference) { .reel { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } }

/* ---------- collections: stacks of prints with a tape label ---------- */
.page-title { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; }
.page-title h1 { font: 900 32px/1 var(--ui); letter-spacing: -.035em; margin: 0; }
.page-title .btns { margin-left: auto; display: flex; gap: 8px; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 18px; padding-top: 8px; }
.board { text-decoration: none; color: var(--ink); position: relative; display: block; }
.board::before {
  content: ""; position: absolute; inset: 0; background: var(--paper); border-radius: 3px; rotate: 4deg;
  box-shadow: var(--print-shadow); opacity: .85;
}
.board .face { position: relative; background: var(--paper); padding: 7px 7px 12px; border-radius: 3px; box-shadow: var(--print-shadow); rotate: -1.5deg; transition: rotate .35s var(--spring); }
.board .cover { aspect-ratio: 1; background: #2a2622 center / cover no-repeat; display: grid; place-items: center; font-size: 40px; }
.board .label { position: absolute; top: -10px; left: 50%; translate: -50% 0; z-index: 1; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .count { font: 500 12px var(--ui); color: var(--ink-3); margin: 8px 2px 0; }
.board .name { font: 600 15px/1.2 var(--hand); margin: 8px 2px 0; }
.page-title h1.coll-tape { display: inline-block; letter-spacing: 0; font: 700 22px var(--hand); padding: 6px 16px 5px; background: var(--tape, #ff8fc8); color: var(--ink); rotate: -1.5deg; }

/* ---------- places & saved bits ---------- */
.group-title { font: 800 22px/1 var(--ui); letter-spacing: -.02em; margin: 26px 0 12px; display: flex; align-items: baseline; gap: 8px; }
.group-title span { font: 600 14px var(--hand); color: var(--on-wall-2); }
.place-list, .thing-list { display: grid; gap: 18px; align-items: start; }
@media (min-width: 880px) { .place-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; } .thing-list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 28px; } }
.place { display: grid; grid-template-columns: 76px 1fr; gap: 14px; background: var(--paper); color: var(--ink); border-radius: 3px; padding: 12px 12px 16px; box-shadow: var(--print-shadow); rotate: var(--tilt, 0deg); }
.place .snap { width: 76px; background: var(--paper); padding: 4px 4px 9px; box-shadow: 0 3px 8px rgba(8, 14, 80, .25); rotate: -3deg; align-self: start; }
.place .snap img, .place .snap .ph { width: 100%; aspect-ratio: 1; object-fit: cover; background: #2a2622; }
.place h3 { margin: 0; font: 700 17px/1.2 var(--hand); }
.place .sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.place .tips { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.place .links { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.place .links a { height: 34px; padding: 0 12px; font-size: 13.5px; }
.warn { color: var(--skip-ink); font-weight: 600; }
.thing { rotate: var(--tilt, 0deg); }
.thing .item-card { background: var(--paper); border-radius: 3px; box-shadow: var(--print-shadow); padding-top: 20px; margin: 0; transition: opacity .3s; }
.thing .item-card::before { content: ""; position: absolute; top: -8px; left: 22px; width: 64px; height: 18px; background: var(--tape, #7fe0ff); rotate: -4deg; opacity: .9; }
.thing.tried .item-card { opacity: .6; }
.thing-foot { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--paper-line); font-size: 13.5px; color: var(--ink-3); flex-wrap: wrap; }
.thing-foot a { color: var(--wall); font-weight: 600; }
.thing-foot label { display: flex; gap: 7px; align-items: center; color: var(--ink); font: 600 14px var(--hand); cursor: pointer; }
.thing-foot input { width: 18px; height: 18px; accent-color: var(--worth); }

/* ---------- empty / login ---------- */
.empty { text-align: center; padding: 56px 20px; color: var(--on-wall-2); max-width: 420px; margin: 0 auto; }
.empty h2 { font: 700 28px/1.1 var(--hand); color: var(--on-wall); margin: 0 0 10px; }
.empty .btn { margin-top: 16px; }
.ghost-print { width: 120px; height: 150px; margin: 0 auto 28px; border: 2px dashed var(--on-wall-2); rotate: -2deg; position: relative; }
.ghost-print span { position: absolute; top: -13px; left: 22px; width: 74px; height: 24px; background: var(--on-wall-2); opacity: .7; rotate: 2deg; }
.login { max-width: 380px; margin: 14vh auto 0; padding: 0 20px; }
.login .wordmark { font-size: 68px; display: block; }
.login .tag { font: 600 18px/1.3 var(--hand); color: var(--on-wall-2); margin: 8px 0 26px; }
.login .print { rotate: 0deg; padding: 18px 16px 20px; }
.login .tag { rotate: -1.5deg; }
.login .print .field { margin-bottom: 8px; }

.landing { max-width: 1080px; margin: auto; padding: calc(22px + var(--safe-t)) 22px 0; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.landing-nav > span:last-child { font-size: 12px; color: var(--on-wall-2); }
.landing-eyebrow { font: 700 11px/1.5 var(--ui); letter-spacing: .09em; margin: 0 0 14px; }
.landing h1 { font: 900 clamp(48px, 7vw, 82px)/.99 var(--ui); letter-spacing: -.055em; margin: 0; }
.landing h1 em { color: var(--partly); font-style: normal; }
.landing-lead { font-size: 18px; max-width: 360px; margin: 20px 0; }
.landing-waitlist { max-width: 360px; }
.landing-waitlist label { display: block; font-size: 13px; margin-bottom: 9px; }
.landing-waitlist .field { background: var(--paper); color: var(--ink); height: 48px; border: 0; margin: 0 0 8px; width: 100%; }
.landing-waitlist .btn { width: 100%; height: 48px; background: var(--partly); color: var(--ink); justify-content: space-between; font-weight: 800; }
.landing-waitlist [role=status] { font-size: 13px; min-height: 20px; margin: 8px 0 0; }
.waitlist-answers { display: flex; gap: 8px; flex-wrap: wrap; }
.landing-print { position: relative; margin: 0; padding: 9px 9px 18px; background: var(--paper); color: var(--ink); border-radius: 3px; box-shadow: var(--print-shadow); }
.landing-verdict { max-width: 340px; margin: 30px auto 32px; rotate: 2deg; }
.landing-reel { background: #2a2622; color: white; min-height: 240px; padding: 16px; display: flex; flex-direction: column; align-items: start; gap: 18px; }
.landing-reel > span:first-child { font-size: 11px; letter-spacing: .08em; opacity: .8; }
.landing-reel > strong { font: 800 39px/1.02 var(--ui); letter-spacing: -.04em; }
.landing-play { border: 1px solid #fff8; border-radius: 50%; width: 30px; height: 30px; text-align: center; line-height: 28px; font-size: 12px; }
.landing-timeline { width: 100%; height: 3px; background: #ffffff50; border-left: 75px solid var(--partly); }
.landing-sticker { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background: var(--partly); color: var(--ink); font: 800 15px/1.1 var(--ui); box-shadow: 0 4px 0 #0002, inset 0 2px 0 #fff6; rotate: -8deg; flex: none; }
.landing-sticker.worth { background: var(--worth); }
.landing-sticker.skip { background: var(--skip); rotate: 9deg; }
.landing-verdict > .landing-sticker { position: absolute; top: -20px; right: -10px; width: 94px; height: 94px; border: 3px solid var(--paper); }
.landing-sticker b { font-size: 31px; letter-spacing: -.04em; }
.landing-sticker b span { font-size: 14px; }
.landing-sticker strong { font-size: 12px; text-transform: uppercase; }
.landing figcaption { padding: 12px 7px 0; }
.landing-example { display: block; font: 600 11px/1.4 var(--ui); color: var(--ink-3); }
.landing figcaption h2 { font: 700 22px/1.15 var(--hand); margin: 5px 0 9px; }
.landing figcaption p { font-size: 15px; margin: 0 0 10px; }
.landing-flag { display: inline-block; border: 1px solid var(--paper-line); border-radius: 999px; padding: 4px 9px; font-size: 11px; color: var(--skip-ink); }
.landing-caption { display: block; font: 600 14px/1.35 var(--hand); }
.landing figcaption .landing-caption { margin-top: 12px; color: var(--wall); }
.landing-paper { background: var(--paper); color: var(--ink); padding: 22px; border-radius: 3px; box-shadow: var(--print-shadow); }
.landing-paper h2 { font: 700 24px/1.2 var(--hand); margin: 0 0 22px; }
.landing-how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.landing-how li { display: flex; gap: 15px; }
.landing-how li > b { font: 800 14px/1.5 var(--ui); color: var(--wall); }
.landing-how h3 { font-size: 16px; margin: 0 0 3px; }
.landing-how p { font-size: 14px; color: var(--ink-2); margin: 0; }
.landing-verdicts { display: flex; justify-content: space-between; gap: 10px; text-align: center; margin: 32px 0 40px; }
.landing-verdicts > div { flex: 1; }
.landing-verdicts .landing-sticker { margin: auto; }
.landing-verdicts p { font-size: 12px; color: var(--on-wall-2); margin: 12px 0 0; }
.landing-food-copy h2 { font: 900 35px/1.08 var(--ui); letter-spacing: -.035em; margin: 0 0 16px; }
.landing-food-copy > p:not(.landing-eyebrow) { max-width: 370px; font-size: 16px; }
.landing-soft { color: var(--on-wall-2); font-size: 14px !important; }
.landing-recipe { padding: 22px; rotate: -1.5deg; margin: 28px auto 38px; max-width: 370px; }
.landing-recipe h3 { font: 700 25px/1.15 var(--hand); margin: 10px 0; }
.landing-recipe-meta { font-size: 12px; color: var(--ink-3); }
.landing-recipe ul { list-style: none; padding: 0; margin: 16px 0; }
.landing-recipe li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--paper-line); font-size: 14px; }
.landing-recipe .landing-caption { font-size: 12px; color: var(--worth-ink); }
.landing-cook { background: var(--paper-2); border-radius: 10px; padding: 13px; margin-top: 18px; }
.landing-cook > span { float: right; font-size: 12px; color: var(--ink-3); }
.landing-cook p { font-size: 14px; margin: 8px 0 0; }
.landing-pro ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.landing-pro h2 { margin-top: 9px; }
.landing-pro li b, .landing-pro li span { display: block; }
.landing-pro li b { font-size: 15px; margin-bottom: 3px; }
.landing-pro li span { color: var(--ink-2); font-size: 14px; }
.landing-footer { text-align: center; padding-top: 28px; }
.landing-footer p { font-weight: 600; margin: 0 0 12px; }
.landing-owner { background: none; border: 0; padding: 10px; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; color: var(--on-wall-2); cursor: pointer; min-height: 44px; }
.landing .login { margin: 20px auto 0; padding: 0; }
.landing .login label { display: block; color: var(--ink); margin-bottom: 8px; }
@media (min-width: 760px) {
  .landing { padding-top: 30px; }
  .landing-nav { margin-bottom: 58px; }
  .landing-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; margin-bottom: 60px; }
  .landing-verdict { width: 100%; margin: 0 auto; }
  .landing-reel { min-height: 280px; }
  .landing-paper { padding: 30px; }
  .landing-how ol { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .landing-how h2 { max-width: 560px; }
  .landing-verdicts { justify-content: center; gap: 50px; margin: 38px auto 65px; max-width: 650px; }
  .landing-food { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-bottom: 55px; }
  .landing-food-copy h2 { font-size: 46px; }
  .landing-recipe { width: 100%; margin: 0 auto; }
  .landing-pro ul { grid-template-columns: 1fr 1fr; gap: 24px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.err { color: var(--skip-ink); font-size: 14px; min-height: 20px; margin-bottom: 4px; }

/* ---------- tab bar ---------- */
/* Tab bar: a white pill taped to the wall, the + as a glossy sticker in the middle, and a yellow marker stroke that
   slides under the current tab's name. Scrolling down slims it to icons, then slides it away; scrolling up brings it back. */
.tabbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); z-index: 20; height: 64px;
  display: grid; grid-template-columns: 1fr 1fr 72px 1fr 1fr; align-items: center; padding: 0 6px;
  background: var(--paper); border-radius: 32px; rotate: -.5deg;
  box-shadow: 0 1px 1px rgba(8, 14, 80, .18), 0 14px 30px -8px rgba(8, 14, 80, .5);
  transition: transform .45s var(--m-sheet), height .35s var(--m-settle);
}
.tabbar::before, .tabbar::after { content: ""; position: absolute; top: -8px; width: 40px; height: 16px; opacity: .92; box-shadow: 0 1px 2px rgba(8, 14, 80, .15); z-index: 2; pointer-events: none; }
.tabbar::before { left: -5px; background: var(--tape-pink, #ff8fc8); rotate: -28deg; }
.tabbar::after { right: -5px; background: var(--tape-sky, #7fe0ff); rotate: 24deg; }
@media (min-width: 700px) { .tabbar { left: 50%; right: auto; width: 480px; translate: -50% 0; bottom: 16px; } }
.tabbar a { display: grid; justify-items: center; gap: 3px; text-decoration: none; color: var(--ink-3); font: 700 11.5px/1 var(--hand); padding: 4px 0; position: relative; z-index: 1; white-space: nowrap; }
.tabbar a span { height: 13px; transition: opacity .2s, height .3s var(--m-settle); }
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] svg { color: var(--wall); transform: translateY(-1px) rotate(-7deg); }
.tab-add {
  justify-self: center; width: 60px; height: 60px; border-radius: 50%; border: 0; margin-top: -28px; cursor: pointer; rotate: 9deg;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%), var(--wall); color: var(--on-wall);
  display: grid; place-items: center; box-shadow: 0 0 0 4px var(--paper), 0 10px 20px -4px rgba(8, 14, 80, .5);
}
.tab-add svg { width: 26px; height: 26px; stroke-width: 2.6; }
.tabbar.slim { height: 50px; }
.tabbar.slim a span { opacity: 0; height: 0; }
.tabbar.slim .tab-ind { opacity: 0; }
.tabbar.away { transform: translateY(calc(100% + 40px + var(--safe-b))); }
/* The pill floats over the page: anything scrolled into view (focus, menus, find-in-page) stops above it, not under it. */
html { scroll-padding-bottom: calc(96px + var(--safe-b)); }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; background: rgba(6, 10, 50, calc(.55 * var(--fade, 1))); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 560px; background: var(--paper); color: var(--ink);
  border-radius: 24px 24px 0 0; padding: 10px 18px calc(22px + var(--safe-b)); max-height: 88dvh; overflow: auto;
}
.sheet h2 { font: 700 26px/1.1 var(--hand); margin: 0 0 14px; }
.sheet label { display: block; font: 600 13px var(--ui); color: var(--ink-2); margin: 16px 0 6px; }
.sheet .chip { background: var(--paper-2); color: var(--ink); }
.sheet .chip[aria-pressed="true"] { background: var(--wall); color: var(--on-wall); box-shadow: none; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 15px; }
.toggle input { width: 22px; height: 22px; accent-color: var(--wall); }
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.row { display: flex; gap: 8px; }
.row .field { margin: 0; }
.grab { margin: -10px -18px 0; padding: 12px 0 16px; touch-action: none; cursor: grab; }
.sheet > h2 { touch-action: none; }
.grabber { width: 40px; height: 5px; border-radius: 5px; background: var(--paper-line); margin: 0 auto; }
.sheet-text { color: var(--ink-2); margin: -4px 0 0; }
.sheet-actions { display: flex; gap: 8px; margin-top: 20px; }
.sheet-actions .btn { flex: 1; height: 48px; }

#toast {
  position: fixed; left: 50%; bottom: calc(108px + var(--safe-b)); z-index: 40; max-width: 90vw;
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 14px; font-weight: 600; font-size: 14px;
  box-shadow: 0 10px 30px rgba(8, 14, 80, .4); pointer-events: none;
  opacity: 0; transform: translate(-50%, 12px) scale(.95);
  transition: opacity .2s ease, transform .35s var(--spring);
}
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.more { display: block; margin: 8px auto 0; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.stagger > *, .stagger > .col > .card, .stagger .place-list > *, .stagger .thing-list > * { animation: rise .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.stagger > .col, .stagger > .place-list, .stagger > .thing-list { animation: none; }
.stagger .card.still { animation: none; }
.enter { animation: rise .35s var(--ease-out) backwards; }
img.fade { opacity: 0; transition: opacity .45s ease; }
img.fade.in { opacity: 1; }

.tabbar { view-transition-name: tabbar; }
#toast { view-transition-name: toast; }
#loadbar { view-transition-name: loadbar; }
::view-transition, ::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { pointer-events: none; } /* taps during a transition reach the new page: the UA gives the groups and pictures their own hit testing, so each one is switched off, not just the root */
/* Page moves. ONE constant sets the speed of all of them (tune it on a real phone): --nav-ms. Slides take it, tab and refresh fades 80%, the picture morph 140%. */
:root { --nav-ms: 200ms; --nav-ease: cubic-bezier(.2, .85, .25, 1); --nav-shift: 28px; }
::view-transition-old(root), ::view-transition-old(seal), ::view-transition-group(seal), ::view-transition-new(root), ::view-transition-new(seal) { animation-duration: var(--nav-ms); animation-timing-function: var(--nav-ease); }
html[data-nav="forward"]::view-transition-old(root), html[data-nav="forward"]::view-transition-old(seal) { animation-name: vt-out-left; }
html[data-nav="forward"]::view-transition-new(root), html[data-nav="forward"]::view-transition-new(seal) { animation-name: vt-in-right; }
html[data-nav="back"]::view-transition-old(root), html[data-nav="back"]::view-transition-old(seal) { animation-name: vt-out-right; }
html[data-nav="back"]::view-transition-new(root), html[data-nav="back"]::view-transition-new(seal) { animation-name: vt-in-left; }
html[data-nav="tab"]::view-transition-old(root), html[data-nav="tab"]::view-transition-old(seal), html[data-nav="tab"]::view-transition-new(root), html[data-nav="tab"]::view-transition-new(seal),
html[data-nav="swap"]::view-transition-old(root), html[data-nav="swap"]::view-transition-old(seal), html[data-nav="swap"]::view-transition-new(root), html[data-nav="swap"]::view-transition-new(seal) { animation-duration: calc(var(--nav-ms) * .8); }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(calc(var(--nav-shift) * -1)); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(var(--nav-shift)); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(var(--nav-shift)); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(calc(var(--nav-shift) * -1)); } }
/* A transition started while another was still playing skips it, whose end state would flash on screen: drop the old picture at once. */
html[data-nav][data-interrupt]::view-transition-old(root), html[data-nav][data-interrupt]::view-transition-old(seal) { animation: none; opacity: 0; }
/* The picture morph is its own layer, drawn above the page pictures, so the video page's verdict seal (part of the page) would sit
   under the picture until the morph ends (seen on iPhone Safari). The seal gets its own layer too: it comes after the picture,
   so it is drawn on top, and it slides and fades with the page (rules above). Only the video page's print: names must be unique. */
.save-grid > .print > .sticker { view-transition-name: seal; }
::view-transition-group(hero) { animation-duration: calc(var(--nav-ms) * 1.4); animation-timing-function: var(--nav-ease); overflow: clip; }
::view-transition-old(hero), ::view-transition-new(hero) { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; animation-duration: calc(var(--nav-ms) * 1.4); }

#loadbar { position: fixed; top: var(--safe-t); left: 0; right: 0; height: 3px; z-index: 50; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; }
#loadbar::before { content: ""; position: absolute; inset: 0; width: 40%; background: var(--partly); border-radius: 3px; animation: load 1s cubic-bezier(.4, 0, .2, 1) infinite; }
body.loading #loadbar { opacity: 1; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

.skel { background: linear-gradient(100deg, rgba(255,255,255,.14) 40%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.14) 60%) 0 0 / 300% 100%; border-radius: 14px; animation: shimmer 1.4s linear infinite; }
.skel-card { display: block; margin: 14px 0 6px; background: var(--paper); padding: 7px 7px 14px; border-radius: 3px; box-shadow: var(--print-shadow); }
.skel-card .skel { background-color: var(--paper-2); background-image: linear-gradient(100deg, #eceef7 40%, #f7f8fc 50%, #eceef7 60%); border-radius: 0; }
.skel-card .line { height: 11px; margin-top: 10px; border-radius: 6px; }
.skel-card .line.short { width: 55%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.btn, .chip, .tape, .board .face, .tab-add {
  transition: transform .18s var(--spring), rotate .35s var(--spring), background-color .2s, color .2s, box-shadow .2s, opacity .2s, filter .2s;
}
.btn:active:not(:disabled), .chip:active:not(:disabled), .tape:active { transform: scale(.95); }
.tab-add:active { transform: scale(.9); }
.tab-add svg { transition: transform .35s var(--spring); }
body.sheet-open .tab-add svg { transform: rotate(45deg); }
.tabbar svg { transition: transform .2s var(--spring); }
.tabbar a:active svg { transform: scale(.86); }
@media (hover: hover) {
  .card:hover { rotate: 0deg; transform: translateY(-4px); box-shadow: var(--print-shadow-lifted); }
  .board:hover .face { rotate: 0deg; }
  .btn:hover:not(:disabled) { filter: brightness(.96); }
  .btn.primary:hover:not(:disabled) { filter: brightness(1.12); }
  .chip:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .24); }
  .sheet .chip:hover:not([aria-pressed="true"]) { background: var(--paper-line); }
  .tabbar a:hover { color: var(--wall); }
}

.tab-ind {
  position: absolute; top: var(--t, 40px); left: var(--l, 0); right: var(--r, 100%); height: 12px; pointer-events: none;
  background: var(--highlight); border-radius: 3px 7px 4px 8px; rotate: -1.5deg; opacity: 0;
}
.tab-ind.on { opacity: 1; }
/* The front edge leads and the back edge follows, so the marker stretches toward the tab you tapped. */
.tab-ind.ready { transition: left var(--dl, .32s) var(--m-settle), right var(--dr, .32s) var(--m-settle), top .3s, opacity .2s; }

.scrim { animation: scrim-in .25s ease-out; }
.scrim.closing { animation: scrim-out .24s ease-in forwards; pointer-events: none; }
.sheet { animation: sheet-up .38s cubic-bezier(.2, .9, .2, 1) backwards; transition: transform var(--m-long) var(--m-sheet); }
.sheet.dragging { transition: none; }
.closing .sheet { animation: sheet-down .24s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes scrim-in { from { background-color: transparent; } }
@keyframes scrim-out { to { background-color: transparent; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }

#statusLine { display: inline-block; transition: opacity .2s, transform .2s; }
#statusLine.swap-out { opacity: 0; transform: translateY(-4px); }
#results { transition: opacity .2s; }
#results.dim { opacity: .45; }

.pop { animation: pop .35s var(--spring) backwards; }
.q.pop { transform-origin: right bottom; }
.a.pop { transform-origin: left bottom; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.a.arrived { animation: fade .3s ease; }
@keyframes fade { from { opacity: .3; } }
.typing { display: inline-flex; gap: 4px; padding: 5px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s ease-in-out infinite both; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.shake { animation: shake .4s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- swipeable prints (Library: swipe.js; Backlog: enableSwipe in app.js) ---------- */
.card { touch-action: pan-y; -webkit-user-drag: none; -webkit-touch-callout: none; }
.card.swiping { transition: none; z-index: 5; }

#toast.has-act { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
.toast-act { background: none; border: 0; padding: 4px 2px; color: var(--partly); font: 800 14px var(--ui); cursor: pointer; }

/* ---------- recently deleted ---------- */
.lede { color: var(--on-wall-2); font: 500 15px/1.4 var(--ui); margin: -8px 0 18px; }
.trash-list { display: grid; gap: 10px; }
.trash-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
  background: var(--paper); border-radius: 3px; padding: 8px 10px 8px 8px; box-shadow: var(--print-shadow);
}
.trash-thumb { display: block; width: 64px; height: 48px; overflow: hidden; background: #2a2622; border-radius: 2px; }
.trash-thumb img, .trash-thumb .noimg { width: 100%; height: 100%; object-fit: cover; font-size: 11px; }
.trash-text { min-width: 0; display: grid; gap: 2px; }
.trash-text a { color: var(--ink); text-decoration: none; font: 600 15px/1.2 var(--hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-text span { color: var(--ink-3); font: 500 12px var(--ui); }
.trash-banner {
  display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 14px;
  padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--skip) 18%, var(--paper)); font: 600 14px var(--ui);
}

/* ---------- key moments and timed steps ---------- */
.moments .what { display: block; font-size: 14.5px; color: var(--ink); }
.moments b { display: block; font: 800 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.moments .warning b { color: var(--skip-ink); }
.moments .result b { color: color-mix(in srgb, var(--worth) 60%, var(--ink)); }
.moments .why-m { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.moments .onscreen {
  display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 5px; background: var(--paper-line);
  font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow-wrap: anywhere;
}
.steps .ts { margin-right: 4px; }
.hint { color: var(--ink-3); font-size: 13px; margin: 8px 0 0; }
.clip-btn {
  display: flex; width: fit-content; align-items: center; gap: 4px; margin-top: 8px; padding: 5px 10px; border-radius: 999px;
  border: 1.5px solid var(--wall); background: none; color: var(--wall); font: 700 12.5px var(--ui); cursor: pointer;
}
.clip-btn[aria-expanded="true"] { background: var(--wall); color: #fff; }
.clip { margin-top: 8px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.clip iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- generative views ---------- */
.cal-wrap { display: grid; gap: 14px; }
.cal { --event: var(--wall); --peak: var(--partly); --closed: var(--skip); --weather: #7fe0ff; --tip: var(--worth); }
.cal-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cal-head h3 { font: 700 20px var(--hand); margin: 0; }
.cal-head span { font: 500 12px var(--ui); color: var(--ink-3); }
.cal-note { margin: 4px 0 8px; color: var(--ink-2); font-size: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 360px; margin: 6px 0 10px; }
.cal-dow { text-align: center; font: 700 10.5px var(--ui); color: var(--ink-3); padding-bottom: 2px; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font: 600 12.5px var(--ui); color: var(--ink-2); background: var(--paper-line); font-variant-numeric: tabular-nums; }
.cal-day.blank { background: none; }
.cal-day.on { color: #fff; font-weight: 800; }
.cal-day.event { background: var(--event); }
.cal-day.peak { background: var(--peak); color: var(--ink); }
.cal-day.closed { background: var(--closed); }
.cal-day.weather { background: var(--weather); color: var(--ink); }
.cal-day.tip { background: var(--tip); color: var(--ink); }
.cal-marks { list-style: none; padding: 0; margin: 0; display: grid; }
.cal-marks li { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--paper-line); font-size: 14px; align-items: baseline; }
.cal-marks li:last-child { border-bottom: 0; }
.cal-when { font: 700 12.5px var(--ui); font-variant-numeric: tabular-nums; }
.cal-marks b { font: 800 10.5px var(--ui); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; margin-right: 4px; background: var(--paper-line); }
.cal-marks .event b { background: var(--wall); color: #fff; }
.cal-marks .peak b { background: var(--partly); }
.cal-marks .closed b { background: var(--skip); color: #fff; }
.cal-marks .weather b { background: #7fe0ff; }
.cal-marks .tip b { background: var(--worth); }
.cal-marks .ts { margin-left: 4px; }

.itin { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 82%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; }
@media (min-width: 720px) { .itin { grid-auto-columns: minmax(230px, 1fr); } }
.itin-day { scroll-snap-align: start; background: var(--paper); border: 1px solid var(--paper-line); border-radius: 10px; padding: 12px 12px 6px; }
.itin-day h3 { font: 700 18px var(--hand); margin: 0 0 6px; }
.itin-day ol { list-style: none; margin: 0; padding: 0; counter-reset: stop; }
.itin-day li { position: relative; padding: 0 0 10px 18px; display: grid; gap: 1px; border-left: 2px solid var(--paper-line); margin-left: 5px; }
.itin-day li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--wall); }
.itin-day li:last-child { border-left-color: transparent; }
.itin-time { font: 700 12px var(--ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.itin-name { font: 600 15px var(--ui); color: var(--ink); text-decoration: none; }
.itin-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.itin-note { font-size: 13.5px; color: var(--ink-2); }
.itin-day .ts { justify-self: start; }

.vtable-wrap { overflow-x: auto; margin: 0 -2px; padding: 0 2px; }
.vtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.vtable th, .vtable td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.vtable thead th { border-bottom: 2px solid var(--ink); white-space: nowrap; }
.vtable thead button { background: none; border: 0; padding: 0; font: 800 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
.vtable thead button[data-dir="asc"]::after { content: " ↑"; }
.vtable thead button[data-dir="desc"]::after { content: " ↓"; }
.vtable tbody th { font-weight: 700; min-width: 110px; }
.vtable td { white-space: normal; }
.tag-sp { font: 800 9.5px var(--ui); text-transform: uppercase; letter-spacing: .05em; color: var(--skip-ink); background: color-mix(in srgb, var(--skip) 16%, transparent); padding: 1px 5px; border-radius: 4px; vertical-align: 1px; }
.row-note { display: block; font: 400 12.5px/1.35 var(--ui); color: var(--ink-3); margin-top: 2px; }

/* route, ranking, bars, settings, checklist, plan, decision, pros/cons, timeline, commands, recipe scaler */
.route { list-style: none; margin: 0; padding: 0; counter-reset: stop; }
.route li { display: grid; gap: 1px; padding: 8px 0 8px 34px; position: relative; border-bottom: 1px solid var(--paper-line); }
.route li::before { content: "•"; position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--wall); color: #fff; font: 800 11px var(--ui); }
.route.ordered li::before { counter-increment: stop; content: counter(stop); }
.route li .ts, .rank .ts, .checklist .ts, .tl .ts, .decide-opt .ts { justify-self: start; }
.route-btn { margin-top: 12px; display: inline-flex; }

.rank { list-style: none; margin: 0; padding: 0; }
.rank li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--paper-line); }
.rank li:last-child { border-bottom: 0; }
.rank-n { font: 900 16px var(--ui); color: var(--wall); }
.rank b { display: block; font-size: 15px; }
.tiers { display: grid; gap: 8px; }
.tier { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; }
.tier .rank li { grid-template-columns: 0 1fr auto; gap: 0 8px; }
.tier-label { display: grid; place-items: center; height: 44px; border-radius: 8px; font: 900 20px var(--ui); background: var(--paper-line); }
.t-S { background: var(--skip); color: #fff; } .t-A { background: #ffb17a; } .t-B { background: var(--partly); } .t-C { background: var(--worth); } .t-D { background: #7fe0ff; } .t-F { background: #c9a8ff; }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.bar-top b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar { display: block; height: 10px; border-radius: 6px; background: var(--paper-line); margin-top: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); background: var(--wall); border-radius: 6px; }
.bar.best i { background: var(--worth); }
.bar-total { margin: 12px 0 0; padding-top: 8px; border-top: 2px solid var(--ink); display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.bar-total b { margin-left: auto; font-size: 17px; }

.settings { margin: 0 0 12px; display: grid; }
.settings > div { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--paper-line); }
.settings dt { font-weight: 700; font-size: 14px; display: grid; }
.settings dd { margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.settings code, .cmd code { font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.settings code { background: var(--paper-line); padding: 2px 7px; border-radius: 5px; overflow-wrap: anywhere; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--paper-line); }
.checklist label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15px; }
.checklist input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--wall); flex: none; }
.checklist label span { display: grid; }
.checklist input:checked + span { text-decoration: line-through; color: var(--ink-3); }

.plan-ex { list-style: none; margin: 6px 0 0; padding: 0; }
.plan-ex li { display: grid; gap: 1px; padding: 6px 0; border-bottom: 1px solid var(--paper-line); }
.plan-ex li:last-child { border-bottom: 0; }

.decide { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.decide-opt { position: relative; border: 1px solid var(--paper-line); border-radius: 10px; padding: 12px; display: grid; gap: 4px; align-content: start; }
.decide-opt.picked { border: 2px solid var(--wall); }
.decide-opt h3 { font: 700 17px var(--hand); margin: 0; }
.decide-opt .itin-note { margin: 0; }
.pick-badge { justify-self: start; font: 800 10px var(--ui); letter-spacing: .06em; text-transform: uppercase; background: var(--wall); color: #fff; padding: 2px 7px; border-radius: 5px; }

.pc { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pc h3 { font: 800 12px var(--ui); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.pc-pro { color: color-mix(in srgb, var(--worth) 60%, var(--ink)); }
.pc-con { color: var(--skip-ink); }

.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--paper-line); }
.tl li:last-child { border-bottom: 0; }
.tl-date { font: 800 13px var(--ui); color: var(--wall); }
.tl li div { display: grid; gap: 1px; }

.cmd { margin-bottom: 12px; }
.cmd-head { display: flex; justify-content: space-between; gap: 10px; font: 600 13px var(--ui); color: var(--ink-2); margin-bottom: 4px; }
.cmd pre { margin: 0; background: #171a2e; color: #e8ebff; border-radius: 8px; padding: 12px; overflow-x: auto; }
.cmd pre code { white-space: pre; }
.cmd-copy { margin-top: 6px; }

.scale { display: flex; gap: 6px; margin: 4px 0 6px; }
.scale .chip { height: 30px; padding: 0 12px; font-size: 13px; color: var(--ink); background: var(--paper-line); }
.scale .chip[aria-pressed="true"] { background: var(--wall); color: #fff; border-color: var(--wall); }
.itin-day .plan-ex li { padding-left: 0; margin-left: 0; border-left: 0; border-bottom: 1px solid var(--paper-line); }
.itin-day .plan-ex li::before { display: none; }

/* ---------- cook / workout / follow-along mode ---------- */
.start-mode { margin: 4px 0 10px; }
html.cooking, html.cooking body { overflow: hidden; }
.cook {
  position: fixed; inset: 0; z-index: 60; background: var(--paper); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; padding: calc(12px + env(safe-area-inset-top)) 20px calc(14px + env(safe-area-inset-bottom));
}
.cook-top { display: flex; align-items: center; gap: 10px; }
.cook-name { font: 700 17px var(--hand); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cook-count { font: 700 14px var(--ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cook-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--paper-line); font-size: 16px; cursor: pointer; }
.cook-bar { height: 5px; border-radius: 3px; background: var(--paper-line); margin: 10px 0 0; overflow: hidden; }
.cook-bar i { display: block; height: 100%; width: var(--w); background: var(--wall); transition: width .3s var(--ease-out); }
.cook-step { overflow-y: auto; padding: 22px 2px; align-self: center; touch-action: pan-y; }
.cook-step.in-next { animation: cook-in-next .28s var(--ease-out); }
.cook-step.in-prev { animation: cook-in-prev .28s var(--ease-out); }
@keyframes cook-in-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes cook-in-prev { from { opacity: 0; transform: translateX(-28px); } }
.cook-kicker { font: 800 13px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.cook-text { font: 600 clamp(24px, 6.4vw, 34px)/1.25 var(--ui); margin: 0; letter-spacing: -.01em; text-wrap: pretty; }
.cook-sub { font: 800 22px var(--ui); color: var(--wall); margin: 12px 0 0; }
.cook-note { font-size: 17px; color: var(--ink-2); margin: 10px 0 0; }
.cook-ing { font-size: 19px; }
.cook-ing label { font-size: 19px; }
.cook-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cook .chip { height: 42px; padding: 0 16px; background: var(--paper-line); color: var(--ink); font-size: 15px; }
.cook-clip { margin-top: 12px; }
.cook-timers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; min-height: 0; }
.cook-run { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font: 800 18px var(--ui); font-variant-numeric: tabular-nums; }
.cook-run.done { background: var(--skip); animation: cook-pulse 1s ease-in-out infinite; }
.cook-run button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; }
@keyframes cook-pulse { 50% { transform: scale(1.05); } }
.cook-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.cook-nav .btn { height: 56px; font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .cook-step.in-next, .cook-step.in-prev, .cook-run.done { animation: none; } }

/* ---------- backlog ---------- */
.backlog .page-title { align-items: baseline; }
.bl-count { margin-left: auto; font: 700 15px var(--ui); color: var(--on-wall-2); }
.bl-stage { position: relative; max-width: 360px; margin: 6px auto 0; min-height: 420px; }
.bl-stage > .card { z-index: 1; }
/* The Backlog print takes vertical drags too (a flick up pins it on a board), so the page scrolls from around it, not from it. */
.backlog:not([data-selecting]) .bl-stage > .bl-card { touch-action: none; }
.bl-card { margin: 18px 0 0; padding: 9px 9px 16px; }
.bl-card .sticker.big { top: -16px; right: -12px; }
.bl-reason { font: 500 15px/1.4 var(--ui); color: var(--ink); margin: 10px 2px 0; }
.bl-best { font: 400 14px/1.4 var(--ui); color: var(--ink-2); margin: 8px 2px 0; }
.bl-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; max-width: 360px; margin: 18px auto 0; }
.bl-actions .btn { height: 50px; }
.bl-help { text-align: center; max-width: 360px; margin: 14px auto 0; font-size: 13.5px; }

/* Select mode keeps the prints on the wall, with controls on white paper. */
.backlog .page-title { gap: 12px; flex-wrap: wrap; }
.bl-card { --tilt: 0deg; }
.bl-selection-tools { display: flex; align-items: center; gap: 14px; color: var(--on-wall-2); font: 600 14px var(--ui); }
.backlog[data-selecting] { padding-bottom: 180px; }
.backlog[data-selecting] .bl-stage { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 18px; align-items: start; margin-top: 24px; }
.backlog[data-selecting] .bl-card { margin: 0; cursor: pointer; touch-action: pan-y; }
.backlog[data-selecting] .bl-card .thumb { aspect-ratio: 4 / 3; }
.backlog[data-selecting] .bl-card .sticker.big { transform: scale(.7); transform-origin: top right; }
.bl-card[aria-checked="true"] { outline: 4px solid var(--highlight); outline-offset: 3px; }
.bl-tick { position: absolute; top: 4px; left: 4px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; background: var(--paper); border: 2px solid var(--wall); border-radius: 12px; color: var(--wall); font: 800 24px var(--ui); }
.bl-card[aria-checked="true"] .bl-tick { background: var(--wall); color: var(--paper); border-color: var(--paper); }
.bl-batch-bar { position: fixed; z-index: 25; left: 50%; bottom: calc(104px + var(--safe-b)); translate: -50% 0; width: min(560px, calc(100% - 24px)); padding: 12px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 6px 24px rgba(8, 14, 80, .25); }
.bl-batch-bar p { margin: 0 0 8px; font: 600 14px/1.4 var(--ui); }
.bl-batch-bar p:empty { display: none; }
.bl-batch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-batch-actions .btn { min-height: 44px; flex: 1; padding: 0 10px; white-space: nowrap; }
body:has(.backlog[data-selecting]) #toast { bottom: calc(238px + var(--safe-b)); }

/* ---------- views, compact pass: summary first, detail on tap ---------- */
[hidden] { display: none !important; }
.show-all { display: block; margin: 6px 0 0; padding: 4px 0; background: none; border: 0; color: var(--wall); font: 700 13px var(--ui); cursor: pointer; }
.show-all:hover { text-decoration: underline; text-underline-offset: 3px; }

.cal-wrap { gap: 18px; }
.cal-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cal-head b { font: 800 15px var(--ui); }
.cal-head span { font: 400 13.5px/1.4 var(--ui); color: var(--ink-2); flex-basis: 100%; }
.cal-strip { display: flex; gap: 2px; margin: 8px 0 6px; height: 8px; }
.cal-strip i { flex: 1; border-radius: 2px; background: var(--paper-line); }
.cal-strip i.event { background: var(--wall); } .cal-strip i.peak { background: var(--partly); } .cal-strip i.closed { background: var(--skip); }
.cal-strip i.weather { background: #7fe0ff; } .cal-strip i.tip { background: var(--worth); }
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-list li { display: grid; grid-template-columns: 10px 44px 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; font-size: 14px; }
.cal-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wall); align-self: center; }
.dot.peak { background: var(--partly); } .dot.closed { background: var(--skip); } .dot.weather { background: #7fe0ff; } .dot.tip { background: var(--worth); }
.cal-when { font: 700 12.5px var(--ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-what { min-width: 0; }
.cal-more summary { cursor: pointer; color: var(--wall); font: 700 13px var(--ui); margin-top: 4px; list-style: none; }
.cal-more summary::-webkit-details-marker { display: none; }
.cal-more summary::after { content: " ↓"; }
.cal-more[open] summary::after { content: " ↑"; }
.cal-more .cal-grid { max-width: 280px; margin-top: 8px; }
.cal-more .cal-day { font-size: 11.5px; border-radius: 5px; }

.itin { grid-auto-columns: minmax(210px, 74%); }
.itin-day { padding: 10px 12px 8px; }
.itin-day h3 { font: 800 14px var(--ui); margin: 0 0 6px; }
.itin-day ol li { grid-template-columns: 44px 1fr; column-gap: 8px; padding-bottom: 8px; }
.itin-day ol li > :not(.itin-time) { grid-column: 2; }
.itin-day ol li .itin-time { grid-row: 1; }
.itin-name { font-size: 14.5px; }

.plan-ex li { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 5px 0; }
.decide-opt { padding: 10px 12px; gap: 2px; }
.decide-opt h3 { font: 800 15px var(--ui); }
.decide-if { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.tl li { grid-template-columns: 76px 1fr; padding: 6px 0; font-size: 14px; }
.tl li div { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.bars { gap: 8px; }
.bar { height: 6px; margin-top: 3px; }
.bar-top { font-size: 13.5px; }
.settings > div { padding: 6px 0; }
.cmds { display: grid; gap: 10px; }
.cmd { margin: 0; }
.cmd-head { align-items: center; margin-bottom: 4px; }
.cmd-head span:first-child { flex: 1; }
.cmd-copy { background: none; border: 0; padding: 2px 0; color: var(--wall); font: 700 12.5px var(--ui); cursor: pointer; }
.cmd pre { padding: 10px 12px; font-size: 12.5px; }
.checklist li { padding: 6px 0; }
.route li { padding: 6px 0 6px 32px; }
.rank li { padding: 5px 0; }
.tier { grid-template-columns: 30px 1fr; gap: 8px; }
.tier-label { height: 30px; border-radius: 6px; font-size: 15px; }
.route li::before { width: 18px; height: 18px; font-size: 10.5px; top: 7px; }
.preview-loading { color: var(--ink-3); font: 600 13px var(--ui); margin-top: 18px; animation: pulse-soft 1.2s ease-in-out infinite; }
@keyframes pulse-soft { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .preview-loading { animation: none; } }

/* ---------- saved bits: compact rows, grouped ---------- */
.bits-search { margin: 4px 0 10px; }
.bits-cats { margin-bottom: 8px; }
.bits-sort { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--on-wall); font: 600 14px var(--ui); margin: 6px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--wall-glass); }
.bits { display: grid; gap: 18px; margin-top: 6px; }
.bit-group { display: grid; gap: 6px; }
.bit-h { font: 700 18px var(--hand); color: var(--on-wall); margin: 4px 2px 2px; }
.bit-h span { font: 700 13px var(--ui); color: var(--on-wall-2); margin-left: 4px; }
.bit { background: var(--paper); border-radius: 6px; box-shadow: var(--print-shadow); overflow: hidden; }
.bit.tried .bit-row b { text-decoration: line-through; color: var(--ink-3); }
.bit-row { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 11px 12px; cursor: pointer; color: var(--ink); }
.bit-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.bit-main b { font: 700 15px/1.25 var(--ui); }
.bit-meta { font: 600 12px var(--ui); color: var(--ink-3); }
.bit-line { font: 400 13.5px/1.35 var(--ui); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bit-chev { width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); rotate: 45deg; flex: none; margin: -4px 4px 0 0; transition: rotate .2s var(--ease-out); }
.bit-row[aria-expanded="true"] .bit-chev { rotate: 225deg; margin-top: 4px; }
.bit-body { padding: 0 12px 12px; border-top: 1px solid var(--paper-line); }
.bit-body .item-card { box-shadow: none; padding: 10px 0 0; background: none; }
.bit-body .item-card h3, .bit-body .item-card .meta { display: none; }
.bit-body .item-card + .item-card { border-top: 1px dashed var(--paper-line); margin-top: 10px; }
.bit-body .item-card + .item-card h3 { display: block; font-size: 15px; }
.bit-body .thing-foot { flex-wrap: wrap; row-gap: 6px; }
.bits-none { color: var(--on-wall-2); text-align: center; margin: 24px 0; }
@media (prefers-reduced-motion: reduce) { .bit-chev { transition: none; } }
.bit-body.prog .item-card h3 { display: block; font: 800 15px var(--ui); margin: 0 0 4px; }

/* ---------- video page: jump bar, folded sections ---------- */
.jump {
  position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 18px -20px 4px; padding: calc(env(safe-area-inset-top) + 8px) 20px 8px;
  background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-line); border-radius: 0; overscroll-behavior-x: contain;
}
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; padding: 6px 11px; border-radius: 999px; background: var(--paper-line); color: var(--ink); font: 700 12.5px var(--ui); text-decoration: none; }
.jump a:hover { background: color-mix(in srgb, var(--wall) 14%, var(--paper-line)); }
.panel .section { scroll-margin-top: calc(env(safe-area-inset-top) + 64px); }
.saved-items { display: grid; gap: 10px; }
.jump a[aria-current] { background: var(--wall); color: #fff; }

/* ---------- accounts: sign-in, invite page, settings ---------- */
.topbar-end { display: flex; align-items: center; gap: 10px; }
.icon-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--wall-glass); color: var(--on-wall); }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: rgba(255, 255, 255, .24); }
.login label { display: block; font: 600 13px var(--ui); color: var(--ink-2); margin: 8px 0 6px; }
.form-note { font-size: 13px; color: var(--ink-3); margin: 2px 0 12px; }
.login .err { color: var(--skip-ink); font-size: 14px; min-height: 20px; margin: 4px 0 8px; }
.invite { margin-top: 8vh; }
.invite-note { font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--paper-2); border-radius: 12px; padding: 12px 14px; margin: 6px 0 12px; }
.set-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--paper-line); }
.set-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.set-block > .btn { margin-top: 6px; margin-right: 8px; }
.set-block .row .btn { flex: none; }
.set-block .sheet-actions { margin-top: 8px; }
.set-block .sheet-actions .btn { height: 44px; }
.danger-zone .link-quiet.danger { color: var(--skip-ink); }
.danger-zone form { margin-top: 10px; }

/* Owner's friends and invites screen */
.person .allowance-form { margin-top: 10px; }
.person .allowance-form .field { max-width: 110px; }
.person-actions { align-items: center; margin-top: 8px; }
.person-actions .btn { flex: none; }
.delete-confirm { margin-top: 8px; }
.delete-confirm .btn { margin-top: 4px; }
.invite-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; }
.invite-row .meter-note { display: block; margin: 0; }


.bit-list { display: grid; gap: 6px; }
.bits-product-filter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 14px; color: var(--on-wall-2); font: 500 13px var(--ui); }
.bits-product-filter .link-quiet, .bits-more { color: var(--on-wall); }
.bits-more { justify-self: start; padding: 8px 2px; font: 600 13px var(--ui); }

/* Fun, said in words under the byline (app.js funHtml). Quiet grey when low; orange only when it's fun. */
.fun-note { font: 700 14px/1.1 var(--hand); color: var(--fun-ink); margin: 6px 1px 0; rotate: -2deg; transform-origin: left; }
.fun-note[data-fun-level="0"] { color: var(--ink-3); font-weight: 600; }
.fun-note[data-fun-level="1"] { color: var(--ink-2); font-weight: 600; }
.fun-note[data-fun-level="3"] { font-size: 15.5px; }
.fun-note svg { width: .8em; height: .8em; vertical-align: -1px; margin-left: 3px; fill: currentColor; }
.print .fun-note { font-size: 17px; margin-top: 8px; }
.print .fun-note[data-fun-level="3"] { font-size: 19px; }

/* ---------- add to your phone (guide.js): a stack of instant prints, each showing one tap ---------- */
.guide { --g-spring: cubic-bezier(.3, 1.45, .5, 1); }
.guide :focus-visible { outline-color: var(--wall); }
.g-stage {
  position: relative; display: grid; background: var(--wall); border-radius: 18px; padding: 24px 18px 26px;
  overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.g-print {
  grid-area: 1 / 1; position: relative; background: var(--paper); border-radius: 3px; padding: 9px 9px 15px;
  box-shadow: var(--print-shadow); opacity: 0; pointer-events: none; transform: rotate(var(--tilt, 0deg));
}
.g-print.is-current { opacity: 1; pointer-events: auto; z-index: 2; }
.g-tape {
  position: absolute; z-index: 2; top: -11px; left: 18px; rotate: -3deg; background: var(--tape, #ff8fc8); color: var(--ink);
  font: 600 13px/1 var(--hand); padding: 5px 12px 4px; border-radius: 2px; box-shadow: 0 2px 5px rgba(8, 14, 80, .22);
}
.g-photo { background: var(--bg, #7fe0ff); border-radius: 2px; aspect-ratio: 5 / 4; overflow: hidden; }
.g-svg { display: block; width: 100%; height: 100%; }
.g-svg .u { font-family: var(--ui); }
.g-svg .h { font-family: var(--hand); }
.g-cap { font: 700 20px/1.15 var(--hand); margin: 13px 3px 4px; color: var(--ink); }
.g-text { font: 400 15px/1.45 var(--ui); color: var(--ink-2); margin: 0 3px; }
.g-hint { font: 600 13.5px/1.3 var(--hand); color: var(--ink-3); margin: 8px 3px 0; }
.g-install { width: calc(100% - 6px); height: 46px; margin: 12px 3px 0; }
.g-sticker {
  position: absolute; z-index: 3; top: -20px; right: -12px; width: 80px; height: 80px; border-radius: 50%; rotate: 10deg;
  display: grid; place-items: center; background-color: var(--worth); color: var(--ink); border: 4px solid var(--paper);
  font: 900 18px/1 var(--ui); letter-spacing: -.02em; text-transform: uppercase;
  background-image: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 44%);
  box-shadow: 0 4px 8px rgba(8, 14, 80, .3);
}
.g-dots { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 6px; min-height: 40px; }
.g-dot-btn { width: 30px; height: 40px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.g-dot-btn span { width: 9px; height: 9px; border-radius: 50%; background: #b4b8cc; }
.g-dot-btn[aria-current="step"] span { background: var(--wall); transform: scaleX(2.4); }
.g-pause {
  position: absolute; right: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-2); cursor: pointer;
}
.g-pause svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-pause .g-i-play, .g-pause.is-paused .g-i-pause { display: none; }
.g-pause.is-paused .g-i-play { display: inline; fill: currentColor; }
.g-actions { margin-top: 8px; }
.g-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.guide-row { width: 100%; justify-content: space-between; margin-top: 8px; }

/* Everything that moves is transform or opacity. Without motion, each print shows the finished state of its tap. */
.g-svg * { transform-box: fill-box; transform-origin: center; }
.g-svg .o-tr { transform-origin: 100% 0; }
.g-ring { opacity: .5; }
.g-ring.pop { opacity: 0; }
.g-dot { opacity: 0; }
@keyframes g-slide { from { transform: translateY(150px); } }
@keyframes g-fade { from { opacity: 0; } }
@keyframes g-pop { from { transform: scale(.55); opacity: 0; } }
@keyframes g-icon { from { transform: scale(0); opacity: 0; } 60% { opacity: 1; } }
@keyframes g-note { from { transform: translateY(7px) rotate(-3deg); opacity: 0; } }
@keyframes g-rise { from { transform: translateY(9px); opacity: 0; } }
@keyframes g-ring { from { transform: scale(.3); opacity: .95; } to { transform: scale(2); opacity: 0; } }
@keyframes g-burst { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.3); opacity: 0; } }
@keyframes g-press { 0% { transform: scale(0); opacity: 0; } 14% { transform: scale(1); opacity: 1; } 26% { transform: scale(.7); } 38% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes g-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-8deg) scale(1.12); } 40% { transform: rotate(7deg) scale(1.12); } 60% { transform: rotate(-4deg) scale(1.06); } 80% { transform: rotate(2deg); } }
@keyframes g-slap { from { transform: scale(2.4); opacity: 0; } 55% { transform: scale(.86); opacity: 1; } 78% { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .g-print { transition: transform .72s var(--g-spring), opacity .4s ease; will-change: transform, opacity; }
  .g-print.is-future { transform: translateX(112%) rotate(7deg); }
  .g-print.is-past { transform: translateX(-112%) rotate(-8deg); }
  .g-print.g-instant { transition: none; }
  .g-dot-btn span { transition: transform .45s var(--g-spring), background-color .2s; }
  .guide .is-current .g-cap { animation: g-rise .55s ease-out .2s backwards; }
  .guide .is-current .g-text { animation: g-rise .55s ease-out .28s backwards; }
  .guide .is-current .g-hint, .guide .is-current .g-install { animation: g-rise .55s ease-out .36s backwards; }
  .guide .is-current .g-sticker { animation: g-slap .7s cubic-bezier(.16, 1, .3, 1) 1.2s backwards; }
  .is-current .g-slide { animation: g-slide .75s var(--g-spring) .35s backwards; }
  .is-current .g-dim { animation: g-fade .4s ease .3s backwards; }
  .is-current .g-hl { animation: g-fade .35s ease 1.15s backwards; }
  .is-current .g-pop { animation: g-pop .5s var(--g-spring) .9s backwards; }
  .is-current .g-iconpop { animation: g-icon .85s var(--g-spring) .45s backwards; }
  .is-current .g-note { animation: g-note .5s ease-out .3s backwards; }
  .is-current .g-wiggle { animation: g-wiggle 1.3s ease-in-out 1.1s infinite; }
  .is-current .g-ring { animation: g-ring 1.5s ease-out .7s infinite both; }
  .is-current .g-dot { animation: g-press 1.5s ease-in-out .7s infinite both; }
  .is-current .g-ring.pop { animation: g-burst 1s ease-out .75s both; }
  .is-current .g-ring.once, .is-current .g-dot.once { animation-iteration-count: 1; }
  .is-current .g-ring.late, .is-current .g-dot.late { animation-delay: 1.6s; }
}
@media (prefers-reduced-motion: reduce) {
  .g-stage { cursor: default; }
}

/* ---------- this week: a lemon sticker on the Your week card; the picks open in a sheet ---------- */
.week { background: none; color: var(--ink); padding: 0; margin: 0; box-shadow: none; position: relative; }
.sheet .week-title { margin: 0 0 4px; font: 700 22px/1.15 var(--hand); }
.week-empty { margin: 8px 0 4px; font: 500 14px var(--ui); color: var(--ink-3); }
/* The sticker: a lemon pill ("3 this week") on the Your week card, or next to Ask my library. Middle motion: a small
   settle, the note grows out of it and tucks back in with a little squish, one gentle sway with a shine per visit. */
.week-slot { position: relative; display: inline-flex; align-items: center; flex: none; }
.first-head .week-slot { margin: 0 auto 0 10px; align-self: center; }
.chips.has-week { overflow: visible; align-items: center; }
.chips.has-week .week-slot { margin-left: auto; }
.week-sticker { position: relative; height: 44px; margin: -5px 0; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.week-sticker[hidden], .week-note[hidden] { display: none; }
.week-pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 5px; border-radius: 999px; overflow: hidden;
  background: var(--tape-lemon, #ffe066); color: var(--ink); font: 700 13.5px/1 var(--hand); rotate: -2.5deg; pointer-events: none;
  box-shadow: 0 1px 1px rgba(8, 14, 80, .25), 0 5px 12px -3px rgba(8, 14, 80, .5);
  transition: background .35s, color .35s, box-shadow .35s, scale .2s var(--spring);
  animation: week-in .55s cubic-bezier(.3, 1.3, .5, 1) both;
}
.week-pill::after { content: "this week"; }
.week-pill::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); translate: -120% 0; }
.week-pill .n { display: inline-block; width: 25px; height: 25px; border-radius: 50%; background: var(--ink); color: var(--tape-lemon, #ffe066); font: 900 13px/25px var(--ui); text-align: center; transition: background .35s, color .35s; }
.week-pill .n.pop { animation: week-pop .4s cubic-bezier(.3, 1.3, .5, 1); }
.week-sticker:active .week-pill { scale: .94; }
.week-sticker.tuck .week-pill { animation: week-tuck .4s cubic-bezier(.3, 1.3, .5, 1); }
.week-sticker.wiggle .week-pill { animation: week-sway 1.9s cubic-bezier(.4, 0, .2, 1) .45s 1 both; }
.week-sticker.tuck.wiggle .week-pill { animation: week-tuck .4s cubic-bezier(.3, 1.3, .5, 1), week-sway 1.9s cubic-bezier(.4, 0, .2, 1) .45s 1 both; }
.week-sticker.wiggle .week-pill::before { animation: week-sheen 1.9s cubic-bezier(.4, 0, .2, 1) .45s 1 both; }
.week-sticker.seen .week-pill { animation: none; background: transparent; color: var(--on-wall); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.week-sticker.seen .week-pill .n { background: rgba(255, 255, 255, .2); color: var(--on-wall); }
.on-card .week-sticker.seen .week-pill { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--paper-line); }
.on-card .week-sticker.seen .week-pill .n { background: var(--paper-line); color: var(--ink); }
body.sheet-open .week-pill, body.sheet-open .week-pill::before { animation: none; }
/* The picks sheet sits where the toast would, so its Undo toast goes to the top while it is open. */
body:has(#weekWrap) #toast { bottom: auto; top: calc(14px + env(safe-area-inset-top)); }
@keyframes week-in { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: none; } }
@keyframes week-tuck { 0% { transform: scale(1); } 40% { transform: scale(1.07, .94); } 100% { transform: scale(1); } }
@keyframes week-sway { 0% { rotate: -2.5deg; } 15% { rotate: 1.5deg; } 32% { rotate: -5deg; } 50% { rotate: -1deg; } 66%, 100% { rotate: -2.5deg; } }
@keyframes week-sheen { 0%, 30% { translate: -120% 0; } 70%, 100% { translate: 120% 0; } }
@keyframes week-pop { from { transform: scale(.7); opacity: .3; } to { transform: none; opacity: 1; } }
.week-note {
  position: absolute; z-index: 4; width: 152px; padding: 10px 12px 9px; border: 0; text-align: left; cursor: pointer;
  background: var(--tape-lemon, #ffe066); color: var(--ink); border-radius: 2px;
  box-shadow: 0 1px 1px rgba(8, 14, 80, .2), 0 12px 20px -6px rgba(8, 14, 80, .55);
  font: 700 13px/1.2 var(--hand); opacity: 0; transform: scale(.35) rotate(7deg);
  transition: transform .5s cubic-bezier(.3, 1.25, .5, 1), opacity .25s;
}
.on-card .week-note { left: -22px; top: calc(100% + 8px); transform-origin: 20% 0%; --r: 2deg; }
.on-wall .week-note { right: -4px; bottom: calc(100% + 12px); transform-origin: 80% 100%; --r: -3deg; }
.week-note b { display: block; font: inherit; }
.week-note span { display: block; font: 600 11.5px var(--hand); color: var(--ink-2); margin-top: 2px; }
.week-note::before { content: ""; position: absolute; top: -7px; left: 54px; width: 40px; height: 13px; background: var(--tape-pink, #ff8fc8); rotate: 3deg; opacity: .92; }
.week-note.on { opacity: 1; transform: rotate(var(--r)); }
.week-note.fold { opacity: 0; transform: scale(.2) rotate(-4deg); transition: transform .42s var(--m-settle), opacity .35s .06s; }
body.sheet-open .week-note { display: none; }
@media (prefers-reduced-motion: reduce) { .week-pill, .week-pill::before, .week-pill .n.pop { animation: none !important; } .week-note, .week-note.fold { transition: none; } }
.week-title { margin: 0 0 6px; font: 700 18px/1.15 var(--hand); color: var(--ink); }
.week-list { list-style: none; margin: 0; padding: 0; }
.week-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--paper-line); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.week-row:first-child { border-top: 0; }
.week-row.gone { opacity: 0; transform: translateX(14px); }
.week-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 0; color: inherit; text-decoration: none; min-height: 64px; }
.week-thumb { flex: none; width: 52px; height: 52px; border-radius: 3px; overflow: hidden; background: var(--paper-2); }
.week-thumb img, .week-thumb .noimg { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font: 600 11px var(--hand); text-transform: capitalize; color: #b9b0a0; background: #2a2622; }
.week-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.week-text b { font: 700 14.5px/1.25 var(--ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.week-text span { font: 500 12.5px var(--ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-done { flex: none; height: 44px; min-width: 56px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font: 600 13px var(--ui); cursor: pointer; }
.resurface { max-width: 560px; background: var(--paper); color: var(--ink); border-radius: 3px; padding: 14px 14px 6px; margin: 4px 0 18px; box-shadow: var(--print-shadow); position: relative; rotate: .4deg; }
.resurface::before { content: ""; position: absolute; top: -8px; right: 22px; width: 56px; height: 16px; background: var(--tape-lemon, #ffe066); rotate: 3deg; opacity: .92; box-shadow: 0 1px 2px rgba(8, 14, 80, .15); }
.resurface .week-text { flex: 1; padding: 8px 0; }
.resurface-open { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--ink); color: var(--paper); }
.week-done:hover { background: var(--paper-line); }
.week-done:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .week-row { transition: none; } }

/* ---------- "Your week" and "Your first week": paper slips taped above the shelf ---------- */
.recap, .first { max-width: 560px; background: var(--paper); color: var(--ink); border-radius: 3px; padding: 14px 14px 12px; margin: 6px 0 18px; box-shadow: var(--print-shadow); position: relative; rotate: .5deg; }
.recap::before, .first::before { content: ""; position: absolute; top: -8px; right: 22px; width: 56px; height: 16px; background: var(--tape-sky, #7fe0ff); rotate: 4deg; opacity: .92; box-shadow: 0 1px 2px rgba(8, 14, 80, .15); }
.first::before { background: var(--tape-pink, #ff8fc8); }
.recap-title { margin: 0 0 10px; font: 700 18px/1.15 var(--hand); color: var(--ink); }
.recap-tiles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin: 0; }
.recap-tile { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; background: var(--paper-2); border-radius: 10px; padding: 10px; min-width: 0; }
.recap-tile dd { margin: 0; font: 900 24px/1 var(--ui); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.recap-tile dt { font: 500 12px/1.25 var(--ui); color: var(--ink-3); }
.recap-tile.lead { background: var(--highlight); }
.recap-tile.lead dt { color: var(--ink-2); }
.first-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.first-hide { min-height: 44px; padding: 0 4px; font: 600 13px var(--ui); color: var(--ink-3); background: none; border: 0; }
.first-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.first-step { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--paper-line); }
.first-step:first-child { border-top: 0; }
.first-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--ui); background: var(--wall); color: var(--on-wall); }
.first-step.done .first-num { background: var(--worth); color: var(--ink); }
.first-step.done .first-text b { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.first-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.first-text b { font: 700 14.5px/1.25 var(--ui); }
.first-text > span { font: 500 12.5px/1.3 var(--ui); color: var(--ink-3); }
.first-count { font: 600 12px var(--ui); color: var(--wall); margin-left: 4px; }
.first-go { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font: 700 13px var(--ui); text-decoration: none; }
.first-go:hover { background: var(--paper-line); }
@media (max-width: 360px) { .recap-tiles { grid-template-columns: 1fr 1fr; } .recap-tile.lead { grid-column: 1 / -1; } }

/* ---------- "new to you" chip and interests ---------- */
.interest-tag { display: inline-block; border-radius: 999px; padding: 3px 9px; font: 700 11px var(--ui); background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--paper-line); }
.interest-tag.new { background: var(--highlight); color: var(--ink); box-shadow: none; }
.interest-tag.known { background: var(--paper); color: var(--ink-3); }
.interest-line { margin: 4px 0 10px; font: 600 14px/1.3 var(--hand); color: var(--ink-2); }
textarea.field { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.4; font-family: var(--ui); }
/* ---------- collection mind map ---------- */
.mm-panel { padding-bottom: 30px; }
.mm-lead { font: 500 17px/1.45 var(--ui); margin: 0 0 16px; max-width: 56ch; }
.mm-meta { font: 500 13.5px var(--ui); color: var(--ink-3); margin: 0 0 14px; }
.mm-note { font: 500 13.5px/1.45 var(--ui); color: var(--ink-3); margin: 14px 0 0; max-width: 62ch; }
.mm-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; background: var(--paper-2); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; font: 500 14px/1.4 var(--ui); }
.mm-tools { display: flex; gap: 8px; margin: 0 0 14px; }
.mm-tools .btn { height: 34px; font-size: 13.5px; }
.mm-empty { color: var(--ink-2); padding: 30px 8px; }
.mm-empty h2 { color: var(--ink); }
.mm-topic { background: var(--paper-2); border-radius: 14px; margin: 0 0 10px; border-left: 6px solid var(--tape, #ff8fc8); }
.mm-topic > summary, .mm-sub > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; }
.mm-topic > summary::-webkit-details-marker, .mm-sub > summary::-webkit-details-marker { display: none; }
.mm-topic > summary::before, .mm-sub > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); rotate: -45deg; margin-right: 2px; }
.mm-topic[open] > summary::before, .mm-sub[open] > summary::before { rotate: 45deg; }
.mm-title { font: 700 17px/1.2 var(--hand); flex: 1; min-width: 0; }
.mm-count { font: 600 12px var(--ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mm-sub { border-top: 1px solid var(--paper-line); margin: 0 6px 0 14px; }
.mm-sub > summary { font: 600 15px/1.25 var(--ui); padding-left: 4px; }
.mm-points { margin: 0; padding: 0 6px 10px 22px; list-style: none; }
.mm-points li { position: relative; margin: 0 0 10px; font: 400 15px/1.45 var(--ui); }
.mm-points li::before { content: ""; position: absolute; left: -14px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--wall); }
.mm-srcs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.mm-src { max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--paper-line); color: var(--wall); font: 600 12px var(--ui); text-decoration: none; }
.mm-src:hover { border-color: var(--wall); }
.mm-tabs { display: flex; gap: 6px; margin: 0 0 14px; }
.mm-tab { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink); font: 600 14px var(--ui); cursor: pointer; }
.mm-tab[aria-pressed="true"] { background: var(--wall); color: var(--on-wall); }
.mm-kind { font: 700 17px/1.2 var(--hand); margin: 20px 0 8px; }
.mm-combined { padding-left: 22px; }


/* ---------- mind map: print-card start page, real progress ---------- */
.mm-stage { display: flex; flex-direction: column; min-height: calc(100svh - 150px - var(--safe-t)); gap: 22px; padding-bottom: calc(var(--safe-b) + 108px); }
.mm-stage > .mm-print { margin-block: auto; }
.mm-print { background: var(--paper); color: var(--ink); border-radius: 22px; padding: 22px 20px 20px; box-shadow: var(--print-shadow); rotate: -1deg; max-width: 460px; width: 100%; margin: 0 auto; }
.mm-print h2 { font: 700 26px/1.1 var(--hand); margin: 0 0 8px; }
.mm-print p { margin: 0; }
.mm-print .btn { margin-top: 16px; }
.mm-nothing { text-align: center; padding: 30px 20px; }
.mm-nothing p { color: var(--ink-2); }
.mm-count-line { font: 500 19px/1.3 var(--ui); }
.mm-hint-lead { font: 500 14px/1.4 var(--ui); color: var(--ink-3); margin-top: 14px !important; }
.mm-hints, .mm-found { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mm-hint { background: var(--paper-2); border-radius: 999px; padding: 5px 12px; font: 600 13.5px var(--ui); }
.mm-print #mmDetail { margin-top: 18px; }
.mm-hint.found { background: var(--highlight); animation: mm-pop .35s var(--spring) both; }
.mm-slots { display: flex; gap: 6px; list-style: none; margin: 16px 0 0; padding: 0; }
.mm-slot { flex: 1; height: 10px; border-radius: 99px; background: var(--paper-line); transform-origin: left; animation: mm-wait 1.4s ease-in-out infinite; }
.mm-slot.done { background: var(--wall); animation: mm-pop .35s var(--spring) both; }
.mm-slot.failed { background: var(--skip); animation: none; }
.mm-status { font: 700 15px/1.3 var(--hand); margin-top: 10px !important; }
.mm-status:empty, .mm-found:empty, .mm-slots[hidden] { display: none; }
.mm-status.bad { color: var(--skip-ink); font: 600 14.5px/1.4 var(--ui); }
.mm-print.making .mm-hints, .mm-print.making .mm-hint-lead, .mm-print.making #mmDetail { display: none; }
.mm-cta { position: sticky; bottom: calc(var(--safe-b) + 96px); z-index: 3; max-width: 460px; width: 100%; margin: 0 auto; }
.mm-cta .btn { width: 100%; height: 52px; font-size: 17px; background: var(--paper); color: var(--wall); box-shadow: var(--print-shadow); }
.mm-cta .btn:disabled { opacity: .7; }
@keyframes mm-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes mm-wait { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mm-slot, .mm-slot.done, .mm-hint.found { animation: none; } }

/* ---------- checklist from a save ---------- */
.cl-count { font: 500 13px var(--ui); color: var(--ink-3); margin-left: 6px; font-variant-numeric: tabular-nums; }
.cl-group { font: 700 15px/1.2 var(--hand); margin: 14px 0 4px; color: var(--ink-2); }
.cl { list-style: none; margin: 0; padding: 0; max-width: 64ch; }
.cl-row { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 2px; border-bottom: 1px solid var(--paper-line); cursor: pointer; font: 400 15px/1.4 var(--ui); }
.cl-row input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--worth); }
.cl-row input:checked + span { color: var(--ink-3); text-decoration: line-through; }
.cl-tools { display: flex; gap: 16px; margin-top: 10px; }
.link-btn { background: none; border: 0; padding: 8px 0; color: var(--wall); font: 600 14px var(--ui); cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-note { font: 500 12.5px var(--ui); color: var(--ink-3); margin: 4px 0 0; }

/* ---------- suggested collections ---------- */
.suggest { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sg-label { font: 500 13px var(--ui); color: var(--ink-3); }
.sg-chip { min-height: 34px; padding: 0 12px; border: 1.5px dashed var(--paper-line); border-radius: 999px; background: var(--paper-2); color: var(--ink); font: 600 13.5px var(--ui); cursor: pointer; }
.sg-chip:hover { border-color: var(--wall); }
.sg-chip:disabled { opacity: .5; cursor: default; }
.sg-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font: 500 20px/1 var(--ui); cursor: pointer; }
.quick-read { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted, #6b6b6b); }

/* ---------- pull to refresh (public/pull-refresh.js) ---------- */
.ptr { position: fixed; top: calc(var(--safe-t) + 4px); left: 50%; width: 44px; margin-left: -22px; height: 44px; z-index: 30; display: grid; place-items: center; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.ptr-semi { font: 900 54px/1 var(--ui); color: var(--partly); text-shadow: 0 3px 8px rgba(8, 14, 80, .35); display: block; }
.ptr.busy .ptr-semi { animation: ptr-bob .6s ease-in-out infinite alternate; }
@keyframes ptr-bob { to { transform: translateY(7px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.busy .ptr-semi { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html { overscroll-behavior-y: contain; }

/* ---------- "Done recently" under the week shelf ---------- */
.week-recent { max-width: 560px; margin: 10px 0 0; color: var(--ink-2); }
.week-recent summary { cursor: pointer; font: 600 13px var(--ui); padding: 10px 2px; min-height: 24px; opacity: .85; list-style: none; }
.week-recent summary::-webkit-details-marker { display: none; }
.week-recent[open] .week-list { background: var(--paper-2); color: var(--ink); border-radius: 12px; padding: 4px 12px; }
.week-recent .week-text { flex: 1; padding: 8px 0; }

/* ---------- motion language: "Instant Prints" (phone feel thread; every screen uses these) ----------
   Things drop in like prints dropped on a table: a small tilt, a short bounce, then still.
   Use the tokens; don't invent new curves. Animate transform and opacity only. Reduced motion is handled by the global rule above. */
:root {
  --m-settle: cubic-bezier(.3, 1.35, .45, 1);   /* lands with a small bounce */
  --m-sheet: cubic-bezier(.3, 1.15, .45, 1);    /* sheets: barely any bounce */
  --m-out: cubic-bezier(.4, 0, 1, 1);           /* leaving: quick, no bounce */
  --m-press: .14s;                              /* press feedback */
  --m-short: .3s;                               /* small things (chips, indicators) */
  --m-long: .5s;                                /* sheets, screens */
  --m-stagger: 12ms;                            /* gap between list items, first 6 only: the last starts at 72ms */
  --m-enter: .22s;                              /* one list item's entrance; with the stagger the whole list is finished by about .3s */
  --m-press-scale: .95;
}
@keyframes rise { from { opacity: 0; transform: translateY(-22px) rotate(-2.5deg) scale(.96); } }
.stagger > *, .stagger > .col > .card, .stagger .place-list > *, .stagger .thing-list > * {
  animation: rise var(--m-enter) var(--m-settle) backwards; animation-delay: calc(min(var(--i, 0), 6) * var(--m-stagger));
}
.stagger > .col, .stagger > .place-list, .stagger > .thing-list, .stagger .card.still { animation: none; }
.enter { animation: rise var(--m-enter) var(--m-settle) backwards; }
.card:active { transform: scale(var(--m-press-scale)); }
.btn:active:not(:disabled), .chip:active:not(:disabled), .tape:active, .week-done:active, .first-go:active { transform: scale(var(--m-press-scale)); }

.sheet { animation: sheet-up var(--m-long) var(--m-sheet) backwards; box-shadow: 0 90px 0 var(--paper); /* fills the gap if the bounce lifts it */ }
.closing .sheet { animation: sheet-down .24s var(--m-out) forwards; }
#toast { transition: opacity .2s ease, transform var(--m-short) var(--m-settle); }

/* Sheets: scrolling inside one never moves the page behind it (iOS passes the rest of a scroll to the page otherwise). */
html:has(body.sheet-open) { overflow: hidden; }
.scrim { overscroll-behavior: contain; touch-action: none; }
.sheet { overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
/* ---- find or start a collection (public/find.js) ---- */
.find-box { display: flex; gap: 8px; margin: 4px 0 14px; }
.find-box .field { margin: 0; flex: 1; min-width: 0; }
.find-box .btn { height: 48px; flex: none; }
.find-h { margin: 6px 0 8px; font: 700 14px var(--ui); color: var(--on-wall-2); }
.find-groups { display: grid; gap: 8px; margin-bottom: 20px; }
.find-group { display: flex; align-items: stretch; background: var(--paper); border-radius: 14px; box-shadow: 0 3px 10px rgba(8, 14, 80, .22); }
.find-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); font: 600 15px var(--ui); }
.find-emoji { font-size: 20px; }
.find-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-name small, .find-t small { display: block; font: 400 12px var(--ui); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.find-n { background: var(--worth); color: var(--ink); border-radius: 99px; padding: 2px 9px; font: 700 12px var(--ui); }
.find-x { width: 44px; background: none; border: 0; color: var(--ink-3); font-size: 20px; cursor: pointer; }
.find-preview .field { margin: 4px 0 0; }
.find-sub { color: var(--on-wall-2); font-size: 13px; margin: 8px 0 12px; }
.find-row { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); color: var(--ink); border-radius: 12px; padding: 12px; margin-bottom: 8px; cursor: pointer; }
.find-row.weak { opacity: .8; }
.find-row input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--wall); }
.find-t { font: 600 14px var(--ui); min-width: 0; }
.find-bar { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
.find-bar .btn { width: 100%; height: 50px; background: var(--partly); color: var(--ink); }

/* Products: a short shelf of repeated recommendations above a seven-group index. */
.product-picks { margin: 22px 0 18px; }
.product-picks h2 { font: 700 22px var(--hand); margin: 0 0 12px; }
.product-picks h2 > span { display: block; font: 500 12px var(--ui); color: var(--on-wall-2); margin-top: 5px; }
.product-pick-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; }
.product-pick { display: grid; align-content: start; gap: 10px; flex: 0 0 190px; min-width: 0; padding: 14px 12px 18px; background: var(--paper); color: var(--ink); border-radius: 3px; box-shadow: 0 8px 18px rgba(8,14,80,.25); text-decoration: none; scroll-snap-align: start; transition: transform .18s ease-out, opacity .18s ease-out; }
.product-pick b { font: 700 19px/1.2 var(--hand); overflow-wrap: anywhere; }
.product-pick > span:last-child { font: 500 12px var(--ui); color: var(--ink-3); }
.product-tape { background: var(--tape-lilac, #c9a8ff); font: 600 12px var(--ui); padding: 4px 7px; justify-self: start; }
.product-scope { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 12px var(--ui); color: var(--on-wall-2); margin: 14px 0; }
.bit-location { font: 600 11.5px/1.4 var(--ui); color: var(--wall); width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.bit-location.search-location { background: var(--highlighter, #ffe27a); color: var(--ink); }
.bit-also { font: 400 12px/1.4 var(--ui); color: var(--ink-3); overflow-wrap: anywhere; }
.products-view .bits-cats .chip { min-height: 40px; }
.products-view .bit-row b { overflow-wrap: anywhere; }
@media (hover:hover) { .product-pick:hover { transform: translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { .product-pick { transition: none; } }

.try-now { margin-top: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer; background: var(--wall); color: var(--on-wall); font: 600 13.5px var(--ui); }
.try-now:disabled { opacity: .5; cursor: default; }
.why.dev.small { font-weight: 500; font-size: 12px; margin-top: 4px; }
.wait-explain { margin: 6px 0 0; }

/* Library swipe: paper lanes behind the print, never a colour wash over it.
   Gesture physics and tuning live in swipe.js. Backlog keeps its own gesture. */
.swipe-print { position: relative; margin: 14px 0 6px; isolation: isolate; }
.swipe-print > .card { margin: 0; rotate: 0deg; transform: rotate(var(--tilt, 0deg)); transition: transform .25s var(--ease-out), opacity .09s; }
.swipe-print.swipe-revealing { z-index: 8; }
.swipe-print > .card.swipe-active {
  transition: none; animation: none; rotate: 0deg; z-index: 2;
  user-select: none; -webkit-user-select: none;
}
/* The print's own slot shows a taped paper slip behind it: a red bin sticker to bin, a little stack of prints to board.
   The slot never moves, so whatever the print uncovers is always on screen, in either column. Words + picture + shape, never colour alone. */
.swipe-slip {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 3px; display: flex; align-items: center; padding: 0 9px;
  background: #fff2f3; box-shadow: inset 0 0 0 1px rgba(8, 14, 80, .06), 0 6px 14px -6px rgba(8, 14, 80, .45);
}
.swipe-slip.swipe-delete { justify-content: flex-end; }
.swipe-slip.swipe-file { justify-content: flex-start; padding: 0 5px; background: #e3f6ff; }
.swipe-slip.swipe-keep { justify-content: flex-start; background: #e8fbef; }
.swipe-fx svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.swipe-slip-tape { position: absolute; top: -9px; right: 10px; width: 46px; height: 18px; opacity: .92; rotate: 7deg; background: var(--tape-pink, #ff8fc8); box-shadow: 0 1px 2px rgba(8, 14, 80, .15); }
.swipe-file .swipe-slip-tape, .swipe-keep .swipe-slip-tape { right: auto; left: 10px; rotate: -6deg; background: var(--tape-sky, #7fe0ff); }
.swipe-keep .swipe-slip-tape { background: var(--tape-lime, #b8f28c); }
.swipe-say { width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--ink); }
.swipe-file .swipe-say { width: 76px; }
.swipe-sticker {
  display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--paper); border-radius: 50%; rotate: -4deg;
  background: var(--skip); color: var(--ink); box-shadow: 0 3px 8px rgba(8, 14, 80, .28);
}
.swipe-sticker svg { font-size: 28px; }
.swipe-sticker.swipe-tick { border-radius: 14px; background: var(--worth); rotate: 4deg; }
.swipe-sticker.swipe-tick svg { stroke-width: 2.6; }
/* A board, drawn the way boards look in the app: three little prints fanned out. */
.swipe-sticker.swipe-stack { position: relative; display: block; width: 72px; height: 62px; border: 0; border-radius: 0; rotate: 0deg; background: none; box-shadow: none; }
.swipe-stack i {
  position: absolute; top: 4px; left: 19px; width: 34px; height: 43px; border: 3px solid var(--paper); border-bottom-width: 9px; border-radius: 2px;
  box-shadow: 0 4px 8px rgba(8, 14, 80, .4);
}
.swipe-stack i:nth-child(1) { background: var(--tape-lilac, #c9a8ff); rotate: -14deg; translate: -14px 5px; }
.swipe-stack i:nth-child(2) { background: var(--tape-apricot, #ffb17a); rotate: 12deg; translate: 14px 5px; }
.swipe-stack i:nth-child(3) { background: var(--tc, var(--wall)); rotate: -2deg; transition: background-color .15s; }
.swipe-sticker.swipe-tapechip {
  width: auto; height: auto; max-width: 150px; padding: 6px 12px; border: 0; border-radius: 0; rotate: -5deg; background: var(--tc, var(--tape-pink, #ff8fc8));
  font: 700 14px/1.1 var(--hand); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 3px 6px rgba(8, 14, 80, .3);
}
/* Backlog, flicked up: the print rises, so the slip's words sit at the bottom of the slot, with a push-pin on the tape. */
.swipe-slip.swipe-pinboard, .swipe-slip.swipe-pinpick { justify-content: center; align-items: flex-end; padding: 0 12px 18px; }
.swipe-pinboard .swipe-word, .swipe-pinpick .swipe-word { font-size: 19px; }
.swipe-pinboard .swipe-say, .swipe-pinpick .swipe-say { width: auto; max-width: 200px; }
.swipe-pinboard .swipe-note, .swipe-pinpick .swipe-note { max-width: 160px; }
.swipe-pinboard .swipe-slip-tape, .swipe-pinpick .swipe-slip-tape { left: 50%; translate: -50% 0; }
.swipe-pinboard .swipe-tapechip::before {
  content: ""; position: absolute; left: 50%; top: -11px; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 16%, #ff6b8a 22%, #d81f42 70%); box-shadow: 0 2px 3px rgba(8, 14, 80, .4);
}
.swipe-sticker.swipe-tapechip { position: relative; overflow: visible; }
.swipe-word { font: 700 19px/1 var(--hand); white-space: nowrap; }
.swipe-file .swipe-word { font-size: 16.5px; letter-spacing: -.01em; }
.swipe-note { max-width: 74px; font: 600 11px/1.2 var(--ui); color: #4a4d5e; }
.swipe-fx.swipe-armed .swipe-note { color: var(--ink); background: #ffe27a; padding: 2px 4px; border-radius: 2px; rotate: -2deg; }
.swipe-file.swipe-armed .swipe-word { background: linear-gradient(transparent 58%, #8de0ff 58%); }
.swipe-file.swipe-armed .swipe-note { background: #8de0ff; }
.swipe-keep.swipe-armed .swipe-word { background: linear-gradient(transparent 58%, #b8f28c 58%); }
.swipe-keep.swipe-armed .swipe-note { background: #b8f28c; }
.swipe-menu {
  position: absolute; right: 0; bottom: -13px; z-index: 3; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  font: 900 24px/1 var(--ui); cursor: pointer;
}
.swipe-menu::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(8,14,80,.2); z-index: -1; }
.swipe-revealing > .swipe-menu { opacity: 0; pointer-events: none; }
.swipe-actions {
  position: absolute; right: 0; bottom: 26px; z-index: 10; min-width: 152px;
  padding: 6px; border-radius: 12px; background: white; color: var(--ink); box-shadow: var(--print-shadow);
}
.swipe-actions button { display: flex; gap: 7px; align-items: center; width: 100%; min-height: 44px; border: 0; padding: 7px; border-radius: 7px; background: var(--paper-tint); color: var(--ink); font: 600 12px var(--ui); text-align: left; cursor: pointer; }
.swipe-actions button + button { margin-top: 4px; }
.swipe-actions svg { width: 22px; height: 22px; flex-shrink: 0; }
.swipe-filed { position: absolute; left: 8px; top: 8px; z-index: 4; max-width: calc(100% - 16px); padding: 6px 9px; background: #ffc531; color: #2a2622; border-radius: 2px; font: 600 13px var(--hand); transform: rotate(-2deg); box-shadow: 0 3px 8px rgba(8,14,80,.22); }
@media (prefers-reduced-motion: reduce) {
  .swipe-print > .card.swipe-active { rotate: 0deg; }
  .swipe-filed, .swipe-sticker, .swipe-note, .swipe-slip-tape { transform: none !important; rotate: 0deg !important; }
}
#recapShare { color: var(--wall); font-weight: 700; }
#recapShare:disabled { opacity: .5; }
/* ---------- phone in landscape: slim taped pill, shorter hero ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  /* Sideways phone: the pill always wears its slim, icons-only look so it doesn't eat the short screen. */
  .tabbar { height: 50px; }
  .tabbar a span { opacity: 0; height: 0; }
  .tabbar .tab-ind { opacity: 0; }
  .tab-add { width: 46px; height: 46px; margin-top: -18px; }
  html { scroll-padding-bottom: calc(76px + var(--safe-b)); }
  .save-grid { grid-template-columns: minmax(200px, 340px) minmax(0, 1fr); gap: 24px; }
  .save-grid > .print { position: sticky; top: 12px; }
  .hero-media.wide, .hero-media.tall { aspect-ratio: 16 / 10; max-height: 46dvh; }
}

/* ---------- tab switch loading: "developing prints" ----------
   Blank prints stand in for a tab that isn't ready after 150 ms (held 350 ms at least); the real prints then develop in, 30 ms apart, first 6 only (about 0.4 s in all).
   Static on purpose (no shimmer, no looping blur). Timing constants: GHOST_DELAY_MS / GHOST_MIN_MS in cache-rules.js. */
@keyframes tab-develop { from { filter: sepia(.7) brightness(.45) contrast(.7) blur(3px) saturate(.35); } }
html .dev-in { animation: tab-develop .24s var(--ease-out) var(--dv, 0ms) backwards; }
.ghost-print { display: block; margin: 14px 0 6px; background: var(--paper); padding: 7px 7px 14px; border-radius: 3px; box-shadow: var(--print-shadow); rotate: var(--tilt, 0deg); }
.board-grid > .ghost-print { margin: 0; }
.ghost-print .gp-img { aspect-ratio: 16 / 11; }
.ghost-list { display: grid; gap: 12px; }
.ghost-row { display: flex; gap: 12px; align-items: center; background: var(--paper); padding: 10px; border-radius: 3px; box-shadow: var(--print-shadow); rotate: var(--tilt, 0deg); }
.ghost-row .gp-pic { width: 64px; height: 64px; flex: none; }
.ghost-row .gp-text { flex: 1; }
.gp { background: var(--paper-2); border-radius: 2px; }
.gp-line { height: 11px; margin-top: 10px; border-radius: 6px; }
.gp-line.short { width: 55%; }
@media (prefers-reduced-motion: reduce) { html .dev-in { animation: none; } }

/* ---------- Save a link: the print that slides out of the Save button (app.js ejectPrint) ---------- */
.eject { position: fixed; z-index: 40; background: var(--paper); padding: 6px 6px 24px; border-radius: 3px; box-shadow: var(--print-shadow); pointer-events: none; will-change: transform; }
.eject .hero-media { width: 100%; height: 100%; }
.add-err { color: var(--skip-ink); font: 700 13.5px/1.3 var(--ui); margin: 8px 2px 0; }