/* marketingfinch — shared design system.
   Rules and the evidence for each are in docs/ux-foundation.md.

   Palette, type and spacing replicate Ahrefs', taken from their live stylesheet
   rather than from memory. Their logo and wordmark are not copied — that is
   trademark rather than styling.

   The thing worth noticing in their system is that the neutrals are WARM, not
   grey: #B8B4A8, #635F55, and cream tints #FFE7CD/#FFDBB3 against white. Cool
   greys next to an amber accent read as unconsidered, which is what this file
   had before.

   Roles are set by measured contrast on white:
     #111111 18.9:1   #635F55 6.4:1   #6B6820 5.8:1   #3A57FC 5.3:1   all text-safe
     #F75A03 3.3:1    large text and UI only
     #FF8D00 2.3:1  #FFB528 1.8:1  #B8B4A8 2.1:1   fills, marks and rules only
   Amber and orange carry near-black text on top instead (10.7:1 and 8.2:1). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Ground is white. Cream is the second surface, replacing the cool grey. */
  --paper:#ffffff; --ground:#ffffff; --sunk:#FFF6EA;

  /* Warm neutrals, theirs. */
  --ink:#111111; --ink-2:#635F55; --muted:#7C776B;
  --rule:#E5E5E5; --rule-soft:#F0EDE8;

  /* Brand. Amber leads by usage in their own stylesheet; orange and deep orange
     are its stronger siblings; blue carries interaction. */
  --accent:#FF8D00; --accent-strong:#F75A03; --accent-amber:#FFB528;
  --accent-soft:#FFE7CD; --accent-softer:#FFDBB3;
  --accent-ink:#C24A00;
  --accent-2:#3A57FC; --accent-2-soft:#E8ECFF;

  /* Blue as a SURFACE, not only a link colour. Ahrefs run it full bleed with
     white cards on top; the app stays light because data density on a
     saturated ground is hard to read — their product is light too. */
  --brand:#3A57FC; --brand-deep:#2E45CC;
  --on-brand:#ffffff; --on-brand-dim:#D6DDFF; --on-brand-accent:#FFB528;
  --olive:#6B6820;

  --warn:#8a5200; --warn-soft:#FFDBB3;
  --bad:#96251f; --bad-soft:#f8e3e1;
  --good:#1f6b3a;

  --sans:Inter,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  /* Headings only. Space Grotesk is a geometric grotesque with a much stronger
     voice than Inter — the wide, squared bowls and that distinctive single-storey
     'a' carry a headline, and get tiring in a paragraph. Body text and every
     figure stay on Inter, which is what the product is read in all day.
     SIL Open Font License, so commercial use is free. */
  --display:"Space Grotesk",Inter,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-12:12px; --t-13:13px; --t-14:14px; --t-15:15px; --t-16:16px; --t-18:18px;
  --t-20:20px; --t-24:24px; --t-28:28px; --t-32:32px; --t-40:40px; --t-48:48px;
  --t-60:60px;

  /* They set display type at -.05em and -.04em; ordinary text stays at zero. */
  --track-display:-.05em; --track-head:-.04em;

  --r:4px; --r-lg:6px; --r-pill:999px;
}

