/* s-home.css: the home team's screen styles, loaded after app/ui.css.
   Both adults' homes, Akshay's send screen and his Backstage. Every color is a token from
   design/tokens.css (mixed with color-mix where a shade is needed); the components are app/ui.css's,
   laid out here for these screens only. Motion is small, plays once, and stops under reduced motion. */

/* ============================== Home ============================== */
/* The greeting by the hour in Gillette, the name in the display italic, in ink. */
.home .home-head { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.home .home-head .display em { color: var(--text); }

/* The one moment that matters now: a picture band, the words, one button. */
.next-step { box-shadow: var(--shadow-2), 0 0 0 1px var(--edge); }
.next-step > .card-media { aspect-ratio: 2 / 1; --art-ground: var(--surface); }
.next-step > .card-media > .window, .next-step > .card-media > svg { display: block; width: 100%; height: 100%; }
/* The snowscape keeps its own proportions, centered in the band: sky, ridge and train in view, and
   tonight's moon exactly where a tap on it is read. */
.next-step > .card-media:is(.is-scene, .is-yes, .is-lantern) > .window { overflow: hidden; }
.next-step > .card-media:is(.is-scene, .is-yes, .is-lantern) > .window > svg { position: relative; top: 50%; height: auto; aspect-ratio: 400 / 250; translate: 0 -50%; }
.next-step > .card-body { gap: 6px; padding: 16px 20px 20px; }
.next-step .card-title { font-size: 26px; line-height: 1.1; }
.next-step .card-sub { max-width: 34ch; }
.next-step .card-body > .btn { margin-top: 14px; }

/* Sent: the envelope is up in the sky, floating on its way, a dotted gold trail behind it. */
@keyframes hm-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -4px); } }
@keyframes hm-trail { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -18.2; } }
@media (prefers-reduced-motion: no-preference) {
  .envelope-art.is-flying .env-fly { animation: hm-float 4.2s var(--ease) infinite; }
  .envelope-art.is-flying .env-trail { animation: hm-trail 1.6s linear infinite; }
}
.next-step.is-sent .eyebrow { color: var(--good); }

/* Her yes: the ticket for four over the snow, every mark punched, her heart stamped on it. */
.next-step.is-yes { box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent), var(--accent-glow); }
.is-yes > .yes-ticket {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 12px 22px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--note-paper), color-mix(in srgb, var(--note-paper) 88%, var(--gold)));
  color: var(--note-ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--art-wire) 30%, transparent), 0 14px 30px -12px color-mix(in srgb, var(--art-wire) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
  transform: translate(-50%, -46%) rotate(-3deg);
  /* the notches of a ticket, at both sides */
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, var(--text)) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, var(--text)) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, transparent 98%, var(--text)) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, var(--text)) right / 51% 100% no-repeat;
}
.ya-head { font: 700 10.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--note-ink-2); }
.ya-marks { display: flex; gap: 8px; }
.ya-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--note-ink) 30%, transparent); color: color-mix(in srgb, var(--note-ink) 30%, transparent); }
.ya-mark svg { width: 15px; height: 15px; }
.ya-mark .shape, .ya-mark path { fill: currentColor; }
.ya-mark.is-in { background: var(--holly); box-shadow: none; color: var(--note-paper); }
.ya-mark.is-in[data-who="krista"] { background: var(--bulb-red); }
.is-yes > .ya-heart { position: absolute; left: calc(50% + 76px); top: calc(50% - 56px); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bulb-red); color: var(--note-paper); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--bulb-red) 80%, transparent); transform: rotate(12deg); }
.ya-heart svg { width: 17px; height: 17px; }
.ya-heart .shape, .ya-heart path { fill: currentColor; }
@keyframes hm-ticket-in { from { opacity: 0; transform: translate(-50%, -10%) rotate(-9deg) scale(.92); } to { opacity: 1; transform: translate(-50%, -46%) rotate(-3deg); } }
@keyframes hm-stamp { 0% { opacity: 0; transform: rotate(12deg) scale(1.9); } 60% { opacity: 1; transform: rotate(12deg) scale(.9); } 100% { opacity: 1; transform: rotate(12deg) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .is-yes > .yes-ticket.is-live { animation: hm-ticket-in .7s var(--ease-out) .15s both; }
  .is-yes > .ya-heart.is-live { animation: hm-stamp .5s cubic-bezier(.2, .9, .3, 1.3) .85s both; }
}

/* Krista's note waiting inside today's light: a wax seal and two lines, on the card. */
.note-waiting { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 10px 14px 10px 10px; border-radius: var(--r-m); background: color-mix(in srgb, var(--gold) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent); }
.nw-seal { flex: none; display: grid; place-items: center; }
.nw-seal svg { filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--art-wire) 45%, transparent)); }
.nw-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nw-words b { font: 650 16px/1.25 var(--font-ui); color: var(--text); }
.nw-words > span { font-size: 14px; line-height: 1.35; color: var(--text-2); }
@keyframes hm-seal-glow { 0%, 100% { filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--art-wire) 45%, transparent)); } 50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 70%, transparent)); } }
@media (prefers-reduced-motion: no-preference) { .nw-seal svg { animation: hm-seal-glow 3.2s ease-in-out infinite; } }

