@layer console-reset, legacy-base, components, utilities;
@layer legacy-base {
/* Shared app theming. Loaded by every page (except loop.html/manage.html, which
   carry their own). Strategy: the app's native look is DARK, so we DON'T touch
   dark mode — pages keep their own :root palette. We only add a LIGHT palette,
   at higher specificity (:root[data-theme="light"] beats a page's :root), so
   toggling to light overrides the shared color tokens everywhere. theme.js
   stamps data-theme on <html> from the saved preference or the OS setting. */

/* Default (dark) value for the sticky-nav backdrop token used by the pages after
   we tokenised their hardcoded rgba() navs. Overridden in the light block below. */
:root{ --nav-bg:rgba(9,9,11,0.8); }

:root[data-theme="light"]{
  --nav-bg:rgba(255,255,255,0.82);
  /* grounds & surfaces (both --surface-N and --sN naming conventions) */
  --bg:#faf9fb;
  --surface-1:#ffffff; --surface-2:#f4f3f7; --surface-3:#ecebf2;
  --s1:#ffffff; --s2:#f4f3f7; --s3:#ecebf2; --card-color:#ffffff;
  /* ink */
  --text:#17161f; --text-1:#17161f; --text-2:#4a4956; --text-3:#6a6977;
  --muted:#5c5b69; --faint:#8a8896;
  /* brand (indigo, tuned for light grounds) */
  --brand:#5b57e0; --brand-2:#6d6bd6; --accent:#5b57e0; --brand-light:#6d6bd6;
  /* Link text. The consoles set a LIGHTER indigo for dark grounds; on white the
     same value would be the unreadable half of the same problem. */
  --brand-text:#4b46d6;
  --brand-dim:rgba(91,87,224,.10); --brand-glow:rgba(91,87,224,.22);
  /* borders */
  --border:rgba(20,19,26,.12); --border-2:rgba(20,19,26,.12); --border-strong:rgba(20,19,26,.20); --border-hover:rgba(20,19,26,.30);
  /* semantic — darker than the dark-mode equivalents on purpose. These land on
     white cards and on their own 14%-tint chips, where the dark palette's
     brighter greens and ambers came out at 3.5:1 and a status like "live" or a
     readiness score read as decoration rather than as text. Each value is the
     lightest that still clears 4.5:1 against EVERY ground it is used on: the
     page, a white card, and the tinted pill. */
  --good:#00703f; --success:#00703f; --ok:#00703f; --green:#00703f; --live:#00703f; --partial:#974f00;
  --warn:#974f00; --warning:#974f00; --amber:#974f00; --star:#8a5400;
  --danger:#b90d00; --bad:#b90d00;
  /* the "owner surfaces" accent trio (roles kept, tuned for light) */
  --owner-you:#5b57e0; --owner-agent:#0e9b6a; --owner-spec:#b26a10;
  /* shadows: soft, dark on light */
  --shadow-sm:0 1px 2px rgba(20,19,26,.06);
  --shadow-md:0 2px 8px rgba(20,19,26,.08);
  --shadow-lg:0 12px 32px rgba(20,19,26,.12);
  --shadow:0 2px 8px rgba(20,19,26,.08);
  color-scheme:light;
}
:root[data-theme="dark"]{ color-scheme:dark; }

/* Light-mode contrast fixes, on tokens.
   These six rules hand-rolled what the design system now derives: they pinned a
   DARK INDIGO as type because the light indigo above them was invisible on a
   light ground. That was the right fix for a platform whose brand was indigo
   for ever. It is the wrong one for a platform whose brand is data — the brand
   went lime and these kept painting last year's colour as text on /business,
   /manage, /agent, /connect, /protocol and /discover, at a specificity most
   pages do not override.
   --brand-text IS this rule, computed: signalInk per mode, and the one value
   the publish gate measures at 4.5:1 against the canvas and the surface. */
:root[data-theme="light"] .btn-brand{ color:var(--brand-text); background:var(--brand-dim); border-color:color-mix(in srgb, var(--brand) 42%, transparent); }
:root[data-theme="light"] .btn-brand:hover{ color:var(--brand-text); background:color-mix(in srgb, var(--brand) 16%, transparent); }
:root[data-theme="light"] .seg button.on{ color:var(--brand-text); }
:root[data-theme="light"] .tier-strong{ color:var(--brand-text); }
:root[data-theme="light"] .k{ color:var(--brand-text); }
:root[data-theme="light"] .source-reply b{ color:var(--brand-text); }

/* Floating theme toggle injected by theme.js */
.agoria-theme-toggle{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  display:inline-flex; gap:2px; padding:3px; border-radius:999px;
  background:var(--surface-2,#161619); border:1px solid var(--border,rgba(255,255,255,.12));
  box-shadow:var(--shadow-md,0 4px 16px rgba(0,0,0,.4)); font-family:var(--font,system-ui,sans-serif);
}
.agoria-theme-toggle button{
  /* --muted, not --faint: this is the inactive half of a CONTROL, not a
     de-emphasised caption, and --faint lands at 4.4:1 on the toggle's own
     ground. */
  border:0; background:transparent; color:var(--muted,#8a8896); cursor:pointer;
  width:30px; height:26px; border-radius:999px; font-size:14px; line-height:1; transition:all .15s;
}
.agoria-theme-toggle button:hover{ color:var(--text,#fff); }
/* The active half is a RAISED thumb, not a tinted one. A brand tint on top of
   the toggle's own inset ground stacked two darkenings under brand-coloured
   type and landed it at 4.42:1; the raised surface is the lighter ground and
   is what a segmented control looks like anyway. */
.agoria-theme-toggle button.on{ background:var(--surface-1,#fff); color:var(--brand-text,#333); }
@media print{ .agoria-theme-toggle{ display:none; } }

}

@layer legacy-base, reset, tokens, foundation, components, profiles, utilities, legacy;
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic-400-latin-ext.woff2?v=903f5ada) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic-400-latin.woff2?v=3ac4b010) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/newsreader-normal-400-600-latin-ext.woff2?v=945685a5) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/newsreader-normal-400-600-latin.woff2?v=3c940d21) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/plex-sans-normal-400-600-latin-ext.woff2?v=b480cc79) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/plex-sans-normal-400-600-latin.woff2?v=6148594d) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-normal-400-latin-ext.woff2?v=108d5090) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-normal-400-latin.woff2?v=2c9bacf0) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@layer tokens {
html:root:root{
  --ag-canvas:#15130F; --ag-surface:#1C1A15; --ag-surface-raised:#24211B; --ag-surface-inset:#0F0E0B;
  --ag-ink:#F3EFE4; --ag-ink-muted:#BDB7A8; --ag-ink-faint:#A49D8E;
  --ag-ink-2:#BDB7A8; --ag-ink-3:#A49D8E;
  --ag-box-edge:color-mix(in srgb, #F3EFE4 22%, transparent);
  --ag-positive-label:#80a991; --ag-warning-label:#bca06c;
  --ag-danger-label:#d48b83; --ag-info-label:#97a1d7;
  --ag-line:rgba(243,239,228,.12); --ag-line-strong:#84817A;
  --ag-signal:#F3EFE4; --ag-signal-ink:#9DB0FF;
  --ag-signal-soft:rgba(243,239,228,.09);
  --ag-signal-ink-soft:color-mix(in srgb, #9DB0FF 14%, transparent);
  --ag-row-hover:rgba(243,239,228,.05);
  --ag-signal-contrast:#15130F;
  --ag-signal-on-ink:#F3EFE4;
  --ag-focus:#9DB0FF;
  --ag-positive:#1E6B45; --ag-warning:#8A5A00; --ag-danger:#B3261E; --ag-info:#2339B8;
  --ag-positive-ink:#4f8b6e; --ag-warning-ink:#a47e38;
  --ag-danger-ink:#c7605a; --ag-info-ink:#707fd1;
  --ag-positive-contrast:#ffffff; --ag-warning-contrast:#ffffff;
  --ag-danger-contrast:#ffffff; --ag-info-contrast:#ffffff;
  --ag-attention:#FFD84D; --ag-attention-contrast:#17150F;
  --ag-attention-soft:color-mix(in srgb, #FFD84D 14%, transparent); --ag-mark:#5A4E1B;
  color-scheme:dark;
  --bg:var(--ag-canvas); --surface:var(--ag-surface); --surface-1:var(--ag-surface); --s1:var(--ag-surface);
  --surface-2:var(--ag-surface-inset); --s2:var(--ag-surface-inset);
  --surface-3:var(--ag-surface-raised); --s3:var(--ag-surface-raised); --card-color:var(--ag-surface);
  --text:var(--ag-ink); --text-1:var(--ag-ink); --text-2:var(--ag-ink-muted); --text-3:var(--ag-ink-faint);
  --muted:var(--ag-ink-muted); --faint:var(--ag-ink-faint);
  --brand:var(--ag-signal); --brand-2:var(--ag-signal); --brand-text:var(--ag-signal-ink);
  --accent-contrast:var(--ag-signal-contrast); --brand-contrast:var(--ag-signal-contrast);
  --good-contrast:var(--ag-positive-contrast); --warn-contrast:var(--ag-warning-contrast);
  --bad-contrast:var(--ag-danger-contrast); --info-contrast:var(--ag-info-contrast);
  --brand-light:var(--ag-signal-ink); --accent:var(--ag-signal-ink); --gp-accent:var(--ag-signal-ink);
  --brand-dim:var(--ag-signal-soft); --brand-glow:var(--ag-signal-soft);
  --brand-ink-dim:var(--ag-signal-ink-soft);
  --border:var(--ag-line); --border-2:var(--ag-line); --border-strong:var(--ag-line-strong);
  --border-hover:var(--ag-line-strong); --line:var(--ag-line);
  --good:var(--ag-positive-label); --success:var(--ag-positive-label); --ok:var(--ag-positive-label);
  --green:var(--ag-positive-label); --live:var(--ag-positive-label);
  --warn:var(--ag-warning-label); --warning:var(--ag-warning-label); --amber:var(--ag-warning-label);
  --star:var(--ag-warning-label); --partial:var(--ag-warning-label);
  --danger:var(--ag-danger-label); --bad:var(--ag-danger-label);
  --good-fill:var(--ag-positive); --warn-fill:var(--ag-warning); --bad-fill:var(--ag-danger);
  --good-dim:color-mix(in srgb, #1E6B45 14%, transparent); --warn-dim:color-mix(in srgb, #8A5A00 14%, transparent); --bad-dim:color-mix(in srgb, #B3261E 14%, transparent);
  --nav-bg:var(--ag-surface); --seg-track:var(--ag-surface-inset); --seg-thumb:var(--ag-surface-raised);
  --ag-button-tint:color-mix(in srgb, #9DB0FF 14%, transparent);
  --ag-button-edge:color-mix(in srgb, #9DB0FF 55%, transparent);
  --ag-button-ink:#9db0ff;
  --grad-1:var(--ag-ink); --grad-2:var(--ag-ink); --grad-3:var(--ag-ink);
  --app-bg:var(--ag-canvas); --app-s1:var(--ag-surface); --app-s2:var(--ag-surface-inset); --app-s3:var(--ag-surface-raised);
  --app-text:var(--ag-ink); --app-muted:var(--ag-ink-muted); --app-faint:var(--ag-ink-faint);
  --app-border:var(--ag-line); --app-border-2:var(--ag-line-strong);
  --app-brand:var(--ag-signal-ink); --app-brand-2:var(--ag-signal); --app-brand-dim:var(--ag-signal-soft);
  --app-brand-text:var(--ag-signal-ink);
  --app-brand-contrast:#111111;
  --app-brand-2-contrast:var(--ag-signal-contrast);
    --app-good:var(--ag-positive-label); --app-warn:var(--ag-warning-label);
  --app-bad:var(--ag-danger-label); --app-live:var(--ag-positive-ink);
  --app-live-contrast:#111111;
  --app-font:var(--ag-font-interface); --app-mono:var(--ag-font-mono);
}
html:root:root[data-theme="light"]{
  --ag-canvas:#F4F1E9; --ag-surface:#FAF8F2; --ag-surface-raised:#FFFFFF; --ag-surface-inset:#EAE6DA;
  --ag-ink:#17150F; --ag-ink-muted:#4A463B; --ag-ink-faint:#686354;
  --ag-ink-2:#4A463B; --ag-ink-3:#686354;
  --ag-box-edge:color-mix(in srgb, #17150F 22%, transparent);
  --ag-positive-label:#1c5135; --ag-warning-label:#684505;
  --ag-danger-label:#84211a; --ag-info-label:#1f2e85;
  --ag-line:rgba(23,21,15,.14); --ag-line-strong:#86837C;
  --ag-signal:#17150F; --ag-signal-ink:#2339B8;
  --ag-signal-soft:rgba(23,21,15,.07);
  --ag-signal-ink-soft:color-mix(in srgb, #2339B8 14%, transparent);
  --ag-row-hover:rgba(23,21,15,.04);
  --ag-signal-contrast:#F4F1E9;
  --ag-signal-on-ink:#2339B8;
  --ag-focus:#2339B8;
  --ag-positive:#1E6B45; --ag-warning:#8A5A00; --ag-danger:#B3261E; --ag-info:#2339B8;
  --ag-positive-ink:#1e6b45; --ag-warning-ink:#8a5a00;
  --ag-danger-ink:#b3261e; --ag-info-ink:#2339b8;
  --ag-positive-contrast:#ffffff; --ag-warning-contrast:#ffffff;
  --ag-danger-contrast:#ffffff; --ag-info-contrast:#ffffff;
  --ag-attention:#FFD84D; --ag-attention-contrast:#17150F;
  --ag-attention-soft:color-mix(in srgb, #FFD84D 14%, transparent); --ag-mark:#FFD84D;
  color-scheme:light;
  --bg:var(--ag-canvas); --surface:var(--ag-surface); --surface-1:var(--ag-surface); --s1:var(--ag-surface);
  --surface-2:var(--ag-surface-inset); --s2:var(--ag-surface-inset);
  --surface-3:var(--ag-surface-raised); --s3:var(--ag-surface-raised); --card-color:var(--ag-surface);
  --text:var(--ag-ink); --text-1:var(--ag-ink); --text-2:var(--ag-ink-muted); --text-3:var(--ag-ink-faint);
  --muted:var(--ag-ink-muted); --faint:var(--ag-ink-faint);
  --brand:var(--ag-signal); --brand-2:var(--ag-signal); --brand-text:var(--ag-signal-ink);
  --accent-contrast:var(--ag-signal-contrast); --brand-contrast:var(--ag-signal-contrast);
  --good-contrast:var(--ag-positive-contrast); --warn-contrast:var(--ag-warning-contrast);
  --bad-contrast:var(--ag-danger-contrast); --info-contrast:var(--ag-info-contrast);
  --brand-light:var(--ag-signal-ink); --accent:var(--ag-signal-ink); --gp-accent:var(--ag-signal-ink);
  --brand-dim:var(--ag-signal-soft); --brand-glow:var(--ag-signal-soft);
  --brand-ink-dim:var(--ag-signal-ink-soft);
  --border:var(--ag-line); --border-2:var(--ag-line); --border-strong:var(--ag-line-strong);
  --border-hover:var(--ag-line-strong); --line:var(--ag-line);
  --good:var(--ag-positive-label); --success:var(--ag-positive-label); --ok:var(--ag-positive-label);
  --green:var(--ag-positive-label); --live:var(--ag-positive-label);
  --warn:var(--ag-warning-label); --warning:var(--ag-warning-label); --amber:var(--ag-warning-label);
  --star:var(--ag-warning-label); --partial:var(--ag-warning-label);
  --danger:var(--ag-danger-label); --bad:var(--ag-danger-label);
  --good-fill:var(--ag-positive); --warn-fill:var(--ag-warning); --bad-fill:var(--ag-danger);
  --good-dim:color-mix(in srgb, #1E6B45 14%, transparent); --warn-dim:color-mix(in srgb, #8A5A00 14%, transparent); --bad-dim:color-mix(in srgb, #B3261E 14%, transparent);
  --nav-bg:var(--ag-surface); --seg-track:var(--ag-surface-inset); --seg-thumb:var(--ag-surface-raised);
  --ag-button-tint:color-mix(in srgb, #2339B8 14%, transparent);
  --ag-button-edge:color-mix(in srgb, #2339B8 55%, transparent);
  --ag-button-ink:#2339b8;
  --grad-1:var(--ag-ink); --grad-2:var(--ag-ink); --grad-3:var(--ag-ink);
  --app-bg:var(--ag-canvas); --app-s1:var(--ag-surface); --app-s2:var(--ag-surface-inset); --app-s3:var(--ag-surface-raised);
  --app-text:var(--ag-ink); --app-muted:var(--ag-ink-muted); --app-faint:var(--ag-ink-faint);
  --app-border:var(--ag-line); --app-border-2:var(--ag-line-strong);
  --app-brand:var(--ag-signal-ink); --app-brand-2:var(--ag-signal); --app-brand-dim:var(--ag-signal-soft);
  --app-brand-text:var(--ag-signal-ink);
  --app-brand-contrast:#ffffff;
  --app-brand-2-contrast:var(--ag-signal-contrast);
    --app-good:var(--ag-positive-label); --app-warn:var(--ag-warning-label);
  --app-bad:var(--ag-danger-label); --app-live:var(--ag-positive-ink);
  --app-live-contrast:#ffffff;
  --app-font:var(--ag-font-interface); --app-mono:var(--ag-font-mono);
}
@media (prefers-color-scheme: light) {
html:root:root:not([data-theme="dark"]){
  --ag-canvas:#F4F1E9; --ag-surface:#FAF8F2; --ag-surface-raised:#FFFFFF; --ag-surface-inset:#EAE6DA;
  --ag-ink:#17150F; --ag-ink-muted:#4A463B; --ag-ink-faint:#686354;
  --ag-ink-2:#4A463B; --ag-ink-3:#686354;
  --ag-box-edge:color-mix(in srgb, #17150F 22%, transparent);
  --ag-positive-label:#1c5135; --ag-warning-label:#684505;
  --ag-danger-label:#84211a; --ag-info-label:#1f2e85;
  --ag-line:rgba(23,21,15,.14); --ag-line-strong:#86837C;
  --ag-signal:#17150F; --ag-signal-ink:#2339B8;
  --ag-signal-soft:rgba(23,21,15,.07);
  --ag-signal-ink-soft:color-mix(in srgb, #2339B8 14%, transparent);
  --ag-row-hover:rgba(23,21,15,.04);
  --ag-signal-contrast:#F4F1E9;
  --ag-signal-on-ink:#2339B8;
  --ag-focus:#2339B8;
  --ag-positive:#1E6B45; --ag-warning:#8A5A00; --ag-danger:#B3261E; --ag-info:#2339B8;
  --ag-positive-ink:#1e6b45; --ag-warning-ink:#8a5a00;
  --ag-danger-ink:#b3261e; --ag-info-ink:#2339b8;
  --ag-positive-contrast:#ffffff; --ag-warning-contrast:#ffffff;
  --ag-danger-contrast:#ffffff; --ag-info-contrast:#ffffff;
  --ag-attention:#FFD84D; --ag-attention-contrast:#17150F;
  --ag-attention-soft:color-mix(in srgb, #FFD84D 14%, transparent); --ag-mark:#FFD84D;
  color-scheme:light;
  --bg:var(--ag-canvas); --surface:var(--ag-surface); --surface-1:var(--ag-surface); --s1:var(--ag-surface);
  --surface-2:var(--ag-surface-inset); --s2:var(--ag-surface-inset);
  --surface-3:var(--ag-surface-raised); --s3:var(--ag-surface-raised); --card-color:var(--ag-surface);
  --text:var(--ag-ink); --text-1:var(--ag-ink); --text-2:var(--ag-ink-muted); --text-3:var(--ag-ink-faint);
  --muted:var(--ag-ink-muted); --faint:var(--ag-ink-faint);
  --brand:var(--ag-signal); --brand-2:var(--ag-signal); --brand-text:var(--ag-signal-ink);
  --accent-contrast:var(--ag-signal-contrast); --brand-contrast:var(--ag-signal-contrast);
  --good-contrast:var(--ag-positive-contrast); --warn-contrast:var(--ag-warning-contrast);
  --bad-contrast:var(--ag-danger-contrast); --info-contrast:var(--ag-info-contrast);
  --brand-light:var(--ag-signal-ink); --accent:var(--ag-signal-ink); --gp-accent:var(--ag-signal-ink);
  --brand-dim:var(--ag-signal-soft); --brand-glow:var(--ag-signal-soft);
  --brand-ink-dim:var(--ag-signal-ink-soft);
  --border:var(--ag-line); --border-2:var(--ag-line); --border-strong:var(--ag-line-strong);
  --border-hover:var(--ag-line-strong); --line:var(--ag-line);
  --good:var(--ag-positive-label); --success:var(--ag-positive-label); --ok:var(--ag-positive-label);
  --green:var(--ag-positive-label); --live:var(--ag-positive-label);
  --warn:var(--ag-warning-label); --warning:var(--ag-warning-label); --amber:var(--ag-warning-label);
  --star:var(--ag-warning-label); --partial:var(--ag-warning-label);
  --danger:var(--ag-danger-label); --bad:var(--ag-danger-label);
  --good-fill:var(--ag-positive); --warn-fill:var(--ag-warning); --bad-fill:var(--ag-danger);
  --good-dim:color-mix(in srgb, #1E6B45 14%, transparent); --warn-dim:color-mix(in srgb, #8A5A00 14%, transparent); --bad-dim:color-mix(in srgb, #B3261E 14%, transparent);
  --nav-bg:var(--ag-surface); --seg-track:var(--ag-surface-inset); --seg-thumb:var(--ag-surface-raised);
  --ag-button-tint:color-mix(in srgb, #2339B8 14%, transparent);
  --ag-button-edge:color-mix(in srgb, #2339B8 55%, transparent);
  --ag-button-ink:#2339b8;
  --grad-1:var(--ag-ink); --grad-2:var(--ag-ink); --grad-3:var(--ag-ink);
  --app-bg:var(--ag-canvas); --app-s1:var(--ag-surface); --app-s2:var(--ag-surface-inset); --app-s3:var(--ag-surface-raised);
  --app-text:var(--ag-ink); --app-muted:var(--ag-ink-muted); --app-faint:var(--ag-ink-faint);
  --app-border:var(--ag-line); --app-border-2:var(--ag-line-strong);
  --app-brand:var(--ag-signal-ink); --app-brand-2:var(--ag-signal); --app-brand-dim:var(--ag-signal-soft);
  --app-brand-text:var(--ag-signal-ink);
  --app-brand-contrast:#ffffff;
  --app-brand-2-contrast:var(--ag-signal-contrast);
    --app-good:var(--ag-positive-label); --app-warn:var(--ag-warning-label);
  --app-bad:var(--ag-danger-label); --app-live:var(--ag-positive-ink);
  --app-live-contrast:#ffffff;
  --app-font:var(--ag-font-interface); --app-mono:var(--ag-font-mono);
}
}
html:root:root{
  --ag-font-display:'Newsreader', Georgia, 'Times New Roman', serif;
  --ag-font-interface:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ag-font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ag-type-label:11px; --ag-type-caption:12px; --ag-type-small:14px; --ag-type-body:16px;
  --ag-type-body-lg:20px; --ag-type-card:24px;
  --ag-type-section:clamp(24px,3vw,32px);
  --ag-type-page:clamp(32px,4vw,48px);
  --ag-type-figure:clamp(32px,5vw,32px);
  --ag-type-hero:clamp(52px,8vw,104px);
  --ag-leading-tight:1.15; --ag-leading-body:1.5; --ag-leading-reading:1.65;
  --ag-weight-normal:400; --ag-weight-medium:500;
  --ag-weight-semibold:600; --ag-weight-bold:600;
  --ag-label-case:uppercase; --ag-label-tracking:0.08em;
  --ag-space-1:4px; --ag-space-2:8px; --ag-space-3:12px; --ag-space-4:16px;
  --ag-space-5:24px; --ag-space-6:32px; --ag-space-7:48px; --ag-space-8:64px; --ag-space-9:96px;
  --ag-radius-xs:2px; --ag-radius-sm:2px; --ag-radius-md:2px;
  --ag-radius-lg:4px; --ag-radius-pill:999px;
  --ag-border-thin:1px; --ag-border-strong:2px;
  --ag-shadow-0:none;
  --ag-shadow-1:none;
  --ag-shadow-2:0 8px 24px rgba(10,12,10,0.14);
  --ag-shadow-3:0 24px 64px rgba(10,12,10,0.245);
  --ag-measure-marketing:1280px;
  --ag-measure-product:1360px;
  --ag-measure-reading:760px;
  --ag-gutter-desktop:56px; --ag-gutter-tablet:32px; --ag-gutter-mobile:21px;
  --ag-nav-width:248px;
  --ag-button-radius:var(--ag-radius-sm);
  --ag-button-ground:var(--ag-signal); --ag-button-ground-ink:var(--ag-signal-contrast); --ag-button-ground-edge:transparent;
  --ag-field-ground:var(--ag-surface-raised);
  --ag-field-edge:var(--ag-line-strong);
  --ag-table-pad:var(--ag-space-3); --ag-table-zebra:transparent;
  --ag-status-edge:transparent;
  --ag-status-pad:0px;
  --ag-status-dot:inline-block;
  --ag-image-radius:var(--ag-radius-sm);
  --ag-panel-ground:transparent; --ag-panel-edge:transparent; --ag-panel-radius:0px; --ag-panel-pad:0px;
  --ag-box-ground:var(--ag-surface); --ag-box-radius:var(--ag-radius-sm);
  --ag-list-pad-y:var(--ag-space-2); --ag-list-pad-x:var(--ag-space-2);
  --ag-list-marker:inline-block;
  --ag-list-marker-round:initial;
  --ag-callout-tint:14%; --ag-callout-edge:60%;
  --ag-callout-ring:none; --ag-callout-bar:none;
  --ag-callout-radius:var(--ag-radius-sm);
  --ag-chip-ground:var(--ag-surface-raised);
  --ag-chip-edge:var(--ag-box-edge);
  --ag-chip-on:var(--ag-ink);
  --ag-chip-on-ink:var(--ag-canvas);
  --ag-link-decoration:underline; --ag-link-ink:var(--ag-signal-ink);
  --ag-meter-w:14px; --ag-meter-h:4px;
  --ag-meter-r:var(--ag-radius-xs);
  --ag-map-dash:5px; --ag-map-gap:4px;
  --ag-map-region:0%; --ag-map-heat:35%;
  --ag-map-node-radius:var(--ag-radius-sm);
  --ag-topbar-height:max(56px, calc(46px + 11px));
  --ag-row-compact:28px; --ag-row-regular:36px; --ag-row-roomy:46px;
  --ag-control-h-sm:28px; --ag-control-h-md:36px; --ag-control-h-lg:46px;
  --ag-control-px-sm:12px; --ag-control-px-md:16px; --ag-control-px-lg:20px;
  --ag-motion-fast:120ms; --ag-motion-normal:160ms; --ag-motion-slow:320ms;
  --ag-ease-standard:cubic-bezier(.2,.8,.2,1);
  --ag-ease-enter:cubic-bezier(.16,1,.3,1);
  --ag-ease-exit:cubic-bezier(.4,0,1,1);
  --ag-icon-stroke:1.5;
  --ag-backdrop:none;
  --ag-cat-1:#3550c8; --ag-cat-2:#0f7d8c; --ag-cat-3:#7b4fa0; --ag-cat-4:#b26a1e; --ag-cat-5:#4f7f5c; --ag-cat-6:#a8506b;
  --ag-seq-from:#EAE6DA; --ag-seq-to:#2339B8;
  --font:var(--ag-font-interface); --font-display:var(--ag-font-display); --mono:var(--ag-font-mono);
  --radius-sm:var(--ag-radius-sm); --radius-md:var(--ag-radius-md); --radius-lg:var(--ag-radius-lg);
  --radius:var(--ag-radius-md);
  --shadow-sm:var(--ag-shadow-1); --shadow-md:var(--ag-shadow-2); --shadow-lg:var(--ag-shadow-3);
  --shadow:var(--ag-shadow-2);
  --t-label:var(--ag-type-label); --t-page:var(--ag-type-page);
  --t-card:var(--ag-type-card); --t-figure:var(--ag-type-figure);
}
}
@layer profiles {
[data-ag-surface="marketing"]{
  --ag-density:roomy; --ag-row:var(--ag-row-roomy);
  --ag-measure:1280px; --ag-type-scale:1.15; --ag-panel:open;
  --ag-panel-ground:transparent; --ag-panel-edge:transparent; --ag-panel-radius:0px; --ag-panel-pad:0px;
  --row-h:var(--ag-row-roomy); --dens:1.1;
  --ag-type-label:12.65px; --ag-type-caption:13.8px; --ag-type-small:16.1px; --ag-type-body:18.4px;
  --ag-type-body-lg:23px; --ag-type-card:27.6px;
  --ag-type-section:clamp(27.6px,3vw,36.8px);
  --ag-type-page:clamp(36.8px,4vw,55.2px);
  --ag-type-figure:clamp(36.8px,5vw,36.8px);
  --ag-type-hero:clamp(59.8px,8vw,119.6px);
}
[data-ag-surface="admin"]{
  --ag-density:compact; --ag-row:var(--ag-row-compact);
  --ag-measure:1440px; --ag-type-scale:0.95; --ag-panel:ruled;
  --ag-panel-ground:var(--ag-surface); --ag-panel-edge:var(--ag-line); --ag-panel-radius:var(--ag-radius-md); --ag-panel-pad:var(--ag-space-4);
  --row-h:var(--ag-row-compact); --dens:0.9;
  --ag-type-label:10.45px; --ag-type-caption:11.4px; --ag-type-small:13.3px; --ag-type-body:15.2px;
  --ag-type-body-lg:19px; --ag-type-card:22.8px;
  --ag-type-section:clamp(22.8px,3vw,30.4px);
  --ag-type-page:clamp(30.4px,4vw,45.6px);
  --ag-type-figure:clamp(30.4px,5vw,30.4px);
  --ag-type-hero:clamp(49.4px,8vw,98.8px);
}
[data-ag-surface="owner"]{
  --ag-density:regular; --ag-row:var(--ag-row-regular);
  --ag-measure:1360px; --ag-type-scale:1; --ag-panel:open;
  --ag-panel-ground:transparent; --ag-panel-edge:transparent; --ag-panel-radius:0px; --ag-panel-pad:0px;
  --row-h:var(--ag-row-regular); --dens:1;
  --ag-type-label:11px; --ag-type-caption:12px; --ag-type-small:14px; --ag-type-body:16px;
  --ag-type-body-lg:20px; --ag-type-card:24px;
  --ag-type-section:clamp(24px,3vw,32px);
  --ag-type-page:clamp(32px,4vw,48px);
  --ag-type-figure:clamp(32px,5vw,32px);
  --ag-type-hero:clamp(52px,8vw,104px);
}
[data-ag-surface="marketplace"]{
  --ag-density:regular; --ag-row:var(--ag-row-regular);
  --ag-measure:1280px; --ag-type-scale:1.05; --ag-panel:open;
  --ag-panel-ground:transparent; --ag-panel-edge:transparent; --ag-panel-radius:0px; --ag-panel-pad:0px;
  --row-h:var(--ag-row-regular); --dens:1;
  --ag-type-label:11.55px; --ag-type-caption:12.6px; --ag-type-small:14.7px; --ag-type-body:16.8px;
  --ag-type-body-lg:21px; --ag-type-card:25.2px;
  --ag-type-section:clamp(25.2px,3vw,33.6px);
  --ag-type-page:clamp(33.6px,4vw,50.4px);
  --ag-type-figure:clamp(33.6px,5vw,33.6px);
  --ag-type-hero:clamp(54.6px,8vw,109.2px);
}
[data-ag-surface="vp"]{
  --ag-density:compact; --ag-row:var(--ag-row-compact);
  --ag-measure:1440px; --ag-type-scale:0.95; --ag-panel:ruled;
  --ag-panel-ground:var(--ag-surface); --ag-panel-edge:var(--ag-line); --ag-panel-radius:var(--ag-radius-md); --ag-panel-pad:var(--ag-space-4);
  --row-h:var(--ag-row-compact); --dens:0.9;
  --ag-type-label:10.45px; --ag-type-caption:11.4px; --ag-type-small:13.3px; --ag-type-body:15.2px;
  --ag-type-body-lg:19px; --ag-type-card:22.8px;
  --ag-type-section:clamp(22.8px,3vw,30.4px);
  --ag-type-page:clamp(30.4px,4vw,45.6px);
  --ag-type-figure:clamp(30.4px,5vw,30.4px);
  --ag-type-hero:clamp(49.4px,8vw,98.8px);
}
[data-ag-surface="integrator"]{
  --ag-density:compact; --ag-row:var(--ag-row-compact);
  --ag-measure:1440px; --ag-type-scale:0.95; --ag-panel:ruled;
  --ag-panel-ground:var(--ag-surface); --ag-panel-edge:var(--ag-line); --ag-panel-radius:var(--ag-radius-md); --ag-panel-pad:var(--ag-space-4);
  --row-h:var(--ag-row-compact); --dens:0.9;
  --ag-type-label:10.45px; --ag-type-caption:11.4px; --ag-type-small:13.3px; --ag-type-body:15.2px;
  --ag-type-body-lg:19px; --ag-type-card:22.8px;
  --ag-type-section:clamp(22.8px,3vw,30.4px);
  --ag-type-page:clamp(30.4px,4vw,45.6px);
  --ag-type-figure:clamp(30.4px,5vw,30.4px);
  --ag-type-hero:clamp(49.4px,8vw,98.8px);
}
[data-ag-surface="embedded"]{
  --ag-density:regular; --ag-row:var(--ag-row-regular);
  --ag-measure:1440px; --ag-type-scale:1; --ag-panel:open;
  --ag-panel-ground:transparent; --ag-panel-edge:transparent; --ag-panel-radius:0px; --ag-panel-pad:0px;
  --row-h:var(--ag-row-regular); --dens:1;
  --ag-type-label:11px; --ag-type-caption:12px; --ag-type-small:14px; --ag-type-body:16px;
  --ag-type-body-lg:20px; --ag-type-card:24px;
  --ag-type-section:clamp(24px,3vw,32px);
  --ag-type-page:clamp(32px,4vw,48px);
  --ag-type-figure:clamp(32px,5vw,32px);
  --ag-type-hero:clamp(52px,8vw,104px);
}
}
html:root:root[data-accent="mint"]{--ag-attention:#8EE6B5; --ag-attention-soft:color-mix(in srgb, #8EE6B5 14%, transparent); --ag-mark:#1F5A3C;}
html:root:root[data-theme="light"][data-accent="mint"]{--ag-attention:#8EE6B5; --ag-attention-soft:color-mix(in srgb, #8EE6B5 14%, transparent); --ag-mark:#8EE6B5;}
@media (prefers-color-scheme: light){html:root:root:not([data-theme="dark"])[data-accent="mint"]{--ag-attention:#8EE6B5; --ag-attention-soft:color-mix(in srgb, #8EE6B5 14%, transparent); --ag-mark:#8EE6B5;}}
html:root:root[data-accent="rose"]{--ag-attention:#FFB3C7; --ag-attention-soft:color-mix(in srgb, #FFB3C7 14%, transparent); --ag-mark:#6A2A40;}
html:root:root[data-theme="light"][data-accent="rose"]{--ag-attention:#FFB3C7; --ag-attention-soft:color-mix(in srgb, #FFB3C7 14%, transparent); --ag-mark:#FFB3C7;}
@media (prefers-color-scheme: light){html:root:root:not([data-theme="dark"])[data-accent="rose"]{--ag-attention:#FFB3C7; --ag-attention-soft:color-mix(in srgb, #FFB3C7 14%, transparent); --ag-mark:#FFB3C7;}}
html:root:root[data-density="compact"]{--ag-table-pad:var(--ag-space-1);--ag-list-pad-y:var(--ag-space-1);--ag-list-pad-x:var(--ag-space-2);--ag-row-regular:var(--ag-row-compact);}
@layer legacy {
html:root .grad, html:root .ask .phrase, html:root .hero-title .grad{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--ag-ink); -webkit-text-fill-color:var(--ag-ink);
}
html:root .ask .phrase{ color:var(--ag-ink); -webkit-text-fill-color:var(--ag-ink); }
html:root .dot{ animation:none; }
@media (prefers-reduced-motion: reduce){
  html:root *, html:root *::before, html:root *::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important;
  }
}
}

/* Agoria platform components — PLATFORM-DESIGN-SYSTEM-SPEC.md §6.
   ─────────────────────────────────────────────────────────────────────────────
   The primitives a page ASSEMBLES. A page-level renderer arranges these and
   does not restyle them; the moment it does, the design system is a suggestion
   again and the 3,102 inline styles start growing back.

   Everything here reads --ag-* and declares no colour, size or spacing of its
   own. That is the property the guard enforces, and it is what makes "changing
   one foundation value updates every intended surface" true rather than hoped.

   Loaded inside @layer components, so a page's own stylesheet still wins where
   it has to during the migration — and loses automatically once its rules are
   deleted. */

@layer components {

/* ── Shell ──────────────────────────────────────────────────────────────── */
.ag-shell { display:grid; grid-template-columns:var(--ag-nav-width) minmax(0,1fr); min-height:100vh;
  background:var(--ag-canvas); color:var(--ag-ink); font-family:var(--ag-font-interface);
  font-size:var(--ag-type-body); line-height:var(--ag-leading-body); }
.ag-nav { border-right:var(--ag-border-thin) solid var(--ag-line); background:var(--ag-surface);
  padding:var(--ag-space-4); display:flex; flex-direction:column; gap:var(--ag-space-2); }
.ag-nav a { display:flex; align-items:center; gap:var(--ag-space-2); min-height:var(--ag-row);
  padding:0 var(--ag-space-3); border-radius:var(--ag-radius-sm); color:var(--ag-ink-muted);
  text-decoration:none; transition:background var(--ag-motion-fast) var(--ag-ease-standard); }
.ag-nav a:hover { background:var(--ag-surface-inset); color:var(--ag-ink); }
.ag-nav a[aria-current] { background:var(--ag-signal-soft); color:var(--ag-ink); font-weight:var(--ag-weight-medium); }
.ag-nav-label { font-size:var(--ag-type-label); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ag-ink-faint); padding:var(--ag-space-4) var(--ag-space-3) var(--ag-space-1); }
.ag-topbar { height:var(--ag-topbar-height); display:flex; align-items:center; justify-content:space-between;
  gap:var(--ag-space-4); padding:0 var(--ag-space-5);
  border-bottom:var(--ag-border-thin) solid var(--ag-line); background:var(--ag-surface); }
.ag-page { max-width:var(--ag-measure); margin-inline:auto; padding:var(--ag-space-6) var(--ag-space-5) var(--ag-space-9); }

/* The page names itself. A console where the title is the size of the body has
   no hierarchy for the eye to follow, and an interface with no hierarchy reads
   as something nobody made a decision about. */
.ag-page-header { display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--ag-space-5); margin-bottom:var(--ag-space-6); }
.ag-page-title { font-family:var(--ag-font-display); font-size:var(--ag-type-page);
  line-height:var(--ag-leading-tight); letter-spacing:-.015em; margin:0; font-weight:var(--ag-weight-normal); }
.ag-page-lede { color:var(--ag-ink-muted); font-size:var(--ag-type-body-lg); max-width:64ch;
  margin:var(--ag-space-2) 0 0; }
.ag-section { margin-bottom:var(--ag-space-7); }
.ag-section > h2 { font-size:var(--ag-type-section); font-family:var(--ag-font-display);
  font-weight:var(--ag-weight-normal); line-height:var(--ag-leading-tight); margin:0 0 var(--ag-space-4); }

/* ── Panel: four treatments, and none of them is "card by default" ──────── */
/* Every section becoming a card is how a product ends up with one flat
   hierarchy in a hundred rounded boxes. Whitespace separates; a hairline
   structures; a shadow is reserved for something that genuinely floats. */
.ag-panel { display:block; }
/* A panel with no treatment of its own takes the one the surface's profile chose (Design → Surface → Panel), or
   the platform's (Design → Components → Panel). Those two controls wrote a keyword nothing read. */
.ag-panel:not([class*="ag-panel--"]) { background:var(--ag-panel-ground); border:var(--ag-border-thin) solid var(--ag-panel-edge);
  border-radius:var(--ag-panel-radius); padding:var(--ag-panel-pad); }
.ag-panel--open { padding:0; background:none; border:0; }
.ag-panel--ruled { border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md);
  background:var(--ag-surface); }
.ag-panel--ruled > * + * { border-top:var(--ag-border-thin) solid var(--ag-line); }
.ag-panel--raised { background:var(--ag-surface-raised); border:var(--ag-border-thin) solid var(--ag-line);
  border-radius:var(--ag-radius-lg); box-shadow:var(--ag-shadow-2); }
.ag-panel--tinted { background:var(--ag-surface-inset); border-radius:var(--ag-radius-md);
  padding:var(--ag-space-4); }
.ag-panel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--ag-space-3);
  padding:var(--ag-space-4); }
.ag-panel-title { font-size:var(--ag-type-card); font-weight:var(--ag-weight-medium); margin:0;
  letter-spacing:-.01em; }
.ag-panel-body { padding:var(--ag-space-4); }

/* ── Button: three, no gradients, arrows only where navigation happens ──── */
/* ONE BUTTON, two names (2026-10-07). The console writes `.btn .btn-primary|secondary|ghost|danger-ghost .btn-sm|xs` by hand on four
   hundred buttons, and they were a second button: 42px, 12px type and a faint border beside the design system's 34px, 13.5px and a
   strong one, on the same page. The legacy names now take the same declarations, so Design › Components › Button governs them and a
   page cannot carry two buttons. Primary is primary, secondary is secondary, ghost is the borderless tertiary, danger-ghost is danger;
   the default and -sm are the small step and -xs the one under it. */
.ag-button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--ag-space-2);
  min-height:var(--ag-row); padding:0 var(--ag-space-4); border-radius:var(--ag-button-radius);
  font:inherit; font-size:var(--ag-type-body); font-weight:var(--ag-weight-medium);
  border:var(--ag-border-thin) solid var(--ag-button-ground-edge); cursor:pointer; text-decoration:none;
  /* A button with no treatment named takes the one Design → Components → Button fill chose. */
  background:var(--ag-button-ground); color:var(--ag-button-ground-ink);
  transition:background var(--ag-motion-fast) var(--ag-ease-standard),
             border-color var(--ag-motion-fast) var(--ag-ease-standard); }
/* A button marked hidden stays hidden: the display above would otherwise outrank it. */
.ag-button[hidden], .btn[hidden] { display:none; }
.ag-button--primary, .btn-primary { background:var(--ag-signal); color:var(--ag-signal-contrast); border-color:transparent; }
.ag-button--primary:hover, .btn-primary:hover { filter:brightness(1.06); }
.ag-button--secondary, .btn-secondary { background:transparent; border-color:var(--ag-line-strong); color:var(--ag-ink); }
.ag-button--secondary:hover, .btn-secondary:hover { background:var(--ag-surface-inset); }
.ag-button--tertiary, .btn-ghost { background:transparent; color:var(--ag-signal-ink); padding-inline:var(--ag-space-2); border-color:transparent; }
.ag-button--tertiary:hover, .btn-ghost:hover { background:var(--ag-signal-soft); }
.ag-button--danger, .btn-danger, .btn-danger-ghost { background:transparent; border-color:var(--ag-danger); color:var(--ag-danger-label); }
.ag-button[disabled], .btn[disabled] { opacity:.55; cursor:default; }
/* The small step of the control scale, for a button that sits inside a row of work, a callout or a box: the
   roomy button belongs to a page's own actions, not to the twelfth row of a list. */
.ag-button--sm, .btn, .btn-sm { min-height:var(--ag-control-h-sm); padding:0 var(--ag-control-px-sm); font-size:var(--ag-type-small);
  font-weight:var(--ag-weight-semibold); white-space:nowrap; }
/* One step under small, for a button inside a dense row ("Copy", "Spot-check"). */
.ag-button--xs, .btn-xs { min-height:calc(var(--ag-control-h-sm) * .7); padding:0 calc(var(--ag-control-px-sm) * .55);
  font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); white-space:nowrap; }
/* Loading preserves the width, so the row does not jump under the pointer. */
.ag-button[aria-busy="true"] { position:relative; color:transparent; }
.ag-button[aria-busy="true"]::after { content:""; position:absolute; inset:0; margin:auto;
  width:14px; height:14px; border:2px solid currentColor; border-top-color:transparent;
  border-radius:var(--ag-radius-pill); animation:ag-spin .7s linear infinite; color:var(--ag-ink); }
@keyframes ag-spin { to { transform:rotate(360deg); } }

/* ── Field ──────────────────────────────────────────────────────────────── */
.ag-field { display:flex; flex-direction:column; gap:var(--ag-space-1); margin-bottom:var(--ag-space-4); }
.ag-field > label { font-size:var(--ag-type-caption); font-weight:var(--ag-weight-medium); color:var(--ag-ink-muted); }
.ag-field input, .ag-field select, .ag-field textarea, .ag-input {
  min-height:var(--ag-row); padding:var(--ag-space-2) var(--ag-space-3);
  border:var(--ag-border-thin) solid var(--ag-field-edge); border-radius:var(--ag-radius-sm);
  background:var(--ag-field-ground); color:var(--ag-ink); font:inherit; font-size:var(--ag-type-body); }
.ag-field input:focus-visible, .ag-field select:focus-visible, .ag-field textarea:focus-visible,
.ag-button:focus-visible, .btn:focus-visible, .ag-nav a:focus-visible, .ag-input:focus-visible {
  outline:2px solid var(--ag-focus); outline-offset:2px; }
/* Help before error: an error that arrives before the person has been told
   what the field wants is a scolding. */
.ag-field-help { font-size:var(--ag-type-caption); color:var(--ag-ink-faint); }
.ag-field-error { font-size:var(--ag-type-caption); color:var(--ag-danger-label); }
@media (max-width:760px) { .ag-field input, .ag-field select, .ag-button, .btn, .ag-tab { min-height:44px; } }

/* ── Table / register ───────────────────────────────────────────────────── */
.ag-table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.ag-table th { position:sticky; top:0; z-index:1; text-align:left; background:var(--ag-surface);
  font-size:var(--ag-type-label); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ag-ink-faint); font-weight:var(--ag-weight-medium);
  padding:var(--ag-space-2) var(--ag-space-3); border-bottom:var(--ag-border-thin) solid var(--ag-line-strong); }
.ag-table td { padding:var(--ag-table-pad) var(--ag-space-3); border-bottom:var(--ag-border-thin) solid var(--ag-line);
  height:var(--ag-row); }
/* Zebra, when Design → Components → Table zebra asks for it. Before the hover rule, so hover still wins. */
.ag-table tbody tr:nth-child(even) td { background:var(--ag-table-zebra); }
/* THE ROW UNDER THE POINTER, everywhere a row exists.
   "Which line am I about to click" is the one piece of feedback a register owes
   its reader, and a table of forty rows without it is forty chances to act on
   the wrong one. Stated once here rather than per page, and on the ROW so a
   sticky first column highlights with the rest of it.
   Hover only — never on a coarse pointer, where there is no hover to have and
   the state sticks to whatever was last tapped. */
@media (hover: hover) {
  .ag-table tbody tr:hover td,
  .ag-table tbody tr:focus-within td { background:var(--ag-row-hover); }
}
/* Selection outranks attention: they are different states and must not read as
   the same one. */
.ag-table tr[aria-selected="true"] td { background:var(--ag-signal-soft); }
.ag-table .ag-num, .ag-table .ag-money { text-align:right; font-variant-numeric:tabular-nums; }
.ag-table-scroll { overflow-x:auto; }
/* Provenance is a column, not a footnote: a register that cannot say where a
   row came from is a list of assertions. */
.ag-table .ag-source { color:var(--ag-ink-faint); font-family:var(--ag-font-mono);
  font-size:var(--ag-type-caption); }

/* ── Status: never colour alone ─────────────────────────────────────────── */
/* font-family and background are declared because this recipe is worn by a
   <button> as often as a <span>, and a button that is not told both takes the
   UA's font and the UA's grey fill. Six readiness chips drew as four Arial
   buttons on grey beside two Inter spans on white, in one row, and read as two
   different kinds of thing. A recipe that changes with its tag is not one. */
.ag-status { display:inline-flex; align-items:center; gap:var(--ag-space-1);
  font-family:inherit; font-size:var(--ag-type-caption);
  font-weight:var(--ag-weight-medium); line-height:var(--ag-leading-tight);
  padding:var(--ag-status-pad); border-radius:var(--ag-radius-pill);
  border:var(--ag-border-thin) solid var(--ag-status-edge); background:none;
  white-space:nowrap; }
button.ag-status { cursor:pointer; }
button.ag-status:hover { background:var(--ag-surface-inset); }
.ag-status::before { content:""; display:var(--ag-status-dot); width:6px; height:6px; border-radius:var(--ag-radius-pill);
  background:var(--tone, currentColor); flex:none; }
/* The word is the tone's LABEL (walked to AA on the worst of the four grounds a chip is drawn on) and the dot is its fill. The word was the fill, which put
   a warning at 3:1, and then the ink, which is walked on the canvas alone and read 4.35:1 on the raised row a "costs money" chip sits in. */
.ag-status--positive { color:var(--ag-positive-label); --tone:var(--ag-positive); }
.ag-status--warning  { color:var(--ag-warning-label); --tone:var(--ag-warning); }
.ag-status--danger   { color:var(--ag-danger-label); --tone:var(--ag-danger); }
.ag-status--info     { color:var(--ag-info-label); --tone:var(--ag-info); }
.ag-status--neutral  { color:var(--ag-ink-faint); }

/* ── Metric: the numbers ARE the product ────────────────────────────────── */
.ag-metric { display:flex; flex-direction:column; gap:var(--ag-space-1); }
.ag-metric-value { font-family:var(--ag-font-display); font-size:var(--ag-type-figure);
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ag-metric-label { font-size:var(--ag-type-caption); color:var(--ag-ink-muted); }
.ag-metric-period { font-size:var(--ag-type-label); color:var(--ag-ink-faint); }
/* A row of figures. The figure token follows the WINDOW (clamp 44-64px on vw), but a page with a rail beside it has a column
   340px narrower than the window, and "$87,000" at 64px is 257px in a 189px column: four numbers printed over one another.
   The ruler is the row itself: a column is never narrower than its widest figure's smallest size, a row that cannot hold four
   holds two, and the figure takes the room its column has. */
.ag-figs { container-type:inline-size; display:grid; gap:var(--ag-space-3) var(--ag-space-4); margin-bottom:var(--ag-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--ag-type-card) * 6)),1fr)); }
.ag-figs .ag-metric { min-width:0; }
.ag-figs .ag-metric-value { font-size:clamp(calc(var(--ag-type-card) * 1.3), 4.6cqi, var(--ag-type-figure)); overflow-wrap:anywhere; }

/* ── Dialog and drawer ──────────────────────────────────────────────────── */
.ag-dialog { border:0; padding:0; background:var(--ag-surface-raised); color:var(--ag-ink);
  border-radius:var(--ag-radius-lg); box-shadow:var(--ag-shadow-3);
  max-width:min(640px, calc(100vw - var(--ag-space-6))); }
.ag-dialog::backdrop { background:rgba(0,0,0,.5); }
.ag-drawer { position:fixed; inset:0 0 0 auto; width:min(520px, 100vw); z-index:300;
  background:var(--ag-surface-raised); border-left:var(--ag-border-thin) solid var(--ag-line);
  box-shadow:var(--ag-shadow-3); transform:translateX(100%);
  transition:transform var(--ag-motion-normal) var(--ag-ease-enter); }
.ag-drawer[open], .ag-drawer.is-open { transform:none; }
/* Leaving is not arriving backwards: a drawer that closes accelerates away (--ag-ease-exit), where one that opens
   settles in. The exit curve was emitted from the first commit and nothing read it. */
.ag-drawer:not([open]):not(.is-open) { transition-timing-function:var(--ag-ease-exit); }

/* ── Empty, loading, error ──────────────────────────────────────────────── */
/* An empty state says what is absent, why it matters, and what creates it.
   "Nothing here yet" is a shrug with padding. */
.ag-empty { display:flex; flex-direction:column; align-items:flex-start; gap:var(--ag-space-2);
  padding:var(--ag-space-6) var(--ag-space-4); border:var(--ag-border-thin) dashed var(--ag-line-strong);
  border-radius:var(--ag-radius-md); color:var(--ag-ink-muted); }
.ag-empty b { color:var(--ag-ink); font-weight:var(--ag-weight-medium); font-size:var(--ag-type-body-lg); }
.ag-empty > span { font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); max-width:var(--ag-measure-reading); }
/* Loading preserves the final layout rather than collapsing it. */
.ag-skeleton { background:linear-gradient(90deg, var(--ag-surface-inset), var(--ag-surface), var(--ag-surface-inset));
  background-size:200% 100%; border-radius:var(--ag-radius-sm); min-height:1em;
  animation:ag-shimmer 1.4s linear infinite; }
@keyframes ag-shimmer { to { background-position:-200% 0; } }
.ag-error { border-left:var(--ag-border-strong) solid var(--ag-danger); background:var(--ag-surface-inset);
  padding:var(--ag-space-3) var(--ag-space-4); border-radius:0 var(--ag-radius-sm) var(--ag-radius-sm) 0; }

/* ── Evidence and timeline: the node and the line ───────────────────────── */
/* The AGO ● RIA dot as a system element. A node or a line always stands for a
   real relationship or state — it is never background decoration. */
.ag-evidence { display:flex; flex-direction:column; gap:var(--ag-space-2);
  font-size:var(--ag-type-caption); color:var(--ag-ink-muted); }
.ag-evidence-item { display:flex; gap:var(--ag-space-2); align-items:baseline; }
.ag-evidence-item::before { content:""; width:5px; height:5px; margin-top:.45em; flex:none;
  border-radius:var(--ag-radius-pill); background:var(--ag-signal); }
.ag-timeline { display:flex; flex-direction:column; gap:var(--ag-space-4); position:relative;
  padding-left:var(--ag-space-4); }
.ag-timeline::before { content:""; position:absolute; left:2px; top:6px; bottom:6px;
  width:var(--ag-border-thin); background:var(--ag-line-strong); }
.ag-timeline-event { position:relative; }
.ag-timeline-event::before { content:""; position:absolute; left:calc(-1 * var(--ag-space-4) + 1px);
  top:.45em; width:5px; height:5px; border-radius:var(--ag-radius-pill); background:var(--ag-signal); }
.ag-timeline-when { font-family:var(--ag-font-mono); font-size:var(--ag-type-label); color:var(--ag-ink-faint); }

/* ── Chart ──────────────────────────────────────────────────────────────── */
.ag-chart { --ag-chart-1:var(--ag-cat-1); --ag-chart-2:var(--ag-cat-2); --ag-chart-3:var(--ag-cat-3);
  --ag-chart-4:var(--ag-cat-4); --ag-chart-5:var(--ag-cat-5); --ag-chart-6:var(--ag-cat-6);
  font-variant-numeric:tabular-nums; }
.ag-chart .ag-axis { stroke:var(--ag-line); }
/* Unknown is absent WITH A REASON, never rendered as zero — a zero is a claim. */
.ag-chart-unmeasured { color:var(--ag-ink-faint); font-size:var(--ag-type-caption); font-style:normal; }
/* Known and likely (Stock › What will be needed): known is a solid bar, the forecast on top dashed and unfilled, because a forecast
   must not look like an order. Its band and the divide are drawn as axes. */
.ag-chart .ag-known{fill:var(--ag-info);opacity:.45}
.ag-chart .ag-ontop{fill:none;stroke:var(--ag-ink-3);stroke-dasharray:4 3}
.ag-chart text{fill:var(--ag-ink-3);font-size:var(--ag-type-label)}

/* ── The command lens ───────────────────────────────────────────────────────
   MOMENTUM-RHYTHM-SURFACE-SPEC.md §17. Five recipes, because a module lens is
   not expressible in the eighteen above: a tab strip with a count on it, the
   attention row, six independent readings, a composition bar, and who may act.

   They live HERE rather than in /manage's own <style> for the reason the sheet
   opens with — Momentum's lens and Rhythm's lens are the same five shapes, and
   written per page they would be two of each by the second module. */

/* 1 — the view switcher. Each view is a CARD: what it is called, the reading,
   and what it answers. A five-word strip was a quiz — the first person to see
   one asked what the words meant, which is the /manage contract failing out
   loud, and the sub-label is the whole fix.

   It SCROLLS rather than wraps. Four or five cards becoming two rows on a
   narrow console moves the body copy every time somebody switches view, and a
   lens is a thing you switch. `role="tablist"` because that is what it is; the
   drawing is a card and the semantics are a tab. */
/* A GRID of equal columns that SHRINK, not a scrolling row.
   The five readings are one set and are meant to be compared, so pushing the
   last of them off the edge behind a scrollbar is the one arrangement that
   defeats the point — "Offers out" was sliced in half and nothing on screen
   said there was more. `grid-auto-flow:column` with `minmax(0,1fr)` columns
   fits whatever number of views a module has, at whatever width it is given,
   and every card shrinks together rather than one being dropped. */
.ag-tabs { display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr); gap:var(--ag-space-1);
  padding-bottom:var(--ag-space-1); }
/* Below the middle breakpoint they stop competing for one line and wrap into
   two rows, which is the last width at which five of them are still readable. */
@media (max-width:1180px) {
  .ag-tabs { grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .ag-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* SIX views, and the panel — not the window — is the ruler.
   The breakpoints above measure the viewport, which was the lens's width until
   the rail arrived beside it. On a 1440px console the panel is under 800px,
   and six cards in it are 128px each: Reach showed "Where you're f…" and
   "What it brough…" on the two cards whose names are the question. Four and
   five still fit and are left alone; six go three over three, which is also
   how they read — what needs you, what is underway, what goes out when, above
   where you are found, what it brought, what keeps losing people.
   The wrapper holds the tabs and nothing else, so being a query container
   changes how nothing else on the page is laid out. */
.ag-tabs-fit { container-type:inline-size; }
@container (max-width:60rem) {
  .ag-tabs:has(> .ag-tab:nth-child(6)) { grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@container (max-width:30rem) {
  .ag-tabs:has(> .ag-tab:nth-child(6)) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* SEVEN views or more are a ROW of names with their readings, not cards.
   Reach has eight. As cards they were two rows of furniture above the page:
   eight marks, eight sub-labels, 150px before the first thing to read, and the
   page they sat on already had a strip of tabs above them. So past six the
   mark and the sub-label are dropped and what is left is the name and its
   reading, on one line that WRAPS. What each view holds is its title, and the
   sentence under the view's heading.
   The lens renderer adds the class by count, so no page chooses it.
   ON A PHONE THE LINE SCROLLS. Wrapped, eight names were five rows and 173px
   above the first thing to do; one row that scrolls is 37px. That is the one
   width at which a view may sit off the edge, and the lens brings the selected
   one into sight when it draws (lensShowTab). */
.ag-tabs--row { display:flex; flex-wrap:wrap; gap:0 calc(var(--ag-space-1) / 4); padding-bottom:0;
  box-shadow:inset 0 calc(var(--ag-border-thin) * -1) 0 var(--ag-line); }
/* The row's rule is drawn INSIDE it (an inset shadow) and the current name's underline lies on top of it. It was a border under the
   row with each tab pulled down over it by a negative margin, and a row that scrolls clips what hangs outside it: the module's top
   line showed half the underline, a thin grey rule, while the line under it showed the whole green one. */
.ag-tabs--row > .ag-tab { padding:var(--ag-space-1) calc(var(--ag-space-1) * 1.25); background:none; border:0;
  border-bottom:var(--ag-border-strong) solid transparent; border-radius:0; }
/* Hover darkens the name and draws no line: a grey underline under the name the pointer happened to rest on read as a second
   current page. */
.ag-tabs--row > .ag-tab:hover { color:var(--ag-ink); }
.ag-tabs--row > .ag-tab[aria-selected="true"] { background:none; border-bottom-color:var(--ag-signal);
  font-weight:var(--ag-weight-medium); }
.ag-tabs--row .ag-tab-mark, .ag-tabs--row .ag-tab-sub { display:none; }
.ag-tabs--row .ag-tab-name { font-size:var(--ag-type-small); flex-wrap:nowrap; align-items:center;
  gap:0 calc(var(--ag-space-1) * .75); }
/* The reading is a pill beside the name: in a row of names it is the one thing that is a number, and a pill is
   how the eye finds eight of them without reading eight words. */
.ag-tabs--row .ag-tab b, .ag-tabs--row .ag-tab[aria-selected="true"] b { font-size:var(--ag-type-label); font-weight:var(--ag-weight-medium);
  line-height:var(--ag-leading-body); padding:0 calc(var(--ag-space-1) * .75); border-radius:var(--ag-radius-pill);
  border:var(--ag-border-thin) solid var(--ag-line-strong); background:var(--ag-surface); color:var(--ag-ink); }
@container (max-width:40rem) {
  .ag-tabs--row { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; overscroll-behavior-x:contain; }
  .ag-tabs--row > .ag-tab { flex:none; }
}
/* Mark, then the reading. The five cards were identical rectangles that had to
   be read to be told apart; each now has a face the eye finds first. */
.ag-tab { display:flex; align-items:center; gap:var(--ag-space-1);
  text-align:left; min-width:0; padding:var(--ag-space-2);
  font:inherit; color:var(--ag-ink-muted); background:var(--ag-surface);
  border:var(--ag-border-thin) solid var(--ag-line); border-top:var(--ag-border-strong) solid transparent;
  border-radius:var(--ag-radius-md); cursor:pointer; }
.ag-tab:hover { color:var(--ag-ink); border-color:var(--ag-line-strong); }
.ag-tab[aria-selected="true"] { color:var(--ag-ink); background:var(--ag-signal-soft);
  border-color:var(--ag-line); border-top-color:var(--ag-signal); }
.ag-tab-mark { flex:none; width:var(--ag-space-3); height:var(--ag-space-3);
  display:grid; place-items:center; border-radius:var(--ag-radius-sm);
  background:var(--ag-surface-inset); color:var(--ag-ink-faint); }
.ag-tab[aria-selected="true"] .ag-tab-mark { background:var(--ag-signal);
  color:var(--ag-signal-contrast, #fff); }
.ag-tab-text { display:grid; gap:0; min-width:0; }
/* `flex-wrap` is the last resort and it protects the right thing: at a width
   where the name and its reading cannot share a line, the READING drops to the
   next one and the name stays whole. Slicing "Open work" to "Open wor…" to keep
   "117" beside it loses the word the card is named for. */
.ag-tab-name { display:flex; align-items:baseline; flex-wrap:wrap;
  gap:0 var(--ag-space-1);
  min-width:0; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-medium);
  line-height:var(--ag-leading-tight); }
.ag-tab-name > span:first-child { white-space:nowrap; }
/* The reading, not a label — and tabular, so five cards do not shuffle
   sideways as the numbers change. */
.ag-tab b { font-variant-numeric:tabular-nums; color:var(--ag-ink-faint);
  font-weight:var(--ag-weight-normal); }
.ag-tab[aria-selected="true"] b { color:var(--ag-ink-muted); }
.ag-tab-sub { font-size:var(--ag-type-label); color:var(--ag-ink-faint);
  line-height:var(--ag-leading-tight); overflow-wrap:break-word; }
/* On the selected card the ground is the signal wash, and faint on it measured
   3.99:1 in light and 3.79:1 in dark: the one line of the view somebody is
   looking at, under AA. The count beside it was moved to muted for the same
   reason; this is the line that was missed. Muted is 5.2:1 and 5.5:1. */
.ag-tab[aria-selected="true"] .ag-tab-sub { color:var(--ag-ink-muted); }

/* 2 — the attention row. §4.1's item shape: what it is, what it changes, what
   is at stake, when it stops being actionable, who may act, and the one action.
   Sits inside .ag-panel--ruled, which supplies the separator — a box per item
   is the hundred-rounded-boxes failure the panel comment names.

   ── THE GRID, AND WHY IT IS WRITTEN THIS WAY ─────────────────────────────
   The first cut was `auto minmax(0,1fr) auto auto auto auto` and it collapsed
   on the first real row. An `auto` column sizes to its content, the action
   column held a forty-three-character sentence, and a `minmax(0,1fr)` has a
   minimum of ZERO — so the title column gave up all its width and wrapped
   "Office fit-out, 60 desks, two floors" one word per line, under a figure
   sitting on top of it.
   Two changes, and both are the rule rather than the patch:
     the flexible column has a REAL MINIMUM, so it can never be crushed;
     every other column is minmax(0,max-content), so it yields instead.
   `align-items:start` because a title that does wrap must hang from the top of
   the row rather than float against the middle of it. */
/* ONE STEP DOWN THE SCALE, everywhere in this block.
   The published revision's spacing base is 8, so space-4 is 32px — and a row
   built at 32px of padding with a 32px column gap is half again the height of
   the design it was drawn from. Fourteen of them is a page you scroll rather
   than scan, and the title column loses the width to the gaps. */
.ag-attn { display:grid; align-items:start;
  gap:var(--ag-space-1) var(--ag-space-3);
  grid-template-columns:auto minmax(15rem,1fr) repeat(3, minmax(0,max-content)) minmax(0,11rem);
  padding:var(--ag-space-3);
  border-left:var(--ag-space-1) solid transparent; }
/* Consequence as a left rule, which is the one encoding that survives being
   scanned: fourteen rows read as a column of colour before any of them is
   read as words. The chip says the same thing for anybody who cannot see it. */
.ag-attn[data-tone="danger"]  { border-left-color:var(--ag-danger); }
.ag-attn[data-tone="warning"] { border-left-color:var(--ag-warning); }
.ag-attn[data-tone="info"]    { border-left-color:var(--ag-info); }
/* The disc carries the kind's mark. Tinted from the tone rather than filled,
   because a solid ground here would put small type on a mid-tone fill — the
   pairing the contrast audit exists to reject. */
.ag-attn-mark { width:var(--ag-space-4); height:var(--ag-space-4); flex:none;
  display:grid; place-items:center; border-radius:var(--ag-radius-pill);
  font-size:var(--ag-type-caption); background:var(--ag-surface-inset); color:var(--ag-ink-muted); }
.ag-attn[data-tone="danger"]  .ag-attn-mark { color:var(--ag-danger-label); }
.ag-attn[data-tone="warning"] .ag-attn-mark { color:var(--ag-warning-label); }
.ag-attn[data-tone="info"]    .ag-attn-mark { color:var(--ag-info-label); }
.ag-attn-title { font-size:var(--ag-type-body); font-weight:var(--ag-weight-medium);
  line-height:var(--ag-leading-tight); }
.ag-attn-says  { font-size:var(--ag-type-caption); color:var(--ag-ink-muted);
  line-height:var(--ag-leading-body); margin-top:2px; }
.ag-attn-meta  { display:flex; flex-wrap:wrap; gap:var(--ag-space-1); align-items:center;
  margin-top:var(--ag-space-1); }
/* AN EMAIL ADDRESS IS ONE WORD, and "chase dean.halcyon@halcyonplumbing.demo
   .agoria.studio" is forty-six characters of it with nowhere to break. On a
   375px screen that single token set the row's minimum width, pushed the grid
   past the viewport and made the WHOLE PAGE scroll sideways — the one thing the
   responsive contract says must never happen. Nothing was wrong with the
   breakpoints; they were being overruled by a word.

   `anywhere` rather than `break-word`, because only `anywhere` lets the box
   shrink below its longest token when the grid is working out its minimum. The
   text these rows carry is written by the engine from real records — names,
   addresses, invoice references — so the long unbreakable token is the normal
   case here, not the exception. */
.ag-attn-title, .ag-attn-says, .ag-attn-meta { overflow-wrap:anywhere; }
/* A figure with its own label under it. The label is why the number is not
   ambiguous: "$18,500" alone could be the price, the deposit or the exposure. */
.ag-attn-worth { display:grid; gap:2px; justify-items:end; text-align:right; }
.ag-attn-worth b { font-variant-numeric:tabular-nums; font-weight:var(--ag-weight-medium);
  font-size:var(--ag-type-body); }
.ag-attn-worth span, .ag-attn-when span { font-size:var(--ag-type-label); color:var(--ag-ink-faint);
  white-space:nowrap; }
.ag-attn-when { display:grid; gap:2px; justify-items:end; text-align:right; }
.ag-attn-when b { font-size:var(--ag-type-caption); font-weight:var(--ag-weight-medium); white-space:nowrap; }
.ag-attn-when[data-tone="danger"] b { color:var(--ag-danger-label); }
.ag-attn-when[data-tone="warning"] b { color:var(--ag-warning-label); }
/* The actions, stacked: one primary and at most one alternative.
   CAPPED, and the cap is the belt to the grid's braces. `minmax(0,max-content)`
   already lets this column yield, but a column that yields still asks for its
   content first — so an eleven-rem ceiling means no future label, from a
   finding or from anywhere else, can make the row's own title the thing that
   gives way. The label wraps inside the button instead. */
/* `justify-items:stretch`, so the two read as ONE pair of choices.
   With `end` they shrank to their own labels and right-aligned, which put a
   solid 59px primary above a 131px line of brand-coloured text — and a stacked
   pair where only the top one has a button around it reads as an action with an
   error message under it, not as two things you may do. Same width, same box,
   different weight: that is what says "these are alternatives". */
.ag-attn-acts { display:grid; gap:var(--ag-space-1); justify-items:stretch;
  max-width:11rem; }
/* The control scale gives a button 32px of inline padding, which is right for a
   button that sits in a row of its own and wrong for one in an 11rem column:
   it left 112px for a 125px label, so "Add an offering ›" wrapped. */
/* A button in a row of work is the small step, whoever wrote it: the roomy one belongs to a page's own action, and "Open it" on the
   twelfth row was 42px beside the 34px every other button on the page was. */
.ag-attn-acts .ag-button { text-align:center; line-height:var(--ag-leading-tight);
  min-height:var(--ag-control-h-sm); font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold);
  padding-block:var(--ag-space-1); padding-inline:var(--ag-space-2); }

/* The rest of what can be done to a row, behind one mark.
   §4.1 allows one action and at most one alternative, and that discipline is
   about what is PROMOTED — it was never an argument for making "open the
   record" or "why is this here" unreachable. They live here, where they cost
   the row no width and no attention. */
.ag-attn-more { position:relative; justify-self:end; }
.ag-attn-more > summary { list-style:none; cursor:pointer; width:var(--ag-space-4);
  height:var(--ag-space-4); display:grid; place-items:center;
  border-radius:var(--ag-radius-sm); color:var(--ag-ink-faint);
  line-height:var(--ag-leading-tight); }
.ag-attn-more > summary::-webkit-details-marker { display:none; }
.ag-attn-more > summary:hover { color:var(--ag-ink); background:var(--ag-surface-inset); }
.ag-attn-menu { position:absolute; right:0; top:calc(100% + var(--ag-space-1));
  z-index:20; min-width:13rem; display:grid;
  border:var(--ag-border-thin) solid var(--ag-line);
  border-radius:var(--ag-radius-md); background:var(--ag-surface);
  box-shadow:var(--ag-shadow-2); padding:var(--ag-space-1); }
.ag-attn-menu button { font:inherit; font-size:var(--ag-type-caption); text-align:left;
  padding:var(--ag-space-1) var(--ag-space-2); border:0; background:none;
  color:var(--ag-ink); border-radius:var(--ag-radius-sm); cursor:pointer;
  white-space:nowrap; }
.ag-attn-menu button:hover { background:var(--ag-surface-inset); }
.ag-attn-menu button span { display:block; font-size:var(--ag-type-label);
  color:var(--ag-ink-faint); }

/* Below the middle breakpoint the figure, the date and the mandate move under
   the title rather than squeezing it; below the narrow one the actions do too.
   The order is the mobile priority §21 sets: what it is, then what it costs,
   then what to do about it. */
@media (max-width:1180px) {
  .ag-attn { grid-template-columns:auto minmax(12rem,1fr) minmax(0,max-content); }
  .ag-attn-worth, .ag-attn-when { grid-column:2; justify-items:start; text-align:left; }
  .ag-attn-when { margin-top:calc(-1 * var(--ag-space-1)); }
  .ag-attn-mandate { grid-column:2; }
}
/* The breakpoints above measure the WINDOW. A page with the rail beside it is 364px narrower than its window (the rail, and the
   gap and inset it takes), so at 1300px Projects drew six columns in 684px: "none traced" and "ends" printed over one another
   in 21px columns. While the rail is drawn (body.has-rail, set where it is), the medium layout begins where the page, not the
   window, reaches 1180px. The rail itself appears from 1241px (manage.html .page-rail). */
@media (min-width:1241px) and (max-width:1544px) {
  body.has-rail .ag-attn { grid-template-columns:auto minmax(12rem,1fr) minmax(0,max-content); }
  body.has-rail .ag-attn-worth, body.has-rail .ag-attn-when { grid-column:2; justify-items:start; text-align:left; }
  body.has-rail .ag-attn-when { margin-top:calc(-1 * var(--ag-space-1)); }
  body.has-rail .ag-attn-mandate { grid-column:2; }
}
@media (max-width:860px) {
  /* Two columns, and the row stops spending a third of a 375px screen on its
     own padding — 32px a side plus the page's own 32px left the title 157px to
     wrap an eighty-character sentence into six lines. */
  .ag-attn { grid-template-columns:auto minmax(0,1fr);
    padding:var(--ag-space-3) var(--ag-space-2); gap:var(--ag-space-2); }
  .ag-attn-acts { grid-column:2; grid-auto-flow:column; justify-content:start;
    max-width:none; }
}

/* 3 — readiness. SIX INDEPENDENT INDICATORS AND NO AGGREGATE. A bar encodes an
   order that readiness has not got: a productised fixed-fee job is commercially
   ready long before its scope is known, and a bar renders that as 25% done. */
/* A WRAPPING FLOW, not six equal columns. The six labels are "who", "take it
   on", "what", "can we", "money" and "sign" — nothing about them is the same
   width, and `repeat(6,minmax(0,1fr))` sized them by how many there are rather
   than by what they say. In a 420px title column that is 70px each, of which
   .ag-status spends 32px on padding and 14px on its dot: every chip overflowed
   its own pill, "take it on" wrapped to three lines, and the six collided into
   an unreadable smear. Each one now takes the width of its own label.
   The set still reads as six independent indicators with no aggregate, which is
   what this recipe is for — and now they can be read. */
.ag-readiness { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--ag-space-1); font-size:var(--ag-type-label); }
/* Tighter than a standalone status: this is a dense set of six, not one chip
   announcing itself, and the padding a lone chip wants is half the row here. */
.ag-readiness > .ag-status { flex:none; padding:1px var(--ag-space-1);
  font-size:var(--ag-type-label); }

/* ── The module shell ───────────────────────────────────────────────────────
   A page inside a module says which module it is in, what that module is for,
   and what else is in it — before it says anything about itself. Without it
   every section was a title on a blank bar and the only way to tell Momentum
   from Rhythm was to recognise the section names.
   Everything here is DERIVED: the mark, label and promise from the module
   registry, the tabs from the business's own sidebar preset. Nothing in this
   file names a module or a section. */
/* In the bar, not under it. */
.ag-modhead { display:flex; align-items:center; gap:var(--ag-space-2); min-width:0; }
.ag-modhead-mark { width:var(--ag-space-4); height:var(--ag-space-4); flex:none;
  display:grid; place-items:center; border-radius:var(--ag-radius-sm);
  background:var(--ag-signal-soft); color:var(--ag-signal-ink); }
.ag-modhead-text { min-width:0; }
/* Both lines TRUNCATE rather than setting the bar's width. A module's promise
   is one sentence written to be read, not a string the layout should be sized
   by — "Deliver what was promised, and get paid for it." measured 244px and
   pushed the whole topbar past a phone's viewport. */
.ag-modhead-name, .ag-modhead-promise { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-modhead-name { font-family:var(--ag-font-display); font-size:var(--ag-type-body-lg);
  font-weight:var(--ag-weight-medium); line-height:var(--ag-leading-tight); }
.ag-modhead-promise { font-size:var(--ag-type-label); color:var(--ag-ink-muted);
  line-height:var(--ag-leading-tight); }
/* On a phone the promise goes entirely rather than becoming three truncated
   words, which says less than nothing. The mark and the name still answer
   "where am I", and the module's own pages carry the sentence in full. */
@media (max-width:860px) {
  .ag-modhead-promise { display:none; }
  /* The mark goes too. It is recognition FOR the name — a coloured square that
     means "Momentum" once you already know — and beside the spelled-out word it
     says nothing twice. 375px will not hold a burger, a mark, "Momentum", a
     search field and a bell; of the five the mark is the only one that is
     redundant rather than merely small, and dropping it buys 40px that goes to
     the name and the field. It returns above the breakpoint. */
  .ag-modhead-mark { display:none; }
}

/* The strip and the module's action on ONE row, as the design draws it. */
.ag-modbar { display:flex; align-items:stretch; gap:var(--ag-space-3);
  padding:0 var(--ag-space-3);
  box-shadow:inset 0 calc(var(--ag-border-thin) * -1) 0 var(--ag-line); }
.ag-modbar-act { flex:none; align-self:center; padding:var(--ag-space-1) 0; }

/* 388px of supplementary explanation used to stack between the strip and the
   first row — the operator banner, the Compass chip, the "you last did"
   receipt and the intro block, together taller than the five readings they
   introduce. On a module page the header, the strip and the view's own
   sentence already say where you are. They still draw on every other page. */
body.has-module #opsView,
body.has-module #pageCompass,
body.has-module #pageReceipt,
body.has-module #pageIntro { display:none !important; }

/* #pageTabs is NOT hidden here, and that is a deliberate difference from the
   design it is being matched to. Pipeline's two sub-tabs are a real filter —
   "Every deal" against "Pursuits", the ones you raised by hand — and the design
   simply has no control for it. Removing a control that reaches content, to
   make a screenshot match, would be losing the feature and calling it a fix.
   It is made visually subordinate instead: a filter under the strip, not a
   second tab bar competing with it. */
body.has-module #pageTabs { padding:var(--ag-space-2) var(--ag-space-3) 0; }
body.has-module #pageTabs .page-tabs { font-size:var(--ag-type-label); }

/* The module's own sections, along the top. The sidebar holds the same rows;
   this is the one that travels with the page you are on, so moving between
   Quotes and Terms does not mean going back out to the nav and hunting. */
/* ONE TAB RECIPE, THREE MOUNTS (2026-10-07). Where you are in the module (its groups), which page of the group, and which
   view of the page are the same gesture, so they are the same control: `.ag-tabs--row` (a row of names, the current one
   underlined, a count as a pill). The module's two lines were a third look of their own (a group underlined, a page a
   bordered pill) and a page's views were cards on one page, a segment control on another and this row on a third.
   The module's lines SCROLL rather than wrap: wrapping put three rows of tabs above the page at 1100px and moved the content
   down by 114px. They are a switcher, not a directory, and never cost the page more than their own line. */
.ag-tabs--scroll { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--ag-line-strong) transparent; overscroll-behavior-x:contain; }
/* Fingers scroll a row; they do not need a track drawn under the underline. */
@media (pointer:coarse) { .ag-tabs--scroll { scrollbar-width:none; } }
.ag-tabs--scroll > * { flex:none; }
/* A row wider than its room says so at the edge that hides names: they fade out there, so the row reads as one that goes on rather
   than as a name cut in half ("Bran", "What y"). Which edge is set from the row's own scroll (manage.html markScrollEdges). */
.ag-tabs--scroll[data-clip="end"] { mask-image:linear-gradient(to right, currentColor calc(100% - var(--ag-space-5)), transparent); }
.ag-tabs--scroll[data-clip="start"] { mask-image:linear-gradient(to left, currentColor calc(100% - var(--ag-space-5)), transparent); }
.ag-tabs--scroll[data-clip="both"] { mask-image:linear-gradient(to right, transparent, currentColor var(--ag-space-5),
  currentColor calc(100% - var(--ag-space-5)), transparent); }
/* In the bar and the sub line the row sits on the line the bar draws, so its own rule goes and its underline lands on theirs. */
.ag-modbar > .ag-tabs, .ag-modsub > .ag-tabs { flex:1; min-width:0; box-shadow:none; }
/* Between the page that reads the whole module and the groups it reads. */
.ag-modsep { align-self:stretch; width:var(--ag-border-thin); margin:var(--ag-space-1) var(--ag-space-1);
  background:var(--ag-line); }
/* The group's pages: the same row as the line above, starting where it starts. The group's sentence led this line once, so the
   pages began at a different place under every group (after "Push: a campaign, an ad, an offer, a pitch." here, after "Put it where
   people can reach you." there) and the eye had to find them again on every click. It is the group tab's hover text now. */
.ag-modsub { display:flex; align-items:stretch;
  padding:0 var(--ag-space-3);
  box-shadow:inset 0 calc(var(--ag-border-thin) * -1) 0 var(--ag-line); background:var(--ag-surface-inset); }
/* What the selected view holds, under the row of views: the line a card used to carry under its name, kept for the one view
   you are on instead of eight at once. */
.ag-tabs-says { margin:var(--ag-space-1) 0 0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }

/* What today costs if nothing is done — the one banner, above the views.
   It carries a NUMBER and a way in; a banner that only encourages is noise the
   reader learns to scroll past. Dismissible, and it stays dismissed for the
   day rather than for ever: tomorrow is a different number. */
.ag-focus { display:flex; align-items:center; gap:var(--ag-space-2);
  padding:var(--ag-space-2) var(--ag-space-3); margin-bottom:var(--ag-space-2);
  border:var(--ag-border-thin) solid var(--ag-signal);
  border-radius:var(--ag-radius-md); background:var(--ag-signal-soft); }
.ag-focus-mark { flex:none; color:var(--ag-signal-ink); }
.ag-focus-text { flex:1; min-width:0; }
.ag-focus-text b { display:block; font-weight:var(--ag-weight-medium); }
.ag-focus-text span { font-size:var(--ag-type-caption); color:var(--ag-ink-muted); }
.ag-focus-acts { flex:none; display:flex; align-items:center; gap:var(--ag-space-1); }
.ag-focus-x { font:inherit; line-height:1; padding:var(--ag-space-1);
  border:0; background:none; color:var(--ag-ink-faint); cursor:pointer;
  border-radius:var(--ag-radius-sm); }
.ag-focus-x:hover { color:var(--ag-ink); background:var(--ag-surface-inset); }
/* THE BANNER CARRIES ITS OWN NARROW RULE, because §21's line about a component
   that needs a page-level media query is the whole argument for these recipes.
   Three flex children on a 375px screen left the sentence a 90px column setting
   two words a line while "See them" kept its full width beside it — a paragraph
   rendered as a stack of fragments next to a button that looked more important
   than the thing it was about.

   The actions move under the text rather than shrinking: what is at risk is the
   reading, and the way in is the second thing, which is also the mobile
   priority §21 sets — what it is, then what to do about it. */
@media (max-width:860px) {
  .ag-focus { flex-wrap:wrap; }
  .ag-focus-text { flex:1 0 100%; order:1; }
  .ag-focus-mark { order:0; }
  /* Full width so the dismiss stays at the far edge and the button keeps the
     44px target the touch rule requires, instead of both crowding one corner. */
  .ag-focus-acts { order:2; flex:1 0 100%; justify-content:space-between; }
}

/* ── Find ───────────────────────────────────────────────────────────────────
   One box that reaches every page and everything the page has already loaded.
   Sixty-odd sections behind four levels of nav is a filing cabinet; this is the
   drawer handle. It searches what it can HONESTLY search — the sections this
   member may open, and the records the open lens has already fetched — and its
   placeholder says so rather than promising a search of the whole book. */
/* `min-width:0` let this shrink all the way to ZERO, and its mark, its input
   and its ⌘K badge are all position:absolute — so at 375px the box was 0px wide
   with three children still painting outside it, which is how a search field
   ends up being the thing that makes a page scroll sideways. A floor, so it is
   either usable or not there; never a nought-width box with furniture around
   it. Below the floor it is the TOPBAR that yields, because a module name can
   truncate and a search field cannot. */
.ag-find { position:relative; flex:1 1 12rem; min-width:9rem; max-width:32rem; }
.ag-find-input { width:100%; font:inherit; font-size:var(--ag-type-caption);
  padding:var(--ag-space-1) var(--ag-space-2); padding-left:var(--ag-space-4);
  border:var(--ag-border-thin) solid var(--ag-line);
  border-radius:var(--ag-radius-pill); background:var(--ag-surface-inset);
  color:var(--ag-ink); outline:none; }
.ag-find-input:focus { border-color:var(--ag-signal); background:var(--ag-surface); }
.ag-find-mark { position:absolute; left:var(--ag-space-2); top:50%;
  transform:translateY(-50%); color:var(--ag-ink-faint); pointer-events:none;
  line-height:1; }
.ag-find-kbd { position:absolute; right:var(--ag-space-2); top:50%;
  transform:translateY(-50%); font-size:var(--ag-type-label);
  color:var(--ag-ink-faint); pointer-events:none; }
/* There is no ⌘ key on a phone. The hint is a promise the device cannot keep,
   and it is spending width the field itself needs. */
@media (max-width:860px) {
  .ag-find-kbd { display:none; }
  /* A lower floor, because on a phone the module's name is worth more than the
     last 64px of the search field. At 9rem this floor was taking the width the
     mark and the name needed and leaving the bar unable to say where you are.
     The field still grows into whatever the bar has left over. */
  .ag-find { min-width:5rem; }
}
.ag-find-results { position:absolute; left:0; right:0; top:calc(100% + var(--ag-space-1));
  z-index:60; max-height:60vh; overflow:auto; display:none;
  border:var(--ag-border-thin) solid var(--ag-line);
  border-radius:var(--ag-radius-md); background:var(--ag-surface);
  box-shadow:var(--ag-shadow-2); padding:var(--ag-space-1); }
.ag-find.is-open .ag-find-results { display:block; }
.ag-find-group { font-size:var(--ag-type-label); color:var(--ag-ink-faint);
  padding:var(--ag-space-1) var(--ag-space-2) 2px; }
.ag-find-hit { display:grid; width:100%; gap:2px; font:inherit; text-align:left;
  padding:var(--ag-space-1) var(--ag-space-2); border:0; background:none;
  color:var(--ag-ink); border-radius:var(--ag-radius-sm); cursor:pointer;
  font-size:var(--ag-type-caption); }
.ag-find-hit:hover, .ag-find-hit[aria-selected="true"] { background:var(--ag-surface-inset); }
.ag-find-hit span { font-size:var(--ag-type-label); color:var(--ag-ink-faint); }
.ag-find-none { padding:var(--ag-space-2); font-size:var(--ag-type-caption);
  color:var(--ag-ink-muted); }

/* The bell. A count of what has actually changed, from the same feed the rail
   and What's changed read — never a dot that means "look at me". */
.ag-bell { position:relative; font:inherit; border:0; background:none;
  color:var(--ag-ink-muted); cursor:pointer; padding:var(--ag-space-1);
  border-radius:var(--ag-radius-sm); line-height:1; }
.ag-bell:hover { color:var(--ag-ink); background:var(--ag-surface-inset); }
.ag-bell b { position:absolute; top:-2px; right:-2px; min-width:var(--ag-space-2);
  padding:0 var(--ag-space-1); display:grid; place-items:center;
  border-radius:var(--ag-radius-pill); background:var(--ag-signal);
  color:var(--ag-signal-contrast, #fff); font-size:var(--ag-type-label);
  font-variant-numeric:tabular-nums; line-height:var(--ag-leading-tight); }

/* ── The rail ───────────────────────────────────────────────────────────────
   Standing context beside the page, never instead of it: what day it is, the
   module's four numbers, and what has happened lately. It is the first thing
   dropped on a narrow screen, because none of it is the work. */
.ag-rail { display:grid; gap:var(--ag-space-3); align-content:start; }
.ag-rail[hidden] { display:none; }
/* A rail card is a box, drawn from the same tokens as every other box on the page (Design › Box), so the column beside the
   work is the same material as the work. Cards are spaced, never flush. */
.ag-rail-card { min-width:0; border:var(--ag-border-thin) solid var(--ag-box-edge); border-radius:var(--ag-box-radius);
  background:var(--ag-box-ground); box-shadow:var(--ag-shadow-1); padding:var(--ag-space-3); }
.ag-rail-card > h4 { margin:0 0 var(--ag-space-2); display:flex; align-items:baseline; justify-content:space-between; gap:var(--ag-space-2);
  font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); color:var(--ag-ink-2); }
/* The day: what today is, said once, above the numbers it frames. */
.ag-rail-day { display:grid; gap:calc(var(--ag-space-1) / 4); padding-bottom:var(--ag-space-2); margin-bottom:var(--ag-space-2);
  border-bottom:var(--ag-border-thin) solid var(--ag-line); }
.ag-rail-when { font-family:var(--ag-font-display); font-size:var(--ag-type-card); line-height:var(--ag-leading-tight); color:var(--ag-ink); }
.ag-rail-hello { font-size:var(--ag-type-small); color:var(--ag-ink-3); line-height:var(--ag-leading-body); }
/* Four numbers in one ruled block: a number, what it counts, and what it is counted over. A tile that leads somewhere is a button. */
.ag-rail-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:var(--ag-border-thin) solid var(--ag-line);
  border-radius:var(--ag-radius-sm); overflow:clip; }
.ag-rail-tile { appearance:none; margin:0; border:0; background:none; font:inherit; color:inherit; text-align:left; min-width:0;
  display:grid; align-content:start; gap:calc(var(--ag-space-1) / 2); padding:var(--ag-space-2); }
.ag-rail-tile:nth-child(odd) { border-right:var(--ag-border-thin) solid var(--ag-line); }
.ag-rail-tile:nth-child(n+3) { border-top:var(--ag-border-thin) solid var(--ag-line); }
button.ag-rail-tile { cursor:pointer; }
button.ag-rail-tile:hover { background:var(--ag-surface-inset); }
.ag-rail-tile b { font-family:var(--ag-font-display); font-variant-numeric:tabular-nums; font-size:var(--ag-type-card);
  font-weight:var(--ag-weight-semibold); line-height:var(--ag-leading-tight); color:var(--ag-ink); overflow-wrap:anywhere; }
.ag-rail-tile-k { display:flex; align-items:center; gap:calc(var(--ag-space-1) / 2); font-size:var(--ag-type-caption); color:var(--ag-ink-2);
  line-height:var(--ag-leading-tight); }
.ag-rail-tile-k .nav-icon { flex:none; color:var(--ag-ink-3); }
.ag-rail-tile small { font-size:var(--ag-type-label); color:var(--ag-ink-3); line-height:var(--ag-leading-tight); }
/* Lately: one line per thing that changed, ruled apart. */
.ag-rail-feed { display:grid; }
.ag-rail-ev { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--ag-space-2); align-items:start;
  padding:var(--ag-space-2) 0; border-top:var(--ag-border-thin) solid var(--ag-line); font-size:var(--ag-type-small); line-height:var(--ag-leading-body); }
.ag-rail-ev:first-child { border-top:0; padding-top:0; }
.ag-rail-ev:last-child { padding-bottom:0; }
.ag-rail-ev i { font-style:normal; color:var(--ag-ink-3); width:var(--ag-space-3); height:var(--ag-space-3); display:grid; place-items:center;
  margin-top:calc(var(--ag-space-1) / 4); }
.ag-rail-ev time { font-size:var(--ag-type-label); color:var(--ag-ink-3); white-space:nowrap; margin-top:calc(var(--ag-space-1) / 4); }
.ag-rail-ev em { font-style:normal; font-size:var(--ag-type-caption); color:var(--ag-ink-3); display:block; }
.ag-rail-empty { margin:0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
/* The rail can be put away and brought back (manage.html railToggle): a × in the first card's corner, and while it is away a
   panel mark at the end of the module's bar. Both are quiet until pointed at; the work is the page, not the controls around it. */
.ag-rail-card:first-child { position:relative; }
.ag-rail-close, .ag-rail-show { display:inline-grid; place-items:center; flex:none; padding:0; cursor:pointer;
  width:calc(var(--ag-control-h-sm) * .8); height:calc(var(--ag-control-h-sm) * .8); font-size:var(--ag-type-body);
  border:var(--ag-border-thin) solid transparent; border-radius:var(--ag-radius-sm); background:transparent; color:var(--ag-ink-3); }
.ag-rail-close:hover, .ag-rail-show:hover { color:var(--ag-ink); background:var(--ag-surface-inset); border-color:var(--ag-line); }
.ag-rail-close { position:absolute; top:var(--ag-space-1); right:var(--ag-space-1); }
.ag-rail-close + .ag-rail-day { padding-right:var(--ag-space-4); }
.ag-rail-show { align-self:center; }
.ag-rail-show[hidden] { display:none; }
/* Below the width a rail is drawn at all (manage.html .page-rail), there is nothing to bring back. */
@media (max-width:1240px) { .ag-rail-show { display:none; } }

/* 3b — SORT. A list somebody cannot reorder is a list that has decided for
   them which question they came with: "what expires first" and "what is worth
   most" are different questions about the same eight offers, and only one of
   them was answerable. A recipe rather than a one-off, because every register
   in this console has the same problem. */
.ag-sort { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-1);
  margin-bottom:var(--ag-space-2); font-size:var(--ag-type-label); }
.ag-sort > b { font-weight:var(--ag-weight-normal); color:var(--ag-ink-faint);
  margin-right:var(--ag-space-1); }
.ag-sort button { font:inherit; font-size:var(--ag-type-label);
  padding:2px var(--ag-space-2); border-radius:var(--ag-radius-pill);
  border:var(--ag-border-thin) solid var(--ag-line); background:none;
  color:var(--ag-ink-muted); cursor:pointer; white-space:nowrap; }
.ag-sort button:hover { border-color:var(--ag-line-strong); color:var(--ag-ink); }
.ag-sort button[aria-pressed="true"] { color:var(--ag-ink);
  background:var(--ag-signal-soft); border-color:var(--ag-signal); }

/* A row that opens its own record. The whole title is the target, not a
   trailing chevron nobody finds. */
.ag-open { font:inherit; font-size:inherit; font-weight:inherit; color:inherit;
  background:none; border:0; padding:0; text-align:left; cursor:pointer; }
.ag-open:hover { text-decoration:underline; text-underline-offset:2px; }

/* 4 — the composition strip. Worth's committed / weighted / nominal and Room's
   committed / reserved / free / blocked: segments READ SEPARATELY and never
   summed into a headline. Colours come from --ag-cat-* on purpose — committed
   money is not "good" and free capacity is not "a warning", so the semantic
   ramp is the wrong vocabulary for a composition. */
.ag-split { display:flex; height:var(--ag-space-2); border-radius:var(--ag-radius-pill);
  overflow:hidden; background:var(--ag-surface-inset); }
.ag-split > span { display:block; }
.ag-split-key { display:flex; gap:var(--ag-space-3); flex-wrap:wrap;
  font-size:var(--ag-type-label); color:var(--ag-ink-muted); margin-top:var(--ag-space-2); }
.ag-split-key > span { display:inline-flex; align-items:center; gap:var(--ag-space-1); }
.ag-split-key i { width:var(--ag-space-2); height:var(--ag-space-2); flex:none;
  border-radius:var(--ag-radius-pill); background:currentColor; }
/* A segment that says its own slot (data-cat 1–6) and its share (--seg, the one inline allowance: no class says "42.3%"), and its
   key beside it: for a strip drawn inside an embedded app, which cannot reach the console's own lens classes. Who pays draws an
   order's payers this way. */
.ag-split > [data-cat] { flex:0 0 var(--seg, 0%); --tone:var(--ag-cat-1); background:var(--tone); }
.ag-split-key > [data-cat] i { --tone:var(--ag-cat-1); background:var(--tone); }
.ag-split > [data-cat="2"], .ag-split-key > [data-cat="2"] i { --tone:var(--ag-cat-2); }
.ag-split > [data-cat="3"], .ag-split-key > [data-cat="3"] i { --tone:var(--ag-cat-3); }
.ag-split > [data-cat="4"], .ag-split-key > [data-cat="4"] i { --tone:var(--ag-cat-4); }
.ag-split > [data-cat="5"], .ag-split-key > [data-cat="5"] i { --tone:var(--ag-cat-5); }
.ag-split > [data-cat="6"], .ag-split-key > [data-cat="6"] i { --tone:var(--ag-cat-6); }

/* 5 — the mandate. Agent / Approval / Person, and the ceiling behind it.
   Deliberately NOT an .ag-status: a status is a state of the work, and this is
   who may act on it. Quiet, because it is a standing fact rather than news. */
.ag-mandate { display:inline-flex; align-items:center; gap:var(--ag-space-1);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ag-ink-faint); background:none; border:0; font:inherit;
  font-size:var(--ag-type-label); line-height:var(--ag-leading-tight); }
.ag-mandate::before { content:""; width:5px; height:5px; flex:none;
  border-radius:var(--ag-radius-pill); background:currentColor; }
button.ag-mandate { cursor:help; }
button.ag-mandate:hover { color:var(--ag-ink-muted); }

/* ── Density comes from the surface, not from the component ─────────────── */
[data-ag-surface="admin"] .ag-page,
[data-ag-surface="vp"] .ag-page,
[data-ag-surface="integrator"] .ag-page { padding-top:var(--ag-space-5); }
[data-ag-surface="marketing"] .ag-page { padding-block:var(--ag-space-9); }
[data-ag-surface="marketing"] .ag-page-title { font-size:var(--ag-type-hero); }

/* ── Lifecycle: where a record is, and what may follow ──────────────────── */
/* One recipe, every record. The order stage block was written inline with
   hand-rolled styles and no other record had an equivalent, so thirteen
   machines had no way to show themselves. Tokens only — a semantic hex here
   would fail the contrast audit on one of the two themes. */
.ag-life { margin-top:var(--ag-space-4); padding-top:var(--ag-space-3);
  border-top:1px solid var(--ag-line); }
.ag-life-head { display:flex; align-items:center; gap:var(--ag-space-3);
  flex-wrap:wrap; }
.ag-life-means { margin-top:var(--ag-space-2); color:var(--ag-ink-muted);
  font-size:var(--ag-type-caption); line-height:var(--ag-leading-body); }
.ag-life-moves { display:flex; gap:var(--ag-space-2); flex-wrap:wrap;
  align-items:center; margin-top:var(--ag-space-3); }
/* The tone is a property of the STATE, so it lives here rather than as an
   inline background the caller computes. Three cases and no others: it is
   running, it worked, or it did not. */
.ag-life-state { display:inline-flex; align-items:center;
  padding:var(--ag-space-1) var(--ag-space-3); border-radius:var(--ag-radius-pill);
  font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); line-height:var(--ag-leading-tight);
  background:var(--ag-surface-inset); color:var(--ag-ink-muted); }
/* It read --ag-surface-sunk, --ag-accent-wash and --ag-accent-ink, which nothing declares: every lifecycle chip
   drew with no ground and the inherited colour. The guard now reads this sheet too. */
.ag-life-state[data-tone="live"] { background:var(--ag-signal-soft); color:var(--ag-signal-ink); }
.ag-life-state[data-tone="settled"] { background:var(--ag-surface-inset); color:var(--ag-ink); }
.ag-life-state[data-tone="failed"] { background:var(--ag-surface-inset); color:var(--ag-ink-muted); }

/* ── A working page ──────────────────────────────────────────────────────────
   The recipes a page is built from when its job is to say what to do and let
   it be done there: one tinted line said before everything else (a callout),
   a bordered list of rows each done in its row, quiet boxes beside it, a grid
   of items two abreast, and the record at the foot. Reach's Where you are and
   Needs you are built from these and nothing else (MAGNET-COMMAND-SPEC.md §25).

   Every value is a token, and every decision a token stands for is a control
   on /admin → Design: the two quieter text steps, the box's edge, ground and
   corners, a row's padding, how much tone a small label keeps and its marker,
   the callout's wash, edge, gauge and corners, chips, links, the meter, label
   case and tracking, and the four weights. */

/* Type and links */
.ag-link { font:inherit; font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); color:var(--ag-link-ink);
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  text-decoration:var(--ag-link-decoration); text-underline-offset:.2em; }
.ag-link:hover { color:var(--ag-signal-ink); text-decoration:underline; }
.ag-link[disabled] { color:var(--ag-ink-2); cursor:default; text-decoration:none; }
.ag-link[hidden] { display:none; }
.ag-hint { margin:0; font-size:var(--ag-type-caption); color:var(--ag-ink-3); line-height:var(--ag-leading-body);
  max-width:var(--ag-measure-reading); }
.ag-hint[data-tone="warn"] { color:var(--ag-warning-label); }
.ag-hint:empty { display:none; }
.ag-noteline { margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:calc(var(--ag-space-1) / 2) var(--ag-space-1);
  font-size:var(--ag-type-caption); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-noteline b { font-weight:var(--ag-weight-semibold); color:var(--ag-ink); }
.ag-inline { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-1) var(--ag-space-2); }
.ag-bullets { margin:0; padding:0 0 0 var(--ag-space-2); display:grid; gap:calc(var(--ag-space-1) / 4); }
.ag-dash { color:var(--ag-ink-3); }
/* A label over a value or a kind. Case and tracking are one decision for the platform. */
.ag-label { font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold); letter-spacing:var(--ag-label-tracking);
  text-transform:var(--ag-label-case); color:var(--ag-ink-3); }

/* A count and a tag: the one thing in a line that is a number, or a short word about it */
.ag-count, .ag-pill { display:inline-block; font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold);
  line-height:var(--ag-leading-body); padding:0 calc(var(--ag-space-1) * .75); border-radius:var(--ag-radius-pill);
  border:var(--ag-border-thin) solid var(--ag-chip-edge); background:var(--ag-chip-ground); color:var(--ag-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; vertical-align:middle; }
.ag-pill { font-weight:var(--ag-weight-normal); color:var(--ag-ink-2); }
.ag-pill[data-up="true"] { color:var(--ag-positive-label); }
.ag-pill[data-up="false"] { color:var(--ag-warning-label); }

/* Chips: one kind at a time, or all of them */
.ag-filters { display:flex; flex-wrap:wrap; gap:calc(var(--ag-space-1) * .75); }
.ag-filter { font:inherit; font-size:var(--ag-type-caption); line-height:var(--ag-leading-body);
  padding:calc(var(--ag-space-1) / 4) calc(var(--ag-space-1) * 1.25); border-radius:var(--ag-radius-pill);
  border:var(--ag-border-thin) solid var(--ag-chip-edge); background:var(--ag-chip-ground); color:var(--ag-ink);
  cursor:pointer; white-space:nowrap; }
.ag-filter:hover { border-color:var(--ag-ink); }
.ag-filter[aria-pressed="true"] { background:var(--ag-chip-on); border-color:var(--ag-chip-on); color:var(--ag-chip-on-ink);
  font-weight:var(--ag-weight-semibold); }

/* "Why", "What closes it", "6 more": one press away */
.ag-more { min-width:0; }
.ag-more > summary { display:inline-block; cursor:pointer; list-style:none; font-size:var(--ag-type-caption);
  font-weight:var(--ag-weight-semibold); color:var(--ag-ink-2); text-decoration:var(--ag-link-decoration); text-underline-offset:.2em; }
.ag-more > summary::-webkit-details-marker { display:none; }
.ag-more > summary:hover, .ag-more[open] > summary { color:var(--ag-ink); text-decoration:underline; }
.ag-more > :not(summary) { margin-top:var(--ag-space-1); }
.ag-more p, .ag-more .ag-bullets { margin-bottom:0; font-size:var(--ag-type-caption); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-more p b { color:var(--ag-ink); font-weight:var(--ag-weight-semibold); }
.ag-ev { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:calc(var(--ag-space-1) / 2) var(--ag-space-2);
  margin-bottom:0; font-size:var(--ag-type-small); line-height:var(--ag-leading-body); }
.ag-ev dt { color:var(--ag-ink-2); }
.ag-ev dd { margin:0; color:var(--ag-ink); }

/* A page title with one line beside it */
.ag-titlebar { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:calc(var(--ag-space-1) / 2) var(--ag-space-3); margin:0 0 var(--ag-space-1); }
.ag-titlebar h2 { margin:0; font-family:var(--ag-font-display); font-size:var(--ag-type-card); font-weight:var(--ag-weight-bold);
  letter-spacing:-.01em; line-height:var(--ag-leading-tight); color:var(--ag-ink); }
.ag-titlebar > p { display:flex; flex-wrap:wrap; align-items:baseline; gap:calc(var(--ag-space-1) / 2) var(--ag-space-1); margin:0;
  min-width:0; font-size:var(--ag-type-small); color:var(--ag-ink-2); }
.ag-titlebar > p > .ag-label { color:var(--ag-ink-3); }

/* The callout: one tinted line, its gauge, and its button */
.ag-callout { --tone:var(--ag-warning);
  /* Each part has its own column and no column gap: with the ring switched off its column is empty and takes no
     width, so the line closes up rather than leaving a hole where the gauge was. */
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:calc(var(--ag-space-1) / 2) 0; align-items:start;
  margin:var(--ag-space-2) 0 var(--ag-space-3); padding:var(--ag-space-2); border-radius:var(--ag-callout-radius);
  background:color-mix(in srgb, var(--tone) var(--ag-callout-tint), var(--ag-surface-raised));
  border:var(--ag-border-thin) solid color-mix(in srgb, var(--tone) var(--ag-callout-edge), transparent); }
.ag-callout[data-tone="positive"] { --tone:var(--ag-positive); }
.ag-callout[data-tone="danger"] { --tone:var(--ag-danger); }
.ag-callout[data-tone="info"] { --tone:var(--ag-info); }
.ag-callout-gauge { grid-column:1; display:var(--ag-callout-ring); margin-right:var(--ag-space-2); width:calc(var(--ag-control-h-sm) + var(--ag-space-1) / 2);
  height:calc(var(--ag-control-h-sm) + var(--ag-space-1) / 2); }
.ag-callout-gauge text { font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold); fill:var(--ag-ink); font-variant-numeric:tabular-nums; }
.ag-callout-bar { display:var(--ag-callout-bar); width:100%; height:calc(var(--ag-space-1) * .75); margin-top:var(--ag-space-1); }
.ag-gauge-bed { fill:var(--ag-surface-raised); stroke:var(--ag-box-edge); }
.ag-gauge-arc { fill:none; stroke:var(--tone); }
.ag-callout-bar .ag-gauge-bed { stroke:none; fill:var(--ag-box-edge); }
.ag-callout-bar .ag-gauge-arc { stroke:none; fill:var(--tone); }
.ag-callout-main { grid-column:2; display:grid; gap:calc(var(--ag-space-1) / 4); min-width:0; justify-items:stretch; }
.ag-callout-main strong { font-size:var(--ag-type-body); font-weight:var(--ag-weight-bold); line-height:1.3; color:var(--ag-ink); }
.ag-callout-main > p { margin:0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-callout-main > .ag-more { justify-self:start; }
.ag-callout-do { grid-column:3; margin-left:var(--ag-space-2); }
.ag-callout-do .ag-button--secondary { background:var(--ag-surface-raised); }
@media (max-width:720px) {
  .ag-callout { grid-template-columns:auto minmax(0,1fr); }
  .ag-callout-do { grid-column:1 / -1; margin-left:0; margin-top:var(--ag-space-1); }
}

/* A lens's row of views, then the page: the callout keeps its own margin, and with no callout the page itself
   keeps the same distance from the views rather than starting on their rule. */
.ag-tabs-fit + .ag-workpage { margin-top:var(--ag-space-3); }
/* A Reach view's parts — its sentence, figures, sections and the hint under a section — one step apart. They were stacked with
   whatever margin each happened to carry, so a hint ran into the next section's heading and read as its first line. */
body[data-module="magnet"] .lens { display:grid; gap:var(--ag-space-3); align-content:start; min-width:0; }
body[data-module="magnet"] .lens > * { margin-top:0; margin-bottom:0; }

/* The page's columns: the work, and two quiet boxes beside it */
.ag-workpage { display:grid; gap:var(--ag-space-3); min-width:0; container-type:inline-size; }
.ag-workpage-cols { display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:var(--ag-space-3); align-items:start; }
.ag-workpage-col { display:grid; gap:var(--ag-space-2); align-content:start; min-width:0; }
/* What sits in a column may be narrower than what it holds: a grid item is as wide as its widest content unless told otherwise, so a
   wide table pushed its panel out over the next column instead of scrolling inside it (Who pays, at a laptop's width). */
.ag-workpage-col > * { min-width:0; }
.ag-block { display:grid; gap:var(--ag-space-1); min-width:0; }
.ag-block-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:calc(var(--ag-space-1) / 2) var(--ag-space-2); }
.ag-block-head h2 { margin:0; font-family:var(--ag-font-display); font-size:var(--ag-type-body-lg); font-weight:var(--ag-weight-bold);
  line-height:var(--ag-leading-tight); color:var(--ag-ink); }
.ag-block-head p { margin:0; font-size:var(--ag-type-small); color:var(--ag-ink-2); }

/* THE PAGE HEADER (2026-10-07). Every page of a module opens the same way: its name, one sentence, and the one thing to do. The pages
   drew it six ways (a hero card with a ring, a paragraph, a card title, an h2 of another size, nothing, a button under a sentence).
   The shell draws it once, above the page's own views, from what the page says about itself (setPageHead in manage.html). */
.ag-pagehead { display:grid; gap:var(--ag-space-1); padding:var(--ag-space-3) 0 var(--ag-space-2); min-width:0; }
.ag-pagehead-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--ag-space-2) var(--ag-space-4); }
.ag-pagehead-title { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-2); min-width:0; }
.ag-pagehead h2 { margin:0; font-family:var(--ag-font-display); font-size:var(--ag-type-card); font-weight:var(--ag-weight-bold);
  line-height:var(--ag-leading-tight); color:var(--ag-ink); }
.ag-pagehead-says { margin:0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); max-width:var(--ag-measure-reading); }
.ag-pagehead-do { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-1); }
/* A module's own action never competes with the page's: when the page owns a primary, the bar's is not drawn. */
body.page-has-primary .ag-modbar-act { display:none; }
.ag-pagehead .ag-more { margin-top:var(--ag-space-1); }
.ag-about { display:grid; gap:var(--ag-space-2); padding:var(--ag-space-2) 0 var(--ag-space-1); max-width:var(--ag-measure-reading); }
.ag-about h3 { margin:0; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); color:var(--ag-ink); }
.ag-about ul { margin:var(--ag-space-1) 0 0; padding-left:var(--ag-space-4); display:grid; gap:calc(var(--ag-space-1) / 2); font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-about p { margin:0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-about-chips { display:flex; flex-wrap:wrap; gap:var(--ag-space-1); }

/* A section's own action sits at the right of its head; a row of fields is one line that wraps. */
.ag-block-do { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-1); }
.ag-field-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--ag-space-2); padding-bottom:var(--ag-space-2); }
.ag-field-row > .ag-field { margin:0; flex:1 1 9rem; min-width:0; }
.ag-field-row > .ag-field > input, .ag-field-row > .ag-field > select { width:100%; box-sizing:border-box; }
.ag-field-row > .ag-field--do { flex:0 0 auto; }

/* ── The writer's pieces: a post as it would appear, the pictures to choose from, the boxes in a stack ── */
.ag-boxes { display:grid; gap:var(--ag-space-2); min-width:0; }
.ag-takes { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--ag-type-card) * 17)), 1fr)); gap:var(--ag-space-2); min-width:0; }
.ag-box > header h3 .ag-status { margin-left:auto; }
.ag-box-body > .ag-filters, .ag-box-body > .ag-post, .ag-box-body > .ag-inline { margin-bottom:var(--ag-space-2); }
.ag-box-foot.ag-inline { gap:var(--ag-space-1); }
.ag-box-foot .ag-attn-more { margin-left:auto; }
.ag-field-top { display:flex; align-items:baseline; justify-content:space-between; gap:var(--ag-space-2); }
.ag-field-top > label { font-size:var(--ag-type-caption); font-weight:var(--ag-weight-medium); color:var(--ag-ink-muted); }
.ag-field-top > span { font-size:var(--ag-type-caption); color:var(--ag-ink-3); font-variant-numeric:tabular-nums; }
.ag-field-top > span[data-over="true"] { color:var(--ag-danger-label); font-weight:var(--ag-weight-semibold); }
.ag-field textarea.ag-input { width:100%; box-sizing:border-box; }
.ag-hint[data-tone="danger"] { color:var(--ag-danger-label); }
.ag-filter[disabled] { cursor:default; }
.ag-chan { display:inline-flex; align-items:center; gap:var(--ag-space-1); cursor:pointer; font-size:var(--ag-type-small); color:var(--ag-ink);
  padding:calc(var(--ag-space-1) * .75) var(--ag-space-2); border:var(--ag-border-thin) solid var(--ag-box-edge); border-radius:var(--ag-radius-sm); background:var(--ag-surface); }
.ag-chan input { min-height:0; padding:0; margin:0; }
.ag-chan small { font-size:var(--ag-type-label); color:var(--ag-ink-3); }
.ag-chan:has(input:checked) { border-color:var(--ag-signal); background:var(--ag-signal-soft); }
.ag-attn-menu button[data-tone="danger"] { color:var(--ag-danger-label); }
.ag-post { max-width:calc(var(--ag-type-card) * 21); overflow:hidden; background:var(--ag-surface);
  border:var(--ag-border-thin) solid var(--ag-box-edge); border-radius:var(--ag-box-radius); }
.ag-post-head { display:flex; align-items:center; gap:var(--ag-space-1); padding:var(--ag-space-1) var(--ag-space-2); }
.ag-post-head b { display:block; font-size:var(--ag-type-small); font-weight:var(--ag-weight-bold); line-height:var(--ag-leading-tight); }
.ag-post-head small { font-size:var(--ag-type-label); color:var(--ag-ink-3); }
.ag-post-mark { position:relative; flex:none; display:grid; place-items:center; overflow:hidden; width:var(--ag-control-h-sm); height:var(--ag-control-h-sm);
  border-radius:var(--ag-radius-pill); background:var(--ag-surface-inset); font-size:var(--ag-type-caption); font-weight:var(--ag-weight-bold); color:var(--ag-ink-2); }
.ag-post-fill { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ag-post-media { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:var(--ag-surface-inset); }
.ag-post-media[data-shape="square"] { aspect-ratio:1; }
.ag-post-media[data-shape="tall"] { aspect-ratio:4 / 7; }
.ag-post-over { position:absolute; inset:auto 0 0 0; max-height:70%; overflow:auto; padding:var(--ag-space-2); font-size:var(--ag-type-caption);
  line-height:var(--ag-leading-body); color:var(--ag-ink); background:linear-gradient(transparent, color-mix(in srgb, var(--ag-surface) 92%, transparent)); }
.ag-post-miss { margin:0; padding:var(--ag-space-3) var(--ag-space-2); text-align:center; background:var(--ag-surface-inset); color:var(--ag-warning-label); font-size:var(--ag-type-caption); }
.ag-post-text { padding:var(--ag-space-1) var(--ag-space-2) var(--ag-space-2); }
.ag-post-body { font-size:var(--ag-type-small); line-height:var(--ag-leading-body); white-space:pre-wrap; overflow-wrap:anywhere; }
.ag-post-body[data-clamp] { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.ag-post-body[data-clamp="2"] { -webkit-line-clamp:2; }
.ag-post-body[data-clamp="3"] { -webkit-line-clamp:3; }
.ag-draft { margin:0; white-space:pre-wrap; overflow-x:auto; font:inherit; font-size:var(--ag-type-small); line-height:var(--ag-leading-body); color:var(--ag-ink);
  padding:var(--ag-space-1) var(--ag-space-2); background:var(--ag-surface-inset); border-radius:var(--ag-radius-sm); }
.ag-table--matrix { min-width:calc(var(--ag-type-card) * 40); }
.ag-table--matrix th:first-child, .ag-table--matrix td:first-child { position:sticky; left:0; z-index:1; background:var(--ag-surface); white-space:nowrap; font-weight:var(--ag-weight-semibold); }
.ag-table--matrix tr[data-you] td { background:var(--ag-signal-soft); }
.ag-table--matrix tr[data-target] td { border-top:calc(var(--ag-border-thin) * 2) solid var(--ag-positive); font-weight:var(--ag-weight-semibold); }
.ag-cellbar { display:flex; align-items:center; gap:var(--ag-space-1); min-width:calc(var(--ag-type-card) * 5); }
.ag-cellbar > span { flex:none; min-width:calc(var(--ag-type-card) * 1.25); text-align:right; font-size:var(--ag-type-caption); color:var(--ag-ink-2); }
.ag-cellbar .ag-track { grid-column:auto; flex:1 1 auto; }
.ag-range { flex:1 1 auto; min-width:0; accent-color:var(--ag-positive); }
.ag-field > label small, .ag-field-top > label small { font-size:inherit; font-weight:var(--ag-weight-normal); color:var(--ag-ink-3); }
/* A switch: the one control for something that is on or off, drawn from a checkbox so it needs no script. */
.ag-switch { --sw-h:var(--ag-control-h-sm); --sw-gap:calc(var(--ag-space-1) / 2); --sw-knob:calc(var(--sw-h) - var(--sw-gap) * 2 - var(--ag-border-thin) * 2);
  display:inline-flex; align-items:center; gap:var(--ag-space-1); cursor:pointer; font-size:var(--ag-type-small); color:var(--ag-ink); }
.ag-switch input { appearance:none; flex:none; margin:0; padding:0; min-height:0; box-sizing:border-box; cursor:pointer; position:relative;
  width:calc(var(--sw-h) * 1.6); height:var(--sw-h); border-radius:var(--ag-radius-pill); background:var(--ag-surface-inset); border:var(--ag-border-thin) solid var(--ag-field-edge); }
.ag-switch input::before { content:""; position:absolute; top:50%; left:var(--sw-gap); width:var(--sw-knob); height:var(--sw-knob); transform:translateY(-50%);
  border-radius:var(--ag-radius-pill); background:var(--ag-ink-3); }
.ag-switch input:checked { background:var(--ag-signal); border-color:var(--ag-signal); }
.ag-switch input:checked::before { left:calc(100% - var(--sw-gap) - var(--sw-knob)); background:var(--ag-signal-contrast, var(--ag-canvas)); }
.ag-switch input:focus-visible { outline:2px solid var(--ag-focus); outline-offset:2px; }
.ag-thumbs { display:flex; flex-wrap:wrap; gap:var(--ag-space-1); }
.ag-thumb { position:relative; flex:none; padding:0; overflow:hidden; cursor:pointer; width:calc(var(--ag-control-h-sm) * 1.6); height:calc(var(--ag-control-h-sm) * 1.6);
  border:var(--ag-border-thin) solid var(--ag-box-edge); border-radius:var(--ag-radius-sm); background:var(--ag-surface-inset); }
.ag-thumb[aria-pressed="true"] { border-color:var(--ag-signal); box-shadow:0 0 0 var(--ag-border-thin) var(--ag-signal); }

/* THE CARD, AS A BLOCK, ON EVERY OWNER PAGE. `.card`, `.card-header`, `.card-title` and `.card-body` are written by hand in every renderer
   that has not moved to `mkCard` (Chat, Voice line, Positioning, Content Studio, Actions, Website, Profile, Billing …). Rather than touch
   four hundred of them, the console draws them as what a block is: the head above (a name, what it is, and any action at the right),
   a box below, the box's edge and ground the design's own (--ag-box-*, Design → Components → Box).

   It was the Reach module's alone (body[data-module="magnet"]) for as long as the other modules kept the legacy boxed card, which made
   one product draw two cards: a name inside a bordered panel on Orders, a name above a box on Reach. The two directions need ONE card to
   give two looks (a ruled section in Ledger, a raised card in Counter), so the block is the card everywhere in the owner console.
   Scoped to the console (data-ag-surface="owner"): admin, the VP console and the public pages carry their own `.card` rules. */
[data-ag-surface="owner"] .card { display:grid; gap:var(--ag-space-1); min-width:0; background:none; border:0; border-radius:0; box-shadow:none; }
[data-ag-surface="owner"] .card-header { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:calc(var(--ag-space-1) / 2) var(--ag-space-2); padding:0; border:0; }
[data-ag-surface="owner"] .card-title, [data-ag-surface="owner"] .card-header > h3 { margin:0; font-family:var(--ag-font-display); font-size:var(--ag-type-body-lg);
  font-weight:var(--ag-weight-bold); line-height:var(--ag-leading-tight); color:var(--ag-ink); }
[data-ag-surface="owner"] .card-header > :not(.card-title):not(h3) { font-size:var(--ag-type-small); color:var(--ag-ink-2); font-weight:var(--ag-weight-normal); }
[data-ag-surface="owner"] .card-body { min-width:0; border:var(--ag-border-thin) solid var(--ag-box-edge); border-radius:var(--ag-box-radius); background:var(--ag-surface);
  padding:var(--ag-space-2) var(--ag-space-3); }
[data-ag-surface="owner"] .page-body > .card, [data-ag-surface="owner"] .gp-wrap > .card { margin-bottom:var(--ag-space-3); }

/* A work list: one row a thing to do, each done in its row */
.ag-worklist { display:grid; border:var(--ag-border-thin) solid var(--ag-box-edge); border-radius:var(--ag-box-radius);
  background:var(--ag-box-ground); box-shadow:var(--ag-shadow-1); min-width:0; }
/* Not clipped: a row's menu opens below it, and the last row's would be cut off. The corners are the rows' own. */
.ag-worklist > :first-child { border-top-left-radius:inherit; border-top-right-radius:inherit; }
.ag-worklist > :last-child { border-bottom-left-radius:inherit; border-bottom-right-radius:inherit; border-bottom:0; }
.ag-work { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:calc(var(--ag-space-1) / 2) var(--ag-space-2); align-items:start;
  padding:var(--ag-list-pad-y) var(--ag-list-pad-x); border-bottom:var(--ag-border-thin) solid var(--ag-line); min-width:0; }
.ag-work-main { display:grid; gap:calc(var(--ag-space-1) / 4); min-width:0; }
.ag-work h3 { margin:0; font-size:var(--ag-type-body); font-weight:var(--ag-weight-semibold); line-height:1.3; color:var(--ag-ink); overflow-wrap:anywhere; }
.ag-work-src { margin:0; font-size:var(--ag-type-caption); color:var(--ag-ink-3); line-height:var(--ag-leading-body); }
.ag-work-says { margin:calc(var(--ag-space-1) / 2) 0 0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body);
  max-width:var(--ag-measure-reading); }
.ag-work-do { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--ag-space-1); }
.ag-work-main > .ag-work-do--here, .ag-work-main .ag-work-do--here { justify-content:flex-start; margin-top:calc(var(--ag-space-1) / 2); }
/* On a phone a row's presses go under what it says: beside it they take the width and the title is left a few letters wide. */
@media (max-width:40rem) { .ag-work { grid-template-columns:minmax(0,1fr); } .ag-work-do { justify-content:flex-start; } }
/* Open, the button is gone and the work is in its place: the capability's own form, drawn in the row. */
.ag-work-in { grid-column:1 / -1; min-width:0; margin-top:calc(var(--ag-space-1) / 2); padding-top:var(--ag-space-2);
  border-top:var(--ag-border-thin) dashed var(--ag-line-strong); font-size:var(--ag-type-small); color:var(--ag-ink-2); }
.ag-work-body { display:grid; gap:var(--ag-space-1); color:var(--ag-ink); }
.ag-work-body .cap-blurb, .ag-work-body .cap-hint { color:var(--ag-ink-3); }
.ag-work-body .cap-f > label { color:var(--ag-ink-2); }
.ag-work-draft { justify-self:start; }
.ag-worklist-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:calc(var(--ag-space-1) / 2) var(--ag-space-2);
  padding:var(--ag-space-1) var(--ag-list-pad-x); background:var(--ag-surface); font-size:var(--ag-type-small); color:var(--ag-ink); }
.ag-worklist-empty { display:grid; gap:var(--ag-space-1); justify-items:start; padding:var(--ag-space-3) var(--ag-list-pad-x); }
.ag-worklist-empty h3 { margin:0; font-size:var(--ag-type-body-lg); font-weight:var(--ag-weight-bold); line-height:var(--ag-leading-tight); }
.ag-worklist-empty p { margin:0; color:var(--ag-ink-2); line-height:var(--ag-leading-body); max-width:var(--ag-measure-reading); }

/* What kind of thing a row is. The marker is a shape per tone, so it never relies on colour alone. */
.ag-kind { display:inline-flex; align-items:center; flex-wrap:wrap; gap:calc(var(--ag-space-1) * .75); font-size:var(--ag-type-label);
  font-weight:var(--ag-weight-bold); letter-spacing:calc(var(--ag-label-tracking) * .6); text-transform:var(--ag-label-case); color:var(--ag-ink-2); }
.ag-kind::before { content:""; display:var(--ag-list-marker); flex:none; width:var(--ag-space-1); height:var(--ag-space-1);
  border-radius:var(--ag-list-marker-round, var(--ag-radius-xs)); background:var(--ag-ink-3); }
.ag-kind[data-tone="danger"] { color:var(--ag-danger-label); }
.ag-kind[data-tone="danger"]::before { background:var(--ag-danger); }
.ag-kind[data-tone="warning"] { color:var(--ag-warning-label); }
.ag-kind[data-tone="warning"]::before { background:var(--ag-warning); border-radius:var(--ag-list-marker-round, var(--ag-radius-pill)); }
.ag-kind[data-tone="info"] { color:var(--ag-info-label); }
.ag-kind[data-tone="info"]::before { background:var(--ag-info); transform:rotate(45deg); }
.ag-kind[data-tone="positive"] { color:var(--ag-positive-label); }
.ag-kind[data-tone="positive"]::before { background:var(--ag-positive); }
.ag-kind-rank { color:var(--ag-ink-3); font-variant-numeric:tabular-nums; }

/* A box beside the work: a heading, a line under it, and its rows */
.ag-box { min-width:0; border:var(--ag-border-thin) solid var(--ag-box-edge); border-radius:var(--ag-box-radius); background:var(--ag-surface);
  box-shadow:var(--ag-shadow-1); }
.ag-box > header { padding:var(--ag-space-2) var(--ag-space-2) 0; }
.ag-box > header h3 { margin:0; display:flex; align-items:center; gap:var(--ag-space-1); font-size:var(--ag-type-body);
  font-weight:var(--ag-weight-bold); line-height:1.3; color:var(--ag-ink); }
.ag-box > header p { margin:calc(var(--ag-space-1) / 4) 0 0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-box-body { display:grid; padding:var(--ag-space-1) var(--ag-space-2) var(--ag-space-2); min-width:0; }
.ag-box-foot { padding:var(--ag-space-1) var(--ag-space-2) var(--ag-space-2); border-top:var(--ag-border-thin) solid var(--ag-line); }
.ag-box-foot .ag-hint { margin-left:auto; }
.ag-box-body > .ag-inline:last-child { padding-top:var(--ag-space-1); }
.ag-box-body > .ag-inline:last-child .ag-hint { flex:1 1 9rem; }

/* One choice a line: its name, what it is about, what it reads, and its action; chosen, its form opens in the line */
.ag-cand { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:calc(var(--ag-space-1) / 2) var(--ag-space-2); align-items:center;
  padding:var(--ag-space-1) 0; border-top:var(--ag-border-thin) solid var(--ag-line); min-width:0; }
.ag-box-body > .ag-cand:first-child, .ag-stands + .ag-cand, .ag-more > div > .ag-cand:first-child { border-top:0; }
button.ag-cand { width:100%; font:inherit; color:inherit; text-align:left; background:none; border-width:var(--ag-border-thin) 0 0;
  border-style:solid; border-color:var(--ag-line); cursor:pointer; }
button.ag-cand:hover { background:var(--ag-row-hover); }
.ag-cand-lab { font-size:var(--ag-type-small); color:var(--ag-ink); min-width:0; overflow-wrap:anywhere; }
.ag-cand-lab small { font-size:var(--ag-type-label); color:var(--ag-ink-3); white-space:nowrap; }
.ag-cand-val { font-size:var(--ag-type-body); font-weight:var(--ag-weight-bold); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.ag-cand-tick { grid-column:3; width:var(--ag-space-2); height:var(--ag-space-2); border-radius:var(--ag-radius-pill);
  border:var(--ag-border-thin) solid var(--ag-line-strong); }
button.ag-cand[aria-pressed="true"] .ag-cand-tick { background:var(--ag-signal); border-color:var(--ag-signal); }
button.ag-cand[aria-pressed="true"] .ag-cand-lab { font-weight:var(--ag-weight-semibold); }
.ag-cand-form { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-1); font-size:var(--ag-type-small);
  color:var(--ag-ink-2); padding-bottom:calc(var(--ag-space-1) / 2); }
.ag-cand-form[hidden] { display:none; }
.ag-cand-form input { font:inherit; font-size:var(--ag-type-small); min-width:0; padding:calc(var(--ag-space-1) * .75) var(--ag-space-1);
  border:var(--ag-border-thin) solid var(--ag-field-edge); border-radius:var(--ag-radius-sm); background:var(--ag-field-ground); color:var(--ag-ink); }
.ag-cand-form input[type="text"] { width:calc(var(--ag-space-6) + var(--ag-space-3)); }
.ag-cand-form .ag-hint { flex:1 1 100%; }
.ag-stands { display:grid; gap:calc(var(--ag-space-1) / 4); margin:0; padding:var(--ag-space-1) 0; }
.ag-stands b { font-weight:var(--ag-weight-semibold); }
.ag-stands span { font-size:var(--ag-type-caption); color:var(--ag-ink-3); }
.ag-box-body > .ag-more { padding-top:var(--ag-space-1); border-top:var(--ag-border-thin) solid var(--ag-line); }
.ag-box-body > .ag-field { margin:var(--ag-space-1) 0 0; }

/* An objective and the numbers it is read by */
.ag-objective { display:grid; gap:var(--ag-space-1); padding:var(--ag-space-1) 0; border-top:var(--ag-border-thin) solid var(--ag-line); min-width:0; }
.ag-box-body > .ag-objective:first-child { border-top:0; }
.ag-objective-head { display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--ag-space-1) / 2) var(--ag-space-1); }
.ag-objective-head b { font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); }
.ag-reading { display:grid; gap:calc(var(--ag-space-1) / 4); min-width:0; }
.ag-reading-k { font-size:var(--ag-type-small); color:var(--ag-ink-2); }
.ag-reading-v { font-size:calc(var(--ag-type-card) * 1.5); font-weight:var(--ag-weight-bold); letter-spacing:-.02em; line-height:var(--ag-leading-tight);
  font-variant-numeric:tabular-nums; color:var(--ag-ink); }
.ag-reading-v small { font-size:var(--ag-type-small); font-weight:var(--ag-weight-medium); letter-spacing:0; color:var(--ag-ink-2); }
.ag-reading-v .ag-link { letter-spacing:0; }
.ag-serves { display:grid; gap:calc(var(--ag-space-1) / 2); justify-items:start; }
.ag-serves .ag-bullets { font-size:var(--ag-type-caption); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-serves .ag-bullets b { color:var(--ag-ink); font-weight:var(--ag-weight-semibold); }
/* How far to a target, and how much of the time has gone */
.ag-track { grid-column:1 / -1; display:block; width:100%; height:calc(var(--ag-space-1) / 2); border-radius:var(--ag-radius-pill); overflow:hidden; }
.ag-track-bed { fill:var(--ag-box-edge); }
.ag-track-fill { fill:var(--ag-ink); }
.ag-track-time { fill:var(--ag-signal); }

/* Short lists side by side, each under its own label: facts, inferences, what is not known */
.ag-lists { grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:var(--ag-space-3); }
.ag-lists h4 { margin:0 0 var(--ag-space-1); }
.ag-lists .ag-bullets { padding-left:var(--ag-space-3); gap:var(--ag-space-1); font-size:var(--ag-type-caption); color:var(--ag-ink); line-height:var(--ag-leading-body); }
.ag-lists li span { color:var(--ag-ink-2); }

/* Reasons: one line each, with where it is dealt with */
.ag-reasons { list-style:none; margin:0; padding:calc(var(--ag-space-1) / 2) var(--ag-space-2) var(--ag-space-1); }
.ag-reasons > li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:calc(var(--ag-space-1) / 4) var(--ag-space-1); align-items:baseline;
  padding:var(--ag-space-1) 0; border-top:var(--ag-border-thin) solid var(--ag-line); }
.ag-reasons > li:first-child { border-top:0; }
.ag-reasons > li > b { font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); color:var(--ag-ink); min-width:0; }
.ag-reasons > li > b span { font-weight:var(--ag-weight-normal); color:var(--ag-ink-2); }
.ag-reasons > li > b span::before { content:" · "; }
.ag-reasons-where { font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); color:var(--ag-ink-3); white-space:nowrap; text-align:right; }
button.ag-reasons-where { color:var(--ag-link-ink); }
.ag-reasons-d { grid-column:1 / -1; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-reasons-d[data-tone="warn"] { font-size:var(--ag-type-caption); color:var(--ag-warning-label); }
.ag-reasons details { grid-column:1 / -1; }
/* Declaring one: a form in a dashed box, its kinds as choices two abreast */
.ag-compose { display:grid; gap:var(--ag-space-2); margin:0; padding:var(--ag-space-2); border-top:var(--ag-border-thin) solid var(--ag-line); }
.ag-compose .ag-field { margin:0; }
.ag-compose-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ag-space-2); }
.ag-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ag-space-1); }
.ag-choice { display:grid; gap:calc(var(--ag-space-1) / 2); align-content:start; text-align:left; font:inherit; color:var(--ag-ink);
  background:var(--ag-box-ground); border:var(--ag-border-thin) solid var(--ag-box-edge); border-radius:var(--ag-radius-md);
  padding:var(--ag-space-2); cursor:pointer; min-width:0; }
.ag-choice:hover { border-color:var(--ag-line-strong); background:var(--ag-row-hover); }
.ag-choice[aria-pressed="true"] { border-color:var(--ag-signal); background:var(--ag-signal-soft); }
.ag-choice b { font-weight:var(--ag-weight-semibold); line-height:var(--ag-leading-tight); overflow-wrap:anywhere; }
.ag-choice span { font-size:var(--ag-type-caption); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }

/* Items two abreast in one box, each a name, its reading, what is wrong, and its meter */
/* Two columns that flow on their own: an opened row grows its own column and leaves no hole beside it. */
.ag-twoup { display:block; column-count:2; column-gap:var(--ag-space-4);
  padding:calc(var(--ag-space-1) / 2) var(--ag-space-2); border:var(--ag-border-thin) solid var(--ag-box-edge); border-radius:var(--ag-box-radius);
  background:var(--ag-box-ground); box-shadow:var(--ag-shadow-1); }
.ag-twoup-item { min-width:0; break-inside:avoid; border-bottom:var(--ag-border-thin) solid var(--ag-line); }
.ag-twoup-item > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:calc(var(--ag-space-1) / 4) var(--ag-space-2); align-items:start;
  padding:var(--ag-space-1) 0; cursor:pointer; list-style:none; }
.ag-twoup-item > summary::-webkit-details-marker { display:none; }
.ag-twoup-item > summary > b { font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); color:var(--ag-ink); }
.ag-twoup-item > summary:hover > b { text-decoration:underline; text-underline-offset:.2em; }
.ag-twoup-state { grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; align-items:flex-end; gap:calc(var(--ag-space-1) / 2);
  padding-top:calc(var(--ag-space-1) / 2); }
.ag-twoup-state em { font-style:normal; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); white-space:nowrap; color:var(--ag-ink); }
.ag-twoup-rd { grid-column:1; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
/* Opened, the row's reading is the checks below it, level by level. Left up it said the same thing twice. */
.ag-twoup-item[open] > summary > .ag-twoup-rd { display:none; }
.ag-twoup-body { display:grid; gap:var(--ag-space-1); padding:0 0 var(--ag-space-2); min-width:0; }
.ag-flag { grid-column:1; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); color:var(--ag-warning-label); line-height:var(--ag-leading-body); }
.ag-flag::before { content:""; display:inline-block; width:calc(var(--ag-space-1) * .875); height:calc(var(--ag-space-1) * .875);
  margin-right:calc(var(--ag-space-1) * .75); border-radius:var(--ag-radius-pill); background:var(--ag-warning); }
/* Steps held, as one thing: segments or dots (Design → Components → Meter) */
.ag-meter { display:flex; gap:calc(var(--ag-meter-w) / 5); }
.ag-meter i { width:var(--ag-meter-w); height:var(--ag-meter-h); border-radius:var(--ag-meter-r); background:var(--ag-box-edge); }
.ag-meter i[data-on="true"] { background:var(--ag-ink); }
.ag-meter[data-full] i[data-on="true"] { background:var(--ag-positive); }
/* A LEVEL: how well an area is doing (Lagging, Experimenting, Performing, Leading). The word in its tone's small-label
   ink, the meter in its tone's fill. Lagging fills nothing and marks its first segment, so "not started" is never
   only an absence of colour. */
.ag-level { font-style:normal; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-bold); white-space:nowrap; }
.ag-level[data-level="lagging"] { color:var(--ag-danger-label); }
.ag-level[data-level="experimenting"] { color:var(--ag-warning-label); }
.ag-level[data-level="performing"] { color:var(--ag-positive-label); }
.ag-level[data-level="leading"] { color:var(--ag-ink); }
.ag-meter[data-level="lagging"] i:first-child { background:color-mix(in srgb, var(--ag-danger) 45%, transparent); }
.ag-meter[data-level="experimenting"] i[data-on="true"] { background:var(--ag-warning); }
.ag-meter[data-level="performing"] i[data-on="true"] { background:var(--ag-positive); }
.ag-meter[data-level="leading"] i[data-on="true"] { background:var(--ag-ink); }
.ag-twoup-what { grid-column:1; font-size:var(--ag-type-caption); color:var(--ag-ink-3); line-height:var(--ag-leading-body); }
/* What each level takes, and where the area stands on it: ticked, open, or the gap (the first level not reached). */
.ag-checks { display:grid; gap:var(--ag-space-1); }
.ag-check { display:grid; grid-template-columns:auto minmax(0,1fr); gap:calc(var(--ag-space-1) / 4) var(--ag-space-1);
  font-size:var(--ag-type-small); line-height:var(--ag-leading-body); }
.ag-check > i { grid-row:1 / span 2; box-sizing:border-box; width:calc(var(--ag-space-1) * 2.25); height:calc(var(--ag-space-1) * 2.25);
  border-radius:var(--ag-radius-pill); border:var(--ag-border-strong) solid var(--ag-ink-3); display:grid; place-items:center;
  font-style:normal; font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold); margin-top:calc(var(--ag-space-1) / 4); }
.ag-check.is-ok > i { background:var(--ag-ink); border-color:var(--ag-ink); color:var(--ag-canvas); }
.ag-check > b { font-weight:var(--ag-weight-semibold); color:var(--ag-ink); }
.ag-check > b small { font-size:var(--ag-type-caption); font-weight:var(--ag-weight-normal); color:var(--ag-ink-3); margin-left:var(--ag-space-1); }
.ag-check > span { color:var(--ag-ink-2); }
.ag-check.is-gap > span { color:var(--ag-warning-label); font-weight:var(--ag-weight-medium); }
.ag-gapnote { margin:0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body);
  border-left:var(--ag-border-strong) solid var(--ag-warning); padding:calc(var(--ag-space-1) / 4) 0 calc(var(--ag-space-1) / 4) var(--ag-space-2); }

/* Figures: a label, the number, and what it is held to */
.ag-figures { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:var(--ag-space-1); }
.ag-figure { display:grid; gap:calc(var(--ag-space-1) / 4); align-content:start; padding:var(--ag-space-1) var(--ag-space-2);
  background:var(--ag-surface); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-sm); min-width:0; }
.ag-figure span { font-size:var(--ag-type-label); color:var(--ag-ink-2); line-height:var(--ag-leading-body);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ag-figure b { font-family:var(--ag-font-display); font-size:var(--ag-type-card); font-weight:var(--ag-weight-normal); line-height:1; font-variant-numeric:tabular-nums; }
.ag-figure-next { margin:0; font-size:var(--ag-type-caption); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-figure-next b { margin-right:var(--ag-space-1); }

/* A picture. Its corners are Design → Components → Image radius. */
.ag-image { display:block; max-width:100%; height:auto; border-radius:var(--ag-image-radius); }

/* The record: one quiet grid, each cell a way to the page that keeps it */
.ag-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:var(--ag-space-2) var(--ag-space-3);
  padding:var(--ag-space-2); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-box-radius); }
.ag-fact { display:grid; gap:calc(var(--ag-space-1) / 4); align-content:start; min-width:0; text-align:left; font:inherit; color:inherit;
  background:none; border:0; padding:0; cursor:pointer; }
.ag-fact--note { cursor:default; }
.ag-fact-v { font-size:var(--ag-type-small); line-height:1.4; color:var(--ag-ink); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
button.ag-fact:hover .ag-fact-v { text-decoration:underline; text-underline-offset:.2em; }
.ag-fact-s { font-size:var(--ag-type-caption); color:var(--ag-ink-3); }
.ag-fact[data-missing] .ag-fact-v, .ag-fact[data-open] .ag-fact-v { color:var(--ag-ink-2); }
.ag-fact[data-missing] .ag-fact-s { color:var(--ag-signal-ink); font-weight:var(--ag-weight-semibold); }

/* Recipes drawn inside a working page's rows read its quieter inks: the mandate chip, a row's menu. */
.ag-workpage .ag-mandate, .ag-workpage .ag-attn-more > summary { color:var(--ag-ink-3); }

.ag-link:focus-visible, .ag-filter:focus-visible, .ag-fact:focus-visible, .ag-twoup-item > summary:focus-visible,
.ag-more > summary:focus-visible, button.ag-cand:focus-visible, .ag-choice:focus-visible, button.ag-rail-tile:focus-visible {
  outline:var(--ag-border-strong) solid var(--ag-focus); outline-offset:var(--ag-border-strong); }

@container (max-width:46rem) {
  .ag-workpage-cols { grid-template-columns:minmax(0,1fr); }
  .ag-twoup { column-count:1; }
  .ag-workpage .ag-work { grid-template-columns:minmax(0,1fr); }
  .ag-workpage .ag-work-do { justify-content:flex-start; }
}
@container (max-width:30rem) {
  .ag-compose-pair, .ag-choices { grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ag-skeleton { animation:none; }
  .ag-button[aria-busy="true"]::after { animation:none; }
  .ag-drawer { transition:none; }
}

}

/* Reach: every section heading is the block heading's weight and size, whoever drew it (the older .ag-section as well as .ag-block). */
body[data-module="magnet"] .ag-section > h2 { font-size:var(--ag-type-body-lg); font-weight:var(--ag-weight-bold); }
body[data-module="magnet"] .lens-note, body[data-module="magnet"] .lens-say { font-size:var(--ag-type-caption); color:var(--ag-ink-3); line-height:var(--ag-leading-body); margin:0; }

/* ── THE SITE EDITOR (2026-10-07) ─────────────────────────────────────────────────────────────────────────────────────────────────
   Website's order, inspector and preview. It was a 186-line <style> the page wrote into itself on every draw (w2Style), in pixels:
   22px headings beside every other page's 20px, 10.5px labels, radii of 3, 5, 6, 7, 9 and 10px, and colours by the console's old
   names. The same rules, every value a token: type from the type scale, space in steps of --ag-space-1, column widths from the type
   scale so a theme with another spacing set draws the same editor, corners from the radius set. */
.ag-site { display:grid; gap:var(--ag-space-4); }
.ag-site-lab { font:var(--ag-weight-semibold) var(--ag-type-label)/1.2 var(--ag-font-interface); letter-spacing:.13em; text-transform:uppercase; color:var(--ag-ink-3); }
/* Order · inspector · the page itself. The preview takes the remaining width
   rather than sitting under the order in a third of it, because it is the
   only column that shows the thing being edited. */
.ag-site-work { display:grid; grid-template-columns:calc(var(--ag-type-card) * 15) calc(var(--ag-type-card) * 16) minmax(0,1fr); gap:var(--ag-space-4); align-items:start; min-height:calc(var(--ag-type-card) * 26); }
/* The columns answer to the room the editor has, not to the window: beside the console's own rail and menu a 1440px window leaves the editor under 800px, and three fixed columns
   left the page itself 2px wide. Three columns while the page still gets room to be read; the order and the inspector side by side with the page under them when it would not;
   one column when even those two will not fit. */
.ag-site-host { container-type:inline-size; min-width:0; }
@container (max-width:1280px){ .ag-site-work { grid-template-columns:calc(var(--ag-type-card) * 14) calc(var(--ag-type-card) * 15) minmax(0,1fr); } }
@container (max-width:1180px){ .ag-site-work { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .ag-site-canvas { grid-column:1 / -1; position:static; } .ag-site-preview iframe { height:calc(var(--ag-type-card) * 28); } }
@container (max-width:760px){ .ag-site-work { grid-template-columns:1fr; } }
.ag-site-map, .ag-site-insp, .ag-site-canvas { border:var(--ag-border-thin) solid var(--ag-line); border-radius: var(--ag-radius-lg); background:var(--ag-surface); padding:calc(var(--ag-space-1) * 1.625); }
/* minmax(0,1fr), not the implicit auto track: an auto track is sized by the
   widest child's min-content, so one long section name pushed every row — and
   the "Draft" label with them — past the column's own edge.
   */
.ag-site-map { display:grid; grid-template-columns:minmax(0,1fr); gap:calc(var(--ag-space-1) * 0.75); align-content:start; }
.ag-site-sub { font-size:var(--ag-type-label); color:var(--ag-ink-3); line-height:1.5; }
.ag-site-canvas-h { display:flex; justify-content:space-between; align-items:center; gap:calc(var(--ag-space-1) * 1.25); margin-bottom:calc(var(--ag-space-1) * 1.25); }
.ag-site-env { font-size:var(--ag-type-label); color:var(--ag-warning-label); font-weight:var(--ag-weight-semibold); }
.ag-site-secs { display:grid; gap:var(--ag-space-1); }
.ag-site-sec { display:grid; grid-template-columns:2.4ch minmax(0,1fr) auto; gap:calc(var(--ag-space-1) * 1.125); align-items:center;
  font:inherit; text-align:left; cursor:default; padding:calc(var(--ag-space-1) * 1.125) calc(var(--ag-space-1) * 1.25); border-radius:var(--ag-radius-md);
  border:var(--ag-border-thin) solid transparent; background:transparent; color:var(--ag-ink); }
.ag-site-sec:hover { border-color:var(--ag-line); background:var(--ag-surface-inset); }
.ag-site-sec.is-on { border-color:var(--ag-signal-ink); background:color-mix(in srgb,var(--ag-signal) 8%,transparent); }
.ag-site-n { font:var(--ag-weight-medium) var(--ag-type-label)/1 var(--ag-font-interface); color:var(--ag-ink-3); }
.ag-site-sname b { display:block; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); }
.ag-site-sname small { display:block; font-size:var(--ag-type-label); color:var(--ag-ink-3); }
/* A section name is a title, not a paragraph: one line, clipped with an
   ellipsis, so the column keeps its width whatever an owner calls a block. */
.ag-site-sname b, .ag-site-sname small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-site-warn { padding:calc(var(--ag-space-1) * 1.25) var(--ag-space-3); border-radius:var(--ag-radius-md); margin-bottom:calc(var(--ag-space-1) * 1.25); font-size:var(--ag-type-caption); line-height:1.5;
  border:var(--ag-border-thin) solid color-mix(in srgb,var(--ag-warning) 40%,var(--ag-line)); background:color-mix(in srgb,var(--ag-warning) 7%,var(--ag-surface)); }
.ag-site-warn small { display:block; color:var(--ag-ink-3); font-size:var(--ag-type-label); margin-top:calc(var(--ag-space-1) * 0.25); }
.ag-site-insp { display:grid; gap:var(--ag-space-2); align-content:start; }
.ag-site-card { padding:calc(var(--ag-space-1) * 1.25) calc(var(--ag-space-1) * 1.375); border-radius:var(--ag-radius-md); background:var(--ag-surface-inset); }
.ag-site-card b { display:block; font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); line-height:1.35; }
.ag-site-card small { display:block; font-size:var(--ag-type-label); color:var(--ag-ink-3); margin-top:calc(var(--ag-space-1) * 0.375); }
.ag-site-row { display:flex; justify-content:space-between; gap:calc(var(--ag-space-1) * 1.25); font-size:var(--ag-type-label); padding:calc(var(--ag-space-1) * 0.625) calc(var(--ag-space-1) * 0.25);
  border-bottom:var(--ag-border-thin) solid var(--ag-line); }
.ag-site-row span { color:var(--ag-ink-3); flex:none; }
.ag-site-row b { font-weight:var(--ag-weight-semibold); text-align:right; }
/* A band can carry several buttons, so the value side of a row has to be able
   to hold a set rather than one string. Wraps, because "Book · Ask a question
   · Add to cart" on one line is what pushed this column past its own edge. */
.ag-site-row b:has(.ag-site-chip) { display:flex; flex-wrap:wrap; gap:var(--ag-space-1); justify-content:flex-end; }
.ag-site-chip { display:inline-block; font-weight:var(--ag-weight-semibold); font-size:var(--ag-type-label); padding:calc(var(--ag-space-1) * 0.25) calc(var(--ag-space-1) * 0.875); border-radius:var(--ag-radius-pill);
  background:color-mix(in srgb,var(--ag-ink) 6%,transparent); color:var(--ag-ink-2); }
.ag-site-note { font-size:var(--ag-type-label); line-height:1.5; color:var(--ag-ink-2); padding:calc(var(--ag-space-1) * 1.125) calc(var(--ag-space-1) * 1.25); border-radius:var(--ag-radius-md);
  background:color-mix(in srgb,var(--ag-signal) 6%,transparent); }
.ag-site-empty { font-size:var(--ag-type-caption); color:var(--ag-ink-3); line-height:1.55; padding:calc(var(--ag-space-1) * 1.25) calc(var(--ag-space-1) * 0.25); }
.ag-site-tabs { margin-bottom:var(--ag-space-2); }
.ag-site-bind { border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); padding:calc(var(--ag-space-1) * 1.125) calc(var(--ag-space-1) * 1.25); margin-bottom:calc(var(--ag-space-1) * 0.875); }
.ag-site-bh { display:flex; justify-content:space-between; gap:var(--ag-space-2); align-items:center; }
.ag-site-bh span { font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); }
.ag-site-bh i { font-style:normal; font:var(--ag-weight-semibold) var(--ag-type-label)/1 var(--ag-font-interface); letter-spacing:.1em; padding:calc(var(--ag-space-1) * 0.375) calc(var(--ag-space-1) * 0.625); border-radius:var(--ag-radius-sm);
  background:color-mix(in srgb,var(--ag-ink) 6%,transparent); color:var(--ag-ink-3); }
.ag-site-b-canonical .ag-site-bh i { background:color-mix(in srgb,var(--ag-positive) 16%,transparent); color:var(--ag-positive-label); }
.ag-site-b-inferred .ag-site-bh i { background:color-mix(in srgb,var(--ag-warning) 18%,transparent); color:var(--ag-warning-label); }
.ag-site-b-website .ag-site-bh i { background:color-mix(in srgb,var(--ag-signal) 14%,transparent); color:var(--ag-signal-ink); }
.ag-site-bsrc { font:var(--ag-weight-normal) var(--ag-type-label)/1.4 var(--ag-font-interface); color:var(--ag-ink-3); margin-top:calc(var(--ag-space-1) * 0.375); }
.ag-site-bval { font-size:var(--ag-type-label); color:var(--ag-ink-2); margin-top:calc(var(--ag-space-1) * 0.625); line-height:1.45; }
.ag-site-bedit { font:inherit; font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); cursor:pointer; margin-top:calc(var(--ag-space-1) * 0.875); padding:var(--ag-space-1) var(--ag-space-2);
  border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-sm); background:var(--ag-surface); color:var(--ag-ink-2); }
.ag-site-rows { display:grid; }
.ag-site-rev { display:grid; gap:calc(var(--ag-space-1) * 1.75); }
.ag-site-rev p { margin:calc(var(--ag-space-1) * 0.375) 0 0; font-size:var(--ag-type-caption); line-height:1.55; color:var(--ag-ink-2); }
.ag-site-sname { font:inherit; text-align:left; cursor:pointer; border:0; background:transparent; color:inherit; padding:0; min-width:0; }
.ag-site-ops { display:flex; gap:calc(var(--ag-space-1) * 0.25); opacity:0; transition:opacity var(--ag-motion-fast); }
.ag-site-sec:hover .ag-site-ops, .ag-site-sec.is-on .ag-site-ops { opacity:1; }
.ag-site-ops button { font:inherit; font-size:var(--ag-type-label); cursor:pointer; width:calc(var(--ag-space-1) * 2.75); height:calc(var(--ag-space-1) * 2.75); border-radius:var(--ag-radius-sm);
  border:var(--ag-border-thin) solid var(--ag-line); background:var(--ag-surface); color:var(--ag-ink-2); }
.ag-site-ops button:disabled { opacity:.3; cursor:default; }
.ag-site-ops button:hover:not(:disabled) { background:color-mix(in srgb,var(--ag-ink) 6%,transparent); color:var(--ag-ink); }
.ag-site-add { margin-top:calc(var(--ag-space-1) * 1.25); }
.ag-site-add summary { cursor:pointer; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); padding:var(--ag-space-2) calc(var(--ag-space-1) * 1.25); border-radius:var(--ag-radius-md);
  border:var(--ag-border-thin) dashed var(--ag-line); color:var(--ag-ink-2); list-style:none; }
.ag-site-add summary::-webkit-details-marker { display:none; }
.ag-site-add[open] summary { margin-bottom:var(--ag-space-1); }
.ag-site-addgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(calc(var(--ag-type-card) * 9.5),1fr)); gap:calc(var(--ag-space-1) * 1.75); }
.ag-site-addgrid > div { display:grid; gap:var(--ag-space-1); align-content:start; }
.ag-site-addgrid button { font:inherit; text-align:left; cursor:pointer; border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-sm);
  padding:calc(var(--ag-space-1) * 0.875) calc(var(--ag-space-1) * 1.125); background:var(--ag-surface); color:var(--ag-ink); }
.ag-site-addgrid button:hover { border-color:var(--ag-signal-ink); background:var(--ag-surface-inset); }
.ag-site-addgrid b { display:block; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); }
.ag-site-addgrid small { display:block; font-size:var(--ag-type-label); color:var(--ag-ink-3); line-height:1.35; margin-top:calc(var(--ag-space-1) * 0.125); }
/* Tall, and it follows you down the page: the preview is what you are checking
   against while you work the order and the inspector, so scrolling it out of
   sight is the same as not having it. */
.ag-site-canvas { position:sticky; top:calc(var(--ag-space-1) * 1.75); }
.ag-site-preview { display:flex; justify-content:center; }
.ag-site-preview iframe { width:100%; height:calc(100vh - calc(var(--ag-space-1) * 23.75)); min-height:calc(var(--ag-type-card) * 26); border:var(--ag-border-thin) solid var(--ag-line);
  border-radius:var(--ag-radius-md); background:var(--ag-surface-inset); transition:width var(--ag-motion-fast); }
/* A phone is 390px wide whatever the theme: a device, not a style. */
.ag-site-preview[data-w="mobile"] iframe { width:390px; max-width:100%; }
.ag-site-pvops { display:flex; gap:var(--ag-space-1); }

/* The page picker — a row, not a column. */
/* A listed section the page does not draw, and a part of the page the Actions fill: told from a section that is drawn, never hidden. */
.ag-site-sec.is-off .ag-site-sname b, .ag-site-sec.is-zone .ag-site-sname b { color:var(--ag-ink-2); }
.ag-site-sec.is-off .ag-site-sname small { color:var(--ag-ink-3); }
.ag-site-sec.is-off { background:var(--ag-surface-inset); }
.ag-site-sec.is-zone { border-style:dashed; }
.ag-site-pagebar { display:flex; gap:calc(var(--ag-space-1) * 0.75); margin-bottom:calc(var(--ag-space-1) * 0.75); }
.ag-site-pagesel { font:inherit; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); padding:calc(var(--ag-space-1) * 0.875) var(--ag-space-2); border-radius:var(--ag-radius-md); flex:1; min-width:0;
  border:var(--ag-border-thin) solid var(--ag-line); background:var(--ag-surface); color:var(--ag-ink); }
.ag-site-newpage { font:inherit; font-size:var(--ag-type-small); line-height:1; cursor:pointer; flex:none; width:calc(var(--ag-space-1) * 4.25);
  border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface); color:var(--ag-ink-2); }
.ag-site-newpage:hover { border-color:var(--ag-signal-ink); color:var(--ag-ink); }
.ag-site-pagemeta { display:flex; justify-content:space-between; align-items:center; gap:var(--ag-space-2); flex-wrap:wrap;
  font-size:var(--ag-type-label); color:var(--ag-ink-3); margin-bottom:calc(var(--ag-space-1) * 1.25); }
.ag-site-field { display:grid; gap:calc(var(--ag-space-1) * 0.375); margin-bottom:var(--ag-space-1); }
.ag-site-field span { font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); color:var(--ag-ink-3); }
.ag-site-field input, .ag-site-field textarea { font:inherit; font-size:var(--ag-type-caption); padding:calc(var(--ag-space-1) * 0.875) var(--ag-space-2); border-radius:var(--ag-radius-sm);
  border:var(--ag-border-thin) solid var(--ag-line); background:var(--ag-surface); color:var(--ag-ink); width:100%; box-sizing:border-box; }
.ag-site-hid { font-style:normal; font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); padding:calc(var(--ag-space-1) * 0.125) var(--ag-space-1); border-radius:var(--ag-radius-sm);
  background:color-mix(in srgb,var(--ag-ink) 6%,transparent); color:var(--ag-ink-3); vertical-align:middle; }
.ag-site-pageops { display:flex; flex-wrap:wrap; gap:var(--ag-space-1); }
.ag-site-pageops button { font:inherit; font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); cursor:pointer; padding:calc(var(--ag-space-1) * 0.375) calc(var(--ag-space-1) * 0.875);
  border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-sm); background:var(--ag-surface); color:var(--ag-ink-2); }
.ag-site-pageops button:hover { border-color:var(--ag-signal-ink); color:var(--ag-ink); }
.ag-site-hint { font-size:var(--ag-type-label); color:var(--ag-ink-3); line-height:1.4; }
.ag-site-check { display:flex; gap:var(--ag-space-2); align-items:flex-start; margin-top:calc(var(--ag-space-1) * 0.5); font-size:var(--ag-type-caption); }
.ag-site-check span { display:grid; gap:calc(var(--ag-space-1) * 0.125); }
.ag-site-check small { font-size:var(--ag-type-label); color:var(--ag-ink-3); line-height:1.4; }

/* ── Design: three scopes, and controls that say what they inherit ────── */
.ag-site-scope { display:flex; gap:calc(var(--ag-space-1) * 0.25); margin-bottom:calc(var(--ag-space-1) * 1.25); background:var(--ag-surface-inset); padding:calc(var(--ag-space-1) * 0.25); border-radius:var(--ag-radius-md); }
.ag-site-scope button { flex:1; font:inherit; font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); cursor:pointer; border:0; border-radius:var(--ag-radius-sm);
  padding:calc(var(--ag-space-1) * 0.75) var(--ag-space-1); background:transparent; color:var(--ag-ink-3); }
.ag-site-scope button.is-on { background:var(--ag-surface); color:var(--ag-ink); box-shadow:0 0 0 var(--ag-border-thin) var(--ag-line); }
.ag-site-axis select { font:inherit; font-size:var(--ag-type-caption); padding:calc(var(--ag-space-1) * 0.875) var(--ag-space-2); border-radius:var(--ag-radius-sm); border:var(--ag-border-thin) solid var(--ag-line);
  background:var(--ag-surface); color:var(--ag-ink); width:100%; box-sizing:border-box; }
.ag-site-axis small { font-size:var(--ag-type-label); color:var(--ag-ink-3); line-height:1.4; }
.ag-site-selrow, .ag-site-colour { display:flex; gap:calc(var(--ag-space-1) * 0.625); align-items:center; }
.ag-site-colour input[type=color] { width:calc(var(--ag-space-1) * 4.25); height:calc(var(--ag-space-1) * 3.75); padding:calc(var(--ag-space-1) * 0.25); flex:none; cursor:pointer; }
/* An unset axis is the common case, so "inherits X" has to read as a quiet
   fact beside the label and never as a second heading competing with it. */
.ag-site-inherit { font-weight:var(--ag-weight-medium); font-size:var(--ag-type-label); color:var(--ag-ink-3); text-transform:none; letter-spacing:0; }
.ag-site-clear { font:inherit; font-size:var(--ag-type-caption); line-height:1; cursor:pointer; flex:none; width:calc(var(--ag-space-1) * 3.75); height:calc(var(--ag-space-1) * 3.75);
  border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-sm); background:var(--ag-surface); color:var(--ag-ink-3); }
.ag-site-clear:hover { border-color:var(--ag-signal-ink); color:var(--ag-ink); }

/* ── Block rows ───────────────────────────────────────────────────────── */
.ag-site-items { display:grid; gap:calc(var(--ag-space-1) * 0.875); }
.ag-site-item { display:grid; gap:var(--ag-space-1); padding:var(--ag-space-2); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface-inset); }
.ag-site-item-head { display:flex; justify-content:space-between; align-items:center; }
.ag-site-item-head b { font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold); color:var(--ag-ink-3); }
.ag-site-item-head span { display:flex; gap:calc(var(--ag-space-1) * 0.375); }
.ag-site-item-head button { font:inherit; font-size:var(--ag-type-label); line-height:1; cursor:pointer; width:calc(var(--ag-space-1) * 2.75); height:calc(var(--ag-space-1) * 2.75);
  border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-sm); background:var(--ag-surface); color:var(--ag-ink-3); }
.ag-site-item-head button:disabled { opacity:.35; cursor:default; }
.ag-site-item-head .ag-site-del:hover { border-color:var(--ag-danger); color:var(--ag-danger-label); }
.ag-site-additem { font:inherit; font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); cursor:pointer; margin-top:calc(var(--ag-space-1) * 0.75); padding:calc(var(--ag-space-1) * 0.75) calc(var(--ag-space-1) * 1.25);
  border:var(--ag-border-thin) dashed var(--ag-line); border-radius:var(--ag-radius-sm); background:transparent; color:var(--ag-ink-2); width:100%; }
.ag-site-additem:hover { border-color:var(--ag-signal-ink); color:var(--ag-ink); }
.ag-site-learn { display:grid; grid-template-columns:repeat(auto-fit,minmax(calc(var(--ag-type-card) * 12),1fr)); gap:var(--ag-space-3); }
.ag-site-lcard { border:var(--ag-border-thin) solid var(--ag-line); border-radius: var(--ag-radius-lg); background:var(--ag-surface); padding:calc(var(--ag-space-1) * 1.625); display:grid; gap:calc(var(--ag-space-1) * 0.625); }
.ag-site-lcard p { margin:0; font-size:var(--ag-type-caption); line-height:1.55; color:var(--ag-ink-2); }
/* The reorder and remove controls carry a mark (icons.js up, down, close, plus), centred, at the small step. */
.ag-site-ops button, .ag-site-item-head button, .ag-site-newpage { display:inline-grid; place-items:center; padding:0; font-size:var(--ag-type-small); }
.ag-site-foot { margin-top:calc(var(--ag-space-1) * 1.5); }

/* ── A TEMPLATE TO START FROM (2026-10-07) ───────────────────────────────────────────────────────────────────────────────────────
   A card drawn in the template's own palette, which arrives as data (--tpl-bg, --tpl-ink, --tpl-acc, --tpl-on on the preview): the
   only colours here that are not the console's. It was page CSS in pixels and three inline colours a card. */
.ag-tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(calc(var(--ag-type-card) * 10),1fr)); gap:var(--ag-space-2); }
.ag-tpl { position:relative; display:grid; text-align:left; padding:0; font:inherit; cursor:pointer; overflow:hidden;
  border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface);
  transition:border-color var(--ag-motion-fast) var(--ag-ease-standard); }
.ag-tpl:hover { border-color:var(--ag-line-strong); }
.ag-tpl[aria-pressed="true"] { border-color:var(--ag-signal); box-shadow:0 0 0 var(--ag-border-thin) var(--ag-signal); }
.ag-tpl-prev { display:flex; align-items:flex-end; min-height:calc(var(--ag-type-card) * 5.5); padding:var(--ag-space-2);
  background:var(--tpl-bg); color:var(--tpl-ink); border-top:calc(var(--ag-border-strong) * 2) solid var(--tpl-acc); }
.ag-tpl-cta { font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold); padding:calc(var(--ag-space-1) / 2) var(--ag-space-1);
  border-radius:var(--ag-radius-sm); background:var(--tpl-acc); color:var(--tpl-on); }
.ag-tpl-meta { display:grid; gap:calc(var(--ag-space-1) / 4); padding:var(--ag-space-1) calc(var(--ag-space-1) * 1.5);
  border-top:var(--ag-border-thin) solid var(--ag-line); }
.ag-tpl-meta b { font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); color:var(--ag-ink); }
.ag-tpl-meta span { font-size:var(--ag-type-label); color:var(--ag-ink-3); }
.ag-tpl-on { position:absolute; top:var(--ag-space-1); right:var(--ag-space-1); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold);
  padding:0 var(--ag-space-1); border-radius:var(--ag-radius-pill); background:var(--ag-signal); color:var(--ag-signal-contrast); }

/* ── BUYER DECISIONS (2026-10-07) ─────────────────────────────────────────────────────────────────────────────────────────────────
   The decision model's page: the list and the question beside it, the answer, its variables and logic, and How it's going. It was a
   285-line <style> the page wrote into itself on every draw (dmStyle), in pixels and the console's old colour names, plus 140 inline
   styles. The same rules, every value a token. */

.ag-dm-outputs { display:grid; grid-template-columns:repeat(7,minmax(calc(var(--ag-type-card) * 4.6),1fr)); gap:calc(var(--ag-space-1) * 0.75); }
.ag-dm-output { min-width:0; display:flex; align-items:center; gap:calc(var(--ag-space-1) * 0.875); padding:calc(var(--ag-space-1) * 0.875) var(--ag-space-2); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:color-mix(in srgb,var(--ag-surface-inset) 72%,transparent); }
.ag-dm-output>i { width:calc(var(--ag-space-1) * 0.875); height:calc(var(--ag-space-1) * 0.875); flex:none; border-radius:var(--ag-radius-pill); background:var(--ag-positive); box-shadow:0 0 0 calc(var(--ag-space-1) * .375) color-mix(in srgb,var(--ag-positive) 13%,transparent); }
.ag-dm-output.is-config>i { background:var(--ag-signal-ink); box-shadow:0 0 0 calc(var(--ag-space-1) * .375) color-mix(in srgb,var(--ag-signal-ink) 12%,transparent); }
.ag-dm-output b,.ag-dm-output small { display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-dm-output b { color:var(--ag-ink-2); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); }
.ag-dm-output small { margin-top:calc(var(--ag-space-1) * 0.125); color:var(--ag-ink-3); font-size:var(--ag-type-label); }
@media (max-width:1120px){ .ag-dm-outputs { grid-template-columns:repeat(4,1fr); } }
@media (max-width:720px){
  body:has(#dmRoot) #pageIntro { display:none; }
  .ag-dm-outputs { grid-template-columns:repeat(2,1fr); }
}
.ag-dm-wrap { display:grid; grid-template-columns:minmax(calc(var(--ag-type-card) * 14.5),calc(var(--ag-type-card) * 18)) 1fr; gap:var(--ag-space-4); align-items:start; }
.ag-dm-list { position:sticky; top:calc(var(--ag-space-1) * 1.75); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md);
  background:var(--ag-surface); overflow:hidden; max-height:calc(100vh - calc(var(--ag-space-1) * 15)); display:flex; flex-direction:column; }
@media (max-width:1000px){ .ag-dm-wrap { grid-template-columns:1fr; } .ag-dm-detail { grid-row:1; } .ag-dm-list { grid-row:2; position:static; max-height:calc(var(--ag-space-1) * 65); } }
.ag-dm-list-head { padding:var(--ag-space-3) calc(var(--ag-space-1) * 1.625); border-bottom:calc(var(--ag-space-1) * 0.125) solid var(--ag-line); display:grid; gap:calc(var(--ag-space-1) * 1.125); }
.ag-dm-list-title { color:var(--ag-ink); font-size:var(--ag-type-small); font-weight:var(--ag-weight-bold); }
.ag-dm-list-sub { margin-top:calc(var(--ag-space-1) * 0.25); color:var(--ag-ink-3); font-size:var(--ag-type-label); line-height:1.4; }
.ag-dm-scroll { overflow-y:auto; padding:var(--ag-space-2); display:grid; gap:calc(var(--ag-space-1) * 0.375); align-content:start; }
.ag-dm-group { font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ag-ink-3); padding:var(--ag-space-3) var(--ag-space-2) calc(var(--ag-space-1) * 0.625); }
.ag-dm-row { width:100%; text-align:left; font:inherit; cursor:pointer; border:var(--ag-border-thin) solid transparent;
  background:transparent; border-radius:var(--ag-radius-md); padding:calc(var(--ag-space-1) * 1.125) calc(var(--ag-space-1) * 1.25); display:grid;
  grid-template-columns:auto 1fr auto; gap:calc(var(--ag-space-1) * 1.125); align-items:start; color:inherit; }
.ag-dm-row:hover { background:var(--ag-surface-inset); }
.ag-dm-row.is-sel { background:color-mix(in srgb,var(--ag-signal-ink) 10%,transparent); border-color:var(--ag-signal-ink); }
.ag-dm-row.is-child { padding-left:calc(var(--ag-space-1) * 3.25); }
/* Tabular so DP/DV/FP/FV are all exactly one width and the titles line up. */
.ag-dm-kind { flex:none; margin-top:calc(var(--ag-space-1) * 0.125); min-width:calc(var(--ag-space-1) * 4.25); text-align:center; font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold);
  letter-spacing:.04em; padding:calc(var(--ag-space-1) * 0.25) calc(var(--ag-space-1) * 0.625); border-radius:var(--ag-radius-sm); border:var(--ag-border-thin) solid currentColor;
  background:color-mix(in srgb, currentColor 10%, transparent); font-variant-numeric:tabular-nums; }
.ag-dm-kind.is-new { border-style:dashed; background:transparent; }
.ag-dm-legend { font-size:var(--ag-type-label); line-height:1.6; color:var(--ag-ink-3); display:flex; gap:var(--ag-space-1) calc(var(--ag-space-1) * 1.125); flex-wrap:wrap; }
.ag-dm-legend b { font-weight:var(--ag-weight-bold); color:var(--ag-ink-2); }
.ag-dm-row-t { font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); line-height:1.35; }
.ag-dm-row-s { font-size:var(--ag-type-label); color:var(--ag-ink-3); line-height:1.45; margin-top:calc(var(--ag-space-1) * 0.25);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* It wraps inside a width of its own. "answered from your record" on one line is 150px, and the row's text column took what
   the chip left:calc(var(--ag-space-1) * 6.5) at calc(var(--ag-space-1) * 46.875) and calc(var(--ag-space-1) * 9.125) at calc(var(--ag-space-1) * 162.5), so the question ran under it. */
.ag-dm-src { font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); letter-spacing:.02em; padding:calc(var(--ag-space-1) * 0.25) calc(var(--ag-space-1) * 0.875); border-radius:var(--ag-radius-pill);
  background:color-mix(in srgb,var(--ag-ink) 6%,transparent); color:var(--ag-ink-2); white-space:normal; max-width:var(--ag-space-8); text-align:center; line-height:1.3; }
.ag-dm-caret { border:0; background:transparent; cursor:pointer; color:var(--ag-ink-3); font-size:var(--ag-type-label);
  padding:0 var(--ag-space-1); align-self:center; }
.ag-dm-chip { font:inherit; font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); cursor:pointer; padding:var(--ag-space-1) calc(var(--ag-space-1) * 1.25);
  border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid var(--ag-line); background:transparent; color:var(--muted); }
.ag-dm-chip.is-on { border-color:var(--ag-signal-ink); color:var(--ag-signal-ink);
  background:color-mix(in srgb,var(--ag-signal-ink) 12%,transparent); }
.ag-dm-detail { display:grid; gap:calc(var(--ag-space-1) * 1.75); align-content:start; min-width:0; }
.ag-dm-h { font-size:var(--ag-type-card); font-weight:var(--ag-weight-bold); line-height:1.3; }
.ag-dm-sec { font-size:var(--ag-type-caption); font-weight:var(--ag-weight-bold); letter-spacing:.04em; text-transform:uppercase;
  color:var(--ag-ink-3); margin-bottom:var(--ag-space-1); }
.ag-dm-note { font-size:var(--ag-type-caption); line-height:1.55; color:var(--ag-ink-2); }
.ag-dm-tpl { display:grid; grid-template-columns:repeat(auto-fill,minmax(calc(var(--ag-type-card) * 6.6),1fr)); gap:calc(var(--ag-space-1) * 1.125); }
.ag-dm-tpl-btn { font:inherit; text-align:left; cursor:pointer; border:var(--ag-border-thin) solid var(--ag-line);
  border-radius:var(--ag-radius-md); background:transparent; padding:calc(var(--ag-space-1) * 1.125); display:grid; gap:calc(var(--ag-space-1) * 0.875); color:inherit; }
.ag-dm-tpl-btn:hover { border-color:var(--ag-signal-ink); }
.ag-dm-tpl-btn.is-on { border-color:var(--ag-signal-ink); background:color-mix(in srgb,var(--ag-signal-ink) 8%,transparent); }
.ag-dm-publish-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ag-space-3); }
.ag-dm-publish-state { display:inline-flex; align-items:center; gap:calc(var(--ag-space-1) * 0.75); flex:none; color:var(--ag-positive-label); font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold); }
.ag-dm-publish-state::before { content:""; width:calc(var(--ag-space-1) * 0.875); height:calc(var(--ag-space-1) * 0.875); border-radius:var(--ag-radius-pill); background:currentColor; }
.ag-dm-channel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(calc(var(--ag-type-card) * 5.6),1fr)); gap:calc(var(--ag-space-1) * 0.875); }
.ag-dm-channel { display:grid; gap:calc(var(--ag-space-1) * 0.25); padding:var(--ag-space-2) calc(var(--ag-space-1) * 1.125); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface-inset); }
.ag-dm-channel b { color:var(--ag-ink-2); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); }
.ag-dm-channel small { color:var(--ag-ink-3); font-size:var(--ag-type-label); line-height:1.35; }
.ag-dm-advanced { border:var(--ag-border-thin) solid var(--ag-line); border-radius: var(--ag-radius-lg); background:var(--ag-surface); overflow:hidden; }
.ag-dm-advanced>summary { list-style:none; cursor:pointer; padding:var(--ag-space-3) calc(var(--ag-space-1) * 1.75); display:flex; align-items:center; gap:calc(var(--ag-space-1) * 1.125); color:var(--ag-ink); font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); }
.ag-dm-advanced>summary::-webkit-details-marker { display:none; }
.ag-dm-advanced>summary::before { content:"›"; color:var(--ag-ink-3); font-size:var(--ag-type-body-lg); line-height:1; transform-origin:center; transition:background var(--ag-motion-fast), border-color var(--ag-motion-fast), color var(--ag-motion-fast); }
.ag-dm-advanced[open]>summary::before { transform:rotate(90deg); }
.ag-dm-advanced>summary span { color:var(--ag-ink-3); font-size:var(--ag-type-label); font-weight:var(--ag-weight-medium); }
.ag-dm-advanced[open]>summary { border-bottom:calc(var(--ag-space-1) * 0.125) solid var(--ag-line); }
.ag-dm-advanced-body { display:grid; gap:var(--ag-space-3); padding:var(--ag-space-3); }
.ag-dm-advanced-body>.card { box-shadow:none; }
.ag-dm-answer-card { border-color:color-mix(in srgb,var(--ag-signal-ink) 30%,var(--ag-line)); }
.ag-dm-answer-top { display:flex; justify-content:space-between; gap:var(--ag-space-3); align-items:flex-start; }
.ag-dm-answer-question { color:var(--ag-ink); font-family:var(--ag-font-display); font-size:var(--ag-type-card); line-height:1.3; font-weight:var(--ag-weight-bold); letter-spacing:-.015em; }
.ag-dm-order { display:flex; gap:calc(var(--ag-space-1) * 0.625); flex:none; }
.ag-dm-question-meta { display:grid; gap:calc(var(--ag-space-1) * 1.125); padding-top:calc(var(--ag-space-1) * 1.375); border-top:calc(var(--ag-space-1) * 0.125) solid var(--ag-line); }
.ag-dm-friction-boundary { display:flex; align-items:flex-start; gap:calc(var(--ag-space-1) * 1.25); padding:calc(var(--ag-space-1) * 1.25) var(--ag-space-3); border:var(--ag-border-thin) solid color-mix(in srgb,var(--ag-warning) 35%,var(--ag-line)); border-radius:var(--ag-radius-md); background:color-mix(in srgb,var(--ag-warning) 8%,transparent); }
.ag-dm-friction-boundary>i { width:calc(var(--ag-space-1) * 1.125); height:calc(var(--ag-space-1) * 1.125); margin-top:calc(var(--ag-space-1) * 0.5); flex:none; border-radius:var(--ag-radius-pill); background:var(--ag-warning); }
.ag-dm-friction-boundary b,.ag-dm-friction-boundary span { display:block; }
.ag-dm-friction-boundary b { color:var(--ag-ink); font-size:var(--ag-type-caption); }
.ag-dm-friction-boundary span { margin-top:calc(var(--ag-space-1) * 0.25); color:var(--ag-ink-2); font-size:var(--ag-type-label); line-height:1.45; }
.ag-dm-signal-type { display:inline-flex; align-items:center; gap:calc(var(--ag-space-1) * 0.75); width:max-content; padding:var(--ag-space-1) var(--ag-space-2); border-radius:var(--ag-radius-sm); font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold); }
.ag-dm-signal-type[data-kind="stated"] { color:var(--ag-positive-label); background:color-mix(in srgb,var(--ag-positive) 10%,transparent); }
.ag-dm-signal-type[data-kind="inferred"] { color:var(--ag-warning-label); background:color-mix(in srgb,var(--ag-warning) 10%,transparent); }
.ag-dm-signal-type[data-kind="baseline"] { color:var(--ag-signal-ink); background:var(--ag-signal-soft); }
.ag-dm-signal-rule { padding:var(--ag-space-2) calc(var(--ag-space-1) * 1.125); border-radius:var(--ag-radius-md); border:var(--ag-border-thin) solid color-mix(in srgb,var(--ag-warning) 25%,var(--ag-line)); background:color-mix(in srgb,var(--ag-warning) 6%,transparent); }
.ag-dm-signal-rule b,.ag-dm-signal-rule span { display:block; }
.ag-dm-signal-rule b { color:var(--ag-ink); font-size:var(--ag-type-label); }
.ag-dm-signal-rule span { margin-top:calc(var(--ag-space-1) * 0.25); color:var(--ag-ink-3); font-size:var(--ag-type-label); line-height:1.45; }
.ag-dm-sk { background:var(--ag-surface-inset); border-radius:var(--ag-radius-sm); padding:var(--ag-space-2); display:grid; gap:var(--ag-space-1);
  min-height:calc(var(--ag-space-1) * 6.75); align-content:start; }
.ag-dm-sk-row { display:flex; gap:var(--ag-space-1); align-items:center; }
.ag-dm-sk i { display:block; height:calc(var(--ag-space-1) * 0.375); border-radius:var(--ag-radius-xs); background:var(--ag-ink-3); opacity:.5; }
.ag-dm-sk .b { height:var(--ag-space-1); opacity:.85; background:var(--ag-signal-ink); }
.ag-dm-sk .o { height:calc(var(--ag-space-1) * 1.75); border:var(--ag-border-thin) solid var(--ag-ink-3); opacity:.55; border-radius:var(--ag-radius-sm); background:transparent; }
.ag-dm-sk .d { width:calc(var(--ag-space-1) * 0.5); height:calc(var(--ag-space-1) * 0.5); border-radius:var(--ag-radius-pill); background:var(--ag-signal-ink); flex:none; }
.ag-dm-sk .n { width:var(--ag-space-1); height:var(--ag-space-1); border-radius:var(--ag-radius-xs); background:var(--ag-signal-ink); flex:none; }
.ag-dm-sk .q { width:calc(var(--ag-space-1) * 0.25); align-self:stretch; min-height:calc(var(--ag-space-1) * 1.5); background:var(--ag-signal-ink); flex:none; }
/* The class "input" has never had a rule behind it — every field carrying it
   across manage has been rendering as a raw browser control. Fixed here for
   this panel only: a global rule would silently restyle a dozen screens
   nobody is looking at right now. Matches .field-input exactly. */
.ag-dm-wrap .input { background:var(--ag-surface-inset); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--radius-sm);
  color:var(--ag-ink); font-family:var(--ag-font-interface); font-size:var(--ag-type-small); padding:var(--ag-space-2) var(--ag-space-3); outline:none; width:100%;
  transition:background var(--ag-motion-fast), border-color var(--ag-motion-fast), color var(--ag-motion-fast); }
.ag-dm-wrap .input:focus { border-color:var(--ag-signal); box-shadow:0 0 0 calc(var(--ag-space-1) * .375) var(--ag-signal-soft); }
.ag-dm-wrap .input::placeholder { color:var(--ag-ink-3); }
.ag-dm-wrap textarea.input { resize:vertical; }
.ag-dm-var { border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); padding:calc(var(--ag-space-1) * 1.375) var(--ag-space-3); display:grid; gap:calc(var(--ag-space-1) * 1.125); }
.ag-dm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(calc(var(--ag-type-card) * 7.5),1fr)); gap:calc(var(--ag-space-1) * 1.125); }
.ag-dm-lab { font-size:var(--ag-type-label); color:var(--ag-ink-3); display:grid; gap:calc(var(--ag-space-1) * 0.375); }
/* ── The view toggle and the How-it's-going view ── */
.ag-dm-placement { list-style:none; margin:calc(var(--ag-space-1) * 1.75) 0 0; padding:0; display:grid; gap:var(--ag-space-2); }
.ag-dm-placement li { display:grid; gap:calc(var(--ag-space-1) * 0.375); padding:calc(var(--ag-space-1) * 1.375) calc(var(--ag-space-1) * 1.625); border-radius:var(--ag-radius-md); font-size:var(--ag-type-small); line-height:1.5;
  border:var(--ag-border-thin) solid var(--ag-line); background:var(--ag-surface); }
.ag-dm-placement li.ag-dm-pl-warn { border-color:color-mix(in srgb, var(--ag-warning) 40%, var(--ag-line)); background:color-mix(in srgb, var(--ag-warning) 7%, var(--ag-surface)); }
.ag-dm-placement li b { font-weight:var(--ag-weight-semibold); }
.ag-dm-placement li span { color:var(--ag-ink-2); }
.ag-dm-placement li small { color:var(--ag-ink-3); font-size:var(--ag-type-caption); }
.ag-dmm-wrap { display:grid; gap:var(--ag-space-4); align-content:start; }
.ag-dmm-card { border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface); padding:calc(var(--ag-space-1) * 1.875) var(--ag-space-4); display:grid; gap:var(--ag-space-3); }
.ag-dmm-h { font-size:var(--ag-type-caption); font-weight:var(--ag-weight-bold); letter-spacing:.04em; text-transform:uppercase; color:var(--ag-ink-3); }
.ag-dmm-stats { display:flex; gap:calc(var(--ag-space-1) * 1.25); flex-wrap:wrap; }
.ag-dmm-stat { border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); padding:calc(var(--ag-space-1) * 1.125) calc(var(--ag-space-1) * 1.625); min-width:calc(var(--ag-space-1) * 12); display:grid; gap:calc(var(--ag-space-1) * 0.25); }
.ag-dmm-stat b { font-size:var(--ag-type-card); font-weight:var(--ag-weight-bold); font-variant-numeric:tabular-nums; }
.ag-dmm-stat span { font-size:var(--ag-type-label); color:var(--ag-ink-3); }
/* One stage row in the funnel. The bar is a stacked proportion, not a chart
   library — reached is the track, the fills are answered / qualified-out /
   dropped, so the eye reads the leak without a legend. */
.ag-dmm-stage { display:grid; gap:calc(var(--ag-space-1) * 0.875); padding:calc(var(--ag-space-1) * 1.375) 0; border-top:calc(var(--ag-space-1) * 0.125) solid var(--ag-line); }
.ag-dmm-stage:first-child { border-top:0; }
.ag-dmm-stage-top { display:grid; grid-template-columns:1fr auto; gap:var(--ag-space-2); align-items:baseline; }
.ag-dmm-stage-t { font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); }
.ag-dmm-stage-n { font-size:var(--ag-type-label); color:var(--ag-ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ag-dmm-bar { height:calc(var(--ag-space-1) * 1.5); border-radius:var(--ag-radius-sm); background:color-mix(in srgb,var(--ag-ink) 6%,transparent); overflow:hidden; display:flex; }
.ag-dmm-bar i { height:100%; display:block; }
.ag-dmm-bar .a { background:var(--ag-positive); }        /* answered */
.ag-dmm-bar .q { background:var(--ag-signal-ink); }        /* qualified out */
.ag-dmm-bar .d { background:var(--ag-warning); }        /* dropped */
.ag-dmm-fall { font-size:var(--ag-type-label); color:var(--ag-ink-3); }
.ag-dmm-vars { display:grid; gap:calc(var(--ag-space-1) * 0.625); margin:var(--ag-space-1) 0 calc(var(--ag-space-1) * 0.25) calc(var(--ag-space-1) * 0.25); padding-left:calc(var(--ag-space-1) * 1.375); border-left:calc(var(--ag-space-1) * 0.25) solid var(--ag-line); }
.ag-dmm-var { display:grid; grid-template-columns:1fr auto; gap:var(--ag-space-2); font-size:var(--ag-type-caption); align-items:center; }
.ag-dmm-var-bar { display:inline-flex; height:calc(var(--ag-space-1) * 0.875); width:calc(var(--ag-space-1) * 15); border-radius: var(--ag-radius-sm); overflow:hidden; background:color-mix(in srgb,var(--ag-ink) 6%,transparent); }
.ag-dmm-var-bar i { height:100%; }
.ag-dmm-var-bar .ok { background:var(--ag-positive); } .ag-dmm-var-bar .uns { background:var(--ag-signal-ink); } .ag-dmm-var-bar .sk { background:var(--ag-warning); }
.ag-dmm-flag { font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); color:var(--ag-warning-label); }
.ag-dmm-caret { border:0; background:transparent; cursor:pointer; color:var(--ag-ink-3); font-size:var(--ag-type-label); padding:0; }
/* The honesty line. Rendered verbatim from the server's verdict, and dimmed
   when a difference is within the noise so it never reads as a result. */
.ag-dmm-verdict { font-size:var(--ag-type-caption); line-height:1.5; padding:var(--ag-space-2) calc(var(--ag-space-1) * 1.375); border-radius:var(--ag-radius-md);
  background:var(--ag-surface-inset); border:var(--ag-border-thin) solid var(--ag-line); }
.ag-dmm-verdict.real { border-color:var(--ag-positive); background:color-mix(in srgb,var(--ag-positive) 8%,transparent); }
.ag-dmm-verdict.noise { color:var(--ag-ink-2); }
.ag-dmm-refusal { font-size:var(--ag-type-label); line-height:1.5; padding:var(--ag-space-2) calc(var(--ag-space-1) * 1.25); border-radius:var(--ag-radius-md); color:var(--ag-ink-2);
  background:var(--ag-surface-inset); border-left:calc(var(--ag-space-1) * 0.375) solid var(--ag-ink-3); }
.ag-dmm-refusal b { color:var(--ag-ink); }
.ag-dmm-guard { background:color-mix(in srgb,var(--ag-signal-soft) 25%,var(--ag-surface)); }
.ag-dmm-guard-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ag-space-2); }
.ag-dmm-guard-grid>span { display:flex; align-items:flex-start; gap:var(--ag-space-2); padding:var(--ag-space-2); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface); }
.ag-dmm-guard-grid>span>i { display:grid; place-items:center; width:calc(var(--ag-space-1) * 2.125); height:calc(var(--ag-space-1) * 2.125); flex:none; border-radius:var(--ag-radius-pill); color:var(--ag-positive-label); background:color-mix(in srgb,var(--ag-positive) 12%,transparent); font-size:var(--ag-type-label); font-style:normal; font-weight:var(--ag-weight-bold); }
.ag-dmm-guard-grid b,.ag-dmm-guard-grid small { display:block; }
/* A rule that holds is ticked; one that does not is an open circle, dimmed: a tick is a state. */
.ag-dmm-guard-grid>span.is-wait>i { color:var(--ag-ink-3); background:var(--ag-surface-inset); }
.ag-dmm-guard-grid>span.is-wait b { color:var(--ag-ink-2); }
/* What the business's own numbers say about a suggestion, under its one line. */
.ag-dm-row-e { display:block; margin-top:calc(var(--ag-space-1) * 0.375); font-size:var(--ag-type-label); color:var(--ag-ink-2); }
.ag-dmm-guard-grid b { color:var(--ag-ink); font-size:var(--ag-type-label); }
.ag-dmm-guard-grid small { margin-top:calc(var(--ag-space-1) * 0.25); color:var(--ag-ink-3); font-size:var(--ag-type-label); line-height:1.4; }
@media (max-width:850px){ .ag-dmm-guard-grid { grid-template-columns:1fr 1fr; } }
.ag-dmm-change-intro { color:var(--ag-ink-2); font-size:var(--ag-type-caption); line-height:1.55; max-width:calc(var(--ag-space-1) * 95); }
.ag-dmm-change-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ag-space-2); }
.ag-dmm-change { position:relative; min-width:0; display:grid; grid-template-rows:auto auto 1fr auto; gap:calc(var(--ag-space-1) * 0.625); padding:calc(var(--ag-space-1) * 1.375); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface); }
.ag-dmm-change>span { width:max-content; color:var(--ag-signal-ink); font-size:var(--ag-type-label); line-height:1; font-weight:var(--ag-weight-bold); letter-spacing:.07em; text-transform:uppercase; }
.ag-dmm-change h4 { color:var(--ag-ink); font-size:var(--ag-type-small); line-height:1.35; }
.ag-dmm-change p { color:var(--ag-ink-3); font-size:var(--ag-type-label); line-height:1.45; }
.ag-dmm-change button,.ag-dmm-change a { justify-self:start; margin-top:calc(var(--ag-space-1) * 0.375); color:var(--ag-signal-ink); font:inherit; font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); text-decoration:none; background:transparent; border:0; padding:0; cursor:pointer; }
.ag-dmm-change.friction { border-color:color-mix(in srgb,var(--ag-warning) 32%,var(--ag-line)); background:color-mix(in srgb,var(--ag-warning) 5%,var(--ag-surface)); }
.ag-dmm-change.version { border-style:dashed; }
@media (max-width:980px){ .ag-dmm-change-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ag-dmm-change-grid,.ag-dmm-guard-grid { grid-template-columns:1fr; } .ag-dm-answer-top { display:grid; } }
.ag-dmm-fr { display:grid; gap:calc(var(--ag-space-1) * 0.75); padding:calc(var(--ag-space-1) * 1.25) 0; border-top:calc(var(--ag-space-1) * 0.125) solid var(--ag-line); }
.ag-dmm-fr:first-child { border-top:0; }
.ag-dmm-fr-top { display:grid; grid-template-columns:1fr auto; gap:var(--ag-space-2); align-items:baseline; }
.ag-dmm-pill { font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); padding:calc(var(--ag-space-1) * 0.25) var(--ag-space-2); border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid currentColor;
  background:color-mix(in srgb,currentColor 10%,transparent); white-space:nowrap; }
.ag-dmm-time { display:flex; gap:calc(var(--ag-space-1) * 0.75); flex-wrap:wrap; font-size:var(--ag-type-label); color:var(--ag-ink-3); }
.ag-dmm-time i { font-style:normal; padding:calc(var(--ag-space-1) * 0.125) calc(var(--ag-space-1) * 0.875); border-radius:var(--ag-radius-pill); background:color-mix(in srgb,var(--ag-ink) 6%,transparent); }
.ag-dmm-ver { display:grid; grid-template-columns:auto 1fr auto; gap:calc(var(--ag-space-1) * 1.375); padding:calc(var(--ag-space-1) * 1.125) 0; border-top:calc(var(--ag-space-1) * 0.125) solid var(--ag-line); align-items:baseline; }
.ag-dmm-ver:first-child { border-top:0; }
.ag-dmm-ver b { font-variant-numeric:tabular-nums; }
.ag-dmm-ver-log { font-size:var(--ag-type-label); color:var(--ag-ink-2); line-height:1.5; }
.ag-dmm-empty { text-align:center; color:var(--ag-ink-3); font-size:var(--ag-type-small); line-height:1.6; padding:calc(var(--ag-space-1) * 3.25) var(--ag-space-4); }

/* The shapes Buyer decisions' rows and panels are made of. They were 140 inline styles, in 31 font sizes and paddings: a stack, a
   line of controls, a ruled section, a note, a warning, a small input, a bar's width and a tone (the last two are data, handed in
   as --w and --tone). */
.ag-dm-stack { display:grid; gap:calc(var(--ag-space-1) * 1.5); min-width:0; }
.ag-dm-stack--tight { display:grid; gap:calc(var(--ag-space-1) / 4); min-width:0; }
.ag-dm-end { justify-items:end; }
.ag-dm-media { display:grid; grid-template-columns:auto minmax(0,1fr); gap:calc(var(--ag-space-1) * 1.5); align-items:start; }
.ag-dm-line { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-1); min-width:0; }
.ag-dm-line--top { align-items:flex-start; flex-wrap:nowrap; }
.ag-dm-line--split { justify-content:space-between; }
.ag-dm-line--loose { gap:calc(var(--ag-space-1) * 1.5) var(--ag-space-2); }
.ag-dm-block { display:block; }
.ag-dm-ruled { border-top:var(--ag-border-thin) solid var(--ag-line); padding-top:calc(var(--ag-space-1) * 1.5); }
.ag-dm-padx { padding:0 calc(var(--ag-space-1) * 1.5) calc(var(--ag-space-1) * 1.5); }
.ag-dm-quote { border-left:var(--ag-border-strong) solid var(--ag-signal-ink); padding-left:calc(var(--ag-space-1) * 1.5); }
.ag-dm-alert { border:var(--ag-border-thin) solid var(--ag-danger); border-radius:var(--ag-radius-md); padding:var(--ag-space-1) calc(var(--ag-space-1) * 1.5);
  background:color-mix(in srgb,var(--ag-danger) 7%,transparent); }
.ag-dm-tip { border:var(--ag-border-thin) solid color-mix(in srgb,var(--ag-signal-ink) 40%,transparent); background:var(--ag-signal-soft);
  border-radius:var(--ag-radius-md); padding:calc(var(--ag-space-1) * 1.5) calc(var(--ag-space-1) * 1.75); }
.ag-dm-frame { border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); overflow:hidden; }
.ag-dm-thumb { width:calc(var(--ag-type-card) * 1.9); height:calc(var(--ag-type-card) * 1.9); object-fit:cover; border-radius:var(--ag-radius-sm); flex:none; }
.ag-dm-tiny { font-size:var(--ag-type-label); }
.ag-dm-sm { font-size:var(--ag-type-small); }
.ag-dm-input { font-size:var(--ag-type-caption); padding:calc(var(--ag-space-1) * .625) var(--ag-space-1); }
.ag-dm-input--xs { max-width:calc(var(--ag-type-card) * 4); }
.ag-dm-input--s { max-width:calc(var(--ag-type-card) * 6.5); }
.ag-dm-input--m { max-width:calc(var(--ag-type-card) * 10); }
.ag-dm-pad { padding:calc(var(--ag-space-1) * 2.5) calc(var(--ag-space-1) * 1.25); }
.ag-dm-strong { font-weight:var(--ag-weight-semibold); }
.ag-dm-lead { line-height:var(--ag-leading-body); }
.ag-dm-kicker { font-weight:var(--ag-weight-bold); letter-spacing:.04em; }
.ag-dm-pre { white-space:pre-wrap; font:inherit; }
.ag-dm-nowrap { white-space:nowrap; }
.ag-dm-center { text-align:center; }
.ag-dm-press { cursor:pointer; }
.ag-dm-start { justify-self:start; }
.ag-dm-span { grid-column:1 / -1; }
.ag-dm-fixed { flex:none; }
.ag-dm-minw--s { min-width:calc(var(--ag-type-card) * 1.3); }
.ag-dm-minw { min-width:calc(var(--ag-type-card) * 3.9); }
.ag-dm-minw--l { min-width:calc(var(--ag-type-card) * 10); }
.ag-dm-maxw { max-width:calc(var(--ag-type-card) * 10.5); }
.ag-dm-mt { margin-top:calc(var(--ag-space-1) * .75); }
.ag-dm-mb { margin-bottom:calc(var(--ag-space-1) * .75); }
.ag-dm-my { margin:var(--ag-space-1) 0; }
.ag-dm-nudge { margin:calc(var(--ag-space-1) / 4) 0 calc(var(--ag-space-1) * -.375); }
.ag-dm-dim { opacity:.6; }
.ag-dm-warn { color:var(--ag-warning-label); }
.ag-dm-bad { color:var(--ag-danger-label); }
.ag-dm-faint { color:var(--ag-ink-3); }
.ag-dm-quiet { color:var(--ag-ink-2); }
.ag-dm-accent { color:var(--ag-signal-ink); }
.ag-dm-toned { color:var(--tone); }
.ag-dm-edged { border-color:var(--tone, var(--ag-ink-3)); }
.ag-dm-swatch { display:inline-block; width:calc(var(--ag-space-1) * 1.125); height:calc(var(--ag-space-1) * 1.125); border-radius:calc(var(--ag-radius-sm) / 3);
  vertical-align:middle; background:var(--ag-ink-3); }
.ag-dm-swatch[data-tone="warning"] { background:var(--ag-warning); }
.ag-dm-swatch[data-tone="positive"] { background:var(--ag-positive); }
.ag-dm-swatch[data-tone="signal"] { background:var(--ag-signal-ink); }
.ag-dm-w { width:var(--w); }
.ag-dm-w--inline { display:inline-block; margin-right:calc(var(--ag-space-1) / 2); }
.ag-dm-rowbtn { display:flex; align-items:center; gap:calc(var(--ag-space-1) * 1.25); width:100%; text-align:left; font:inherit; color:inherit;
  background:transparent; border:0; cursor:pointer; padding:calc(var(--ag-space-1) * 1.25) calc(var(--ag-space-1) * 1.5); }
.ag-dm-pip { width:calc(var(--ag-space-1) * .875); height:calc(var(--ag-space-1) * .875); border-radius:var(--ag-radius-pill); background:var(--tone); flex:none; }
.ag-dm-verdict { font-size:var(--ag-type-small); line-height:var(--ag-leading-body); padding:calc(var(--ag-space-1) * 1.125) calc(var(--ag-space-1) * 1.375);
  border-radius:var(--ag-radius-md); border-left:var(--ag-border-strong) solid var(--tone); background:var(--ag-surface-inset); }

/* ── THE VISIBILITY PANEL (2026-10-07) ────────────────────────────────────────────────────────────────────────────────────────────
   public/visibility.js, one panel for /vp and /manage. It injected this sheet into the page's head itself, unlayered, in pixels,
   the console's old colour names and seven raw hexes for the kinds of source; the hues are the categorical ramp now (--ag-cat-*),
   which the Design page owns, and the panel's own button and toggle are the console's (.ag-button, .ag-filter). */
.vz { display:block; font-family:inherit }
.vz * { box-sizing:border-box }
.vz-k-ugc { --vzk:var(--ag-cat-5); } .vz-k-social { --vzk:var(--ag-cat-2); } .vz-k-directory { --vzk:var(--ag-cat-6); }
.vz-k-editorial { --vzk:var(--ag-cat-4); } .vz-k-corporate { --vzk:var(--ag-signal); }
.vz-k-competitor { --vzk:var(--ag-cat-1); } .vz-k-other { --vzk:var(--ag-ink-3); }

.vz-card { background:var(--ag-surface); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); overflow:hidden }
.vz-head { padding:calc(var(--ag-space-1) * 1.625) calc(var(--ag-space-1) * 2); border-bottom:calc(var(--ag-space-1) * 0.125) solid var(--ag-line); display:flex; align-items:center; justify-content:space-between; gap:calc(var(--ag-space-1) * 1.5); flex-wrap:wrap }
.vz-head h4 { font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); color:var(--ag-ink); margin:0 }
.vz-head p { font-size:var(--ag-type-caption); color:var(--ag-ink-2); margin:calc(var(--ag-space-1) * 0.375) 0 0; line-height:1.5 }
.vz-body { padding:calc(var(--ag-space-1) * 1.875) calc(var(--ag-space-1) * 2) }
.vz-body.tight { padding:0 }

.vz-top { display:flex; align-items:flex-start; justify-content:space-between; gap:calc(var(--ag-space-1) * 1.5); flex-wrap:wrap; margin-bottom:calc(var(--ag-space-1) * 1.75) }
.vz-top h3 { font-size:var(--ag-type-body); font-weight:var(--ag-weight-bold); color:var(--ag-ink); margin:0 }
.vz-top p { font-size:var(--ag-type-caption); color:var(--ag-ink-2); margin:calc(var(--ag-space-1) * 0.5) 0 0; line-height:1.5 }

.vz-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(calc(var(--ag-type-card) * 7.4),1fr)); gap:calc(var(--ag-space-1) * 1.5); margin-bottom:calc(var(--ag-space-1) * 2) }
.vz-stat { background:var(--ag-surface); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); padding:calc(var(--ag-space-1) * 1.625) calc(var(--ag-space-1) * 1.875) }
.vz-stat .n { font-size:var(--ag-type-card); font-weight:var(--ag-weight-bold); letter-spacing:-.02em; line-height:1.15; color:var(--ag-ink) }
.vz-stat .l { font-size:var(--ag-type-label); text-transform:uppercase; letter-spacing:.07em; color:var(--ag-ink-3); margin-top:calc(var(--ag-space-1) * 0.5) }
.vz-stat .h { font-size:var(--ag-type-label); color:var(--ag-ink-2); margin-top:calc(var(--ag-space-1) * 0.625); line-height:1.45 }
.vz-stat.on .n { color:var(--ag-signal-ink) }
.vz-null { color:var(--ag-ink-3); font-weight:var(--ag-weight-medium); font-size:var(--ag-type-body-lg) }

.vz-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:calc(var(--ag-space-1) * 2); align-items:start; margin-top:calc(var(--ag-space-1) * 2) }
@media (max-width:calc(var(--ag-space-1) * 125)){ .vz-grid { grid-template-columns:minmax(0,1fr) } }

.vz-tw { overflow-x:auto }
.vz table { width:100%; border-collapse:collapse; font-size:var(--ag-type-caption) }
.vz th { text-align:left; font-size:var(--ag-type-label); text-transform:uppercase; letter-spacing:.05em; color:var(--ag-ink-3); font-weight:var(--ag-weight-semibold); padding:calc(var(--ag-space-1) * 1.125) calc(var(--ag-space-1) * 1.75); border-bottom:calc(var(--ag-space-1) * 0.125) solid var(--ag-line); white-space:nowrap }
.vz td { padding:calc(var(--ag-space-1) * 1.125) calc(var(--ag-space-1) * 1.75); border-bottom:calc(var(--ag-space-1) * 0.125) solid var(--ag-line); color:var(--ag-ink); vertical-align:top }
.vz tr:last-child td { border-bottom:0 }
.vz th.num,.vz td.num { text-align:right; font-variant-numeric:tabular-nums }
.vz tr.vz-you td { background:var(--ag-signal-soft) }

.vz-faint { color:var(--ag-ink-3) }
.vz-sub { font-size:var(--ag-type-label); color:var(--ag-ink-3); margin-top:calc(var(--ag-space-1) * 0.25) }
.vz-score { font-weight:var(--ag-weight-bold); font-variant-numeric:tabular-nums }
.vz-score.hi { color:var(--ag-positive-label) } .vz-score.mid { color:var(--ag-warning-label) } .vz-score.lo { color:var(--ag-danger-label) }

.vz-pill { display:inline-block; font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); padding:calc(var(--ag-space-1) * 0.25) var(--ag-space-1); border-radius:var(--ag-radius-lg); background:color-mix(in srgb,var(--ag-ink) 6%,transparent); color:var(--ag-ink-2); white-space:nowrap }
.vz-pill.ok { background:color-mix(in srgb,var(--ag-positive) 14%,transparent); color:var(--ag-positive-label) }
.vz-pill.bad { background:color-mix(in srgb,var(--ag-danger) 12%,transparent); color:var(--ag-danger-label) }
.vz-pill.you { background:var(--ag-signal-soft); color:var(--ag-signal-ink) }
.vz-pill.kind { background:color-mix(in srgb, var(--vzk) 18%, transparent); color:var(--vzk) }

.vz-note { border-radius:var(--ag-radius-md); padding:calc(var(--ag-space-1) * 1.5) calc(var(--ag-space-1) * 1.75); font-size:var(--ag-type-caption); line-height:1.55; background:var(--ag-surface-inset); border:var(--ag-border-thin) solid var(--ag-line); color:var(--ag-ink-2); margin-bottom:calc(var(--ag-space-1) * 1.75) }
.vz-note b { color:var(--ag-ink) }
.vz-empty { text-align:center; color:var(--ag-ink-2); padding:calc(var(--ag-space-1) * 3.75) calc(var(--ag-space-1) * 2.25); font-size:var(--ag-type-small); line-height:1.6 }
.vz-empty h3 { font-size:var(--ag-type-body); font-weight:var(--ag-weight-semibold); color:var(--ag-ink); margin:0 0 calc(var(--ag-space-1) * 0.75) }
.vz-empty p { max-width:56ch; margin:0 auto calc(var(--ag-space-1) * 2); color:var(--ag-ink-2) }

.vz-chart { width:100%; height:auto; display:block; overflow:visible }
.vz-chart .gl { stroke:var(--ag-line); stroke-width:1 }
.vz-chart .ax { fill:var(--ag-ink-3); font-size:var(--ag-type-label) }
.vz-chart .ln { fill:none; stroke:var(--ag-signal); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round }
.vz-chart .fl { fill:var(--ag-signal-soft); stroke:none }
.vz-chart .pt { fill:var(--ag-surface); stroke:var(--ag-signal); stroke-width:2.5 }

.vz-kind + .vz-kind { margin-top:calc(var(--ag-space-1) * 1.5) }
.vz-kh { display:flex; justify-content:space-between; align-items:center; font-size:var(--ag-type-caption); margin-bottom:calc(var(--ag-space-1) * 0.625); color:var(--ag-ink) }
.vz-kh b { font-variant-numeric:tabular-nums }
.vz-dot { display:inline-block; width:var(--ag-space-1); height:var(--ag-space-1); border-radius:var(--ag-radius-pill); background:var(--vzk); margin-right:calc(var(--ag-space-1) * 0.875) }
.vz-kbar { height:calc(var(--ag-space-1) * 0.875); border-radius:var(--ag-radius-sm); background:color-mix(in srgb,var(--ag-ink) 6%,transparent); overflow:hidden }
.vz-kbar span { display:block; height:100%; width:var(--w); background:var(--vzk); border-radius:var(--ag-radius-sm) }
.vz-spin { display:inline-block; width:calc(var(--ag-space-1) * 1.375); height:calc(var(--ag-space-1) * 1.375); border:var(--ag-border-strong) solid currentColor; border-right-color:transparent; border-radius:var(--ag-radius-pill); animation:vz-sp .7s linear infinite; vertical-align:-1px }
@keyframes vz-sp { to { transform:rotate(360deg) } }
.vz-line { font-size:var(--ag-type-caption); margin:0; }
.vz-foot { border-top:var(--ag-border-thin) solid var(--ag-line); font-size:var(--ag-type-caption); }
.vz-note--bad { border-color:var(--ag-danger); }
.vz-center { justify-content:center; }
.vz-unit { font-size:var(--ag-type-body); }

/* A drawing you can drag a point on (the positioning chart and map): full width up to a reading measure, no scroll stolen. */
.ag-chart-plane { display:block; width:100%; max-width:calc(var(--ag-type-card) * 33); touch-action:none; }
.ag-chart-grab { cursor:grab; }

/* ── The business map (GRAPH-STUDIO-SPEC.md §9) ──────────────────────────────
   Concepts as boxes in groups, joined by lines that say how each was found. Tokens only: a found line's dash, a group's tint,
   the hottest activity step and a concept's corner are /admin → Design controls (recipes.map), defaults the approved mockup.
   A node's tone, a line's kind and a layer come from DATA attributes, never from a class per node. Drawn inside the map's own
   shadow root, which links this sheet. */
@layer components {
.ag-map-page { display:block; color:var(--ag-ink); font-family:var(--ag-font-interface); font-size:var(--ag-type-body); }
.ag-map-err { margin:0 0 var(--ag-space-2); color:var(--ag-danger-label); font-size:var(--ag-type-small); }
.ag-map-loading { color:var(--ag-ink-3); font-size:var(--ag-type-small); }
/* A segmented switch: one choice of a few, all visible. */
.ag-map-seg { display:inline-flex; border:var(--ag-border-thin) solid var(--ag-line-strong); border-radius:var(--ag-radius-pill); background:var(--ag-surface-raised); padding:calc(var(--ag-space-1) / 4); }
.ag-map-seg button { all:unset; cursor:pointer; box-sizing:border-box; min-height:calc(var(--ag-control-h-sm) - var(--ag-space-1)); padding:0 var(--ag-space-2); border-radius:var(--ag-radius-pill);
  font-size:var(--ag-type-small); color:var(--ag-ink-2); display:inline-flex; align-items:center; }
.ag-map-seg button:hover { color:var(--ag-ink); }
.ag-map-seg button[aria-pressed="true"] { background:var(--ag-ink); color:var(--ag-canvas); font-weight:var(--ag-weight-medium); }
.ag-map-seg button:focus-visible { outline:2px solid var(--ag-focus); outline-offset:2px; }
/* The strip of controls above a map, and a search box the height of the controls beside it. */
.ag-map-bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-1) var(--ag-space-2); margin:var(--ag-space-2) 0 var(--ag-space-1); }
.ag-map-bar .grow { flex:1 1 14rem; }
.ag-map-count { font-size:var(--ag-type-small); color:var(--ag-ink-3); }
.ag-map-find { box-sizing:border-box; min-height:var(--ag-control-h-sm); padding:0 var(--ag-space-2); min-width:14rem; border:var(--ag-border-thin) solid var(--ag-line-strong); border-radius:var(--ag-radius-pill);
  background:var(--ag-surface-raised); color:var(--ag-ink); font:inherit; font-size:var(--ag-type-small); }
.ag-map-find:focus-visible { outline:2px solid var(--ag-focus); outline-offset:2px; }
/* A panel whose contents bring their own padded rows sits flush: the panel's own padding would be a second margin. */
.ag-panel:has(> .ag-map-head), .ag-panel:has(> .ag-map-pad), .ag-panel:has(> .ag-map-next), .ag-panel[data-map-tabs] { padding:0; }
.ag-panel[data-map-tabs] > .ag-tabs { padding:0 var(--ag-space-3); }
.ag-map-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--ag-space-1) var(--ag-space-2); padding:var(--ag-space-2) var(--ag-space-3) var(--ag-space-1); }
.ag-map-head b { font-family:var(--ag-font-display); font-size:var(--ag-type-card); font-weight:var(--ag-weight-medium); }
.ag-map-pad { padding:0 var(--ag-space-3) var(--ag-space-3); }
.ag-map-gap { margin-top:var(--ag-space-3); }
/* What to look at first: rows with the action done in the row. */
.ag-map-next { display:grid; }
.ag-map-next-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--ag-space-2); align-items:start; padding:var(--ag-space-2) var(--ag-space-3); border-top:var(--ag-border-thin) solid var(--ag-line); }
.ag-map-next-row:first-child { border-top:0; }
.ag-map-next-mark { width:var(--ag-space-1); height:var(--ag-space-1); margin-top:calc(var(--ag-space-1) * .9); border-radius:var(--ag-radius-pill); background:var(--ag-warning); }
.ag-map-next-row b { font-weight:var(--ag-weight-medium); }
.ag-map-next-row p { margin:calc(var(--ag-space-1) / 4) 0 0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-map-next-row small { display:block; margin-top:calc(var(--ag-space-1) / 2); font-size:var(--ag-type-caption); color:var(--ag-ink-3); }
.ag-map-next-do { display:flex; gap:var(--ag-space-1); flex-wrap:wrap; justify-content:flex-end; }
.ag-map-next-more { padding:var(--ag-space-1) var(--ag-space-3) var(--ag-space-2); border-top:var(--ag-border-thin) solid var(--ag-line); }
.ag-map-inline { grid-column:1 / -1; padding:var(--ag-space-2) 0 0; }
/* The map: one SVG drawn from data. SVG text is in the drawing's own units, so the picture keeps a minimum width and scrolls. */
.ag-map-wrap { overflow-x:auto; border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface-raised); padding:var(--ag-space-2); }
.ag-map { display:block; width:100%; min-width:46rem; height:auto; font-family:var(--ag-font-interface); }
.ag-map-region rect { fill:color-mix(in srgb, var(--ag-signal) var(--ag-map-region), var(--ag-surface)); stroke:var(--ag-line); stroke-width:1; }
.ag-map-region-h { fill:var(--ag-ink); font-size:var(--ag-type-small); font-weight:var(--ag-weight-medium); }
.ag-map-region-s { fill:var(--ag-ink-3); font-size:var(--ag-type-caption); }
.ag-map-edge { fill:none; stroke:var(--ag-line-strong); stroke-width:1.5; opacity:.55; transition:opacity var(--ag-motion-fast), stroke-width var(--ag-motion-fast); }
.ag-map-edge[data-how="found"] { stroke-dasharray:var(--ag-map-dash) var(--ag-map-gap); }
.ag-map-edge[data-how="owner"] { stroke:var(--ag-signal); opacity:.8; }
.ag-map-edge[data-skip] { opacity:0; pointer-events:none; }
.ag-map-edge-g:focus-visible { outline:none; }
.ag-map-edge-g:focus-visible .ag-map-edge, .ag-map-edge-g:hover .ag-map-edge { opacity:1; stroke-width:2.5; }
.ag-map-edge-t { fill:var(--ag-ink-2); font-size:var(--ag-type-caption); paint-order:stroke; stroke:var(--ag-surface-raised); stroke-width:4px; stroke-linejoin:round; }
.ag-map-node { cursor:pointer; text-decoration:none; }
.ag-map-node rect { fill:var(--ag-surface-raised); stroke:var(--ag-line-strong); stroke-width:1; rx:var(--ag-map-node-radius); transition:fill var(--ag-motion-fast), stroke var(--ag-motion-fast); }
.ag-map-node[data-read="true"] rect { fill:var(--ag-surface-inset); }
.ag-map-node[data-mine="true"] rect { stroke:var(--ag-signal); stroke-width:2; }
.ag-map-node:hover rect, .ag-map-node:focus-visible rect { stroke:var(--ag-ink); stroke-width:2; }
.ag-map-node:focus-visible { outline:none; }
.ag-map-node-t { fill:var(--ag-ink); font-size:var(--ag-type-small); font-weight:var(--ag-weight-medium); }
.ag-map-node-s, .ag-map-node-n { fill:var(--ag-ink-3); font-size:var(--ag-type-caption); font-variant-numeric:tabular-nums; }
.ag-map-n-act, .ag-map-n-roles, .ag-map-n-ev, .ag-map-n-step { display:none; }
.ag-map-gapdot { fill:var(--ag-warning); stroke:var(--ag-surface-raised); stroke-width:2; }
.ag-map-center rect { fill:var(--ag-ink); }
.ag-map-center-t { fill:var(--ag-canvas); font-size:var(--ag-type-body-lg); font-weight:var(--ag-weight-medium); }
.ag-map-center-s { fill:var(--ag-canvas); opacity:.75; font-size:var(--ag-type-caption); }
/* Pointing at a concept: its own lines and neighbours stay, the rest steps back. Find dims what does not match. */
.ag-map[data-near] .ag-map-node:not([data-near]) { opacity:.3; }
.ag-map[data-near] .ag-map-edge:not([data-near]) { opacity:.08; }
.ag-map[data-near] .ag-map-edge[data-near] { opacity:1; stroke-width:2.5; }
.ag-map .ag-map-node[data-miss] { opacity:.18; }
/* Layers: the same map, asked a different question. The heat steps are fractions of the hottest. */
.ag-map[data-layer="activity"] .ag-map-n-recs, .ag-map[data-layer="roles"] .ag-map-n-recs { display:none; }
.ag-map[data-layer="activity"] .ag-map-n-act, .ag-map[data-layer="roles"] .ag-map-n-roles { display:inline; }
.ag-map[data-layer="activity"] .ag-map-node[data-act="1"] rect { fill:color-mix(in srgb, var(--ag-signal) calc(var(--ag-map-heat) * .18), var(--ag-surface-raised)); }
.ag-map[data-layer="activity"] .ag-map-node[data-act="2"] rect { fill:color-mix(in srgb, var(--ag-signal) calc(var(--ag-map-heat) * .4), var(--ag-surface-raised)); }
.ag-map[data-layer="activity"] .ag-map-node[data-act="3"] rect { fill:color-mix(in srgb, var(--ag-signal) calc(var(--ag-map-heat) * .69), var(--ag-surface-raised)); }
.ag-map[data-layer="activity"] .ag-map-node[data-act="4"] rect { fill:color-mix(in srgb, var(--ag-signal) var(--ag-map-heat), var(--ag-surface-raised)); }
.ag-map[data-layer="activity"] .ag-map-edge { opacity:.25; }
.ag-map[data-layer="gaps"] .ag-map-node:not([data-gap]), .ag-map[data-layer="roles"] .ag-map-node:not([data-roles]) { opacity:.35; }
.ag-map[data-layer="gaps"] .ag-map-edge, .ag-map[data-layer="roles"] .ag-map-edge { opacity:.2; }
.ag-map[data-layer="gaps"] .ag-map-node[data-gap] rect { stroke:var(--ag-warning); stroke-width:2; }
/* The map's Events and Workflows layers: what each concept says, and a business workflow drawn as a numbered route (BUSINESS-WORKFLOWS-SPEC.md §7). */
.ag-map[data-layer="events"] .ag-map-n-recs, .ag-map[data-layer="workflows"] .ag-map-n-recs { display:none; }
.ag-map[data-layer="events"] .ag-map-n-ev, .ag-map[data-layer="workflows"] .ag-map-n-step { display:inline; }
.ag-map[data-layer="workflows"] .ag-map-node:not([data-step]) { opacity:.35; }
.ag-map[data-layer="workflows"] .ag-map-edge:not([data-route]) { opacity:.15; }
.ag-map[data-layer="workflows"] .ag-map-node[data-step] rect, .ag-map[data-layer="workflows"] .ag-map-edge[data-route] { stroke:var(--ag-signal); stroke-width:2; }
/* The key to the lines and the boxes. */
.ag-map-legend { display:flex; flex-wrap:wrap; gap:var(--ag-space-1) var(--ag-space-3); margin-top:var(--ag-space-2); font-size:var(--ag-type-caption); color:var(--ag-ink-2); }
.ag-map-legend span { display:inline-flex; align-items:center; gap:var(--ag-space-1); }
.ag-map-legend svg { width:calc(var(--ag-space-4) * 1.1); height:var(--ag-space-2); flex:none; }
.ag-map-legend path { fill:none; stroke:currentColor; stroke-width:1.5; }
.ag-map-legend path[data-how="found"] { stroke-dasharray:var(--ag-map-dash) var(--ag-map-gap); }
.ag-map-legend path[data-how="owner"] { stroke:var(--ag-signal); stroke-width:2; }
.ag-map-legend i { display:inline-block; width:var(--ag-space-2); height:var(--ag-space-2); border-radius:var(--ag-radius-sm); border:var(--ag-border-thin) solid var(--ag-line-strong); background:var(--ag-surface-raised); }
.ag-map-legend i[data-k="read"] { background:var(--ag-surface-inset); }
.ag-map-legend i[data-k="mine"] { border-color:var(--ag-signal); border-width:2px; }
.ag-map-legend i[data-k="gap"] { border-radius:var(--ag-radius-pill); background:var(--ag-warning); border-color:transparent; }
/* The outline: the way in on a phone, from a keyboard, or with a screen reader. Nothing is only in the picture. */
.ag-map-listwrap { display:none; }
.ag-map-group h4 { margin:var(--ag-space-3) 0 var(--ag-space-1); font-family:var(--ag-font-display); font-size:var(--ag-type-card); font-weight:var(--ag-weight-medium); }
.ag-map-group h4 small { font-family:var(--ag-font-interface); font-size:var(--ag-type-caption); font-weight:var(--ag-weight-normal); color:var(--ag-ink-3); margin-left:var(--ag-space-1); }
.ag-map-lis { border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface-raised); overflow:hidden; }
.ag-map-li { display:flex; justify-content:space-between; align-items:center; gap:var(--ag-space-2); padding:var(--ag-space-1) var(--ag-space-2); min-height:calc(var(--ag-control-h-sm) * 1.2); border-top:var(--ag-border-thin) solid var(--ag-line); color:var(--ag-ink); text-decoration:none; }
.ag-map-li:first-child { border-top:0; }
.ag-map-li:hover { background:var(--ag-surface); }
.ag-map-li[data-miss] { display:none; }
.ag-map-li-name { display:grid; }
.ag-map-li-name small, .ag-map-li-end small { font-size:var(--ag-type-caption); color:var(--ag-ink-3); }
.ag-map-li-end { display:flex; gap:var(--ag-space-1); align-items:center; }
[data-map-view="list"] .ag-map-wrap { display:none; }
[data-map-view="list"] .ag-map-listwrap { display:block; }
/* Not in use here: what Agoria can model and this business has not turned on. */
.ag-map-more { display:flex; flex-wrap:wrap; gap:var(--ag-space-1); margin-top:var(--ag-space-1); }
.ag-map-pill { all:unset; cursor:pointer; box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--ag-space-1); min-height:calc(var(--ag-control-h-sm) - var(--ag-space-1)); padding:0 var(--ag-space-2);
  border:var(--ag-border-thin) dashed var(--ag-line-strong); border-radius:var(--ag-radius-pill); font-size:var(--ag-type-small); color:var(--ag-ink-2); }
.ag-map-pill:hover { border-style:solid; color:var(--ag-ink); }
.ag-map-pill:focus-visible { outline:2px solid var(--ag-focus); outline-offset:2px; }
/* One concept in focus: the picture and a panel beside it. */
.ag-map-crumbs { display:flex; flex-wrap:wrap; gap:var(--ag-space-1); font-size:var(--ag-type-small); color:var(--ag-ink-3); margin:var(--ag-space-1) 0 0; }
.ag-map-crumbs button { all:unset; cursor:pointer; color:var(--ag-ink-2); text-decoration:underline; }
.ag-map-two { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--ag-space-3); align-items:start; margin-top:var(--ag-space-2); }
.ag-map-two .ag-map-wrap { max-width:56rem; }
.ag-map-facts { display:grid; grid-template-columns:minmax(7rem,11rem) minmax(0,1fr); gap:var(--ag-space-1) var(--ag-space-3); margin:0; padding:var(--ag-space-3) var(--ag-space-3) var(--ag-space-1); font-size:var(--ag-type-small); }
.ag-map-facts--flush { padding-left:0; padding-right:0; }
.ag-map-facts dt { color:var(--ag-ink-3); }
.ag-map-facts dd { margin:0; color:var(--ag-ink); line-height:var(--ag-leading-body); }
.ag-map-pane { padding:var(--ag-space-1) var(--ag-space-3) var(--ag-space-3); }
.ag-map-pane[hidden] { display:none; }
.ag-map-note { font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); margin:var(--ag-space-2) 0 0; }
.ag-map-note b { color:var(--ag-ink); font-weight:var(--ag-weight-medium); }
.ag-map-rows { display:grid; }
.ag-map-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--ag-space-2); align-items:center; padding:var(--ag-space-2) 0; border-top:var(--ag-border-thin) solid var(--ag-line); }
.ag-map-row:first-child { border-top:0; }
.ag-map-row b { font-weight:var(--ag-weight-medium); }
.ag-map-row p { margin:calc(var(--ag-space-1) / 4) 0 0; font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); }
.ag-map-row small { display:block; font-size:var(--ag-type-caption); color:var(--ag-ink-3); margin-top:calc(var(--ag-space-1) / 4); }
.ag-map-row-do { display:flex; gap:var(--ag-space-1); flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.ag-map-flow { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-1); margin:var(--ag-space-1) 0; }
.ag-map-flow i { font-style:normal; color:var(--ag-ink-3); }
.ag-map-tier { font-size:var(--ag-type-label); letter-spacing:var(--ag-label-tracking); text-transform:uppercase; color:var(--ag-ink-3); }
.ag-map-tier[data-t="you"] { color:var(--ag-positive-label); }
.ag-map-tier[data-t="agoria"] { color:var(--ag-warning-label); }
.ag-map-add { all:unset; cursor:pointer; display:flex; align-items:center; gap:var(--ag-space-1); padding:var(--ag-space-2); margin-top:var(--ag-space-1); border:var(--ag-border-thin) dashed var(--ag-line-strong); border-radius:var(--ag-radius-md); color:var(--ag-ink-2); font-size:var(--ag-type-small); width:100%; box-sizing:border-box; }
.ag-map-add:hover { border-style:solid; color:var(--ag-ink); }
.ag-map-add:focus-visible { outline:2px solid var(--ag-focus); outline-offset:2px; }
/* Making a link or a concept: the steps, and what they will do. */
.ag-map-make { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--ag-space-3); align-items:start; margin-top:var(--ag-space-2); }
.ag-map-pair { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:var(--ag-space-2); align-items:center; margin:var(--ag-space-2) 0; }
.ag-map-end { border:var(--ag-border-thin) solid var(--ag-line-strong); border-radius:var(--ag-radius-md); padding:var(--ag-space-2); background:var(--ag-surface-raised); display:grid; gap:calc(var(--ag-space-1) / 2); }
.ag-map-end small { display:block; font-size:var(--ag-type-caption); color:var(--ag-ink-3); }
.ag-map-between { display:grid; justify-items:center; gap:calc(var(--ag-space-1) / 2); font-size:var(--ag-type-small); color:var(--ag-ink-2); text-align:center; }
.ag-map-between svg { width:calc(var(--ag-space-4) * 1.6); height:var(--ag-space-2); }
.ag-map-between svg path { fill:none; stroke:var(--ag-line-strong); stroke-width:1.5; stroke-dasharray:var(--ag-map-dash) var(--ag-map-gap); }
.ag-map-pick { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem,1fr)); gap:var(--ag-space-1); }
.ag-map-pick button { all:unset; cursor:pointer; box-sizing:border-box; padding:var(--ag-space-2); border:var(--ag-border-thin) solid var(--ag-line-strong); border-radius:var(--ag-radius-md); background:var(--ag-surface-raised); display:grid; gap:calc(var(--ag-space-1) / 2); }
.ag-map-pick button:hover { border-color:var(--ag-ink); }
.ag-map-pick button[aria-pressed="true"] { border-color:var(--ag-signal); box-shadow:inset 0 0 0 1px var(--ag-signal); }
.ag-map-pick button:focus-visible { outline:2px solid var(--ag-focus); outline-offset:2px; }
.ag-map-pick b { font-weight:var(--ag-weight-medium); }
.ag-map-pick small { font-size:var(--ag-type-caption); color:var(--ag-ink-3); line-height:var(--ag-leading-tight); }
.ag-map-do { list-style:none; margin:0; padding:0; display:grid; gap:var(--ag-space-1); }
.ag-map-do li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--ag-space-1); font-size:var(--ag-type-small); line-height:var(--ag-leading-body); color:var(--ag-ink-2); }
.ag-map-do li::before { content:"+"; font-weight:var(--ag-weight-medium); color:var(--ag-positive-label); }
.ag-map-do li[data-k="no"]::before { content:"–"; color:var(--ag-warning-label); }
.ag-map-do b { color:var(--ag-ink); font-weight:var(--ag-weight-medium); }
.ag-map-ask { margin:var(--ag-space-1) 0 0; padding:var(--ag-space-2); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface); font-size:var(--ag-type-small); color:var(--ag-ink-2); line-height:var(--ag-leading-body); white-space:pre-wrap; }
.ag-map-form { display:grid; gap:var(--ag-space-2); max-width:36rem; }
.ag-map-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(12rem,1fr)); gap:var(--ag-space-2); }
.ag-map-actions { display:flex; gap:var(--ag-space-1); flex-wrap:wrap; margin-top:var(--ag-space-2); }
.ag-map-samples { width:100%; margin-top:var(--ag-space-2); }
@media (min-width:1800px) { .ag-map-two { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } }
@media (max-width:980px) {
  .ag-map-make { grid-template-columns:minmax(0,1fr); }
  .ag-map-facts { grid-template-columns:minmax(0,1fr); gap:0; }
  .ag-map-facts dd { margin-bottom:var(--ag-space-1); }
}
@media (max-width:820px) {
  .ag-map-wrap { display:none; }
  .ag-map-listwrap { display:block; }
  .ag-map-next-row { grid-template-columns:auto minmax(0,1fr); }
  .ag-map-next-do { grid-column:1 / -1; justify-content:flex-start; }
  .ag-map-pair { grid-template-columns:minmax(0,1fr); }
  .ag-map-between { justify-items:start; }
  .ag-map-row { grid-template-columns:minmax(0,1fr); }
  .ag-map-row-do { justify-content:flex-start; }
  .ag-map-view { display:none; }
}

}

/* COMMAND (COMMAND-SPEC.md): its recipes are public/design/command.css, the sheet the Command app links beside /theme.css, so the
   pages that never draw a picture do not download one. Same rules as this sheet: tokens only, guarded by scripts/platform-design.ts. */

/* ── Explanations: one setting per person (src/prefs.ts EXPLAIN_LEVELS), on every page ───────────────────────────────────────────
   Text that explains is marked where it is drawn: data-says="full" (a paragraph) or data-says="hint" (a small note under a heading). The
   setting is ONE attribute: data-explain on <html> for the console's own page, and on the host of an embedded app (apps/embeddable.js
   keeps it in step), so a page nobody has written yet inherits it. full = as written; hints = a paragraph cut to one line;
   off = just the work. "Show them on this page, once" is html.x-once (data-says-once on a host).
   NEVER marked, so never hidden: a warning, a refusal, an error, an empty page that names what to do, anything a person must read
   before they agree, who will see it. scripts/explain.ts fails the build if one is. */
html[data-explain="hints"]:not(.x-once) [data-says="full"],
:host([data-explain="hints"]:not([data-says-once])) [data-says="full"] { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow:hidden; }
html[data-explain="off"]:not(.x-once) [data-says],
:host([data-explain="off"]:not([data-says-once])) [data-says],
/* The line under a block's heading says why the block is there: it is a note, drawn by the design system, so it obeys the setting without a mark on every page. */
html[data-explain="off"]:not(.x-once) .ag-block-head > p,
:host([data-explain="off"]:not([data-says-once])) .ag-block-head > p { display:none !important; }
/* The page's own way back to the words: only when they are being held back. */
.ag-x-pg { all:unset; cursor:pointer; margin-inline-start:var(--ag-space-2); display:none; place-items:center; inline-size:1.3rem; block-size:1.3rem; border-radius:50%; border:var(--ag-border-thin) solid var(--ag-line-strong); font:italic 700 12px/1 Georgia, serif; color:var(--ag-ink-3); vertical-align:middle; }
html[data-explain="hints"] .ag-x-pg, html[data-explain="off"] .ag-x-pg,
:host([data-explain="hints"]) .ag-x-pg, :host([data-explain="off"]) .ag-x-pg { display:inline-grid; }
.ag-x-pg:hover, .ag-x-pg:focus-visible { background:var(--ag-row-hover); color:var(--ag-ink); }
html.x-once .ag-x-pg, :host([data-says-once]) .ag-x-pg { background:var(--ag-ink); color:var(--ag-canvas); border-color:var(--ag-ink); }
/* A choice a page shares with the whole console (public/console-vars.js): one pill in the top bar that says what is chosen, and a short menu of the choices. */
.ag-cv-slot { display:inline-flex; gap:var(--ag-space-2); margin-inline-end:var(--ag-space-2); }
.ag-cv-slot[hidden] { display:none; }
.ag-cv { position:relative; display:inline-flex; }
.ag-cv-btn { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:var(--ag-space-1); padding:3px var(--ag-space-3); border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid var(--ag-line-strong); font-size:var(--ag-type-small); color:var(--ag-ink); background:var(--ag-surface-raised); }
.ag-cv-btn:hover, .ag-cv-btn:focus-visible { background:var(--ag-row-hover); }
.ag-cv-btn::after { content:""; inline-size:.45em; block-size:.45em; margin-inline-start:var(--ag-space-1); border-inline-end:1.5px solid currentColor; border-block-end:1.5px solid currentColor; transform:translateY(-.15em) rotate(45deg); }
.ag-cv-k { color:var(--ag-ink-3); }
.ag-cv-v { font-weight:var(--ag-weight-semibold); }
.ag-cv-menu { position:absolute; z-index:60; inset-block-start:calc(100% + 6px); inset-inline-end:0; min-inline-size:12rem; display:grid; gap:2px; padding:var(--ag-space-1); background:var(--ag-surface-raised); border:var(--ag-border-thin) solid var(--ag-line-strong); border-radius:var(--ag-radius-md); box-shadow:var(--ag-shadow-3); }
.ag-cv-menu[hidden] { display:none; }
.ag-cv-o { all:unset; cursor:pointer; padding:var(--ag-space-2) var(--ag-space-3); border-radius:var(--ag-radius-sm); font-size:var(--ag-type-small); color:var(--ag-ink); }
.ag-cv-o:hover, .ag-cv-o:focus-visible { background:var(--ag-row-hover); }
.ag-cv-o[aria-checked="true"] { font-weight:var(--ag-weight-semibold); background:var(--ag-signal-soft); }
/* The button in the top bar, and what it opens. */
.ag-explain { position:relative; display:inline-flex; margin-inline-end:var(--ag-space-2); }
.ag-explain-btn { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:3px var(--ag-space-2); border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid var(--ag-line-strong); font-size:var(--ag-type-small); color:var(--ag-ink-2); background:var(--ag-surface); }
.ag-explain-btn:hover, .ag-explain-btn:focus-visible { background:var(--ag-row-hover); }
.ag-explain-i { display:inline-grid; place-items:center; inline-size:1.15rem; block-size:1.15rem; border-radius:50%; border:var(--ag-border-thin) solid currentColor; font:italic 700 11px/1 Georgia, serif; }
.ag-explain-menu { position:absolute; z-index:60; inset-block-start:calc(100% + 6px); inset-inline-end:0; inline-size:19rem; display:grid; gap:var(--ag-space-1); padding:var(--ag-space-3); background:var(--ag-surface-raised); border:var(--ag-border-thin) solid var(--ag-line-strong); border-radius:var(--ag-radius-md); box-shadow:var(--ag-shadow-3); font-size:var(--ag-type-small); color:var(--ag-ink-2); }
.ag-explain-menu[hidden] { display:none; }
.ag-explain-menu > b { color:var(--ag-ink); font-family:var(--ag-font-display); font-size:var(--ag-type-body); }
.ag-explain-menu small { display:block; color:var(--ag-ink-3); font-size:var(--ag-type-caption); line-height:1.45; }
.ag-explain-menu label { display:grid; grid-template-columns:auto 1fr; gap:var(--ag-space-2); padding:6px 0; cursor:pointer; align-items:start; }
.ag-explain-menu label b { color:var(--ag-ink); }
.ag-explain-src { display:grid; grid-template-columns:auto 1fr; gap:var(--ag-space-2); padding:6px 0; cursor:pointer; align-items:start; border-block-start:var(--ag-border-thin) solid var(--ag-line); }
.ag-explain-src b { color:var(--ag-ink); }
.ag-explain-once { all:unset; cursor:pointer; color:var(--ag-info-label); text-decoration:underline; font-size:var(--ag-type-small); }
.ag-explain-fine { border-block-start:var(--ag-border-thin) solid var(--ag-line); padding-block-start:var(--ag-space-1); }
.ag-explain--float { position:fixed; z-index:50; inset-block-end:var(--ag-space-3); inset-inline-end:var(--ag-space-3); margin:0; }
.ag-explain--float .ag-explain-menu { inset-block-start:auto; inset-block-end:calc(100% + 6px); }
/* The design system's own explaining parts obey the setting by their class, so a page that draws one is covered without marking
   it: a saved view's blurb, a field's help, a page's intro. Only parts that never carry a warning, a refusal or a figure are here. */
html[data-explain="hints"]:not(.x-once) :is(.vblurb,.ag-field-help,.ip-intro,.ld-intro,.ag-site-note,.sync-lede),
:host([data-explain="hints"]:not([data-says-once])) :is(.vblurb,.ag-field-help,.ip-intro,.ld-intro,.ag-site-note,.sync-lede) { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow:hidden; }
html[data-explain="off"]:not(.x-once) :is(.vblurb,.ag-field-help,.ip-intro,.ld-intro,.ag-site-note,.sync-lede),
:host([data-explain="off"]:not([data-says-once])) :is(.vblurb,.ag-field-help,.ip-intro,.ld-intro,.ag-site-note,.sync-lede) { display:none !important; }

/* ── Workflows: where everything is (WORKFLOW-SPEC.md §8, apps/workflows.js), drawn first in mockups/graph/status.html ───────────────── */
.ag-wf-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:var(--ag-space-2); }
.ag-wf-kpi { display:grid; gap:2px; padding:var(--ag-space-2) var(--ag-space-3); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md); background:var(--ag-surface-raised); }
.ag-wf-kpi b { font-family:var(--ag-font-display); font-size:var(--ag-type-card); font-weight:var(--ag-weight-medium); font-variant-numeric:tabular-nums; }
.ag-wf-kpi span { font-size:var(--ag-type-caption); color:var(--ag-ink-2); }
.ag-wf-kpi small { font-size:var(--ag-type-caption); color:var(--ag-ink-3); }
.ag-wf-kpi[data-alert] { border-color:var(--ag-warning); }
.ag-wf-kpis--how .ag-wf-kpi { align-content:start; }
.ag-wf-kpis--how .ag-wf-kpi b { font-size:var(--ag-type-small); }
.ag-wf-kpi[data-alert] b { color:var(--ag-warning-label); }
.ag-wf-bar { display:flex; block-size:10px; border-radius:var(--ag-radius-pill); overflow:hidden; background:var(--ag-surface-inset); min-inline-size:7rem; }
.ag-wf-bar i { display:block; block-size:100%; }
.ag-wf-bar i[data-tone="waiting"], .ag-wf-dot[data-tone="waiting"] { background:var(--ag-info); }
.ag-wf-bar i[data-tone="working"], .ag-wf-dot[data-tone="working"] { background:var(--ag-signal); }
.ag-wf-bar i[data-tone="holding"], .ag-wf-dot[data-tone="holding"] { background:var(--ag-warning); }
.ag-wf-bar i[data-tone="finished"], .ag-wf-dot[data-tone="finished"] { background:var(--ag-positive); }
.ag-wf-bar i[data-tone="dropped"], .ag-wf-dot[data-tone="dropped"] { background:var(--ag-ink-3); }
.ag-wf-dot { display:inline-block; inline-size:8px; block-size:8px; border-radius:50%; margin-inline-end:6px; }
.ag-wf-mx tbody tr[data-w] { cursor:pointer; }
.ag-wf-mx tbody tr[data-w]:hover td { background:var(--ag-surface-inset); }
.ag-wf-mx tbody tr[data-w][aria-selected="true"] td { background:var(--ag-signal-soft); }
.ag-wf-mx small { display:block; color:var(--ag-ink-3); font-size:var(--ag-type-caption); }
.ag-wf-mx tr.ag-wf-grp td { font-size:var(--ag-type-caption); letter-spacing:.06em; text-transform:uppercase; color:var(--ag-ink-3); font-weight:var(--ag-weight-semibold); background:transparent; }
/* Every stage is shown, in columns of one width: a strip of eight is five and three, not seven and one stretched across a line. */
.ag-wf-strip { display:grid; grid-template-columns:repeat(auto-fill, minmax(10.5rem, 1fr)); gap:var(--ag-space-1); padding-block:2px var(--ag-space-1); }
.ag-wf-stage { all:unset; box-sizing:border-box; cursor:pointer; flex:1 0 8.2rem; display:grid; align-content:start; gap:1px; padding:var(--ag-space-1) var(--ag-space-2); border:var(--ag-border-thin) solid var(--ag-line-strong); border-block-start-width:4px; border-radius:var(--ag-radius-md); background:var(--ag-surface-raised); }
.ag-wf-stage[data-tone="waiting"] { border-block-start-color:var(--ag-info); }
.ag-wf-stage[data-tone="working"] { border-block-start-color:var(--ag-signal); }
.ag-wf-stage[data-tone="holding"] { border-block-start-color:var(--ag-warning); }
.ag-wf-stage[data-tone="finished"] { border-block-start-color:var(--ag-positive); }
.ag-wf-stage[data-tone="dropped"] { border-block-start-color:var(--ag-ink-3); }
.ag-wf-stage:hover, .ag-wf-stage:focus-visible { border-color:var(--ag-ink); }
.ag-wf-stage[aria-pressed="true"] { border-color:var(--ag-ink); box-shadow:0 0 0 1px var(--ag-ink); background:var(--ag-signal-soft); }
.ag-wf-stage b { font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); color:var(--ag-ink); }
.ag-wf-stage .n { font-size:var(--ag-type-card); font-weight:var(--ag-weight-medium); font-variant-numeric:tabular-nums; color:var(--ag-ink); }
.ag-wf-stage .s { font-size:var(--ag-type-caption); color:var(--ag-ink-3); font-variant-numeric:tabular-nums; }
.ag-wf-stage .l { font-size:var(--ag-type-caption); color:var(--ag-warning-label); font-weight:var(--ag-weight-semibold); }
.ag-wf-need { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--ag-space-1) var(--ag-space-2); padding-block:var(--ag-space-1); border-block-start:var(--ag-border-thin) solid var(--ag-line); align-items:center; font-size:var(--ag-type-small); }
.ag-wf-need:first-child { border-block-start:0; }
.ag-wf-need small { display:block; color:var(--ag-ink-3); font-size:var(--ag-type-caption); }
.ag-wf-ev { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--ag-space-1) var(--ag-space-2); padding-block:6px; border-block-start:var(--ag-border-thin) dashed var(--ag-line); font-size:var(--ag-type-small); align-items:baseline; }
.ag-wf-ev:first-child { border-block-start:0; }
.ag-wf-ev code { grid-column:1 / -1; font-size:var(--ag-type-caption); color:var(--ag-ink-3); font-family:var(--ag-font-mono); }
.ag-wf-ev time { color:var(--ag-ink-3); font-size:var(--ag-type-caption); white-space:nowrap; }
/* The Flow tab's picture (public/apps/flow-form.js): the map's node and edge recipes, coloured by what a state means and drawn by who makes a move. */
.ag-wf-pic .ag-map-node rect { stroke-width:2; }
.ag-wf-pic .ag-map-node[data-tone="waiting"] rect { stroke:var(--ag-info); }
.ag-wf-pic .ag-map-node[data-tone="working"] rect { stroke:var(--ag-signal); }
.ag-wf-pic .ag-map-node[data-tone="holding"] rect { stroke:var(--ag-warning); }
.ag-wf-pic .ag-map-node[data-tone="finished"] rect { stroke:var(--ag-positive); }
.ag-wf-pic .ag-map-node[data-tone="dropped"] rect { stroke:var(--ag-ink-3); }
.ag-wf-pic .ag-map-node[aria-current="true"] rect, .ag-wf-pic .ag-wf-num[aria-current="true"] circle { stroke:var(--ag-ink); stroke-width:3; }
.ag-wf-pic .ag-map-edge { opacity:.85; }
.ag-wf-pic .ag-map-edge[data-by="rule"] { stroke-dasharray:7 3; }
.ag-wf-pic .ag-map-edge[data-by="event"] { stroke-dasharray:2 3; stroke:var(--ag-info); }
.ag-wf-pic .ag-map-edge[data-by="itself"], .ag-wf-pic .ag-map-edge[data-by="fork"] { stroke-dasharray:9 3 2 3; stroke:var(--ag-signal); }
.ag-wf-num { cursor:pointer; }
.ag-wf-num circle { fill:var(--ag-surface-raised); stroke:var(--ag-line-strong); }
.ag-wf-num text { fill:var(--ag-ink); font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); }
.ag-wf-pic .ag-wf-late { fill:var(--ag-warning-label); font-weight:var(--ag-weight-semibold); }
.ag-wf-tries { margin:var(--ag-space-1) 0 0; padding:var(--ag-space-2); border-radius:var(--ag-radius-md); background:var(--ag-surface-inset); font-size:var(--ag-type-small); }
.ag-wf-mean { display:inline-flex; align-items:center; gap:6px; padding:1px var(--ag-space-2); border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid var(--ag-line-strong); color:var(--ag-ink-2); font-size:var(--ag-type-caption); }
.ag-wf-ev-chip { display:inline-block; max-inline-size:100%; overflow-wrap:anywhere; padding:1px var(--ag-space-2); border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid var(--ag-line-strong); background:var(--ag-surface-inset); color:var(--ag-ink-2); font-family:var(--ag-font-mono); font-size:var(--ag-type-caption); }
.ag-bf-spark { vertical-align:middle; }

/* The map's Workflows and Events parts are measured as a working page is, so their two columns fold to one on a narrow screen. */
:host(agoria-bizflows), :host(agoria-event-map) { container-type:inline-size; }
.ag-bf-tick { display:inline-flex; align-items:center; gap:var(--ag-space-1); }
.ag-bf-tick input { inline-size:auto; margin:0; }
.ag-bf-secret code { overflow-wrap:anywhere; }
.ag-bf-stack td small { display:block; }
.ag-bf-cf small { display:block; color:var(--ag-ink-3); font-size:var(--ag-type-caption); }
.ag-bf-spark path { fill:none; stroke:var(--ag-signal); stroke-width:1.5; }
.ag-bf-spark path:first-child { fill:var(--ag-signal-soft); stroke:none; }

/* The business workflow designer (BUSINESS-WORKFLOWS-SPEC.md §10, public/apps/bizflow-designer.js), as the approved mockup draws it: the
   whole window; blocks on a canvas in a lane for each who; the building blocks left, what is picked right, Check it / Try it below. */
.ag-fd { --fd-2:color-mix(in srgb,var(--ag-ink) 74%,var(--ag-canvas)); --fd-3:color-mix(in srgb,var(--ag-ink) 58%,var(--ag-canvas)); --fd-edge:color-mix(in srgb,var(--ag-ink) 44%,var(--ag-canvas)); --fd-line:color-mix(in srgb,var(--ag-ink) 13%,var(--ag-canvas)); --fd-tint:color-mix(in srgb,var(--ag-ink) 4%,var(--ag-canvas));
  position:fixed; inset:0; z-index:60; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto; background:var(--ag-canvas); color:var(--ag-ink); font-family:var(--ag-font-interface); font-size:var(--ag-type-small); }
.ag-fd *, .ag-fd *::before, .ag-fd *::after { box-sizing:border-box; }
.ag-fd-ico { inline-size:1em; block-size:1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ag-fd-top, .ag-fd-strip, .ag-fd-dbar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ag-space-2) var(--ag-space-3); padding:var(--ag-space-2) var(--ag-space-4); min-inline-size:0; }
.ag-fd-top { border-block-end:var(--ag-border-thin) solid var(--fd-line); background:var(--ag-surface-raised); flex-wrap:nowrap; }
.ag-fd-strip { padding-block:var(--ag-space-1); border-block-end:var(--ag-border-thin) solid var(--fd-line); color:var(--fd-2); }
.ag-fd-back, .ag-fd-ib, .ag-fd-link, .ag-fd-lh, .ag-fd-kb, .ag-fd-lanerow, .ag-fd-add, .ag-fd-x, .ag-fd-elab, .ag-fd-seg button, .ag-fd-tabs button, .ag-fd-zoom button { all:unset; box-sizing:border-box; cursor:pointer; }
.ag-fd-back { color:var(--fd-2); padding:var(--ag-space-1) var(--ag-space-2); border-radius:var(--ag-radius-sm); white-space:nowrap; }
.ag-fd-back:hover, .ag-fd-ib:hover, .ag-fd-lanerow:hover, .ag-fd-kb:hover { background:var(--fd-tint); color:var(--ag-ink); }
.ag-fd-sep { inline-size:var(--ag-border-thin); align-self:stretch; background:var(--fd-line); }
.ag-fd-title { min-inline-size:8rem; flex:0 1 26rem; font:inherit; font-size:var(--ag-type-body-lg); font-weight:var(--ag-weight-semibold); color:var(--ag-ink); background:transparent; border:var(--ag-border-thin) solid transparent; border-radius:var(--ag-radius-sm); padding:var(--ag-space-1); }
.ag-fd-title:hover, .ag-fd-title:focus { background:var(--fd-tint); border-color:var(--fd-line); }
.ag-fd-ver, .ag-fd-q { color:var(--fd-3); font-size:var(--ag-type-caption); }
.ag-fd-ver, .ag-fd-top .ag-status { white-space:nowrap; flex:none; }
.ag-fd-grow { flex:1 1 auto; }
.ag-fd-seg, .ag-fd-tabs { display:inline-flex; flex:none; padding:calc(var(--ag-space-1) / 2); border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid var(--fd-line); background:var(--ag-surface); }
.ag-fd-seg button, .ag-fd-tabs button { padding:var(--ag-space-1) var(--ag-space-3); border-radius:var(--ag-radius-pill); color:var(--fd-2); white-space:nowrap; text-align:center; }
.ag-fd-seg button[aria-pressed="true"] { background:var(--ag-ink); color:var(--ag-canvas); font-weight:var(--ag-weight-medium); }
.ag-fd-tabs { display:flex; border-radius:var(--ag-radius-md); background:var(--fd-tint); border:0; margin-block-end:var(--ag-space-2); }
.ag-fd-tabs button { flex:1; border-radius:var(--ag-radius-sm); font-size:var(--ag-type-caption); }
.ag-fd-tabs button[aria-selected="true"] { background:var(--ag-surface-raised); color:var(--ag-ink); font-weight:var(--ag-weight-semibold); box-shadow:var(--ag-shadow-1); }
.ag-fd-tabs--inline { display:inline-flex; margin:0; }
.ag-fd-count { display:inline-grid; place-items:center; min-inline-size:1.2rem; block-size:1.2rem; margin-inline-start:var(--ag-space-1); border-radius:var(--ag-radius-pill); background:var(--ag-warning); color:var(--ag-warning-contrast); font-size:var(--ag-type-label); }
.ag-fd-field { display:inline-flex; align-items:center; gap:var(--ag-space-2); white-space:nowrap; }
.ag-fd-field .ag-select { inline-size:auto; min-block-size:0; padding-block:calc(var(--ag-space-1) / 2); }
.ag-fd-livesum { display:none; align-items:center; gap:var(--ag-space-1); color:var(--ag-ink); font-weight:var(--ag-weight-medium); }
.ag-fd[data-mode="live"] .ag-fd-livesum { display:inline-flex; }
.ag-fd-ib { display:inline-grid; place-items:center; inline-size:1.9rem; block-size:1.9rem; border-radius:var(--ag-radius-sm); color:var(--fd-2); }
.ag-fd-ib[disabled] { opacity:.4; pointer-events:none; }
.ag-fd-zoom { display:inline-flex; align-items:center; border:var(--ag-border-thin) solid var(--fd-line); border-radius:var(--ag-radius-sm); background:var(--ag-surface-raised); }
.ag-fd-zoom button { padding:0 var(--ag-space-2); color:var(--fd-2); }
.ag-fd-zoom output { min-inline-size:2.6rem; text-align:center; font-variant-numeric:tabular-nums; color:var(--fd-2); font-size:var(--ag-type-caption); }
.ag-fd-main { display:grid; grid-template-columns:15rem minmax(0,1fr) 21rem; min-block-size:0; }
.ag-fd[data-insp="closed"] .ag-fd-main { grid-template-columns:15rem minmax(0,1fr) 0; }
.ag-fd[data-insp="closed"] .ag-fd-insp { display:none; }
.ag-fd-pal { overflow:auto; padding:var(--ag-space-3) var(--ag-space-2) var(--ag-space-6); border-inline-end:var(--ag-border-thin) solid var(--fd-line); background:var(--ag-surface); }
.ag-fd-search { inline-size:100%; margin-block-end:var(--ag-space-1); }
.ag-fd-hint { margin:var(--ag-space-1) var(--ag-space-1) var(--ag-space-2); color:var(--fd-3); font-size:var(--ag-type-caption); line-height:1.4; }
.ag-fd-ph { margin:var(--ag-space-3) var(--ag-space-1) var(--ag-space-1); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); letter-spacing:.07em; text-transform:uppercase; color:var(--fd-3); }
.ag-fd-ph--gap { margin-block-start:var(--ag-space-5); }
.ag-fd-item { display:grid; grid-template-columns:1.9rem 1fr; gap:var(--ag-space-2); align-items:center; padding:var(--ag-space-1); border-radius:var(--ag-radius-sm); border:var(--ag-border-thin) solid transparent; cursor:grab; user-select:none; }
.ag-fd-item:hover, .ag-fd-ev:hover { background:var(--ag-surface-raised); border-color:var(--fd-line); }
.ag-fd-item b { display:block; font-weight:var(--ag-weight-semibold); }
.ag-fd-item small { display:block; color:var(--fd-3); font-size:var(--ag-type-caption); line-height:1.3; }
.ag-fd-ev { display:flex; align-items:center; gap:var(--ag-space-2); padding:var(--ag-space-1); border-radius:var(--ag-radius-sm); border:var(--ag-border-thin) solid transparent; cursor:grab; }
.ag-fd-ev .ag-fd-ico { color:var(--ag-warning-ink); }
.ag-fd-ev em { margin-inline-start:auto; font-style:normal; font-size:var(--ag-type-label); color:var(--fd-3); }
.ag-fd-krow { display:flex; align-items:center; }
.ag-fd-kb, .ag-fd-lanerow { flex:1; display:grid; grid-template-columns:auto 1fr; gap:0 var(--ag-space-2); align-items:center; padding:var(--ag-space-1); border-radius:var(--ag-radius-sm); border:var(--ag-border-thin) solid transparent; }
.ag-fd-kb i, .ag-fd-k i { display:inline-block; inline-size:.6rem; block-size:.6rem; border-radius:50%; background:var(--kc); flex:none; }
.ag-fd-kb small { grid-column:2; color:var(--fd-3); font-size:var(--ag-type-caption); }
.ag-fd-kb[aria-pressed="true"], .ag-fd-lanerow[aria-pressed="true"] { background:var(--ag-surface-raised); border-color:var(--kc,var(--ag-signal)); }
.ag-fd-add { display:block; padding:var(--ag-space-1); color:var(--ag-signal-ink); font-weight:var(--ag-weight-medium); font-size:var(--ag-type-caption); }
.ag-fd-add:hover, .ag-fd-link:hover { text-decoration:underline; }
.ag-fd-x { display:inline-grid; place-items:center; inline-size:1.4rem; block-size:1.4rem; border-radius:var(--ag-radius-sm); color:var(--fd-3); }
.ag-fd-x:hover { color:var(--ag-danger-ink); background:var(--fd-tint); }
[data-k="1"] { --kc:var(--ag-cat-1); } [data-k="2"] { --kc:var(--ag-cat-2); } [data-k="3"] { --kc:var(--ag-cat-3); } [data-k="4"] { --kc:var(--ag-cat-4); } [data-k="5"] { --kc:var(--ag-cat-5); } [data-k="6"] { --kc:var(--ag-cat-6); }
.ag-fd-k { display:inline-flex; align-items:center; gap:var(--ag-space-1); color:var(--fd-2); font-size:var(--ag-type-caption); font-weight:var(--ag-weight-normal); white-space:nowrap; }
.ag-fd-av { display:inline-grid; place-items:center; inline-size:1.6rem; block-size:1.6rem; flex:none; border-radius:50%; background:color-mix(in srgb,var(--ag-info) 16%,var(--ag-surface-raised)); color:var(--ag-info-ink); font-weight:var(--ag-weight-semibold); font-size:var(--ag-type-caption); }
.ag-fd-av.is-sys { border-radius:var(--ag-radius-sm); background:var(--ag-ink); color:var(--ag-canvas); }
.ag-fd-av.is-org { border-radius:var(--ag-radius-sm); background:color-mix(in srgb,var(--ag-cat-5) 18%,var(--ag-surface-raised)); color:var(--ag-ink); }
/* the canvas */
.ag-fd-stage { position:relative; display:flex; flex-direction:column; min-inline-size:0; min-block-size:0; }
.ag-fd-scroll { flex:1; overflow:auto; background-color:var(--ag-canvas); background-image:radial-gradient(circle,color-mix(in srgb,var(--ag-ink) 12%,transparent) 1px,transparent 1.3px); background-size:16px 16px; }
.ag-fd[data-mode="words"] .ag-fd-scroll { display:none; }
.ag-fd-canvas { position:relative; inline-size:var(--w); block-size:var(--h); margin-inline:auto; }
.ag-fd-canvas.is-drop { outline:var(--ag-border-strong) dashed var(--ag-signal); outline-offset:-4px; }
.ag-fd-lanehead { position:sticky; inset-block-start:0; z-index:6; display:flex; block-size:56px; background:color-mix(in srgb,var(--ag-canvas) 94%,transparent); border-block-end:var(--ag-border-thin) solid var(--fd-line); }
.ag-fd-lh { inline-size:184px; flex:none; display:flex; align-items:center; gap:var(--ag-space-2); padding:var(--ag-space-2); border-inline-start:var(--ag-border-thin) solid var(--fd-line); min-inline-size:0; }
.ag-fd-lh:first-child { border-inline-start:0; }
.ag-fd-lh[aria-pressed="true"] { background:var(--ag-signal-soft); }
.ag-fd-lh b, .ag-fd-lh small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-fd-lh b { font-size:var(--ag-type-caption); }
.ag-fd-lh small { color:var(--fd-3); font-size:var(--ag-type-label); }
.ag-fd-lane { position:absolute; inset-block:0; inset-inline-start:var(--x); inline-size:184px; border-inline-start:var(--ag-border-thin) dashed var(--fd-line); }
.ag-fd-lane.is-alt { background:color-mix(in srgb,var(--ag-ink) 2.2%,transparent); }
.ag-fd-edges { position:absolute; inset-inline-start:0; inset-block-start:0; z-index:1; overflow:visible; pointer-events:none; }
.ag-fd-edge { fill:none; stroke:var(--fd-edge); stroke-width:1.5; stroke-linejoin:round; }
.ag-fd-edge.is-back, .ag-fd-edge.is-timer, .ag-fd-edge.is-temp { stroke-dasharray:5 4; }
.ag-fd-edge.is-timer { stroke:var(--ag-warning); }
.ag-fd-edge.is-temp { stroke:var(--ag-signal); stroke-width:2; }
.ag-fd-edge.is-sel { stroke:var(--ag-signal); stroke-width:2.5; }
.ag-fd-hit { fill:none; stroke:transparent; stroke-width:12; pointer-events:stroke; cursor:pointer; }
.ag-fd-arrowhead { fill:var(--fd-edge); }
.ag-fd-arrowhead.is-time { fill:var(--ag-warning); }
.ag-fd .is-dim { opacity:.18; }
.ag-fd-elab { position:absolute; inset-inline-start:var(--x); inset-block-start:var(--y); z-index:3; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:var(--ag-space-1); padding:0 var(--ag-space-2); border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid var(--fd-line); background:var(--ag-surface-raised); color:var(--fd-2); font-size:var(--ag-type-label); font-weight:var(--ag-weight-medium); line-height:1.6; white-space:nowrap; }
.ag-fd-elab.is-ev .ag-fd-ico { color:var(--ag-warning-ink); }
.ag-fd-elab.is-no { color:var(--ag-danger-ink); border-color:color-mix(in srgb,var(--ag-danger) 35%,var(--ag-canvas)); }
.ag-fd-elab.is-yes { color:var(--ag-positive-ink); border-color:color-mix(in srgb,var(--ag-positive) 35%,var(--ag-canvas)); }
.ag-fd-elab.is-time { color:var(--ag-warning-ink); border-color:color-mix(in srgb,var(--ag-warning) 45%,var(--ag-canvas)); }
.ag-fd-elab.is-sel { border-color:var(--ag-signal); box-shadow:0 0 0 var(--ag-border-thin) var(--ag-signal); }
.ag-fd-node { position:absolute; inset-inline-start:var(--x); inset-block-start:var(--y); z-index:2; transform:translate(-50%,-50%); outline:none; touch-action:none; }
.ag-fd-node:focus-visible .ag-fd-card, .ag-fd-node:focus-visible .ag-fd-shape { outline:var(--ag-border-strong) solid var(--ag-focus); outline-offset:2px; }
.ag-fd-card { position:relative; inline-size:156px; padding:var(--ag-space-2) var(--ag-space-2) var(--ag-space-2) var(--ag-space-3); border:var(--ag-border-thin) solid color-mix(in srgb,var(--ag-ink) 20%,var(--ag-canvas)); border-radius:var(--ag-radius-md); background:var(--ag-surface-raised); box-shadow:inset 3px 0 0 var(--tone),var(--ag-shadow-1); cursor:pointer; }
.ag-fd-card:hover { border-color:var(--fd-edge); }
.ag-fd-node.is-sel .ag-fd-card, .ag-fd-node.is-sel .ag-fd-shape { box-shadow:inset 3px 0 0 var(--tone,transparent),0 0 0 2px var(--ag-canvas),0 0 0 4px var(--ag-signal); }
.ag-fd-t-signal { --tone:var(--ag-signal); } .ag-fd-t-info { --tone:var(--ag-info); } .ag-fd-t-ai { --tone:var(--ag-cat-4); } .ag-fd-t-ink { --tone:var(--ag-ink); } .ag-fd-t-warning { --tone:var(--ag-warning); } .ag-fd-t-danger { --tone:var(--ag-danger); }
.ag-fd-node.is-wait .ag-fd-card { border-style:dashed; border-color:color-mix(in srgb,var(--ag-warning) 60%,var(--ag-canvas)); background:color-mix(in srgb,var(--ag-warning) 5%,var(--ag-surface-raised)); }
.ag-fd-node.is-rule .ag-fd-card { border:3px double color-mix(in srgb,var(--ag-ink) 30%,var(--ag-canvas)); }
.ag-fd-type { display:flex; align-items:center; gap:var(--ag-space-1); overflow:hidden; white-space:nowrap; color:var(--fd-3); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); letter-spacing:.06em; text-transform:uppercase; }
.ag-fd-ti { display:inline-grid; place-items:center; inline-size:1.2rem; block-size:1.2rem; flex:none; border-radius:var(--ag-radius-sm); color:var(--tone); background:color-mix(in srgb,var(--tone) 15%,var(--ag-surface-raised)); }
.ag-fd-nm { margin:var(--ag-space-1) 0; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); line-height:1.28; }
.ag-fd-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ag-space-1) var(--ag-space-2); }
.ag-fd-badge { display:inline-flex; align-items:center; gap:calc(var(--ag-space-1) / 2); padding:0 var(--ag-space-1); border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid var(--fd-line); color:var(--fd-2); font-size:var(--ag-type-label); white-space:nowrap; }
.ag-fd-timer { position:absolute; inset-inline-end:14px; inset-block-end:-12px; display:grid; place-items:center; inline-size:24px; block-size:24px; border-radius:50%; border:1.5px dashed var(--ag-warning); background:var(--ag-surface-raised); color:var(--ag-warning-ink); z-index:3; }
.ag-fd-shape { position:relative; display:grid; place-items:center; inline-size:40px; block-size:40px; border-radius:50%; cursor:pointer; }
.ag-fd-s-start .ag-fd-shape { border:2px solid var(--ag-positive); background:color-mix(in srgb,var(--ag-positive) 12%,var(--ag-surface-raised)); color:var(--ag-positive-ink); font-size:var(--ag-type-body); }
.ag-fd-s-end .ag-fd-shape { border:4px solid var(--ag-ink); background:var(--ag-surface-raised); }
.ag-fd-s-end.is-drop .ag-fd-shape { border-color:var(--ag-danger); color:var(--ag-danger-ink); }
.ag-fd-s-dia .ag-fd-shape { border-radius:0; }
.ag-fd-s-dia .ag-fd-shape::before { content:""; position:absolute; inset:6px; transform:rotate(45deg); border:1.5px solid var(--ag-ink); border-radius:var(--ag-radius-xs); background:var(--ag-surface-raised); }
.ag-fd-node.is-sel.ag-fd-s-dia .ag-fd-shape { box-shadow:none; }
.ag-fd-node.is-sel.ag-fd-s-dia .ag-fd-shape::before { box-shadow:0 0 0 2px var(--ag-canvas),0 0 0 4px var(--ag-signal); }
.ag-fd-shape em { position:relative; font-style:normal; font-weight:var(--ag-weight-bold); font-size:var(--ag-type-body); }
.ag-fd-lab { position:absolute; inset-inline-start:calc(100% + 8px); inset-block-start:50%; transform:translateY(-50%); inline-size:max-content; max-inline-size:8.5rem; font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); line-height:1.3; cursor:pointer; }
.ag-fd-lab small { display:block; color:var(--fd-3); font-size:var(--ag-type-label); letter-spacing:.06em; text-transform:uppercase; }
.ag-fd-evs { display:block; color:var(--fd-2); font-weight:var(--ag-weight-normal); }
.ag-fd-evs .ag-fd-ico { color:var(--ag-warning-ink); }
.ag-fd-s-dia .ag-fd-lab { inset-block:auto calc(50% + 5px); transform:none; }
.ag-fd-s-end .ag-fd-lab { inset-inline-start:50%; inset-block:calc(100% + 4px) auto; transform:translateX(-50%); text-align:center; }
.ag-fd-port { position:absolute; inset-inline-start:50%; inset-block-end:-6px; inline-size:12px; block-size:12px; margin-inline-start:-6px; border-radius:50%; border:2px solid var(--ag-signal); background:var(--ag-surface-raised); cursor:crosshair; opacity:0; z-index:4; }
.ag-fd-node:hover .ag-fd-port, .ag-fd-node.is-sel .ag-fd-port { opacity:1; }
.ag-fd-s-start .ag-fd-port, .ag-fd-s-dia .ag-fd-port { inset-block-end:-8px; }
.ag-fd-live { display:none; position:absolute; inset-block-start:-9px; inset-inline-end:-8px; z-index:4; padding:0 var(--ag-space-2); border-radius:var(--ag-radius-pill); background:var(--ag-info); color:var(--ag-info-contrast); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); line-height:1.6; white-space:nowrap; }
.ag-fd-live.is-late { background:var(--ag-warning); color:var(--ag-warning-contrast); }
.ag-fd-live.is-done { background:var(--ag-surface-raised); color:var(--fd-2); border:var(--ag-border-thin) solid var(--fd-line); }
.ag-fd[data-mode="live"] .ag-fd-live { display:block; }
.ag-fd-shape .ag-fd-live { inset-inline:28px auto; inset-block-start:-12px; }
.ag-fd-empty { position:absolute; inset-inline:var(--ag-space-5); inset-block-start:120px; padding:var(--ag-space-5); border:var(--ag-border-strong) dashed var(--fd-line); border-radius:var(--ag-radius-lg); text-align:center; color:var(--fd-3); }
.ag-fd-words { display:none; flex:1; overflow:auto; padding:var(--ag-space-5) var(--ag-space-6); }
.ag-fd[data-mode="words"] .ag-fd-words { display:block; }
.ag-fd-ww { margin:0; padding:0; max-inline-size:48rem; list-style:none; counter-reset:w; }
.ag-fd-ww > li { counter-increment:w; position:relative; padding:var(--ag-space-2) 0 var(--ag-space-2) var(--ag-space-6); border-block-start:var(--ag-border-thin) solid var(--fd-line); line-height:1.5; }
.ag-fd-ww > li::before { content:counter(w); position:absolute; inset-inline-start:0; inset-block-start:var(--ag-space-2); display:grid; place-items:center; inline-size:1.5rem; block-size:1.5rem; border-radius:50%; background:var(--fd-tint); font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); }
.ag-fd-link { color:var(--ag-ink); font-weight:var(--ag-weight-semibold); text-decoration:underline; text-decoration-color:var(--fd-line); text-underline-offset:2px; }
/* the panel */
.ag-fd-insp { overflow:auto; padding:var(--ag-space-3) var(--ag-space-4) var(--ag-space-6); border-inline-start:var(--ag-border-thin) solid var(--fd-line); background:var(--ag-surface-raised); }
.ag-fd-ih { display:flex; align-items:center; gap:var(--ag-space-2); }
.ag-fd-ik { flex:1; color:var(--fd-3); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); letter-spacing:.07em; text-transform:uppercase; }
.ag-fd-ititle { inline-size:100%; margin:var(--ag-space-2) 0; font-size:var(--ag-type-body); font-weight:var(--ag-weight-semibold); }
.ag-fd-say { margin-block-end:var(--ag-space-1); padding:var(--ag-space-2) var(--ag-space-3); border-radius:var(--ag-radius-md); border:var(--ag-border-thin) solid color-mix(in srgb,var(--ag-signal) 22%,var(--ag-canvas)); background:color-mix(in srgb,var(--ag-signal) 9%,var(--ag-surface-raised)); line-height:1.5; }
.ag-fd-say small { display:block; color:var(--fd-3); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); letter-spacing:.07em; text-transform:uppercase; }
.ag-fd-sec { margin-block-start:var(--ag-space-3); padding-block-start:var(--ag-space-2); border-block-start:var(--ag-border-thin) solid var(--fd-line); }
.ag-fd-sec h4 { margin:0 0 var(--ag-space-2); font-size:var(--ag-type-caption); font-weight:var(--ag-weight-semibold); }
.ag-fd-row { display:grid; grid-template-columns:6rem minmax(0,1fr); gap:var(--ag-space-2); align-items:baseline; margin:var(--ag-space-2) 0; }
.ag-fd-row > span:first-child { color:var(--fd-3); }
.ag-fd-row .ag-input, .ag-fd-row .ag-select, .ag-fd-li .ag-input, .ag-fd-sec .ag-select { inline-size:100%; min-inline-size:0; }
.ag-fd-row input[type="number"] { inline-size:4.5rem; margin-inline-end:var(--ag-space-1); }
.ag-fd-row input[type="number"] + .ag-select { inline-size:auto; }
.ag-fd-li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--ag-space-2); align-items:center; margin:var(--ag-space-1) 0; padding:var(--ag-space-1) var(--ag-space-2); border-radius:var(--ag-radius-sm); border:var(--ag-border-thin) solid var(--fd-line); background:var(--ag-canvas); }
.ag-fd-li > span { display:grid; gap:var(--ag-space-1); }
.ag-fd-expr { display:grid; gap:var(--ag-space-1); }
.ag-fd-sec .ag-map-row { display:block; }
.ag-fd-pill { display:inline-flex; padding:0 var(--ag-space-2); border-radius:var(--ag-radius-pill); background:var(--fd-tint); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); white-space:nowrap; }
.ag-fd-note { margin-block-start:var(--ag-space-3); padding:var(--ag-space-2) var(--ag-space-3); border-radius:var(--ag-radius-sm); line-height:1.45; }
.ag-fd-note.is-info { background:var(--fd-tint); border:var(--ag-border-thin) solid var(--fd-line); }
.ag-fd-note.is-warn { background:color-mix(in srgb,var(--ag-warning) 12%,var(--ag-surface-raised)); border:var(--ag-border-thin) solid color-mix(in srgb,var(--ag-warning) 35%,var(--ag-canvas)); }
.ag-fd-runrow { display:flex; justify-content:space-between; gap:var(--ag-space-2); padding:var(--ag-space-1) 0; font-weight:var(--ag-weight-normal); }
.ag-fd-foot { display:flex; gap:var(--ag-space-2); margin-block-start:var(--ag-space-4); padding-block-start:var(--ag-space-3); border-block-start:var(--ag-border-thin) solid var(--fd-line); }
.ag-fd-g { position:relative; display:inline-grid; place-items:center; inline-size:1.9rem; block-size:1.6rem; flex:none; }
.ag-fd-g--start::before, .ag-fd-g--end::before { content:""; inline-size:1.1rem; block-size:1.1rem; border-radius:50%; border:2px solid var(--ag-positive); background:color-mix(in srgb,var(--ag-positive) 12%,var(--ag-surface-raised)); }
.ag-fd-g--end::before { border:4px solid var(--ag-ink); background:none; }
.ag-fd-g--end.is-drop::before { border-color:var(--ag-danger); }
.ag-fd-g--dia::before { content:""; position:absolute; inline-size:.9rem; block-size:.9rem; transform:rotate(45deg); border:1.5px solid var(--ag-ink); border-radius:var(--ag-radius-xs); background:var(--ag-surface-raised); }
.ag-fd-g--dia em { position:relative; font-style:normal; font-size:var(--ag-type-label); font-weight:var(--ag-weight-bold); }
.ag-fd-g--card { inline-size:1.75rem; block-size:1.25rem; border-radius:var(--ag-radius-sm); border:var(--ag-border-thin) solid color-mix(in srgb,var(--ag-ink) 24%,var(--ag-canvas)); background:var(--ag-surface-raised); box-shadow:inset 3px 0 0 var(--tone); color:var(--tone); font-size:var(--ag-type-caption); }
.ag-fd-g--card.is-dash { border-style:dashed; }
.ag-fd-g--card.is-dbl { border:3px double color-mix(in srgb,var(--ag-ink) 30%,var(--ag-canvas)); }
.ag-fd-g--edge::before { content:""; inline-size:1.4rem; border-block-start:2px solid var(--fd-edge); }
/* below */
.ag-fd-drawer { border-block-start:var(--ag-border-thin) solid var(--fd-line); background:var(--ag-surface); }
.ag-fd-dbar { padding-block:var(--ag-space-1); }
.ag-fd-ok, .ag-fd-bad { display:inline-flex; align-items:center; gap:var(--ag-space-1); font-weight:var(--ag-weight-semibold); }
.ag-fd-ok { color:var(--ag-positive-ink); } .ag-fd-bad { color:var(--ag-danger-ink); }
.ag-fd-dbody { display:none; max-block-size:14rem; overflow:auto; padding:0 var(--ag-space-4) var(--ag-space-3); }
.ag-fd-drawer.open .ag-fd-dbody { display:block; }
.ag-fd-dli { display:grid; grid-template-columns:1.4rem 1fr auto; gap:var(--ag-space-2); align-items:start; padding:var(--ag-space-2) 0; border-block-start:var(--ag-border-thin) solid var(--fd-line); line-height:1.45; }
.ag-fd-dli.is-warn .ag-fd-ico { color:var(--ag-warning-ink); } .ag-fd-dli.is-info .ag-fd-ico { color:var(--ag-info-ink); } .ag-fd-dli.is-bad .ag-fd-ico { color:var(--ag-danger-ink); }
.ag-fd-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ag-space-2); margin:var(--ag-space-2) 0; }
.ag-fd-tiles div { padding:var(--ag-space-2) var(--ag-space-3); border-radius:var(--ag-radius-md); border:var(--ag-border-thin) solid var(--fd-line); background:var(--ag-surface-raised); }
.ag-fd-tiles b { display:block; font-size:var(--ag-type-card); font-variant-numeric:tabular-nums; }
.ag-fd-tiles span { color:var(--fd-2); font-size:var(--ag-type-caption); }
.ag-fd-vers { inline-size:100%; border-collapse:collapse; }
.ag-fd-vers td { padding:var(--ag-space-1) var(--ag-space-2) var(--ag-space-1) 0; border-block-start:var(--ag-border-thin) solid var(--fd-line); }
@media (max-width:60rem) { .ag-fd-main { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(24rem,1fr) auto; overflow:auto; } .ag-fd-pal { max-block-size:12rem; border:0; } .ag-fd-top { flex-wrap:wrap; } }

/* Agoria platform utilities — the small, honest set.
   ─────────────────────────────────────────────────────────────────────────────
   These exist for ONE reason: 3,102 inline style attributes across 35 pages,
   and the largest group in them is `font-size:12.5px; color:var(--text-3)`
   repeated a few hundred times. Those are not design decisions, they are the
   same decision written out by hand every time — which is why the console
   spanned 9px to 20px in eleven different sizes.

   A utility here maps onto a TOKEN and nothing else. There is no `.p-3`, no
   `.mt-2`, no colour-by-number: a general-purpose utility framework is inline
   styles with better syntax, and it would defeat the ratchet rather than serve
   it. Type role, semantic ink, and the three layout shapes that appear on
   every page. That is the whole list. */

@layer utilities {

/* Type by ROLE, never by size — the point is that a page stops choosing px. */
.ag-t-label   { font-size:var(--ag-type-label); letter-spacing:.06em; text-transform:uppercase; }
.ag-t-caption { font-size:var(--ag-type-caption); }
.ag-t-body    { font-size:var(--ag-type-body); }
.ag-t-lg      { font-size:var(--ag-type-body-lg); }
.ag-t-card    { font-size:var(--ag-type-card); }
.ag-t-num     { font-variant-numeric:tabular-nums; }
.ag-t-mono    { font-family:var(--ag-font-mono); }
.ag-t-medium  { font-weight:var(--ag-weight-medium); }

/* Ink by MEANING. `color:#8b93a7` says nothing; `.ag-faint` says how loudly. */
.ag-ink      { color:var(--ag-ink); }
.ag-muted    { color:var(--ag-ink-muted); }
.ag-faint    { color:var(--ag-ink-faint); }
.ag-brand    { color:var(--ag-signal-ink); }
/* A tone as TEXT reads the tone's label, which is walked to AA on the grounds a word is set on; the fill (--ag-positive) is for a bar or a dot. */
.ag-positive { color:var(--ag-positive-label); }
.ag-warning  { color:var(--ag-warning-label); }
.ag-danger   { color:var(--ag-danger-label); }

/* Three shapes a flex row cannot do without, and they are the reason this file
   stays honest while still paying: there is nothing to tokenise about
   `min-width:0`. It is the fix for a flex child that will not truncate, and it
   was fourteen hand-written attributes on /manage alone; `flex:1` was twenty
   more, almost all of them the spacer that pushes a row's actions right. A
   value-free structural shape is not a `.p-3`. */
.ag-grow  { flex:1; }
.ag-tight { min-width:0; }
.ag-right { text-align:right; }

/* The three shapes that appear on every page and nowhere else in the recipes. */
.ag-row  { display:flex; align-items:center; gap:var(--ag-space-2); }
.ag-row-wrap { display:flex; align-items:center; gap:var(--ag-space-2); flex-wrap:wrap; }
.ag-stack { display:flex; flex-direction:column; gap:var(--ag-space-2); }

}

/* The console shell, on the recipes — PLATFORM-DESIGN-SYSTEM-SPEC.md Phase 4.
   ─────────────────────────────────────────────────────────────────────────────
   admin.html carried 163 rules of its own, and the ones that matter are not
   bespoke: a sidebar, a topbar, a page title, cards, buttons, tables, chips.
   They are the recipes with different class names.

   So rather than rewriting 4,000 lines of markup — which is the risky version
   and the reason this kept being deferred — this maps the console's existing
   class names ONTO the recipes. The markup does not move; the values all come
   from tokens; and the page-local rules can then be deleted a block at a time
   with the ratchet proving nothing was lost.

   It sits in @layer components, so a page rule that has not been deleted yet
   still wins, and loses automatically the moment it goes. That is what makes
   this a migration rather than a rewrite. */

/* The control reset, in the lowest layer /theme.css declares (LAYER_ORDER, src/server.ts).
   A button, a field, a select and a textarea do not inherit their font: the browser draws each in its own (Arial, computed), so
   the sidebar's items, the "beta" tag, the sign-out button and every control a page had not styled by hand sat in a different
   typeface from the text beside them — 30 of 71 text elements on Stock, measured 2026-10-18.
   The family only, and only as a floor. Size and weight are not here, because a control sets its own; any rule in any higher
   layer, or in a page's own <style>, still wins. What this changes is the control that said nothing about its face.
   Not the line height, on purpose: a control that sets none draws at the browser's `normal`, and inheriting the body's 1.5 instead
   grew 24 sidebar rows by 2.6px, the Orders segmented control by 5px, /protocol's scenario buttons by 18px. That is a restyle, not
   a font fix; a control that wants the body's leading asks for it. It lives in the sheet and not in a page: every console page
   and the public ones link this same file. */
@layer console-reset {
  button, input, select, textarea { font-family:inherit; }
}

@layer components {

/* ── Shell ──────────────────────────────────────────────────────────────── */
.layout { background:var(--ag-canvas); color:var(--ag-ink);
  font-family:var(--ag-font-interface); font-size:var(--ag-type-body); line-height:var(--ag-leading-body); }
.sidebar { background:var(--ag-surface); border-right:var(--ag-border-thin) solid var(--ag-line);
  width:var(--ag-nav-width); }
.sidebar-nav { padding:var(--ag-space-2); }
.nav-section-label { font-size:var(--ag-type-label); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ag-ink-faint); padding:var(--ag-space-4) var(--ag-space-3) var(--ag-space-1); }
.nav-item { min-height:var(--ag-row); padding:0 var(--ag-space-3); border-radius:var(--ag-radius-sm);
  color:var(--ag-ink-muted); gap:var(--ag-space-2);
  transition:background var(--ag-motion-fast) var(--ag-ease-standard); }
.nav-item:hover { background:var(--ag-surface-inset); color:var(--ag-ink); }
.nav-item.active { background:var(--ag-signal-soft); color:var(--ag-ink); font-weight:var(--ag-weight-medium); }
.nav-count { font-size:var(--ag-type-label); color:var(--ag-ink-faint); font-variant-numeric:tabular-nums; }
.sidebar-footer { border-top:var(--ag-border-thin) solid var(--ag-line); padding:var(--ag-space-3); }
.user-email { font-size:var(--ag-type-caption); color:var(--ag-ink-muted); }

.topbar { height:var(--ag-topbar-height); background:var(--ag-surface);
  border-bottom:var(--ag-border-thin) solid var(--ag-line); padding:0 var(--ag-space-5); gap:var(--ag-space-4); }
/* The page names itself. A console whose title is the size of its body text has
   no hierarchy for the eye to follow — and that is what the old 14px title was. */
.page-title { font-family:var(--ag-font-display); font-size:var(--ag-type-page);
  line-height:var(--ag-leading-tight); letter-spacing:-.015em; font-weight:var(--ag-weight-normal); }
.page-body { max-width:var(--ag-measure); padding:var(--ag-space-6) var(--ag-space-5) var(--ag-space-9); }

/* ── Cards, which are panels ────────────────────────────────────────────── */
/* The owner console draws its cards as blocks (components.css [data-ag-surface="owner"] .card); these are the other consoles'. */
:root:not([data-ag-surface="owner"]) .card, .stat-card, .panel {
  background:var(--ag-surface); border:var(--ag-border-thin) solid var(--ag-line);
  border-radius:var(--ag-radius-md); box-shadow:var(--ag-shadow-1); }
:root:not([data-ag-surface="owner"]) .card-header { padding:var(--ag-space-4); gap:var(--ag-space-3);
  border-bottom:var(--ag-border-thin) solid var(--ag-line); }
:root:not([data-ag-surface="owner"]) .card-title { font-size:var(--ag-type-card); font-weight:var(--ag-weight-medium); letter-spacing:-.01em; }
:root:not([data-ag-surface="owner"]) .card-body { padding:var(--ag-space-4); }

/* The numbers ARE the product, and they were being set at the size of a
   caption. Display face, tabular figures so a column lines up on the decimal. */
.stat-num, .big-num { font-family:var(--ag-font-display); font-size:var(--ag-type-figure);
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat-label { font-size:var(--ag-type-caption); color:var(--ag-ink-muted); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* None here. `.btn`, `.btn-primary|secondary|ghost|danger|danger-ghost` and `.btn-sm|xs` are names for the ONE button the design
   system draws (components.css `.ag-button`): this file kept a second spec for them (42px, 15px type, ghost drawn as secondary),
   loaded after the recipe, so the legacy names never took it. */

/* ── Tables ─────────────────────────────────────────────────────────────── */
table th { font-size:var(--ag-type-label); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ag-ink-faint); font-weight:var(--ag-weight-medium);
  padding:var(--ag-space-2) var(--ag-space-3);
  border-bottom:var(--ag-border-thin) solid var(--ag-line-strong); }
table td { padding:var(--ag-space-2) var(--ag-space-3);
  border-bottom:var(--ag-border-thin) solid var(--ag-line); font-variant-numeric:tabular-nums; }
/* Every table on every console surface, and every ROW-shaped list beside them —
   the registers built from divs rather than <tr> are the same object to the
   reader and owe the same answer to "which line am I about to click".
   Hover only: on a coarse pointer there is no hover to have, and the state
   sticks to whatever was tapped last. */
@media (hover: hover) {
  table tbody tr:hover > td,
  table tbody tr:focus-within > td,
  /* A register built from divs is the same object to the reader. ARIA rows get
     it for free; anything else opts in by carrying .ag-row, which is one class
     rather than this file guessing at every page's naming. */
  [role="row"]:hover, [role="row"]:focus-within,
  .ag-row:hover, .ag-row:focus-within { background:var(--ag-row-hover); }
  table tbody tr, [role="row"], .ag-row {
    transition:background var(--ag-motion-fast) var(--ag-ease-standard); }
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
input, select, textarea {
  min-height:var(--ag-row); border-radius:var(--ag-radius-sm);
  border:var(--ag-border-thin) solid var(--ag-line-strong);
  background:var(--ag-surface-raised); color:var(--ag-ink);
  font:inherit; font-size:var(--ag-type-body); padding:var(--ag-space-2) var(--ag-space-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .nav-item:focus-visible {
  outline:2px solid var(--ag-focus); outline-offset:2px; }

/* ── Chips and pills, which are statuses ────────────────────────────────── */
.chip, .tag, .badge { font-size:var(--ag-type-caption); padding:2px var(--ag-space-2);
  border-radius:var(--ag-radius-pill); border:var(--ag-border-thin) solid var(--ag-line);
  color:var(--ag-ink-muted); }

/* ── Pick one of several ─────────────────────────────────────────────────────
   A radio list where each option carries a name, a sentence and a line of
   grounds — the shape the report-shape picker in Settings needs, and the shape
   any "choose one of these, and here is why" setting needs after it.

   It exists as a recipe rather than as inline styles on the page for two
   reasons. The ratchet counts hardcoded values in public/*.html and only ever
   comes down, so a new panel has to cost it nothing. And the console's own
   `.card-body input` rule stretches every input to fill its column, which turns
   a radio into a 500px-wide control and squeezes the text beside it to nothing
   — sized here, once, instead of being fought inline on every page that wants
   a radio inside a card. */
.ag-pick { display:flex; flex-direction:column; gap:var(--ag-space-3); }
.ag-pick-opt { display:flex; align-items:flex-start; gap:var(--ag-space-3);
  padding:var(--ag-space-3) var(--ag-space-4); cursor:pointer;
  border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-md);
  background:transparent; }
.ag-pick-opt:hover { background:var(--ag-row-hover); }
.ag-pick-opt.is-on { border-color:var(--ag-ink); background:var(--ag-surface-inset); }
.ag-pick-opt:focus-within { outline:2px solid var(--ag-focus); outline-offset:2px; }
/* Beats `.card-body input`, which is what makes this recipe necessary. */
.ag-pick-opt > input[type="radio"] { flex:none; width:var(--ag-space-4); height:var(--ag-space-4);
  min-width:0; margin:var(--ag-space-1) 0 0; padding:0; background:none;
  border-radius:var(--ag-radius-pill); }
.ag-pick-text { display:flex; flex-direction:column; gap:var(--ag-space-1); flex:1; min-width:0; }
.ag-pick-name { font-size:var(--ag-type-body); font-weight:var(--ag-weight-medium); color:var(--ag-ink); }
.ag-pick-why { font-size:var(--ag-type-caption); color:var(--ag-ink-muted);
  line-height:var(--ag-leading-body); }
.ag-pick-meta { font-size:var(--ag-type-caption); color:var(--ag-ink-faint);
  line-height:var(--ag-leading-body); }

}

/* Agoria marketing recipes — PLATFORM-DESIGN-SYSTEM-SPEC.md §6, public half.
   ─────────────────────────────────────────────────────────────────────────────
   components.css is the CONSOLE's primitives. This is the other half of the
   same system: the primitives a public page assembles — the bar, the button,
   the headline pairing, the card, the chip, the step, the question.

   ── Why this file exists ────────────────────────────────────────────────────
   It was written twelve times. Every marketing surface carried its own .btn,
   its own .card, its own .wrap and its own .eyebrow, each a near-copy of the
   last with a different pixel in it — which is why the landing page could be
   redesigned and /pricing, /protocol and /ontology stayed exactly as they were.
   A design system whose primitives are pasted is a mood board.

   So: one definition each, here, and the pages delete their copies. Changing
   the button is one rule in one file, and every public page moves.

   ── The rules this file keeps ───────────────────────────────────────────────
   · Every colour, size, corner and duration is an --ag-* token. Nothing is
     authored as a literal, so /admin → Design reaches all of it.
   · A control's SIZE comes from --ag-control-*, never from --ag-space-*.
     Spacing is the air between things; a button's height is a decision about
     the button. Writing the button's padding as var(--ag-space-3) is what put
     a 73px "Experience it live" inside a 68px bar the day somebody moved the
     base unit from 4 to 8.
   · Scoped to [data-ag-surface="marketing"], so a console page that still
     styles its own .btn is untouched — and inside @layer components, so a page
     that has not deleted its copy yet still wins until it does.
   · --ag-signal is a FILL and --ag-signal-ink is TYPE. They are never swapped.
*/

/* The reset the twelve pages each carried a line of. box-sizing is not a
   preference — every padding token in this file is wrong without it. */
@layer reset {
[data-ag-surface="marketing"], [data-ag-surface="marketing"] *,
[data-ag-surface="marketing"] *::before, [data-ag-surface="marketing"] *::after { box-sizing: border-box; }
[data-ag-surface="marketing"] { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { [data-ag-surface="marketing"] { scroll-behavior: auto; } }
}

@layer components {

[data-ag-surface="marketing"] {
  /* The editorial serif that carries the first half of a headline. It is the
     display face from the registry — declared once here so the pairing is a
     system decision rather than a per-page font stack. */
  --serif: var(--ag-font-display);
  /* THE LAYOUT WIDTH, which is not the reading width.
     A marketing page is a grid of six price cards and three audience panels,
     and --ag-measure-marketing is set to 1000px on this surface — a fine column
     for prose and far too narrow for a layout: it left ~490px of empty margin
     each side on a wide screen and pushed a six-column grid off its own page.
     Prose is already held to its own measure by the ch caps on .lede, .row2 p
     and .faq .a, so the column below is free to be as wide as the LAYOUT needs.
     The operator's measure still raises it; it can no longer starve it. */
  --ag-layout: min(100%, max(var(--ag-measure-marketing), 1440px));
  /* The vertical rhythm of a public page, which is roomier than any console
     has any business being. One value, so a section's air is a decision made
     once rather than a clamp() pasted into twelve files. */
  --band: clamp(calc(var(--ag-space-7) * 1.4), 10vw, calc(var(--ag-space-8) * 2));
}

[data-ag-surface="marketing"] body {
  margin: 0; background: var(--ag-canvas); color: var(--ag-ink);
  font-family: var(--ag-font-interface); font-size: var(--ag-type-body);
  line-height: var(--ag-leading-body); -webkit-font-smoothing: antialiased;
}
[data-ag-surface="marketing"] a { color: inherit; text-decoration: none; }
[data-ag-surface="marketing"] section { padding: var(--band) 0; }

/* ── The measure ─────────────────────────────────────────────────────────── */
[data-ag-surface="marketing"] .wrap {
  width: 100%; max-width: var(--ag-layout); margin: 0 auto;
  padding: 0 var(--ag-gutter-desktop);
}

/* ── The bar ─────────────────────────────────────────────────────────────────
   Its height is --ag-topbar-height, which the generator emits as a max() of
   the operator's bar setting and the tallest control that can sit in it. The
   nav can no longer be overflowed by its own button. */
[data-ag-surface="marketing"] nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ag-canvas) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: var(--ag-border-thin) solid var(--ag-line);
}
[data-ag-surface="marketing"] nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ag-space-3); height: var(--ag-topbar-height);
  flex-wrap: nowrap; overflow: hidden;
  /* THE BAR IS NOT THE COLUMN, but it starts where the column starts.
     A reading measure is a decision about prose — this surface is set to
     1000px — and binding the whole bar to it left a seven-item row in 904px
     and a burger on a 1440px screen. Centring a WIDER bar instead fixed that
     and broke something worse: the logo sat 90px left of the headline, so the
     page read as pushed to the right.

     So the left edge is the column's left edge — computed, not guessed — and
     the bar runs right to the gutter. The one edge a reader actually tracks,
     the one carrying the logo and the first word of every headline, lines up
     at any measure, and the row gets the room it needs. */
  max-width: none; width: 100%;
  padding-left: max(var(--ag-gutter-desktop), calc((100% - var(--ag-layout)) / 2 + var(--ag-gutter-desktop)));
  padding-right: var(--ag-gutter-desktop);
  /* The bar asks about ITSELF, not about the window — and that is the only
     question with a right answer here. Whether six labels and a button fit
     depends on the marketing MEASURE, which is an operator control: at the
     1000px somebody set it to, a row needing 920px has 904px to live in, and a
     px breakpoint cannot see that. A container query can, so the bar collapses
     to the burger exactly when it stops fitting, at any measure. */
  container-type: inline-size;
}
[data-ag-surface="marketing"] nav .brand { flex: none; }

[data-ag-surface="marketing"] .brand {
  display: flex; align-items: center; gap: var(--ag-space-2);
  font-weight: 800; font-size: var(--ag-type-body); letter-spacing: -.03em;
}
[data-ag-surface="marketing"] .logo-mark {
  width: 1.6em; height: 1.6em; border-radius: var(--ag-radius-sm); background: var(--ag-signal);
  display: grid; place-items: center; font-size: var(--ag-type-caption); font-weight: 800;
  color: var(--ag-signal-contrast); flex: none;
}
/* Drawn, not typed. A glyph is at the mercy of whichever face the OS
   substitutes — U+25CF renders as a geometric dot on one platform and an emoji
   disc on another, and neither takes the brand colour reliably. */
[data-ag-surface="marketing"] .brand-dot {
  display: inline-block; width: .52em; height: .52em; border-radius: var(--ag-radius-pill);
  background: var(--ag-signal-ink); vertical-align: middle; margin: 0 .12em;
}
/* CHROME IS NOT BODY COPY, and this is the same lesson as the button one step
   along. A nav link written at var(--ag-type-body) with var(--ag-space-3)
   padding follows the reading size of the page: the marketing surface runs a
   type scale, and at the 1.6 the operator had set it six links became 24px
   each and the bar overflowed the viewport by 156px. A label in the furniture
   is a LABEL — it reads at the label step and it is padded on the control
   scale, so loosening the layout or enlarging the prose never resizes the
   furniture holding them. */
[data-ag-surface="marketing"] .nav-links {
  display: flex; align-items: center; gap: var(--ag-space-1);
  flex: 0 1 auto; min-width: 0;
}
[data-ag-surface="marketing"] .nav-links > a:not(.btn) {
  display: inline-flex; align-items: center; min-height: var(--ag-control-h-sm);
  padding: 0 var(--ag-control-px-sm); border-radius: var(--ag-radius-sm);
  font-size: var(--ag-type-caption); font-weight: var(--ag-weight-medium); color: var(--ag-ink-muted);
  white-space: nowrap;
}
[data-ag-surface="marketing"] .nav-links > a:not(.btn):hover { color: var(--ag-ink); background: var(--ag-surface-inset); }
[data-ag-surface="marketing"] .nav-burger {
  display: none; background: none; border: 0; color: var(--ag-ink);
  font-size: var(--ag-type-body-lg); cursor: pointer; flex: none;
}
[data-ag-surface="marketing"] nav .btn { font-size: var(--ag-type-caption); flex: none; }

/* ── The button ──────────────────────────────────────────────────────────────
   One shape, three weights, three sizes. The height and the horizontal padding
   are the control scale; only the ROLE changes between the weights. */
[data-ag-surface="marketing"] .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ag-space-2);
  cursor: pointer; font-family: inherit; font-size: var(--ag-type-body);
  font-weight: 600; letter-spacing: -.01em;
  min-height: var(--ag-control-h-md); padding: 0 var(--ag-control-px-md);
  border-radius: var(--ag-radius-md); border: var(--ag-border-thin) solid transparent;
  transition: transform var(--ag-motion-fast) var(--ag-ease-standard),
              background var(--ag-motion-fast) var(--ag-ease-standard),
              border-color var(--ag-motion-fast) var(--ag-ease-standard),
              color var(--ag-motion-fast) var(--ag-ease-standard);
  white-space: nowrap;
}
[data-ag-surface="marketing"] .btn:hover { transform: translateY(-1px); }
[data-ag-surface="marketing"] .btn:active { transform: translateY(0); }
[data-ag-surface="marketing"] .btn:focus-visible { outline: var(--ag-border-strong) solid var(--ag-focus); outline-offset: 2px; }
[data-ag-surface="marketing"] .btn-primary { background: var(--ag-signal); color: var(--ag-signal-contrast); }
[data-ag-surface="marketing"] .btn-brand {
  background: var(--ag-button-tint); color: var(--ag-button-ink); border-color: var(--ag-button-edge);
}
[data-ag-surface="marketing"] .btn-ghost { background: transparent; color: var(--ag-ink); border-color: var(--ag-line-strong); }
[data-ag-surface="marketing"] .btn-ghost:hover { border-color: var(--ag-ink-faint); }
[data-ag-surface="marketing"] .btn-sm { min-height: var(--ag-control-h-sm); padding: 0 var(--ag-control-px-sm); font-size: var(--ag-type-caption); }
[data-ag-surface="marketing"] .btn-lg {
  font-size: var(--ag-type-body-lg); min-height: var(--ag-control-h-lg);
  padding: 0 var(--ag-space-2) 0 var(--ag-control-px-lg);
  border-radius: var(--ag-radius-lg); gap: var(--ag-space-4);
}
/* The arrow rides in its own disc. It INVERTS the button's own pair — the
   label's colour becomes the ground and the fill becomes the arrow — so
   whatever the operator sets the signal to, the arrow reads at exactly the
   ratio the label reads at, because it is the same gated pair reversed. */
/* The arrow is DRAWN, not typed, and that is why it is finally centred. A "→"
   glyph is positioned by the font's own metrics — it sits on the baseline with
   whatever side bearings the face gives it — so grid centring centres the
   glyph's BOX and the ink inside it lands low and left. An SVG has no
   baseline: its viewBox is the box, and centre means centre. */
[data-ag-surface="marketing"] .btn-lg .disc {
  width: calc(var(--ag-control-h-md) - var(--ag-space-2)); height: calc(var(--ag-control-h-md) - var(--ag-space-2));
  border-radius: var(--ag-radius-pill); flex: none;
  background: var(--ag-signal-ink-soft); color: var(--ag-signal-ink);
  display: grid; place-items: center; line-height: 0;
  transition: transform var(--ag-motion-normal) var(--ag-ease-enter);
}
[data-ag-surface="marketing"] .btn-lg .disc svg {
  width: 45%; height: 45%; display: block;
  fill: none; stroke: currentColor; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round;
}
[data-ag-surface="marketing"] .btn-primary.btn-lg .disc { background: var(--ag-signal-contrast); color: var(--ag-signal); }
[data-ag-surface="marketing"] .btn-lg:hover .disc { transform: translateX(3px); }
[data-ag-surface="marketing"] .btn-block { width: 100%; }

/* ── Type ────────────────────────────────────────────────────────────────────
   The whole direction in one rule: a headline is two voices. A light serif
   states the subject, a heavy grotesque delivers the verdict, and the size is
   the same so the contrast reads as tone rather than as hierarchy. */
[data-ag-surface="marketing"] .display {
  margin: 0; letter-spacing: -.035em; line-height: .96; font-size: var(--ag-type-hero);
}
[data-ag-surface="marketing"] .display .said {
  display: block; font-family: var(--serif); font-weight: var(--ag-weight-normal); letter-spacing: -.02em;
}
[data-ag-surface="marketing"] .display .meant { display: block; font-weight: 800; }
[data-ag-surface="marketing"] h2.display { font-size: var(--ag-type-figure); }
[data-ag-surface="marketing"] .eyebrow {
  display: inline-block; font-family: var(--ag-font-mono); font-size: var(--ag-type-caption);
  letter-spacing: .02em; color: var(--ag-ink-faint); margin-bottom: var(--ag-space-5);
}
[data-ag-surface="marketing"] .lede {
  font-size: var(--ag-type-body-lg); line-height: var(--ag-leading-body);
  color: var(--ag-ink-muted); max-width: 46ch;
}

/* ── Figure: a panel that carries evidence rather than decoration ────────── */
[data-ag-surface="marketing"] .figure {
  border: var(--ag-border-thin) solid var(--ag-line); border-radius: var(--ag-radius-lg);
  background: var(--ag-surface); padding: var(--ag-space-5);
  display: grid; align-content: center; gap: var(--ag-space-3);
}
[data-ag-surface="marketing"] .kv {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--ag-space-5);
  padding: var(--ag-space-3) 0; border-bottom: var(--ag-border-thin) solid var(--ag-line);
  font-size: var(--ag-type-body);
}
[data-ag-surface="marketing"] .kv:first-child { padding-top: 0; }
[data-ag-surface="marketing"] .kv:last-child { border-bottom: 0; padding-bottom: 0; }
[data-ag-surface="marketing"] .kv b { font-weight: 600; letter-spacing: -.01em; }
[data-ag-surface="marketing"] .kv span {
  color: var(--ag-ink-muted); font-family: var(--ag-font-mono); font-size: var(--ag-type-caption);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* The row under the pointer on a public page too — the comparison table on
   /pricing and the evidence tables in a report are registers like any other. */
@media (hover: hover) {
  [data-ag-surface="marketing"] table tbody tr:hover > td,
  [data-ag-surface="marketing"] table tbody tr:focus-within > td { background: var(--ag-row-hover); }
}

/* ── Chip ────────────────────────────────────────────────────────────────── */
[data-ag-surface="marketing"] .chipwrap { display: flex; flex-wrap: wrap; gap: var(--ag-space-2); }
[data-ag-surface="marketing"] .chip {
  display: inline-flex; align-items: center; gap: var(--ag-space-2);
  font-family: inherit; font-size: var(--ag-type-caption); font-weight: 600;
  min-height: var(--ag-control-h-sm); padding: 0 var(--ag-control-px-sm);
  border-radius: var(--ag-radius-pill); border: var(--ag-border-thin) solid var(--ag-line);
  color: var(--ag-ink-muted); background: var(--ag-canvas);
}
[data-ag-surface="marketing"] .chip.on {
  background: var(--ag-signal-ink-soft); border-color: transparent; color: var(--ag-signal-ink);
}

/* ── The ladder ──────────────────────────────────────────────────────────────
   Seven rungs, and the rung is the point: "cited" and "reachable" are two
   different heights and a static row of pills says so in a way nobody reads.
   The rung that is CURRENT is the fill; the rungs already climbed carry the
   tint; the rungs above are empty, because that is the honest picture. */
[data-ag-surface="marketing"] .ladder { display: grid; gap: var(--ag-space-4); }
[data-ag-surface="marketing"] .ladder .chipwrap { gap: var(--ag-space-2); }
[data-ag-surface="marketing"] .rung {
  cursor: pointer;
  transition: background var(--ag-motion-normal) var(--ag-ease-standard),
              color var(--ag-motion-normal) var(--ag-ease-standard),
              border-color var(--ag-motion-normal) var(--ag-ease-standard),
              transform var(--ag-motion-fast) var(--ag-ease-standard);
}
[data-ag-surface="marketing"] .rung .n {
  font-family: var(--ag-font-mono); font-size: var(--ag-type-label);
  color: color-mix(in srgb, currentColor 90%, transparent); font-weight: var(--ag-weight-normal);
}
[data-ag-surface="marketing"] .rung[data-state="climbed"] {
  background: var(--ag-signal-ink-soft); border-color: transparent; color: var(--ag-signal-ink);
}
[data-ag-surface="marketing"] .rung[data-state="here"] {
  background: var(--ag-signal); border-color: transparent; color: var(--ag-signal-contrast);
  transform: translateY(-1px);
}
[data-ag-surface="marketing"] .rung:focus-visible { outline: var(--ag-border-strong) solid var(--ag-focus); outline-offset: 2px; }
/* The sentence under the rungs is the whole reason the rungs move. It holds a
   floor so the figure does not resize itself on every turn. */
[data-ag-surface="marketing"] .ladder-say {
  margin: 0; color: var(--ag-ink-muted); font-size: var(--ag-type-body);
  line-height: var(--ag-leading-body); min-height: calc(var(--ag-type-body) * 5);
  border-top: var(--ag-border-thin) solid var(--ag-line); padding-top: var(--ag-space-4);
  transition: opacity var(--ag-motion-fast) var(--ag-ease-standard);
}
[data-ag-surface="marketing"] .ladder-say.turning { opacity: 0; }
[data-ag-surface="marketing"] .ladder-say b { color: var(--ag-ink); font-weight: 700; }
[data-ag-surface="marketing"] .ladder-say .of {
  display: block; font-family: var(--ag-font-mono); font-size: var(--ag-type-label);
  color: var(--ag-ink-faint); margin-bottom: var(--ag-space-1);
}

/* ── Steps ───────────────────────────────────────────────────────────────── */
[data-ag-surface="marketing"] .steps { display: grid; gap: 0; border-top: var(--ag-border-thin) solid var(--ag-line); }
[data-ag-surface="marketing"] .step {
  display: grid; grid-template-columns: 5.5em minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--ag-space-4), 3vw, var(--ag-space-6)); padding: var(--ag-space-5) 0;
  border-bottom: var(--ag-border-thin) solid var(--ag-line); align-items: start;
}
[data-ag-surface="marketing"] .step-n { font-family: var(--ag-font-mono); font-size: var(--ag-type-caption); color: var(--ag-ink-muted); padding-top: 5px; }
[data-ag-surface="marketing"] .step h3 { margin: 0; font-size: var(--ag-type-card); letter-spacing: -.02em; line-height: var(--ag-leading-tight); font-weight: 700; }
[data-ag-surface="marketing"] .step p { margin: 0; color: var(--ag-ink-muted); font-size: var(--ag-type-body); line-height: var(--ag-leading-body); }

/* ── Card ────────────────────────────────────────────────────────────────────
   The base is deliberately plain. A card that already has a look leaves the
   variants below arguing with it, and three audiences that render identically
   are three audiences the page never actually addressed. */
[data-ag-surface="marketing"] .card {
  border: var(--ag-border-thin) solid var(--ag-line); border-radius: var(--ag-radius-lg);
  background: var(--ag-surface); padding: var(--ag-space-5);
  display: flex; flex-direction: column;
  transition: border-color var(--ag-motion-fast) var(--ag-ease-standard),
              transform var(--ag-motion-fast) var(--ag-ease-standard);
}
[data-ag-surface="marketing"] .card:hover { border-color: var(--ag-line-strong); transform: translateY(-2px); }
/* align-self, not display. The card is a flex column and a flex item's
   inline-block is blockified — so the pill stretched the full width of every
   card and read as an empty input. */
[data-ag-surface="marketing"] .card .kind {
  align-self: flex-start; font-size: var(--ag-type-label); font-weight: 600;
  color: var(--ag-ink-muted); background: var(--ag-surface-inset);
  border-radius: var(--ag-radius-pill); padding: var(--ag-space-1) var(--ag-space-3);
  margin-bottom: var(--ag-space-5);
}
[data-ag-surface="marketing"] .card h3 { margin: 0 0 var(--ag-space-2); font-size: var(--ag-type-card); letter-spacing: -.02em; line-height: var(--ag-leading-tight); font-weight: 700; }
[data-ag-surface="marketing"] .card > p { margin: 0 0 var(--ag-space-5); color: var(--ag-ink-muted); font-size: var(--ag-type-body); line-height: var(--ag-leading-body); }
[data-ag-surface="marketing"] .card ul {
  list-style: none; margin: 0 0 var(--ag-space-5); padding: var(--ag-space-5) 0 0;
  display: grid; gap: var(--ag-space-3); border-top: var(--ag-border-thin) solid var(--ag-line);
}
[data-ag-surface="marketing"] .card li {
  display: grid; grid-template-columns: 1.1em 1fr; gap: var(--ag-space-2);
  font-size: var(--ag-type-body); line-height: var(--ag-leading-body); color: var(--ag-ink-muted);
}
[data-ag-surface="marketing"] .card li .tick { color: var(--ag-signal-ink); }
[data-ag-surface="marketing"] .card .go { margin-top: auto; }

/* ── Three audiences, three objects ──────────────────────────────────────────
   A business, a customer and an integrator want different things and are sold
   in different registers, and rendering all three in one grey box says the
   page has not decided who it is talking to. So each carries its own ground,
   its own heading voice, its own list mark and its own button weight — and the
   accent comes from --ag-cat-1..3, the categorical ramp the operator already
   owns, used as a FILL and never as type.

   --lead is the offer, and it is the loudest object in the section.
   --quiet is the invitation: hairline, unhurried, nothing shouting.
   --technical is the specification: mono, inset, no ornament at all. */
[data-ag-surface="marketing"] .card--lead {
  /* The offer, and the loudest object in the section: it is the only card
     wearing the brand. A tint of the signal reads as the signal in both modes
     because it is derived from it, where a step of the surface ramp does not. */
  background:
    linear-gradient(180deg, var(--ag-signal-ink-soft), transparent 60%),
    var(--ag-surface-raised);
  border-color: transparent; box-shadow: var(--ag-shadow-2);
  border-radius: var(--ag-radius-lg); position: relative; overflow: hidden;
}
[data-ag-surface="marketing"] .card--lead::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ag-cat-1);
}
[data-ag-surface="marketing"] .card--lead .kind {
  background: var(--ag-signal); color: var(--ag-signal-contrast); font-weight: 700;
}
[data-ag-surface="marketing"] .card--lead h3 {
  font-family: var(--serif); font-weight: var(--ag-weight-normal);
  font-size: var(--ag-type-section); letter-spacing: -.025em;
}
[data-ag-surface="marketing"] .card--lead > p { color: var(--ag-ink); }
[data-ag-surface="marketing"] .card--lead ul { border-top-color: var(--ag-signal-ink-soft); }
[data-ag-surface="marketing"] .card--lead li .tick { color: transparent; position: relative; }
[data-ag-surface="marketing"] .card--lead li .tick::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .5em; height: .5em; border-radius: var(--ag-radius-xs); background: var(--ag-cat-1);
}

[data-ag-surface="marketing"] .card--quiet {
  /* The invitation. No fill at all and a drawn rule instead — the one card that
     is a shape rather than a surface, which is legible on any ground. */
  background: transparent; border: var(--ag-border-strong) solid var(--ag-line-strong);
  box-shadow: none; border-radius: var(--ag-radius-lg);
}
[data-ag-surface="marketing"] .card--quiet .kind { background: transparent; border: var(--ag-border-thin) solid var(--ag-line-strong); }
[data-ag-surface="marketing"] .card--quiet h3 { font-weight: 800; letter-spacing: -.03em; }
/* This card's only action, so it is drawn at the ink rather than at a hairline.
   On --ag-line-strong the outline is rgba(ink,.24) in dark, and the one thing
   the card asks you to press was the hardest thing on it to see. */
[data-ag-surface="marketing"] .card--quiet .btn-ghost { border-color: var(--ag-ink-faint); }
[data-ag-surface="marketing"] .card--quiet .btn-ghost:hover { border-color: var(--ag-ink); }
[data-ag-surface="marketing"] .card--quiet ul { border-top-style: dashed; }
[data-ag-surface="marketing"] .card--quiet li { grid-template-columns: 1.5em 1fr; }
[data-ag-surface="marketing"] .card--quiet li .tick { color: transparent; position: relative; }
[data-ag-surface="marketing"] .card--quiet li .tick::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 1em; height: var(--ag-border-strong); background: var(--ag-cat-2);
}

[data-ag-surface="marketing"] .card--technical {
  /* The specification. Square corners, an inset ground, a rule down the left
     edge and mono throughout — it reads as a terminal in either mode because
     the corners and the face carry it, not the fill. */
  background: var(--ag-surface-inset); border-color: transparent;
  border-left: 3px solid var(--ag-cat-3);
  border-radius: var(--ag-radius-xs); box-shadow: none;
}
[data-ag-surface="marketing"] .card--technical .kind {
  font-family: var(--ag-font-mono); text-transform: uppercase; letter-spacing: .1em;
  background: transparent; padding-inline: 0; color: var(--ag-ink-faint);
  border-radius: 0; border-bottom: var(--ag-border-thin) solid var(--ag-line-strong);
}
[data-ag-surface="marketing"] .card--technical h3 {
  font-family: var(--ag-font-mono); font-weight: var(--ag-weight-medium);
  letter-spacing: -.02em; line-height: var(--ag-leading-tight);
}
[data-ag-surface="marketing"] .card--technical ul { border-top-color: var(--ag-line-strong); }
[data-ag-surface="marketing"] .card--technical li { font-family: var(--ag-font-mono); font-size: var(--ag-type-caption); align-items: baseline; }
[data-ag-surface="marketing"] .card--technical li .tick { color: transparent; position: relative; }
[data-ag-surface="marketing"] .card--technical li .tick::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .6em; height: .6em; border-radius: var(--ag-radius-pill);
  border: var(--ag-border-strong) solid var(--ag-cat-3);
}
[data-ag-surface="marketing"] .card--technical .btn {
  font-family: var(--ag-font-mono); font-weight: var(--ag-weight-medium);
  border-radius: var(--ag-radius-xs);
}

/* ── The question list ───────────────────────────────────────────────────── */
[data-ag-surface="marketing"] .faq { border-top: var(--ag-border-thin) solid var(--ag-line); }
[data-ag-surface="marketing"] .faq details { border-bottom: var(--ag-border-thin) solid var(--ag-line); }
[data-ag-surface="marketing"] .faq summary {
  list-style: none; cursor: pointer; padding: var(--ag-space-5) 0; display: grid;
  grid-template-columns: 3.4em 1fr 1.6em; gap: var(--ag-space-4); align-items: center;
  font-size: var(--ag-type-body-lg); font-weight: 600; letter-spacing: -.015em;
}
[data-ag-surface="marketing"] .faq summary::-webkit-details-marker { display: none; }
[data-ag-surface="marketing"] .faq summary .n { font-family: var(--ag-font-mono); font-size: var(--ag-type-caption); font-weight: var(--ag-weight-normal); color: var(--ag-ink-muted); }
[data-ag-surface="marketing"] .faq summary .pm { justify-self: end; color: var(--ag-ink-faint); font-size: var(--ag-type-card); transition: transform var(--ag-motion-normal) var(--ag-ease-standard); }
[data-ag-surface="marketing"] .faq details[open] summary .pm { transform: rotate(45deg); }
[data-ag-surface="marketing"] .faq .a {
  padding: 0 var(--ag-space-5) var(--ag-space-5) calc(3.4em + var(--ag-space-4));
  color: var(--ag-ink-muted); font-size: var(--ag-type-body); line-height: var(--ag-leading-reading); max-width: 68ch;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
[data-ag-surface="marketing"] footer {
  border-top: var(--ag-border-thin) solid var(--ag-line);
  padding: var(--ag-space-7) 0 var(--ag-space-8); color: var(--ag-ink-faint); font-size: var(--ag-type-body);
}
[data-ag-surface="marketing"] .footer-brand { font-weight: 800; font-size: var(--ag-type-body-lg); letter-spacing: -.03em; color: var(--ag-ink); }
[data-ag-surface="marketing"] .footer-links { display: flex; gap: var(--ag-space-5); flex-wrap: wrap; margin-top: var(--ag-space-4); }
[data-ag-surface="marketing"] .footer-links a { color: var(--ag-ink-faint); }
[data-ag-surface="marketing"] .footer-links a:hover { color: var(--ag-ink); }

/* ── Toast ───────────────────────────────────────────────────────────────── */
[data-ag-surface="marketing"] .toast {
  position: fixed; left: 50%; bottom: var(--ag-space-5); transform: translateX(-50%) translateY(20px);
  background: var(--ag-ink); color: var(--ag-canvas);
  min-height: var(--ag-control-h-md); display: grid; align-items: center;
  padding: 0 var(--ag-space-5); border-radius: var(--ag-radius-pill);
  font-size: var(--ag-type-body); font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity var(--ag-motion-normal) var(--ag-ease-standard), transform var(--ag-motion-normal) var(--ag-ease-standard);
  z-index: 200;
}
[data-ag-surface="marketing"] .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Reveal ──────────────────────────────────────────────────────────────────
   Scoped to a class the page only sets once it knows it can finish the job.
   Written as a bare [data-r] this hid the entire page behind an
   IntersectionObserver: anything that stopped it firing — a prerender, a hidden
   tab, a thrown error three lines earlier — left a landing page with nothing on
   it. Content is visible by default and the motion is the enhancement, which is
   the only order that fails safely. */
.js-reveal [data-r] {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--ag-motion-slow) var(--ag-ease-enter), transform var(--ag-motion-slow) var(--ag-ease-enter);
}
.js-reveal [data-r].in { opacity: 1; transform: none; }

/* ── Narrow ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  [data-ag-surface="marketing"] .wrap { padding: 0 var(--ag-gutter-tablet); }
  [data-ag-surface="marketing"] nav .wrap { padding-left: var(--ag-gutter-tablet); padding-right: var(--ag-gutter-tablet); }
  [data-ag-surface="marketing"] .step { grid-template-columns: 4em minmax(0, 1fr); }
  [data-ag-surface="marketing"] .step p { grid-column: 2; }
  /* The drawer is a layer over the page, not a strip inside the bar, so the bar
     stops clipping while it is open. */
  [data-ag-surface="marketing"] nav .wrap { overflow: visible; }
  [data-ag-surface="marketing"] .faq summary { grid-template-columns: 2.4em 1fr 1.6em; }
  [data-ag-surface="marketing"] .faq .a { padding-left: calc(2.4em + var(--ag-space-4)); }
}
@media (max-width: 560px) {
  [data-ag-surface="marketing"] .wrap { padding: 0 var(--ag-gutter-mobile); }
  [data-ag-surface="marketing"] nav .wrap { padding-left: var(--ag-gutter-mobile); padding-right: var(--ag-gutter-mobile); }
}
/* The touch floor. It belongs to the recipe, not to the size control, which is
   why the sanitiser is allowed to go down to 28px. */
@media (pointer: coarse) {
  [data-ag-surface="marketing"] .btn, [data-ag-surface="marketing"] .chip { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-r] { opacity: 1; transform: none; transition: none; }
  [data-ag-surface="marketing"] .btn,
  [data-ag-surface="marketing"] .btn-lg .disc,
  [data-ag-surface="marketing"] .card,
  [data-ag-surface="marketing"] .rung,
  [data-ag-surface="marketing"] .ladder-say { transition: none; }
}

/* The bar collapses when the bar runs out of room. Last in the layer, because
   a container query wins ties by ORDER like any other rule — written above the
   base .nav-links it lost, and the menu stayed open at every width. */
@container (max-width: 1000px) {
  [data-ag-surface="marketing"] .nav-burger { display: block; }
  [data-ag-surface="marketing"] .nav-links {
    display: none; position: absolute; top: var(--ag-topbar-height); left: 0; right: 0;
    background: var(--ag-surface-raised); border-bottom: var(--ag-border-thin) solid var(--ag-line-strong);
    box-shadow: var(--ag-shadow-2);
    flex-direction: column; align-items: stretch; padding: var(--ag-space-3); gap: var(--ag-space-1);
  }
  [data-ag-surface="marketing"] .nav-links.open { display: flex; }
  [data-ag-surface="marketing"] .nav-links > a { min-height: var(--ag-control-h-md); padding: 0 var(--ag-control-px-md); }

}

}

html:root[data-ag-surface="owner"] ::selection{ background:var(--ag-attention); color:var(--ag-attention-contrast); }
html:root[data-ag-surface="owner"] .ag-mark{ background:linear-gradient(transparent 56%, var(--ag-mark) 56%, var(--ag-mark) 94%, transparent 94%); padding:0 3px; margin:0 -3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; color:var(--ag-ink); }
html:root[data-ag-surface="owner"] .sidebar{ background:color-mix(in srgb, var(--ag-canvas) 55%, var(--ag-surface-inset)); border-right:var(--ag-border-thin) solid var(--ag-line); }
html:root[data-ag-surface="owner"] .sidebar-logo{ padding:var(--ag-space-5) var(--ag-space-4) var(--ag-space-3); gap:0; }
html:root[data-ag-surface="owner"] .sidebar-mark{ display:none; }
html:root[data-ag-surface="owner"] .sidebar-word b{ font-size:var(--ag-type-small); font-weight:var(--ag-weight-bold); letter-spacing:.16em; text-transform:uppercase; color:var(--ag-ink); }
html:root[data-ag-surface="owner"] .sidebar-word span{ display:none; }
html:root[data-ag-surface="owner"] .sidebar-biz{ margin:0 var(--ag-space-2) var(--ag-space-2); padding:var(--ag-space-3) var(--ag-space-2); background:none; border:0;
  border-top:var(--ag-border-thin) solid var(--ag-line); border-bottom:var(--ag-border-thin) solid var(--ag-line); border-radius:0; }
html:root[data-ag-surface="owner"] .sidebar-biz-name{ font-size:var(--ag-type-small); font-weight:var(--ag-weight-semibold); }
html:root[data-ag-surface="owner"] .sidebar-biz-slug{ font-family:var(--ag-font-mono); font-size:var(--ag-type-label); letter-spacing:0; }
html:root[data-ag-surface="owner"] .sidebar-biz-state{ font-size:var(--ag-type-caption); font-weight:var(--ag-weight-medium); color:var(--ag-ink); }
html:root[data-ag-surface="owner"] .sidebar-biz-state.off{ color:var(--ag-ink-3); }
html:root[data-ag-surface="owner"] .sidebar-biz-dot{ background:var(--ag-positive); }
html:root[data-ag-surface="owner"] .sidebar-biz-state.off .sidebar-biz-dot{ background:var(--ag-ink-3); }
html:root[data-ag-surface="owner"] .sidebar-nav{ padding:var(--ag-space-2) var(--ag-space-2) var(--ag-space-4); }
html:root[data-ag-surface="owner"] .nav-section-label{ font-family:var(--ag-font-mono); font-size:var(--ag-type-label); font-weight:var(--ag-weight-semibold); letter-spacing:.08em;
  color:var(--ag-ink-3); padding:var(--ag-space-4) var(--ag-space-2) var(--ag-space-1); }
html:root[data-ag-surface="owner"] .nav-section-label[data-group]:hover{ color:var(--ag-ink); }
html:root[data-ag-surface="owner"] .nav-section-label.nav-sub{ font-family:var(--ag-font-interface); font-size:var(--ag-type-caption); font-weight:var(--ag-weight-medium); letter-spacing:0; text-transform:none; color:var(--ag-ink-2); }
html:root[data-ag-surface="owner"] .nav-item{ position:relative; min-height:calc(var(--ag-control-h-sm) + var(--ag-space-1) / 2); padding:0 var(--ag-space-2); border-radius:var(--ag-radius-sm);
  font-size:var(--ag-type-small); font-weight:var(--ag-weight-medium); color:var(--ag-ink-2); }
html:root[data-ag-surface="owner"] .nav-item:hover{ background:color-mix(in srgb, var(--ag-ink) 6%, transparent); color:var(--ag-ink); }
html:root[data-ag-surface="owner"] .nav-item.active{ background:color-mix(in srgb, var(--ag-ink) 7%, transparent); color:var(--ag-ink); font-weight:var(--ag-weight-semibold); }
html:root[data-ag-surface="owner"] .nav-item.active::before{ content:""; position:absolute; left:calc(var(--ag-space-2) * -1); top:var(--ag-space-1); bottom:var(--ag-space-1);
  width:var(--ag-border-strong); background:var(--ag-ink); }
html:root[data-ag-surface="owner"] .nav-item.nav-sub{ padding-left:var(--ag-space-4); font-size:var(--ag-type-small); }
html:root[data-ag-surface="owner"] .nav-count{ font-family:var(--ag-font-mono); font-size:var(--ag-type-label); font-weight:var(--ag-weight-medium); line-height:var(--ag-leading-body);
  padding:0 var(--ag-space-1); border-radius:var(--ag-radius-sm); background:var(--ag-attention); color:var(--ag-attention-contrast); }
html:root[data-ag-surface="owner"] .nav-item .beta{ font-family:var(--ag-font-mono); font-size:var(--ag-type-label); letter-spacing:.06em; text-transform:uppercase; color:var(--ag-ink-3);
  border:var(--ag-border-thin) solid var(--ag-line); background:none; padding:0 var(--ag-space-1); border-radius:var(--ag-radius-sm); }
html:root[data-ag-surface="owner"] .sidebar-footer{ padding:var(--ag-space-3) var(--ag-space-4) var(--ag-space-4); }
html:root[data-ag-surface="owner"] .user-avatar{ width:var(--ag-space-5); height:var(--ag-space-5); border-radius:var(--ag-radius-pill); background:var(--ag-ink); color:var(--ag-canvas); border:0; }
html:root[data-ag-surface="owner"] .user-email{ font-size:var(--ag-type-caption); color:var(--ag-ink-3); }
html:root[data-ag-surface="owner"] .topbar{ background:var(--ag-canvas); border-bottom:var(--ag-border-thin) solid var(--ag-line); padding:0 var(--ag-gutter-desktop) 0 var(--ag-gutter-desktop); }
html:root[data-ag-surface="owner"] .ag-find-input{ min-height:calc(var(--ag-control-h-sm) + var(--ag-space-1) / 2); border-radius:var(--ag-radius-sm); border:var(--ag-border-thin) solid var(--ag-line-strong);
  background:var(--ag-surface); font-size:var(--ag-type-small); }
html:root[data-ag-surface="owner"] .ag-find-input:focus{ border-color:var(--ag-ink); background:var(--ag-surface-raised); }
html:root[data-ag-surface="owner"] .ag-find-kbd{ font-family:var(--ag-font-mono); border:var(--ag-border-thin) solid var(--ag-line); border-radius:var(--ag-radius-sm); background:none; }
html:root[data-ag-surface="owner"] .ag-explain-btn{ border-radius:var(--ag-radius-sm); border-color:var(--ag-line-strong); background:none; color:var(--ag-ink); font-weight:var(--ag-weight-medium); }
html:root[data-ag-surface="owner"] .ag-bell{ border-radius:var(--ag-radius-sm); }
html:root[data-ag-surface="owner"] .muted,html:root[data-ag-surface="owner"] .ag-t-caption{ overflow-wrap:anywhere; }
html:root[data-ag-surface="owner"] .ag-bell b{ font-family:var(--ag-font-mono); background:var(--ag-attention); color:var(--ag-attention-contrast); }
html:root[data-ag-surface="owner"] .page-body{ padding-left:var(--ag-gutter-desktop); padding-right:var(--ag-gutter-desktop); padding-top:var(--ag-space-4); }
@media (min-width: 1241px){html:root[data-ag-surface="owner"] .page-main > .page-body{ padding-right:0; }
html:root[data-ag-surface="owner"] .page-main{ padding-right:var(--ag-gutter-desktop); }}
html:root[data-ag-surface="owner"] .page-compass,html:root[data-ag-surface="owner"] .page-receipt,html:root[data-ag-surface="owner"] .ops-view,html:root[data-ag-surface="owner"] .page-tabs-slot{ margin-left:var(--ag-gutter-desktop); margin-right:var(--ag-gutter-desktop); padding-left:0; padding-right:0; }
html:root[data-ag-surface="owner"] .page-head-slot{ padding:var(--ag-space-5) var(--ag-gutter-desktop) 0; }
html:root[data-ag-surface="owner"] .ag-pagehead{ gap:0; padding:0 0 var(--ag-space-3); border-bottom:var(--ag-border-strong) solid var(--ag-ink); }
html:root[data-ag-surface="owner"] .ag-pagehead-folio{ display:flex; flex-wrap:wrap; gap:0 var(--ag-space-2); font-family:var(--ag-font-mono); font-size:var(--ag-type-label); font-weight:var(--ag-weight-medium);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ag-ink-3); }
html:root[data-ag-surface="owner"] .ag-pagehead-folio span + span::before{ content:"·"; margin-right:var(--ag-space-2); }
html:root[data-ag-surface="owner"] .ag-pagehead-top{ align-items:flex-end; gap:var(--ag-space-2) var(--ag-space-5); margin:var(--ag-space-1) 0 var(--ag-space-1); }
html:root[data-ag-surface="owner"] .ag-pagehead h2{ font-size:var(--ag-type-page); font-weight:var(--ag-weight-normal); letter-spacing:-.02em; line-height:1.08; }
html:root[data-ag-surface="owner"] .ag-pagehead-says{ max-width:80ch; font-family:var(--ag-font-display); font-size:var(--ag-type-body-lg); line-height:1.5; color:var(--ag-ink-2); }
html:root[data-ag-surface="owner"] .ag-pagehead-do{ padding-bottom:var(--ag-space-1); gap:var(--ag-space-2); }
html:root[data-ag-surface="owner"] .ag-x-pg{ border-radius:var(--ag-radius-pill); }
html:root[data-ag-surface="owner"] .ag-pagehead .ag-more > summary{ font-family:var(--ag-font-mono); font-size:var(--ag-type-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ag-ink-3); }
html:root[data-ag-surface="owner"] .page-compass-inner{ border:0; border-left:0; background:none; border-radius:0; padding:0; gap:var(--ag-space-1) var(--ag-space-4); }
html:root[data-ag-surface="owner"] .pc-lens{ padding:var(--ag-space-1) 0; font-family:var(--ag-font-mono); letter-spacing:.08em; color:var(--ag-ink-3); }
html:root[data-ag-surface="owner"] .pc-lane{ padding:var(--ag-space-1) 0; border-radius:0; border-bottom:var(--ag-border-thin) solid transparent; }
html:root[data-ag-surface="owner"] .pc-lane:hover{ background:none; border-bottom-color:var(--ag-ink); }
html:root[data-ag-surface="owner"] .pc-lane .pc-n{ color:var(--ag-ink); font-family:var(--ag-font-mono); font-weight:var(--ag-weight-medium); }
html:root[data-ag-surface="owner"] .pc-lane .pc-w{ color:var(--ag-ink-2); font-size:var(--ag-type-small); }
html:root[data-ag-surface="owner"] .page-title[data-module]{ border-left:0; padding-left:0; }
html:root[data-ag-surface="owner"] .page-receipt-inner{ border:0; border-top:var(--ag-border-thin) solid var(--ag-line); border-bottom:var(--ag-border-thin) solid var(--ag-line); border-radius:0; background:none; }
html:root[data-ag-surface="owner"] .rc-cell{ border-right:var(--ag-border-thin) solid var(--ag-line); }
html:root[data-ag-surface="owner"] .rc-k{ font-family:var(--ag-font-mono); letter-spacing:.08em; }
html:root[data-ag-surface="owner"] #moduleHead,html:root[data-ag-surface="owner"] #moduleTabs,html:root[data-ag-surface="owner"] #moduleSub{ display:none; }
html:root[data-ag-surface="owner"] .ag-modbar{ padding:0; border:0; min-height:0; }
html:root[data-ag-surface="owner"] .ag-modbar:not(:has(#railShow:not([hidden]))){ display:none; }
html:root[data-ag-surface="owner"] .card{ border-top:var(--ag-border-strong) solid var(--ag-ink); padding-top:var(--ag-space-1); gap:0; }
html:root[data-ag-surface="owner"] .card-header{ padding:var(--ag-space-1) 0 var(--ag-space-2); }
html:root[data-ag-surface="owner"] .card-title,html:root[data-ag-surface="owner"] .card-header > h3{ font-size:var(--ag-type-card); font-weight:var(--ag-weight-medium); letter-spacing:-.005em; }
html:root[data-ag-surface="owner"] .card-body{ border:0; border-radius:0; background:none; padding:0; }
html:root[data-ag-surface="owner"] .card > .card-body + .card-body{ border-top:var(--ag-border-thin) solid var(--ag-line); }
html:root[data-ag-surface="owner"] .card:has(> .card-body > table),html:root[data-ag-surface="owner"] .card:has(> table){ overflow-x:auto; }
html:root[data-ag-surface="owner"] .ag-worklist,html:root[data-ag-surface="owner"] .ag-box,html:root[data-ag-surface="owner"] .ag-rail-card,html:root[data-ag-surface="owner"] .ag-panel--ruled,html:root[data-ag-surface="owner"] .ag-panel--raised{ background:none; border:0; border-top:var(--ag-border-strong) solid var(--ag-ink); border-radius:0; box-shadow:none; }
html:root[data-ag-surface="owner"] .ag-worklist > :first-child{ border-radius:0; }
html:root[data-ag-surface="owner"] .ag-work{ border-bottom:var(--ag-border-thin) solid var(--ag-line); }
html:root[data-ag-surface="owner"] .ag-work h3{ font-family:var(--ag-font-display); font-size:var(--ag-type-body-lg); font-weight:var(--ag-weight-medium); }
html:root[data-ag-surface="owner"] .stats-row,html:root[data-ag-surface="owner"] .ag-figs{ gap:var(--ag-space-4) var(--ag-space-5); padding:var(--ag-space-2) 0 0; margin-bottom:var(--ag-space-4); }
html:root[data-ag-surface="owner"] .stats-row.four{ grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); }
html:root[data-ag-surface="owner"] .stat-card,html:root[data-ag-surface="owner"] .ag-figs .ag-metric{ background:none; border:0; border-top:var(--ag-border-thin) solid var(--ag-line-strong); border-radius:0; box-shadow:none;
  padding:var(--ag-space-2) 0 0; gap:var(--ag-space-1); min-width:0; container-type:inline-size; }
html:root[data-ag-surface="owner"] .stat-num,html:root[data-ag-surface="owner"] .ag-metric-value{ font-family:var(--ag-font-display); font-size:min(var(--ag-type-figure), 14cqi); font-weight:var(--ag-weight-normal); letter-spacing:-.015em; line-height:1; white-space:nowrap; }
html:root[data-ag-surface="owner"] .stat-label,html:root[data-ag-surface="owner"] .ag-metric-label{ font-size:var(--ag-type-caption); color:var(--ag-ink-3); max-width:22ch; }
html:root[data-ag-surface="owner"] .stat-card.bad .stat-num{ color:var(--ag-danger-label); }
html:root[data-ag-surface="owner"] .stat-sub{ font-size:var(--ag-type-caption); color:var(--ag-ink-3); }
html:root[data-ag-surface="owner"] table{ font-variant-numeric:tabular-nums; }
html:root[data-ag-surface="owner"] table th{ font-family:var(--ag-font-mono); font-size:var(--ag-type-label); font-weight:var(--ag-weight-medium); letter-spacing:.08em; text-transform:uppercase; color:var(--ag-ink-3);
  background:none; padding:var(--ag-space-2) var(--ag-space-3); border-top:var(--ag-border-thin) solid var(--ag-ink); border-bottom:var(--ag-border-thin) solid var(--ag-ink); white-space:nowrap; }
html:root[data-ag-surface="owner"] table td{ padding:var(--ag-space-3); border-bottom:var(--ag-border-thin) solid var(--ag-line); font-size:var(--ag-type-small); color:var(--ag-ink); }
html:root[data-ag-surface="owner"] table tfoot td{ font-weight:var(--ag-weight-semibold); border-top:var(--ag-border-thin) solid var(--ag-ink); border-bottom:calc(var(--ag-border-strong) + var(--ag-border-thin)) double var(--ag-ink); }
html:root[data-ag-surface="owner"] .table-wrap{ overflow:clip; }
html:root[data-ag-surface="owner"] .ag-table th{ background:var(--ag-canvas); }
html:root[data-ag-surface="owner"] .badge,html:root[data-ag-surface="owner"] .rel-pill,html:root[data-ag-surface="owner"] .inv-status,html:root[data-ag-surface="owner"] .kase-sev{ background:none; border:0; border-radius:0; padding:0; font-size:var(--ag-type-small); font-weight:var(--ag-weight-medium); color:var(--ag-ink-2);
  display:inline-flex; align-items:center; gap:var(--ag-space-1); white-space:nowrap; }
html:root[data-ag-surface="owner"] .badge::before,html:root[data-ag-surface="owner"] .rel-pill::before{ content:""; width:7px; height:7px; border-radius:var(--ag-radius-pill); background:currentColor; flex:none; }
html:root[data-ag-surface="owner"] .badge-green{ background:none; border:0; color:var(--ag-ink-3); font-weight:var(--ag-weight-normal); }
html:root[data-ag-surface="owner"] .badge-orange{ background:none; border:0; color:var(--ag-warning-label); }
html:root[data-ag-surface="owner"] .inv-status.paid{ color:var(--ag-ink-3); background:none; font-weight:var(--ag-weight-normal); }
html:root[data-ag-surface="owner"] .inv-status.open,html:root[data-ag-surface="owner"] .inv-status.draft,html:root[data-ag-surface="owner"] .inv-status.uncollectible,html:root[data-ag-surface="owner"] .inv-status.void{ color:var(--ag-warning-label); background:none; }
html:root[data-ag-surface="owner"] .ag-status--positive{ color:var(--ag-ink-3); font-weight:var(--ag-weight-normal); --tone:var(--ag-positive); }
html:root[data-ag-surface="owner"] .ag-status--neutral{ color:var(--ag-ink-2); }
html:root[data-ag-surface="owner"] .ag-callout,html:root[data-ag-surface="owner"] .dw-block{ border-left:var(--ag-border-strong) solid var(--ag-attention); border-radius:0; background:color-mix(in srgb, var(--ag-attention) 14%, var(--ag-canvas)); }
html:root[data-ag-surface="owner"] .field-input,html:root[data-ag-surface="owner"] .field-textarea,html:root[data-ag-surface="owner"] .field-select{ background:var(--ag-surface-raised); border-color:var(--ag-line-strong); border-radius:var(--ag-radius-sm); font-size:var(--ag-type-small); }
html:root[data-ag-surface="owner"] .field-input:focus,html:root[data-ag-surface="owner"] .field-textarea:focus,html:root[data-ag-surface="owner"] .field-select:focus{ border-color:var(--ag-ink); box-shadow:none; outline:2px solid var(--ag-focus); outline-offset:1px; }
html:root[data-ag-surface="owner"] .field-label{ font-size:var(--ag-type-caption); font-weight:var(--ag-weight-medium); color:var(--ag-ink-2); }
html:root[data-ag-surface="owner"] .modal,html:root[data-ag-surface="owner"] .dw-panel,html:root[data-ag-surface="owner"] .toast,html:root[data-ag-surface="owner"] .ag-dialog{ border:var(--ag-border-thin) solid var(--ag-ink); border-radius:var(--ag-radius-sm); box-shadow:var(--ag-shadow-3); }
html:root[data-ag-surface="owner"] .modal-title,html:root[data-ag-surface="owner"] .dw-head b{ font-family:var(--ag-font-display); font-size:var(--ag-type-card); font-weight:var(--ag-weight-medium); }
@media (max-width: 1100px){html:root[data-ag-surface="owner"] .topbar{ padding:0 var(--ag-gutter-mobile); }
html:root[data-ag-surface="owner"] .page-body,html:root[data-ag-surface="owner"] .page-main > .page-body{ padding-left:var(--ag-gutter-tablet); padding-right:var(--ag-gutter-tablet); }
html:root[data-ag-surface="owner"] .page-compass,html:root[data-ag-surface="owner"] .page-receipt,html:root[data-ag-surface="owner"] .ops-view,html:root[data-ag-surface="owner"] .page-tabs-slot{ margin-left:var(--ag-gutter-tablet); margin-right:var(--ag-gutter-tablet); }
html:root[data-ag-surface="owner"] .page-head-slot{ padding:var(--ag-space-4) var(--ag-gutter-tablet) 0; }}
@media (max-width: 860px){html:root[data-ag-surface="owner"] .sidebar{ box-shadow:none; }
html:root[data-ag-surface="owner"] .layout.nav-open .sidebar{ box-shadow:var(--ag-shadow-3); }
html:root[data-ag-surface="owner"] .topbar{ flex-wrap:nowrap; height:var(--ag-topbar-height); min-height:var(--ag-topbar-height); gap:var(--ag-space-1); }
html:root[data-ag-surface="owner"] .topbar-left{ min-width:0; flex:0 0 auto; }
html:root[data-ag-surface="owner"] .topbar:has(.topbar-actions:not(:empty)){ flex-wrap:wrap; height:auto; }
html:root[data-ag-surface="owner"] .topbar-actions:not(:empty){ order:5; flex:1 0 100%; justify-content:flex-end; padding-bottom:var(--ag-space-2); }
html:root[data-ag-surface="owner"] .menu-btn{ border:0; background:none; border-radius:var(--ag-radius-sm); }
html:root[data-ag-surface="owner"] .ag-find{ flex:0 0 auto; width:var(--ag-control-h-sm); min-width:0; margin-left:auto; }
html:root[data-ag-surface="owner"] .ag-find-input{ padding:0; color:transparent; cursor:pointer; background:none; border-color:transparent; }
html:root[data-ag-surface="owner"] .ag-find-input::placeholder{ color:transparent; }
html:root[data-ag-surface="owner"] .ag-find-kbd{ display:none; }
html:root[data-ag-surface="owner"] .ag-find:focus-within{ position:absolute; left:var(--ag-gutter-mobile); right:var(--ag-gutter-mobile); width:auto; z-index:45; }
html:root[data-ag-surface="owner"] .ag-find:focus-within .ag-find-input{ padding-left:calc(var(--ag-space-4) * 2); color:var(--ag-ink); cursor:text; background:var(--ag-surface-raised); border-color:var(--ag-line-strong); }
html:root[data-ag-surface="owner"] .ag-find:focus-within .ag-find-input::placeholder{ color:var(--ag-ink-3); }
html:root[data-ag-surface="owner"] .ag-explain-btn #ag-explain-lbl{ display:none; }
html:root[data-ag-surface="owner"] .agoria-theme-toggle{ display:none; }
html:root[data-ag-surface="owner"] .menu-btn,html:root[data-ag-surface="owner"] .ag-explain-btn,html:root[data-ag-surface="owner"] .ag-bell,html:root[data-ag-surface="owner"] .ag-find,html:root[data-ag-surface="owner"] .ag-find-input{ min-width:2.75rem; min-height:2.75rem; flex:none; }
html:root[data-ag-surface="owner"] .ag-find:focus-within{ min-width:0; }
html:root[data-ag-surface="owner"] .table-wrap,html:root[data-ag-surface="owner"] .card:has(table){ overflow-x:auto; }}
@media (max-width: 720px){html:root[data-ag-surface="owner"] .topbar{ padding:0 var(--ag-gutter-mobile); }
html:root[data-ag-surface="owner"] .page-body,html:root[data-ag-surface="owner"] .page-main > .page-body{ padding-left:var(--ag-gutter-mobile); padding-right:var(--ag-gutter-mobile); }
html:root[data-ag-surface="owner"] .page-compass,html:root[data-ag-surface="owner"] .page-receipt,html:root[data-ag-surface="owner"] .ops-view,html:root[data-ag-surface="owner"] .page-tabs-slot{ margin-left:var(--ag-gutter-mobile); margin-right:var(--ag-gutter-mobile); }
html:root[data-ag-surface="owner"] .page-head-slot{ padding:var(--ag-space-3) var(--ag-gutter-mobile) 0; }
html:root[data-ag-surface="owner"] .ag-pagehead-top{ flex-direction:column; align-items:stretch; }
html:root[data-ag-surface="owner"] .ag-pagehead h2{ font-size:var(--ag-type-page); }
html:root[data-ag-surface="owner"] .ag-pagehead-says{ font-size:var(--ag-type-body); }
html:root[data-ag-surface="owner"] .stats-row,html:root[data-ag-surface="owner"] .ag-figs{ display:flex; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }
html:root[data-ag-surface="owner"] .stats-row,html:root[data-ag-surface="owner"] .ag-figs{ gap:var(--ag-space-4); }
html:root[data-ag-surface="owner"] .stat-card,html:root[data-ag-surface="owner"] .ag-figs .ag-metric{ flex:0 0 9.5rem; scroll-snap-align:start; }}
html:root[data-ag-surface="owner"][data-density="compact"] .nav-item{ min-height:var(--ag-control-h-sm); }
html:root[data-ag-surface="owner"][data-density="compact"] table td{ padding-top:var(--ag-space-2); padding-bottom:var(--ag-space-2); }
html:root[data-ag-surface="owner"][data-density="compact"] .stats-row,html:root[data-ag-surface="owner"][data-density="compact"] .ag-figs{ padding-top:var(--ag-space-2); padding-bottom:var(--ag-space-1); }
html:root[data-ag-surface="owner"][data-density="compact"] .card-header{ padding-bottom:var(--ag-space-1); }
@media (prefers-reduced-motion: reduce){html:root[data-ag-surface="owner"] *{ transition:none !important; animation:none !important; }}