/* Tellmetric — Material Design 3 theme
   Seed color #5B5BD6 (modern indigo). Powers both the hand-rolled surfaces
   below and the official @material/web components via --md-sys-color-* tokens.
   Light is the bare :root; dark applies under prefers-color-scheme and
   [data-theme="dark"]; an explicit [data-theme="light"] wins over a dark OS. */

:root {
  color-scheme: light dark;

  /* --- M3 color roles (light) --- */
  --md-sys-color-primary: #4f4fc4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e3e0ff;
  --md-sys-color-on-primary-container: #14107a;
  --md-sys-color-secondary: #5c5c72;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e2e0f9;
  --md-sys-color-on-secondary-container: #191a2c;
  --md-sys-color-tertiary: #79536a;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8ec;
  --md-sys-color-on-tertiary-container: #2e1125;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-success: #326b3f;
  --md-sys-color-success-container: #b3f1bd;

  --md-sys-color-background: #fbf8ff;
  --md-sys-color-on-background: #1b1b21;
  --md-sys-color-surface: #fbf8ff;
  --md-sys-color-on-surface: #1b1b21;
  --md-sys-color-surface-variant: #e4e1ec;
  --md-sys-color-on-surface-variant: #46464f;
  --md-sys-color-surface-dim: #dbd9e0;
  --md-sys-color-surface-bright: #fbf8ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f2fa;
  --md-sys-color-surface-container: #efedf4;
  --md-sys-color-surface-container-high: #e9e7ef;
  --md-sys-color-surface-container-highest: #e4e1e9;
  --md-sys-color-outline: #777680;
  --md-sys-color-outline-variant: #c8c5d0;
  --md-sys-color-inverse-surface: #303036;
  --md-sys-color-inverse-on-surface: #f3eff7;
  --md-sys-color-inverse-primary: #c4c0ff;

  /* --- M3 typography reference --- */
  --md-ref-typeface-brand: "Roboto Flex", "Roboto", system-ui, sans-serif;
  --md-ref-typeface-plain: "Roboto", system-ui, sans-serif;

  /* --- shape + elevation --- */
  /* Spacing: one 4px grid for every margin, padding and gap. Nothing in a
     template should use a pixel value that is not one of these. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  /* Density contexts */
  --page-pad-y: var(--sp-8);        /* app page top padding */
  --page-pad-bottom: var(--sp-16);
  --card-pad: var(--sp-6);
  --card-pad-compact: var(--sp-4);
  --form-gap: var(--sp-4);          /* between fields */
  --form-group-gap: var(--sp-6);    /* between field groups / before the primary action */
  --content-measure: 68ch;          /* body copy never runs wider than this */
  /* Type: three small sizes, no others */
  --fs-body: 1rem; --fs-body-s: .875rem; --fs-caption: .8rem; --fs-micro: .72rem;
  /* Motion (Material 3): short for state changes, medium for reveals, long for page-level. */
  --motion-short: 150ms; --motion-medium: 250ms; --motion-long: 400ms;
  --ease-standard: cubic-bezier(.2,0,0,1); --ease-emphasized: cubic-bezier(.05,.7,.1,1);
  /* State layers: how much of the content colour tints a surface on hover/focus/press. */
  --state-hover: 8%; --state-focus: 12%; --state-pressed: 12%;
  /* Material Web component tokens: one shape for every field, one height for every button. */
  --md-outlined-field-container-shape: 8px;
  --md-outlined-text-field-container-shape: 8px;
  --md-outlined-select-text-field-container-shape: 8px;
  --md-filled-button-container-shape: 999px;
  --md-outlined-button-container-shape: 999px;
  --md-filled-tonal-button-container-shape: 999px;
  --md-sys-typescale-body-large-font: "Roboto", system-ui, sans-serif;
  --md-sys-typescale-label-large-font: "Roboto", system-ui, sans-serif;
  --surface-card: var(--md-sys-color-surface-container-lowest);   /* cards sit white on the tinted page */
  --surface-card-nested: var(--md-sys-color-surface-container-low);
  --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px;
  --shape-xl: 28px; --shape-full: 999px;
  --elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px 1px rgba(0,0,0,.08);
  --elev-2: 0 1px 2px rgba(0,0,0,.08), 0 2px 6px 2px rgba(0,0,0,.10);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.12);

  /* Material Web wiring */
  --md-sys-typescale-body-font: var(--md-ref-typeface-plain);
}

/* The forced theme also tells the browser which scheme to use for scrollbars, form controls and
   system colours; otherwise a light page could get dark controls (or the reverse). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-sys-color-primary: #c4c0ff;
    --md-sys-color-on-primary: #29278f;
    --md-sys-color-primary-container: #4040a7;
    --md-sys-color-on-primary-container: #e3e0ff;
    --md-sys-color-secondary: #c6c3dd;
    --md-sys-color-on-secondary: #2e2f42;
    --md-sys-color-secondary-container: #444559;
    --md-sys-color-on-secondary-container: #e2e0f9;
    --md-sys-color-tertiary: #e9b9d3;
    --md-sys-color-on-tertiary: #46263a;
    --md-sys-color-tertiary-container: #5f3c51;
    --md-sys-color-on-tertiary-container: #ffd8ec;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-success: #98d7a2;
    --md-sys-color-success-container: #14512a;

    --md-sys-color-background: #121218;
    --md-sys-color-on-background: #e4e1e9;
    --md-sys-color-surface: #121218;
    --md-sys-color-on-surface: #e4e1e9;
    --md-sys-color-surface-variant: #46464f;
    --md-sys-color-on-surface-variant: #c8c5d0;
    --md-sys-color-surface-dim: #121218;
    --md-sys-color-surface-bright: #38373e;
    --md-sys-color-surface-container-lowest: #0d0d12;
    --md-sys-color-surface-container-low: #1b1b21;
    --md-sys-color-surface-container: #1f1f25;
    --md-sys-color-surface-container-high: #2a292f;
    --md-sys-color-surface-container-highest: #34343a;
    --md-sys-color-outline: #918f9a;
    --md-sys-color-outline-variant: #46464f;
    --md-sys-color-inverse-surface: #e4e1e9;
    --md-sys-color-inverse-on-surface: #303036;
    --md-sys-color-inverse-primary: #4f4fc4;
    --elev-1: 0 1px 3px rgba(0,0,0,.4);
    --elev-2: 0 2px 6px rgba(0,0,0,.45);
    --elev-3: 0 6px 16px rgba(0,0,0,.5);
    --surface-card: var(--md-sys-color-surface-container);
    --surface-card-nested: var(--md-sys-color-surface-container-high);
  }
}

:root[data-theme="dark"] {
  --md-sys-color-primary: #c4c0ff;
  --md-sys-color-on-primary: #29278f;
  --md-sys-color-primary-container: #4040a7;
  --md-sys-color-on-primary-container: #e3e0ff;
  --md-sys-color-secondary: #c6c3dd;
  --md-sys-color-on-secondary: #2e2f42;
  --md-sys-color-secondary-container: #444559;
  --md-sys-color-on-secondary-container: #e2e0f9;
  --md-sys-color-tertiary: #e9b9d3;
  --md-sys-color-on-tertiary: #46263a;
  --md-sys-color-tertiary-container: #5f3c51;
  --md-sys-color-on-tertiary-container: #ffd8ec;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-success: #98d7a2;
  --md-sys-color-success-container: #14512a;
  --md-sys-color-background: #121218;
  --md-sys-color-on-background: #e4e1e9;
  --md-sys-color-surface: #121218;
  --md-sys-color-on-surface: #e4e1e9;
  --md-sys-color-surface-variant: #46464f;
  --md-sys-color-on-surface-variant: #c8c5d0;
  --md-sys-color-surface-dim: #121218;
  --md-sys-color-surface-bright: #38373e;
  --md-sys-color-surface-container-lowest: #0d0d12;
  --md-sys-color-surface-container-low: #1b1b21;
  --md-sys-color-surface-container: #1f1f25;
  --md-sys-color-surface-container-high: #2a292f;
  --md-sys-color-surface-container-highest: #34343a;
  --md-sys-color-outline: #918f9a;
  --md-sys-color-outline-variant: #46464f;
  --md-sys-color-inverse-surface: #e4e1e9;
  --md-sys-color-inverse-on-surface: #303036;
  --md-sys-color-inverse-primary: #4f4fc4;
  --elev-1: 0 1px 3px rgba(0,0,0,.4);
  --elev-2: 0 2px 6px rgba(0,0,0,.45);
  --elev-3: 0 6px 16px rgba(0,0,0,.5);
  --surface-card: var(--md-sys-color-surface-container);
  --surface-card-nested: var(--md-sys-color-surface-container-high);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--md-ref-typeface-plain);
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- typography ---------- */
.display-l { font-family: var(--md-ref-typeface-brand); font-size: clamp(2.6rem,6vw,3.6rem); line-height:1.06; font-weight:800; letter-spacing:-.02em; text-wrap:balance; margin:0; }
.display-m { font-family: var(--md-ref-typeface-brand); font-size: clamp(2rem,4.5vw,2.8rem); line-height:1.1; font-weight:800; letter-spacing:-.015em; text-wrap:balance; margin:0; }
.headline  { font-family: var(--md-ref-typeface-brand); font-size: clamp(1.5rem,3vw,2rem); line-height:1.15; font-weight:700; text-wrap:balance; margin:0; }
.title-l   { font-family: var(--md-ref-typeface-brand); font-size:1.375rem; line-height:1.25; font-weight:700; margin:0; }
.title     { font-size:1.05rem; font-weight:600; margin:0; }
.body      { font-size:var(--fs-body); line-height:1.6; color:var(--md-sys-color-on-surface-variant); }
.body.strong, .body-s.strong, .caption.strong { color:var(--md-sys-color-on-surface); }
.body-l    { font-size:1.15rem; line-height:1.6; color:var(--md-sys-color-on-surface-variant); }
.label     { font-size:var(--fs-caption); font-weight:600; color:var(--md-sys-color-on-surface-variant); }
.body-s    { font-size:var(--fs-body-s); line-height:1.5; color:var(--md-sys-color-on-surface-variant); }
.caption   { font-size:var(--fs-caption); line-height:1.45; color:var(--md-sys-color-on-surface-variant); }
.micro     { font-size:var(--fs-micro); line-height:1.4; color:var(--md-sys-color-on-surface-variant); }
.strong    { color:var(--md-sys-color-on-surface); }
.measure   { max-width:var(--content-measure); }
.nowrap    { white-space:nowrap; }
.mono      { font-family: ui-monospace,"SF Mono",Menlo,monospace; }
.text-primary { color: var(--md-sys-color-primary); }
.text-variant { color: var(--md-sys-color-on-surface-variant); }
.text-center { text-align:center; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- eyebrow / chips ---------- */
.eyebrow { display:inline-flex; align-self:flex-start; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--md-sys-color-primary); background:var(--md-sys-color-primary-container); padding:.35rem .8rem; border-radius:var(--shape-full); }
.text-center .eyebrow, .lead-block .eyebrow { align-self:center; }
.chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:600; padding:.3rem .75rem; border-radius:var(--shape-full); background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface-variant); border:1px solid var(--md-sys-color-outline-variant); }
.chip.good { color:var(--md-sys-color-success); background:var(--md-sys-color-success-container); border:0; }
.chip.warn { color:var(--md-sys-color-on-tertiary-container); background:var(--md-sys-color-tertiary-container); border:0; }
.chip.crit { color:var(--md-sys-color-on-error-container); background:var(--md-sys-color-error-container); border:0; }