/* Train day: the sky lantern lit over the snow, and a board that counts down. */
.next-step.is-train-day { box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--gold) 46%, transparent), 0 0 60px -24px color-mix(in srgb, var(--bulb-amber) 80%, transparent); }
.next-step.is-train-day .card-title { font-size: 34px; letter-spacing: -.02em; color: var(--heading); text-shadow: var(--heading-glow); }
.is-lantern > .tday-lantern { position: absolute; left: 50%; top: -4px; transform-origin: 50% 0; translate: -50% 0; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--bulb-amber) 85%, transparent)); }
@keyframes hm-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@media (prefers-reduced-motion: no-preference) { .is-lantern > .tday-lantern { animation: hm-sway 5.6s ease-in-out infinite; } }
.tday-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.board-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px 13px; border-radius: var(--r-m); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--edge); }
.board-label { font: 650 11.5px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.board-title { font: 600 16px/1.25 var(--font-ui); color: var(--text); }
.board-time { font: 500 24px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--heading); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.board-until { font: 600 14px/1.3 var(--font-ui); color: var(--good); }
.tday-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: inherit; text-decoration: none; }
.tday-row > .note-waiting { flex: 1; margin: 0; }
.tday-row > .tr-pic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tile); box-shadow: var(--tile-glow); }
.tday-row > .tr-pic svg { width: 34px; height: 34px; }

/* What is new from Krista, on Akshay's home: her words in the display italic, a gold dot while new. */
.from-krista .card-media { display: grid; place-items: center; width: 56px; height: 56px; aspect-ratio: auto; border-radius: 50%; background: none; box-shadow: none; }
.from-krista .avatar { width: 52px; height: 52px; color: var(--bulb-red); }
.from-krista .avatar svg { width: 24px; height: 24px; }
.from-krista .eyebrow { padding-right: 58px; }
.fk-new { position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-ink); font: 700 10.5px/1.4 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.fk-new::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.fk-quote { font: italic 500 21px/1.25 var(--font-display); letter-spacing: -.005em; color: var(--heading); text-wrap: balance; }
.fk-where { font: 600 13px/1.3 var(--font-ui); color: var(--text-3); }
.from-krista .card-sub { margin-top: 4px; font-size: 14px; }
.from-krista.is-new { box-shadow: var(--shadow-1), 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent), var(--accent-glow); }

/* What waits for Krista: her kids' asks, each a row to the Kids page. */
.home-wait > .eyebrow, .trip-list > .eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hw-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--bulb-red); color: var(--note-paper); font: 700 12px/1 var(--font-ui); letter-spacing: 0; box-shadow: 0 0 10px -2px color-mix(in srgb, var(--bulb-red) 70%, transparent); }
.home-wait .row-title { font-weight: 600; }

