/* /today's Swipe mode (today_stack_controller.js): the page as one screen, a one-line header that folds away, the days and List over the stack, a Tinder-style card,
   Skip · Undo · Keep half over its bottom edge, and the end card. The server renders the stack stacked; these wait for html.js (set in the page's head), so
   without JS it's the list. */

/* Swipe | List, at the end of the day chips' row. */
.today-mode { flex: none; display: flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; }
.today-mode-link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 13px; color: var(--muted); font: 600 15px var(--sans); text-decoration: none; }
.today-mode-link[aria-current] { background: var(--ink); color: #fff; }
.today-mode-link:not([aria-current]):hover { color: var(--ink); }

/* ---- The screen: the page is exactly the screen's height (the small viewport, so nothing hides under a toolbar): the header, the days, then the deck takes the rest.
   The masthead and the big heading give way to the one line (the h1 stays, for screen readers); the season link and footer are a scroll away. ---- */
.today-line { display: none; }
.js .today:has(> .today-page.swipe) > .site-nav, .js .swipe > .today-more { display: none; }
.js .swipe > .today-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .swipe > .today-head .today-sub { display: none; }
.js .today-page.swipe { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 440px; box-sizing: border-box; padding: env(safe-area-inset-top) 0 0; }
/* A thrown card flies over the whole screen, not cut off at the column, and never makes it scroll sideways. */
html.js:has(.today-page.swipe), html.js:has(.today-page.swipe) body { overflow-x: hidden; overflow-x: clip; }

/* "BC Mom Tourist   Sat, Nov 7 · 3 on", one line a fixed height (the serif landing moves nothing), folding to nothing at the first decision. */
.js .swipe > .today-line { display: grid; grid-template-rows: 1fr; flex: none; transition: grid-template-rows .3s ease-out, opacity .2s ease-out, visibility .3s; }
.js .swipe.folded > .today-line { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.today-line-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; overflow: hidden; }
.today-line-mark { display: flex; align-items: center; height: 44px; font: 600 15px/1 var(--serif); color: var(--muted); text-decoration: none; white-space: nowrap; }
.today-line-mark:hover { color: var(--ink); }
.today-line-day { margin: 0; font: 600 21px/44px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-line-day span { font-weight: 400; font-style: italic; color: var(--muted); }

/* The days as a small segmented control, centred, and List beside it, there all along. Each part is a 44px tap; the chosen day is an ink pill inset in the track. */
.js .swipe > .today-switch { flex: none; justify-content: center; gap: 8px; margin: 2px 0 10px; }
.js .swipe .today-days { flex: 0 1 auto; gap: 0; padding: 0; border-radius: 999px; background: var(--sunk); --fade-start: 0px; --fade-end: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent); }
/* More tabs off one end (scroll_fade_controller.js): that end fades out. */
.js .swipe .today-days.fade-start { --fade-start: 32px; }
.js .swipe .today-days.fade-end { --fade-end: 32px; }
.js .swipe .today-day { gap: 5px; padding: 0 11px; border: 3px solid transparent; background: none; background-clip: padding-box; font-size: 14px; }
.js .swipe .today-day.on { background-color: var(--ink); }
.js .swipe .today-day-count { min-width: 0; padding: 0; background: none; font-size: 12px; color: var(--muted); }
.js .swipe .today-day.on .today-day-count { background: none; color: rgb(255 255 255 / .72); }
.js .swipe .today-mode { border: 0; background: var(--sunk); }
.js .swipe .today-mode-link { padding: 0 16px; font-size: 14px; color: var(--ink); }
.js .swipe .today-mode-link[aria-current] { display: none; }
.js .swipe .today-mode-link:hover { background: var(--line); }

/* ---- The deck: whatever height is left. The stack is the card's size, as tall as the deck leaves over the buttons' lower half (587px at most), as wide as that
   at 3:4 or the column; on a phone it fills the screen, on a desktop it's 440 × 587 in the middle. Without container units, a near guess. ---- */
.js .swipe > .today-deck { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-height: 0; container-type: size; }
.js .today-cards.is-stack { --stack-h: clamp(260px, calc(100vh - 160px), 587px); position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); gap: 0;
  flex: none; height: var(--stack-h); width: min(100%, var(--stack-h) * .75); user-select: none; -webkit-user-select: none; }
