/* Picks R-a — the pick control, toast, sheet and the Your picks tab.
   Phone first: every target is at least 44px; phone rules use
   (max-width: 650px), (max-height: 520px); a landscape phone (under 520px
   tall) gets the sheet as a right-hand side panel. A mouse gets hover states
   and rows that wrap instead of scrolling sideways ((hover: hover)). No
   colour is the only signal: every symbol also has its word. */

:root { --spi-pick-ink: #0f626b; --spi-pick-teal: #087b83; --spi-pick-line: #46979d; --spi-pick-soft: #f2fafa; --spi-pick-text: #10292e; --spi-pick-muted: #4a6369; }

/* ---------------------------------------------------------------- control */
.spi-pick [hidden] { display: none !important; }
.spi-pick-slot { max-width: 54rem; margin: 1.5rem auto 2rem; }
.spi-guide-actions.spi-pick-slot { display: block; margin: -1rem auto 2rem; }
.spi-pick { box-sizing: border-box; color: var(--spi-pick-text); }
.spi-pick--detail {
  display: grid; grid-template-areas: "label" "row" "add" "info" "actions"; gap: .5rem; padding: 1rem;
  border: 1px solid #cfe7e9; border-radius: 1rem; background: var(--spi-pick-soft);
  /* Its width comes from its slot, never its content (a block in a slot, or
     in the event aside's grid track), so it can be a size container. */
  container: spi-pick / inline-size;
}
/* One cell per row of the drawn control, the same before and after the
   script: the why line and the state line share one cell, so a returning
   visitor's "For sure · …" line takes the "Suggested …" line's place, and
   the hidden why still holds its height (review fix M5). */
.spi-pick--detail::before, .spi-pick--detail > .spi-pick__label { grid-area: label; }
.spi-pick--detail > :is(.spi-pick__fallback, .spi-pick__row) { grid-area: row; }
/* Pre-deploy: "Add to my trip plan →" under the two buttons (JS-drawn; its
   row is reserved before the script too). */
.spi-pick--detail > .spi-pick__add { grid-area: add; justify-self: start; }
.spi-pick--detail > :is(.spi-pick__why, .spi-pick__state) { grid-area: info; }
.spi-pick--detail::after, .spi-pick--detail > .spi-pick__actions { grid-area: actions; }
.spi-pick--detail[data-pick-ready] > .spi-pick__why[hidden] { display: block !important; visibility: hidden; }
/* Review fix (M5, §4i "same box"): before spi-picks.js arrives, the block
   already has the drawn control's rows -- the "Plan it" label, the fallback
   link where the two buttons go (with the "Add to my trip plan →" row under
   them reserved by its margin), the public "Suggested …" line, and the
   "Your picks →" row -- so nothing grows or moves when the script lands.
   With scripting off the fallback stays the compact link it always was. */
.spi-pick--detail:not([data-pick-ready])::before { content: "Plan it"; }
.spi-pick--detail:not([data-pick-ready])::after { content: ""; min-height: 44px; }
.spi-pick--detail:not([data-pick-ready]) > .spi-pick__fallback { justify-self: start; margin-bottom: 44px; }
.spi-pick--detail:not([data-pick-ready]) > .spi-pick__why[hidden] { display: block !important; }
@media (scripting: none) {
  .spi-pick--detail:not([data-pick-ready]) { display: block; }
  .spi-pick--detail:not([data-pick-ready]) > .spi-pick__fallback { margin-bottom: 0; }
  .spi-pick--detail:not([data-pick-ready])::before, .spi-pick--detail:not([data-pick-ready])::after { content: none; }
  .spi-pick--detail:not([data-pick-ready]) > .spi-pick__why[hidden] { display: none !important; }
}
/* Label, why and state lines carry their own metrics so a host page's
   paragraph rules can't make the reserved box and the drawn one differ. */
.spi-pick .spi-pick__label, .spi-pick--detail:not([data-pick-ready])::before { display: block; margin: 0; color: #0f3d45; font-size: 1rem; font-weight: 850; line-height: 1.4; letter-spacing: .01em; }
.spi-pick__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
/* L12: side by side down to a 240px box (the event page on a 320px phone);
   a narrower box (the landscape event aside, 218px) stacks them with full
   labels, and the not-yet-drawn block reserves the second row too. */
@container spi-pick (max-width: 230px) {
  .spi-pick__row { grid-template-columns: minmax(0, 1fr); }
  .spi-pick--detail:not([data-pick-ready]) > .spi-pick__fallback { margin-bottom: calc(88px + .5rem); }
}
@media (scripting: none) { .spi-pick--detail:not([data-pick-ready]) > .spi-pick__fallback { margin-bottom: 0; } }
/* H2: `.spi-pick` in front beats the guide shell's `.spi-guide-actions
   button` (solid teal), so an unpressed button is white on every surface. */
/* nowrap (save UX): a label never breaks onto a second line. The sizes below
   are measured to fit; a font wider than the site's stack (DejaVu Sans, 15%
   wider) then runs a few px into the padding instead of wrapping. */
.spi-pick .spi-pick__btn {
  box-sizing: border-box; min-width: 44px; min-height: 44px; padding: .55rem .8rem;
  border: 1px solid var(--spi-pick-line); border-radius: 999px; background: #fff; color: var(--spi-pick-ink);
  font: inherit; font-weight: 850; line-height: 1.15; text-decoration: none; cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
}
.spi-pick .spi-pick__btn:hover { border-color: var(--spi-pick-teal); }
/* M4, without measuring (save UX): the buttons size to their BOX, not the
   window, and "Considering" drops its "ing" only in a box where it would wrap
   beside "For sure". Measured with the site's font at weight 850: the full
   label needs a 248px box at these sizes, so 270px leaves a font 10% wider
   room; "Consider" fits down to 220px, and under 231px they stack with full
   labels. (This replaced a resize listener and a text measurement on every
   control.) After the base button rule, and one class stronger, so it wins. */
@container spi-pick (max-width: 320px) {
  .spi-pick.spi-pick--detail .spi-pick__btn { padding: .5rem .45rem; font-size: .95rem; }
}
@container spi-pick (min-width: 231px) and (max-width: 270px) {
  .spi-pick.spi-pick--detail .spi-pick__ing { display: none; }
}
.spi-pick .spi-pick__btn[aria-pressed="true"], .spi-pick--compact.is-picked .spi-pick__btn { border-color: var(--spi-pick-teal); background: var(--spi-pick-teal); color: #fff; }
.spi-pick button:focus-visible, .spi-pick a:focus-visible, .spi-pick-chip:focus-visible, .spi-pick-sheet button:focus-visible, .spi-pick-sheet a:focus-visible, .spi-picks-app button:focus-visible, .spi-picks-app a:focus-visible, .spi-picks-app select:focus-visible, .spi-picks-app input:focus-visible, .spi-pick-toast button:focus-visible, .spi-pick-toast a:focus-visible, .spi-trip-tabs a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.spi-pick .spi-pick__why, .spi-pick .spi-pick__state { margin: 0; color: var(--spi-pick-muted); font-size: .95rem; line-height: 1.4; }
.spi-pick .spi-pick__state { color: #0f3d45; font-weight: 750; }
.spi-pick__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0; }
.spi-pick__actions:not(:has(> :not([hidden]))) { display: none; }
.spi-pick .spi-pick__change, .spi-pick-link {
  min-width: 44px; min-height: 44px; padding: 0 .35rem; border: 0; background: none; color: var(--spi-pick-teal);
  font: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: .15em; cursor: pointer;
}
.spi-pick a.spi-pick__add:is(:link, :visited) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .1rem; border: 0; border-radius: 0; background: none;
  color: var(--spi-pick-teal) !important; font-size: .95rem; font-weight: 750; text-decoration: underline; text-underline-offset: .15em;
}
.spi-pick a.spi-pick__mine:is(:link, :visited) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .1rem; border: 0; border-radius: 0; background: none;
  color: var(--spi-pick-teal) !important; font-weight: 750; text-decoration: underline; text-underline-offset: .15em;
}
/* The no-JS fallback: an <a> dressed as a button must beat the guide
   shell's anchor rules (R88), so it is styled by element + class. */
a.spi-pick__fallback:is(:link, :visited, :hover, :focus-visible) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: .55rem 1rem; border: 1px solid var(--spi-pick-teal); border-radius: 999px; background: #fff;
  color: var(--spi-pick-ink) !important; font-weight: 850; text-decoration: none !important;
}
a.spi-pick__fallback[hidden] { display: none !important; }