/* The countdown after the tickets: the sleeps, the train's time, then the string of twelve. */
.home-count { gap: 4px; padding: 18px 18px 16px; }
.hc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hc-sleeps { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.hc-num { font: 500 54px/.9 var(--font-display); letter-spacing: -.03em; color: var(--heading); text-shadow: var(--heading-glow); font-variant-numeric: lining-nums tabular-nums; }
.hc-sleeps > span { font: 500 16px/1.2 var(--font-ui); color: var(--text-2); }
.hc-train { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin: 0; text-align: right; }
.hc-train b { font: 600 16px/1.2 var(--font-ui); color: var(--text); white-space: nowrap; }
@keyframes hm-flip { from { opacity: 0; transform: perspective(300px) rotateX(-80deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .hc-num.is-flip { display: inline-block; transform-origin: 50% 0; animation: hm-flip .6s var(--ease-out) .2s both; } }
.hc-string { position: relative; height: 62px; margin: 8px -6px 0; }
.hc-wire { position: absolute; inset: 0 0 auto; width: 100%; height: 40px; overflow: visible; }
.hc-wire path { fill: none; stroke: var(--art-wire); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hc-bulbs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hb { display: grid; justify-items: center; align-content: start; min-width: 0; height: 100%; padding: 0; border: 0; background: none; transform: translateY(var(--y, 0)); -webkit-tap-highlight-color: transparent; }
.hb svg { width: 30px; height: 30px; overflow: visible; }
button.hb { cursor: pointer; }
button.hb:active svg { transform: scale(.9); }
.hb.is-dark svg { opacity: .78; }
@keyframes hm-today { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: no-preference) { .hb.is-today .hce-today { animation: hm-today 2.4s ease-in-out infinite; } }
.hc-line { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--text-2); text-align: center; }

/* Akshay's list before the train: rows that tick off where they are asked. */
.trip-list .pill { min-height: 24px; padding: 2px 10px; font-size: 12.5px; letter-spacing: .02em; text-transform: none; }
.check-row .row-title { font-weight: 600; }
@keyframes hm-tick { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) { .check-row.is-done.is-live .tick { animation: hm-tick .32s var(--ease-out) both; } }

/* His next note, on its own cream paper in his hand, with a way to change it. */
.card-tap.next-note { display: flex; flex-direction: column; padding: 0; }
.next-note > .card-body { gap: 10px; padding: 16px 18px 16px; }
.nn-paper { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 52px 16px 16px; border-radius: var(--r-m); background: linear-gradient(180deg, color-mix(in srgb, var(--art-sun) 40%, transparent), transparent 46%), var(--note-paper); color: var(--note-ink); box-shadow: inset 0 0 0 1px var(--note-line), 0 6px 16px -10px color-mix(in srgb, var(--art-wire) 70%, transparent); transform: rotate(-.6deg); }
.nn-meta { font: 650 11.5px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--note-ink-2); }
.nn-hand { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font: 400 19px/1.35 var(--font-hand); color: var(--note-ink); }
.nn-seal { position: absolute; right: 10px; top: 10px; }
.nn-change { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font: 600 15px/1 var(--font-ui); color: var(--gold-ink); }
.nn-change .chev { width: 16px; height: 16px; color: var(--gold-ink); }
.next-note.is-big .nn-hand { -webkit-line-clamp: 6; font-size: 21px; }

/* The line to Hill City: six stations on a track, the engine at the one under way. */
.line { gap: 0; padding: 18px 12px 6px; }
.line-track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
/* the rails: sleepers every few pixels, gold where the train has been, faint ahead */
.line-track::before, .line-track::after { content: ""; position: absolute; top: 14px; left: calc(100% / 12); height: 6px; border-block: 1px solid; }
.line-track::before { right: calc(100% / 12); border-color: color-mix(in srgb, var(--gold) 26%, transparent); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 22%, transparent) 0 2px, transparent 2px 8px); }
.line-track::after { width: calc((100% - 100% / 6) * var(--at, 0) / 5); border-color: var(--gold); background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 8px); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--gold) 70%, transparent); }
.stn { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.stn-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 34%, transparent); color: var(--text-3); }
.stn-dot svg { width: 15px; height: 15px; }
.stn.is-passed .stn-dot { background: var(--gold); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--gold) 80%, transparent); color: var(--on-accent); }
.stn.is-here .stn-dot { width: 40px; height: 40px; margin-top: -3px; margin-bottom: -3px; background: var(--btn-fill); box-shadow: var(--btn-finish); color: var(--on-accent); }
.stn.is-here .stn-dot svg { width: 20px; height: 20px; }
.stn-name { max-width: 100%; font: 650 11px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--text-3); }
.stn.is-passed .stn-name { color: var(--text-2); }
.stn.is-here .stn-name { color: var(--heading); }
@keyframes hm-engine { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@media (prefers-reduced-motion: no-preference) { .stn.is-here .stn-dot svg { animation: hm-engine 1.4s ease-in-out infinite; } }
.line-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px -12px 0; padding: 13px 18px 14px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.ln-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ln-words b { font: 600 15.5px/1.3 var(--font-ui); color: var(--text); }
.ln-words > span { font-size: 14px; line-height: 1.4; color: var(--text-2); }
a.line-now:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
a.line-now .pill { flex: none; }

/* The places of the trip */
.home .group > .eyebrow { margin: 10px 0 0 2px; }
.trip-rows > .card-tap .card-trail .pill { min-height: 26px; padding: 2px 10px; font-size: 13px; }

/* ============================== Send ============================== */
.send .sent-line { align-items: center; }
.send .sent-line .pill svg { width: 15px; height: 15px; }
.send .sent-wait { font-size: 15px; color: var(--text-2); }
/* The messages to pick from: neutral bubbles in ink; the picked one wears an ink ring and check. */
.send .options-bubbles { gap: 10px; }
.send .options-bubbles .option {
  min-height: 0;
  padding: 13px 14px 13px 16px;
  border: 0;
  border-radius: 22px 22px 22px 8px;
  background: var(--surface-2);
  box-shadow: none;
}
.send .options-bubbles .option:hover { background: color-mix(in srgb, var(--surface-2) 88%, var(--text)); }
.send .options-bubbles .option.is-picked { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--text); }
.send .options-bubbles .option-check { width: 24px; height: 24px; border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.send .options-bubbles .option.is-picked .option-check { background: var(--text); border-color: var(--text); }
.send .options-bubbles .option.is-picked .option-check::after { background: var(--bg); -webkit-mask-size: 14px; mask-size: 14px; }
/* His own words: the fourth bubble, a pen before it, and a field that opens under it */
.send .options-bubbles .option.is-own .option-title { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.send .options-bubbles .option.is-own.is-picked .option-title { color: var(--text); }
.send .own-words { margin-top: 2px; }
.send .own-words textarea { min-height: 0; padding: 12px 16px; border-radius: 20px 20px 8px 20px; font-size: 16.5px; line-height: 1.38; resize: none; }
/* What Krista gets: his words in a sent bubble, the card her phone draws for the link */
.send .share-card { gap: 10px; }
.send .share-msg { background: color-mix(in srgb, var(--gold) 34%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.send .share-card figcaption .share-link { margin: 0; text-wrap: balance; }

/* When she taps it: her first screen, small, in a phone with a gold edge. It scrolls inside. */
.her-preview { align-items: center; }
.her-preview > .eyebrow { align-self: stretch; }
.her-phone {
  position: relative;
  width: 252px;
  height: 470px;
  padding: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-radius: 40px;
  background: var(--bg);
  box-shadow: 0 0 0 7px var(--surface-2), 0 0 0 8px color-mix(in srgb, var(--gold) 55%, transparent), var(--shadow-2);
}
.her-phone::-webkit-scrollbar { display: none; }
/* Her screen is a 390 px phone at any window width, so nothing in it follows the window: its gutter
   and top inset keep their phone values, the scene keeps the invitation's poster shape (s-invite.css
   draws it below 720 px; above that ui.css turns a hero into a rounded, cropped panel), and what the
   invitation sizes by the window's width is sized here by hers (--her-vw, a hundredth of 390 px). */
.her-screen.screen { zoom: .646; width: 390px; max-width: none; min-height: 0; margin: 0; padding: 0 20px 28px; gap: 16px; pointer-events: none; background: var(--page-light), var(--bg); --gutter: 20px; --pad-top: 20px; --her-vw: 3.9px; }
.her-screen > .hero:first-child { margin-top: calc(-1 * var(--pad-top)); }
.her-screen .hero-art { height: auto; max-height: 380px; aspect-ratio: 400 / 317.5; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; --art-ground: var(--bg); --lights-y: 0px; }
.her-screen .hero-art > .window { display: flex; align-items: flex-end; justify-content: center; }
.her-screen .hero-art > .window > svg { flex: none; position: static; width: 127%; max-width: none; height: auto; translate: none; }
.her-screen .hero-art + * { margin-top: calc(12px - 8.9 * var(--her-vw)); }
.her-screen .hero-title { font-size: clamp(38px, 11.8 * var(--her-vw), 60px); }
.her-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; text-align: center; }
.her-line svg { flex: none; color: var(--gold-ink); }
.her-preview > .her-edit { align-self: center; margin-top: -6px; }

/* Send and Copy: their own bar under the message, the main button wider. */
.send .send-foot { margin-top: -4px; }
.send .send-foot menu { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.send .send-foot + .fine { margin-top: -6px; }

/* ============================== Backstage ============================== */
/* A little theatre: a red velvet valance with a gold fringe over the page's title; only Akshay
   sees this page. Drawn with gradients in the page's own colors. */
.backstage-head { position: relative; padding-top: 34px; }
.bs-curtain { position: absolute; top: 0; left: 0; right: 0; height: 20px; filter: drop-shadow(0 1.5px 0 var(--gold)) drop-shadow(0 5px 6px color-mix(in srgb, var(--art-wire) 45%, transparent)); }
.bs-curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--art-wire) 30%, transparent), transparent 9px),
    repeating-linear-gradient(90deg, var(--art-coach-dark) 0 3px, var(--art-coach) 3px 22px, var(--art-coach-dark) 22px 28px);
  -webkit-mask: radial-gradient(circle 14px at 50% 0, var(--text) 13px, transparent 14px) 0 0 / 28px 100% repeat-x, linear-gradient(var(--text), var(--text)) 0 0 / 100% 8px no-repeat;
  mask: radial-gradient(circle 14px at 50% 0, var(--text) 13px, transparent 14px) 0 0 / 28px 100% repeat-x, linear-gradient(var(--text), var(--text)) 0 0 / 100% 8px no-repeat;
}
.settings .group > .eyebrow { margin: 8px 0 0 4px; }
.settings .row-trail .btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
.settings .row-value { color: var(--text-2); font-weight: 550; }
.settings .delete-all { margin-top: 8px; color: color-mix(in srgb, var(--bulb-red) 70%, var(--text)); }

