/*
 * SolSEO, the sheet every page loads. No build step (D-7.5).
 *
 * WHAT BELONGS HERE: the theme tokens, the element reset and the few
 * components both shells draw. A rule earns its place by being matched on a
 * signed in screen AND on a public page. Anything only the dashboard draws
 * belongs in app.css; anything only a marketing page draws belongs in
 * marketing.css.
 *
 * WHY IT EXISTS (D-127.1). app.css was one sheet for the whole product, linked
 * from partials/head.php, so somebody reading /pricing downloaded the rail,
 * the tables, the audit screens and the keyword charts before the page could
 * paint, and not one of those rules matched anything on it. The stylesheet is
 * the only render blocking asset a public page has. bin/selftest.php holds a
 * ceiling on each of the three sheets, and fails if a public page links the
 * dashboard's.
 *
 * ORDER MATTERS. This file is linked first, by partials/head.php. app.css and
 * marketing.css are linked after it and both may override it.
 *
 * --signal stays a SINGLE variable. The design guide's tokens.css proposes
 * #1C8AE6 and the approved canvas uses #5B8DFF; the handoff says Thomas picks
 * one, so there is exactly one place to change it and nothing else refers to
 * either literal.
 */

/*
 * ── THEME (D-48.1, D-48.2, D-48.3) ─────────────────────────────────────────
 *
 * LIGHT IS THE BASE AND DARK IS THE OVERRIDE. This amends D-7.3, which set a
 * dark shell. Every tool that sells to this buyer is light, and dark reads as
 * developer tooling to somebody who came here to find out whether their shop
 * is doing well.
 *
 * THE PAGE BACKGROUND IS --bg AND --bg-2, RENAMED AT STAGE 9 (D-48.17).
 * It was --midnight and --midnight-2, which held #F7F5EF and #FBF8F2, two
 * creams: a name that says the opposite of its value is worse than no name,
 * because the next person to reach for a dark background reaches for it.
 *
 * The old names were kept as aliases for one day, while another session held
 * marketing.css and docs.css. Those sixteen substitutions are done and the
 * aliases came out with them, which is what an alias with a removal date
 * looks like when somebody actually removes it. Nothing spells the old name
 * now, in any sheet or any template, and the selftest holds that.
 *
 * --paper, --card, --ink, --ink-muted and --ink-line are NOT part of the
 * theme. They belong to the .public block at the bottom of this file, which is
 * a public page rendered with this stylesheet and is light whatever the
 * account's preference is. They keep their values in both blocks.
 *
 * THE TWO NEW NAMES:
 *   --btn-fg    ink on a gold fill. The fill does NOT darken in light mode;
 *               the text moves instead, at 7.57:1. Darkening the fill to
 *               #B87512 reads muddy and puts white on it at 3.76:1, which
 *               fails AA for 13px bold (D-48.2).
 *   --amber     gold used AS A LINE OR A STROKE, 3.9:1 on white. WCAG asks
 *               3:1 of a graphic and the brand gold gives 1.9:1, which is
 *               why a chart mark, a ring and a warning dot cannot use it.
 *               This was left open at stage 1 and closed at stage 7.
 *   --gold-text gold used AS TEXT on a light surface, 6.15:1 on white. The
 *               brand gold as text on paper is 1.9:1 and unreadable, which is
 *               why one token could never do both jobs (D-48.3).
 *   --link      the one link colour and --link-hover the shade a hover moves
 *               it to, 6.44:1 and 9.78:1 on --bg. Hover underlines (D-192.1).
 */
:root{
  --bg:#F7F5EF;--bg-2:#FBF8F2;--surface:#FFFFFF;--surface-hover:#F6F1E6;--selected:#EFE7D8;
  --line:#E4DCCC;--divider:#EFE9DC;--fg:#1E2129;--muted:#6B6659;
  --gold:#F2A93B;--gold-deep:#D98A21;--btn-fg:#23262E;--gold-text:#8A5606;--amber:#B8700E;
  --ember:#C42822;--up:#17864B;--signal:#2563C9;--link:#0C5B9C;--link-hover:#08406E;
  --paper:#FBF8F2;--card:#FFFFFF;--ink:#23262E;--ink-muted:#6B6659;--ink-line:#EAE1D2;
  --display:"Montserrat",system-ui,sans-serif;--body:"Open Sans",system-ui,sans-serif;
  --line-strong:#CFC3AC;--r-control:6px;--r-card:8px;--rail:220px;--topbar:56px;--t:120ms;
}

