/* Design tokens: CSS variables only, no rules for elements. Light is the default; dark applies when
   chosen (html[data-theme="dark"]). Appearance (js/ui/appearance.js) sets html[data-scheme] (colour
   scheme), [data-font] (typeface), [data-density] (--dz / --tz and the spacing steps) and [data-style]
   (surface tokens); they are also set on the preview elements in the Appearance dialog, so the
   selectors are not tied to :root. Mode colours are a single-hue ordinal ramp validated for each
   surface (light #fbfaf5, dark #161b21): manual → hybrid → system → automated. */
:root,[data-scheme="harbour"]{
  color-scheme:light;
  --bg:#efede5;
  --surface:#fbfaf5;
  --surface-2:#ffffff;
  --ink:#14202e;
  --ink-2:#3e4a57;
  --muted:#5d6874;
  --line:#e2ddcf;
  --grid:#ebe7dc;
  --accent:#e5c100;
  --accent-ink:#7a6000;
  --accent-wash:#faf1c9;
  --series:#2a78d6;
  --series-track:#dbe8f8;
  --m-manual:#86b6ef;
  --m-hybrid:#3987e5;
  --m-system:#1c5cab;
  --m-automated:#0d366b;
  --on-manual:#0b0b0b;
  --on-hybrid:#ffffff;
  --on-system:#ffffff;
  --on-automated:#ffffff;
  /* SIPOC levels reuse the mode ramp (the levels are the modes); "not rated" is neutral */
  --m-unrated:#cfc9ba;
  --on-unrated:#14202e;
  /* Responsibility (does, reviews, approves) is not a level, so it has its own categorical colours */
  --au-does:#4f8f73;
  --au-reviews:#c2893a;
  --au-approves:#7b5ea7;
  --au-none:#cfc9ba;
  --on-au:#ffffff;
  --warning:#fab219;
  --focus:#1c5cab;
  --up:#1c5cab;
  --down:#9a6020;
  --shadow:0 1px 2px #14202e14, 0 6px 18px #14202e0d;
  --radius:14px;
  --radius-sm:8px;
  --font-system:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Type: the scheme's own pairing unless a font is chosen ([data-font] below). --font-display is for
     page and card titles and hero figures; with a one-family pairing it is the same face. */
  --font:var(--theme-font,var(--font-system));
  --font-display:var(--theme-display,var(--font));
  /* Overview page: dark masthead band and the 5-step handoff heat ramp */
  --band:#14202e; --band-ink:#f6f3e8; --band-muted:#b9c0c8;
  --h1:#86b6ef; --h2:#5598e7; --h3:#2a78d6; --h4:#1c5cab; --h5:#104281;
  --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#ffffff; --on-h4:#ffffff; --on-h5:#ffffff;
  --band-line-strong:#ffffff40; --band-line:#ffffff22; --band-line-faint:#ffffff1a;
  /* Print */
  --print-paper:#ffffff; --print-ink:#14202e; --print-ink-2:#3e4a57;
  /* Text on fixed-colour fills */
  --on-accent:#14202e;
  --on-strong:#ffffff;
  /* Overlays and elevation */
  --scrim:#14202e4d;
  --shadow-drawer:12px 0 32px #14202e26;
  --shadow-drawer-end:-12px 0 32px #14202e26;
  --shadow-panel:-8px 0 24px #14202e14;
  --shadow-overlay:0 12px 40px #14202e33;
  /* Change markers: + added, ~ changed, − deleted (text on each is --on-chg) */
  --chg-add:#1f7a4d;
  --chg-add-wash:#e3f3ea;
  --chg-edit:#9a6020;
  --chg-edit-wash:#f8ecd9;
  --chg-del:#b3261e;
  --chg-del-wash:#f9e3e1;
  --on-chg:#ffffff;
  --range-wash:#eef4fc;
  --from-fade:.4; /* opacity of the From version in compare charts */
  --band-fade:.35; --band-hover:.7; /* Sankey bands at rest and on hover */
  /* Deltas: higher (pos) / lower (neg); not good/bad */
  --pos:#1f7a4d;
  --neg:#b3261e;
  /* Demo history banner */
  --demo:#6b3fa0;
  --demo-wash:#efe8f7;
  /* Spacing in rem (grows with text); radii stay in px */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  /* Density hooks: Normal values. [data-density] below scales these, the --space-* steps and --tz. */
  --pad-page-y:0.625rem;   /* page top and bottom */
  --pad-card-y:0.625rem; --pad-card-x:0.875rem;
  --gap-card:0.75rem;      /* between cards */
  --gap-tile:0.625rem;     /* between small tiles */
  --gap-block:0.75rem;     /* between sections inside a card */
  --pad-cell-y:0.4375rem; --pad-cell-x:0.625rem; /* table cells */
  --gap-row:0.3125rem;     /* between rows of bars, dumbbells and lists */
  --pad-row-y:0.1875rem;   /* ladder and list rows */
  --ctl-h:2rem;            /* buttons, inputs, tabs */
  --stack-h:1.1875rem; --stack-thin:0.875rem; --bar-h-fill:0.875rem;
  /* Type scale in rem, so text follows the reader's browser font size (1rem = 16px by default).
     --tz is the density's step of the scale (1 at Normal). */
  --tz:1; --dz:1; /* density: type step and spacing factor (1 at Normal) */
  --fs-body:calc(0.9375rem * var(--tz));
  --fs-code:.92em;
  --fs-3xs:calc(0.625rem * var(--tz));
  --fs-2xs:calc(0.65625rem * var(--tz));
  --fs-xs:calc(0.6875rem * var(--tz));
  --fs-xs-plus:calc(0.71875rem * var(--tz));
  --fs-sm:calc(0.75rem * var(--tz));
  --fs-sm-plus:calc(0.78125rem * var(--tz));
  --fs-md:calc(0.8125rem * var(--tz));
  --fs-base:calc(0.875rem * var(--tz));
  --fs-lg:calc(1rem * var(--tz));
  --fs-lg-plus:calc(1.0625rem * var(--tz));
  --fs-xl:calc(1.125rem * var(--tz));
  --fs-2xl:calc(1.25rem * var(--tz));
  --fs-3xl:calc(1.375rem * var(--tz));
  --fs-4xl:calc(2rem * var(--tz));
  --fs-5xl:calc(2.25rem * var(--tz));
  --fs-6xl:calc(2.5rem * var(--tz));
  /* Overview headings and fluid display sizes */
  --fs-h4:calc(1.5rem * var(--tz));
  --fs-h3:calc(1.625rem * var(--tz));
  --fs-h2:calc(1.875rem * var(--tz));
  --fs-h1:calc(2.125rem * var(--tz));
  --fs-display:clamp(1.75rem,4vw,2.875rem);
  --fs-display-sm:clamp(1.375rem,2.6vw,1.875rem);
  /* Font weights */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-strong:650;
  --fw-title:680;
  --fw-bold:700;
  --fw-heavy:800;
  --fw-extra:750;
  --font-serif:Georgia,serif;
  /* Type roles for cards: kicker, title, key figure, body, meta */
  --t-kicker:var(--fs-sm);
  --t-title:var(--fs-lg);
  --t-figure:var(--fs-4xl);
  --t-body:var(--fs-md);
  --t-label:var(--fs-sm);
  --t-figure-sm:var(--fs-3xl);
  --t-meta:var(--fs-xs);
  /* Radii (--radius-sm 8px and --radius 14px are defined above) */
  --radius-0:1px;
  --radius-1:2px;
  --radius-2:3px;
  --radius-3:4px;
  --radius-xs:5px;
  --radius-5:6px;
  --radius-md:10px;
  --radius-pill:999px;
  --radius-round:50%;
  /* Widths of drawers, dialogs and popovers, in rem so they follow the reader's text size (D61). */
  /* Icon sizes, in rem so icons grow with the reader's text size, like the words beside them. */
  --icon-xs:0.75rem;          /* 12px: the external-link mark */
  --icon-sm:0.875rem;         /* 14px */
  --icon:1rem;                /* 16px: rows, buttons, lists */
  --icon-md:1.125rem;         /* 18px: the menu, icon buttons, search */
  --icon-lg:1.375rem;         /* 22px: cards */
  --w-menu:15rem;             /* the menu's group list */
  --w-menu-sub:17rem;         /* the sub-menu beside it */
  --w-drawer-end:21.25rem;    /* filter drawers on the right */
  --w-drawer-range:27.5rem;   /* the version drawer */
  --w-picker:26rem;
  --w-editor:45rem;
  --w-dialog:46rem;           /* Appearance and other settings dialogs */
  --w-palette:40rem;          /* ⌘K search */
  --w-pop:23.75rem;
  --w-data:37.5rem;
  /* Illustrations (illustrations/*.svg, from unDraw): each drawing's colours are these, aliases of the
     scheme's own tokens, so every scheme and dark mode repaints them. Skin tones stay fixed. */
  --il-accent:var(--accent);
  --il-accent-2:var(--accent-ink);
  --il-dark:var(--ink-2);
  --il-light:var(--surface-2);
  --il-soft:var(--grid);
  --il-line:var(--line);
  --il-skin:#ffb8b8;
  --il-skin-dark:#a0616a;
  /* Page layers. Small z-index values (1–3) inside a table or grid only order its sticky headers. */
  --z-bar:6;
  --z-panel:8;
  --z-pop:9;
  --z-scrim:10;
  --z-drawer:11;
  --z-picker:12;
  --z-toast:15;
  --z-tip:20;
}
:root[data-theme="dark"],[data-scheme="harbour"][data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1318; --surface:#161b21; --surface-2:#1c222a; --ink:#eef1f4; --ink-2:#c8ced6; --muted:#9aa4b0;
  --line:#2a323c; --grid:#232a33; --accent:#e5c100; --accent-ink:#f0d44a; --accent-wash:#2e2a14;
  --series:#3987e5; --series-track:#1d2a3a;
  --m-manual:#184f95; --m-hybrid:#2a78d6; --m-system:#6da7ec; --m-automated:#b7d3f6;
  --on-manual:#ffffff; --on-hybrid:#ffffff; --on-system:#0b0b0b; --on-automated:#0b0b0b;
  --m-unrated:#434b55; --on-unrated:#eef1f4;
  --au-does:#6fbf98; --au-reviews:#e0a95c; --au-approves:#a88ad6; --au-none:#434b55; --on-au:#0b0b0b;
  --focus:#6da7ec; --shadow:0 1px 2px #0006, 0 6px 18px #0004;
  --band:#0a0d11; --band-ink:#eef1f4; --band-muted:#9aa4b0;
  --h1:#184f95; --h2:#256abf; --h3:#3987e5; --h4:#6da7ec; --h5:#9ec5f4;
  --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#ffffff; --on-h4:#0b0b0b; --on-h5:#0b0b0b;
  --scrim:#0009; --shadow-drawer:12px 0 32px #0008; --shadow-drawer-end:-12px 0 32px #0008; --shadow-panel:-8px 0 24px #0006; --shadow-overlay:0 12px 40px #000a;
  --chg-add:#4cc38a; --chg-add-wash:#16301f; --chg-edit:#e0a45c; --chg-edit-wash:#33261a; --chg-del:#f07a70; --chg-del-wash:#3a1d1b; --on-chg:#0b0b0b;
  --range-wash:#1a2533; --pos:#4cc38a; --neg:#f07a70; --demo:#b99be0; --demo-wash:#2a2138;
}