/* Akshay's notes by their light: a line of each in his hand; a tap opens it on cream paper. */
.note-list .row-icon:has(> svg) { background: var(--surface-2); box-shadow: none; }
.note-list .row-title.note-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font: 400 18px/1.35 var(--font-hand);
  color: var(--text);
}
.note-list .row-edit { font: 600 15px/1 var(--font-ui); color: var(--text-2); }
.note-list .row.is-off .note-line { color: var(--text-3); text-decoration: line-through; }
.note-list .row.is-fixed { opacity: .66; }
.note-list > form.note-edit {
  --focus: var(--note-focus, var(--holly));
  gap: 10px;
  padding: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--art-sun) 50%, transparent), transparent 40%), var(--note-paper);
  color: var(--note-ink);
}
.note-list > form.note-edit .eyebrow { color: var(--note-ink-2); }
.note-list > form.note-edit textarea { min-height: 0; background: color-mix(in srgb, var(--note-paper) 45%, var(--art-sun)); color: var(--note-ink); border-color: var(--note-line); }
.note-list > form.note-edit textarea:focus-visible { outline-color: var(--focus); }
.note-list > form.note-edit .btn-secondary { background: color-mix(in srgb, var(--note-paper) 45%, var(--art-sun)); color: var(--note-ink); border-color: var(--note-line); box-shadow: none; }
.note-list > form.note-edit .note-skip { align-self: center; color: var(--note-ink-2); }
.note-list > form.note-edit .note-skip:hover { background: color-mix(in srgb, var(--note-ink) 7%, transparent); color: var(--note-ink); }