/* Compact (cards and dishes): ONE button, "☆ Remember This" (Dave,
   2026-09-23). It keeps the thing as Considering and opens the sheet; once
   kept it is filled and reads the level ("☆ Considering", "✓ For sure",
   "✔ Tried it") and still opens the sheet. Left-aligned under the card's
   text. "☆ Remember This" needs about 160px; the narrowest compact box is
   250px (an event card on a 320px phone), and the no-JS link it replaces is
   the same 44px tall, so the row keeps its height when the script lands (M5). */
.spi-pick--compact { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .4rem; margin: .6rem 0 0; }
.spi-pick.spi-pick--compact .spi-pick__btn { padding: .45rem .9rem; }
/* An event or activity card's why line ("Suggested: Evening · Starts 7 PM")
   is its own row above the button, and it holds that row while the script
   is on its way (review fix M5: the block keeps its height when the script
   lands). With scripting off it stays hidden: the fallback link is all. */
.spi-pick--compact .spi-pick__why { flex: 1 1 100%; order: -1; font-size: .9rem; }
.spi-pick--compact:is([data-pick-kind="event"], [data-pick-kind="guide"]):not([data-pick-ready]) > .spi-pick__why[hidden] { display: block !important; }
@media (scripting: none) {
  .spi-pick--compact:is([data-pick-kind="event"], [data-pick-kind="guide"]):not([data-pick-ready]) > .spi-pick__why[hidden] { display: none !important; }
}
.spi-menu-card__body .spi-pick--compact { margin-top: .75rem; }
/* An activity card's control takes the actions row's full width, so its why
   line and button read as one block, with the card's "See the visit guide"
   under it. */