@supports (height: 1cqh) {
  .js .today-cards.is-stack { --stack-h: min(100cqh - 44px - env(safe-area-inset-bottom), 587px); }
}
.js .is-stack > * { grid-area: 1 / 1; }
.js .is-stack > [hidden] { display: none; }

/* The stack: every card in one cell, the top one whole, the next two just behind it. */
.js .is-stack > .today-card, .js .is-stack > .today-end { box-sizing: border-box; width: 100%; height: 100%; min-height: 0; border-radius: 22px; box-shadow: 0 2px 6px rgb(0 0 0 / .14), 0 22px 44px rgb(40 28 12 / .28); }
.js .is-stack > .today-card { grid-template: minmax(0, 1fr) / minmax(0, 1fr); background: #2a2622; container-type: size; touch-action: pan-y; -webkit-touch-callout: none;
  transform-origin: 50% 100%; transition: transform .25s ease-out, opacity .25s ease-out; }
.js .is-stack > [data-depth="0"] { z-index: 3; cursor: grab; }
.js .is-stack > [data-depth="1"] { z-index: 2; transform: translateY(8px) scale(.95); }
.js .is-stack > [data-depth="2"] { z-index: 1; transform: translateY(16px) scale(.9); }
.js .is-stack > [data-depth="3"] { z-index: 0; transform: translateY(16px) scale(.9); opacity: 0; }
.js .is-stack > [data-depth="1"], .js .is-stack > [data-depth="2"] { box-shadow: 0 2px 8px rgb(0 0 0 / .14); }
.js .is-stack > [data-leaving] { z-index: 4; transition: none; pointer-events: none; }
.js .is-stack > .is-dragging { transition: none; cursor: grabbing; }
.js .is-stack > .today-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The card: the art is the hero, the emoji large on its tint, the facts over the art's bottom on a dark scrim. The ♥ is the Keep button's. */
.js .is-stack .today-card-art, .js .is-stack .today-card-body { grid-area: 1 / 1; }
.js .is-stack .today-card-art { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 0 0 42cqh;
  background: radial-gradient(110% 75% at 50% 30%, color-mix(in srgb, var(--tint) 45%, #fff) 0%, var(--tint) 50%, color-mix(in srgb, var(--tint) 70%, #5a4a3a) 100%); }
.js .is-stack .today-card-icon .festive { width: min(54cqw, 36cqh); height: auto; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .22)); }
.js .is-stack .today-card-icon span { font-size: min(46cqw, 30cqh); line-height: 1; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .22)); }
.js .is-stack .today-badge { position: absolute; top: 24px; left: 14px; background: rgb(255 255 255 / .92); color: var(--ink); }
.js .is-stack .today-card-body { align-self: end; z-index: 1; grid-auto-rows: max-content; gap: 4px; max-height: 72%; min-height: 0; padding: 72px 18px 48px; overflow: hidden; color: #fff;
  background: linear-gradient(to top, rgb(24 18 12 / .92) 0%, rgb(24 18 12 / .8) calc(100% - 90px), rgb(24 18 12 / 0) 100%); }