/* Lists to tick off: surprise ideas, and the jobs on Akshay's home */
.tick-list > .row { min-height: 68px; }
.tick-list .tick {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 50%, transparent);
  color: transparent;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.tick-list .tick svg { width: 15px; height: 15px; }
.tick-list .row.is-done .tick { background: var(--good); box-shadow: none; color: var(--bg); }
.tick-list .row.is-done .row-title { color: var(--text-2); }

/* One wish each: a short list per person, the picked one checked */
.group-name { display: flex; align-items: center; gap: 10px; margin: 8px 0 0 2px; font: 650 16px/1.2 var(--font-ui); color: var(--text); }
.group-name .avatar { width: 32px; height: 32px; }
.group-name .avatar svg { width: 16px; height: 16px; }
.pick-list .ring { position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 50%, transparent); }
.pick-list .row.is-picked .ring { background: var(--accent-ring); box-shadow: none; }
.pick-list .row.is-picked .ring::after { content: ""; position: absolute; inset: 0; background: var(--on-accent); -webkit-mask: var(--i-check) center / 14px no-repeat; mask: var(--i-check) center / 14px no-repeat; }
.pick-list .row.is-picked .row-title { font-weight: 650; }

/* A surprise on a day */
.day-list .row-trail .icon { color: var(--text-2); }
.day-list > form.wrapped-form { gap: 12px; padding: 16px; }
.wrapped-field { display: flex; flex-direction: column; gap: 6px; font: 600 13px/1.2 var(--font-ui); letter-spacing: .02em; color: var(--text-2); }