/* ---------- layout ---------- */
.container { width:100%; max-width:1140px; margin-inline:auto; padding-inline:24px; }
.container.narrow { max-width:820px; }
.container.tight { max-width:560px; }
.container.wide { max-width:1240px; }   /* app shell, dashboard, billing, admin workspace */
.container.xwide { max-width:1400px; }  /* admin tables */
.section { padding-block: clamp(48px,8vw,104px); }
.section.intro { padding-bottom:var(--sp-8); }   /* page intro that a body follows */
.hero .section { padding-bottom:var(--sp-12); }
.page-body { padding-bottom:var(--sp-16); }
.section.tight { padding-block: 40px; }
.stack { display:flex; flex-direction:column; }
.stack.gap-05{gap:var(--sp-1)} .stack.gap-1{gap:var(--sp-2)} .stack.gap-15{gap:var(--sp-3)} .stack.gap-2{gap:var(--sp-4)} .stack.gap-3{gap:var(--sp-6)} .stack.gap-4{gap:var(--sp-10)}
.row { display:flex; align-items:center; }
.row.wrap { flex-wrap:wrap; }
.row.gap-05{gap:var(--sp-1)} .row.gap-1{gap:var(--sp-2)} .row.gap-15{gap:var(--sp-3)} .row.gap-2{gap:var(--sp-4)} .row.gap-3{gap:var(--sp-6)}
.row.top { align-items:flex-start; } .row.baseline { align-items:baseline; } .row.end { align-items:flex-end; }
.between { justify-content:space-between; }
.center { justify-content:center; }
.grid { display:grid; gap:var(--sp-6); } /* cards in a row share the tallest height */
.grid > md-outlined-text-field, .grid > md-outlined-select, .grid > label { align-self:start; } /* fields never stretch to a neighbour's help text */
.grid.gap-8 { gap:var(--sp-8); } .grid.gap-12 { gap:var(--sp-12); }
.grid.tight { gap:var(--sp-3); }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.mt-0{margin-top:0}.mt-05{margin-top:var(--sp-1)}.mt-1{margin-top:var(--sp-2)}.mt-15{margin-top:var(--sp-3)}.mt-2{margin-top:var(--sp-4)}.mt-3{margin-top:var(--sp-6)}.mt-4{margin-top:var(--sp-10)}
.mb-0{margin-bottom:0}.mb-05{margin-bottom:var(--sp-1)}.mb-1{margin-bottom:var(--sp-2)}.mb-15{margin-bottom:var(--sp-3)}.mb-2{margin-bottom:var(--sp-4)}.mb-3{margin-bottom:var(--sp-6)}.mb-4{margin-bottom:var(--sp-10)}
.m-0{margin:0}
/* App pages: one header rhythm everywhere */
.page { padding-block: var(--page-pad-y) var(--page-pad-bottom); }
/* Page header: title + lead left, actions right, aligned with the title line (not the lead). */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.page-header > :last-child:not(:first-child) { margin-top:var(--sp-1); }
.key-legend { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-3); align-items:center; }
.key-legend .chip { justify-self:start; }
.page-header .body { margin-top:var(--sp-1); max-width:var(--content-measure); }
.card > .title-l + .body, .card > .title + .body { margin-top:var(--sp-1); }
.grow{flex:1}
@media (max-width: 900px){ .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)} .hide-md{display:none!important} }
@media (max-width: 620px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr} .row.stack-sm,.field-row.stack-sm{flex-direction:column;align-items:stretch} }

/* ---------- surfaces / cards ---------- */
.card { background:var(--surface-card); border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--shape-lg); padding:var(--card-pad); }
.card.compact { padding:var(--card-pad-compact) var(--sp-5); }
.card.flush { padding:0; overflow:hidden; }
.card.low { background:var(--surface-card-nested); }
.card.tonal { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); border:0; }
.card.secondary { background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); border:0; }
.card.elevate { box-shadow:var(--elev-1); border:0; }
.card.spacious { padding:var(--sp-10); }
.btn.text.text-inherit { color:inherit; }
.card.success { background:var(--md-sys-color-success-container); color:var(--md-sys-color-on-surface); }
.card.interactive { transition:box-shadow .2s, transform .2s; }
.card.interactive:hover { box-shadow:var(--elev-2); transform:translateY(-2px); }
.divider { height:1px; background:var(--md-sys-color-outline-variant); border:0; margin:0; }

/* stat tiles */
.stat { background:var(--surface-card); border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--shape-lg); padding:var(--sp-5) var(--sp-6); }
.stat .n { font-family:var(--md-ref-typeface-brand); font-size:2.2rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.stat .k { color:var(--md-sys-color-on-surface-variant); font-size:.9rem; margin-top:6px; }

/* icon */
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; vertical-align:middle; user-select:none; flex-shrink:0; }
.icon-badge { display:inline-grid; place-items:center; flex:0 0 auto; width:48px; height:48px; border-radius:var(--shape-md); background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); }
/* Two sizes, four tones. Nothing else is set inline. */
.icon-badge.sm { width:36px; height:36px; } .icon-badge.sm .material-symbols-outlined { font-size:20px; }
.icon-badge.lg { width:56px; height:56px; } .icon-badge.lg .material-symbols-outlined { font-size:30px; }
.icon-badge.secondary { background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); }
.icon-badge.success { background:var(--md-sys-color-success-container); color:var(--md-sys-color-success); }
.icon-badge.error { background:var(--md-sys-color-error-container); color:var(--md-sys-color-on-error-container); }
/* Section head: small badge + title + one-line lead. The badge centres on the
   title line (not on the whole block), so every section on a page lines up. */
/* Section header: title + lead left, status slot right, divider below. Every card that is a section starts with one (macros.section_head). */
.section-head { display:flex; align-items:flex-start; flex-wrap:wrap; gap:var(--sp-3) var(--sp-4); padding-bottom:var(--sp-4); margin-bottom:var(--sp-4); border-bottom:1px solid var(--md-sys-color-outline-variant); }
.section-head > div:not(.status) { min-width:0; flex:1 1 14rem; }
.section-head .status { margin-left:auto; flex:0 0 auto; align-self:center; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); max-width:100%; }
.section-head .status .caption { white-space:nowrap; }
.card.tonal .section-head, .card.secondary .section-head, .card.success .section-head { border-bottom-color:color-mix(in srgb, currentColor 22%, transparent); }
.card.dashed { border-style:dashed; }
.grid.cols-2-1 { grid-template-columns:2fr 1fr; }
/* Grid cells never grow past the viewport because of a wide table inside them. */
.grid > * { min-width:0; }
.section-head .status .btn, .pager .caption { white-space:nowrap; }
@media (max-width:620px){ .grid.cols-2-1 { grid-template-columns:1fr; } .section-head .status { margin-left:0; } }
.section-head .lead { margin-top:var(--sp-1); }
/* Form footer: the one primary action of a page, right-aligned under a rule */
.form-footer { display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-4); flex-wrap:wrap; padding-top:var(--sp-4); margin-top:var(--sp-4); border-top:1px solid var(--md-sys-color-outline-variant); }
.form-footer .caption { margin-right:auto; }
/* Status chips carry an icon */
.chip .material-symbols-outlined { font-size:16px; }
.section-head .icon-badge.sm { margin-top:calc((1.375rem * 1.25 - 36px) / 2); }
.section-head .title-l + .body-s { margin-top:var(--sp-1); }
.section-head .chip { vertical-align:middle; }