.js .is-stack .today-card-kicker { color: rgb(255 255 255 / .78); }
.js .is-stack .today-card-title { font-size: clamp(25px, 8cqw, 32px); text-shadow: 0 1px 8px rgb(0 0 0 / .3); }
.js .is-stack .today-card-title a { color: #fff; }
.js .is-stack .today-card-place { color: rgb(255 255 255 / .86); }
.js .is-stack .today-card-hours { color: #fff; font-size: 16px; -webkit-line-clamp: 2; }
.js .is-stack .today-card-notes { color: rgb(255 255 255 / .8); font-size: 16px; }
.js .is-stack .today-card-cost .chip { background: rgb(255 255 255 / .18); color: #fff; border-color: transparent; }
.js .is-stack .today-card-cost .chip.free { background: #2f6b3a; }
.js .is-stack button.today-keep { display: none; }
/* Till the serif's in (the page's head), so the facts don't reflow and jump up the card when it lands. */
.serif-wait .is-stack .today-card-body, .serif-wait .today-line-day { visibility: hidden; }
/* A short card keeps its art: no notes, the place on one line. */
@container (max-height: 470px) {
  .js .is-stack .today-card-notes { display: none; }
  .js .is-stack .today-card-place { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* One thin segment per card over the top one, the decided ones filled; in place of "1 of 5". */
.today-progress { display: none; }
.js .is-stack > .today-progress { display: flex; align-self: start; z-index: 5; gap: 4px; padding: 10px 12px 0; pointer-events: none; }
.js .is-stack > .today-progress[hidden] { display: none; }
.today-progress span { flex: 1; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .42); box-shadow: 0 0 2px rgb(0 0 0 / .15); }
.today-progress span.done { background: #fff; }

/* KEEP and SKIP, fading in with the pull. */
.today-stamp { display: none; }
.js .is-stack .today-stamp { display: block; position: absolute; z-index: 2; top: 34px; padding: 4px 12px; border: 3px solid; border-radius: 8px; background: rgb(255 255 255 / .9);
  font: 800 26px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: 0; pointer-events: none; }
.today-stamp.keep { left: 18px; color: var(--ok); transform: rotate(-12deg); }
.today-stamp.skip { right: 18px; color: #b3433c; transform: rotate(12deg); }

/* ---- Skip and Keep, big, half over the card's bottom edge, the kept count on Keep; Undo small between them, there once there's something to undo.
   The row lets drags and taps through to the card between the buttons. ---- */
.today-stack-controls { display: none; }
.js .swipe .today-stack-controls { position: relative; z-index: 6; display: flex; justify-content: center; flex: none; width: 100%; margin-top: -34px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.today-stack-buttons { display: flex; justify-content: center; align-items: center; gap: 26px; pointer-events: auto; }
.today button.today-stack-btn { position: relative; display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; background: var(--surface);
  color: #b3433c; font: 30px/1 var(--sans); box-shadow: 0 4px 14px rgb(0 0 0 / .2); cursor: pointer; transition: transform .1s ease-out; }
.today button.today-stack-btn:active:not(:disabled) { transform: scale(.94); }
.today button.today-stack-btn.keep { background: #c8414b; color: #fff; }
.today button.today-stack-btn.keep .icon { fill: currentColor; }
.today button.today-stack-btn.undo { width: 44px; height: 44px; color: var(--muted); font-size: 20px; }
.today button.today-stack-btn.undo:disabled { visibility: hidden; }
.today-stack-kept { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 12px;
  background: #fff; color: #c8414b; font: 700 13px/1 var(--sans); font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgb(0 0 0 / .2); }
.today-stack-kept[hidden] { display: none; }
/* At the end only Undo is left; the row keeps its room, so the end card doesn't move. */
.today-stack-controls.ended .skip, .today-stack-controls.ended .keep { visibility: hidden; }

/* In the stack, "Want more?" and the rest of the season are in the end card, and Keep counts the picks, so the list's own links and the picks bar go. */
.js .swipe .today-bar { display: none; }
.bookshelf.today .today-page.swipe { padding-bottom: 0; }
.js body:has(.today-page.swipe) .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* The end: "Your Saturday · 2 picks", their rows, share, start over, a busier day, the rest of the season, the skipped back. In the stack it's a card's size, scrolling
   inside, with room at the bottom for Undo. */
.today-end { display: grid; gap: 8px; align-content: start; padding: 20px 18px; border-radius: 18px; background: var(--surface); box-shadow: 0 2px 6px rgb(0 0 0 / .08), 0 12px 28px rgb(0 0 0 / .08); }
.js .is-stack > .today-end:not([hidden]) { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 48px; }
.js .is-stack > .today-end > * { flex: none; }
.today-end[hidden] { display: none; }
.today-end h2 { margin: 0; font: 600 clamp(24px, 7vw, 28px)/1.15 var(--serif); }
.today-end h2:focus { outline: none; }
.today-end-none { margin: 0; font: italic 18px/1.35 var(--serif); color: var(--muted); }
.today-end-none[hidden], .today-end [hidden] { display: none; }
.today-end .picks-list { margin-bottom: 4px; }
.today-end button.pick-title { all: unset; font: 600 18px/1.2 var(--serif); color: var(--ink); cursor: pointer; }
.today-end button.pick-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.today-end button.pick-drop { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 18px; }
.today-end button.pick-drop:hover { color: var(--ink); border-color: var(--ink); }
.today-end button.today-end-again { align-self: center; min-height: 44px; padding: 0 8px; font-size: 16px; }
.today-end .today-end-more { margin: 0; }
.today-end-season { align-self: center; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  .js .is-stack > .today-card, .today button.today-stack-btn, .js .swipe > .today-line { transition: none; }
}