@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#191714; --ground:#100E0C; --sunk:#221E19;
  --ink:#F6F2EC; --ink-2:#C9C2B6; --muted:#9A9285;
  --rule:#332E27; --rule-soft:#272219;
  --accent:#FFB528; --accent-strong:#FF8D00; --accent-amber:#FFB528;
  --accent-soft:#33230f; --accent-softer:#3d2a12; --accent-ink:#FFB528;
  --accent-2:#7D96FF; --accent-2-soft:#1b2340; --olive:#B5B048;
  --warn:#d69a3f; --warn-soft:#2e2414;
  --bad:#e0817a; --bad-soft:#331c1a;
  --good:#6fb587;
}}
:root[data-theme="dark"]{
  --paper:#191714; --ground:#100E0C; --sunk:#221E19;
  --ink:#F6F2EC; --ink-2:#C9C2B6; --muted:#9A9285;
  --rule:#332E27; --rule-soft:#272219;
  --accent:#FFB528; --accent-strong:#FF8D00; --accent-amber:#FFB528;
  --accent-soft:#33230f; --accent-softer:#3d2a12; --accent-ink:#FFB528;
  --accent-2:#7D96FF; --accent-2-soft:#1b2340; --olive:#B5B048;
  --warn:#d69a3f; --warn-soft:#2e2414;
  --bad:#e0817a; --bad-soft:#331c1a;
  --good:#6fb587;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-15);line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding-inline:20px;padding-block:0 80px}
.wrap.wide{max-width:980px}
[hidden]{display:none!important}

/* Masthead ------------------------------------------------------------- */
.top{display:flex;align-items:center;gap:12px;padding-block:28px 22px;flex-wrap:wrap}
.mark{width:26px;height:26px;flex:none;color:var(--accent)}
.brand{font-weight:600;letter-spacing:-.01em}
.brand span{color:var(--muted);font-weight:400}
.top .spacer{flex:1}

h1{font-family:var(--display);font-size:var(--t-28);line-height:1.15;margin:0 0 6px;font-weight:700;
   letter-spacing:-.025em;text-wrap:balance}
h2{font-family:var(--display);font-size:var(--t-18);margin:0 0 4px;font-weight:700;letter-spacing:-.015em}
h3{font-family:var(--display);letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 24px;font-size:var(--t-15)}
.small{font-size:var(--t-13);color:var(--muted)}

.panel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px 28px 24px}
.panel + .panel{margin-top:20px}

/* Forms — single column, real targets (Fitts), fewest fields that will do */
label{display:block;font-size:var(--t-13);font-weight:500;margin-bottom:6px}
.hint{color:var(--muted);font-weight:400}
input[type=text],input[type=email],input[type=password],textarea{
  width:100%;font:inherit;color:inherit;background:var(--paper);
  border:1px solid var(--rule);padding:11px 12px;border-radius:var(--r)}
textarea{min-height:88px;resize:vertical}
input:focus,textarea:focus,button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px}
.field{margin-bottom:20px}

button{font:inherit;font-weight:500;padding:11px 18px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;border-radius:var(--r)}
button.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
button.small{padding:8px 14px;font-size:.8rem;min-height:36px}
/* A finger is not a mouse pointer. Coarse pointers get the full 44px that
   touch guidance asks for, without inflating the desktop layout. */
@media (pointer:coarse){
  button{min-height:44px}
  button.small{min-height:44px;padding:11px 16px}
  .chip{min-height:44px;padding:10px 14px;font-size:.82rem}
}
button[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}

/* Status — always names its stage. Never a bare spinner. */
.status{display:none;margin-top:18px;border:1px solid var(--rule);background:var(--sunk);padding:14px 16px;font-size:.88rem}
.status[data-on]{display:block}
.status .what{font-size:var(--t-14);color:var(--ink-2)}
.bar{height:3px;background:var(--rule-soft);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s ease}
@media (prefers-reduced-motion:reduce){ .bar i{transition:none} }

.error{display:none;margin-top:18px;border-left:3px solid var(--bad);background:var(--bad-soft);
  padding:12px 14px;font-size:.9rem;color:var(--ink)}
.error[data-on]{display:block}
.note{border-left:3px solid var(--warn);background:var(--warn-soft);padding:12px 14px;font-size:.88rem;margin-bottom:20px}

/* Facts — missing evidence shows as missing, never rounded to zero */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.fact{background:var(--paper);padding:11px 12px}
.fact b{display:block;font-family:var(--mono);font-size:1.05rem;font-variant-numeric:tabular-nums}
.fact span{display:block;font-size:.75rem;color:var(--muted);margin-top:2px}
.fact[data-missing] b{color:var(--warn)}