/* Delete everything: the word is typed on purpose, so the field says it back in capitals, and the
   button looks like what it does: an outline in warning red, never the page's main button. */
.sheet form[data-form="delete"] { --danger: color-mix(in srgb, var(--bulb-red) 82%, var(--text)); }
[data-look="day"] .sheet form[data-form="delete"] { --danger: var(--accent-press); }
.sheet form[data-form="delete"] input { text-align: center; text-transform: uppercase; letter-spacing: .16em; font-weight: 650; }
.sheet form[data-form="delete"] .btn-danger { background: none; color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger); text-shadow: none; }
.sheet form[data-form="delete"] .btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* ============================== Small phones ============================== */
@media (max-width: 340px) {
  .from-krista { column-gap: 10px; padding-left: 10px; }
  .from-krista .card-media { width: 44px; height: 44px; }
  .from-krista .avatar { width: 42px; height: 42px; }
  .fk-quote { font-size: 19px; }
  .next-step .card-title { font-size: 24px; }
  .hc-num { font-size: 46px; }
  .stn-name { font-size: 9.5px; letter-spacing: .03em; }
  .stn-dot { width: 30px; height: 30px; }
  .board-time { font-size: 21px; }
}

/* ============================== Wider windows ============================== */
@media (min-width: 720px) {
  .next-step > .card-media { aspect-ratio: 5 / 2; }
}