/* ---------- buttons (fallback / links styled as M3) ---------- */
.btn { position:relative; display:inline-flex; align-items:center; gap:.5rem; height:40px; padding:0 24px; border-radius:var(--shape-full); font-weight:600; font-size:.95rem; border:0; cursor:pointer; text-decoration:none; overflow:hidden; transition:box-shadow var(--motion-short) var(--ease-standard), background var(--motion-short) var(--ease-standard), transform var(--motion-short) var(--ease-standard); }
/* State layer: a tint of the button's own text colour, so it works on every variant. */
.btn::after { content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity var(--motion-short) var(--ease-standard); pointer-events:none; }
.btn:hover::after { opacity:.08; } .btn:active::after { opacity:.12; } .btn:active { transform:scale(.98); }
.btn .material-symbols-outlined { font-size:18px; }
.btn:focus-visible { outline:2px solid var(--md-sys-color-primary); outline-offset:2px; }
.btn.filled { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); }
.btn.filled:hover { box-shadow:var(--elev-1); text-decoration:none; }
.btn.tonal { background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); }
.btn.tonal:hover { text-decoration:none; box-shadow:var(--elev-1); }
.btn.outline { background:transparent; border:1px solid var(--md-sys-color-outline); color:var(--md-sys-color-primary); }
.btn.outline:hover { background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent); text-decoration:none; }
.btn.text { background:transparent; color:var(--md-sys-color-primary); padding:0 12px; }
.btn.text .material-symbols-outlined:first-child { margin-left:-2px; }
.btn.text:hover { background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent); text-decoration:none; }
.btn.lg { height:52px; padding:0 32px; font-size:1.05rem; }

/* ---------- app bar / nav ---------- */
.appbar { position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--md-sys-color-surface) 82%,transparent); backdrop-filter:blur(16px); border-bottom:1px solid var(--md-sys-color-outline-variant); }
.appbar .container { display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--md-ref-typeface-brand); font-weight:800; font-size:1.25rem; color:var(--md-sys-color-on-surface); }
.brand:hover{text-decoration:none}
.brand .logo { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); }
.navlinks { display:flex; align-items:center; gap:4px; }
.navlinks a { color:var(--md-sys-color-on-surface-variant); font-weight:500; font-size:.95rem; padding:8px 14px; border-radius:var(--shape-full); }
.navlinks a:hover { color:var(--md-sys-color-on-surface); background:var(--md-sys-color-surface-container-high); text-decoration:none; }
/* Mobile menu: a <details> in the app bar, no script needed. Shown only when the inline links are hidden. */
.mobile-menu { display:none; position:relative; }
.mobile-menu > summary { list-style:none; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--shape-full); cursor:pointer; color:var(--md-sys-color-on-surface-variant); }
.mobile-menu > summary::-webkit-details-marker { display:none; }
.mobile-menu[open] > summary, .mobile-menu > summary:hover { background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface); }
.mobile-menu-panel { position:absolute; right:0; top:48px; min-width:240px; display:flex; flex-direction:column; gap:2px; padding:var(--sp-2); background:var(--md-sys-color-surface-container); border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--shape-md); box-shadow:var(--elev-2); z-index:60; }
.mobile-menu-panel a, .mobile-menu-panel .btn { display:block; padding:var(--sp-3) var(--sp-4); border-radius:var(--shape-sm); color:var(--md-sys-color-on-surface); font-weight:500; text-align:left; height:auto; }
.mobile-menu-panel a:hover { background:var(--md-sys-color-surface-container-high); text-decoration:none; }
.mobile-menu-panel .divider { margin:var(--sp-1) 0; }
.mobile-menu-label { padding:var(--sp-2) var(--sp-4); }
@media (max-width:820px){ .navlinks .hide-sm{display:none} .mobile-menu{display:block} }
/* Operator pages: inverted bar so nobody mistakes them for a customer page. */
.appbar.admin { background:var(--md-sys-color-inverse-surface); color:var(--md-sys-color-inverse-on-surface); }
/* The app bar carries nine links plus the workspace switcher, so it collapses earlier than the marketing nav. */
@media (max-width:1200px){ .appbar.app .navlinks .hide-sm{display:none} .appbar.app .mobile-menu{display:block} }

/* theme toggle */
.icon-btn { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--shape-full); background:transparent; border:0; color:var(--md-sys-color-on-surface-variant); cursor:pointer; }
.icon-btn:hover { background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface); }
.icon-btn, .chip, .navlinks a, .mobile-menu-panel a, .mobile-menu > summary, details.card > summary, .step-marker { transition:background var(--motion-short) var(--ease-standard), color var(--motion-short) var(--ease-standard), border-color var(--motion-short) var(--ease-standard); }
button.chip:hover, summary.chip:hover { background:color-mix(in srgb, var(--md-sys-color-on-surface) var(--state-hover), var(--md-sys-color-surface-container-high)); }

/* ---------- hero ---------- */
.hero { position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; background:
   radial-gradient(60% 60% at 15% 0%, color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent), transparent 70%),
   radial-gradient(50% 50% at 100% 20%, color-mix(in srgb,var(--md-sys-color-tertiary) 18%,transparent), transparent 70%); }
.hero .container { position:relative; z-index:1; }

/* ---------- footer ---------- */
.footer { background:var(--md-sys-color-surface-container-low); border-top:1px solid var(--md-sys-color-outline-variant); padding-block:56px 40px; margin-top:64px; }
.footer a { color:var(--md-sys-color-on-surface-variant); font-size:.92rem; display:block; padding:4px 0; }
.footer a:hover { color:var(--md-sys-color-on-surface); }
/* The generic footer link rule (block, muted, small) must not flatten the brand. */
.footer .brand { display:inline-flex; align-items:center; gap:.65rem; padding:0; font-size:1.2rem; font-weight:800; letter-spacing:-.01em; color:var(--md-sys-color-on-surface); }
.footer .brand .logo { width:38px; height:38px; border-radius:11px; box-shadow:0 8px 20px -8px var(--md-sys-color-primary); }
.footer .brand:hover .logo { transform:translateY(-1px); transition:transform .15s ease; }
.footer .tagline { margin-top:14px; font-size:.9rem; line-height:1.55; max-width:34ch; }
.footer .contact a { display:inline; padding:0; font-size:.88rem; color:var(--md-sys-color-primary); }
.footer .contact { margin-top:14px; font-size:.88rem; line-height:1.8; }
.footer .col-title { font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--md-sys-color-on-surface); margin-bottom:8px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--shape-md); }
table.m3 { width:100%; border-collapse:collapse; font-size:.92rem; }
table.m3 th { text-align:left; font-size:var(--fs-caption); font-weight:600; color:var(--md-sys-color-on-surface-variant); background:var(--md-sys-color-surface-container-high); padding:var(--sp-3) var(--sp-4); white-space:nowrap; }
table.m3 td { padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--md-sys-color-outline-variant); }
table.m3 thead th { position:sticky; top:0; z-index:1; }
table.m3 tbody tr { transition:background var(--motion-short) var(--ease-standard); }
table.m3 tbody tr:hover td { background:color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent); }
table.m3 td .caption, table.m3 td .body-s { margin-top:var(--sp-1); }
/* Long addresses: one line, ellipsis, full value in title= and for Copy */
.trunc { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.m3 td.url { max-width:360px; }
/* Stacking tables: below 620px each row becomes a small card, each cell a
   label/value line. Needs data-label on the cells and class="m3 cards". */
@media (max-width:620px){
  table.m3.cards thead { display:none; }
  table.m3.cards, table.m3.cards tbody, table.m3.cards tr, table.m3.cards td { display:block; width:100%; }
  table.m3.cards tr { padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--md-sys-color-outline-variant); }
  table.m3.cards tr:first-child { border-top:0; }
  table.m3.cards td { border:0; padding:var(--sp-1) 0; display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); text-align:left; max-width:none; }
  table.m3.cards td[data-label]::before { content:attr(data-label); flex:0 0 38%; font-size:var(--fs-caption); font-weight:600; color:var(--md-sys-color-on-surface-variant); }
  table.m3.cards td.num { justify-content:space-between; }
  table.m3.cards td .trunc { max-width:100%; }
  table.m3.cards td[data-label] > * { min-width:0; flex:1 1 auto; text-align:right; overflow-wrap:anywhere; }
  table.m3.cards td[data-label] > .chip, table.m3.cards td[data-label] > form, table.m3.cards td[data-label] > .btn { flex:0 0 auto; }
  table.m3.cards td.actions { justify-content:flex-end; }
  table.m3.cards td.actions:not(:has(*)) { display:none; }
  table.m3.cards td[data-label] { justify-content:space-between; text-align:left; overflow-wrap:anywhere; }
  table.m3.cards td[data-label]::before { text-align:left; }
}
.num{ text-align:right; font-variant-numeric:tabular-nums; }
/* Column alignment follows the content: text left, numbers right, short badges (status, role, result) centred.
   Heads use th.center; cells are matched by their data-label so phones still stack them correctly. */