/* Derived values are labelled as proposals, never asserted */
.proposed{border:1px solid var(--rule);margin-bottom:20px}
.proposed .cap{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:9px 12px;border-bottom:1px solid var(--rule);background:var(--sunk)}
.cap b{font-size:var(--t-12);text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--muted)}
.cap em{font-style:normal;font-size:.74rem;color:var(--muted)}
.proposed .body{padding:14px 12px}

.chips{display:flex;flex-wrap:wrap;gap:8px}

.chip{font-size:var(--t-13);padding:8px 12px;min-height:34px;border-radius:var(--r);
  display:inline-flex;align-items:center;border:1px solid var(--rule);
  background:var(--paper);cursor:pointer;user-select:none;color:inherit}
.chip[aria-pressed="true"]{border-color:var(--accent-2);background:var(--accent-2-soft);color:var(--accent-2)}
.chip[aria-pressed="true"]::before{content:"✓ ";font-family:var(--sans)}

/* Step bar — recognition over recall: where you are stays on screen */
.steps{display:flex;border:1px solid var(--rule);background:var(--paper);margin-bottom:28px}
.step{flex:1;padding:10px 12px;font-size:var(--t-13);color:var(--muted);
  border-right:1px solid var(--rule);display:flex;gap:8px;align-items:baseline}
.step:last-child{border-right:none}
.step b{font-weight:500}
.step[data-state="current"]{background:var(--accent-2-soft);color:var(--accent-2)}
.step[data-state="done"]{color:var(--ink-2)}
.step[data-state="done"] b::before{content:"✓ "}

/* The ledger ----------------------------------------------------------- */
.action{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);padding:0;margin-bottom:12px}
.action .head{display:flex;gap:14px;padding:14px 16px;align-items:flex-start}
.action .rank{font-family:var(--mono);font-size:1.1rem;color:var(--muted);line-height:1.3;
  font-variant-numeric:tabular-nums;flex:none;width:18px}
/* Rank 1 is the one thing on the page that says "start here". It is the only
   place the accent is spent in the ledger. */
.action:first-child .rank{color:var(--accent);font-weight:700}
.action .body{flex:1;min-width:0}
.action h3{font-size:1rem;font-weight:600;margin:0 0 6px;line-height:1.35;text-wrap:balance}
.action p{margin:0;color:var(--ink-2);font-size:.9rem}
.action .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
/* Dismiss is the expensive mistake, so it does not sit against Mark shipped.
   Fitts cuts both ways: a target that is easy to hit is easy to hit by accident. */
.action .acts{display:flex;gap:8px;padding:0 16px 14px;flex-wrap:wrap;align-items:center}
.action .acts .spacer{flex:1;min-width:24px}

/* State is encoded in text and position, never colour alone */
.pill{font-size:var(--t-12);padding:3px 10px;border:1px solid var(--rule);
  border-radius:var(--r-pill);color:var(--muted);white-space:nowrap}
/* Figures keep the mono, because columns of digits should line up. */
.pill.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pill[data-k="shipped"]{border-color:var(--accent-2);color:var(--accent-2);background:var(--accent-2-soft)}
.pill[data-k="working"]{border-color:var(--good);color:var(--good)}
.pill[data-k="too_early"]{border-color:var(--warn);color:var(--warn)}
.pill[data-k="no_effect"]{border-color:var(--bad);color:var(--bad)}
.pill[data-k="dismissed"]{text-decoration:line-through}

.runline{display:flex;gap:12px;align-items:baseline;padding:9px 12px;border-bottom:1px solid var(--rule-soft);
  font-size:var(--t-14)}
.runline:last-child{border-bottom:none}
.runline .when{color:var(--muted);font-size:.78rem}
.runline .grow{flex:1}

.empty{border:1px dashed var(--rule);padding:26px;text-align:left;color:var(--muted);background:var(--paper)}
a{color:var(--accent-2)}
.tabular{font-variant-numeric:tabular-nums}

