/* Meter reskin.
 *
 * The full meter page (/meter) is the ORIGINAL dashboard markup + JS served
 * verbatim, so its dual-chart layout and every interaction are unchanged.
 * This file only re-skins it: it loads after dashboard.css / strength.css and
 * redefines their design tokens to the redesign palette — paper ground, white
 * panels, flat 1px outlines instead of soft shadows, DM Sans / IBM Plex Sans /
 * IBM Plex Mono. Nothing here touches structure or behaviour.
 */
body.cs-page{
  --bg-0:#E9EBE8;      /* page ground (was cream) */
  --bg-1:#FFFFFF;      /* panels / cards */
  --bg-2:#F3F4F2;
  --bg-3:#DDE1DD;      /* bar tracks */
  --bg-hover:#DCE0DC;
  --border:#C7CCC7;
  --border-2:#A9AFA9;
  --border-3:#A9AFA9;
  --text:#12151A;
  --text-dim:#454B52;
  --text-faint:#767D84;
  --ink:#12151A;
  --on-ink:#FFFFFF;
  --bull:#1F5FE0; --bull-bright:#1A4FC4; --bull-bg:rgba(31,95,224,.09);
  --bear:#E2511C; --bear-bright:#C6461A; --bear-bg:rgba(226,81,28,.10);
  --accent:#1F5FE0;
  --amber:#B45309; --amber-bg:rgba(180,83,9,.08);
  --font:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --display:'DM Sans','IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;

  /* flat: no rounding, no soft shadow — a 1px outline gives the same
     separation the shadow did, matching the rest of the site */
  --radius:0; --radius-s:0; --radius-pill:0;
  --shadow-card:0 0 0 1px var(--border-2);
  --shadow-hover:0 0 0 1px var(--ink);
  --hairline:rgba(18,21,26,.12);
}

/* the redesign never renders a dark meter; the page is light only, so the
   inherited dark-theme block is neutralised if a stale pt_theme is set */
body.cs-page[data-theme="dark"]{
  --bg-0:#E9EBE8; --bg-1:#FFFFFF; --bg-2:#F3F4F2; --bg-3:#DDE1DD;
  --border:#C7CCC7; --border-2:#A9AFA9; --text:#12151A; --text-dim:#454B52;
  --text-faint:#767D84; --accent:#1F5FE0;
}

/* the page sits under the shared sticky header; give the hero a little air */
body.cs-page .dk-hero{padding-top:32px}

/* redesign.css sets a global svg{width:100%} for the chart/plate SVGs; that
   blows up the small inline Instagram icon (width="22") to full width. Pin it
   back. The chart SVGs carry their own width attr and are unaffected. */
body.cs-page .cs-follow-link svg{width:22px;height:22px;flex:none}
body.cs-page .cs-follow-link{display:inline-flex;align-items:center;gap:10px}