/* Light/Dark for the public pages: /, /welcome and /welcome/shipsagent.
 *
 * public-theme.js sets html[data-theme-kind] in <head>, from the theme the app shell stores on
 * this device or, with none saved, from the device colour scheme. Light is the pages' own
 * stylesheets, untouched; everything below only adds the toggle and the dark presentation.
 * Dark rules sit under :root[data-theme-kind="dark"] so they outrank the light sheets whatever
 * order they load in, and under @media screen so print stays light.
 * CSP is style-src 'self': no inline styles. */

/* ── the toggle (scripts/build_site_nav.py renders it into the shared header) ─────────────── */
/* The anonymous Home takes its colours from the New preview tokens (data-interface="preview") and
   styles itself in public_home/css/veil.css; the dark rules below are for the other public pages. */
.msn-theme { display: none; }
:root[data-theme-kind] .msn-theme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 14px; margin-left: 8px;
  border: 1px solid var(--msn-border); border-radius: 14px;
  background: transparent; color: var(--msn-ink);
  font: inherit; font-weight: 700; line-height: 1; cursor: pointer;
}
.msn-theme svg { width: 20px; height: 20px; flex: none; }
.msn-theme:hover { background: var(--msn-soft); }
.msn-theme[aria-pressed="true"] { background: var(--msn-soft); border-color: var(--msn-teal); color: var(--msn-teal); }
.msn-theme:focus-visible { outline: 3px solid var(--msn-focus); outline-offset: 2px; }
@media (max-width: 720px) {
  :root[data-theme-kind] .msn-theme { width: 44px; padding: 0; margin-left: 0; }
  .msn-theme-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media print { .msn-theme { display: none !important; } }

/* ── dark ────────────────────────────────────────────────────────────────────────────────── */
/* The palette is the sign-in wall's dark one (webapp/signin.css), so the public pages, the wall
   and the header read as one surface. */
@media screen {
:root[data-theme-kind="dark"] {
  color-scheme: dark;
  --pt-bg: #102126; --pt-card: #172e34; --pt-soft: #1c3b40; --pt-ink: #e3efec; --pt-ink2: #aec4c4;
  --pt-teal: #81d6bf; --pt-line: #2c4a50; --pt-ctl: #436067; --pt-focus: #ffcc83;
  --bg: var(--pt-bg); --panel: var(--pt-card); --panel2: var(--pt-soft); --card: var(--pt-card);
  --ink: var(--pt-ink); --dim: var(--pt-ink2); --faint: var(--pt-ink2); --mute: var(--pt-ink2); --muted: var(--pt-ink2);
  --line: var(--pt-line); --edge: var(--pt-line); --edge2: var(--pt-ctl);
  --brand: var(--pt-teal); --teal: var(--pt-teal); --accent: var(--pt-teal); --brand2: var(--pt-teal);
  --go: #7fd4a8; --wind: #8ec5ec; --violet: #c9b6e6; --nogo: #f2aea2;
  --sg-paper: var(--pt-bg); --sg-white: var(--pt-card); --sg-ink: var(--pt-ink); --sg-muted: var(--pt-ink2);
  --sg-teal: var(--pt-teal); --sg-line: var(--pt-line); --sg-soft: var(--pt-soft); --sg-gold: #e0bd78;
}
:root[data-theme-kind="dark"] .msn {
  --msn-page: var(--pt-bg); --msn-surface: var(--pt-card); --msn-soft: var(--pt-soft);
  --msn-ink: var(--pt-ink); --msn-ink2: var(--pt-ink2); --msn-teal: var(--pt-teal);
  --msn-border: var(--pt-ctl); --msn-focus: var(--pt-focus); --msn-shadow: 0 6px 22px rgba(0, 0, 0, .4);
}
:root[data-theme-kind="dark"] body,
:root[data-theme-kind="dark"] .sg-guide { background: var(--pt-bg); color: var(--pt-ink); }
/* Same weight as meridian-light.css's bare `a`, so the header's own link colours still win. */
:where(:root[data-theme-kind="dark"]) a { color: var(--pt-teal); }
:root[data-theme-kind="dark"] :is(a, button, summary, input):focus-visible { outline-color: var(--pt-focus); }

/* primary and secondary actions */
:root[data-theme-kind="dark"] :is(.veil-signin, .veil-cta, .wc-cta, .wc-btn-primary, .gate-btn, .ov-cta, .bld-cta, .sg-button),
:root[data-theme-kind="dark"] .wc-overview .wc-cta,
:root[data-theme-kind="dark"] .sg-next .sg-button {
  background: var(--pt-teal); border-color: var(--pt-teal); color: var(--pt-bg) !important;
}
:root[data-theme-kind="dark"] :is(.wc-cta, .wc-btn-primary, .gate-btn, .sg-button):is(:hover, :focus-visible),
:root[data-theme-kind="dark"] .wc-overview .wc-cta:hover {
  background: #a3e4d2; border-color: #a3e4d2; color: var(--pt-bg) !important;
}
:root[data-theme-kind="dark"] :is(.wc-cta.ghost, .ov-cta.ghost, .bld-cta.ghost),
:root[data-theme-kind="dark"] .wc-overview .wc-cta.ghost {
  background: transparent; border-color: var(--pt-teal); color: var(--pt-teal) !important;
}

/* the sign-in card the gated shells show before a session */
:root[data-theme-kind="dark"] :is(.wc-state-card, .gate-card) {
  background: var(--pt-card); color: var(--pt-ink); border-color: var(--pt-line); box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
}
:root[data-theme-kind="dark"] :is(.wc-state-title, .wc-state-card h1, .gate-card h1) { color: var(--pt-ink); }
:root[data-theme-kind="dark"] :is(.wc-state-card p, .gate-card p, .gate-card .muted) { color: var(--pt-ink2); }
:root[data-theme-kind="dark"] .skip-link:focus { background: var(--pt-soft); color: var(--pt-ink); border-color: var(--pt-ctl); }

/* /welcome walkthrough body (welcome.css, meridian-light.css, welcome-light-overview.css) */
:root[data-theme-kind="dark"] #content :is(p, ul, ol) { color: var(--pt-ink2); }
:root[data-theme-kind="dark"] :is(.wc-nav, .wc-topbar) { background: rgba(16, 33, 38, .97); border-color: var(--pt-line); }
:root[data-theme-kind="dark"] .wc-hero::after { background: linear-gradient(180deg, rgba(16, 33, 38, .1), rgba(16, 33, 38, .9) 78%, var(--pt-bg)); }
:root[data-theme-kind="dark"] :is(.wc-shot, .wc-tour-fig, .wc-tour-top, .wc-tour-step, .wc-tour-nav, .wc-screen-card, .wc-lightbox-card, .wc-lightbox-panel) {
  background: var(--pt-card); color: var(--pt-ink); border-color: var(--pt-line); box-shadow: none;
}
:root[data-theme-kind="dark"] :is(.wc-note, .wc-card, .wc-step, .wc-flow li, .wc-overview .wc-end, .wc-overview .wc-table thead, .wc-reference[open] > summary) {
  background: var(--pt-soft); border-color: var(--pt-line); color: var(--pt-ink);
}
:root[data-theme-kind="dark"] :is(.wc-tour-step.is-active, .wc-tour-dot[aria-selected="true"], .wc-chapter-nav a:hover, .wc-overview-bar .wc-tab[aria-current="page"]) { background: var(--pt-soft); }
:root[data-theme-kind="dark"] .wc-overview-bar { background: rgba(23, 46, 52, .96); }
:root[data-theme-kind="dark"] .wc-concept-boundary { background: #2d2a1f; border-left-color: #e0bd78; color: #f0e3c4 !important; }
:root[data-theme-kind="dark"] .wc-lightbox { background: rgba(4, 12, 15, .8); }
:root[data-theme-kind="dark"] .wc-foot { color: var(--pt-ink2); }

/* /welcome/shipsagent guide body (shipsagent-guide.css) */
:root[data-theme-kind="dark"] :is(.sg-screen, .sg-screen figcaption, .sg-reference-item, .sg-search input, .sg-zoom, .sg-zoom button, .sg-internal-banner, .sg-skip) {
  background: var(--pt-card); color: var(--pt-ink); border-color: var(--pt-line); box-shadow: none;
}
:root[data-theme-kind="dark"] .sg-search input { border-color: var(--pt-ctl); }
:root[data-theme-kind="dark"] :is(.sg-screen-label, .sg-note, .sg-restored-opening aside, .sg-next, .sg-review-mask) {
  background: var(--pt-soft); border-color: var(--pt-line); color: var(--pt-ink);
}
:root[data-theme-kind="dark"] :is(.sg-tracks article, .sg-close-states article),
:root[data-theme-kind="dark"] :is(.sg-tracks article, .sg-close-states article):is(:nth-child(1), :nth-child(2)) {
  background: var(--pt-soft); border-color: var(--pt-line);
}
:root[data-theme-kind="dark"] :is(.sg-tracks article, .sg-close-states article):nth-child(3) { background: #2d2a1f; border-color: #4d4532; }
:root[data-theme-kind="dark"] .sg-chapter-nav { background: rgba(16, 33, 38, .97); }
:root[data-theme-kind="dark"] .sg-stage-number { color: var(--pt-teal); }
:root[data-theme-kind="dark"] .sg-mark { background: var(--pt-teal); color: var(--pt-bg); }
:root[data-theme-kind="dark"] .sg-next :is(h2, p) { color: var(--pt-ink); }
:root[data-theme-kind="dark"] .sg-zoom::backdrop { background: rgba(4, 12, 15, .8); }
/* The workflow diagrams are SVGs drawn on their own paper; the card around them goes dark and
   they keep the paper rather than being inverted. */
:root[data-theme-kind="dark"] .sg-diagram { background: var(--pt-card); border-color: var(--pt-line); }
:root[data-theme-kind="dark"] .sg-diagram img { border-radius: 12px; }
}