/* The trip planner: the quiz (homepage and /plan) and the plan page. Colors
   come from style.css's tokens, so both themes follow the site's. */

/* ---------- quiz ---------- */
.plan-quiz-card {
  max-width: 720px; margin: 0 auto; min-height: 22rem; scroll-margin-top: 88px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.plan-quiz__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); }
.plan-quiz__nav, .plan-quiz__notsure, .plan-edit, .plan-link {
  background: none; border: 0; padding: var(--space-2) 0; min-height: 44px; font: inherit; cursor: pointer;
  color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px;
}
.plan-quiz__count { color: var(--color-text-muted); }
.plan-quiz__progress { height: 4px; border-radius: var(--radius-full); background: var(--color-surface-offset-2); margin: var(--space-1) 0 var(--space-5); overflow: hidden; }
.plan-quiz__progress span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; transition: width var(--transition-interactive); }
.plan-quiz__prompt {
  font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; color: var(--color-primary);
  margin: 0 0 var(--space-4); text-wrap: balance;
}
.plan-quiz__prompt:focus { outline: none; }
.plan-quiz__prompt:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); }
.plan-quiz__options { display: grid; gap: var(--space-3); }
.plan-quiz__option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px;
  padding: var(--space-3) var(--space-4); text-align: left; font: inherit; cursor: pointer;
  background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
/* Hover only where there is a pointer: on a phone the next question's option
   lands under the finger and would keep a tapped look. */
@media (hover: hover) { .plan-quiz__option:hover { border-color: var(--color-primary); } }
.plan-quiz__option:focus-visible, .plan-quiz__nav:focus-visible, .plan-quiz__notsure:focus-visible,
.plan-edit:focus-visible, .plan-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* A prefilled answer (Back, Edit answers) shows which one was chosen. */
.plan-quiz__option[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-highlight); box-shadow: inset 0 0 0 1px var(--color-primary); }
.plan-quiz__label { font-weight: 600; }
.plan-quiz__sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.plan-quiz__notsure { margin-top: var(--space-3); font-weight: 600; }
.plan-quiz__notsure[aria-pressed="true"] { text-decoration-thickness: 2px; }
.plan-quiz-last { max-width: 720px; margin: 0 auto var(--space-3); font-size: var(--text-sm); }
.plan-quiz-aside { max-width: 720px; margin: var(--space-5) auto 0; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- plan page ---------- */
.plan-page { padding-block: var(--space-6) var(--space-16); }
.plan-page .wrap { max-width: 1040px; }
.plan-page .plan-quiz-card { margin-top: var(--space-5); }
.plan-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.plan-chip { font-size: var(--text-xs); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 12px; background: var(--color-surface); }
.plan-chip span { color: var(--color-text-muted); }
.plan-edit { font-size: var(--text-xs); font-weight: 600; padding-inline: 0; }
.plan-link { padding: 0; min-height: 0; }
.plan-title { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; margin: 0 0 var(--space-2); text-wrap: balance; }
.plan-title:focus { outline: none; }
.plan-sub { color: var(--color-text-muted); margin: 0 0 var(--space-5); max-width: 70ch; }
.plan-loading, .plan-error, .plan-empty { padding: var(--space-6) 0; }
/* At least a screen tall in every state (loading, the wall, the plan, Edit
   answers), so the footer never sits under the one-line "Building your plan"
   and then jumps away when the plan arrives. */
#plan-app { min-height: 100vh; min-height: 100svh; }
.plan-source { font-size: var(--text-xs); color: var(--color-text-muted); }
.plan-source a { color: inherit; }
.plan-caution { font-size: var(--text-sm); color: var(--color-text-muted); }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 0; }
.plan-panel { background: var(--color-surface-offset); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-top: var(--space-4); }
.plan-panel h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.plan-panel p { margin: 0 0 var(--space-3); }
.plan-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
/* A pairing's depth and technique keep the colours they wear on a river guide. */
.plan-chain .tag:not(.ranker-card__tags > .tag) { background: var(--color-surface-offset); color: var(--color-text); }
.plan-chain .plan-tag--best { background: var(--color-accent); color: var(--color-text-inverse); }
.plan-chain .plan-tag--now { background: var(--color-primary-highlight); color: var(--color-text); }

/* The wall: the shape of a plan, blurred, under the sign-up card. */
/* style.css pads every section 64px top and bottom; the wall is part of the plan's header. */
.plan-wall { display: grid; margin-top: var(--space-2); padding: 0; }
.plan-wall > * { grid-area: 1 / 1; }
.plan-wall__ghost { display: grid; gap: var(--space-4); filter: blur(3px); opacity: 0.8; }
.plan-wall__ghost div { height: 140px; border-radius: var(--radius-lg); background: var(--color-surface-offset); }
.plan-wall__ghost div:first-child { height: 300px; border: 2px solid var(--color-primary-highlight); }
/* The ghost's filter and opacity give it its own layer, which paints above
   ordinary blocks; the card has to be lifted over it. */
.plan-wall__card {
  position: relative; z-index: 1; align-self: start; justify-self: center; width: min(100% - 2 * var(--space-3), 560px); margin: var(--space-4) 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-lg);
}
.plan-wall__card h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; margin: 0 0 var(--space-3); text-wrap: balance; }
/* The button first, on screen as the wall opens; what the plan holds under it. */
.plan-wall__list { margin: var(--space-5) 0 0; padding-left: 1.3em; display: grid; gap: var(--space-2); }
.plan-wall__cta { width: 100%; min-height: 48px; justify-content: center; }

/* The three places: tabs that swap the whole chain below. */
.plan-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-5); }
@media (max-width: 640px) { .plan-places { grid-template-columns: minmax(0, 1fr); } }
.plan-place-tab {
  display: grid; gap: 2px; align-content: start; text-align: left; font: inherit; cursor: pointer; min-height: 44px;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
}
.plan-place-tab[aria-selected="true"] { border: 2px solid var(--color-primary); background: var(--color-primary-highlight); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }
.plan-place-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.plan-place-tab__role { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.plan-place-tab__name { font-weight: 600; line-height: 1.25; }
.plan-place-tab__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
/* Muted ink drops under 4.5:1 on the selected tab's tint. */
.plan-place-tab[aria-selected="true"] .plan-place-tab__meta { color: var(--color-text); }

/* The chain: five numbered steps joined by a line. */
.plan-chain { position: relative; }
.plan-step { position: relative; padding: 0 0 var(--space-8) calc(36px + var(--space-4)); }
.plan-step::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--color-divider); }
.plan-step:last-of-type::before { display: none; }
.plan-step__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; margin: 0 0 var(--space-3); display: flex; align-items: center; min-height: 36px; text-wrap: balance; }
.plan-step__n {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-primary); color: var(--color-text-inverse); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700;
}
.plan-step__note { color: var(--color-text-muted); margin: 0 0 var(--space-3); max-width: 70ch; }
@media (max-width: 640px) {
  .plan-step { padding-left: 0; }
  .plan-step::before { display: none; }
  .plan-step__n { position: static; flex: none; width: 30px; height: 30px; margin-right: var(--space-3); }
}

/* 1. Where */
.plan-where { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .plan-where { grid-template-columns: minmax(0, 1fr) 290px; } }
/* No gauge reading, no flow box: step 1 takes the width. */
@media (min-width: 820px) { .plan-where--solo { grid-template-columns: minmax(0, 1fr); } }
.plan-place-name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; margin: 0; }
.plan-place-area { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-1) 0 var(--space-3); }
.plan-fit { margin: 0 0 var(--space-3); padding-left: 1.1em; display: grid; gap: 2px; }
.plan-facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.plan-where__intro .plan-facts { margin-top: var(--space-3); }
.plan-access-more { margin-top: var(--space-3); }
/* The label as wide as its word: the column was sized for a longer one. */
.plan-facts div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-3); font-size: var(--text-sm); }
.plan-facts dt { font-weight: 600; }
.plan-facts dd { margin: 0; }
/* 32px to tap, the text in the middle of it: a min-height left the spare
   space under the text, so the line after a fold sat further off than the
   line before it. Padding alone makes the height, on both sides. */
.plan-rules summary, .plan-fly__more summary, .plan-tech-alt summary { cursor: pointer; font-weight: 600; display: list-item; padding-block: 5px; }
.plan-rules p { font-size: var(--text-sm); margin: var(--space-2) 0 0; }

/* Flow: inverse text on the primary color reads in both themes (light text
   on dark teal, dark text on light teal). */
.plan-flow { align-self: start; display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-primary); color: var(--color-text-inverse); border-radius: var(--radius-lg); padding: var(--space-5); }
.plan-flow p { margin: 0; }
.plan-flow a { color: inherit; }
.plan-flow__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.plan-flow__cfs b { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; }
.plan-flow__status { font-weight: 600; }
.plan-flow__meta { font-size: var(--text-xs); }
.plan-flow__alert { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.plan-flowbar { position: relative; height: 8px; margin-top: var(--space-2); border-radius: var(--radius-full); background: color-mix(in oklab, var(--color-text-inverse) 35%, transparent); }
.plan-flowbar__good { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-full); background: var(--color-text-inverse); }
.plan-flowbar__mark { position: absolute; top: -5px; width: 6px; height: 18px; margin-left: -3px; border-radius: 3px; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-text-inverse); }
.plan-flowbar__scale { display: flex; justify-content: space-between; font-size: var(--text-xs); }
.plan-report { margin-top: var(--space-4); border-left: 3px solid var(--color-primary); padding-left: var(--space-4); }
.plan-report h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.plan-report blockquote { margin: 0; }

/* 2. Hatches */
.plan-hatches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 820px) { .plan-hatches { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.plan-hatch { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.plan-hatch.is-now { border-color: var(--color-primary); }
.plan-hatch p { margin: 0; }
.plan-hatch__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.plan-hatch__size, .plan-fly__size { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.plan-hatch__dates { font-size: var(--text-xs); color: var(--color-text-muted); }
.plan-hatch__other, .plan-where-note { font-size: var(--text-sm); margin: var(--space-3) 0 0; }
.plan-hatch .hc-months { max-width: none; }

/* 3. Flies */
.plan-flygroup { margin-bottom: var(--space-4); }
.plan-flygroup h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.plan-flies { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.plan-fly { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-1); align-content: start; }
.plan-fly__head b { font-weight: 600; }
.plan-fly__stage { font-size: var(--text-xs); color: var(--color-text-muted); }
/* A fly the rig in step 4 ties on: outlined, tagged, first in its group. */
.plan-fly.is-rigged { border: 2px solid var(--color-primary); padding: calc(var(--space-3) - 1px); }
.plan-chain .plan-tag--rig { justify-self: start; background: var(--color-primary-highlight); color: var(--color-text); }
.plan-fly__job { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.plan-fly__more { font-size: var(--text-sm); }
.plan-fly__more p { margin: var(--space-1) 0 0; }
.plan-fly__buy { margin: 0; font-size: var(--text-sm); }
.plan-flies-more { margin-top: var(--space-2); }
.plan-flies-more summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); display: list-item; padding-block: 5px; }
.plan-flies-more .plan-flies { margin-top: var(--space-2); }

/* 4. Technique and the rig, drawn top to bottom. */
.plan-tech { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.plan-tech.is-primary { border: 2px solid var(--color-primary); }
.plan-tech h3 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.plan-tech__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin: 0; }
.plan-tech__body { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .plan-tech__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* The steps read at the diagram's size: one size for the card's body. */
.plan-tech__steps { margin: 0 0 var(--space-3); padding-left: 1.3em; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.plan-tech__depth { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.plan-tech__learn { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.plan-tech__card { font-size: var(--text-sm); margin: var(--space-3) 0; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
/* The rig card: TroutTips' rig from a local report, or the locked one. */
.plan-rig-card, .plan-locked-rig { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2, var(--color-bg)); border: 1px solid var(--color-divider); }
.plan-rig-card { display: grid; gap: var(--space-3); scroll-margin: 160px 0 var(--space-4); }
.plan-rig-card p, .plan-locked-rig p { margin: 0; }
.plan-rig-card__title { font-weight: 700; }
/* The pairing itself, first and largest, as on a river guide's Fly Pairings card. */
.plan-rig-card .plan-rig-card__flies { font-size: var(--text-lg); font-weight: 700; line-height: 1.35; margin-top: calc(-1 * var(--space-2)); }
.plan-rig-card .pairing-unlocked-note, .plan-rig-card .pairing-owned-note { margin-bottom: 0; }
.plan-rig-card.pairing-just-unlocked { outline-offset: 2px; }
.plan-rig-card:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.plan-locked-rig { border-style: dashed; display: grid; gap: var(--space-2); }
.plan-locked-rig__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* account.js tints every pairing gate for the Pricing table; here it is a button. */
.plan-locked-rig .btn--primary.pairing-gate--free { background: var(--color-primary); }
.plan-locked-rig .btn--primary.pairing-gate--free:hover { background: var(--color-primary-hover); }
.plan-built-rig { margin: var(--space-2) 0 0; }
.plan-tech-alt { margin-top: var(--space-3); }
.plan-tech-alt > summary { padding: var(--space-2) 0; }
.plan-rig-link { margin-top: var(--space-3); }
/* The one sentence a plan that follows the fish opens with. */
.plan-follow { border-left: 3px solid var(--color-primary); padding: var(--space-1) 0 var(--space-1) var(--space-3); margin: 0 0 var(--space-5); max-width: 70ch; }
/* A button naming a river ("Rig of the Day for the Uncompahgre River")
   wraps rather than pushing the page sideways on a phone. */
.plan-chain .btn { white-space: normal; max-width: 100%; text-align: left; }
.plan-rig { list-style: none; margin: 0; padding: 0 0 0 var(--space-5); position: relative; display: grid; gap: var(--space-3); }
.plan-rig::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--color-text-muted); border-radius: 1px; }
.plan-rig li { position: relative; display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.plan-rig__icon { position: absolute; left: calc(-1 * var(--space-5) + 1px); top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-text-muted); }
.plan-rig__indicator .plan-rig__icon { background: var(--color-accent); border-color: var(--color-accent); width: 16px; height: 16px; left: calc(-1 * var(--space-5)); }
.plan-rig__shot .plan-rig__icon { width: 10px; height: 10px; left: calc(-1 * var(--space-5) + 3px); top: 5px; background: var(--color-text); border-color: var(--color-text); }
.plan-rig__fly .plan-rig__icon { border-radius: 3px 50% 50% 50%; background: var(--color-primary); border-color: var(--color-primary); }
.plan-rig__line, .plan-rig__gap { color: var(--color-text-muted); font-size: var(--text-xs); }
/* Drawn, not the ↕ character: iOS shows that as a blue emoji tile. */
.plan-rig__gap span::before {
  content: ""; display: inline-block; width: 0.6em; height: 1.1em; margin-right: 0.4em; vertical-align: -0.2em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M5 1.5v15M1.5 5 5 1.5 8.5 5M1.5 13 5 16.5 8.5 13' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M5 1.5v15M1.5 5 5 1.5 8.5 5M1.5 13 5 16.5 8.5 13' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan-rig__why { color: var(--color-text-muted); font-size: var(--text-xs); }

/* 5. Shops */
.plan-shop-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .plan-shop-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
/* As tall as its list, not stretched to the shops beside it. */
.plan-list { margin-top: 0; align-self: start; }
.plan-list ul { margin: 0 0 var(--space-3); padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.plan-list li::before { content: "☐ "; color: var(--color-text-muted); }
/* The button and what it says, on one line: the reserved line under the
   button left the panel's bottom twice as deep as its top. */
.plan-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.plan-copy-status { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.plan-shops ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.plan-shop { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.plan-shop p { margin: 0; }
.plan-shop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.plan-shop__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
/* A heart in the top-right corner of each fly, pairing and shop card. */
.plan-fly__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.plan-rig-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.plan-rig-card__top > div { display: grid; gap: var(--space-2); min-width: 0; }
.plan-heart { margin: -4px -6px 0 0; }
/* The plan's own heart, in the top-right corner beside its title. */
/* Each spot's box at the top: the tab, and in its top-right corner the heart
   that saves the spot as a trip plan (Saved › Trip plans). The tab keeps
   room on the right so a long name never runs under the heart. */
.plan-place-cell { position: relative; display: grid; }
.plan-place-cell .plan-place-tab { padding-right: 44px; }
.plan-place-cell .plan-place-tab[aria-selected="true"] { padding-right: 43px; }
.plan-place-cell .plan-heart { position: absolute; top: var(--space-2); right: var(--space-2); margin: 0; }
@media (min-width: 641px) { .plan-places--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan-spot-gone { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.plan-shop__where { font-size: var(--text-sm); color: var(--color-text-muted); }
.plan-shops > .plan-source { margin-top: var(--space-3); }
/* Website is the third, quieter action: a link as tall as the buttons beside
   it, its words level with theirs. As a third button the row wrapped on a phone. */
.plan-shop__site { align-self: stretch; display: inline-flex; align-items: center; font-size: var(--text-sm); }

.plan-alerts { margin-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--color-accent-highlight); color: var(--color-text); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.plan-alerts p { margin: 0; max-width: 60ch; }
.plan-alerts .plan-save-error { flex-basis: 100%; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.plan-all { margin-top: var(--space-5); font-weight: 600; }