@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

/* Meridian theme layer
   -------------------------------------------------------------------
   Every template is styled off tokens, so a theme is only a block of
   values. Two kinds live here:

   1. Overrides of the design system's own tokens (--color-*, --radius-*,
      --shadow-*). These carry .btn / .input / .card / .seg for free.
   2. Structural tokens for the things inline styles hard-code:
      rule weight, card radius, surface fill, blur, display face and
      heading case.

   Modernist is the base, so an untagged page renders exactly as before.
   A theme applies to any subtree: put data-theme on one element and
   everything inside it follows. */

:root,
[data-theme='modernist'] {
  --sheet: var(--color-bg);
  --sheet-blur: none;
  --tint: var(--color-neutral-200);
  --rule: 2px;
  --rule-color: var(--color-text);
  --rule-soft: var(--color-divider);
  --radius-card: 0px;
  --radius-ctl: 0px;
  --font-display: var(--font-heading);
  --heading-case: uppercase;
  --heading-track: -0.035em;
  --btn-glow: none;
  --page-art: none;
  --map-filter: grayscale(1) contrast(1.1) brightness(1.06);

  /* inverted bands: dark slab, light ink */
  --invert-bg: var(--color-text);
  --invert-ink: var(--color-bg);
  --invert-muted: var(--color-neutral-500);
  --invert-rule: var(--color-neutral-600);

  /* --- semantic roles ---------------------------------------------
     The accent stays the brand and the primary action. Everything that
     is not an action gets its own role, so red stops meaning five
     things at once. Two added hues only — amber and green — plus a
     neutral for "no" and information. Destructive actions stay red but
     are outlined, never filled, so they can never be mistaken for the
     primary action. */
  --role-action: var(--color-accent);
  --role-action-ink: #0a0f1d;
  --role-danger: #b0210b;
  --role-danger-tint: #fdeae6;
  --role-warning: #9a6206;
  --role-warning-tint: #fbf0dc;
  --role-ok: #2c6b45;
  --role-ok-tint: #e6f1e9;
  --role-info: var(--color-neutral-700);
  --role-info-tint: var(--color-neutral-200);
  /* the same three roles at the lightness a dark slab needs — inverted
     bands and journey mode keep the meaning without going muddy */
  --role-danger-on-ink: #ff8079;
  --role-warning-on-ink: #f0a94a;
  --role-ok-on-ink: #63c894;
  /* Selection. Not the invert pair: --invert-bg is dark in BOTH themes
     (it makes an inverted band), so on a dark theme it sinks into the
     page instead of standing out. These three genuinely flip per theme. */
  --select-bg: #201e1d;
  --select-ink: #f3f2f2;
  --select-edge: #201e1d;
  /* the three vote answers, never colour alone — each also carries a word */
  --vote-yes: var(--role-ok);
  --vote-maybe: var(--role-warning);
  --vote-no: var(--color-neutral-700);
}

/* Corners: sharp is Modernist as authored; soft only rounds the
   smallest step, so cards stay drawn rather than becoming SaaS tiles. */