table.m3 th.center { text-align:center; }
table.m3 th.num { text-align:right; }
table.m3 td[data-label="Status"], table.m3 td[data-label="Meta"], table.m3 td[data-label="Role"], table.m3 td[data-label="Your role"],
table.m3 td[data-label="Result"], table.m3 td[data-label="Records"], table.m3 td[data-label="Reply"], table.m3 td[data-label="Plan"] { text-align:center; }

/* ---------- code ---------- */
pre.code { background:var(--md-sys-color-surface-container-highest); color:var(--md-sys-color-on-surface); border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--shape-md); padding:16px 18px; overflow-x:auto; font-family:ui-monospace,Menlo,monospace; font-size:.82rem; line-height:1.55; }
code.inline { font-family:ui-monospace,Menlo,monospace; font-size:.86em; background:var(--md-sys-color-surface-container-high); border:1px solid var(--md-sys-color-outline-variant); border-radius:5px; padding:1px 6px; }

/* ---------- banners ---------- */
.banner { display:flex; align-items:center; gap:var(--sp-3); justify-content:space-between; padding:var(--sp-3) var(--sp-5); border-radius:var(--shape-md); font-size:.95rem; }
.banner > * { min-width:0; }
.banner > span:not(.material-symbols-outlined) { flex:1 1 auto; }
.banner .btn { flex:0 0 auto; }
.banner.stack-sm{flex-wrap:wrap}
@media (max-width:620px){ .banner { flex-wrap:wrap; } .banner .btn { margin-left:auto; } }
.banner.info { background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); }
.banner.warn { background:var(--md-sys-color-tertiary-container); color:var(--md-sys-color-on-tertiary-container); }
.banner.crit { background:var(--md-sys-color-error-container); color:var(--md-sys-color-on-error-container); }

/* progress bar (match quality) */
.meter { height:8px; border-radius:var(--shape-full); background:var(--md-sys-color-surface-container-highest); overflow:hidden; }
.meter > span { display:block; height:100%; background:var(--md-sys-color-primary); border-radius:var(--shape-full); }
.meter.error > span { background:var(--md-sys-color-error); }   /* usage cap reached, delivery paused */

/* ---------- forms ---------- */
md-outlined-text-field, md-filled-text-field { width:100%; }
/* Before the component bundle has run, the custom elements keep their final size and stay
   invisible, so the page neither jumps nor shows unstyled controls on a refresh. */
md-outlined-text-field:not(:defined), md-outlined-select:not(:defined) { display:block; height:56px; visibility:hidden; }
md-filled-button:not(:defined), md-outlined-button:not(:defined) { display:inline-block; height:40px; visibility:hidden; }
md-checkbox:not(:defined) { display:inline-block; width:18px; height:18px; visibility:hidden; }
md-select-option:not(:defined) { display:none; }
.grid > md-outlined-select, .form > md-outlined-select { width:100%; } /* selects size like text fields when they share a grid or form */
/* Field row: fields and one button on a single line, all 56px tall, bottoms aligned. */
.field-row { display:flex; gap:var(--sp-4); align-items:flex-end; }
.field-row md-filled-button, .field-row md-outlined-button { --md-filled-button-container-height:56px; --md-outlined-button-container-height:56px; }
md-filled-button, md-outlined-button, md-text-button { --md-filled-button-container-height:44px; --md-outlined-button-container-height:44px; --md-text-button-container-height:44px; }
.form { display:flex; flex-direction:column; gap:var(--form-gap); }
.form .form-actions { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-2); }
.form.wide .form-actions md-filled-button, .form.wide .form-actions .btn { width:100%; justify-content:center; --md-filled-button-container-height:48px; }

/* ---------- auth pages (login, register, forgot, reset) ---------- */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.auth-aside { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); padding:var(--sp-12); display:flex; flex-direction:column; gap:var(--sp-10); }
.auth-aside .brand, .auth-aside .title, .auth-aside .display-m, .auth-aside .body, .auth-aside .body-l, .auth-aside .body-s, .auth-aside .caption, .auth-aside .label { color:inherit; }
.auth-aside .body, .auth-aside .body-l, .auth-aside .body-s, .auth-aside .caption, .auth-aside .label { opacity:.85; }
.auth-aside .aside-body { margin-top:auto; display:flex; flex-direction:column; gap:var(--sp-6); }
.auth-aside .aside-points { display:flex; flex-direction:column; gap:var(--sp-4); }
.auth-aside .aside-point { display:flex; gap:var(--sp-3); align-items:flex-start; }
.auth-aside .aside-point .material-symbols-outlined { margin-top:2px; flex-shrink:0; }
.auth-main { display:grid; place-items:center; padding:var(--sp-8) var(--sp-6); }
.auth-card { width:100%; max-width:440px; display:flex; flex-direction:column; gap:var(--sp-6); }
.auth-card .auth-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); }
.auth-card .auth-head .body { margin-top:var(--sp-2); }
.auth-card .auth-foot { text-align:center; display:flex; flex-direction:column; gap:var(--sp-2); }
.auth-card .auth-foot a.quiet { color:var(--md-sys-color-on-surface-variant); }
.auth-card .brand { display:none; }
@media (max-width:860px){ .auth-wrap{grid-template-columns:1fr} .auth-aside{display:none} .auth-card .brand{display:inline-flex} .auth-main{padding:var(--sp-6) var(--sp-4);align-items:start} }

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }

/* Checkboxes next to long labels must not shrink */
.row > md-checkbox { flex:0 0 auto; }

/* ---- Utilities (the only sanctioned replacements for style= attributes) ---- */
.items-center{align-items:center} .items-start{align-items:flex-start} .items-end{align-items:flex-end}
.self-start{align-self:flex-start} .justify-center{justify-content:center}
.inline{display:inline} .shrink-0{flex:0 0 auto} .w-full{width:100%} .text-right{text-align:right}
.capitalize{text-transform:capitalize} .pointer{cursor:pointer}
.pt-1{padding-top:var(--sp-2)} .pt-2{padding-top:var(--sp-4)}
.text-error{color:var(--md-sys-color-error)} .text-success{color:var(--md-sys-color-success)}
.text-on-surface{color:var(--md-sys-color-on-surface)} .text-inherit{color:inherit}
.dim{opacity:.85} .dim-more{opacity:.6}
.icon-16{font-size:16px} .icon-18{font-size:18px} .icon-20{font-size:20px}
.surface-low{background:var(--md-sys-color-surface-container-low)}
/* Buttons */
.btn.block{width:100%;justify-content:center}
.btn.disabled{pointer-events:none;opacity:.6}
.btn.inverse, .chip.inverse{background:var(--md-sys-color-on-primary-container);color:var(--md-sys-color-primary-container);border:0}
.chip.success{background:var(--md-sys-color-success-container);color:var(--md-sys-color-on-surface);border:0}
/* Native controls in admin filters look like outlined fields: same shape, height and focus ring */
.native-input{height:40px;padding:var(--sp-2);border-radius:var(--shape-sm);border:1px solid var(--md-sys-color-outline);background:var(--md-sys-color-surface);color:inherit;font:inherit}
.native-input:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:0;border-color:var(--md-sys-color-primary)}
.native-input.w-sm{width:140px} .native-input.w-md{width:150px} .native-input.w-lg{width:220px}
/* Disclosure: one summary style everywhere */
details > summary{cursor:pointer}
details.card > summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary .material-symbols-outlined { transition:transform var(--motion-medium) var(--ease-emphasized); }
details.card[open] > summary .material-symbols-outlined { transform:rotate(180deg); }
details.card[open] > :not(summary) { animation:fade-in var(--motion-medium) var(--ease-standard); }
/* Outlined inner panel inside a card (choice tiles, sub-sections) */
.panel{padding:var(--sp-4);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--shape-md);background:var(--surface-card-nested)}
.panel.dashed{border-style:dashed}
/* Splash: one centred card on the hero background (invite, errors) */
.splash{min-height:100vh;display:grid;place-items:center;padding:var(--sp-8) var(--sp-4)}
.splash-card{max-width:440px;width:100%;position:relative;z-index:1;padding:var(--sp-8)}
/* Error pages: wider card, icon + text side by side, actions full width on phones. */
.error-card{max-width:640px;display:flex;flex-direction:column;gap:var(--sp-6)}
.error-body{display:flex;gap:var(--sp-5);align-items:flex-start}
.error-body>div{min-width:0}
.error-actions .btn{flex:1 1 200px;justify-content:center}
.error-ref{margin:0;padding-top:var(--sp-4);border-top:1px solid var(--md-sys-color-outline-variant)}
@media (max-width:620px){.splash{padding:var(--sp-4);align-items:start}.splash-card{padding:var(--sp-5)}.error-body{flex-direction:column;gap:var(--sp-3)}}
/* Centered narrow lead block (marketing intros) */
.lead-block{align-items:center;max-width:720px;margin-inline:auto}
/* Plan price: one size on the marketing page and on Billing */
.price{font-family:var(--md-ref-typeface-brand);font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.02em}

