/* ==========================================================================
   SiteRISE "Fold" restyle, mockup build.
   Shared tokens and components. Inlined into every mockup page by build.py.
   ========================================================================== */

/* ---- Tokens: light (default) ------------------------------------------- */
:root {
  color-scheme: light;
  /* Brand geometry, measured from the logo. Decorative on light surfaces. */
  --mint: #2FE3C5;
  --sky: #68B1CF;
  --steel: #396A87;
  --ink: #17181F;
  --green: #1F8A70;

  /* Surfaces */
  --bg: #F2F4F7;
  --surface: #FFFFFF;
  --bg-elevated: #E9EDF2;
  --under: var(--bg);              /* colour a card sits on, used by the corner cut */

  /* Text */
  --text: #1B1D25;
  --heading: #17181F;
  --muted: #5B6275;                /* 5.58:1 on --bg, 6.09:1 on white */
  --slate: #7A8298;                /* rules and icons only, never body text */

  /* Lines */
  --border: #DFE4EB;
  --border-strong: #C9CFD9;

  /* Accent. --teal keeps its old job (non-text accents and borders),
     --teal-dark and --deep carry anything with words on it. */
  --teal: #12A68B;                 /* 3.0:1 on white, non-text only */
  --teal-dark: #0B7A68;            /* 5.25:1 on white, links and accent text */
  --deep: #0B7A68;
  --deep-2: #08594C;
  --accent-fill: #17181F;          /* primary button: ink */
  --accent-fill-2: #2A2D38;        /* primary hover */
  --on-accent: #FFFFFF;
  --focus: #0B7A68;

  /* Status (binary, reserved) */
  --yes-bg: #E3F4EE;  --yes-fg: #176B57;   /* 5.64:1 */
  --no-bg: #FDECEA;   --no-fg: #B42318;    /* 5.75:1 */
  --neutral-bg: #EDF0F4; --neutral-fg: #505768;
  --warn: #8A6100; --warn-bg: rgba(138,97,0,.10); --warn-line: #B08300; --on-warn: #FFFFFF;
  --danger-fill: #C0392B; --on-danger: #FFFFFF;
  --count-bg: #C0392B; --count-fg: #FFFFFF; /* owner's rule: white on red in both themes */

  /* Chrome */
  --side-bg: #17181F;
  --side-text: #E6E8EF;
  --side-muted: #9AA3B5;           /* 6.98:1 on --side-bg */
  --side-line: rgba(255,255,255,.08);
  --side-hover: rgba(255,255,255,.05);
  --topbar-bg: rgba(242,244,247,.86);

  /* Charts, validated with the dataviz palette checks */
  --chart-fb: #2270A8;             /* slot 1, Facebook */
  --chart-ig: #11A488;             /* slot 2, Instagram */
  --chart-accent: #11A488;         /* single series and highlighted row */
  --chart-rest: #B4BCC8;           /* every other row, report style */
  --chart-prev: #8C93A5;           /* previous window, dashed */
  --chart-axis: #C9CDD6;
  --chart-grid: #EEF1F5;
  --chart-area: rgba(17,164,136,.12);

  /* Geometry */
  --cut: 14px;                     /* card corner cut, 45 degrees */
  --cut-sm: 7px;                   /* buttons and inputs */
  --radius: 0px;                   /* the Fold has no rounded corners; kept so old var() uses stay valid */
  --shadow: 0 1px 2px rgba(23,24,31,.04), 0 6px 18px -8px rgba(23,24,31,.10);
  --pattern-ink: rgba(57,106,135,.10);

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ---- Tokens: dark ------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14161C; --surface: #1D2029; --bg-elevated: #262A35; --under: var(--bg);
    --text: #E9ECF2; --heading: #FFFFFF; --muted: #A3AABB; --slate: #7D8599;
    --border: #2E3340; --border-strong: #3B4150;
    --teal: #2FE3C5; --teal-dark: #5CEBD3; --deep: #2FE3C5; --deep-2: #7FF0DE;
    --accent-fill: #2FE3C5; --accent-fill-2: #5CEBD3; --on-accent: #17181F; --focus: #2FE3C5;
    --yes-bg: #173A33; --yes-fg: #5EE0B9; --no-bg: #3D2220; --no-fg: #FF8F80;
    --neutral-bg: #262A35; --neutral-fg: #A3AABB;
    --warn: #F0B429; --warn-bg: rgba(240,180,41,.12); --warn-line: #8A6D00; --on-warn: #17181F;
    --danger-fill: #E8695C; --on-danger: #17181F;
    --side-bg: #0F1015; --side-line: rgba(255,255,255,.07); --topbar-bg: rgba(20,22,28,.86);
    --chart-fb: #4C86D6; --chart-ig: #16AD93; --chart-accent: #2FE3C5; --chart-rest: #4A5163;
    --chart-prev: #7D8599; --chart-axis: #3A3F4D; --chart-grid: #252934;
    --chart-area: rgba(47,227,197,.12);
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.6);
    --pattern-ink: rgba(104,177,207,.08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14161C; --surface: #1D2029; --bg-elevated: #262A35; --under: var(--bg);
  --text: #E9ECF2; --heading: #FFFFFF; --muted: #A3AABB; --slate: #7D8599;
  --border: #2E3340; --border-strong: #3B4150;
  --teal: #2FE3C5; --teal-dark: #5CEBD3; --deep: #2FE3C5; --deep-2: #7FF0DE;
  --accent-fill: #2FE3C5; --accent-fill-2: #5CEBD3; --on-accent: #17181F; --focus: #2FE3C5;
  --yes-bg: #173A33; --yes-fg: #5EE0B9; --no-bg: #3D2220; --no-fg: #FF8F80;
  --neutral-bg: #262A35; --neutral-fg: #A3AABB;
  --warn: #F0B429; --warn-bg: rgba(240,180,41,.12); --warn-line: #8A6D00; --on-warn: #17181F;
  --danger-fill: #E8695C; --on-danger: #17181F;
  --side-bg: #0F1015; --side-line: rgba(255,255,255,.07); --topbar-bg: rgba(20,22,28,.86);
  --chart-fb: #4C86D6; --chart-ig: #16AD93; --chart-accent: #2FE3C5; --chart-rest: #4A5163;
  --chart-prev: #7D8599; --chart-axis: #3A3F4D; --chart-grid: #252934;
  --chart-area: rgba(47,227,197,.12);
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.6);
  --pattern-ink: rgba(104,177,207,.08);
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-stretch: 112%;
  color: var(--heading);
  letter-spacing: -0.01em;
  line-height: 1.12;
}
a { color: var(--deep); text-decoration: none; }
a:hover { color: var(--deep-2); text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---- App grid ----------------------------------------------------------- */
.app {
  display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(90deg, var(--side-bg) 256px, transparent 256px);
}

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  background-color: var(--side-bg);
  color: var(--side-text);
  display: flex; flex-direction: column;
  padding: 0 0 12px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent;
  isolation: isolate;
}
/* The logo's 45 degree fold as a quiet lattice, strongest at the top. */
.sidebar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 340px; z-index: -1;
  background-image:
    linear-gradient(45deg, transparent 48.5%, rgba(255,255,255,.055) 48.5% 51.5%, transparent 51.5%),
    linear-gradient(-45deg, transparent 48.5%, rgba(255,255,255,.032) 48.5% 51.5%, transparent 51.5%);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
}
.brandrow { display: flex; align-items: center; gap: 8px; padding: 22px 18px 18px 20px; }
.brandrow .brand { display: block; flex: 1; min-width: 0; }
.brandrow .brand img { width: 158px; height: auto; }
.side-close { display: none; }
.side-close svg { width: 22px; height: 22px; }

