/*
 * The platform pages in Waymark (#00221): Start your club, your account, help, the legal pages, status and cookies.
 * Each page keeps its own layout and styles; with the new design (src/look.js) this comes after them and maps the
 * colour names they share (--bg, --panel, --ink, --hi…) onto Waymark, sets Overpass in sentence case, and swaps the
 * logo. Only inside <html class="wm">.
 */
html.wm {
  --bg: #EFEBDF; --panel: #FFFDF7; --panel-2: #E8E2D2; --well: #E8E2D2; --line: #DDD6C5;
  --ink: #14233A; --ink-2: #374151; --ink-3: #4B5563;
  --hi: #14233A; --hi-ink: #FFFDF7; --hi-soft: #FBF0C8; --tip: #FBF0C8;
  --ok: #1F6B3F; --ok-soft: #DDEFE2; --ok-bg: #DDEFE2; --good: #1F6B3F; --bad: #A3241A;
  --warn: #6B4E00; --warn-bg: #FBF0C8; --down: #A3241A; --down-bg: #FBE3E0; --none: #5A6473;
  --club: #1F6B3F; --map: #EAE4D2; --map-line: #D3C9AE;
  --display: "Overpass", system-ui, sans-serif; --body: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html.wm:not([data-theme="light"]) {
    --bg: #0E1828; --panel: #16243A; --panel-2: #1C2D47; --well: #1C2D47; --line: #2A3B57;
    --ink: #EFEBDF; --ink-2: #D6D9DE; --ink-3: #B4BCC8;
    --hi: #EFEBDF; --hi-ink: #0E1828; --hi-soft: #33301F; --tip: #33301F;
    --ok: #6FD39A; --ok-soft: #173323; --ok-bg: #173323; --good: #6FD39A; --bad: #FF9B85;
    --warn: #F2D27A; --warn-bg: #33301F; --down: #FF9B85; --down-bg: #3A1D1A; --none: #A9B1BD;
    --club: #6FD39A; --map: #121F33; --map-line: #24344E;
    color-scheme: dark;
  }
}
html.wm[data-theme="dark"] {
  --bg: #0E1828; --panel: #16243A; --panel-2: #1C2D47; --well: #1C2D47; --line: #2A3B57;
  --ink: #EFEBDF; --ink-2: #D6D9DE; --ink-3: #B4BCC8;
  --hi: #EFEBDF; --hi-ink: #0E1828; --hi-soft: #33301F; --tip: #33301F;
  --ok: #6FD39A; --ok-soft: #173323; --ok-bg: #173323; --good: #6FD39A; --bad: #FF9B85;
  --warn: #F2D27A; --warn-bg: #33301F; --down: #FF9B85; --down-bg: #3A1D1A; --none: #A9B1BD;
  --club: #6FD39A; --map: #121F33; --map-line: #24344E;
  color-scheme: dark;
}
html.wm body { font-family: var(--body); }

/* Headings: Overpass, heavy, sentence case (the old look set them in condensed capitals) */
html.wm :is(h1, h2, h3, h4) { font-family: var(--body); font-weight: 900; text-transform: none; letter-spacing: -.01em; }
html.wm h1 { line-height: 1.02; }
html.wm .eyebrow { font-family: var(--wm-mono); letter-spacing: .08em; color: var(--ink-3); }

/* The logo: Waymark's yellow disc and arrow, in place of the old mark; the name in one colour */
html.wm :is(a.brand, a.logo, .brand, .logo) > svg { display: none; }
html.wm :is(a.brand, a.logo, .brand, .logo)::before { content: ""; width: 32px; height: 32px; flex: none; display: inline-block; vertical-align: middle; margin-right: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='16' fill='%23F2C230'/%3E%3Cpath d='M10 21 L17 10 L24 21 L19.5 21 L19.5 25 L14.5 25 L14.5 21 Z' fill='%2314233A'/%3E%3C/svg%3E") center / contain no-repeat; }
html.wm :is(a.brand, a.logo, .brand, .logo) { font-family: var(--body); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
html.wm :is(.brand, .logo) :is(.hi, b, span) { color: inherit; }

/* Buttons: pills; the main action in yellow */
html.wm .btn { border-radius: 999px; font-family: var(--body); font-weight: 800; }
html.wm :is(.btn.hi, .btn.primary) { background: #F2C230; border-color: #F2C230; color: #14233A; }
html.wm :is(.btn.fill, .btn.dark) { background: var(--ink); border-color: var(--ink); color: var(--panel); }
html.wm .btn:not(.hi):not(.primary):not(.fill):not(.dark) { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }

/* Fields and focus */
html.wm :is(input, select, textarea) { font-family: var(--body); }
html.wm .field input, html.wm .field select, html.wm .field textarea { border: 1.5px solid #8C8676; border-radius: 12px; background: var(--panel); }
html.wm :focus-visible { outline-color: #2457C5; }
html.wm a { text-underline-offset: 2px; }

/* Cards and the picked plan */
html.wm :is(.card, .plan) { border-radius: 18px; }
html.wm .plan.pick { border: 2px solid var(--ink); box-shadow: 0 0 0 3px #F2C230; }
html.wm .plan .tag { background: #F2C230; color: #14233A; font-family: var(--wm-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; }
html.wm .steps li[aria-current] { background: var(--ink); color: var(--panel); }
/* Start your club (launch 22/10): the plans use the page's width on computers; the steps stay on one line on phones */
html.wm #s-plan .plans { max-width: none; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
html.wm #s-plan .lead { max-width: 640px; }
@media (max-width: 520px) {
  html.wm .steps { flex-wrap: nowrap; gap: 4px; font-size: 12.5px; }
  html.wm .steps li { padding: 5px 9px; white-space: nowrap; }
  html.wm .steps li:not([aria-current]) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
html.wm .warn { background: var(--hi-soft); }
html.wm :is(a.brand, a.logo) { color: var(--ink); text-decoration: none; }

/* Launch checks 22/10: sentence case for the status page's summary; the help article's roles wrap in a softer tag */
html.wm .overall b { text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 900; }
html.wm .meta .chip { border-radius: 10px; line-height: 1.35; white-space: normal; }