/* ---- Setup guide stepper (dashboard) ---- */
.guide-progress { min-width:260px; }
.stepper { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.step { display:grid; grid-template-columns:36px 1fr; gap:var(--sp-4); position:relative; padding-bottom:var(--sp-5); }
.step:not(:last-child)::before { content:""; position:absolute; left:17px; top:36px; bottom:0; width:2px; background:var(--md-sys-color-outline-variant); }
.step.done:not(:last-child)::before { background:var(--md-sys-color-success); }
.step-marker { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--shape-full); font-weight:700; font-size:.95rem; background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface-variant); border:2px solid var(--md-sys-color-outline-variant); }
.step-marker .material-symbols-outlined { font-size:20px; }
.step.done .step-marker { background:var(--md-sys-color-success-container); color:var(--md-sys-color-success); border-color:var(--md-sys-color-success); }
.step.current .step-marker { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); border-color:var(--md-sys-color-primary); }
.step.todo .step-body { opacity:.7; }
.step.done .title { color:var(--md-sys-color-on-surface-variant); }
.step-body { padding-top:var(--sp-1); }
.step-how { margin:var(--sp-2) 0 0; padding-left:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-1); color:var(--md-sys-color-on-surface); }
.step.current .step-body { background:var(--md-sys-color-surface-container-low); border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--shape-md); padding:var(--sp-4); }
@media (max-width:620px){ .guide-progress{min-width:0;width:100%} }

/* ---- workspaces ---- */
/* Workspace switcher: a <details> in the app bar whose summary is the workspace chip and whose panel reuses the mobile menu look. */
/* Grouped app nav: "Tracking" and "Settings" open a panel like the workspace switcher; the entry
   the page sits under is tinted primary (aria-current on a link, data-current on a group). */
.nav-menu { position:relative; }
.nav-menu > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:2px; color:var(--md-sys-color-on-surface-variant); font-weight:500; font-size:.95rem; padding:8px 10px 8px 14px; border-radius:var(--shape-full); }
.nav-menu > summary::-webkit-details-marker { display:none; }
.nav-menu[open] > summary, .nav-menu > summary:hover { color:var(--md-sys-color-on-surface); background:var(--md-sys-color-surface-container-high); }
.nav-menu[open] > summary .material-symbols-outlined { transform:rotate(180deg); }
.nav-menu > summary .material-symbols-outlined { transition:transform var(--motion-short) var(--ease-standard); }
.nav-menu-panel { left:0; right:auto; top:44px; min-width:280px; }
.nav-menu-panel a { display:flex; align-items:flex-start; gap:var(--sp-3); }
.nav-menu-panel a .material-symbols-outlined { color:var(--md-sys-color-on-surface-variant); margin-top:2px; }
.nav-menu-panel a .micro { font-weight:400; }
.navlinks a[aria-current="page"], .nav-menu[data-current] > summary { color:var(--md-sys-color-primary); background:var(--md-sys-color-primary-container); }
.navlinks a[aria-current="page"]:hover, .nav-menu[data-current][open] > summary, .nav-menu[data-current] > summary:hover { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-primary); }
.appbar.app .navlinks .nav-admin[aria-current="page"] { color:var(--md-sys-color-on-tertiary-container); background:var(--md-sys-color-tertiary-container); }
.ws-switcher { position:relative; }
.ws-switcher > summary { list-style:none; cursor:pointer; }
.ws-switcher > summary::-webkit-details-marker { display:none; }
.ws-switcher[open] > summary, .ws-switcher > summary:hover { background:var(--md-sys-color-surface-container-highest); color:var(--md-sys-color-on-surface); }
.ws-switcher-panel { top:44px; right:auto; left:0; min-width:260px; max-width:min(360px, 90vw); }
.ws-switcher-panel form { display:block; }
.ws-switcher-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); width:100%; padding:var(--sp-3) var(--sp-4); border:0; border-radius:var(--shape-sm); background:transparent; color:var(--md-sys-color-on-surface); font:inherit; font-weight:500; text-align:left; cursor:pointer; }
.ws-switcher-row:hover { background:var(--md-sys-color-surface-container-high); }
.ws-switcher-row.current { color:var(--md-sys-color-primary); }
.ws-switcher-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Your workspaces page: the row for the workspace you are in */
tr.ws-current td { background:var(--md-sys-color-surface-container-low); }

/* ---- Material 3 polish: motion, code blocks, snackbar ---- */
@keyframes fade-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes menu-in { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes snack-in { from { opacity:0; transform:translate(-50%, 12px); } to { opacity:1; transform:translate(-50%, 0); } }
details[open] > .mobile-menu-panel, details[open] > .ws-switcher-panel, details[open] > .nav-menu-panel { animation:menu-in var(--motion-medium) var(--ease-emphasized); transform-origin:top right; }
.banner { animation:fade-in var(--motion-medium) var(--ease-standard); }
.meter > span { transition:width var(--motion-long) var(--ease-emphasized); }
.step.current .step-body { animation:fade-in var(--motion-medium) var(--ease-standard); }

/* Code block: a header with what the snippet is and a Copy action, then the code. Same
   surface in both themes so it reads as "code" against the page. */
.codeblock { margin:0; border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--shape-md); overflow:hidden; background:var(--md-sys-color-surface-container-highest); }
.codeblock-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-1) var(--sp-3); padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4); background:color-mix(in srgb, var(--md-sys-color-on-surface) 6%, var(--md-sys-color-surface-container-highest)); border-bottom:1px solid var(--md-sys-color-outline-variant); }
.codeblock-head > .row { margin-left:auto; }
.codeblock-head .btn { white-space:nowrap; }
.codeblock-title { font-size:var(--fs-caption); font-weight:600; color:var(--md-sys-color-on-surface-variant); display:inline-flex; align-items:center; gap:var(--sp-2); min-width:0; flex:1 1 auto; }
.codeblock-title .material-symbols-outlined { font-size:16px; }
.codeblock-lang { font-family:ui-monospace,Menlo,monospace; font-size:.7rem; font-weight:500; color:var(--md-sys-color-on-surface-variant); background:var(--md-sys-color-surface-container); border-radius:var(--shape-xs); padding:1px 6px; }
.codeblock pre { margin:0; padding:var(--sp-3) var(--sp-4); overflow-x:auto; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.82rem; line-height:1.6; color:var(--md-sys-color-on-surface); white-space:pre; tab-size:2; }
.codeblock.wrap pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.codeblock pre .c { color:var(--md-sys-color-primary); }        /* comment or note */
.codeblock pre .k { color:var(--md-sys-color-tertiary); }       /* placeholder the customer replaces */
.codeblock .btn.text { height:32px; padding:0 10px; font-size:.85rem; }
.codeblock .btn.text.copied { color:var(--md-sys-color-success); }
/* One-line value (a URL, a key): the same block without the header, copy at the right. */
.codeblock.line { display:flex; align-items:center; gap:var(--sp-2); padding-right:var(--sp-1); }
.codeblock.line pre { flex:1 1 auto; min-width:0; padding:var(--sp-2) var(--sp-4); white-space:nowrap; }
.codeblock.line .btn.text { flex:0 0 auto; }

/* Snackbar: one short confirmation at the bottom, Material inverse surface, disappears by itself. */
.snackbar { position:fixed; left:50%; bottom:var(--sp-6); transform:translateX(-50%); z-index:100; display:inline-flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5); border-radius:var(--shape-sm); background:var(--md-sys-color-inverse-surface); color:var(--md-sys-color-inverse-on-surface); font-size:.92rem; box-shadow:var(--elev-3); animation:snack-in var(--motion-medium) var(--ease-emphasized); max-width:calc(100vw - 32px); }
.snackbar .material-symbols-outlined { font-size:18px; color:var(--md-sys-color-inverse-primary); }
.snackbar.leaving { opacity:0; transition:opacity var(--motion-short) var(--ease-standard); }

/* Empty state: centred icon, one sentence, one action. */
.empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-3); padding:var(--sp-8) var(--sp-4); border:1px dashed var(--md-sys-color-outline-variant); border-radius:var(--shape-md); background:var(--surface-card-nested); }
.empty.compact { padding:var(--sp-5) var(--sp-4); }
.empty .body { max-width:44ch; margin:0; color:var(--md-sys-color-on-surface-variant); }
.empty-icon { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--shape-full); background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); }
.empty-icon .material-symbols-outlined { font-size:22px; }

/* Inline disclosure (not a card): chevron that rotates, no browser marker */
details.disclosure > summary { list-style:none; display:inline-flex; align-items:center; gap:var(--sp-1); color:var(--md-sys-color-primary); font-weight:500; }
details.disclosure > summary::-webkit-details-marker { display:none; }
details.disclosure > summary .material-symbols-outlined { font-size:20px; transition:transform var(--motion-medium) var(--ease-emphasized); }
details.disclosure[open] > summary .material-symbols-outlined { transform:rotate(180deg); }
details.disclosure[open] > :not(summary) { animation:fade-in var(--motion-medium) var(--ease-standard); }
/* Icons inside Material buttons */
md-filled-button [slot="icon"], md-outlined-button [slot="icon"], md-filled-tonal-button [slot="icon"] { font-size:18px; }

/* Regions swapped in place by m3.js dim while the new fragment loads */
[aria-busy="true"] { opacity:.55; transition:opacity var(--motion-short) var(--ease-standard); pointer-events:none; }