/*
 * THE DARK BLOCK IS WRITTEN TWICE AND THE TWO COPIES MUST STAY IDENTICAL.
 *
 * A stored preference wins, and a user who has never chosen follows their
 * machine. That is two different selectors, one of them inside a media query,
 * and CSS cannot share declarations across that boundary. "Both dark blocks
 * are identical" in bin/selftest.php is what stops them drifting; do not edit
 * one without the other.
 *
 * The green, the red and the blue all change. The dark theme's #3CCB7F is
 * 2.4:1 on paper, so reusing it would make every "up" figure unreadable in the
 * theme that is now the default.
 */
:root[data-theme="dark"]{
  --bg:#070731;--bg-2:#0d0d47;--surface:#0e0e3d;--surface-hover:#12124d;--selected:#161655;
  --line:#26265f;--divider:#1a1a55;--fg:#EEEAE0;--muted:#A49E90;
  --btn-fg:#1A1405;--gold-text:#F2A93B;--amber:#F2A93B;--line-strong:#3a3a7a;
  --ember:#E23A34;--up:#3CCB7F;--signal:#5B8DFF;--link:#7FB2FF;--link-hover:#C3DBFF;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070731;--bg-2:#0d0d47;--surface:#0e0e3d;--surface-hover:#12124d;--selected:#161655;
    --line:#26265f;--divider:#1a1a55;--fg:#EEEAE0;--muted:#A49E90;
    --btn-fg:#1A1405;--gold-text:#F2A93B;--amber:#F2A93B;--line-strong:#3a3a7a;
    --ember:#E23A34;--up:#3CCB7F;--signal:#5B8DFF;--link:#7FB2FF;--link-hover:#C3DBFF;
  }
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/23px var(--body)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--display)}
.num,.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
svg{display:block}
[x-cloak]{display:none!important}
.eyebrow{font:700 13px var(--display);letter-spacing:.18em;text-transform:uppercase}
.btn-primary{white-space:nowrap;height:34px;padding:0 15px;border-radius:var(--r-control);background:var(--gold);color:var(--btn-fg);border:1px solid var(--gold-deep);font-weight:700;font-size:13px;transition:background var(--t);display:inline-flex;align-items:center}
.btn-primary:hover{background:var(--gold-deep)}
.btn-ghost{white-space:nowrap;height:32px;padding:0 14px;border-radius:var(--r-control);border:1px solid var(--line);color:var(--fg);font-weight:600;font-size:13px;display:inline-flex;align-items:center}
.btn-ghost:hover{background:var(--surface-hover)}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600}
.delta--up,.is-up{color:var(--up)}
.delta--down,.is-down{color:var(--ember)}
.delta--flat,.is-flat{color:var(--muted)}
.right{text-align:right}
.spark polyline{fill:none;stroke-width:1.5;stroke-linejoin:round}
.is-busy button[disabled],button[disabled]{opacity:.55;cursor:default}
.hint{font-size:13px;color:var(--muted);line-height:1.5}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* The consent banner (D-32.2). Rendered only where a visitor has to be asked. */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:760px;margin:0 auto;padding:16px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.consent__text{margin:0;font-size:13px;line-height:1.6;color:var(--fg);max-width:52ch}
.consent__text a{text-decoration:underline}
.consent__actions{display:flex;gap:8px;flex-shrink:0}
@media (max-width:560px){.consent{flex-direction:column;align-items:stretch}.consent__actions{justify-content:flex-end}}
/* Two components the marketing mocks draw as well as the dashboard. */
.kw{font-weight:600}
.band{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}