/* The flat look and the night theme for the static pages: guides (/guides/*) and rarity (/rarity/*).
   Loaded after microsite-shell.css (and, on rarity, its own page CSS), so it only overrides: the shapes, the pressable
   gold, the card edges and the dark ground the app already has (src/flatUi.css and its :root.ui-night). The rarity
   server renders this inline as well, generated from this file by scripts/sync-microsite-flat.py: edit here, run that,
   commit both.

   Night follows the app: a small script in each page's head reads the same remembered choice (localStorage
   "ctr-theme": light, dark or system) and sets ui-night on <html> before first paint. */

:root {
  --cream-300: oklch(86% 0.01 255);
  --teal-400: oklch(86% 0.15 95);
  --teal-600: oklch(70% 0.15 90);
  --edge: 2px;
  --lip: 4px;
  --lip-sm: 3px;
  --radius-control: 12px;
  --radius-card: 20px;
}

@media screen {
  :root.ui-night {
    color-scheme: dark;
    --cream-000: oklch(27% 0.03 262);
    --cream-050: oklch(21% 0.028 262);
    --cream-100: oklch(31% 0.03 262);
    --cream-200: oklch(37% 0.03 262);
    --cream-300: oklch(44% 0.03 262);
    --ink-900: oklch(96% 0.008 255);
    --ink-700: oklch(85% 0.012 255);
    --ink-500: oklch(73% 0.014 255);
    --ink-400: oklch(69% 0.014 255);
    --teal-700: oklch(82% 0.12 90);
    --mark-hover: oklch(96% 0.008 255 / 0.06);
    --mark-axis: oklch(96% 0.008 255 / 0.32);
    --mark-grid: oklch(96% 0.008 255 / 0.14);
  }
}

body {
  background: var(--cream-050);
}

/* ── Header ─────────────────────────────────────────────────────── */
.navbar {
  border-bottom: var(--edge) solid var(--cream-200);
}

.ms-nav {
  gap: 4px;
}

.ms-nav a {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 700;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.ms-nav a:hover {
  background: var(--cream-100);
  color: var(--ink-900);
}

/* The gold button: the app's pressable face, its lip and its sink. Black on gold whatever the theme. */
.navbar-cta,
.cta {
  padding: 10px 18px;
  border-radius: var(--radius-control);
  background: var(--teal-500);
  color: var(--navy-900);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 var(--lip-sm) 0 var(--teal-600);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease-out;
}

.navbar-cta:hover,
.cta:hover {
  filter: none;
  background: var(--teal-400);
}

.navbar-cta:active,
.cta:active {
  transform: translateY(var(--lip-sm));
  box-shadow: 0 0 0 var(--teal-600);
}

/* A phone: the wordmark is the widest thing in the bar, so it gives ground before the button does. It was pushing the
   gold button over the logo. */
@media (max-width: 520px) {
  .navbar-inner {
    gap: 8px;
    min-height: 60px;
    padding-block: 8px;
  }

  .brand {
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand-mark {
    width: 26px;
    height: 23px;
  }

  .brand-name {
    font-size: 17px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .navbar-cta {
    flex: none;
    padding: 8px 12px;
    font-size: 12px;
    letter-spacing: 0.03em;
  }
}

/* Narrower still, the ".co.uk" is the part that goes. */
@media (max-width: 380px) {
  .brand-name span {
    display: none;
  }
}

/* The theme button: one round face that shows the current choice (sun, moon or the device) and steps to the next. */
.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--cream-100);
  color: var(--ink-700);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.theme-toggle:hover {
  background: var(--cream-200);
  color: var(--ink-900);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: 2px;
}

.theme-toggle .ti {
  display: none;
}

:root[data-theme-mode='light'] .theme-toggle .ti-light,
:root[data-theme-mode='dark'] .theme-toggle .ti-dark,
:root[data-theme-mode='system'] .theme-toggle .ti-system,
:root:not([data-theme-mode]) .theme-toggle .ti-system {
  display: block;
}

@media (max-width: 520px) {
  .theme-toggle {
    width: 34px;
    height: 34px;
    margin-right: 0;
  }
}

/* ── Footer ─────────────────────────────────────────────────────── */
:root.ui-night .footer {
  background: oklch(15% 0.02 262);
  border-top: var(--edge) solid var(--cream-200);
}

/* ── Guides ─────────────────────────────────────────────────────── */
.guide-main {
  color: var(--ink-700);
}

.guide-main h1 {
  letter-spacing: -0.03em;
}

.guide-main ul,
.guide-main ol {
  padding-left: 1.4em;
}

.guide-main li::marker {
  color: var(--teal-600);
  font-weight: 800;
}

.guide-main blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--cream-000);
  box-shadow: inset 0 0 0 var(--edge) var(--cream-200), inset 5px 0 0 var(--teal-500);
}