.spi-choice-actions .spi-pick { position: relative; z-index: 2; }
.spi-choice-actions .spi-pick--compact { flex: 1 1 100%; margin-top: 0; }
@media (scripting: none) { .spi-choice-actions .spi-pick--compact { flex: 0 1 auto; } }
/* /events/local/ cards: the card is one <a>, so the pill sits below it
   inside the same border. */
.spi-events .spi-event-cardwrap { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--event-line, #d8e7e9); border-radius: 1.2rem; background: var(--event-paper, #fff); box-shadow: var(--spi-shadow); }
.spi-events .spi-event-cardwrap > a.spi-event-card { flex: 1 1 auto; border: 0; border-radius: 0; box-shadow: none; }
.spi-event-cardwrap__pick { padding: .1rem 1.5rem 1rem; border-top: 1px dashed var(--event-line, #d8e7e9); }
.spi-event-cardwrap__pick .spi-pick--compact { margin-top: .7rem; }

/* ------------------------------------------------------------------ toast */
/* The bottom edge (this toast, the sheet, the showcase editor's button) is
   defined ONCE, in spi-showcase-editor.css ("The bottom edge"): a page that
   carries the editor's button sets --spi-edge-reserve to the button's height
   plus a gap, and the toast rides above it. Everywhere else it is 0. */
.spi-pick-toast {
  position: fixed; z-index: 1000; left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right));
  bottom: calc(.75rem + env(safe-area-inset-bottom) + var(--spi-toast-offset, 0px) + var(--spi-edge-reserve, 0px));
  box-sizing: border-box; max-width: 32rem; margin: 0 auto; padding: .8rem 1rem; border-radius: 1rem;
  background: #0f2f36; color: #fff; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .3); font-size: 1rem; line-height: 1.35;
}
/* !important: no layout rule for the toast (the landscape row, the in-sheet
   block) may ever show a hidden one. */
.spi-pick-toast[hidden] { display: none !important; }
.spi-pick-toast:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.spi-pick-toast p { margin: 0; color: #fff; }
.spi-pick-toast__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem !important; }
.spi-pick-toast button { min-height: 44px; padding: .4rem .95rem; border: 1px solid #99f6e4; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.spi-pick-toast a:is(:link, :visited) { display: inline-flex; align-items: center; min-height: 44px; color: #99f6e4 !important; font-weight: 750; }
.spi-pick-toast__intro { margin-top: .45rem !important; color: #d7f5f1 !important; font-size: .9rem; }
.spi-pick-toast--top { top: calc(.75rem + env(safe-area-inset-top)); bottom: auto; }
/* H1: while the sheet is open the toast lives INSIDE the modal dialog (the
   rest of the page is inert), pinned to the bottom of the sheet's scroll
   box; scrolled to the end, it sits below the footer and covers nothing. */
.spi-pick-sheet .spi-pick-toast { position: sticky; top: auto; bottom: .75rem; left: auto; right: auto; width: auto; max-width: none; margin: .25rem .75rem .75rem; }
@media (max-width: 360px) {
  .spi-pick-toast { padding: .65rem .75rem; }
  .spi-pick-toast button { padding: .4rem .75rem; }
}

/* ------------------------------------------------------------------ sheet */
.spi-pick-sheet {
  box-sizing: border-box; width: 100%; max-width: 36rem; max-height: 85vh; margin: auto auto 0; padding: 0;
  overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 1.25rem 1.25rem 0 0;
  background: #fff; color: var(--spi-pick-text); box-shadow: 0 -1rem 3rem rgba(4, 30, 36, .25);
}
.spi-pick-sheet::backdrop { background: rgba(4, 30, 36, .45); }
.spi-pick-sheet__head { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; align-items: start; padding: 1rem 1rem .6rem; border-bottom: 1px solid #e3f1f2; background: #fff; }
.spi-pick-sheet__head h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere; }
.spi-pick-sheet__close { width: 44px; height: 44px; border: 1px solid #cfe7e9; border-radius: 999px; background: #fff; color: var(--spi-pick-text); font-size: 1.1rem; cursor: pointer; }
.spi-pick-sheet__at { grid-column: 1 / -1; margin: 0; }
.spi-pick-sheet a:is(:link, :visited) { display: inline-flex; align-items: center; min-height: 44px; color: var(--spi-pick-teal); }
.spi-pick-sheet__body { padding: .25rem 1rem 1rem; }
.spi-pick-sheet__sec { margin: .85rem 0; }
.spi-pick-sheet__sec h3, .spi-pick-sheet__body > h3 { margin: 0 0 .35rem; font-size: 1rem; }
.spi-pick-sheet__why, .spi-pick-sheet__sub { margin: .25rem 0; color: var(--spi-pick-muted); line-height: 1.4; }
.spi-pick-sheet__why strong { color: var(--spi-pick-text); }
.spi-pick-sheet textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: .6rem; border: 1px solid #b9d9dc; border-radius: .75rem; font: inherit; }
.spi-pick-sheet__buttons { display: flex; justify-content: space-between; gap: .75rem; margin: 1rem 0 0; }
.spi-pick-sheet__buttons button { min-height: 44px; padding: .5rem 1.2rem; border-radius: 999px; font: inherit; font-weight: 850; cursor: pointer; }
.spi-pick-sheet__remove { border: 1px solid #e6b3b3; background: #fff; color: #9b1c1c; }
.spi-pick-sheet__done { border: 1px solid var(--spi-pick-teal); background: var(--spi-pick-teal); color: #fff; }
.spi-pick-sheet__foot { padding: .6rem 1rem 1rem; border-top: 1px solid #e3f1f2; color: var(--spi-pick-muted); font-size: .85rem; }
.spi-pick-sheet__foot p { margin: .15rem 0; }
.spi-pick-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0; }
.spi-pick-chips--days, .spi-pick-chips--filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
.spi-pick-chips__or { flex: 0 0 auto; color: var(--spi-pick-muted); }
.spi-pick-chip {
  flex: 0 0 auto; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: .45rem .85rem;
  border: 1px solid var(--spi-pick-line); border-radius: 999px; background: #fff; color: var(--spi-pick-ink);
  font: inherit; font-weight: 750; cursor: pointer; touch-action: manipulation;
}
.spi-pick-chip[aria-pressed="true"] { border-color: var(--spi-pick-teal); background: var(--spi-pick-teal); color: #fff; }
.spi-pick-chips--fits .spi-pick-chip { border-style: solid; background: #e8f7f5; }
.spi-pick-chips--levels .spi-pick-chip { padding-inline: .6rem; }
.spi-pick-warnings { margin: .6rem 0; padding: .6rem .8rem; border-radius: .75rem; background: #fff7e6; color: #6b3d00; list-style: none; }
.spi-pick-warnings li { margin: .15rem 0; }
.spi-pick-gap { margin: .3rem 0 .8rem; padding: 0; list-style: none; }
.spi-pick-gap li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid #eef5f6; }
.spi-pick-gap__name { font-weight: 750; }
.spi-pick-gap__why { grid-column: 1; color: var(--spi-pick-muted); font-size: .9rem; }
.spi-pick-gap button { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--spi-pick-teal); border-radius: 999px; background: #fff; color: var(--spi-pick-ink); font: inherit; font-weight: 800; cursor: pointer; }
.spi-pick-sheet details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 750; }
@media (max-width: 360px) {
  .spi-pick-chips--levels { display: grid; grid-template-columns: 1fr; }
  .spi-pick--detail { padding: .85rem .75rem; }
}
@media (min-width: 651px) and (min-height: 521px) { .spi-pick-sheet { margin: auto; border-radius: 1.25rem; } }
/* Landscape phone: a 360px right-hand side panel, full height; the page
   stays readable on the left. */
@media (max-height: 520px) {
  .spi-pick-sheet { width: 360px; max-width: 92vw; height: 100vh; height: 100dvh; max-height: none; margin: 0 0 0 auto; border-radius: 1rem 0 0 1rem; box-shadow: -1rem 0 3rem rgba(4, 30, 36, .25); }
  .spi-pick-sheet::backdrop { background: rgba(4, 30, 36, .2); }
  /* L11: a compact head and chips in the side panel. */
  .spi-pick-sheet__head { padding: .5rem .75rem .45rem 1rem; }
  .spi-pick-sheet__head h2 { font-size: 1.05rem; }
  .spi-pick-sheet .spi-pick-chip { padding: .35rem .6rem; }
  .spi-pick-sheet__sec { margin: .6rem 0; }
  /* L11: the toast is one row, bottom-right: the text (cut short with …)
     beside its buttons. */
  .spi-pick-toast { display: flex; align-items: center; gap: .6rem; left: auto; right: max(.75rem, env(safe-area-inset-right)); width: min(30rem, calc(100vw - 1.5rem)); padding: .35rem .5rem .35rem 1rem; }
  .spi-pick-toast__text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .spi-pick-toast__actions { flex: 0 0 auto; flex-wrap: nowrap; margin-top: 0 !important; }
  .spi-pick-toast__intro { display: none; }
  .spi-pick-sheet .spi-pick-toast { display: block; padding: .6rem .75rem; }
  .spi-pick-sheet .spi-pick-toast__actions { flex-wrap: wrap; margin-top: .4rem !important; }
}

/* ---------------------------------------------------- mouse and keyboard */
/* Save UX (desktop planners): a mouse gets a hover on everything it can
   press, and chip rows that wrap -- a row that only scrolls sideways is out
   of reach of a mouse wheel (ten trip days overflowed the sheet by 427px). */
@media (hover: hover) {
  .spi-pick .spi-pick__btn:not([aria-pressed="true"]):hover, .spi-pick-chip:not([aria-pressed="true"]):hover,
  .spi-picks-app button:not(.spi-pick-chip, .spi-pick-link, .spi-picks-grid__cell, [aria-pressed="true"]):hover,
  .spi-pick-gap button:hover, .spi-pick-sheet .spi-picks-import button:hover, .spi-pick-sheet__close:hover { border-color: var(--spi-pick-teal); background: #e3f4f3; }
  .spi-pick .spi-pick__btn[aria-pressed="true"]:hover, .spi-pick.spi-pick--compact.is-picked .spi-pick__btn:hover, .spi-pick-chip[aria-pressed="true"]:hover,
  .spi-picks-app button[aria-pressed="true"]:not(.spi-pick-chip):hover, .spi-pick-sheet__done:hover,
  .spi-picks-dates__actions button[type="submit"]:hover { background: #06636a !important; border-color: #06636a; }
  .spi-picks-grid__cell:hover { border-color: var(--spi-pick-teal); box-shadow: inset 0 0 0 1px var(--spi-pick-teal); }
  .spi-pick-sheet__remove:hover { border-color: #9b1c1c; background: #fdf2f2; }
  .spi-pick-toast button:hover { background: rgba(153, 246, 228, .18); }
  .spi-pick .spi-pick__change:hover, .spi-pick-link:hover, .spi-pick-sheet__mine:hover,
  .spi-pick a.spi-pick__add:hover, .spi-pick a.spi-pick__mine:hover { text-decoration-thickness: 2px; }
  a.spi-pick__fallback:hover { background: #e3f4f3; }
  .spi-trip-tabs a:not([aria-current="page"]):hover { background: rgba(255, 255, 255, .6); }
}
@media (hover: hover) and (pointer: fine) {
  .spi-pick-chips--days, .spi-pick-chips--filter { flex-wrap: wrap; overflow-x: visible; }
}

/* -------------------------------------------------------- My Trip tabs */
.spi-trip-tabs { display: flex; gap: .5rem; margin: 1rem 0; padding: .3rem; border-radius: 999px; background: #e8f4f5; max-width: 30rem; }
.spi-trip-tabs a:is(:link, :visited) { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .9rem; border-radius: 999px; color: var(--spi-pick-ink) !important; font-weight: 850; text-decoration: none !important; }
.spi-trip-tabs a[aria-current="page"] { background: #fff; box-shadow: 0 .2rem .6rem rgba(8, 123, 131, .18); color: #062f35 !important; }
.spi-trip-tabs [data-picks-count] { margin-left: .3em; }
.spi-trip-tabs [data-picks-count]:empty { display: none; }
[data-trip-view="picks"] > :not(.spi-breadcrumb, .spi-trip-builder__hero, #account, .spi-trip-tabs, #picks, #trip-save, [data-outing-return], [data-trip-recovery]) { display: none !important; }
[data-trip-view="plan"] > #picks { display: none; }
/* Review fix (M7): on the picks tab the dirty save bar stays in place instead
   of floating over the planner; a member gets "Trip dates changed. [Save My
   Trip]" in the tab itself. */
[data-trip-view="picks"] > .spi-trip-savebar.is-dirty { position: static; }
.spi-trip-builder[data-trip-view="picks"]:has(.spi-trip-savebar.is-dirty) { padding-bottom: 0; }
html:has([data-trip-view="picks"] > .spi-trip-savebar.is-dirty) { scroll-padding-bottom: 0; }
/* The save bar's text got a 15px column at 320px and 85px at 390px (older
   than Picks): on a phone the text takes its own row above the buttons.
   My Trip only. */
@media (max-width: 480px) {
  [data-spi-trip-app] > .spi-trip-savebar { flex-wrap: wrap; }
  [data-spi-trip-app] > .spi-trip-savebar > p { flex: 1 1 100%; }
}

/* ------------------------------------------------------ Your picks board */
.spi-picks-board { max-width: 44rem; margin: 1.5rem auto; }
.spi-picks-board > h2 { margin: 0 0 .75rem; }
.spi-picks-board__footer { margin: 1.25rem 0 0; color: var(--spi-pick-muted); font-size: .9rem; }
.spi-picks-app { color: var(--spi-pick-text); }
.spi-picks-app button:not(.spi-pick-chip, .spi-pick-link, .spi-picks-grid__cell) {
  box-sizing: border-box; min-height: 44px; min-width: 44px; padding: .45rem .95rem; border: 1px solid var(--spi-pick-teal); border-radius: 999px;
  background: #fff; color: var(--spi-pick-ink); font: inherit; font-weight: 800; cursor: pointer;
}
.spi-picks-app button[aria-pressed="true"] { background: var(--spi-pick-teal); color: #fff; }
.spi-picks-trip p { margin: 0 0 .35rem; }
.spi-picks-note { margin: .35rem 0; color: var(--spi-pick-muted); }
.spi-picks-note--warn { padding: .5rem .75rem; border-radius: .6rem; background: #fff7e6; color: #6b3d00; }
.spi-picks-note--save { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: #0f3d45; font-weight: 750; }
.spi-picks-headline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: .75rem 0; padding: 1rem; border: 1px solid #b9dfe2; border-radius: 1rem; background: #effaf9; }
.spi-picks-headline p { flex: 1 1 14rem; margin: 0; font-size: 1.08rem; font-weight: 750; line-height: 1.35; }
.spi-picks-banner { margin: .75rem 0; padding: .8rem 1rem; border-radius: 1rem; background: #fff7e6; }
.spi-picks-banner p { margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.spi-picks-views { display: flex; gap: .5rem; margin: .75rem 0; }
.spi-picks-empty { padding: 1rem; border: 1px dashed #b9dfe2; border-radius: 1rem; background: #fbfefe; }
.spi-picks-empty p { margin: .35rem 0; }
.spi-picks-empty__links { display: flex; flex-wrap: wrap; gap: .5rem; }
a.spi-picks-cta:is(:link, :visited) { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border: 1px solid var(--spi-pick-teal); border-radius: 999px; color: var(--spi-pick-ink) !important; font-weight: 800; text-decoration: none !important; }
.spi-picks-dates { margin: .75rem 0; padding: 1rem; border: 1px solid #b9dfe2; border-radius: 1rem; background: #fbfefe; }
.spi-picks-dates h3 { margin: 0 0 .6rem; }
.spi-picks-dates__row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin: 0 0 .6rem; }
.spi-picks-dates label, .spi-picks-frame label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 700; }
.spi-picks-dates input, .spi-picks-dates select, .spi-picks-frame select { box-sizing: border-box; min-height: 44px; padding: .35rem .5rem; border: 1px solid #b9d9dc; border-radius: .6rem; font: inherit; background: #fff; }
.spi-picks-dates__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0; }
.spi-picks-dates__actions button[type="submit"] { background: var(--spi-pick-teal) !important; color: #fff !important; }
/* The grid: 7 days fit at 320px (7 x 36 + 48); longer trips scroll inside. */
.spi-picks-gridbox { max-width: 100%; overflow-x: auto; margin: .5rem 0; -webkit-overflow-scrolling: touch; }
.spi-picks-grid { border-collapse: separate; border-spacing: 2px; font-size: .85rem; }
.spi-picks-grid th { min-width: 36px; padding: .1rem; color: var(--spi-pick-muted); font-weight: 750; text-align: center; line-height: 1.1; }
.spi-picks-grid tbody th { width: 44px; text-align: left; }
.spi-picks-grid td { padding: 0; }
.spi-picks-grid__cell { box-sizing: border-box; width: 36px; min-width: 36px; height: 44px; padding: 0; border: 1px solid var(--spi-pick-line); border-radius: .45rem; background: #fff; color: var(--spi-pick-text); font: inherit; font-size: 1rem; cursor: pointer; }
.spi-picks-grid__cell.is-taken { background: #d9f1ee; border-color: #8fd0c8; font-weight: 900; }
.spi-picks-grid__cell.is-pencilled { border-style: dashed; border-color: var(--spi-pick-teal); }
.spi-picks-grid__cell.is-not-here-before, .spi-picks-grid__cell.is-not-here-after { border-color: #9fb3b7; background: #f1f4f5; color: var(--spi-pick-muted); }
.spi-picks-grid .spi-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spi-picks-legend { margin: .2rem 0 .8rem; color: var(--spi-pick-muted); font-size: .85rem; white-space: pre-wrap; }
.spi-picks-still, .spi-picks-group { margin: 1rem 0; }
.spi-picks-still h3, .spi-picks-group h3, .spi-picks-group summary { margin: 0 0 .4rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.spi-picks-group summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.spi-picks-rows { margin: 0; padding: 0; list-style: none; }
.spi-picks-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .15rem .5rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid #eef5f6; }
.spi-picks-rows li > p { grid-column: 1; margin: 0; }
.spi-picks-rows li > button { grid-column: 2; grid-row: 1 / span 4; }
.spi-picks-rows li > button ~ button { grid-column: 3; }
.spi-picks-rows__title { font-weight: 800; overflow-wrap: anywhere; }
.spi-picks-rows__sub { color: var(--spi-pick-muted); font-size: .92rem; }
.spi-picks-rows__reason { color: #6b3d00; font-size: .92rem; }
.spi-picks-day { margin: 1rem 0; padding: .75rem .9rem; border: 1px solid #d5eaec; border-radius: 1rem; background: #fff; }
/* Review fix (H3): the page's own scroll-padding-top already clears the
   floating header (spi-search.css measures it), so a 12rem margin on top of
   it parked the tabs 186px lower than meant. #picks, the address fragment,
   keeps the tabs above it in view. */
.spi-picks-day, .spi-picks-still, .spi-picks-trip, .spi-picks-headline, .spi-picks-dates, .spi-trip-tabs { scroll-margin-top: .5rem; }
#picks { scroll-margin-top: 5rem; }
.spi-picks-day.is-flash { animation: spi-picks-flash 1.2s ease-out; }
@keyframes spi-picks-flash { from { box-shadow: 0 0 0 4px #f59e0b; } to { box-shadow: 0 0 0 0 transparent; } }
.spi-picks-day h3 { margin: 0 0 .4rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; }
.spi-picks-frame { margin: .2rem 0 .5rem; }
.spi-picks-slots { margin: 0; padding: 0; list-style: none; }
.spi-picks-slot { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .5rem; align-items: start; padding: .35rem 0; border-top: 1px solid #eef5f6; }
.spi-picks-slot__part { padding-top: .7rem; color: var(--spi-pick-muted); font-weight: 750; font-size: .92rem; }
.spi-picks-slot__body { display: grid; gap: .2rem; }
.spi-picks-slot__pick, .spi-picks-slot__open { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; }
.spi-picks-slot__pick span { overflow-wrap: anywhere; font-weight: 750; }
.spi-picks-slot__pick.is-pencil { padding-left: .4rem; border-left: 2px dashed var(--spi-pick-teal); }
.spi-picks-slot__pick--dish span { font-weight: 600; padding-left: .8rem; }
.spi-picks-slot__open span, .spi-picks-slot__muted { color: var(--spi-pick-muted); }
.spi-picks-slot__muted { display: flex; align-items: center; min-height: 44px; }
.spi-picks-slot.is-not-here-before, .spi-picks-slot.is-not-here-after { background: #f4f7f8; }
.spi-picks-sleep { margin: .5rem 0 0; padding: .45rem .7rem; border-radius: .6rem; background: #f1ecfb; color: #3d2a73; font-weight: 700; }
@media (max-width: 650px), (max-height: 520px) {
  .spi-picks-board { margin: 1rem 0; }
  .spi-picks-slot { grid-template-columns: 4.9rem minmax(0, 1fr); }
  .spi-picks-headline p { font-size: 1rem; }
  .spi-pick-slot { margin: 1.25rem 0 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .spi-picks-day.is-flash { animation: none; } }
/* Save UX (desktop planners): a wide screen gets a wider planner with the day
   blocks two across (date order runs left to right, then down) instead of one
   long phone column, and the tab row lines up with the planner's left edge. */
@media (min-width: 1100px) {
  .spi-picks-board { max-width: 62rem; }
  .spi-picks-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; align-items: start; }
  [data-trip-view="picks"] > .spi-trip-tabs { margin-left: max(0px, calc((100% - 62rem) / 2)); }
}
/* ---- R-b: members, freshness, take it with you ---------------------------- */
.spi-picks-import { margin: .75rem 0; padding: .8rem 1rem; border: 1px solid #b9dfe2; border-radius: 1rem; background: #effaf9; }
.spi-picks-import p { margin: 0 0 .4rem; font-weight: 750; }
.spi-picks-import__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 !important; }
.spi-pick-sheet .spi-picks-import button { box-sizing: border-box; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--spi-pick-teal); border-radius: 999px; background: #fff; color: var(--spi-pick-ink); font: inherit; font-weight: 800; }
.spi-picks-import button[disabled] { opacity: .7; cursor: progress; }
a.spi-picks-signin:is(:link, :visited) { display: inline-flex; align-items: center; min-height: 44px; color: var(--spi-pick-ink) !important; font-weight: 800; text-decoration: underline !important; text-underline-offset: .15em; }
.spi-picks-flags { padding: .6rem .9rem; border: 1px solid #f3d19c; border-radius: 1rem; background: #fffaf0; }
.spi-picks-flags .spi-picks-rows li { border-bottom-color: #f6e6c8; }
.spi-pick-chips--feel .spi-pick-chip { padding-inline: .7rem; }
.spi-picks-copy { margin: 1.25rem 0 .5rem; padding: .9rem 1rem; border: 1px solid #d5eaec; border-radius: 1rem; background: #fbfefe; }
.spi-picks-copy h3 { margin: 0 0 .4rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.spi-picks-copy__check { margin: .35rem 0; }
.spi-picks-copy p { margin: .35rem 0; }
.spi-picks-views { flex-wrap: wrap; }
.spi-picks-print { display: none; }
@media print {
  html.spi-picks-printing body > *:not(.spi-picks-print) { display: none !important; }
  html.spi-picks-printing body { margin: 0; padding: 0; background: #fff !important; }
  html.spi-picks-printing .spi-picks-print { display: block !important; box-sizing: border-box; max-width: 100%; padding: 0 .5rem; color: #000; font: 11pt/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
  .spi-picks-print * { white-space: normal !important; }
  .spi-picks-print h1 { margin: 0 0 .15rem; font-size: 14pt; letter-spacing: .04em; }
  .spi-picks-print h2 { margin: 0 0 .2rem; font-size: 11pt; letter-spacing: .05em; }
  .spi-picks-print p { margin: 0 0 .25rem; }
  .spi-picks-print__lead, .spi-picks-print__foot { font-size: 9.5pt; }
  .spi-picks-print__day { margin: .6rem 0 0; padding-top: .35rem; border-top: 1px solid #999; break-inside: avoid; page-break-inside: avoid; }
  .spi-picks-print table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .spi-picks-print th { width: 6.5em; padding: .1rem .5rem .1rem 0; font-weight: 600; text-align: left; vertical-align: top; }
  .spi-picks-print td { padding: .1rem 0; vertical-align: top; overflow-wrap: anywhere; word-break: normal; }
  .spi-picks-print__open { color: #555; }
  .spi-picks-print__note { padding-left: 1em; font-style: italic; }
  .spi-picks-print ul { margin: .2rem 0 0; padding-left: 1.1em; }
}
/* ---- R-c: save from lists, and the extras ------------------------------- */
/* A directory category card. Its link stretches over the whole card
   (.spi-card > a:first-child::after, inset: 0), so the control is lifted
   above it -- otherwise every click on "☆ Remember This" would open the
   place. It sits last, under the card's description and badges. With no
   script the link keeps the pill's size, not the card title's 1.15rem. */
li.spi-card > .spi-pick { position: relative; z-index: 2; }
li.spi-card > .spi-pick--compact { margin-top: .9rem; }
li.spi-card a.spi-pick__fallback { font-size: 1rem; }
/* The cards in a row are one height, so each control sits at its card's
   foot -- in line across the row -- and the card keeps room for it (the
   44px button or link, the same before and after the script); the card's
   "→" stays at the right. A browser without :has() keeps the control in
   the flow, just under the card's text. */
li.spi-card:has(> .spi-pick--compact) { padding-bottom: calc(1.35rem + 44px + .9rem); }
li.spi-card:has(> .spi-pick--compact) > .spi-pick--compact { position: absolute; left: 1.35rem; right: 3rem; bottom: 1.1rem; margin: 0; }
/* /events/ and /events/this-weekend/ preview cards: spi-picks.js wraps each
   card that can still be picked and adds its "☆ Remember This" row (the
   /events/local/ card rules above draw it). Until the script lands, a card
   keeps that row's room -- a 1px dashed rule, .1rem + 1rem of padding, the
   control's .7rem margin and its 44px button -- so nothing below it moves.
   A card that gets no pill gives the room back. */
@media (scripting: enabled) {
  .spi-events .spi-event-grid > a.spi-event-card:not(.spi-event-card--unpicked) { margin-bottom: calc(1px + 1.8rem + 44px); }
}
/* The first click on a preview pill waits for the hints file. */
.spi-pick .spi-pick__btn[aria-busy="true"] { cursor: progress; opacity: .75; }
/* Your own busy times: a slot marked busy, its grid cell, and "Mark busy"
   in an open slot's sheet. Every symbol also has its word (the cell's name
   says "busy: Pool/beach", the row says "Busy · Pool/beach"). */
.spi-picks-grid__cell.is-busy { border-color: #b6a6dd; background: #f1ecfb; color: #3d2a73; font-weight: 900; }
.spi-picks-slot.is-busy { background: #faf8ff; }
.spi-picks-slot__busy { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; }
.spi-picks-slot__busy span { color: #3d2a73; font-weight: 750; overflow-wrap: anywhere; }
.spi-pick-busy .spi-pick-chip { background: #faf8ff; }
.spi-pick-busy__own { margin: .6rem 0 0; }
.spi-pick-busy__own label { display: block; margin: 0 0 .3rem; font-weight: 700; }
.spi-pick-busy__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.spi-pick-busy__row input { box-sizing: border-box; flex: 1 1 12rem; min-width: 0; min-height: 44px; padding: .45rem .6rem; border: 1px solid #b9d9dc; border-radius: .75rem; background: #fff; color: var(--spi-pick-text); font: inherit; }
.spi-pick-busy__row button { box-sizing: border-box; min-height: 44px; padding: .45rem 1rem; border: 1px solid var(--spi-pick-teal); border-radius: 999px; background: #fff; color: var(--spi-pick-ink); font: inherit; font-weight: 800; cursor: pointer; }
.spi-pick-sheet input:focus-visible, .spi-pick-sheet textarea:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
@media (hover: hover) {
  .spi-pick-busy__row button:hover { border-color: var(--spi-pick-teal); background: #e3f4f3; }
}
/* "Now" mode: the headline while the island's clock is inside the trip, and
   the slot it is about (a word, not only a colour). */
.spi-picks-headline.is-now { border-color: #f0cf8c; background: #fffaf0; }
.spi-picks-slot__now { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 999px; background: #0f3d45; color: #fff; font-size: .75rem; font-weight: 800; line-height: 1.5; vertical-align: .1em; }
.spi-picks-slot.is-now { box-shadow: inset 3px 0 0 #0f3d45; }
.spi-picks-grid__cell.is-now { box-shadow: 0 0 0 2px #0f3d45; }