[data-theme='modernist'][data-soft='soft'] {
  --radius-card: 4px;
  --radius-ctl: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

[data-theme='nightglass'] {
  /* --- design-system tokens --- */
  --color-bg: #f1f2f8;          /* now only ink on accent fills */
  --color-text: #e9ebf4;
  --color-surface: rgba(255, 255, 255, 0.07);
  /* the accent ramp is completed, not partly overridden — steps 100–500
     are the ones used for accent-as-text on a dark ground */
  --color-accent: #7b6cf6;
  --color-accent-100: #100e24;
  --color-accent-200: #1b1740;
  --color-accent-300: #2c2566;
  --color-accent-400: #9b8dff;
  --color-accent-500: #7b6cf6;
  --color-accent-600: #6a58f2;
  --color-accent-700: #aca1ff;
  --color-accent-800: #c6bdff;
  --color-accent-900: #ded8ff;

  --color-accent-2: #f0a94a;
  --color-accent-2-100: #241a0c;
  --color-accent-2-200: #3a2a12;
  --color-accent-2-300: #5c421c;
  --color-accent-2-400: #f5bd72;
  --color-accent-2-500: #f0a94a;
  --color-accent-2-600: #d8933a;
  --color-accent-2-700: #ffc978;
  --color-accent-2-800: #ffdaa1;
  --color-accent-2-900: #ffe9c6;
  --color-divider: rgba(255, 255, 255, 0.16);

  --color-neutral-200: rgba(255, 255, 255, 0.05);
  --color-neutral-300: #0a0f1d;
  --color-neutral-400: rgba(255, 255, 255, 0.13);
  --color-neutral-500: rgba(255, 255, 255, 0.26);
  --color-neutral-600: rgba(233, 235, 244, 0.52);
  --color-neutral-700: rgba(233, 235, 244, 0.66);
  --color-neutral-800: rgba(233, 235, 244, 0.84);

  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.55);

  /* --- structural tokens --- */
  --sheet: rgba(255, 255, 255, 0.055);
  --sheet-blur: blur(20px) saturate(1.35);
  --tint: rgba(255, 255, 255, 0.04);
  --rule: 1px;
  --rule-color: rgba(255, 255, 255, 0.15);
  --rule-soft: rgba(255, 255, 255, 0.09);
  --radius-card: 14px;
  --radius-ctl: 10px;
  --font-display: 'Source Serif 4', Georgia, serif;
  --heading-case: none;
  --heading-track: -0.015em;
  --btn-glow: 0 10px 28px rgba(123, 108, 246, 0.45);
  --page-art:
    radial-gradient(1100px 620px at 78% -8%, rgba(123, 108, 246, 0.26), transparent 68%),
    radial-gradient(900px 520px at 8% 4%, rgba(70, 110, 210, 0.20), transparent 70%),
    radial-gradient(700px 700px at 60% 100%, rgba(240, 169, 74, 0.08), transparent 70%);
  --map-filter: invert(0.94) hue-rotate(185deg) grayscale(0.6) brightness(0.92) contrast(0.92) saturate(0.8);

  --invert-bg: rgba(5, 9, 20, 0.66);
  --invert-ink: #f1f2f8;
  --invert-muted: rgba(241, 242, 248, 0.62);
  --invert-rule: rgba(241, 242, 248, 0.20);

  /* roles, re-tuned for a dark ground: light enough to read as text,
     tints are deep rather than pale */
  --role-danger: #ff8079;
  --role-danger-tint: rgba(255, 128, 121, 0.14);
  --role-warning: #f0a94a;
  --role-warning-tint: rgba(240, 169, 74, 0.14);
  --role-ok: #63c894;
  --role-ok-tint: rgba(99, 200, 148, 0.14);
  --role-info: var(--color-neutral-700);
  --role-info-tint: rgba(255, 255, 255, 0.05);
  /* the light slab is the inversion here */
  --select-bg: #f1f2f8;
  --select-ink: #0a0f1d;
  --select-edge: #f1f2f8;
}

[data-theme='nightglass'] .btn-secondary { border-color: rgba(255, 255, 255, 0.22); }

[data-theme='nightglass'] .btn-primary { box-shadow: var(--btn-glow); }
[data-theme='nightglass'] .input::placeholder { color: rgba(233, 235, 244, 0.45); }
[data-theme='nightglass'] .input { backdrop-filter: blur(10px); }

/* --- Apple-inspired -----------------------------------------------------
   Light and quiet: a near-white ground, one confident blue, generous
   corners and soft diffused depth instead of drawn rules. The face is the
   system UI stack, which is what Apple's own surfaces render in — no
   webfont is fetched and none is passed off as San Francisco. */
