/* Discover, Learn and Results in the new home page's look (owner, 2026-10-18).
   Same palette, type and buttons as home-preview.html (To-Do #297), so a phone
   visitor moving between the home page and the tab-bar pages sees one site.
   Linked AFTER each page's own <style>, and every rule is scoped to
   body.shell-dark, so the rest of the site (style.css) is untouched.
   tests/test_shell_dark.py holds the palette to the home page's values. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap');

body.shell-dark {
  --sd-navy: #0b1520;
  --sd-navy-2: #0d1a28;
  --sd-navy-3: #0f1e30;
  --sd-gold: #C9A84C;
  --sd-gold-hi: #e8c97a;
  --sd-ink: #e9edf2;
  --sd-ink-soft: #a9b4c2;
  --sd-line: rgba(201, 168, 76, 0.25);
  --sd-line-soft: rgba(233, 237, 242, 0.08);
  --sd-serif: "Cormorant Garamond", Georgia, serif;
  --sd-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --sd-mono: "DM Mono", ui-monospace, monospace;
  background: var(--sd-navy);
  color: var(--sd-ink);
  font-family: var(--sd-sans);
}
body.shell-dark main a { color: var(--sd-gold-hi); }
body.shell-dark main a:hover { color: var(--sd-gold); }

/* Labels: DM Mono, gold, as on the home page. */
body.shell-dark .ms-eyebrow,
body.shell-dark .ms-learn .ms-q,
body.shell-dark .ms-sig b,
body.shell-dark .ms-card .ms-eg b {
  font: 500 14px/1.4 var(--sd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sd-gold);
}

/* Headings: Cormorant Garamond. */
body.shell-dark .ms-h1,
body.shell-dark .ms-hero-dark .ms-h1 {
  font-family: var(--sd-serif); font-weight: 600; color: var(--sd-ink);
  font-size: clamp(2.3rem, 8vw, 3.2rem); line-height: 1.1;
}
body.shell-dark .ms-h2 { font-family: var(--sd-serif); font-weight: 600; font-size: 1.7rem; color: var(--sd-ink); }
body.shell-dark .ms-h2 small { font: 500 13px var(--sd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sd-ink-soft); }
body.shell-dark .ms-card h3 { font-family: var(--sd-serif); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: var(--sd-ink); }
body.shell-dark .ms-list-link .n { font-family: var(--sd-serif); color: var(--sd-gold); font-size: 1.6rem; }

/* Running text. */
body.shell-dark .ms-lede,
body.shell-dark .ms-hero-dark .ms-lede { color: var(--sd-ink-soft); font-size: 17px; }
body.shell-dark .ms-card p,
body.shell-dark .ms-note,
body.shell-dark .ms-empty,
body.shell-dark .ms-kv dd,
body.shell-dark .ms-axis { color: var(--sd-ink-soft); }
body.shell-dark .ms-card p b,
body.shell-dark .ms-kv dt { color: var(--sd-ink); }

/* Surfaces. */
body.shell-dark .ms-card,
body.shell-dark .ms-hero-dark {
  background: var(--sd-navy-3); border: 1px solid var(--sd-line-soft); border-radius: 14px;
}
body.shell-dark .ms-hero-dark { border-color: var(--sd-line); }
body.shell-dark .ms-sig { border-top-color: var(--sd-line-soft); }
body.shell-dark .ms-eg {
  background: var(--sd-navy-2); border-left: 3px solid var(--sd-gold); color: var(--sd-ink-soft);
}
body.shell-dark .ms-eg a { color: var(--sd-gold-hi); }
body.shell-dark .ms-tag { background: var(--sd-gold); color: var(--sd-navy); font: 500 12px var(--sd-mono); letter-spacing: .06em; }
body.shell-dark .ms-banner { background: rgba(201, 168, 76, .12); border-color: var(--sd-line); color: var(--sd-ink); }
body.shell-dark .ms-banner a { color: var(--sd-gold-hi); }

/* Operating-state grid on Results. */
body.shell-dark .ms-quad div { background: var(--sd-navy-2); color: var(--sd-ink-soft); }
body.shell-dark .ms-quad div.on { background: var(--sd-gold); color: var(--sd-navy); }

/* Prices and product facts. */
body.shell-dark .ms-price { color: var(--sd-ink); }
body.shell-dark .ms-price small { color: var(--sd-ink-soft); }
body.shell-dark .ms-facts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14.5px; color: var(--sd-ink); }
body.shell-dark .ms-facts li::before { content: "\2022"; color: var(--sd-gold); margin-right: 6px; }

/* Buttons: gold for the main action, gold outline for the second. */
body.shell-dark .ms-cta,
body.shell-dark .ms-btn-buy { background: var(--sd-gold); color: var(--sd-navy); border: 0; border-radius: 999px; }
body.shell-dark .ms-cta:hover,
body.shell-dark .ms-cta:focus-visible,
body.shell-dark .ms-btn-buy:hover,
body.shell-dark .ms-btn-buy:focus-visible { background: var(--sd-gold-hi); color: var(--sd-navy); }
body.shell-dark .ms-cta-ghost,
body.shell-dark .ms-btn-view { background: transparent; color: var(--sd-gold-hi); border: 1px solid var(--sd-gold); border-radius: 999px; }
body.shell-dark .ms-cta-ghost:hover,
body.shell-dark .ms-cta-ghost:focus-visible,
body.shell-dark .ms-btn-view:hover,
body.shell-dark .ms-btn-view:focus-visible { background: rgba(201, 168, 76, .1); color: var(--sd-gold-hi); }
body.shell-dark .ms-link { color: var(--sd-gold-hi); }

/* Filter chips on Learn/Results. */
body.shell-dark .ms-chip { background: transparent; color: var(--sd-ink); border-color: var(--sd-line); }
body.shell-dark .ms-chip[aria-pressed="true"] { background: var(--sd-gold); border-color: var(--sd-gold); color: var(--sd-navy); }

body.shell-dark :focus-visible { outline: 2px solid var(--sd-gold-hi); outline-offset: 2px; }