/* Stoury dark mode for the shared components (STOUR-134).
 *
 * Linked by /discovery, /discovery/map and /discovery-itinerary after their own styles. The
 * components (booking panel, Book my trip run, dialogs, the save sheet, the dock, search, time
 * anchors, the coming-soon card) inject their light CSS from JavaScript with fixed colours, so dark
 * is an override here, keyed on html.st-dark: the EFFECTIVE theme that /static/stoury-theme.js sets
 * (the person's choice, else the system). These components only exist with JavaScript, so keying on
 * the script's class loses nothing. Each page's own tokens follow data-theme and the
 * prefers-color-scheme query directly.
 *
 * The dark palette, one place: page #1c1a13, panel #25231a, raised #2e2c21, line #3d3a2c,
 * text #f4ead2 (14.6:1 on the page), soft text #c9bfa6, muted #c9bfa6 (6.9:1 on the panel),
 * links #f79e78, butter #f7d18a. Coral buttons keep their ink text (5.9:1).
 */

/* ── The switch (sun / moon), shared by the discovery pages ─────────────────────── */
.st-theme-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;
  border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;}
.st-theme-btn:hover{background:rgba(28,26,19,.08);}
.st-theme-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.st-theme-btn .i-sun{display:none;}
html.st-dark .st-theme-btn .i-sun{display:block;}
html.st-dark .st-theme-btn .i-moon{display:none;}
html.st-dark .st-theme-btn:hover{background:rgba(244,234,210,.10);}
@media print{.st-theme-btn{display:none !important;}}