[data-theme='apple'] {
  --color-bg: #ffffff;          /* ink on accent fills */
  --color-text: #1d1d1f;
  --color-surface: #ffffff;
  --color-accent: #0071e3;
  --color-accent-100: #f0f7ff;
  --color-accent-200: #d8ebfd;
  --color-accent-300: #a9d3fa;
  --color-accent-400: #5aaef4;
  --color-accent-500: #0071e3;
  --color-accent-600: #0062c4;
  --color-accent-700: #0050a0;
  --color-accent-800: #003c78;
  --color-accent-900: #002a54;
  --color-accent-2: #6e6e73;
  --color-accent-2-100: #f5f5f7;
  --color-accent-2-200: #e8e8ed;
  --color-accent-2-300: #d2d2d7;
  --color-accent-2-400: #aeaeb2;
  --color-accent-2-500: #8e8e93;
  --color-accent-2-600: #6e6e73;
  --color-accent-2-700: #515154;
  --color-accent-2-800: #3a3a3c;
  --color-accent-2-900: #1d1d1f;
  --color-divider: rgba(0, 0, 0, 0.10);

  --color-neutral-100: #ffffff;
  --color-neutral-200: #f5f5f7;
  --color-neutral-300: #f5f5f7;  /* the page ground */
  --color-neutral-400: #d2d2d7;
  --color-neutral-500: #aeaeb2;
  --color-neutral-600: #86868b;
  --color-neutral-700: #6e6e73;
  --color-neutral-800: #424245;
  --color-neutral-900: #1d1d1f;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.12);

  --sheet: #ffffff;
  --sheet-blur: none;
  --tint: #f5f5f7;
  --rule: 1px;
  --rule-color: rgba(0, 0, 0, 0.12);
  --rule-soft: rgba(0, 0, 0, 0.07);
  --radius-card: 18px;
  --radius-ctl: 12px;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading-case: none;
  --heading-track: -0.022em;
  --btn-glow: none;
  --page-art: none;
  --map-filter: saturate(0.92) brightness(1.02);

  --invert-bg: #1d1d1f;
  --invert-ink: #f5f5f7;
  --invert-muted: rgba(245, 245, 247, 0.66);
  --invert-rule: rgba(245, 245, 247, 0.22);

  --role-action: var(--color-accent);
  --role-action-ink: #ffffff;
  --role-danger: #d70015;
  --role-danger-tint: #ffeef0;
  --role-warning: #a05a00;
  --role-warning-tint: #fff4e5;
  --role-ok: #1d7a45;
  --role-ok-tint: #e8f6ed;
  --role-info: var(--color-neutral-700);
  --role-info-tint: var(--color-neutral-200);
  --role-danger-on-ink: #ff6961;
  --role-warning-on-ink: #ffb340;
  --role-ok-on-ink: #4cd97b;

  --select-bg: #0071e3;
  --select-ink: #ffffff;
  --select-edge: #0071e3;
}

/* --- BBC-inspired -------------------------------------------------------
   News-stand plainness: white paper, near-black text, one red for the
   masthead accent, square corners and firm rules. Reith is licensed to the
   BBC and is deliberately not used or imitated; this substitutes the
   grotesque system stack that BBC pages fall back to. */
[data-theme='bbc'] {
  --color-bg: #ffffff;          /* ink on accent fills */
  --color-text: #141414;
  --color-surface: #ffffff;
  --color-accent: #bb1919;
  --color-accent-100: #fdf0f0;
  --color-accent-200: #f9d5d5;
  --color-accent-300: #f0acac;
  --color-accent-400: #dc5c5c;
  --color-accent-500: #bb1919;
  --color-accent-600: #a01414;
  --color-accent-700: #851010;
  --color-accent-800: #660c0c;
  --color-accent-900: #470909;
  --color-accent-2: #1380a1;
  --color-accent-2-100: #eef7fa;
  --color-accent-2-200: #d2ebf2;
  --color-accent-2-300: #a3d6e5;
  --color-accent-2-400: #4fabc6;
  --color-accent-2-500: #1380a1;
  --color-accent-2-600: #0f6b88;
  --color-accent-2-700: #0b566e;
  --color-accent-2-800: #084253;
  --color-accent-2-900: #052d39;
  --color-divider: rgba(0, 0, 0, 0.18);

  --color-neutral-100: #ffffff;
  --color-neutral-200: #f2f2f2;
  --color-neutral-300: #ffffff;  /* the page ground: white paper */
  --color-neutral-400: #d5d5d5;
  --color-neutral-500: #b3b3b3;
  --color-neutral-600: #767676;
  --color-neutral-700: #565656;
  --color-neutral-800: #3c3c3c;
  --color-neutral-900: #141414;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.16);
  --shadow-md: 0 2px 0 rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.16);

  --sheet: #ffffff;
  --sheet-blur: none;
  --tint: #f2f2f2;
  --rule: 1px;
  --rule-color: #141414;
  --rule-soft: rgba(0, 0, 0, 0.16);
  --radius-card: 0px;
  --radius-ctl: 0px;
  --font-display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --heading-case: none;
  --heading-track: -0.018em;
  --btn-glow: none;
  --page-art: none;
  --map-filter: saturate(0.95);

  --invert-bg: #141414;
  --invert-ink: #ffffff;
  --invert-muted: rgba(255, 255, 255, 0.72);
  --invert-rule: rgba(255, 255, 255, 0.26);

  --role-action: var(--color-accent);
  --role-action-ink: #ffffff;
  --role-danger: #b01818;
  --role-danger-tint: #fdf0f0;
  --role-warning: #8a5300;
  --role-warning-tint: #fdf3e3;
  --role-ok: #17693c;
  --role-ok-tint: #e9f4ed;
  --role-info: var(--color-neutral-700);
  --role-info-tint: var(--color-neutral-200);
  --role-danger-on-ink: #ff7b7b;
  --role-warning-on-ink: #f0b04a;
  --role-ok-on-ink: #5ec98b;

  --select-bg: #141414;
  --select-ink: #ffffff;
  --select-edge: #141414;
}

/* Apple leans on depth, not drawn lines: cards get a shadow and the hairline
   recedes. BBC does the opposite — no shadow, a firm rule. */
[data-theme='apple'] .m-home,
[data-theme='apple'] .account-theme__body { box-shadow: var(--shadow-sm); }
[data-theme='apple'] .m-btn--primary { border-radius: 980px; }
[data-theme='apple'] .m-btn--secondary { border-radius: 980px; border-color: var(--color-accent); color: var(--color-accent); }
[data-theme='bbc'] .m-btn--primary,
[data-theme='bbc'] .m-btn--secondary { border-radius: 0; font-weight: 700; }
[data-theme='bbc'] .meridian-page .trips-shared-nav { border-bottom: 2px solid var(--color-text); }

/* The homepage hero is authored dark for Night Glass, with its own hardcoded
   navy and pale ink. Apple and BBC are light themes, so the hero is returned
   to the page's own ground and ink. Written against tokens, so each theme
   supplies its own palette rather than repeating the block twice. */
[data-theme='apple'] .m-home,
[data-theme='bbc'] .m-home { background: var(--sheet); }
[data-theme='apple'] .m-home__hero,
[data-theme='bbc'] .m-home__hero {
  border: var(--rule) solid var(--rule-color);
  border-radius: var(--radius-card);
  color: var(--color-text);
  background: var(--sheet);
}
[data-theme='apple'] .m-home__hero-copy,
[data-theme='bbc'] .m-home__hero-copy { background: none; }
[data-theme='apple'] .m-home__hero h1,
[data-theme='bbc'] .m-home__hero h1 { font-family: var(--font-display); letter-spacing: var(--heading-track); text-transform: var(--heading-case); }
[data-theme='apple'] .m-home__hero h1 em,
[data-theme='bbc'] .m-home__hero h1 em { color: var(--color-accent); font-style: normal; }
[data-theme='apple'] .m-home__lead,
[data-theme='bbc'] .m-home__lead { color: var(--color-neutral-700); font-family: var(--font-body); }
/* The photo sits under the copy, so it is faded out towards the text edge
   using the theme's own ground rather than the authored navy. */
[data-theme='apple'] .m-home__hero-media::after,
[data-theme='bbc'] .m-home__hero-media::after {
  background:
    linear-gradient(90deg, var(--sheet) 0%, color-mix(in srgb, var(--sheet) 97%, transparent) 39%, color-mix(in srgb, var(--sheet) 68%, transparent) 53%, transparent 78%),
    linear-gradient(0deg, color-mix(in srgb, var(--sheet) 20%, transparent), transparent 55%);
}
[data-theme='apple'] .m-home__hero .m-plan-field > span,
[data-theme='bbc'] .m-home__hero .m-plan-field > span { color: var(--color-text); }
[data-theme='apple'] .m-home__hero .m-plan-field > b,
[data-theme='apple'] .m-home__hero .m-plan-field input,
[data-theme='bbc'] .m-home__hero .m-plan-field > b,
[data-theme='bbc'] .m-home__hero .m-plan-field input {
  border-color: var(--rule-color);
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  background: var(--color-surface);
}
[data-theme='apple'] .m-home__hero .m-plan-field > b,
[data-theme='bbc'] .m-home__hero .m-plan-field > b { color: var(--color-accent); }
[data-theme='apple'] .m-home__hero .m-plan-field input::placeholder,
[data-theme='bbc'] .m-home__hero .m-plan-field input::placeholder { color: var(--color-neutral-600); }
[data-theme='apple'] .m-home__hero .m-btn--primary,
[data-theme='bbc'] .m-home__hero .m-btn--primary {
  border-color: var(--color-accent);
  color: var(--color-bg);
  background: var(--color-accent);
  box-shadow: none;
}
[data-theme='apple'] .m-home__hero .m-btn--secondary,
[data-theme='bbc'] .m-home__hero .m-btn--secondary { border-color: var(--rule-color); color: var(--color-text); background: var(--color-surface); }
[data-theme='apple'] .m-home__hero .m-btn--text,
[data-theme='bbc'] .m-home__hero .m-btn--text { color: var(--color-accent-700); }
[data-theme='apple'] .m-home__hero-caption,
[data-theme='bbc'] .m-home__hero-caption {
  border: var(--rule) solid var(--rule-color);
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  background: var(--sheet);
  backdrop-filter: none;
}
[data-theme='apple'] .m-home__hero-caption small,
[data-theme='bbc'] .m-home__hero-caption small { color: var(--color-neutral-700); }
/* The eyebrow and the reassurance line under the form are both authored in
   Night Glass's pale lavender, which disappears on a light ground. */
[data-theme='apple'] .m-home__hero .m-eyebrow,
[data-theme='bbc'] .m-home__hero .m-eyebrow { color: var(--color-accent); }
[data-theme='apple'] .m-home__promise,
[data-theme='bbc'] .m-home__promise { color: var(--color-neutral-700); }
[data-theme='apple'] .m-home__promise svg,
[data-theme='bbc'] .m-home__promise svg { border-color: var(--rule-color); color: var(--color-accent); }
/* The stats bar stays an inverted slab in both, which is what keeps it
   readable over the photograph it is docked against. */
[data-theme='apple'] .m-home__stats,
[data-theme='bbc'] .m-home__stats {
  border: 0;
  border-top: var(--rule) solid var(--rule-color);
  border-radius: 0;
  color: var(--invert-ink);
  background: var(--invert-bg);
  box-shadow: none;
  backdrop-filter: none;
}
[data-theme='apple'] .m-stat + .m-stat,
[data-theme='bbc'] .m-stat + .m-stat { border-color: var(--invert-rule); }
[data-theme='apple'] .m-stat i,
[data-theme='bbc'] .m-stat i { border-color: var(--invert-rule); color: var(--invert-ink); background: transparent; }
[data-theme='apple'] .m-stat span,
[data-theme='bbc'] .m-stat span { color: var(--invert-muted); }

/* The signed-in hub's champagne kicker is a Night Glass colour: on a white
   ground it is barely visible, so each light theme supplies its own quiet
   secondary hue for that one line. */
[data-theme='apple'] .member-hub,
[data-theme='bbc'] .member-hub { --hub-gold: var(--color-accent-2-600); }

/* The homepage's mid-page bands are authored as dark navy slabs for Night
   Glass. Left alone on a light theme the page reads as alternating light and
   dark stripes rather than one design, so each band is returned to the
   theme's own ground and ink. */
[data-theme='apple'] .m-home__how-section,
[data-theme='bbc'] .m-home__how-section,
[data-theme='apple'] .m-collab--journey,
[data-theme='bbc'] .m-collab--journey {
  border: var(--rule) solid var(--rule-color);
  border-radius: var(--radius-card);
  color: var(--color-text);
  background: var(--tint);
  box-shadow: var(--shadow-sm);
}
[data-theme='apple'] .m-home__routes-section,
[data-theme='bbc'] .m-home__routes-section,
[data-theme='apple'] .m-home__closing-cta,
[data-theme='bbc'] .m-home__closing-cta {
  color: var(--color-text);
  background: var(--sheet);
  border-bottom: var(--rule) solid var(--rule-soft);
}
[data-theme='apple'] .m-home__how-section .m-eyebrow,
[data-theme='bbc'] .m-home__how-section .m-eyebrow,
[data-theme='apple'] .m-collab--journey .m-eyebrow,
[data-theme='bbc'] .m-collab--journey .m-eyebrow { color: var(--color-accent); }
[data-theme='apple'] .m-home__how-section .m-eyebrow span,
[data-theme='bbc'] .m-home__how-section .m-eyebrow span { color: var(--color-accent-2); }
[data-theme='apple'] .m-home__how-section h2,
[data-theme='bbc'] .m-home__how-section h2,
[data-theme='apple'] .m-home__routes-section .m-section-head h2,
[data-theme='bbc'] .m-home__routes-section .m-section-head h2,
[data-theme='apple'] .m-collab--journey h2,
[data-theme='bbc'] .m-collab--journey h2,
[data-theme='apple'] .m-home__closing-cta h2,
[data-theme='bbc'] .m-home__closing-cta h2 { color: var(--color-text); font-family: var(--font-display); letter-spacing: var(--heading-track); }
[data-theme='apple'] .m-home__how-section .m-section-head p:last-child,
[data-theme='bbc'] .m-home__how-section .m-section-head p:last-child,
[data-theme='apple'] .m-home__routes-section .m-section-head p,
[data-theme='bbc'] .m-home__routes-section .m-section-head p { color: var(--color-neutral-700); }
[data-theme='apple'] .m-home__routes-section .m-section-head h2::before,
[data-theme='bbc'] .m-home__routes-section .m-section-head h2::before { color: var(--color-accent); }

/* The five journey cards */
[data-theme='apple'] .m-how article,
[data-theme='bbc'] .m-how article {
  border: var(--rule) solid var(--rule-color);
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  background: var(--sheet);
  box-shadow: none;
}
[data-theme='apple'] .m-how article:has(.m-how__action):hover,
[data-theme='apple'] .m-how article:has(.m-how__action):focus-within,
[data-theme='bbc'] .m-how article:has(.m-how__action):hover,
[data-theme='bbc'] .m-how article:has(.m-how__action):focus-within {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
  box-shadow: var(--shadow-sm);
}
[data-theme='apple'] .m-how b,
[data-theme='bbc'] .m-how b { color: var(--color-accent); font-family: var(--font-display); }
[data-theme='apple'] .m-how i,
[data-theme='bbc'] .m-how i {
  border: var(--rule) solid var(--rule-color);
  color: var(--color-accent);
  background: var(--color-accent-100);
  box-shadow: none;
}
[data-theme='apple'] .m-how h3,
[data-theme='bbc'] .m-how h3 { color: var(--color-text); font-family: var(--font-display); }
[data-theme='apple'] .m-how p,
[data-theme='bbc'] .m-how p { color: var(--color-neutral-700); }
[data-theme='apple'] .m-how article > span,
[data-theme='bbc'] .m-how article > span { color: var(--color-accent-2); }
[data-theme='apple'] .m-how article > span::before,
[data-theme='apple'] .m-how article > span::after,
[data-theme='bbc'] .m-how article > span::before,
[data-theme='bbc'] .m-how article > span::after { background: var(--rule-color); }
[data-theme='apple'] .m-how__action,
[data-theme='bbc'] .m-how__action { color: var(--color-accent-700); }
[data-theme='apple'] .m-how__action span,
[data-theme='bbc'] .m-how__action span { color: var(--color-accent); }
[data-theme='apple'] .m-how__status,
[data-theme='bbc'] .m-how__status { color: var(--color-neutral-600); }

/* Ready-made trip cards and their two header actions */
[data-theme='apple'] .m-home__routes-section .m-routes-next,
[data-theme='bbc'] .m-home__routes-section .m-routes-next,
[data-theme='apple'] .m-home__routes-section .m-routes-browse,
[data-theme='bbc'] .m-home__routes-section .m-routes-browse {
  border: var(--rule) solid var(--rule-color);
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  background: var(--sheet);
}
[data-theme='apple'] .m-home__routes-section .m-routes-next:hover,
[data-theme='bbc'] .m-home__routes-section .m-routes-next:hover,
[data-theme='apple'] .m-home__routes-section .m-routes-browse:hover,
[data-theme='bbc'] .m-home__routes-section .m-routes-browse:hover {
  border-color: var(--color-accent);
  color: var(--color-bg);
  background: var(--color-accent);
}
[data-theme='apple'] .m-route-card__body,
[data-theme='bbc'] .m-route-card__body,
[data-theme='apple'] .m-route-mini,
[data-theme='bbc'] .m-route-mini {
  border: var(--rule) solid var(--rule-color);
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  background: var(--sheet);
}
[data-theme='apple'] .m-route-card__meta,
[data-theme='bbc'] .m-route-card__meta,
[data-theme='apple'] .m-route-card__description,
[data-theme='bbc'] .m-route-card__description,
[data-theme='apple'] .m-route-card__bases,
[data-theme='bbc'] .m-route-card__bases,
[data-theme='apple'] .m-route-mini__body > p,
[data-theme='bbc'] .m-route-mini__body > p { color: var(--color-neutral-700); }
[data-theme='apple'] .m-route-card__bases,
[data-theme='bbc'] .m-route-card__bases { border-top-color: var(--rule-soft); }
[data-theme='apple'] .m-route-card__body .m-eyebrow,
[data-theme='bbc'] .m-route-card__body .m-eyebrow { color: var(--color-accent); }
[data-theme='apple'] .m-route-card__body h3,
[data-theme='bbc'] .m-route-card__body h3,
[data-theme='apple'] .m-route-mini__body h3,
[data-theme='bbc'] .m-route-mini__body h3 { color: var(--color-text); font-family: var(--font-display); }
[data-theme='apple'] .m-route-mini__body h3 a,
[data-theme='bbc'] .m-route-mini__body h3 a { color: var(--color-text); }
[data-theme='apple'] .m-route-mini__body > p svg,
[data-theme='bbc'] .m-route-mini__body > p svg,
[data-theme='apple'] .m-route-mini__arrow,
[data-theme='bbc'] .m-route-mini__arrow { color: var(--color-accent); }
[data-theme='apple'] .m-route-mini__body > p span,
[data-theme='bbc'] .m-route-mini__body > p span { color: var(--color-neutral-600); }
/* The card actions are authored as a purple gradient and an amber outline. */
[data-theme='apple'] .m-route-card__actions .m-btn--primary,
[data-theme='bbc'] .m-route-card__actions .m-btn--primary {
  border-color: var(--color-accent);
  color: var(--color-bg);
  background: var(--color-accent);
}
[data-theme='apple'] .m-route-card__actions .m-btn--secondary,
[data-theme='bbc'] .m-route-card__actions .m-btn--secondary { border-color: var(--rule-color); color: var(--color-text); background: transparent; }
[data-theme='apple'] .m-route-card__actions .m-btn--text,
[data-theme='bbc'] .m-route-card__actions .m-btn--text { color: var(--color-accent-700); }
[data-theme='apple'] .m-route-carousel__status,
[data-theme='bbc'] .m-route-carousel__status { color: var(--color-neutral-600); }
[data-theme='apple'] .m-route-more,
[data-theme='bbc'] .m-route-more { border-top-color: var(--rule-soft); }
[data-theme='apple'] .m-route-more::before,
[data-theme='bbc'] .m-route-more::before { color: var(--color-accent); background: var(--sheet); }
[data-theme='apple'] .m-route-mini__map,
[data-theme='bbc'] .m-route-mini__map { border-bottom-color: var(--rule-soft); background: var(--color-neutral-200); }
[data-theme='apple'] .m-route-mini__map img,
[data-theme='bbc'] .m-route-mini__map img { filter: var(--map-filter); }
[data-theme='apple'] .m-route-mini__heart,
[data-theme='bbc'] .m-route-mini__heart {
  border: var(--rule) solid var(--rule-color);
  color: var(--color-text);
  background: var(--sheet);
  backdrop-filter: none;
}
/* The interactive map tiles are inverted to a dark basemap for Night Glass,
   which left the featured map dark while its own mini-maps were light. */
[data-theme='apple'] .m-route-card__map--interactive .leaflet-tile-pane,
[data-theme='bbc'] .m-route-card__map--interactive .leaflet-tile-pane,
[data-theme='apple'] .m-journey-map .leaflet-tile-pane,
[data-theme='bbc'] .m-journey-map .leaflet-tile-pane { filter: var(--map-filter); }
[data-theme='apple'] .m-route-card__map,
[data-theme='bbc'] .m-route-card__map { background: var(--color-neutral-200); }
[data-theme='apple'] .m-route-card__map small,
[data-theme='bbc'] .m-route-card__map small { color: var(--color-neutral-700); background: var(--sheet); }
[data-theme='apple'] .m-route-card__map-head,
[data-theme='bbc'] .m-route-card__map-head { border-bottom-color: var(--rule-soft); }
[data-theme='apple'] .m-route-card__map-head strong,
[data-theme='bbc'] .m-route-card__map-head strong { color: var(--color-text); font-family: var(--font-display); }
[data-theme='apple'] .m-route-card__map-head strong svg,
[data-theme='bbc'] .m-route-card__map-head strong svg { color: var(--color-accent); }
[data-theme='apple'] .m-route-card__map-head button,
[data-theme='bbc'] .m-route-card__map-head button { border-color: var(--rule-color); color: var(--color-text); background: var(--sheet); }
[data-theme='apple'] .m-route-card__map-head button:hover,
[data-theme='bbc'] .m-route-card__map-head button:hover { color: var(--color-bg); background: var(--color-accent); }