.nav { padding: 0 12px; }
.nav .group, .nav-acc-sum {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-stretch: 115%;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--side-muted);
  padding: 16px 10px 6px;
}
.nav .group::before, .nav-acc-sum::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: linear-gradient(135deg, var(--mint) 50%, var(--steel) 50%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: .9;
}
.nav-acc > summary { list-style: none; cursor: pointer; border-radius: 0; }
.nav-acc > summary::-webkit-details-marker { display: none; }
.nav-acc > summary:hover { color: var(--side-text); }
.nav-acc-ch { width: 13px; height: 13px; margin-left: auto; transition: transform .18s ease; opacity: .7; }
.nav-acc:not([open]) .nav-acc-ch { transform: rotate(-90deg); }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  min-height: 38px; padding: 7px 10px; margin: 1px 0;
  color: var(--side-text); font-size: 13.5px; font-weight: 500;
  border-radius: 0;
  text-decoration: none;
}
/* Hover and focus rows take the same 45 degree cut on their right end as the
   active ribbon, so no row is ever a rounded pill. */
.nav-item:hover { background: var(--side-hover); color: #fff; text-decoration: none; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.nav-item svg { width: 17px; height: 17px; flex: none; color: var(--side-muted); }
.nav-item:hover svg { color: var(--side-text); }

/* The folded ribbon. The active row is a band that runs off the sidebar's
   left edge and is cut at 45 degrees on its right end. Its left end folds:
   a mint edge with a steel triangle tucked under it, the same fold as the
   logo's upper arm meeting the lower one. No extra markup needed. */
.nav-item.active {
  margin-left: -12px; padding-left: 22px; border-radius: 0;
  color: #FFFFFF; font-weight: 600;
  background: linear-gradient(90deg, rgba(47,227,197,.26), rgba(47,227,197,.09) 70%, rgba(47,227,197,.04));
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--mint);
}
.nav-item.active::after {
  content: ""; position: absolute; left: 4px; bottom: 0; width: 10px; height: 10px;
  background: var(--steel); clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.nav-item.active:hover { background: linear-gradient(90deg, rgba(47,227,197,.3), rgba(47,227,197,.1) 70%, rgba(47,227,197,.05)); }
.nav-item.active svg { color: var(--mint); }

.nav-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px; margin-left: auto;
  background: var(--count-bg); color: var(--count-fg);
  font-size: 11px; font-weight: 700; line-height: 1;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  font-variant-numeric: tabular-nums;
}
.nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px;
  background: var(--mint); color: var(--ink);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.nav-off {
  margin-left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 6px; background: rgba(240,180,41,.18); color: #F4C45A;
}