/* ── Panels and sheets: the booking panel, Book my trip, dialogs, save, anchors ─────────── */
html.st-dark .sbk,html.st-dark .sbr,html.st-dark .sch,html.st-dark .ssv,html.st-dark .sa-pop{background:#1f1d15;color:#f4ead2;}
html.st-dark .sbk-li,html.st-dark .sbr-li,html.st-dark .sbk-trip,html.st-dark .sbr-trip,html.st-dark .ssv-offer,
html.st-dark .ssn,html.st-dark .sdk-credp,html.st-dark .sdk-pop{background:#2a281d;border-color:#3d3a2c;color:#f4ead2;}
html.st-dark .ssn .pitch,html.st-dark .ssn label.ok,html.st-dark .ssn .msg:not(.err){color:#c9bfa6;}  /* STOUR-120: readable on the dark card */
html.st-dark .sbk-ctx .film,html.st-dark .sbk-ctx .note,html.st-dark .sbk-f,html.st-dark .sbk label,html.st-dark .sbk-trip .hint,
html.st-dark .sbk-li .tx span,html.st-dark .sbr-p,html.st-dark .sbr-say,html.st-dark .sbr-sub,html.st-dark .sbr label,
html.st-dark .sbr-f,html.st-dark .sbr-li span.m,html.st-dark .sbr-eye,html.st-dark .ssv p,html.st-dark .ssv label.f,
html.st-dark .ssv .fine,html.st-dark .ssv-offer .nn,html.st-dark .ssv-soft,html.st-dark .ssv-offer b,html.st-dark .sch p,
html.st-dark .sdk-credp,html.st-dark .sdk-pop p,html.st-dark .sdk-pop i,html.st-dark .sdk-pop .adr{color:#c9bfa6;}
html.st-dark .sbk-trip,html.st-dark .sbr-trip{color:#f4ead2;}
html.st-dark .sbk-trip .lnk,html.st-dark .sbr-lnk,html.st-dark .ssv .lnk,html.st-dark .ssv .opt,html.st-dark .sch .opt,
html.st-dark .sch .cancel{color:#f79e78;}
/* STOUR-136, STOUR-186: the primary choice in a dialog is coral in both themes: it keeps its dark brown text. */
html.st-dark .sch .opt.primary{color:#1c1a13;}
html.st-dark .sbk-btn.ghost,html.st-dark .sbr-btn.ghost,html.st-dark .sbk-btn.alt{background:#2a281d;color:#f4ead2;border-color:#f4ead2;}
/* STOUR-186: the outlined secondary (copy link, set dates, notify me) on the dark surface. */
html.st-dark .ssv .linkbox button,html.st-dark .st-set,html.st-dark .ssn button.go{background:#2a281d;color:#f4ead2;border-color:#f4ead2;}
html.st-dark .sbk-alts{color:#c9bfa6;}  /* STOUR-185: the hotel's Expedia and own-site alternatives */
html.st-dark .sbk-hint,html.st-dark .sbr-hint{color:#c9bfa6;}  /* STOUR-189: the deadline suggestion's label */
html.st-dark .sbk-alt,html.st-dark .sbk-alts a,html.st-dark .sdk-pick a,html.st-dark .sbk [style*="color:#a8492a"]{color:#f79e78 !important;}
html.st-dark .ssv .x,html.st-dark .sch .x,html.st-dark .sa-pop .sa-x,html.st-dark .sdk-credp-x,html.st-dark .sdk-allp-x{background:#2e2c21;color:#f4ead2;border-color:#3d3a2c;}
html.st-dark .sbk input,html.st-dark .sbr input[type=text],html.st-dark .sbr input[type=datetime-local],html.st-dark .ssv input,
html.st-dark .ssv-offer input,html.st-dark .ssn input[type=email],html.st-dark .sa-time input,html.st-dark .sa-time select,
html.st-dark .st-f input,html.st-dark .st-party button{background:#1c1a13;color:#f4ead2;border-color:#5a5642;}
/* The partner's own booking page stays white inside its frame: it is their page, not ours. */

/* ── The dock (/discovery) and search ──────────────────────────────────────────── */
html.st-dark .sdk-chips,html.st-dark .sdk-cred{background:#25231a;border-color:#3d3a2c;}
html.st-dark .sdk-chip.sdk-reset{color:#f79e78;}  /* STOUR-186: the link colour in dark */
html.st-dark .sdk-arr{background:#2e2c21;color:#f4ead2;border-color:#5a5642;}
html.st-dark .sdk-chip.sdk-soon,html.st-dark .sdk-chip.sdk-locked,html.st-dark .sdk-row.sdk-aside .sdk-chip,
html.st-dark .sdk-chip.sdk-allbtn,html.st-dark .sdk-pick{background:#2e2c21;color:#c9bfa6;}
html.st-dark .sdk-pop button.later{background:#2e2c21;color:#f4ead2;border-color:#5a5642;}
html.st-dark .ssr input{background-color:#1c1a13;color:#f4ead2;border-color:#5a5642;}
html.st-dark .ssr ul{background:#25231a;color:#f4ead2;border-color:#3d3a2c;}
html.st-dark .ssr li[aria-selected="true"],html.st-dark .ssr li:hover{background:#2e2c21;}
html.st-dark .ssr li mark{background:#6b5a2a;color:#f4ead2;}
html.st-dark .ssr li.soon .fd{background:#25231a;color:#c9bfa6;}

/* ── Cards (the builder's lists) ──────────────────────────────────────────────── */
html.st-dark .sc-card{background:#2a281d;border-color:#3d3a2c;color:#f4ead2;}
html.st-dark .sc-card:hover,html.st-dark .sc-card.sc-hi,html.st-dark .sc-card:focus-within{border-color:#c9bfa6;box-shadow:0 0 0 1px #c9bfa6;}
html.st-dark .sc-credit,html.st-dark .sc-scene{color:#c9bfa6;}
html.st-dark .sc-type,html.st-dark .sc-dot,html.st-dark .sc-photo,html.st-dark .sc-pp figcaption{color:#c9bfa6;}
html.st-dark .sc-book,html.st-dark .sc-rm{color:#f79e78;}
html.st-dark .sc-availnote{color:#8fcbb6;}
html.st-dark .sc-closednote{color:#e0b45a;}
html.st-dark .sc-hide{background:rgba(28,26,19,.9);color:#c9bfa6;}
html.st-dark .sc-closed{background:#2e2c21;}
html.st-dark .sc-closed .sc-n{background:#54503f;color:#f4ead2;}
html.st-dark .sa-warn{background:#3b2a1c;color:#f4c7a8;}

/* ── Been here (STOUR-133): the popup's button and the tick ─────────────────────────────── */
html.st-dark .sdk-pop .been button{background:#2a281d;color:#cfc9a0;border-color:#cfc9a0;}
html.st-dark .sdk-pop .been button:hover{background:rgba(207,201,160,.14);}
html.st-dark .sdk-pop .been button.is-on{background:#cfc9a0;color:#1c1a13;}
html.st-dark .sdk-pop .been button.is-on .ic-tick{stroke:#cfc9a0;}

/* ── Book my trip drawer, the rest of it (STOUR-170) ──────────────────────────────────────────
 * The panel, trip card, hints and ghost button are themed above. These are the pieces they left
 * light: the scrim, the progress dots, the numbered and skipped circles, the headings, the olive
 * button, the green notes, the booked rows, the foot rule and the mini-bar. Coral buttons keep
 * their ink text. /home links this file too, so the drawer is dark there as on the map pages. */
html.st-dark .sbr-ov{background:rgba(0,0,0,.62);}
html.st-dark .sbr{box-shadow:-20px 0 60px rgba(0,0,0,.6);}
html.st-dark .sbr-b h3,html.st-dark .sbr-big,html.st-dark .sbr-li b,html.st-dark .sbr-b p[style]{color:#f4ead2 !important;}
html.st-dark .sbr-p,html.st-dark .sbr-say{color:#c9bfa6;}
html.st-dark .sbr-eye,html.st-dark .sbr-sub,html.st-dark .sbr-li span.m,html.st-dark .sbr-f{color:#c9bfa6;}
html.st-dark .sbr-f{border-top-color:#3d3a2c;}
html.st-dark .sbr-dots i{background:#3d3a2c;}
html.st-dark .sbr-dots i.s{background:#5a5642;}
html.st-dark .sbr-dots i.b{background:#6fb09f;}
html.st-dark .sbr-li.free .n,html.st-dark .sbr-li.done .n{background:#3d3a2c;color:#f4ead2;}
html.st-dark .sbr-li.done .n{background:#2f6b58;color:#f4ead2;}
html.st-dark .sbr-li span.m.ok{color:#8fcbb6;}
html.st-dark .sbr-ok{background:#1f3a31;color:#8fcbb6;}
html.st-dark .sbr-lnk{color:#f79e78;}
html.st-dark .sbr-btn.alt{background:#2a281d;color:#f4ead2;border:1.5px solid #f4ead2;}
html.st-dark .sbr-btn.ghost:hover{background:rgba(244,234,210,.08);}
html.st-dark .sbr input[type=date]{background:#1c1a13;color:#f4ead2;border-color:#5a5642;color-scheme:dark;}
html.st-dark .sbr-btn:focus-visible,html.st-dark .sbr-lnk:focus-visible,html.st-dark .sbr-x:focus-visible,
html.st-dark .sbr-bar .go:focus-visible,html.st-dark .sbr-bar .end:focus-visible{outline:2px solid #f7d18a;outline-offset:2px;}
html.st-dark .sbr-bar{background:#2e2c21;border:1px solid #3d3a2c;}