/* ============================================================
   Roaminder — "errand" world: fridge door meets route map.
   Loads after wayfinding.css. The signage, map paper and route
   colours stay; the list itself is back on paper — notepad pages,
   sticky notes, magnets and tape — because that is the product:
   the list on the fridge comes with you onto the map.

   Map      ground, navy sign bar, route lines (from wayfinding)
   Fridge   notepad, sticky yellow, magnets, tape, handwriting
   ============================================================ */

:root,
html:root[data-theme] {
  --sticky:   #FFE066;
  --tape:     rgba(255,224,102,.82);
  --pad-line: #BCD6F0;
  --pad-rule: #F19A9A;
  --hand:     "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --marker:   "Permanent Marker", "Segoe Print", "Bradley Hand", cursive;
}

::selection { background: var(--sticky); color: var(--sign); }

/* ---------- the headline: a sign with a note stuck on it ---------- */
.hero h1 { font-size: clamp(3rem, 7vw, 5.8rem); }
.hero h1 .tag-ink {
  display: inline-block; position: relative;
  background: var(--sticky); color: var(--sign);
  font-family: var(--marker); font-weight: 400; font-size: .82em; line-height: 1.15;
  padding: .06em .28em .02em; margin: .04em .02em; border-radius: 2px;
  transform: rotate(-2deg);
  box-shadow: 0 10px 14px -10px rgba(15,42,68,.55);
  white-space: nowrap;
}
/* the magnet holding the note to the sign */
.hero h1 .tag-ink::before {
  content: ""; position: absolute; top: -.2em; left: 50%; width: .34em; height: .34em; margin-left: -.17em;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 10%, transparent 11%), var(--l-red);
  box-shadow: 0 4px 5px -2px rgba(15,42,68,.45), inset 0 -3px 4px rgba(0,0,0,.2);
}
.tag-ink .cycle { display: inline-block; }
.tag-ink .cycle.out { animation: noteOut .28s ease-in forwards; }
.tag-ink .cycle.in  { animation: noteIn .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes noteOut { to { opacity: 0; transform: translateY(-.25em); } }
@keyframes noteIn  { from { opacity: 0; transform: translateY(.3em); } }
.hero .big-lede { max-width: 30ch; }

/* four fixed lines, so a longer word on the note never reflows the page */
.hero h1 .h-l { display: block; }
.tag-ink .cycle { text-align: center; }

/* ---------- hero story: the notepad becomes the map ---------- */
.hs { position: relative; width: min(100%, 440px); margin-inline: auto; transform: rotate(-1.5deg); }
.hs.buzz { animation: hsBuzz .42s linear; }
@keyframes hsBuzz { 0%,100% { transform: rotate(-1.5deg); } 20% { transform: rotate(-2.4deg) translateX(-3px); } 40% { transform: rotate(-.6deg) translateX(3px); } 60% { transform: rotate(-2.2deg) translateX(-2px); } 80% { transform: rotate(-.9deg) translateX(2px); } }
.hs-pg { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 0 #E6E2D8, 0 2px 0 #fff, 0 3px 0 #E6E2D8, 0 28px 34px -20px rgba(15,42,68,.55); }
.hs-mag { position: absolute; top: -15px; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; z-index: 5;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.9) 0 9%, transparent 10%), radial-gradient(circle at 50% 60%, #E5484D 0 55%, #B8323A 100%);
  box-shadow: 0 7px 8px -3px rgba(15,42,68,.45); }
.hs text { stroke: none; }
.hs-hd { font-family: var(--marker); font-size: 23px; fill: #0F2A44; }
.hs-it { font-family: var(--hand); font-weight: 700; font-size: 34px; fill: #1B3553; }
.hs-ag { font-family: var(--hand); font-weight: 700; font-size: 25px; fill: #D93A40; }
.hs-tg { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .06em; }
.hs-bang-t { font: 800 25px var(--display); fill: #0F2A44; }
.hs-rule { stroke: #C4DAF0; stroke-width: 1.4; fill: none; }
.hs-road { stroke: #BCD6F0; stroke-width: 1.4; transition: stroke .7s, stroke-width .9s cubic-bezier(.22,1,.36,1); }
.map .hs-road { stroke: #CBD5DD; stroke-width: 17; }
.hs-road.hs-in { stroke: transparent; stroke-width: 0; transition-delay: .2s; }
.map .hs-road.hs-in { stroke: #F3F6F8; stroke-width: 12; }
.hs-lane { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 7 8; opacity: 0; transition: opacity .5s .9s; }
.map .hs-lane { opacity: 1; }
.hs-vr { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1) .5s; }
.map .hs-vr { stroke-dashoffset: 0; }
.hs-pop { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .35s, transform .55s cubic-bezier(.3,1.6,.5,1); }
.map .hs-pop { opacity: 1; transform: none; }
.hs-tree, .hs-tree circle { fill: #A6DDB0; stroke: #2EA66A; stroke-width: 2; }
.hs-trail { fill: none; stroke: #14BDB6; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hs-car, .hs-home, .hs-trail { opacity: 0; transition: opacity .4s; }
.map .hs-car, .map .hs-home, .map .hs-trail { opacity: 1; }
.hs-sk { stroke: #E5484D; stroke-width: 4.5; stroke-linecap: round; fill: none; }
.hs-bang { transform: translateY(8px) scale(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .38s cubic-bezier(.3,1.9,.5,1); }
.hs-bang.on { transform: none; }
.hs-words { transition: opacity .6s; }
.hs-words.out { opacity: 0; }
.hs-nt { position: absolute; left: 4%; right: 4%; top: 14px; z-index: 6; display: grid; grid-template-columns: 36px 1fr; gap: 1px 12px; align-items: center;
  background: rgba(15,42,68,.97); color: #fff; border-radius: 16px; padding: 12px 14px; font: 600 13px/1.3 var(--font);
  opacity: 0; transform: translateY(-18px) scale(.95); transition: .4s cubic-bezier(.3,1.4,.5,1); box-shadow: 0 18px 24px -14px rgba(15,42,68,.8); }
.hs-nt.on { opacity: 1; transform: none; }
.hs-ic { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(160deg, #2FD3CC, #0E9C96); color: #0F2A44; font: 800 20px/36px var(--display); text-align: center; }
.hs-h { font-size: 11px; color: #9FB6CC; letter-spacing: .08em; }
.hs-nt b { font: 800 15px/1.25 var(--font); color: #fff; }
.hs-nt em { font-style: normal; color: #9EE6E1; font-weight: 700; }
.hs-stamp { position: absolute; left: 50%; top: 60%; z-index: 4; white-space: nowrap; font-family: var(--marker); font-size: clamp(26px, 7vw, 35px); color: #E5484D;
  border: 4px solid #E5484D; border-radius: 9px; padding: 0 16px; background: rgba(255,255,255,.9);
  opacity: 0; transform: translate(-50%,-50%) rotate(-9deg) scale(2.2); transition: .34s cubic-bezier(.3,1.6,.5,1); }
.hs-stamp.on { opacity: .95; transform: translate(-50%,-50%) rotate(-9deg) scale(1); }
.hs-note { text-align: right; font-size: .85rem; color: var(--faint); margin: 14px 4px 0; }
@media (prefers-reduced-motion: reduce) { .hs, .hs * { transition: none !important; animation: none !important; } }

/* ---------- the notepad: every .receipt is paper again ---------- */
.receipt {
  --text: var(--sign); --muted: #3F566B;
  background:
    linear-gradient(90deg, transparent 44px, var(--pad-rule) 44px 46px, transparent 46px),
    repeating-linear-gradient(#fff 0 27px, var(--pad-line) 27px 28px);
  background-position: 0 6px, 0 6px;
  color: var(--sign); border-radius: 2px;
  font-family: var(--hand); font-size: 1.5rem; line-height: 28px; font-weight: 700;
  padding: 34px 20px 22px 60px; max-width: 360px;
}
.receipt::before {
  content: ""; position: absolute; top: -15px; left: 50%; width: 32px; height: 32px; margin-left: -16px; z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 10%, transparent 11%), var(--mag, var(--l-red));
  box-shadow: 0 7px 8px -3px rgba(15,42,68,.4), inset 0 -4px 6px rgba(0,0,0,.2);
}
.receipt .r-head { text-align: left; height: 56px; }
.receipt .r-name { display: block; font-family: var(--marker); font-weight: 400; font-size: 1.7rem; line-height: 30px; }
.receipt .r-sub { display: block; font-size: 1.1rem; line-height: 26px; letter-spacing: 0; margin: 0; color: var(--pop); }
.receipt hr { display: block; border: 0; height: 28px; margin: 0; }
.receipt .r-row { padding: 0; border: 0; }
.receipt .r-row .r-q { flex: none; color: #5A7085; font-weight: 700; }
.receipt .r-bars { display: none; }
.receipt .r-note { font-weight: 500; font-size: 1.1rem; line-height: 28px; color: #5A7085; margin: 0; }
.receipt.is-printing .r-line { animation: rPrint .7s steps(22, end) both; animation-delay: calc(var(--i, 0) * .34s + .25s); }
@keyframes rPrint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .receipt.is-printing .r-line { animation: none; } }

/* handwriting in sentence case; the markup is upper-case source */
.receipt .r-row span, .receipt .r-sub, .receipt .r-foot { text-transform: lowercase; }
.receipt .r-row span::first-letter, .receipt .r-sub::first-letter, .receipt .r-foot::first-letter { text-transform: uppercase; }

/* ---------- sort demo: sticky note → the directory board ---------- */
.typebox {
  position: relative; background: var(--sticky); color: var(--sign); border: 0; border-radius: 2px;
  max-width: 380px; margin-inline: auto; padding: 34px 24px 26px; transform: rotate(-2deg);
  font-family: var(--hand); font-size: 1.75rem; line-height: 1.25; font-weight: 700;
  box-shadow: var(--shadow-lg);
}
.typebox::before {
  content: ""; position: absolute; top: -15px; left: 50%; width: 32px; height: 32px; margin-left: -16px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 10%, transparent 11%), var(--l-blue);
  box-shadow: 0 7px 8px -3px rgba(15,42,68,.4), inset 0 -4px 6px rgba(0,0,0,.2);
}
.typebox small { font-family: var(--font); color: #5A5220; letter-spacing: .08em; }
.typebox .caret { background: var(--sign); }
/* the sorted side stays a sign: the list, arrived on the map */
.sortdemo .receipt {
  background: var(--sign); color: #fff; border-radius: var(--r-lg);
  font-family: var(--font); font-size: 1.1rem; line-height: 1.35; font-weight: 600;
  padding: 18px 22px 16px; max-width: 420px; --text: #fff; --muted: #BFD3E6;
}
.sortdemo .receipt::before { content: none; }
.sortdemo .receipt hr { display: none; }
.sortdemo .receipt .r-row { padding: 7px 0 7px 38px; border-bottom: 1px solid rgba(255,255,255,.14); }
.sortdemo .receipt .r-row .r-q { color: #BFD3E6; font-weight: 500; }
.sortdemo .receipt .r-row span { text-transform: none; }
.sortdemo .receipt .r-note { color: #9FB6CC; font-size: .85rem; text-align: right; margin: 10px 0 0; }

/* ---------- Fred: a snapshot taped to the map ---------- */
.fred { overflow: visible; transform: rotate(-.5deg); }
.fred::before, .fred::after {
  content: ""; position: absolute; top: -16px; width: 96px; height: 28px; z-index: 5;
  background: var(--tape); box-shadow: 0 1px 2px rgba(15,42,68,.25);
}
.fred::before { left: -34px; transform: rotate(-36deg); }
.fred::after { right: -34px; transform: rotate(36deg); }
.fred-stage { overflow: hidden; }
.fred.is-fs { transform: none; overflow: hidden; }
.fred.is-fs::before, .fred.is-fs::after { content: none; }

/* ---------- the oven note ---------- */
.oven-note {
  position: relative; width: min(100%, 360px); padding: 38px 28px 26px;
  background: var(--sticky); color: var(--sign); transform: rotate(2deg);
  box-shadow: var(--shadow-lg); border-radius: 2px;
}
.oven-note::before {
  content: ""; position: absolute; top: -15px; left: 50%; width: 32px; height: 32px; margin-left: -16px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 10%, transparent 11%), var(--l-amber);
  box-shadow: 0 7px 8px -3px rgba(15,42,68,.4), inset 0 -4px 6px rgba(0,0,0,.2);
}
.oven-note small { display: block; font-family: var(--font); font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: #5A5220; margin-bottom: 10px; }
.oven-note p { font-family: var(--hand); font-weight: 700; font-size: 2.1rem; line-height: 1.1; margin: 0; color: var(--sign); }
.oven-dial { display: block; width: 64px; height: 64px; margin: 18px 0 0 auto; color: var(--sign); }
.oven-dial svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.oven-dial .knob { transform-origin: 32px 32px; animation: dialOff 3.2s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes dialOff { 0%, 30% { transform: rotate(135deg); } 60%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .oven-dial .knob { animation: none; } }

/* ---------- ledger: a notepad page with route dots ---------- */
.receipt.ledger-sheet {
  background: #fff;
  color: var(--sign); font-family: var(--font); font-size: 1rem; line-height: 1.4; font-weight: 500;
  border: 0; padding: 0 0 4px; max-width: 920px; transform: rotate(-.3deg); overflow: visible;
  --mag: var(--l-teal);
}
.receipt.ledger-sheet::before { top: -15px; }
.ledger-sheet .receipt-title { border-radius: 2px 2px 0 0; }
.ledger-sheet .receipt-title span:last-child { font-family: var(--hand); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--sticky); }
.ledger .lrow + .lrow { border-top: 2px dashed var(--pad-line); }

/* ---------- CTA: the exit sign, taped up ---------- */
.cta-band { overflow: visible; transform: rotate(-.4deg); }
.cta-band::after {
  content: ""; position: absolute; top: -14px; right: -24px; width: 96px; height: 28px;
  background: var(--tape); transform: rotate(34deg); box-shadow: 0 1px 2px rgba(15,42,68,.3);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }