/* Budget mode v2 (WF-079 L3): the options screen, view=budget-options ("What £400 gets you").
   Tokens only — every colour comes from style.css (accent family under data-mode="budget", --food, --warn-*, --scrim-hero). */
.budget-options{min-width:0}
.bo-h1{margin:6px 0 10px;font-size:clamp(24px,6vw,32px);overflow-wrap:anywhere}
.bo-h1:focus{outline:none}
.bo-h1:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.bo-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.bo-chip strong{color:var(--ink)}
.bo-honesty{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--muted)}
.bo-honesty p{margin:0}
.bo-how{margin-top:4px}
.bo-how summary{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--accent-text);font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.bo-how summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.bo-how p{max-width:72ch;padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.bo-home-note{margin-top:6px!important;color:var(--ink-2)}

/* ---- The cards: one column on phones, two at ≥ 700 px, three at ≥ 1100 px ---- */
.bo-list{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:700px){.bo-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.bo-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bo-card{min-width:0;display:flex}
.bo-article,.bo-skel{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}
.bo-media{position:relative;display:flex;height:clamp(170px,46vw,210px);background:var(--hero-fallback);overflow:hidden}
.bo-photo{position:relative;flex:1;min-width:0;background:linear-gradient(100deg,var(--skeleton) 30%,var(--skeleton-hi) 50%,var(--skeleton) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
.bo-photo.loaded,.bo-photo.no-photo{animation:none}
.bo-photo.no-photo{background:var(--hero-fallback)}
.bo-photo img{position:absolute;inset:0}
.bo-photo-half+.bo-photo-half{border-left:2px solid var(--surface)}
.bo-over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;padding:14px 16px;background:var(--scrim-hero);color:var(--on-accent)}
.bo-pill{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--radius-pill);background:var(--surface);color:var(--accent-text);font:800 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.bo-title{margin:0;color:var(--on-accent);font-size:22px;line-height:1.15;overflow-wrap:anywhere}
.bo-place{margin:0;font-size:14px;color:var(--on-accent);overflow-wrap:anywhere}
.bo-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;min-width:0}
.bo-body p{margin:0}
.bo-hook{color:var(--ink-2);font-size:15px;overflow-wrap:anywhere}

/* ---- The spend bar (flights/train · bed · food; the track is what is left) ---- */
.bo-bar{display:flex;height:12px;border-radius:var(--radius-pill);background:var(--surface-3);overflow:hidden;margin-top:2px}
.bo-seg{display:block;height:100%;min-width:0}
.bo-seg-flights{background:var(--accent)}
.bo-seg-bed{background:var(--accent-2)}
.bo-seg-food{background:var(--food)}
.bo-figures{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:14px;color:var(--ink-2)}
.bo-figures li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0}
.bo-figures strong{color:var(--ink)}
.bo-fig-detail{color:var(--muted)}
.bo-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;align-self:center}
.bo-dot-flights{background:var(--accent)}
.bo-dot-bed{background:var(--accent-2)}
.bo-dot-food{background:var(--food)}
.bo-total{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;color:var(--accent-text)}
.bo-total-tight{color:var(--warn-ink)}
.bo-tag{flex:none}
.bo-total-tight .bo-tag{background:var(--warn-bg);color:var(--warn-ink)}
.bo-stretch{padding:8px 10px;border-radius:var(--radius-sm);background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);font-size:14px}
.bo-left{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.bo-line{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.bo-steal{font-weight:800;color:var(--accent-text)}
.bo-note,.bo-climate{color:var(--muted)}
.bo-see{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 2px;color:var(--accent-text);font-weight:800;text-decoration:none}
.bo-see:hover{text-decoration:underline}
.bo-see:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* ---- Loading skeletons, empty and offline ---- */
.bo-skel .bo-media{background:linear-gradient(100deg,var(--skeleton) 30%,var(--skeleton-hi) 50%,var(--skeleton) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
.bo-skel-line{display:block;height:12px;border-radius:6px;background:var(--skeleton)}
.bo-skel-short{width:60%}
.bo-skel .bo-bar{background:var(--skeleton)}
.bo-null{margin:8px 0 24px}
.bo-null h2{color:var(--ink);font-size:20px;overflow-wrap:anywhere}
.bo-null h2:focus{outline:none}
.bo-picks{justify-content:center;margin-top:12px}
@media(prefers-reduced-motion:reduce){.bo-photo,.bo-skel .bo-media{animation:none}}