/* Secret fields: the saved state is a quiet line with a lock; the input only appears on Replace. */
/* Saved secret: a read-only outlined field, so it lines up with the fields around it. */
.secret-saved { --md-outlined-text-field-outline-color:var(--md-sys-color-outline-variant); letter-spacing:.04em; }
.secret-saved input { cursor:default; }
md-outlined-text-field .icon-btn { width:36px; height:36px; }
/* Two icon buttons in a text field's trailing slot. The slot box is 24px wide, so the field
   reserves 66px of trailing space and the buttons start at the slot and run into that space. */
.field-actions { display:inline-flex; align-items:center; gap:2px; width:24px; justify-content:flex-start; overflow:visible; }
.has-actions { --md-outlined-text-field-with-trailing-icon-trailing-space:62px; }
.stat.success { background:var(--md-sys-color-success-container); border-color:transparent; }
.stat.success .k { color:inherit; }
.stat.error { background:var(--md-sys-color-error-container); }          /* operator: a silent service, rejected events */
.stat .n.md { font-size:1.4rem; } .stat .n.sm { font-size:1.2rem; }      /* a word ("alive", "—") instead of a number */
.usage-meter { max-width:520px; }
.select-md { min-width:180px; } .select-sm { min-width:140px; }
.signal-name { width:150px; } .signal-pct { width:44px; }
.divider-top { border-top:1px solid var(--md-sys-color-outline-variant); }
.big-number { font-size:2rem; font-weight:800; line-height:1.1; }
.btn.text.danger { color:var(--md-sys-color-error); } .btn.text.sm { height:auto; padding:4px 8px; }
details.card > summary .summary-lead { font-weight:400; }
.nav-admin { color:var(--md-sys-color-tertiary); font-weight:700; }
.measure-sm { max-width:560px; }
.card.reveal { border-color:var(--md-sys-color-success); }
.stat-inline { font-size:1.8rem; line-height:1.1; }

/* Pager: row count left, page controls right, under a table. */
.pager { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-3); }
.pager-links { display:flex; align-items:center; gap:var(--sp-1); margin-left:auto; }
.pager-num { min-width:36px; height:36px; padding:0 var(--sp-2); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--shape-full); font:inherit; font-size:.9rem; color:var(--md-sys-color-on-surface); text-decoration:none; transition:background var(--motion-short) var(--ease-standard); }
a.pager-num:hover { background:var(--md-sys-color-surface-container-high); }
.pager-num.current { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); font-weight:600; }
.pager-gap { padding:0 var(--sp-1); color:var(--md-sys-color-on-surface-variant); }
.pager .icon-btn.disabled { opacity:.35; pointer-events:none; }
.pad-3 { padding:0 var(--sp-4) var(--sp-3); }
.my-2 { margin-block:var(--sp-4); } .pt-0 { padding-top:0; } .pl-0 { padding-left:0; } .py-2 { padding-block:var(--sp-4); } .no-underline { text-decoration:none; } .semibold { font-weight:600; }
/* Off-screen but in the DOM: the honeypot field on hosted forms, the textarea the copy fallback selects. */
.offscreen { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
/* Invite page: one centred card on the hero background. */
.invite-wrap { min-height:100vh; display:grid; place-items:center; padding:var(--sp-8); }
.invite-card { max-width:440px; width:100%; position:relative; z-index:1; padding:36px; }
/* Hosted conversion form: one centred card on a tinted page. */
.pf-wrap { min-height:100vh; display:grid; place-items:center; padding:var(--sp-6); background:var(--md-sys-color-surface-container-low); }
.pf-card { width:100%; max-width:480px; padding:28px; }
.brand.sm { font-size:1.05rem; }
/* Operator app bar: tertiary logo, an "operator" suffix, links in the bar's own colour. */
.brand .logo.tertiary { background:var(--md-sys-color-tertiary); color:var(--md-sys-color-on-tertiary); }
.brand-suffix { font-weight:500; opacity:.7; margin-left:6px; }
.appbar.admin .navlinks a { color:inherit; }
/* Operator overview: a larger status chip in the header, a 14-day sign-up sparkline, a usage column that never squeezes. */
.chip.lg { font-size:.95rem; padding:8px 14px; }
.spark { height:44px; }
.spark-bar { width:10px; background:var(--md-sys-color-primary); border-radius:3px; }
.spark-bar.zero { opacity:.25; }
table.m3 td.col-usage { min-width:160px; }
.chip-cloud .chip { margin:1px; }
/* Operator logs: messages keep their line breaks; the "nothing matches" row gets room. */
.log-msg { margin:0; font:inherit; white-space:pre-wrap; word-break:break-word; }
table.m3 td.empty-row { padding:var(--sp-6); }
/* Long-form guides (layouts/article.html, the funnel audit): headings and copy inside .prose. */
.prose h2 { font-family:var(--md-ref-typeface-brand); font-size:1.5rem; font-weight:700; margin:16px 0 0; }
.prose h3 { font-size:1.15rem; font-weight:700; margin:8px 0 0; }
.prose p, .prose ul { color:var(--md-sys-color-on-surface-variant); line-height:1.7; margin:0; }
.prose ul { padding-left:1.25rem; }
.prose li { margin:4px 0; }
/* Funnel audit: answer buttons and the ranked fixes. */
.audit-opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 16px; border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--shape-md); background:var(--md-sys-color-surface); color:var(--md-sys-color-on-surface); font:inherit; cursor:pointer; }
.audit-opt:hover { background:var(--md-sys-color-surface-container-low); }
.audit-opt .material-symbols-outlined { color:var(--md-sys-color-primary); }
.fix { display:flex; gap:14px; padding:16px; border-radius:var(--shape-md); background:var(--md-sys-color-surface); border:1px solid var(--md-sys-color-outline-variant); }
.fix .rank { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); font-weight:700; flex-shrink:0; }

/* Detail modal: a wide sheet on desktop, full screen on phones. Opened by clicking a table row
   that carries data-detail="/details/…"; the fragment is fetched and placed in .modal-body. */
.modal { width:min(960px, calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 32px); margin:auto; padding:0; border:0; border-radius:var(--shape-lg); background:var(--surface-card); color:var(--md-sys-color-on-surface); box-shadow:var(--elev-2); }
.modal::backdrop { background:rgba(10, 8, 24, .5); }
.modal[open] { display:flex; flex-direction:column; animation:fade-in var(--motion-medium) var(--ease-standard); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-8); border-bottom:1px solid var(--md-sys-color-outline-variant); }
.modal-head h2 { min-width:0; overflow-wrap:anywhere; font-size:1.4rem; line-height:1.25; }
.modal-head .icon-btn { width:44px; height:44px; flex:0 0 auto; }
.modal-body { padding:var(--sp-6) var(--sp-8) var(--sp-8); overflow:auto; font-size:.95rem; line-height:1.55; }
.modal-body[aria-busy="true"] { min-height:160px; }
.detail-sub { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin:0 0 var(--sp-6); }
.detail-sub .caption { font-size:.85rem; }
.detail-section + .detail-section { margin-top:28px; padding-top:var(--sp-6); border-top:1px solid var(--md-sys-color-outline-variant); }
.detail-section > .title { font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--md-sys-color-on-surface-variant); margin:0 0 var(--sp-3); }
.detail-grid { display:grid; grid-template-columns:minmax(160px, 220px) 1fr; column-gap:var(--sp-6); row-gap:0; margin:0; }
.detail-grid dt, .detail-grid dd { padding:var(--sp-3) 0; border-bottom:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); }
.detail-grid dt { color:var(--md-sys-color-on-surface-variant); font-size:.85rem; font-weight:600; line-height:1.5; }
.detail-grid dd { margin:0; min-width:0; overflow-wrap:anywhere; font-size:.95rem; line-height:1.5; }
.detail-grid dt:last-of-type, .detail-grid dd:last-of-type { border-bottom:0; }
.detail-grid dd .mono { font-size:.9rem; }
.detail-grid dd .chip { vertical-align:middle; margin-right:var(--sp-1); }
.detail-grid dd .codeblock { margin:2px 0; }
.detail-grid dd .codeblock pre { font-size:.8rem; }
tr[data-detail] { cursor:pointer; }
tr[data-detail]:hover > td { background:color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent); }
tr[data-detail]:focus-visible { outline:2px solid var(--md-sys-color-primary); outline-offset:-2px; }
@media (max-width:620px) {
  .modal { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; margin:0; }
  .modal-head { padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }
  .modal-head h2 { font-size:1.2rem; }
  .modal-body { padding:var(--sp-4) var(--sp-4) var(--sp-6); }
  .detail-grid { grid-template-columns:1fr; }
  .detail-grid dt { padding:var(--sp-3) 0 2px; border-bottom:0; font-size:.78rem; }
  .detail-grid dd { padding:0 0 var(--sp-3); }
}