/* Colour schemes. Each overrides the palette tokens only (surfaces, ink, lines, accent, focus, the four-level ramp, the heat ramp and the masthead band); generated and contrast-checked to WCAG AA. Harbour (the default) is the tokens above. */
/* Ledger: green ledger paper, a red pen accent, sharpened corners. */
[data-scheme="ledger"]{color-scheme:light;--radius:10px;--radius-sm:6px;--bg:#e6efe9; --surface:#f6f9f7; --surface-2:#fefefe; --ink:#142e21; --ink-2:#315e47; --muted:#446f59; --line:#ceded4; --grid:#dbe6df; --accent:#e26f7b; --accent-ink:#5d131a; --accent-wash:#f8dde0; --on-accent:#0b0b0b; --series:#45b082; --series-track:#ddeee7; --m-manual:#98d7bc; --m-hybrid:#47b887; --m-system:#2e7656; --m-automated:#183e2e; --on-manual:#0b0b0b; --on-hybrid:#0b0b0b; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#bed0c4; --on-unrated:#142e21; --au-none:#bed0c4; --focus:#2f7959; --up:#2f7959; --h1:#a7ddc5; --h2:#7bcca9; --h3:#4bb989; --h4:#368c67; --h5:#276349; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#0b0b0b; --on-h5:#ffffff; --band:#142e23; --range-wash:#eef7f3}
[data-scheme="ledger"][data-theme="dark"]{color-scheme:dark;--radius:10px;--radius-sm:6px;--bg:#0e1612; --surface:#181e1b; --surface-2:#1f2824; --ink:#edf3ef; --ink-2:#c2d6c9; --muted:#99b8a3; --line:#2f3c36; --grid:#242e29; --accent:#e56c74; --accent-ink:#eb8e94; --accent-wash:#361618; --on-accent:#0b0b0b; --series:#62bc92; --series-track:#1f372c; --m-manual:#25563f; --m-hybrid:#3d8f69; --m-system:#70c29c; --m-automated:#bfe3d2; --on-manual:#ffffff; --on-hybrid:#0b0b0b; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#46594f; --on-unrated:#edf3ef; --au-none:#46594f; --focus:#8dceb0; --up:#8dceb0; --h1:#285d44; --h2:#37815e; --h3:#48a87b; --h4:#77c5a1; --h5:#b8e0cd; --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#0b0b0b; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#09110d; --range-wash:#1a2e24}
/* Blueprint: drafting-table cyan, safety-orange accent; dark is a true blueprint. */
[data-scheme="blueprint"]{color-scheme:light;--radius:14px;--radius-sm:8px;--bg:#e4edf1; --surface:#f6f8f9; --surface-2:#fefefe; --ink:#0d2135; --ink-2:#25476a; --muted:#395979; --line:#cbdae1; --grid:#d9e3e8; --accent:#f9a06c; --accent-ink:#7f3205; --accent-wash:#fde6d8; --on-accent:#0b0b0b; --series:#1bb4da; --series-track:#d6eff5; --m-manual:#77d6ee; --m-hybrid:#1aacd1; --m-system:#117088; --m-automated:#093c49; --on-manual:#0b0b0b; --on-hybrid:#0b0b0b; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#bbcbd3; --on-unrated:#0d2135; --au-none:#bbcbd3; --focus:#137c96; --up:#137c96; --h1:#92def2; --h2:#5cceeb; --h3:#21bde4; --h4:#158eac; --h5:#0f657b; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#0b0b0b; --on-h5:#ffffff; --band:#0b2441; --range-wash:#eaf7fa}
[data-scheme="blueprint"][data-theme="dark"]{color-scheme:dark;--radius:14px;--radius-sm:8px;--bg:#1c2531; --surface:#222d3c; --surface-2:#293648; --ink:#eaf0f6; --ink-2:#b8cce0; --muted:#89a8c8; --line:#36475e; --grid:#2c3b4e; --accent:#fa9338; --accent-ink:#fba860; --accent-wash:#5c3819; --on-accent:#0b0b0b; --series:#35d1e9; --series-track:#1c5a63; --m-manual:#0b5965; --m-hybrid:#1292a5; --m-system:#35d1e9; --m-automated:#b6eef7; --on-manual:#ffffff; --on-hybrid:#0b0b0b; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#48607f; --on-unrated:#eaf0f6; --au-none:#48607f; --focus:#6cddef; --up:#6cddef; --h1:#0d6977; --h2:#1292a5; --h3:#18bed8; --h4:#51d7ec; --h5:#a3eaf5; --on-h1:#ffffff; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#071222; --range-wash:#194f58}
/* Mulberry: wine and aubergine with a brass accent, softly rounded. */
[data-scheme="mulberry"]{color-scheme:light;--radius:18px;--radius-sm:10px;--bg:#f0e5ec; --surface:#f9f6f8; --surface-2:#fefefe; --ink:#2d162d; --ink-2:#5b335b; --muted:#6c476c; --line:#e0cdd9; --grid:#e7dae3; --accent:#f6bd5a; --accent-ink:#6b4606; --accent-wash:#fdefd8; --on-accent:#0b0b0b; --series:#a442b3; --series-track:#ecdcef; --m-manual:#ddb5e3; --m-hybrid:#b863c5; --m-system:#82348d; --m-automated:#441c4a; --on-manual:#0b0b0b; --on-hybrid:#0b0b0b; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#d1bdca; --on-unrated:#2d162d; --au-none:#d1bdca; --focus:#712d7b; --up:#712d7b; --h1:#d6a6de; --h2:#c279cd; --h3:#ac49bc; --h4:#82348d; --h5:#5c2565; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#ffffff; --on-h4:#ffffff; --on-h5:#ffffff; --band:#351537; --range-wash:#f6eef7}
[data-scheme="mulberry"][data-theme="dark"]{color-scheme:dark;--radius:18px;--radius-sm:10px;--bg:#1b131b; --surface:#251b25; --surface-2:#2f222f; --ink:#f3edf3; --ink-2:#d6c2d6; --muted:#b899b8; --line:#443144; --grid:#352735; --accent:#f5b83d; --accent-ink:#f7c664; --accent-wash:#433314; --on-accent:#0b0b0b; --series:#b457c7; --series-track:#3c1f41; --m-manual:#521f5c; --m-hybrid:#883399; --m-system:#bb66cc; --m-automated:#e0bae8; --on-manual:#ffffff; --on-hybrid:#ffffff; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#624762; --on-unrated:#f3edf3; --au-none:#624762; --focus:#c985d6; --up:#c985d6; --h1:#582163; --h2:#7a2e8a; --h3:#a03cb4; --h4:#be6ecf; --h5:#ddb3e6; --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#ffffff; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#150915; --range-wash:#321b37}
/* Graphite: near-monochrome slate, one indigo accent, squarest corners. */
[data-scheme="graphite"]{color-scheme:light;--radius:4px;--radius-sm:2px;--bg:#eaeaec; --surface:#f7f7f8; --surface-2:#fefefe; --ink:#1e2024; --ink-2:#42454d; --muted:#54575f; --line:#d4d6d8; --grid:#dfe0e2; --accent:#9174e7; --accent-ink:#281268; --accent-wash:#e3dcf9; --on-accent:#0b0b0b; --series:#6f7785; --series-track:#e4e5e7; --m-manual:#c7cad1; --m-hybrid:#8a919e; --m-system:#585e6a; --m-automated:#2e3138; --on-manual:#0b0b0b; --on-hybrid:#0b0b0b; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#c5c6c9; --on-unrated:#1e2024; --au-none:#c5c6c9; --focus:#4d525c; --up:#4d525c; --h1:#bcc0c7; --h2:#9ba0ab; --h3:#777e8d; --h4:#585e6a; --h5:#3f434b; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#ffffff; --on-h5:#ffffff; --band:#1c1e22; --range-wash:#f1f2f3}
[data-scheme="graphite"][data-theme="dark"]{color-scheme:dark;--radius:4px;--radius-sm:2px;--bg:#141415; --surface:#1d1d1e; --surface-2:#252627; --ink:#efeff1; --ink-2:#c9cbcf; --muted:#a4a7ad; --line:#373839; --grid:#2a2b2c; --accent:#9a77f8; --accent-ink:#b79efa; --accent-wash:#1f133f; --on-accent:#0b0b0b; --series:#858b99; --series-track:#2b2d31; --m-manual:#383b43; --m-hybrid:#5d636f; --m-system:#9096a2; --m-automated:#cdd0d5; --on-manual:#ffffff; --on-hybrid:#ffffff; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#505153; --on-unrated:#efeff1; --au-none:#505153; --focus:#a6abb5; --up:#a6abb5; --h1:#3c4048; --h2:#545964; --h3:#6d7483; --h4:#959ba7; --h5:#c7cad1; --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#ffffff; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#0c0c0e; --range-wash:#242529}
/* Kiln: fired-clay browns with a deep teal accent. */
[data-scheme="kiln"]{color-scheme:light;--radius:8px;--radius-sm:4px;--bg:#f2eae4; --surface:#f9f7f5; --surface-2:#fefefe; --ink:#2b1e17; --ink-2:#594236; --muted:#695449; --line:#e3d5ca; --grid:#e9e0d8; --accent:#19d8e6; --accent-ink:#031a1c; --accent-wash:#daf9fb; --on-accent:#0b0b0b; --series:#d57420; --series-track:#f5e4d6; --m-manual:#f2c9a6; --m-hybrid:#e38f45; --m-system:#a95c19; --m-automated:#59300d; --on-manual:#0b0b0b; --on-hybrid:#0b0b0b; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#d4c6ba; --on-unrated:#2b1e17; --au-none:#d4c6ba; --focus:#925016; --up:#925016; --h1:#efbf95; --h2:#e79f5f; --h3:#df7c26; --h4:#a95c19; --h5:#784112; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#ffffff; --on-h5:#ffffff; --band:#321f15; --range-wash:#faf2eb}
[data-scheme="kiln"][data-theme="dark"]{color-scheme:dark;--radius:8px;--radius-sm:4px;--bg:#181410; --surface:#201d1a; --surface-2:#2a2522; --ink:#f3efed; --ink-2:#d6cbc2; --muted:#b8a799; --line:#3e3732; --grid:#302a27; --accent:#3bcec9; --accent-ink:#5cd6d2; --accent-wash:#1a3737; --on-accent:#0b0b0b; --series:#d48649; --series-track:#422b1a; --m-manual:#633817; --m-hybrid:#a55e27; --m-system:#d8915a; --m-automated:#eecdb5; --on-manual:#ffffff; --on-hybrid:#ffffff; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#5a5049; --on-unrated:#f3efed; --au-none:#5a5049; --focus:#e0a77b; --up:#e0a77b; --h1:#6b3d19; --h2:#955423; --h3:#c26e2e; --h4:#da9662; --h5:#ecc8ac; --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#0b0b0b; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#140e0b; --range-wash:#372416}

/* The standard look and the vibrant set (designed with the theme studio; checked for AA text contrast,
   an ordered level ramp that is never red or green, and deuteranopia/protanopia separation). Every
   ramp runs warm (not yet at system) to cool (level 3–4). Each scheme also names its own type,
   used when the font is "Theme font": --theme-font for text, --theme-display for titles and figures. */
/* Meridian: Cool daylight: white cards, navy ink, cobalt controls, a sand-to-teal ramp. */
[data-scheme="meridian"]{color-scheme:light;--radius:12px;--radius-sm:8px;--bg:#eef1f6; --surface:#ffffff; --surface-2:#f4f6fa; --ink:#0f1729; --ink-2:#354158; --muted:#586583; --line:#dbe1ec; --grid:#e6eaf2; --accent:#2a5bd7; --accent-ink:#1c43ad; --accent-wash:#e3eafc; --on-accent:#ffffff; --focus:#2a5bd7; --series:#2a5bd7; --series-track:#dae2f6; --m-manual:#f2bf5f; --m-hybrid:#de6a22; --m-system:#0b7e9c; --m-automated:#0b3f57; --on-manual:#0b0b0b; --on-hybrid:#0b0b0b; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#c1c9d6; --on-unrated:#0f1729; --au-none:#c1c9d6; --up:#0b7e9c; --down:#b4561a; --h1:#cfe9f1; --h2:#8fd0e2; --h3:#3fb1cf; --h4:#0b7e9c; --h5:#0b5d75; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#ffffff; --on-h5:#ffffff; --band:#0f1729; --band-ink:#f4f6fb; --band-muted:#a8b2c7; --range-wash:#e9effd; --pos:#136f40; --neg:#c2262f; --warning:#f2a30f; --chg-edit:#53627d; --chg-edit-wash:#e5e9f1; --demo:#6b4fd6; --demo-wash:#ece8fb}
[data-scheme="meridian"][data-theme="dark"]{color-scheme:dark;--radius:12px;--radius-sm:8px;--bg:#0b1019; --surface:#121925; --surface-2:#192131; --ink:#eef2f8; --ink-2:#c6cddb; --muted:#97a2b9; --line:#273143; --grid:#1f2837; --accent:#5b86f0; --accent-ink:#93b1ff; --accent-wash:#182b55; --on-accent:#0b0b0b; --focus:#93b1ff; --series:#5b86f0; --series-track:#1e2b48; --m-manual:#7d5a16; --m-hybrid:#dd7a2b; --m-system:#3db8d8; --m-automated:#c2f0fb; --on-manual:#ffffff; --on-hybrid:#0b0b0b; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#3b4557; --on-unrated:#eef2f8; --au-none:#3b4557; --up:#3db8d8; --down:#dd7a2b; --h1:#123f4f; --h2:#146a85; --h3:#1d95b8; --h4:#4dc2df; --h5:#a9e6f3; --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#0b0b0b; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#070b12; --band-ink:#eef2f8; --band-muted:#97a2b9; --range-wash:#16233a; --pos:#45c47c; --neg:#f36c6c; --warning:#f9b740; --chg-edit:#93a3bd; --chg-edit-wash:#232d3f; --demo:#b6a5f5; --demo-wash:#262047}
/* Aurora: Night sky: indigo-slate surfaces, an electric violet accent, a gold-to-blue ramp. */
[data-scheme="aurora"]{color-scheme:light;--radius:14px;--radius-sm:8px;--bg:#f1f1f7; --surface:#ffffff; --surface-2:#f6f5fb; --ink:#16142b; --ink-2:#3d3a5e; --muted:#605d84; --line:#dedceb; --grid:#e8e7f1; --accent:#6d4ce6; --accent-ink:#4d2ec2; --accent-wash:#eae4fc; --on-accent:#ffffff; --focus:#6d4ce6; --series:#2f6fe0; --series-track:#dbe5fb; --m-manual:#efc43f; --m-hybrid:#dd6418; --m-system:#0c74a4; --m-automated:#1e2f8a; --on-manual:#0b0b0b; --on-hybrid:#0b0b0b; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#c3c3d4; --on-unrated:#16142b; --au-none:#c3c3d4; --up:#0c74a4; --down:#b95a12; --h1:#d7ecf8; --h2:#9bd0ee; --h3:#4aa8d8; --h4:#0c74a4; --h5:#0a5678; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#ffffff; --on-h5:#ffffff; --band:#16142b; --band-ink:#f5f4ff; --band-muted:#aaa7c9; --range-wash:#ecebf8; --pos:#136f40; --neg:#c2262f; --warning:#e0940a; --chg-edit:#5f5c82; --chg-edit-wash:#e8e7f2; --demo:#b0246f; --demo-wash:#fbe3ef}
[data-scheme="aurora"][data-theme="dark"]{color-scheme:dark;--radius:14px;--radius-sm:8px;--bg:#0c0e1c; --surface:#141731; --surface-2:#1b1f42; --ink:#eeeefa; --ink-2:#c6c6e2; --muted:#9b9ac2; --line:#2b2f57; --grid:#232648; --accent:#a58bff; --accent-ink:#c3b0ff; --accent-wash:#2e2352; --on-accent:#0b0b0b; --focus:#c3b0ff; --series:#6a9bff; --series-track:#1e2f5a; --m-manual:#7a5a0e; --m-hybrid:#e07b2b; --m-system:#4cc2f0; --m-automated:#bdebff; --on-manual:#ffffff; --on-hybrid:#0b0b0b; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#3a3d60; --on-unrated:#eeeefa; --au-none:#3a3d60; --up:#4cc2f0; --down:#e07b2b; --h1:#14364f; --h2:#14608a; --h3:#1e8dc4; --h4:#4fc0ea; --h5:#b8e9ff; --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#0b0b0b; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#070814; --band-ink:#eeeefa; --band-muted:#9b9ac2; --range-wash:#1c2150; --pos:#45c47c; --neg:#f36c6c; --warning:#f9b740; --chg-edit:#a5a4cf; --chg-edit-wash:#272b50; --demo:#f28cc4; --demo-wash:#3c1f33}
/* Solstice: Noon light: warm white, a cyan accent, a gold-to-indigo ramp. */
[data-scheme="solstice"]{color-scheme:light;--radius:16px;--radius-sm:10px;--bg:#f5f2eb; --surface:#ffffff; --surface-2:#faf8f3; --ink:#1b1a2e; --ink-2:#43415e; --muted:#63617d; --line:#e4dfd4; --grid:#ece8de; --accent:#0a7d99; --accent-ink:#086a82; --accent-wash:#d9f1f7; --on-accent:#ffffff; --focus:#0d8aa8; --series:#5b4fcf; --series-track:#e3e0f7; --m-manual:#eebb38; --m-hybrid:#e26c2b; --m-system:#6a4ddf; --m-automated:#2a1f7a; --on-manual:#0b0b0b; --on-hybrid:#0b0b0b; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#cbc4b4; --on-unrated:#1b1a2e; --au-none:#cbc4b4; --up:#6a4ddf; --down:#b85312; --h1:#e6e1fb; --h2:#c1b6f4; --h3:#957ee9; --h4:#6a4ddf; --h5:#3f2fa8; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#ffffff; --on-h5:#ffffff; --band:#1b1a2e; --band-ink:#faf8f3; --band-muted:#b1aec6; --range-wash:#f0eef9; --pos:#136f40; --neg:#c2262f; --warning:#d97706; --chg-edit:#5f5d7a; --chg-edit-wash:#e9e7f0; --demo:#b0246f; --demo-wash:#fbe3ef}
[data-scheme="solstice"][data-theme="dark"]{color-scheme:dark;--radius:16px;--radius-sm:10px;--bg:#151321; --surface:#1d1a2c; --surface-2:#262238; --ink:#f3f1f8; --ink-2:#cdc9de; --muted:#a09cba; --line:#373252; --grid:#2d2942; --accent:#2fc1e0; --accent-ink:#6fd7ec; --accent-wash:#133b47; --on-accent:#0b0b0b; --focus:#6fd7ec; --series:#8f82f2; --series-track:#2c2853; --m-manual:#6b4e08; --m-hybrid:#d9752f; --m-system:#b8a6fa; --m-automated:#e6e0ff; --on-manual:#ffffff; --on-hybrid:#0b0b0b; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#45405e; --on-unrated:#f3f1f8; --au-none:#45405e; --up:#b8a6fa; --down:#d9752f; --h1:#2a2352; --h2:#46398f; --h3:#6e5bcf; --h4:#b8a6fa; --h5:#e6e0ff; --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#ffffff; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#0d0b16; --band-ink:#f3f1f8; --band-muted:#a09cba; --range-wash:#2a2547; --pos:#45c47c; --neg:#f36c6c; --warning:#f9b740; --chg-edit:#a5a1c2; --chg-edit-wash:#2c2842; --demo:#f28cc4; --demo-wash:#3c1f33}
/* Orchid: Lilac-grey page, a fuchsia accent, an apricot-to-teal ramp. */
[data-scheme="orchid"]{color-scheme:light;--radius:18px;--radius-sm:10px;--bg:#f2eff5; --surface:#ffffff; --surface-2:#f8f5fa; --ink:#1d1226; --ink-2:#463b54; --muted:#665b75; --line:#e1dbe8; --grid:#eae5ef; --accent:#d6297a; --accent-ink:#a0175a; --accent-wash:#fbe3ee; --on-accent:#ffffff; --focus:#d6297a; --series:#0c757a; --series-track:#d5ebeb; --m-manual:#f6b98a; --m-hybrid:#e0641c; --m-system:#0c757a; --m-automated:#04262b; --on-manual:#0b0b0b; --on-hybrid:#0b0b0b; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#c6bfce; --on-unrated:#1d1226; --au-none:#c6bfce; --up:#0c757a; --down:#b0461a; --h1:#d3eeee; --h2:#8fd3d5; --h3:#33a9ad; --h4:#0c757a; --h5:#04262b; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#ffffff; --on-h5:#ffffff; --band:#1d1226; --band-ink:#f8f5fa; --band-muted:#b3a8bf; --range-wash:#eee9f6; --pos:#136f40; --neg:#c2262f; --warning:#e0940a; --chg-edit:#8a5412; --chg-edit-wash:#f8ecd9; --demo:#5f5a6e; --demo-wash:#ebe8ef}
[data-scheme="orchid"][data-theme="dark"]{color-scheme:dark;--radius:18px;--radius-sm:10px;--bg:#120c17; --surface:#1b1322; --surface-2:#241a2d; --ink:#f5eef8; --ink-2:#d5c9dc; --muted:#a898b4; --line:#3b2d45; --grid:#2e2337; --accent:#ff5ea8; --accent-ink:#ff8fc3; --accent-wash:#3d1a36; --on-accent:#0b0b0b; --focus:#ff8fc3; --series:#2fbbc1; --series-track:#143a3e; --m-manual:#8a4a1a; --m-hybrid:#d46a20; --m-system:#2fbbc1; --m-automated:#d2f5f6; --on-manual:#ffffff; --on-hybrid:#0b0b0b; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#4a3d54; --on-unrated:#f5eef8; --au-none:#4a3d54; --up:#2fbbc1; --down:#d46a20; --h1:#0f3d40; --h2:#13636a; --h3:#1c979c; --h4:#2fbbc1; --h5:#d2f5f6; --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#0b0b0b; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#0a060e; --band-ink:#f5eef8; --band-muted:#a898b4; --range-wash:#2a2038; --pos:#45c47c; --neg:#f36c6c; --warning:#f9b740; --chg-edit:#e0a45c; --chg-edit-wash:#33261a; --demo:#bfb5c9; --demo-wash:#2b2433}
/* Marina: Deep water: navy ink, a marigold accent, a rose-to-cobalt ramp. */
[data-scheme="marina"]{color-scheme:light;--radius:12px;--radius-sm:8px;--bg:#ecf0f6; --surface:#ffffff; --surface-2:#f4f7fb; --ink:#0b1a3a; --ink-2:#33456c; --muted:#54688e; --line:#d7dfec; --grid:#e3e9f2; --accent:#e9a800; --accent-ink:#795500; --accent-wash:#fff0bf; --on-accent:#0b0b0b; --focus:#1f4fd6; --series:#1f4fd6; --series-track:#d9e2fa; --m-manual:#f2c072; --m-hybrid:#c93b86; --m-system:#2350d0; --m-automated:#0d1f5c; --on-manual:#0b0b0b; --on-hybrid:#ffffff; --on-system:#ffffff; --on-automated:#ffffff; --m-unrated:#c1cbda; --on-unrated:#0b1a3a; --au-none:#c1cbda; --up:#2350d0; --down:#b0246f; --h1:#dbe4fb; --h2:#a9bdf4; --h3:#6b8fe8; --h4:#2350d0; --h5:#163a9c; --on-h1:#0b0b0b; --on-h2:#0b0b0b; --on-h3:#0b0b0b; --on-h4:#ffffff; --on-h5:#ffffff; --band:#0b1a3a; --band-ink:#f4f7fb; --band-muted:#a6b4d0; --range-wash:#e8eefc; --pos:#136f40; --neg:#c2262f; --warning:#d97706; --chg-edit:#8a5412; --chg-edit-wash:#f8ecd9; --demo:#6b4fd6; --demo-wash:#ece8fb}
[data-scheme="marina"][data-theme="dark"]{color-scheme:dark;--radius:12px;--radius-sm:8px;--bg:#070f22; --surface:#0f1a33; --surface-2:#162341; --ink:#edf1fa; --ink-2:#c5cfe4; --muted:#94a3c4; --line:#273758; --grid:#1e2c4a; --accent:#ffc72c; --accent-ink:#ffd45c; --accent-wash:#3a2f0a; --on-accent:#0b0b0b; --focus:#86a6ff; --series:#6a8dff; --series-track:#1c2c5a; --m-manual:#7d3a1c; --m-hybrid:#d24d97; --m-system:#7398ff; --m-automated:#cfe0ff; --on-manual:#ffffff; --on-hybrid:#0b0b0b; --on-system:#0b0b0b; --on-automated:#0b0b0b; --m-unrated:#34436a; --on-unrated:#edf1fa; --au-none:#34436a; --up:#7398ff; --down:#d24d97; --h1:#1a2f6e; --h2:#2a4aa8; --h3:#4a6fe0; --h4:#86a6ff; --h5:#cfe0ff; --on-h1:#ffffff; --on-h2:#ffffff; --on-h3:#ffffff; --on-h4:#0b0b0b; --on-h5:#0b0b0b; --band:#030816; --band-ink:#edf1fa; --band-muted:#94a3c4; --range-wash:#172650; --pos:#45c47c; --neg:#f36c6c; --warning:#f9b740; --chg-edit:#e0a45c; --chg-edit-wash:#33261a; --demo:#b6a5f5; --demo-wash:#262047}
[data-scheme="meridian"]{--theme-font:"Instrument Sans",var(--font-system)}
[data-scheme="aurora"]{--theme-font:"Figtree",var(--font-system)}
[data-scheme="solstice"]{--theme-font:"Red Hat Text",var(--font-system);--theme-display:"Red Hat Display","Red Hat Text",var(--font-system)}
[data-scheme="orchid"]{--theme-font:"Albert Sans",var(--font-system)}
[data-scheme="marina"]{--theme-font:"Public Sans",var(--font-system);--theme-display:"Schibsted Grotesk","Public Sans",var(--font-system)}

/* Fonts. Loaded from Google Fonts only when picked (js/theme-boot.js). */
/* A chosen font replaces the scheme's type, titles included (two pairings bring their display face). */
[data-font]{--font-display:var(--font)}
[data-font="default"]{--font:var(--font-system)}
[data-font="inter"]{--font:"Inter",var(--font-system)}
[data-font="plex"]{--font:"IBM Plex Sans",var(--font-system)}
[data-font="source"]{--font:"Source Sans 3",var(--font-system)}
[data-font="atkinson"]{--font:"Atkinson Hyperlegible",var(--font-system)}
[data-font="serif"]{--font:var(--font-serif)}
[data-font="instrument"]{--font:"Instrument Sans",var(--font-system)}
[data-font="figtree"]{--font:"Figtree",var(--font-system)}
[data-font="redhat"]{--font:"Red Hat Text",var(--font-system);--font-display:"Red Hat Display","Red Hat Text",var(--font-system)}
[data-font="albert"]{--font:"Albert Sans",var(--font-system)}
[data-font="public"]{--font:"Public Sans",var(--font-system);--font-display:"Schibsted Grotesk","Public Sans",var(--font-system)}

/* Density. Normal is the tokens above. Compact and Comfortable rescale spacing (--dz, and every
   padding, margin and gap in the stylesheets is written in terms of it or of the --space steps),
   row heights, control height and one step of the type scale (--tz). */
[data-density="normal"]{
  --tz:1; --dz:1;
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --pad-page-y:0.625rem; --pad-card-y:0.625rem; --pad-card-x:0.875rem;
  --gap-card:0.75rem; --gap-tile:0.625rem; --gap-block:0.75rem;
  --pad-cell-y:0.4375rem; --pad-cell-x:0.625rem; --gap-row:0.3125rem; --pad-row-y:0.1875rem;
  --ctl-h:2rem; --stack-h:1.1875rem; --stack-thin:0.875rem; --bar-h-fill:0.875rem;
}
[data-density="compact"]{
  --tz:0.9375; --dz:0.8;
  --space-1:0.2rem; --space-2:0.4rem; --space-3:0.6rem; --space-4:0.8rem;
  --pad-page-y:0.5rem; --pad-card-y:0.5rem; --pad-card-x:0.7rem;
  --gap-card:0.6rem; --gap-tile:0.5rem; --gap-block:0.6rem;
  --pad-cell-y:0.35rem; --pad-cell-x:0.5rem; --gap-row:0.25rem; --pad-row-y:0.15rem;
  --ctl-h:1.75rem; --stack-h:1rem; --stack-thin:0.75rem; --bar-h-fill:0.75rem;
}
[data-density="comfortable"]{
  --tz:1.0625; --dz:1.2;
  --space-1:0.3rem; --space-2:0.6rem; --space-3:0.9rem; --space-4:1.2rem;
  --pad-page-y:0.75rem; --pad-card-y:0.75rem; --pad-card-x:1.05rem;
  --gap-card:0.9rem; --gap-tile:0.75rem; --gap-block:0.9rem;
  --pad-cell-y:0.525rem; --pad-cell-x:0.75rem; --gap-row:0.375rem; --pad-row-y:0.225rem;
  --ctl-h:2.25rem; --stack-h:1.375rem; --stack-thin:1rem; --bar-h-fill:1rem;
}

/* Style. How surfaces are drawn: card chrome, borders, radii, shadows, rules and table lines. Studio is the
   default (D58); Outlined is the look the app first shipped with. Every other style only redefines these tokens;
   components read them and never branch on the style. They are declared on the preview elements in the
   Appearance dialog too, so each option card draws with its own values. Colour schemes and density are
   untouched and compose with every style.
     --page-bg / --card-bg        page and card surface        --card-border / --card-border-b  box edge, then the bottom edge
     --card-shadow / --bar-shadow cards and the top bar        --card-pad-x                     horizontal card padding
     --card-radius (cards, table boxes) --panel-radius (dialogs, large panels) --tile-radius (tiles, steps, popovers)
     --control-radius (buttons, inputs, tabs) --field-radius (form fields) --pill-radius (chips, badges, status)
     --tile-bg / --tile-border    tiles inside cards           --rule                           separators under headings and tab rows
     --table-head-bg / --table-head-rule / --table-rule / --cell-v   table header, header rule, row rules, column rules */
:root{--elev:18%}
:root[data-theme="dark"]{--elev:70%}
:root,[data-style="outlined"]{
  --page-bg:var(--bg);
  --card-bg:var(--surface);
  --card-border:1px solid var(--line);
  --card-border-b:1px solid var(--line);
  --card-shadow:var(--shadow);
  --bar-border:1px solid var(--line);
  --bar-shadow:none;
  --dialog-border:1px solid var(--line);
  --card-pad-x:var(--pad-card-x);
  --card-radius:var(--radius-sm);
  --panel-radius:var(--radius);
  --tile-radius:var(--radius-md);
  --control-radius:var(--radius-sm);
  --field-radius:var(--radius-xs);
  --pill-radius:var(--radius-pill);
  --tile-bg:var(--surface-2);
  --tile-border:1px solid var(--line);
  --rule:var(--line);
  --table-head-bg:var(--surface-2);
  --table-head-rule:1px solid var(--grid);
  --table-rule:var(--grid);
  --cell-v:none;
}
/* Flat: no borders or shadows. A tinted page, white-on-tint cards, tinted tiles, generous radii. */
[data-style="flat"]{
  --page-bg:color-mix(in srgb,var(--bg) 97%,var(--band));
  --card-bg:color-mix(in srgb,var(--surface) 20%,var(--surface-2));
  --card-border:none; --card-border-b:none; --card-shadow:none;
  --bar-border:none; --dialog-border:none;
  --card-radius:max(calc(var(--radius-sm) * 1.75),.875rem);
  --panel-radius:max(calc(var(--radius) * 1.25),1.125rem);
  --tile-radius:max(calc(var(--radius-md) * 1.5),.75rem);
  --control-radius:max(calc(var(--radius-sm) * 1.5),.625rem);
  --field-radius:max(calc(var(--radius-xs) * 1.5),.5rem);
  --tile-bg:color-mix(in srgb,var(--surface) 55%,var(--grid));
  --tile-border:none;
  --table-head-bg:color-mix(in srgb,var(--surface) 55%,var(--grid));
  --table-head-rule:none;
}
/* Elevated: no borders, soft layered shadows tinted by the scheme's own dark, slightly larger radii. */
[data-style="elevated"]{
  --card-border:none; --card-border-b:none;
  --card-shadow:0 1px 1px color-mix(in srgb,var(--band) calc(var(--elev) * .5),transparent),0 3px 8px color-mix(in srgb,var(--band) calc(var(--elev) * .6),transparent),0 12px 28px color-mix(in srgb,var(--band) calc(var(--elev) * .7),transparent);
  --bar-border:none; --bar-shadow:0 1px 2px color-mix(in srgb,var(--band) calc(var(--elev) * .6),transparent),0 4px 12px color-mix(in srgb,var(--band) calc(var(--elev) * .4),transparent);
  --dialog-border:none;
  --card-radius:max(calc(var(--radius-sm) * 1.4),.75rem);
  --panel-radius:max(calc(var(--radius) * 1.2),1rem);
  --tile-radius:max(calc(var(--radius-md) * 1.25),.625rem);
  --control-radius:max(calc(var(--radius-sm) * 1.25),.5rem);
  --field-radius:max(calc(var(--radius-xs) * 1.25),.375rem);
  --tile-border:1px solid var(--grid);
}
/* Editorial: no card boxes. Sections sit on the page, closed by a thin rule; square corners; row rules only. */
[data-style="editorial"]{
  --page-bg:var(--surface);
  --card-bg:transparent;
  --card-border:none; --card-border-b:1px solid var(--rule); --card-shadow:none;
  --card-pad-x:0rem;
  --rule:color-mix(in srgb,var(--line) 45%,var(--ink-2));
  --card-radius:0; --panel-radius:0; --tile-radius:0; --control-radius:0; --field-radius:0;
  --pill-radius:var(--radius-1);
  --tile-bg:transparent;
  --table-head-bg:var(--surface);
  --table-head-rule:1px solid var(--ink-2);
  --table-rule:var(--line);
}
/* Crisp: a spreadsheet. Strong 1px borders (the scheme's line is darkened, so every border and rule gets stronger), square corners, no shadow,
   ruled columns and a tinted header row. */
:root[data-style="crisp"],.ap-sty[data-style="crisp"]{
  --line:color-mix(in srgb,var(--muted) 66%,var(--surface));
}
[data-style="crisp"]{
  --card-shadow:none;
  --card-radius:0; --panel-radius:0; --tile-radius:0; --control-radius:0; --field-radius:0;
  --pill-radius:var(--radius-1);
  --table-head-bg:color-mix(in srgb,var(--surface) 45%,var(--grid));
  --table-head-rule:1px solid var(--line);
  --table-rule:var(--line);
  --cell-v:1px solid var(--grid);
}

/* Studio, the standard surface style: white cards with no border and one soft ink-tinted shadow;
   tiles are a tint of the page; table heads unboxed over a 2px rule. Nothing drawn on one side only. */
[data-style="studio"]{
  --page-bg:var(--bg);
  --card-bg:var(--surface);
  --card-border:none; --card-border-b:none;
  --card-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),0 8px 24px color-mix(in srgb,var(--ink) 5%,transparent);
  --bar-border:none; --bar-shadow:0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent);
  --dialog-border:none;
  --card-pad-x:calc(var(--pad-card-x) * 1.15);
  --card-radius:max(var(--radius),.875rem);
  --panel-radius:max(calc(var(--radius) * 1.25),1.125rem);
  --tile-radius:max(var(--radius-md),.625rem);
  --control-radius:var(--radius-sm);
  --field-radius:var(--radius-sm);
  --pill-radius:var(--radius-pill);
  --tile-bg:color-mix(in srgb,var(--bg) 70%,var(--surface));
  --tile-border:none;
  --rule:var(--line);
  --table-head-bg:transparent;
  --table-head-rule:2px solid var(--line);
  --table-rule:var(--grid);
  --cell-v:none;
}
[data-style="studio"][data-theme="dark"],:root[data-theme="dark"] [data-style="studio"]{
  --card-shadow:0 1px 2px #0008,0 8px 24px #0006;
  --bar-shadow:0 1px 0 #ffffff14;
  --tile-bg:color-mix(in srgb,var(--surface-2) 70%,var(--surface));
}