/* ─── Application shell ──────────────────────────────────────────────────────
   A persistent left rail plus a branded top bar. Product pages opt in with
   <body data-nav="overview">; shell.js does the rest.

   The rail is the light warm surface, not blue: Ahrefs' own product chrome is
   light for the same reason ours is — a saturated ground under dense figures
   costs legibility. Blue stays where it reads as brand: the top bar and the
   marketing pages. */
body[data-nav]{background:var(--ground)}
.shell{display:contents}

.shell-top{grid-area:top;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;gap:12px;
  padding:0 18px;padding-top:env(safe-area-inset-top,0px);min-height:56px;
  position:sticky;top:0;z-index:20}
.shell-brand{display:flex;align-items:center;gap:9px;color:var(--on-brand);
  text-decoration:none;font-weight:700;letter-spacing:var(--track-head);font-size:var(--t-16)}
.shell-brand .mark{width:22px;height:22px;color:var(--on-brand-accent)}
.shell-grow{flex:1}
.shell-top .credits{border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pill);
  padding:4px 12px;font-size:var(--t-12);font-family:var(--mono);font-variant-numeric:tabular-nums}
.shell-top button.ghost{border-color:rgba(255,255,255,.4);color:var(--on-brand);background:transparent}
.shell-top button.ghost:hover{border-color:var(--on-brand-accent);color:var(--on-brand-accent)}
.navtoggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.4);
  color:var(--on-brand);padding:0;width:38px;height:38px;min-height:0;align-items:center;justify-content:center}
.navtoggle svg{width:18px;height:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.shell-side{grid-area:side;background:var(--sunk);border-right:1px solid var(--rule);
  padding:14px 12px 40px;overflow-y:auto}
.bizpick{display:flex;align-items:center;gap:9px;padding:9px 10px;margin-bottom:16px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  font-size:var(--t-14);font-weight:600}
.bizpick .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.bizpick .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.navgroup{font-size:var(--t-12);text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:500;margin:20px 0 6px;padding-inline:10px}
.navsec{display:flex;flex-direction:column;gap:1px}
.navitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);
  font-size:var(--t-14);font-weight:500;color:var(--ink);text-decoration:none;line-height:1.2}
.navitem svg{width:17px;height:17px;flex:none;color:var(--ink-2)}
.navitem span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.navitem:hover{background:var(--accent-soft)}
a.navitem[aria-current="page"]{background:var(--paper);box-shadow:inset 2px 0 0 var(--accent-strong);
  font-weight:600}
a.navitem[aria-current="page"] svg{color:var(--accent-strong)}
.navitem.off{color:var(--muted);cursor:default}
.navitem.off svg{color:var(--muted);opacity:.6}
.navitem .soon,.navitem .count{font-style:normal;font-size:var(--t-12);color:var(--muted);flex:none}
.navitem .count{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--accent-ink)}

.shell-content{grid-area:main;min-width:0}
/* Inside the shell, content is left-aligned against the rail rather than
   centred in the viewport — centring leaves a dead gutter beside the nav. */
body[data-nav] .shell-content > .wrap,
body[data-nav] .shell-content > .page{margin-inline:0;padding:26px 28px 80px}

body[data-nav]{display:grid;grid-template-areas:"top top" "side main";
  grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
body[data-nav] .shell-side{position:sticky;top:56px;height:calc(100vh - 56px)}

@media (max-width:860px){
  body[data-nav]{grid-template-areas:"top" "main";grid-template-columns:minmax(0,1fr)}
  .navtoggle{display:inline-flex}
  .shell-side{position:fixed;inset:56px auto 0 0;width:260px;height:auto;bottom:0;z-index:19;
    transform:translateX(-100%);transition:transform .16s ease;box-shadow:0 0 0 100vmax rgba(0,0,0,0)}
  body.nav-open .shell-side{transform:none;box-shadow:2px 0 18px rgba(0,0,0,.18)}
}
@media (prefers-reduced-motion:reduce){ .shell-side{transition:none} }