/* Guided tour (Driver.js). Popover uses our tokens so it matches both themes. */
.driver-popover.tm-tour { background:var(--surface-card); color:var(--md-sys-color-on-surface); border-radius:var(--shape-lg); box-shadow:var(--elev-2); padding:var(--sp-5) var(--sp-5) var(--sp-4); max-width:360px; font-family:var(--md-ref-typeface-plain); }
.driver-popover.tm-tour .driver-popover-title { font-family:var(--md-ref-typeface-brand); font-size:1.1rem; font-weight:800; letter-spacing:-.01em; line-height:1.25; margin:0 28px var(--sp-2) 0; }
.driver-popover.tm-tour .driver-popover-description { font-size:.95rem; line-height:1.5; color:var(--md-sys-color-on-surface-variant); }
.driver-popover.tm-tour .tm-tour-count { display:block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--md-sys-color-primary); margin-bottom:var(--sp-1); }
.driver-popover.tm-tour .driver-popover-close-btn { color:var(--md-sys-color-on-surface-variant); width:36px; height:36px; font-size:22px; top:8px; right:8px; border-radius:var(--shape-full); }
.driver-popover.tm-tour .driver-popover-close-btn:hover { background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface); }
.driver-popover.tm-tour .driver-popover-footer { margin-top:var(--sp-4); gap:var(--sp-2); }
.driver-popover.tm-tour .driver-popover-navigation-btns { gap:var(--sp-2); }
.driver-popover.tm-tour .driver-popover-navigation-btns button { text-shadow:none; border:0; border-radius:var(--shape-full); height:36px; padding:0 16px; font:600 .9rem var(--md-ref-typeface-plain); background:transparent; color:var(--md-sys-color-primary); }
.driver-popover.tm-tour .driver-popover-next-btn { background:var(--md-sys-color-primary) !important; color:var(--md-sys-color-on-primary) !important; }
.driver-popover.tm-tour .driver-popover-navigation-btns button:hover { background:var(--md-sys-color-surface-container-high); }
.driver-popover.tm-tour .driver-popover-next-btn:hover { filter:brightness(1.08); }
.driver-popover.tm-tour .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color:var(--surface-card); }
.driver-popover.tm-tour .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color:var(--surface-card); }
.driver-popover.tm-tour .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color:var(--surface-card); }
.driver-popover.tm-tour .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color:var(--surface-card); }
.driver-active-element { border-radius:var(--shape-lg); }
@media (max-width:620px) { .driver-popover.tm-tour { max-width:calc(100vw - 24px); } }

/* ---------- phones (≤620px) ----------
   Narrower gutters so content gets the width, stats two-up instead of one tall column,
   numeric tables keep their first column in view while the rest scrolls, and long
   addresses in stacked rows get the whole line. */
@media (max-width:620px){
  :root { --card-pad: var(--sp-5); --card-pad-compact: var(--sp-4); --page-pad-y: var(--sp-6); --page-pad-bottom: var(--sp-12); }
  .container { padding-inline:16px; }
  .appbar .container { height:60px; }
  .appbar.admin .brand-suffix { display:none; } .appbar.admin .navlinks a { padding:8px 10px; } .appbar.admin .btn { white-space:nowrap; }
  .appbar { backdrop-filter:none; background:var(--md-sys-color-surface); }   /* blur is costly on phones while scrolling */
  .page-header { margin-bottom:var(--sp-5); }
  .grid { gap:var(--sp-4); }
  .grid.cols-4 { grid-template-columns:repeat(2,1fr); }
  .stat { padding:var(--sp-4); }
  .stat .n { font-size:1.8rem; }
  .stat .k { font-size:.85rem; }
  /* Numeric tables: sticky first column, and a fade on the right while more columns are hidden (m3.js sets .scrolls-more). */
  table.m3:not(.cards) th:first-child, table.m3:not(.cards) td:first-child { position:sticky; left:0; z-index:1; background:var(--surface-card); box-shadow:1px 0 0 var(--md-sys-color-outline-variant); }
  table.m3:not(.cards) thead th:first-child { z-index:2; background:var(--md-sys-color-surface-container-high); }
  table.m3:not(.cards) tbody tr:hover td:first-child { background:var(--surface-card); }
  .table-wrap.scrolls-more { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 56px), rgba(0,0,0,.12)); mask-image:linear-gradient(to right, #000 calc(100% - 56px), rgba(0,0,0,.12)); }
  /* Stacked rows: addresses and emails take the whole line under their label instead of a truncated half. */
  table.m3.cards td.url, table.m3.cards td.stack-sm { flex-direction:column; align-items:stretch; gap:2px; }
  table.m3.cards td.url::before, table.m3.cards td.stack-sm::before { flex:none; }
  table.m3.cards td.url > *, table.m3.cards td.stack-sm > * { text-align:left; }
  /* Disclosure cards: the lead drops under the title, the chevron stays on the title line. */
  details.card > summary { flex-wrap:wrap; }
  details.card > summary .summary-lead { flex:1 1 100%; order:3; }
}

/* ---------- charts (inline SVG, geometry from domain/charts.py) ----------
   Series colours are theme tokens; the plot stretches to its box and keeps
   strokes thin with vector-effect, while axis labels are plain HTML. */