/* Client header: the client this sidebar is about, as a folded card. */
.client-header {
  position: relative; margin: 8px 12px 4px; padding: 13px 14px 12px 16px;
  background: linear-gradient(135deg, rgba(104,177,207,.16), rgba(57,106,135,.10));
  border-left: 3px solid var(--sky);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.client-header::after {
  content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px;
  background: var(--mint); clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.client-header-name { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 14px; color: #fff; line-height: 1.25; }
.client-header-domain { font-size: 12px; color: var(--side-muted); margin-top: 2px; }

.account-block {
  margin-top: auto; padding: 14px 20px 6px; border-top: 1px solid var(--side-line);
  font-size: 12px; color: var(--side-muted);
}
.account-block a { color: var(--mint); font-weight: 600; }

/* ---- Main + top bar ----------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 32px;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbtn, .mobile-mark { display: none; }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs .sep { width: 8px; height: 8px; flex: none; background: var(--border-strong); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.client-switch {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 6px 12px 6px 6px; color: var(--heading); font-weight: 600; font-size: 14px;
  background: var(--surface); border: 1px solid var(--border);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
  white-space: nowrap; min-width: 0;
}
.client-switch:hover { border-color: var(--border-strong); }
.client-switch .name { overflow: hidden; text-overflow: ellipsis; }
.client-switch > svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.monogram {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 11.5px; color: #fff;
  background: linear-gradient(135deg, var(--steel) 0 50%, #2D5770 50% 100%);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.topbar-spacer { flex: 1; }
/* Demo mode link (Mike, 29 Sep 2026): sits beside the light/dark button,
   same height and cut corner, mint edge so it is easy to find before a call. */
.demo-link {
  height: 44px; flex: none; display: inline-flex; align-items: center;
  padding: 0 14px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--heading); background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--mint);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
}
.demo-link:hover { border-color: var(--border-strong); border-left-color: var(--mint); }
.demo-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
@media (max-width: 520px) { .demo-link { padding: 0 10px; font-size: 12px; } }
.iconbtn {
  position: relative; width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; color: var(--text);
  border: 1px solid var(--border); background: var(--surface);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
}
.iconbtn:hover { border-color: var(--border-strong); color: var(--heading); }
.iconbtn:focus-visible { outline-offset: -4px; }
.iconbtn svg { width: 19px; height: 19px; }
.iconbtn .count {
  position: absolute; top: 5px; right: 6px;
  min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; background: var(--count-bg); color: var(--count-fg);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: block; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-dark { display: block; }
  :root:not([data-theme="light"]) .theme-icon-light { display: none; }
}
.account {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px 4px 4px;
  border: 1px solid var(--border); background: var(--surface);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
}
.account:hover { border-color: var(--border-strong); }
.avatar {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 12px; color: var(--ink);
  background:
    linear-gradient(135deg, var(--mint) 0 55%, var(--sky) 55% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.account .who { line-height: 1.2; text-align: left; }
.account .who b { display: block; font-size: 13px; font-weight: 600; color: var(--heading); }
.account .who span { font-size: 11.5px; color: var(--muted); }

/* ---- Content ------------------------------------------------------------ */
.content { width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 32px 56px; }

/* Page head with the report-cover corner. */
.page-head {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 28px 30px 26px; margin-bottom: 26px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.page-head::after { /* bottom-left cut, drawn as a hairline */
  content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 22px;
  background: linear-gradient(45deg, transparent calc(50% - .7px), var(--border) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px));
}
.page-head .head-text { position: relative; z-index: 1; max-width: 62ch; }
.page-head::before { /* the fold lattice, fading out from the cover corner */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 62%; pointer-events: none;
  background-image:
    linear-gradient(45deg, transparent calc(50% - .5px), var(--pattern-ink) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(-45deg, transparent calc(50% - .5px), var(--pattern-ink) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 100%);
          mask-image: linear-gradient(to left, #000 10%, transparent 100%);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-stretch: 115%;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.page-head h1 { font-size: 34px; font-weight: 850; margin-top: 10px; font-variation-settings: "wght" 850; }
.rule { width: 45px; height: 4px; margin: 14px 0 12px; background: linear-gradient(90deg, var(--mint), var(--sky)); }
.page-head .sub { color: var(--muted); font-size: 14px; max-width: 60ch; }
.page-head .actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-right: 150px; }
.cover-corner { position: absolute; top: 0; right: 0; height: 100%; width: auto; pointer-events: none; }
.cover-corner .c-ink { fill: var(--ink); }
:root[data-theme="dark"] .cover-corner .c-ink { fill: #0B0C10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cover-corner .c-ink { fill: #0B0C10; } }

/* Section header: a faceted mark, the heading, and a hairline that ends in
   a 45 degree tick. */
.section { margin-top: 34px; }
.section:first-of-type { margin-top: 0; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.facet { width: 22px; height: 18px; flex: none; }
.section-head h2 { font-size: 17px; font-weight: 800; }
.section-head .line { flex: 1; min-width: 40px; height: 1px; background: var(--border); position: relative; }
.section-head .line::after {
  content: ""; position: absolute; right: 0; top: -7px; width: 8px; height: 8px;
  background: var(--border-strong); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.section-head .note { font-size: 12.5px; color: var(--muted); }
.section-lede { color: var(--muted); font-size: 13px; margin: -6px 0 14px; max-width: 80ch; }

/* ---- Cards -------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  padding: 20px; box-shadow: var(--shadow);
  min-width: 0;
}
/* Top-right 45 degree cut, drawn with the colour underneath plus a hairline,
   so the border stays continuous without clip-path eating it. */
.card::before {
  content: ""; position: absolute; top: -1px; right: -1px; width: var(--cut); height: var(--cut);
  background: linear-gradient(225deg, var(--under) calc(50% - .6px), var(--border) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px));
  pointer-events: none;
}
.card.fold::before {
  width: 18px; height: 18px;
  background: linear-gradient(225deg, var(--under) 50%, transparent 50%);
}
.card.fold::after { /* the logo fold: the cut corner turned down in mint */
  content: ""; position: absolute; top: -1px; right: -1px; width: 18px; height: 18px;
  background: linear-gradient(225deg, transparent 50%, var(--mint) 50%);
  pointer-events: none;
}
.card h3 { font-size: 14.5px; font-weight: 750; }
.card .card-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Stat tile */
.stat .label { font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.stat .value {
  font-family: var(--font-display); font-stretch: 108%; font-weight: 750; 
  font-size: 34px; line-height: 1.05; color: var(--heading); margin-top: 10px; letter-spacing: -0.02em;
}
.stat .meta { margin-top: 8px; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Delta: arrow + signed value, in the reserved status pair. */
.delta {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: 12.5px; padding: 3px 9px 3px 8px; white-space: nowrap;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  font-variant-numeric: tabular-nums;
}
.delta svg { width: 9px; height: 9px; }
.delta.up { background: var(--yes-bg); color: var(--yes-fg); }
.delta.down { background: var(--no-bg); color: var(--no-fg); }
.delta.flat { background: var(--neutral-bg); color: var(--neutral-fg); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 18px;
  font-weight: 600; font-size: 13.5px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-fill-2); color: var(--on-accent); }
.btn-primary::after { /* mint chip in the cut corner, the brand's accent in the button's own geometry */
  content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px;
  background: var(--mint); clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform: translate(3px, 3px); transition: transform .18s ease;
}
.btn-primary:hover::after { transform: translate(0, 0); }
:root[data-theme="dark"] .btn-primary::after { background: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary::after { background: var(--ink); } }
.btn-primary:focus-visible { outline-color: var(--mint); }
:root[data-theme="dark"] .btn-primary:focus-visible { outline-color: var(--ink); }
.btn-tonal { background: var(--bg-elevated); color: var(--heading); }
.btn-tonal:hover { background: var(--border); color: var(--heading); }
.btn-ghost { background: transparent; color: var(--heading); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-ghost:hover { background: var(--bg-elevated); color: var(--heading); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }
.btn-link { color: var(--deep); font-weight: 600; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---- Pills and chips ---------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  background: var(--neutral-bg); color: var(--neutral-fg);
}
.pill.yes, .pill.connected, .pill.published { background: var(--yes-bg); color: var(--yes-fg); }
.pill.no, .pill.failed, .pill.high { background: var(--no-bg); color: var(--no-fg); }
.pill.pending, .pill.med { background: var(--warn-bg); color: var(--warn); }
.pill.info { background: rgba(57,106,135,.12); color: #2F5A73; }
:root[data-theme="dark"] .pill.info { background: rgba(104,177,207,.14); color: #9FD0E6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.info { background: rgba(104,177,207,.14); color: #9FD0E6; } }
.pill .dot { width: 7px; height: 7px; flex: none; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Segmented control: the period pills. */
.seg {
  display: inline-flex; align-items: stretch; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  padding: 3px; gap: 2px;
}
.seg button, .seg a {
  position: relative; min-height: 38px; padding: 8px 16px;
  font-weight: 600; font-size: 13px; color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.seg button:hover, .seg a:hover { color: var(--heading); background: var(--bg-elevated); text-decoration: none; }
.seg .on, .seg [aria-pressed="true"] {
  background: var(--accent-fill); color: var(--on-accent);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.seg .on:hover, .seg [aria-pressed="true"]:hover { background: var(--accent-fill); color: var(--on-accent); }
.seg button:focus-visible { outline-offset: -3px; }

/* Tables */
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptable th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ptable td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable .r { text-align: right; font-variant-numeric: tabular-nums; }

/* Table-view twin under a chart */
.tableview { margin-top: 12px; }
.tableview > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-size: 12.5px; font-weight: 600; color: var(--deep);
}
.tableview > summary::-webkit-details-marker { display: none; }
.tableview > summary::before { content: ""; width: 8px; height: 8px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .15s; }
.tableview[open] > summary::before { transform: rotate(90deg); }
.tableview .tv-wrap { overflow-x: auto; }

/* Chart tooltip */
.tip {
  position: fixed; z-index: 90; pointer-events: none; min-width: 150px;
  background: var(--ink); color: #fff; padding: 10px 12px 9px;
  font-size: 12px; line-height: 1.45; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
:root[data-theme="dark"] .tip { background: #2A2E3A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tip { background: #2A2E3A; } }
.tip.show { opacity: 1; transform: none; }
.tip .t-h { color: #B9C0CE; font-size: 11px; margin-bottom: 4px; }
.tip .t-row { display: flex; align-items: center; gap: 8px; }
.tip .t-row b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tip .t-row i { width: 12px; height: 0; border-top: 2px solid; flex: none; }
.tip .t-row i.dash { border-top-style: dashed; }
.tip .t-row span { color: #C9CFDA; }

/* Legend */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend .sw { width: 11px; height: 11px; flex: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 70%); }
.legend .ln { width: 16px; height: 0; border-top: 2px solid; }
.legend .ln.dash { border-top-style: dashed; }

/* Footer note */
.sample-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.sample-note::before { content: ""; width: 10px; height: 10px; margin-top: 3px; flex: none; background: linear-gradient(135deg, var(--mint) 50%, var(--sky) 50%); }

/* Mobile drawer backdrop */
.nav-backdrop { display: none; }

/* ---- Motion ------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.reveal:nth-child(2) { animation-delay: .05s; }
.reveal:nth-child(3) { animation-delay: .1s; }
.reveal:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account .who { display: none; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 80;
    transform: translateX(-102%); transition: transform .22s ease;
  }
  .nav-open .sidebar { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.35); }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(10,11,15,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .side-close { display: grid; place-items: center; width: 44px; height: 44px; color: var(--side-text); flex: none; }
  .nav-item { min-height: 44px; }
  .nav-acc-sum { min-height: 44px; padding-top: 12px; padding-bottom: 8px; }
  .btn, .btn-sm { min-height: 44px; }
  .seg button, .seg a { min-height: 44px; }
  .account-block a { display: inline-flex; align-items: center; min-height: 44px; }
  .brandrow .brand { min-height: 44px; display: flex; align-items: center; }
  .topbar { padding: 8px 16px; gap: 8px; min-height: 60px; }
  .navbtn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--heading); }
  .navbtn svg { width: 22px; height: 22px; }
  .mobile-mark { display: block; width: 26px; height: auto; flex: none; }
  .crumbs .crumb-trail { display: none; }
  .client-switch { padding-right: 10px; }
  .content { padding: 16px 16px 40px; }
  .page-head { padding: 22px 18px 20px; }
  .page-head h1 { font-size: 26px; }
  .page-head .actions { margin-right: 0; width: 100%; }
  .cover-corner { height: 96px; }
  .page-head h1 { padding-right: 52px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid-4 > .card { padding: 16px; }
  .grid-4 > .card.wide-sm { grid-column: 1 / -1; }
  .client-switch .monogram { display: none; }
  .client-switch { padding-left: 12px; max-width: 150px; }
  .topbar .account { display: none; }
  .stat .value { font-size: 30px; }
  .seg { width: 100%; }
  .seg button, .seg a { flex: 1 1 auto; justify-content: center; padding: 8px 10px; min-height: 44px; }
}

/* ---- Chart pieces -------------------------------------------------------- */
.hbars { display: grid; gap: 9px; }
.hb-row { display: grid; grid-template-columns: minmax(84px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; }
.hb-label { text-align: right; font-size: 12.5px; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.hb-label small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.hb-track { display: flex; align-items: center; min-height: 28px; border-left: 1px solid var(--chart-axis); }
.hb-bar {
  height: 20px; width: calc((100% - 64px) * var(--f, 0)); min-width: 2px;
  background: var(--chart-rest); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
  transition: filter .15s ease;
  transform-origin: left center; animation: grow .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hb-row.hl .hb-bar { background: var(--chart-accent); }
.hb-row.hl .hb-label { font-weight: 600; color: var(--heading); }
.hb-bar:hover, .hb-bar:focus-visible { filter: brightness(1.08) saturate(1.05); outline-offset: 2px; }
.hb-val { margin-left: 8px; font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--heading); white-space: nowrap; }
.linechart { display: block; overflow: visible; }
.linechart:focus-visible { outline-offset: 4px; }
.linechart .tick { font: 500 10.5px var(--font-body); fill: var(--muted); font-variant-numeric: tabular-nums; }
.linechart .dlabel { font: 600 11.5px var(--font-body); fill: var(--heading); font-variant-numeric: tabular-nums; }
.ring-total { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 34px; fill: var(--heading); }
.ring-cap { font: 500 11.5px var(--font-body); fill: var(--muted); }
.ring-seg { cursor: default; transition: filter .15s; }
.ring-seg:hover, .ring-seg:focus-visible { filter: brightness(1.1); outline: none; }


.an-head .actions { align-self: flex-start; margin-top: 4px; }
.health {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 14px 6px 10px;
  font-size: 12.5px; font-weight: 600; color: var(--heading); background: var(--yes-bg);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.health .ok { width: 20px; height: 20px; display: grid; place-items: center; background: var(--yes-fg); color: var(--surface);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.health .ok svg { width: 13px; height: 13px; }

/* Filter row: period first, then the window it resolves to. */
.filters { position: relative; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin: -4px 0 28px; }
.filters .flabel { font-family: var(--font-display); font-stretch: 115%; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.filters .when { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.filters .when b { color: var(--heading); font-weight: 600; }
.filters .fresh { display: inline-flex; align-items: center; gap: 6px; }
.filters .fresh::before { content: ""; width: 7px; height: 7px; background: var(--chart-accent); transform: rotate(45deg); }
.seg .cust svg { width: 14px; height: 14px; }
.pop {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 50px -18px rgba(23,24,31,.35);
  padding: 18px; --under: var(--bg);
}
.pop[hidden] { display: none; }
.pop::before { content: ""; position: absolute; top: -1px; right: -1px; width: 16px; height: 16px;
  background: linear-gradient(225deg, var(--bg) calc(50% - .6px), var(--border) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)); }
.pop h3 { font-size: 14px; }
.pop .hint { font-size: 12px; color: var(--muted); margin: 4px 0 14px; }
.pop .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pop label { display: block; font-size: 12px; font-weight: 600; color: var(--heading); }
.pop input[type=date] {
  width: 100%; margin-top: 5px; min-height: 44px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
}
.pop input[type=date]:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; background: var(--surface); }
.pop .acts { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Followers */
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .92fr); gap: 16px; }
.fcard { display: flex; flex-direction: column; }
.fcard .flow { margin-top: auto; padding-top: 18px; }
.fcard .plab { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--heading); }
.pmark { width: 22px; height: 22px; flex: none; }
.fcard .growth { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.fcard .pct {
  font-family: var(--font-display); font-stretch: 106%; font-weight: 800; font-size: 54px; line-height: .95; letter-spacing: -0.03em;
  display: inline-flex; align-items: flex-start; gap: 8px;
}
.fcard .pct svg { width: 16px; height: 16px; margin-top: 10px; }
.fcard .pct.up { color: var(--yes-fg); }
.fcard .pct.down { color: var(--no-fg); }
.fcard .gcap { font-size: 12px; color: var(--muted); line-height: 1.35; padding-bottom: 5px; }
.fcard .count { margin-top: 14px; font-size: 13px; color: var(--muted); }
.fcard .count b { font-family: var(--font-display); font-stretch: 108%; font-weight: 750; font-size: 22px; color: var(--heading); margin-right: 6px; }
.fstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--border); }
.fstats div { padding: 12px 0 0; }
.fstats div + div { padding-left: 14px; border-left: 1px solid var(--border); }
.fstats dt { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; min-height: 18px; }
.fstats dd { font-family: var(--font-display); font-stretch: 106%; font-weight: 750; font-size: 20px; color: var(--heading); margin-top: 2px; }
.fstats dd .derived { margin-left: 7px; vertical-align: 4px; font-family: var(--font-body); }
.derived { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
/* Flow bar: unfollows to the left of the axis, follows to the right. */
.flow { margin-top: 16px; }
@media (max-width: 900px) { .fcard .flow { margin-top: 0; } }
.flow .fl-track { position: relative; height: 14px; display: grid; grid-template-columns: 1fr 1fr; }
.flow .fl-l { display: flex; justify-content: flex-end; border-right: 1px solid var(--chart-axis); }
.flow .fl-r { display: flex; }
.flow .fl-l i { height: 14px; background: var(--chart-rest); clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px); }
.flow .fl-r i { height: 14px; background: var(--chart-accent); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); }
.flow .fl-cap { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.flow .fl-cap span:first-child { text-align: right; padding-right: 8px; }
.flow .fl-cap span:last-child { padding-left: 8px; }

.ringcard { display: flex; flex-direction: column; }
.ringwrap { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.ringwrap .rl { display: grid; gap: 12px; min-width: 140px; flex: 1; }
.rl .rrow { display: grid; grid-template-columns: 12px 1fr auto; gap: 4px 10px; align-items: center; font-size: 13px; }
.rl .rrow .sw { width: 12px; height: 12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 70%); }
.rl .rrow b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--heading); }
.rl .rrow small { grid-column: 2 / 4; font-size: 11.5px; color: var(--muted); margin-top: -4px; }

/* Drop preview */
.dropcard { margin-top: 16px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 28px; align-items: center; padding: 16px 20px; }
.dropcard .dnote { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dfacts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 13px; }
.dfacts li { padding: 0 14px; border-left: 1px solid var(--border-strong); }
.dfacts li:first-child { border-left: 0; padding-left: 0; }
.dfacts span { color: var(--muted); }
.dfacts b { color: var(--heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.dropcard .tag { font-family: var(--font-display); font-stretch: 115%; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dropcard .dp { font-family: var(--font-display); font-stretch: 106%; font-weight: 800; font-size: 32px; color: var(--no-fg); display: inline-flex; gap: 6px; align-items: flex-start; line-height: 1; }
.dropcard .dp svg { width: 12px; height: 12px; margin-top: 6px; }

/* Line chart card */
.chart-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bigdelta { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.bigdelta .v { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 30px; color: var(--heading); }
.chartbox { position: relative; min-height: 250px; transition: opacity .2s; }
.chartbox.loading { opacity: .45; }

/* Results */
.rtile .label { justify-content: space-between; }
.rtile .prev { font-size: 12px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.mults { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 18px; }
.mult h4 { font-size: 12.5px; font-weight: 600; color: var(--heading); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.mult h4 span { font-weight: 500; color: var(--muted); }
.mult .hb-row { grid-template-columns: 88px minmax(0, 1fr); }
.mult .hbars { gap: 6px; }

.empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.empty-state .glyph { width: 46px; height: 46px; }
.empty-state p { color: var(--muted); font-size: 13px; margin-top: 3px; max-width: 70ch; }

@media (max-width: 1180px) {
  .fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fgrid .ringcard { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .an-head .actions { align-self: auto; }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .mults { grid-template-columns: minmax(0, 1fr); }
  .dropcard { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .empty-state { grid-template-columns: minmax(0, 1fr); }
  .dfacts li, .dfacts li:first-child { border-left: 0; padding: 0 16px 0 0; }
}
@media (max-width: 560px) {
  .fcard .pct { font-size: 46px; }
  .filters .when { width: 100%; }
  .pop { left: 0; right: 0; width: auto; }
}

/* ==========================================================================
   Social analytics, Fold pass. Everything new is scoped under .sa-root.
   ========================================================================== */
.sa-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Cut corners clip outlines, so focus is an inset ring everywhere. */
.sa-root :is(button, a, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.sa-root svg.linechart:focus-visible, .sa-root .ring-seg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Header */
.sa-root .an-head .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sa-root .btn svg { width: 16px; height: 16px; }
.sa-root .btn { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--font-body); cursor: pointer; }
.sa-root .btn[disabled] { opacity: .6; cursor: progress; }

/* Not connected banner */
.sa-banner { margin: 0 0 22px; padding: 14px 18px; background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); color: var(--text); font-size: 13px; line-height: 1.5;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.sa-banner b { color: var(--warn); }

/* Period bar */
.sa-root .seg-wrap { position: relative; max-width: 100%; }
.sa-root .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.sa-root .seg button { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 13px var(--font-body); }
.sa-root .pop { left: auto; right: 0; }
.sa-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sa-chip { min-height: 36px; padding: 6px 12px; border: 0; background: var(--bg-elevated); color: var(--heading); font: 600 12.5px var(--font-body); cursor: pointer;
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)); }
.sa-chip:hover { background: var(--border); }
.sa-err { margin-top: 10px; font-size: 12px; color: var(--warn); }
.sa-limits { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.sa-root .filters .fresh.is-pending::before { background: var(--slate); animation: sa-pulse 1.2s ease-in-out infinite; }
.sa-pending { display: flex; align-items: center; gap: 12px; margin: -12px 0 22px; padding: 12px 16px; font-size: 13px; color: var(--text); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.sa-pending[hidden] { display: none; }
.sa-pending .facet { width: 22px; height: 18px; flex: none; animation: sa-pulse 1.4s ease-in-out infinite; }

/* Skeleton */
.sa-skel { display: block; max-width: 100%; background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--border) 50%, var(--bg-elevated) 100%); background-size: 200% 100%; animation: sa-shimmer 1.6s linear infinite; }
.sa-skrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
@keyframes sa-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes sa-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sa-skel, .sa-pending .facet, .sa-root .filters .fresh.is-pending::before { animation: none; } }

/* Followers */
.sa-root .fcard .pct.flat { color: var(--neutral-fg); }
.sa-root .fcard .pct.flat::before { content: ""; width: 14px; height: 4px; margin-top: 24px; background: currentColor; }
.sa-root .fcard .gcap { font-variant-numeric: tabular-nums; }
.sa-root .fstats dd { font-variant-numeric: tabular-nums; }
.sa-derived { position: relative; cursor: help; border: 0; background: transparent; font-family: var(--font-body); }
.sa-derived::after { content: ""; position: absolute; inset: -12px -6px; }
.sa-tipbox { margin-top: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text); background: var(--bg-elevated);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.sa-tipbox[hidden] { display: none; }
.sa-since { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-strong); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sa-hist { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding: 12px 14px; background: var(--bg-elevated); color: var(--heading); font-size: 13.5px; font-weight: 600;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.sa-hist .facet { width: 22px; height: 18px; flex: none; }
.sa-nr { font-family: var(--font-display); font-stretch: 108%; font-weight: 750; font-size: 26px; color: var(--muted); line-height: 1.1; }
.sa-nr-s { font-size: 13px !important; color: var(--muted) !important; font-family: var(--font-body) !important; font-weight: 600 !important; }
.sa-pair { display: inline-flex; gap: 4px; }
.sa-sum { margin-top: 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sa-sum b { color: var(--heading); font-weight: 700; }
.sa-ringhead { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.sa-ringrow { display: flex; align-items: center; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.sa-ringrow .rl { display: grid; gap: 12px; min-width: 140px; flex: 1; }
.sa-ring { width: 148px; height: 148px; flex: none; }
.sa-root .ring-cap { font: 500 11px var(--font-body); fill: var(--muted); }
.sa-root .ring-total { font-size: 30px; }
.sa-growth { margin-top: 16px; }
.sa-root .chartbox { min-height: 0; margin-top: 8px; }
.sa-legend { margin-top: 10px; }
.sa-legend b { color: var(--heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-legend .ln { display: inline-block; width: 18px; border-top: 2px solid; }
.sa-legend .ln.dash { border-top-style: dashed; }
.sa-read { margin-top: 8px; font-size: 12px; color: var(--muted); max-width: 80ch; }

/* What went out */
.sa-cadence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sa-stat-sub { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Results */
.sa-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sa-metric { display: flex; flex-direction: column; }
.sa-mhead { display: flex; align-items: center; gap: 2px; min-height: 36px; }
.sa-mhead .sa-sp { flex: 1; }
.sa-info { position: relative; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 700 11px var(--font-body); }
.sa-info span { width: 18px; height: 18px; display: grid; place-items: center; background: var(--bg-elevated); line-height: 1;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.sa-info:hover span, .sa-info[aria-expanded=true] span { background: var(--border); color: var(--heading); }
.sa-export { position: relative; }
.sa-exbtn { font-size: 12.5px !important; }
.sa-exbtn svg { width: 14px !important; height: 14px !important; }
.sa-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 18px 50px -18px rgba(23,24,31,.35); }
.sa-menu[hidden] { display: none; }
.sa-menu [role=menuitem] { display: block; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; background: transparent; text-align: left; font: 500 13px var(--font-body); color: var(--heading); cursor: pointer; }
.sa-menu [role=menuitem]:hover { background: var(--bg-elevated); }
.sa-src { margin-top: 4px; font-size: 12px; color: var(--muted); }
.sa-big { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.sa-big .value { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -0.02em; color: var(--heading); font-variant-numeric: tabular-nums; }
.sa-root .delta.up { background: var(--yes-bg); color: var(--yes-fg); }
.sa-root .delta.dn, .sa-root .delta.flat { background: var(--neutral-bg); color: var(--neutral-fg); }
.sa-nochip { font-size: 12px; color: var(--muted); padding: 3px 9px; box-shadow: inset 0 0 0 1px var(--border-strong); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.sa-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.sa-bars { display: grid; gap: 8px; margin-top: 16px; }
.sa-bar-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: center; }
.sa-bar-row .lab { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sa-bar-track { display: flex; align-items: center; gap: 8px; min-height: 22px; border-left: 1px solid var(--chart-axis); }
.sa-bar { display: block; height: 16px; background: var(--chart-rest); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); }
.sa-bar-row.cur .sa-bar { background: var(--chart-accent); }
.sa-bar-val { font: 600 12.5px var(--font-body); color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-chart { margin-top: 16px; }
.sa-noline { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }

@media (max-width: 1180px) { .sa-cadence { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sa-results-grid { grid-template-columns: minmax(0, 1fr); }
  .sa-info { width: 44px; height: 44px; }
  .sa-chip { min-height: 44px; }
  .sa-root .seg button { min-height: 44px; }
  .sa-root .tableview > summary { min-height: 44px; }
}
@media (max-width: 560px) {
  .sa-root .filters { gap: 10px; }
  .sa-root .seg-wrap { width: 100%; }
  .sa-root .pop { left: auto; right: 0; width: min(340px, calc(100vw - 32px)); }
  .sa-bar-row { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
  .sa-big .value { font-size: 34px; }
  .sa-cadence { gap: 10px; }
  .sa-cadence .stat .value { font-size: 28px; }
}

/* States board */
.sa-board-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sa-back { font-size: 13px; font-weight: 600; color: var(--deep); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.sa-back:hover { color: var(--deep-2); }
.sa-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; margin-top: 30px; }
.sa-state.wide { grid-column: 1 / -1; }
.sa-state-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.sa-state-n { font-family: var(--font-display); font-stretch: 115%; font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--on-accent); background: var(--accent-fill); padding: 4px 10px 4px 9px;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.sa-state-head h2 { font-size: 17px; font-weight: 800; }
.sa-state-head p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.sa-state-pair { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.sa-mini { margin: 0 0 22px; }
.sa-mini .seg button { pointer-events: none; }
@media (max-width: 900px) { .sa-board, .sa-state-pair { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Type system. One display face at one width, one body face. This block wins
   over everything above it.
   Display, Archivo SemiExpanded (wdth 112): anything that names a place or a
   thing — page title, section titles, card titles, nav groups and nav items,
   kickers — and every headline figure.
   Body, Inter: sentences, notes, table cells, chart ticks, chips, buttons.
   ========================================================================== */
:root { --display-stretch: 112%; }
/* T1 page title */
.page-head h1 { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 34px; font-weight: 850; line-height: 1.1; letter-spacing: -0.015em; color: var(--heading); }
/* T2 section title */
.section-head h2, .sa-state-head h2 { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--heading); }
/* T3 card title: every card names itself the same way */
.card h3, .fcard .plab, .stat .label, .sa-mhead h3, .pop h3, .empty-state h3 {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 14.5px; font-weight: 750; line-height: 1.25; letter-spacing: -0.005em; color: var(--heading); }
/* Caps label: kickers, nav groups, field labels, tags */
.eyebrow, .nav .group, .nav-acc-sum, .filters .flabel, .dropcard .tag, .sa-state-n, .sa-kicker {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* Nav items: the subtopics under each nav group */
.sidebar .nav-item, .client-header-name { font-family: var(--font-display); font-stretch: var(--display-stretch); letter-spacing: 0; }
.sidebar .nav-item { font-size: 13.5px; font-weight: 560; }
.sidebar .nav-item.active { font-weight: 700; }
/* Figures */
.fcard .pct, .stat .value, .fcard .count b, .fstats dd, .ring-total, .sa-big .value, .bigdelta .v, .dropcard .dp, .sa-nr, .monogram, .avatar {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-variant-numeric: tabular-nums; }
.fcard .pct, .sa-big .value, .stat .value, .ring-total, .bigdelta .v { font-weight: 800; }
.fstats dd, .fcard .count b, .sa-nr { font-weight: 750; }
/* Body */
.section-head .note, .card-sub, .fstats dt, .sa-src, .sa-note, .sa-read, .sa-stat-sub, .gcap, .fcard .count, .sa-since, .sa-sum { font-family: var(--font-body); }

/* ==========================================================================
   Shared: channel strip, subject bar, SEO and site, reports
   ========================================================================== */
.srlogo { display: block; flex: none; }
.srlogo-x, .srlogo-tiktok, .srlogo-threads { color: var(--heading); }
.sa-channels { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; padding: 0; }
.sa-channels li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-size: 12.5px; color: var(--muted);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%); position: relative; z-index: 1; }
.sa-channels b { color: var(--heading); font-weight: 600; }
.sa-channels a { color: var(--deep); font-weight: 600; text-decoration: none; }
.sa-channels a:hover { color: var(--deep-2); text-decoration: underline; }
.sa-ch-state.ok { display: inline-flex; align-items: center; gap: 5px; color: var(--yes-fg); font-weight: 600; }
.sa-ch-state.ok::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }

/* Subject bar: the sideways switch between everything under one nav group */
.sr-subject { position: sticky; top: 64px; z-index: 30; display: flex; gap: 2px; margin: 0 0 22px; padding: 4px; overflow-x: auto; scrollbar-width: none;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.sr-subject a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; white-space: nowrap; text-decoration: none; color: var(--muted);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 13.5px; font-weight: 650; }
.sr-subject a:hover { background: var(--bg-elevated); color: var(--heading); }
.sr-subject a.on { background: var(--accent-fill); color: var(--on-accent); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.sr-subject small { font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 1px 6px; background: var(--bg-elevated); color: var(--muted); }
.sr-subject a.on small { background: rgba(255,255,255,.14); color: inherit; }
[data-theme="dark"] .sr-subject a.on small { background: rgba(23,24,31,.16); }
.sr-subseg { margin: 0 0 16px; }
.sr-subseg a { display: inline-flex; align-items: center; text-decoration: none; }
.sr-panel .section-head { margin-top: 30px; }
.sr-panel > .section-head:first-child, .sr-panel > .sr-hero-logo + .section-head { margin-top: 0; }

.sr-card { display: flex; flex-direction: column; }
.sr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.sr-stack { display: grid; gap: 16px; margin-top: 16px; }
.sr-gap { margin-top: 16px; }
.sr-home { margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--deep); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.sr-home:hover, .sr-xlink:hover { color: var(--deep-2); text-decoration: underline; }
.sr-mhead .sr-home { margin: 0; }
.sa-mhead .sr-home { margin-top: 0; }
.sr-xlink { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--deep); text-decoration: none; min-height: 32px; }

/* Scores */
.sr-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sr-score { display: flex; align-items: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.sr-gauge { width: 128px; height: 128px; flex: none; }
.sr-score-side { display: grid; gap: 10px; min-width: 150px; flex: 1; }
.sr-was { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12px; color: var(--muted); }
.sr-links { display: grid; gap: 2px; }
.sr-links a { font-size: 12.5px; font-weight: 600; color: var(--deep); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.sr-links a:hover { text-decoration: underline; }
.sr-band { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--heading); }
.sr-band i { width: 10px; height: 10px; flex: none; }
.sr-band.good i { background: var(--yes-fg); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.sr-band.mid i { background: var(--med); }
.sr-band.poor i { background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Work */
.sr-wlist { list-style: none; margin-top: 10px; padding: 0; }
.sr-wlist li + li { border-top: 1px solid var(--border); }
.sr-wrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 10px 0; min-height: 44px; text-decoration: none; color: var(--text); font-size: 13px; }
.sr-wrow:hover .sr-wt { color: var(--deep); text-decoration: underline; }
.sr-id { font: 700 11px var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.sr-wt { font-weight: 600; color: var(--heading); }
.sr-when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sr-area { display: inline-flex; align-items: center; font: 600 11px var(--font-body); color: var(--neutral-fg); background: var(--neutral-bg); padding: 2px 8px 2px 7px; margin-right: 8px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.sr-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sr-filter .sa-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.sr-filter .sa-chip span { font-weight: 500; color: var(--muted); }
.sr-filter .sa-chip[aria-current="true"] { background: var(--accent-fill); color: var(--on-accent); }
.sr-filter .sa-chip[aria-current="true"] span { color: inherit; opacity: .75; }
.sr-wbig { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 0; }
.sr-witem { padding: 14px 0; border-top: 1px solid var(--border); scroll-margin-top: 140px; }
.sr-witem:first-child { border-top: 0; }
.sr-witem.is-target { box-shadow: inset 3px 0 0 var(--teal); padding-left: 14px; background: linear-gradient(90deg, var(--yes-bg), transparent 60%); }
.sr-wtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-witem h4 { margin-top: 8px; font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 14px; font-weight: 700; color: var(--heading); }
.sr-witem p { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.sr-status { font: 700 11px var(--font-body); padding: 2px 8px; margin-left: auto; }
.sr-status.in_progress { background: var(--yes-bg); color: var(--yes-fg); }
.sr-status.planned { background: var(--neutral-bg); color: var(--neutral-fg); }
.sr-status.done { color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
.sr-wmeta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12px; }
.sr-wmeta div { display: flex; gap: 5px; }
.sr-wmeta dt { color: var(--muted); }
.sr-wmeta dd { color: var(--heading); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Search, tables */
.sr-table { margin-top: 12px; overflow-x: auto; }
.sr-table .ptable td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.sr-table .ptable td:first-child { color: var(--heading); font-weight: 500; }
.sr-table .ptable a { color: var(--deep); text-decoration: none; }
.sr-table .ptable a:hover { text-decoration: underline; }
.sr-table code { font: 500 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.ptable .r { text-align: right; }
.sr-index { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 10px; }
.sr-of { font-size: 13px; color: var(--muted); }
.sr-split { display: flex; gap: 2px; height: 14px; margin-top: 14px; }
.sr-split i { display: block; background: var(--chart-rest); }
.sr-split i:first-child { background: var(--chart-accent); }
.sr-split i:last-child { clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); }
.sr-split-lg { height: 20px; margin-top: 18px; }
.sr-legend2 { margin-top: 16px; }
.sr-h4 { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 13px; font-weight: 700; color: var(--heading); }
.sr-hbars .sa-bar-row { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); }
.sr-hbars .sa-bar-val small { font-weight: 500; color: var(--muted); margin-left: 4px; }

/* Site health */
.sr-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sr-minicard { display: grid; gap: 6px; padding: 14px 16px; text-decoration: none; color: inherit; }
.sr-minicard .label { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 13px; font-weight: 700; color: var(--heading); }
.sr-minicard .value { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 30px; font-weight: 800; color: var(--heading); line-height: 1; }
.sr-minicard .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sr-minicard:hover { border-color: var(--border-strong); }
.sr-minicard[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--teal), var(--shadow); }
.sr-cwv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.sr-cwv-i + .sr-cwv-i { border-left: 1px solid var(--border); padding-left: 16px; }
.sr-cwv-i .label { display: flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sr-cwv-i .value { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 28px; font-weight: 800; color: var(--heading); margin: 4px 0 6px; }
.sr-issues ul { list-style: none; padding: 0; }
.sr-issues li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); scroll-margin-top: 140px; }
.sr-issues li:first-child { border-top: 0; }
.sr-issues li.is-target { box-shadow: inset 3px 0 0 var(--teal); padding-left: 12px; background: linear-gradient(90deg, var(--yes-bg), transparent 60%); }
.sr-it { display: grid; gap: 4px; }
.sr-it b { font-size: 13.5px; color: var(--heading); font-weight: 600; }
.sr-it span { font-size: 12px; color: var(--muted); display: flex; align-items: center; }
.sr-sev { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--heading); }
.sr-sev i { width: 9px; height: 9px; }
.sr-sev.high i { background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sr-sev.medium i { background: var(--med); }
.sr-sev.low i { background: var(--slate); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.sr-unsched { font-size: 12px; color: var(--muted); }
.sr-issues .sr-xlink { margin-top: 0; }

/* Local */
.sr-hero-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.sr-lag { margin: -4px 0 16px; font-size: 12.5px; color: var(--muted); max-width: 90ch; }
.sr-rev .fstats { margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .sr-scores, .sr-three { grid-template-columns: minmax(0, 1fr); }
  .sr-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sr-two, .sr-index, .sr-cwv { grid-template-columns: minmax(0, 1fr); }
  .sr-cwv-i + .sr-cwv-i { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
  .sr-subject { top: 60px; }
  .sr-subject a { min-height: 44px; }
  .sr-issues li { grid-template-columns: minmax(0, 1fr); }
  .sr-wrow { grid-template-columns: auto minmax(0, 1fr); }
  .sr-wrow .sr-area, .sr-wrow .sr-when { grid-column: 2; }
  .sr-filter .sa-chip { min-height: 44px; }
}

.sa-channels li { white-space: nowrap; }
.sr-band, .delta { white-space: nowrap; }
.sa-mhead h3 { flex: 0 1 auto; min-width: 0; }
.page-head .head-text { max-width: min(62ch, 72%); }
@media (max-width: 900px) { .page-head .head-text { max-width: 100%; } }

/* Reports */
.rp-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.rp-settings { position: sticky; top: 140px; display: grid; gap: 18px; }
.rp-set-block { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.rp-set-block p { font-size: 13px; color: var(--text); }
.rp-set-block .eyebrow { margin-bottom: 4px; }
.rp-check { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; font-size: 13px; color: var(--heading); cursor: pointer; }
.rp-check:not(:has(.srlogo)) { grid-template-columns: 18px minmax(0, 1fr); }
.rp-check input { width: 16px; height: 16px; accent-color: var(--teal); margin: 0; }
.rp-check small { font-size: 11px; color: var(--muted); }
.rp-check small.ok { color: var(--yes-fg); font-weight: 600; }
.rp-actions { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.rp-actions .btn { justify-content: center; }
.rp-actions .btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--teal); color: var(--deep); }
.rp-doc { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 0 34px 30px; min-width: 0; }
.rp-cover { position: relative; overflow: hidden; margin: 0 -34px 8px; padding: 30px 34px 30px; background: var(--ink); color: #fff; min-height: 220px; }
.rp-cover-t { position: relative; z-index: 1; max-width: 60%; display: grid; gap: 6px; }
.rp-cover-t img { margin-bottom: 22px; }
.rp-cover .eyebrow { color: #9AA3B5; }
.rp-cover h1 { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 30px; font-weight: 850; color: #fff; line-height: 1.1; }
.rp-cover p { font-size: 13.5px; color: #C9CFDB; }
.rp-cover p b { color: #fff; }
.rp-cover .rp-by { font-size: 12px; color: #9AA3B5; margin-top: 4px; }
.rp-wedge { position: absolute; top: 0; right: 0; height: 100%; }
.rp-sec { margin-top: 28px; break-inside: avoid-page; }
.rp-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); }
.rp-kpi { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rp-kpi .label { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 13px; font-weight: 700; color: var(--heading); }
.rp-kpi .value { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 28px; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rp-kpi .meta { display: flex; }
.rp-was, .rp-sum { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-ch { margin-top: 12px; }
.rp-ch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-ch-head h3 { margin-right: 4px; }
.rp-fol { font-size: 12.5px; color: var(--muted); }
.rp-src { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.rp-ch-off { background: var(--bg); box-shadow: none; }
.rp-na { color: var(--muted); }
.rp-logos { display: inline-flex; gap: 5px; justify-content: flex-end; }
.rp-posts td:nth-child(2) { text-align: left; }
.rp-posts th:nth-child(2) { text-align: left; }
.rp-path { font-size: 11px; color: var(--muted); font-weight: 400; }
.rp-top { margin-bottom: 14px; }
.rp-top h3 { margin-bottom: 10px; }
.rp-top .sa-bar-row { grid-template-columns: minmax(140px, 40%) minmax(0, 1fr); }
.rp-top .lab small { color: var(--muted); }
.rp-notes { min-height: 70px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.rp-notes:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.rp-notes[data-empty="1"]::before { content: attr(data-placeholder); color: var(--muted); }
.rp-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
@media (max-width: 1180px) { .rp-layout { grid-template-columns: minmax(0, 1fr); } .rp-settings { position: static; } }
@media (max-width: 700px) {
  .rp-doc { padding: 0 16px 20px; } .rp-cover { margin: 0 -16px 8px; padding: 22px 16px; } .rp-cover-t { max-width: 72%; }
  .rp-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-src { margin-left: 0; width: 100%; }
}
@media print {
  .sidebar, .topbar, .nav-backdrop, .page-head, .sr-subject, .rp-settings, .sample-note, .tip { display: none !important; }
  .app { display: block !important; background: none !important; }
  .content { padding: 0 !important; max-width: none !important; }
  .rp-layout { display: block; }
  .rp-doc { border: 0; box-shadow: none; padding: 0 0 0; }
  .rp-cover { margin: 0 0 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-notes[data-empty="1"], .rp-sec:has(.rp-notes[data-empty="1"]) { display: none; }
  .delta, .sa-bar, .srlogo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Tokens from tokens.css the mockup build had dropped */
:root { --high: #C0392B; --med: #B7791F; --low: #798099; --slate-dark: #5E6478; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --high: #E8695C; --med: #D9A441; --low: #9AA0B5; } }
[data-theme="dark"] { --high: #E8695C; --med: #D9A441; --low: #9AA0B5; }

/* ==========================================================================
   Brand geometry. Mike, 27 Sep 2026: "a watermark that stays static in the
   background of every page on scroll... highly branded, very modern and
   crisp, with hard lines and hard edges", plus the bookmark folds on cards.
   His choices: the big S-fold mark, bottom-right and cropped off the edge,
   clearly visible; folds that show status; a mint bar on key cards, a cut
   notch at bottom-left and a hairline registration mark; a faint fold
   lattice behind every page; staff and clients alike.

   The mark is drawn in shades of the page colour with one mint hairline, not
   in the logo's full colours, so amber and red stay the loudest things on
   the screen. They are the colours that mean "this needs you".

   Nothing here takes a tap (pointer-events: none), moves a box, or changes
   a word. Every colour is a token, so both themes follow on their own.
   ========================================================================== */
:root {
  --wm-a: color-mix(in srgb, var(--text) 7%, var(--bg));
  --wm-b: color-mix(in srgb, var(--text) 10%, var(--bg));
  --wm-c: color-mix(in srgb, var(--text) 5%, var(--bg));
  --wm-edge: var(--mint);
  --lattice: color-mix(in srgb, var(--text) 4%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wm-a: color-mix(in srgb, var(--text) 6%, var(--bg));
    --wm-b: color-mix(in srgb, var(--text) 9%, var(--bg));
    --wm-c: color-mix(in srgb, var(--text) 4%, var(--bg));
    --lattice: color-mix(in srgb, var(--text) 3.5%, transparent);
  }
}
:root[data-theme="dark"] {
  --wm-a: color-mix(in srgb, var(--text) 6%, var(--bg));
  --wm-b: color-mix(in srgb, var(--text) 9%, var(--bg));
  --wm-c: color-mix(in srgb, var(--text) 4%, var(--bg));
  --lattice: color-mix(in srgb, var(--text) 3.5%, transparent);
}

/* The fold lattice, fixed, behind the whole page. The page head keeps its
   own denser lattice near the cover corner. */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, transparent calc(50% - .5px), var(--lattice) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(-45deg, transparent calc(50% - .5px), var(--lattice) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  background-size: 40px 40px;
  background-attachment: fixed;
}

/* The S-fold watermark (fold/_watermark.html, the first thing in <body>).
   Fixed, so it never scrolls. z-index -1 puts it under every box that paints
   its own background, so a card always covers it and it only shows through
   the gaps. */
.sr-wm {
  position: fixed; right: -5vh; bottom: -9vh;
  height: 78vh; width: auto; max-width: none;
  z-index: -1; pointer-events: none;
}
.sr-wm-a { fill: var(--wm-a); }
.sr-wm-b { fill: var(--wm-b); }
.sr-wm-c { fill: var(--wm-c); }
.sr-wm-edge { fill: none; stroke: var(--wm-edge); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
@media (max-width: 720px) { .sr-wm { height: 52vh; right: -8vh; bottom: -6vh; } }
/* The public pages (sign in, sign up, reset, onboarding) paint --bg on their
   own grid, which would hide the mark and the lattice. The body already
   paints the same colour, so the grid can be clear. */
body .public { background: transparent; }

/* Cards: the turned-down corner on every card, like a bookmark. Grey when
   the card has no status, mint when it is fine, amber when it needs you,
   red when something failed. .fold stays mint, as it always was. */
.card::before {
  width: 20px; height: 20px;
  background: linear-gradient(225deg, var(--under) 50%, transparent 50%);
}
.card::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 20px; height: 20px;
  background: linear-gradient(225deg, transparent 50%, var(--fold-color, var(--border-strong)) 50%);
  pointer-events: none;
}
.card.fold::before, .card.fold::after { width: 20px; height: 20px; }
.card.is-ok, .card.fold { --fold-color: var(--mint); }
.card.is-warn { --fold-color: var(--warn); }
.card.is-fail { --fold-color: var(--danger-fill); }

/* The cut notch at bottom-left and the registration mark at bottom-right,
   both drawn as background layers so they cost no markup. A card that sets
   its own background replaces them, which is the safe way round. */
.card {
  background-image:
    linear-gradient(45deg, var(--under) calc(50% - .6px), var(--border) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(var(--border-strong), var(--border-strong)),
    linear-gradient(var(--border-strong), var(--border-strong));
  background-size: 11px 11px, 8px 1px, 1px 8px;
  background-position: left -1px bottom -1px, right 6px bottom 6px, right 6px bottom 6px;
  background-origin: border-box, padding-box, padding-box;
  background-repeat: no-repeat;
}

/* Key cards: a mint bar down the left edge. Only on the headline number or
   the first thing to do, so it keeps meaning something. */
.card.is-key { border-left: 3px solid var(--mint); padding-left: 18px; }
@media (max-width: 720px) { .card.is-key { padding-left: 14px; } .sr-wm-edge { display: none; } }

/* Cards that also carry an older class (card-block, sh-card, table-card)
   keep the 20px cut so it lines up with the fold on top of it. */
body.fold .card.card-block::before, body.fold .card.sh-card::before, body.fold .card.table-card::before { width: 20px; height: 20px; }

/* The word that goes with a red fold, so colour never says it alone. */
.sh-stuck, .nf-stuck { color: var(--no-fg); font-weight: 700; }

@media print {
  .sr-wm { display: none; }
  body { background-image: none; }
}