.guide-main table {
  border: var(--edge) solid var(--cream-200);
  border-radius: var(--radius-control);
  background: var(--cream-000);
}

.guide-main th,
.guide-main td {
  border: 0;
  border-top: 1px solid var(--cream-100);
}

.guide-main th {
  border-top: 0;
  background: var(--cream-100);
  color: var(--ink-500);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guide-main code {
  border: 0;
  border-radius: 8px;
  background: var(--cream-100);
  color: var(--ink-900);
}

.guide-main hr {
  border-top: var(--edge) solid var(--cream-200);
}

.lang-note {
  border: 0;
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--edge) var(--cream-200);
}

/* The guides hub is a list of links; they read as tiles. */
.guide-main ul:has(> li > a:only-child) {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}

.guide-main ul:has(> li > a:only-child) > li {
  margin: 0;
}

.guide-main ul:has(> li > a:only-child) > li > a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  background: var(--cream-000);
  color: var(--ink-900);
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 0 0 var(--edge) var(--cream-200), 0 var(--lip-sm) 0 var(--cream-300);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease-out;
}

.guide-main ul:has(> li > a:only-child) > li > a:hover {
  background: var(--cream-050);
}

.guide-main ul:has(> li > a:only-child) > li > a:active {
  transform: translateY(var(--lip-sm));
  box-shadow: inset 0 0 0 var(--edge) var(--cream-200), 0 0 0 var(--cream-300);
}

/* ── Rarity ─────────────────────────────────────────────────────── */
.ms-main table,
.np-panel,
.np-bds,
.ln-wrap,
.chart-card,
.mk,
.mdls,
.note,
.np-vars {
  border-radius: var(--radius-card);
}

.ms-main table {
  background: var(--cream-000);
}

.ms-main a {
  color: var(--teal-700);
}

.crumbs a {
  color: var(--ink-500);
}

/* Tabs and the status switch: a pill track, the chosen one lifts in gold. */
.np-tabs,
.np-status {
  background: var(--cream-100);
}

.np-tab[aria-selected='true'],
.ms-main .np-st.on {
  background: var(--teal-500);
  color: var(--navy-900);
  box-shadow: 0 var(--lip-sm) 0 var(--teal-600);
}

.np-tab:focus-visible {
  outline: 2px solid var(--teal-600);
}

/* Links that are tiles press like the app's cards. */
.np-deriv,
.ms-main .mdl,
.ms-main .mk a {
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease-out;
}

.np-deriv {
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--edge) var(--cream-200), 0 var(--lip-sm) 0 var(--cream-300);
}

.np-deriv:hover {
  background: var(--cream-050);
}

.np-deriv:active {
  transform: translateY(var(--lip-sm));
  box-shadow: inset 0 0 0 var(--edge) var(--cream-200), 0 0 0 var(--cream-300);
}

.np-varlist .vt.on {
  background: color-mix(in oklab, var(--teal-500) 22%, var(--cream-000));
}

.ctabox {
  border-radius: var(--radius-card);
  background: color-mix(in oklab, var(--teal-500) 30%, var(--cream-000));
  box-shadow: inset 0 0 0 var(--edge) color-mix(in oklab, var(--teal-500) 55%, var(--cream-200));
}

/* After dark, gold stirred into the dark card reads as olive: the box is a plain card with a gold edge instead. */
:root.ui-night .ctabox {
  background: var(--cream-000);
  box-shadow: inset 0 0 0 var(--edge) var(--teal-500);
}

.ctabox p {
  color: var(--ink-700);
}

/* The page's link colour (.ms-main a) outranks .cta, which left the button's words gold on gold. */
.ms-main a.cta,
.ms-main a.navbar-cta {
  color: var(--navy-900);
}

.ms-main a.cta:hover {
  text-decoration: none;
}

.np-peak,
.np-bd-bar {
  background: var(--cream-100);
}

.np-peak i {
  background: var(--teal-500);
}

.rd {
  background: var(--cream-050);
}

@media (prefers-reduced-motion: reduce) {
  .navbar-cta,
  .cta,
  .np-deriv,
  .guide-main ul:has(> li > a:only-child) > li > a {
    transition: none;
  }
}