.series-clicks { --series: var(--md-sys-color-primary); }
.series-joins { --series: var(--md-sys-color-tertiary); }
.series-dms { --series: var(--md-sys-color-secondary); }
.series-deposits { --series: var(--md-sys-color-success); }
.chart-wrap { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:var(--sp-2); }
.chart-y { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; height:220px; min-width:44px; font-variant-numeric:tabular-nums; }
.chart-y span { line-height:1; transform:translateY(-50%); }
.chart-y span:first-child { transform:none; } .chart-y span:last-child { transform:translateY(-100%); }
.chart-plot { display:block; width:100%; height:220px; overflow:visible; }
.chart-grid { stroke:var(--md-sys-color-outline-variant); stroke-width:1px; vector-effect:non-scaling-stroke; }
.chart-base { stroke:var(--md-sys-color-outline); }
.chart-line { fill:none; stroke:var(--series); stroke-width:2px; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.chart-area { fill:var(--series); opacity:.08; }
.chart-hit { fill:transparent; }
.chart-hit:hover { fill:color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
.chart-x { grid-column:2; display:flex; justify-content:space-between; margin-top:var(--sp-2); }
.chart-legend { list-style:none; margin:var(--sp-4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); font-size:var(--fs-body-s); color:var(--md-sys-color-on-surface-variant); }
.chart-legend.stack { flex-direction:column; gap:var(--sp-2); margin:0; }
.chart-legend li { display:inline-flex; align-items:center; gap:var(--sp-2); }
.chart-legend .tnum { color:var(--md-sys-color-on-surface); }
.swatch { display:inline-block; width:12px; height:12px; border-radius:3px; background:var(--series, var(--md-sys-color-outline)); }
/* Sparklines inside the headline cards: last seven days, top right. */
.stat.has-spark { position:relative; }
.stat .spark { position:absolute; right:var(--sp-5); top:var(--sp-5); width:88px; height:28px; overflow:visible; }
.stat .spark path { fill:none; stroke:var(--series); stroke-width:2px; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.9; }
.stat.success .spark path { stroke:var(--md-sys-color-on-success-container, var(--md-sys-color-success)); }
/* Drop-off bars */
.funnel-fig { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.funnel-head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-1); }
.funnel-track { height:12px; border-radius:var(--shape-full); background:var(--md-sys-color-surface-container-high); overflow:hidden; }
.funnel-bar { display:block; height:100%; border-radius:inherit; background:var(--series); transition:width var(--motion-medium) var(--ease-standard); }
.funnel-step .caption { margin-top:var(--sp-1); }
/* Delivery ring */
.ring-row { display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.ring { position:relative; width:112px; height:112px; flex:0 0 auto; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:4; }
.ring-track { stroke:var(--md-sys-color-surface-container-high); }
.ring-sent { stroke:var(--md-sys-color-success); }
.ring-pending { stroke:var(--md-sys-color-tertiary); }
.ring-skipped { stroke:var(--md-sys-color-outline); }
.ring-failed { stroke:var(--md-sys-color-error); }
.swatch.ring-sent { background:var(--md-sys-color-success); } .swatch.ring-pending { background:var(--md-sys-color-tertiary); }
.swatch.ring-skipped { background:var(--md-sys-color-outline); } .swatch.ring-failed { background:var(--md-sys-color-error); }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.ring-pct { font-family:var(--md-ref-typeface-brand); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; }
@media (max-width:620px) {
  .chart-y, .chart-plot { height:170px; }
  .stat .spark { right:var(--sp-4); top:var(--sp-4); width:64px; height:22px; }
  .stat.has-spark .n { padding-right:72px; }
}

/* ---------- pricing: monthly / annual toggle (CSS only, the checkbox drives :has) ---------- */
.pricing-toggle { display:flex; justify-content:center; margin-bottom:var(--sp-6); }
.pricing-toggle-track { display:inline-flex; padding:4px; border-radius:var(--shape-full); background:var(--md-sys-color-surface-container-high); border:1px solid var(--md-sys-color-outline-variant); cursor:pointer; user-select:none; }
.pricing-toggle .opt { display:inline-flex; align-items:center; gap:var(--sp-2); padding:8px 16px; border-radius:var(--shape-full); font-weight:600; font-size:.95rem; color:var(--md-sys-color-on-surface-variant); transition:background var(--motion-short) var(--ease-standard), color var(--motion-short) var(--ease-standard); }
.pricing-toggle .opt .chip { font-size:.72rem; height:22px; padding:0 8px; }
.pricing:not(:has(#annual-toggle:checked)) .opt.month, .pricing:has(#annual-toggle:checked) .opt.year { background:var(--surface-card); color:var(--md-sys-color-on-surface); box-shadow:var(--elev-1); }
.pricing #annual-toggle:focus-visible + .pricing-toggle-track { outline:2px solid var(--md-sys-color-primary); outline-offset:2px; }
.pricing .price-year { display:none; }
.pricing:has(#annual-toggle:checked) .price-month { display:none; }
.pricing:has(#annual-toggle:checked) .price-year { display:inline-flex; }
.pricing:has(#annual-toggle:checked) .overage-opt { display:none; }
.price-month, .price-year { display:inline-flex; align-items:baseline; gap:var(--sp-1); }
.overage-opt { align-items:flex-start; text-align:left; }
@media (max-width:620px) { .pricing-toggle .opt { padding:8px 12px; font-size:.9rem; } }

/* ---------- dashboard filters, section nav, deltas, chart toggles ---------- */
.filter-bar { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.filter-bar md-outlined-select { flex:1 1 150px; min-width:0; --md-outlined-field-container-shape:8px; }
.filter-bar .select-sm { flex:0 1 160px; }
.section-nav { display:flex; gap:var(--sp-1); overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.section-nav::-webkit-scrollbar { display:none; }
.section-nav a { flex:0 0 auto; padding:6px 14px; border-radius:var(--shape-full); font-size:var(--fs-body-s); font-weight:600; color:var(--md-sys-color-on-surface-variant); background:var(--md-sys-color-surface-container); }
.section-nav a:hover { background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface); text-decoration:none; }
[id] { scroll-margin-top:84px; }
.delta { display:inline-flex; align-items:center; gap:2px; margin-top:var(--sp-2); padding:2px 8px 2px 4px; border-radius:var(--shape-full); font-size:var(--fs-micro); font-weight:700; letter-spacing:.02em; background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface-variant); }
.delta .material-symbols-outlined { font-size:14px; }
.delta.up { background:var(--md-sys-color-success-container); color:var(--md-sys-color-on-success-container, var(--md-sys-color-success)); }
.delta.down { background:var(--md-sys-color-error-container); color:var(--md-sys-color-on-error-container, var(--md-sys-color-error)); }
.stat.success .delta { background:color-mix(in srgb, var(--md-sys-color-on-success-container) 14%, transparent); color:inherit; }
.stat > .caption { display:block; margin-top:var(--sp-1); }
.chart-toggles { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-bottom:var(--sp-3); font-size:var(--fs-body-s); color:var(--md-sys-color-on-surface-variant); }
.chart-toggle { display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer; user-select:none; padding:4px 10px 4px 6px; border-radius:var(--shape-full); border:1px solid transparent; }
.chart-toggle:has(input:focus-visible) { outline:2px solid var(--md-sys-color-primary); outline-offset:2px; }
.chart-toggle:has(input:not(:checked)) { opacity:.45; border-color:var(--md-sys-color-outline-variant); }
.chart-toggle:has(input:not(:checked)) .swatch { background:transparent; box-shadow:inset 0 0 0 2px var(--series); }
.chart-toggle .tnum { color:var(--md-sys-color-on-surface); }
.trend:has([data-series="clicks"]:not(:checked)) .series-clicks:not(.chart-toggle),
.trend:has([data-series="joins"]:not(:checked)) .series-joins:not(.chart-toggle),
.trend:has([data-series="dms"]:not(:checked)) .series-dms:not(.chart-toggle),
.trend:has([data-series="deposits"]:not(:checked)) .series-deposits:not(.chart-toggle) { display:none; }
.chart-bar { fill:var(--series); opacity:.75; }
.chart-bar:hover { opacity:1; }
@media (max-width:620px) {
  .filter-bar md-outlined-select { flex-basis:calc(50% - var(--sp-3)); }
  .filter-bar .select-sm { flex-basis:100%; }
}

/* ---------- legal pages (Terms, Privacy, DPA) ---------- */
.legal-prose h2 { font-family:var(--md-ref-typeface-brand); font-size:1.4rem; font-weight:700; margin:32px 0 8px; }
.legal-prose h3 { font-size:1.1rem; font-weight:700; margin:20px 0 6px; }
.legal-prose p { color:var(--md-sys-color-on-surface-variant); line-height:1.7; margin:0 0 12px; }
.legal-prose ul, .legal-prose ol { color:var(--md-sys-color-on-surface-variant); line-height:1.7; margin:0 0 12px; padding-left:1.3rem; }
.legal-prose li { margin:4px 0; }
.legal-prose a { color:var(--md-sys-color-primary); }
.legal-prose strong { color:var(--md-sys-color-on-surface); }
.legal-prose table { width:100%; border-collapse:collapse; margin:0 0 16px; font-size:.92rem; color:var(--md-sys-color-on-surface-variant); }
.legal-prose th, .legal-prose td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--md-sys-color-outline-variant); }
.legal-prose th { color:var(--md-sys-color-on-surface); }
.legal-prose hr { border:0; border-top:1px solid var(--md-sys-color-outline-variant); margin:32px 0; }
.legal-identity { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:0 0 16px; padding:16px 20px; border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--shape-md); background:var(--surface-card); font-size:.95rem; }
.legal-identity dt { color:var(--md-sys-color-on-surface-variant); }
.legal-identity dd { margin:0; color:var(--md-sys-color-on-surface); }
.legal-toc { columns:2; column-gap:var(--sp-6); padding-left:1.3rem; margin:0 0 var(--sp-6); }
@media (max-width:620px) { .legal-identity { grid-template-columns:1fr; gap:2px; } .legal-identity dt { margin-top:8px; } .legal-toc { columns:1; } }

/* ---------- Ad accounts hub ---------- */
.platform-grid { gap:var(--sp-4); }
.platform-card { display:flex; flex-direction:column; }
.platform-card.soon { opacity:.72; }
.platform-card .platform-foot { margin-top:auto; padding-top:var(--sp-3); }
.platform-stats { color:var(--md-sys-color-on-surface-variant); }
.platform-stats strong { color:var(--md-sys-color-on-surface); font-weight:700; }
.platform-mark { width:24px; height:24px; fill:currentColor; }
.icon-badge.lg .platform-mark { width:28px; height:28px; }
.icon-badge.sm .platform-mark { width:18px; height:18px; }
.icon-badge.platform-meta { background:color-mix(in srgb, #1877f2 16%, var(--surface-card)); color:#1877f2; }
.icon-badge.platform-tiktok { background:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, var(--surface-card)); color:var(--md-sys-color-on-surface); }
.icon-badge.platform-google { background:color-mix(in srgb, #4285f4 16%, var(--surface-card)); color:#4285f4; }
.icon-badge.platform-snapchat { background:#fffc00; color:#000; }
.icon-badge.platform-openai { background:color-mix(in srgb, #10a37f 16%, var(--surface-card)); color:#10a37f; }
.icon-badge.platform-reddit { background:color-mix(in srgb, #ff4500 16%, var(--surface-card)); color:#ff4500; }
.icon-badge.platform-spotify { background:color-mix(in srgb, #1db954 16%, var(--surface-card)); color:#1db954; }
.icon-badge.platform-telegram { background:color-mix(in srgb, #26a5e4 16%, var(--surface-card)); color:#26a5e4; }
.icon-badge.xs { width:26px; height:26px; border-radius:8px; } .icon-badge.xs .platform-mark { width:15px; height:15px; }
.icon-badge.off { filter:grayscale(1); opacity:.3; }
.mark-row { display:flex; gap:4px; flex-wrap:nowrap; }
.chip-stack { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.chip-stack .chip { max-width:150px; white-space:normal; line-height:1.25; }
table.m3 .chip.nowrap { white-space:nowrap; }
table.m3 td.col-customer { min-width:220px; }
.icon-badge.platform-whop { background:color-mix(in srgb, #ff6243 16%, var(--surface-card)); color:#ff6243; }
@media (max-width:620px) { .platform-grid { grid-template-columns:1fr; } }

/* Deposits page: the pending tile turns amber while something waits; the search box shares the filter bar. */
.stat.warn { background:var(--md-sys-color-tertiary-container); color:var(--md-sys-color-on-tertiary-container); border-color:transparent; }
.stat.warn .k { color:inherit; }
.filter-bar .filter-search { flex:2 1 260px; min-width:0; --md-outlined-field-container-shape:8px; }
@media (max-width: 620px){ .filter-bar .filter-search { flex-basis:100%; } }

/* Operator console: grouped log errors, customer initials, the row's three actions. */
.error-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.error-list li { padding:var(--sp-3) 0; border-top:1px solid var(--md-sys-color-outline-variant); display:flex; flex-direction:column; gap:4px; min-width:0; }
.error-list li:first-child { border-top:0; padding-top:0; }
.error-list .error-msg { color:var(--md-sys-color-on-surface); text-decoration:none; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.error-list .error-msg:hover { text-decoration:underline; }
.avatar { flex:0 0 auto; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--shape-full); background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); font-weight:600; }
table.m3.customers td { vertical-align:middle; }
.row-actions { display:flex; gap:2px; justify-content:flex-end; flex-wrap:nowrap; }

/* Operator sign-in: authenticator set-up (QR on white so every camera reads it, key for typing). */
.totp-setup { display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap; margin:var(--sp-2) 0 var(--sp-4); }
.totp-qr { border-radius:12px; background:#fff; border:1px solid var(--md-sys-color-outline-variant); }
.totp-key { font-size:.95rem; letter-spacing:.04em; overflow-wrap:anywhere; }