/* ============================================================
   tokens.css
   Every value the system is allowed to use. Nothing below this
   file invents a colour, a size or a duration.

   Palette   Ink        round 01.5
   Type      Book       round 02
   Texture   Filled     round 05
   Motion    Arrival    round 10

   Two themes and one accent per product. The accent has exactly
   one job, which is marking where you are: the rule under the
   section you are in. That rule is the gesture this system is
   remembered by, so it is the one place a product gets to sound
   like itself. Everything else, including every primary action,
   stays ink.

   Setting the accent for a product, once, on the html element:

       <html style="--accent-light:#2C6642; --accent-dark:#5FAC7E">

   Letting it reach further, if a product wants to be louder. The
   filled parts of a meter take the colour too:

       <html data-accent-reach="fill">

   Theme follows the system by default. To force one:

       <html data-theme="dark">     or     data-theme="light"

   The dark ground is one value and the rest of the dark ramp is
   built off it:

       <html style="--dark-base:#14171C">

   Seven that are already checked against all eight accents:

       Coal     #121212      Slate     #16191C
       Neutral  #191919      Ink blue  #14171C
       Warm     #1B1A17      Plum      #1A1519
       Ledger   #161911
   ============================================================ */

:root{
  color-scheme:light dark;

  /* ---- the accent, per product ----------------------------
     Two values because a colour that reads on paper is rarely
     the same colour that reads on the dark ground. Override
     these two and nothing else. */
  --accent-light:#A07C24;   /* gold, the default */
  --accent-dark:#CBA64E;
}

/* ---- the light theme's colours ---------------------------
   Declared for :root and for .theme-light, a part of a page that
   stays light whatever the theme. The landing's moving picture is
   one (round 13): a picture of the product in its light theme
   stands out from a dark page, where a lighter shade of the dark
   one did not.

   A custom property is computed where it is declared and inherited
   as a value. So every token the dark theme changes, AND every
   token built from one of those (--meter-fill is var(--ink)), lives
   in this block: one declared on :root alone would arrive in a
   light part already dark. */
:root,.theme-light{
  --accent:var(--accent-light);

  /* ---- paper and ink -------------------------------------
     Three tones do all the separating. Paper is the page, well
     is anything recessed, surface is anything raised. Nothing
     in this system is outlined. */
  --paper:#EDEEE7;        /* the page */
  --well:#E2E4DA;         /* recessed: inputs, quiet buttons, the screen ground */
  --well-hover:#D6D9CD;
  --surface:#F9FAF5;      /* raised: cards, rows, panels */
  --surface-hover:#FFFFFF;

  --ink:#131510;          /* text, and every primary action */
  --muted:#676B5F;        /* secondary text, 4.7:1 on paper */
  --rule:#CFD3C4;         /* page furniture only, between sections of a document */
  --rule-firm:#B3BAA4;    /* the same, when it has to be seen */

  --mark:#131510;         /* primary action fill. Same as ink, on purpose */
  --mark-hover:#2E3227;
  --on-mark:#F9FAF5;      /* text on a primary action */
  --badge-ink:#4A4E42;    /* text on a plain badge, which sits on well */

  --miss:#93281C;         /* the only red in the system: something went wrong */
  --miss-hover:#7A1F15;   /* ...and when it is a button being pressed */
  --miss-wash:#F2E2DE;    /* the same, as a ground */
  --empty:#DADECE;        /* an unfilled cell */

  /* What a meter is painted with. The accent reach switch below is
     the only thing that moves it. */
  --meter-fill:var(--ink);

  /* ---- shadow ---------------------------------------------
     The system has exactly one, and only things that genuinely
     float above the page are allowed it. A card is not one of
     those things: tone already told you it was raised. */
  --shadow-lift:0 18px 48px rgba(19,21,16,.22);
  --shadow-card:0 1px 2px rgba(19,21,16,.05),0 14px 34px -16px rgba(19,21,16,.2);
  /* The moving picture's ground: a raised, lighter workspace with a fine
     dot grid, so it reads as its own surface against the page (round
     12: a recessed one sat too close to the paper). Its cards go one
     step lighter again. It is light in both themes (.theme-light). */
  --demo-ground:var(--surface);
  --demo-card:var(--surface-hover);
  --demo-dot:var(--rule);
  /* Inside it: the colour a category keeps through the whole picture
     (a chip on a comment, its bar, its part of a column), in a fixed
     order. Light only, because the picture is. Checked with the
     dataviz validator on #FFFFFF and #F9FAF5: adjacent CVD dE >= 9.1,
     normal-vision >= 19.6. Three sit under 3:1 against the card, so a
     colour never stands alone: every chip, bar and column part has
     its name beside it or in a legend. */
  --demo-c1:#2A78D6; --demo-c2:#EB6834; --demo-c3:#1BAF7A;
  --demo-c4:#EDA100; --demo-c5:#E87BA4; --demo-c6:#008300;
  /* A video's frame, before it plays: the ink's own family, so it
     reads as a picture and not as a colour of the system's. */
  --demo-frame-a:#2E3227;
  --demo-frame-b:#131510;
  --demo-frame-ink:#F9FAF5;

  /* The footer band under the public pages: the ink's own family, a
     shade off black, with text in the paper's. Dark mode does NOT
     invert it (a light band at the bottom of a dark page); it gets a
     band darker than its own paper. */
  --foot-bg:#171913;
  --foot-ink:#E9EBE2;
  --foot-soft:#A3A799;
  --foot-rule:#2E3128;
  --veil:rgba(19,21,16,.34);
}

:root{
  /* ---- faces ----------------------------------------------
     Two families. Newsreader carries the display sizes: headings,
     titles, the large figures. Public Sans carries everything that
     is read, and labels, controls and figures. Served from
     static/fonts (fonts.css).

     Reading text was Newsreader until round 14 (2026-10-07): the
     owner found paragraphs inside the product hard going in a
     serif, and a page of comments is read the way a feed is, not
     the way an essay is. The headings keep the serif, so the
     product still sounds like itself. */
  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Public Sans",Helvetica,Arial,sans-serif;
  --f-ui:"Public Sans",Helvetica,Arial,sans-serif;

  /* ---- type scale ---------------------------------------- */
  --t-hero:clamp(40px,4.6vw,58px);
  /* The landing headline since round 12: larger and LIGHT. The weight
     is what makes it read as calm rather than loud. Newsreader is a
     variable font (300-700), so the light cut costs nothing to load. */
  --t-display-xl:clamp(44px,5.2vw,74px);
  --t-home-title:clamp(34px,3.4vw,46px);
  --t-hero-sub:20px;
  --w-light:340;
  --t-h1:clamp(32px,3.4vw,44px);
  --t-h2:clamp(24px,2.4vw,32px);
  --t-h3:20px;
  --t-lede:18px;
  --t-body:16px;   /* 17 in the serif; the sans reads a size larger */
  --t-ui:14px;
  --t-small:13px;
  --t-label:11px;

  /* ---- space ----------------------------------------------
     A 4px grid that stops being linear once the gaps get big
     enough that the eye reads them as sections. */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px; --s9:88px; --s10:120px;

  /* ---- shape ---------------------------------------------- */
  --r-sm:6px;    /* checkboxes, badges on square things */
  --r-md:9px;    /* buttons, inputs, rows, notices */
  --r-lg:14px;   /* cards, panels, the product screen */
  --r-pill:999px;
  --r-xl:22px;   /* the landing's large cards and the demo panel */

  /* The moving picture's dot grid (its colours are with the light
     theme's, above). */
  --demo-dot-size:1px;
  --demo-grid:20px;

  /* ---- motion ---------------------------------------------
     Two durations. State is 160ms because the user did it and
     is waiting. Arrival is 500ms because nobody is waiting for
     it. Both are off entirely under reduced motion.

     Arrival fades in less time than it moves, and that gap is
     deliberate. --ease-out is an expo curve: with it, opacity
     spends the last 350ms creeping from .9 to 1. Over a large
     flat card that slow creep steps through 8 bit colour one
     level at a time, which reads as the colour wobbling rather
     than the card arriving. The fade is short and nearly
     linear; the movement keeps the long settle. */
  --dur:.16s;
  --dur-in:.5s;
  --dur-fade:.28s;
  --stagger:70ms;
  /* A page swapped in place: how long the content being left takes to
     fade out (js/navigate.js waits for it), and how long the navigator
     waits before it shows that a page is slow. That wait is written in
     js/navigate.js too (SLOW_MS) and must match. */
  --dur-leave:.16s;
  --dur-swap:.18s;
  --dur-progress:.9s;
  --dur-cursor:.75s;     /* the demo's cursor travelling to its next target */
  --dur-pop:.7s;         /* a mark arriving in the demo, overshooting a little */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,.6,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ---- type sizes, one-off ---------------------------------
     Sizes used by a single component rather than the responsive
     scale above. Grouped by where they show up. */
  --t-title-sm:21px;      /* card and plan title */
  --t-title-md:24px;      /* empty state and modal title, and the page title on a phone */
  --t-read:16px;          /* a muted paragraph: card text, empty state, outcome, FAQ */
  --t-micro:11px;         /* tiny bold label: avatar initials, the nav pending count */
  --t-badge-sm:10px;      /* the pill badge's own label */
  --t-wordmark-bar:18px;  /* the app shell's mark */
  --t-wordmark-site:19px; /* the public site nav's mark */
  --t-wordmark-site-sm:17px; /* the site nav mark on a phone */
  --t-wordmark-screen:16px; /* the product view mockup's mark */
  --logo-h:21px;          /* a product's own logo in the bars (templates/brand/logo.svg) */
  --logo-h-sm:19px;       /* the same on a phone */
  --logo-h-screen:15px;   /* in the product view mockup */
  --logo-h-foot:30px;     /* on the footer band */
  --t-screen-title:23px;  /* the product view mockup's heading */
  --t-chat-title:22px;    /* a conversation's subject line */
  --t-page-title:30px;    /* a signed-in page heading */
  --t-auth-line:26px;     /* the auth side panel's pull quote */
  --t-auth-line-sm:19px;  /* the same quote on a phone */
  --t-auth-title:29px;    /* an auth form's own heading */
  --t-price-amount:26px;  /* the big figure on a plan card */
  --t-stat-lg:30px;       /* a large live count, admin stats */
  --t-mono-inline:.92em;  /* inline code sitting inside a sentence */
  --t-tray-x:17px;        /* the remove glyph on a pending attachment */
  --t-toast-x:20px;       /* the close glyph on a toast */

  /* ---- tracking --------------------------------------------
     Letter-spacing, named by what it is doing rather than its
     value, so the same job always reads as the same token. */
  --tr-tight:-.01em;      /* a short display-face heading or wordmark */
  --tr-tight-lg:-.015em;  /* a large page or form heading */
  --tr-snug:-.012em;      /* round-02 book tracking, shared with .h2 */
  --tr-caps:.16em;        /* small caps label, shared with .label */
  --tr-wide:.04em;        /* avatar initials */
  --tr-badge:.1em;        /* the badge label */

  /* ---- rings and hairlines ----------------------------------
     Every line in the system thinner than a rule. One focus ring,
     one hairline, used for every divider, border and unchecked
     control; a handful of one-job strokes that happen to share a
     width with the ring but are not interactive focus. */
  --hairline:1px;           /* every rule-as-box-shadow divider, and the unchecked checkbox ring */
  --ring-w:2px;             /* the focus ring, and the filled-field/composer ring */
  --ring-offset:3px;        /* the page-wide focus-visible offset */
  --ring-offset-tight:2px;  /* the same offset where a control sits inside a pill or a well */
  --checkmark-stroke:2px;   /* the drawn checkmark's own stroke width */
  --mark-rule-w:2px;        /* the accent rule under the section you are in: the system's signature */
  --scrollbar-w:10px;       /* the custom webkit scrollbar, composer and chat log */
  --scrollbar-thumb-inset:3px; /* the transparent border that insets the scrollbar thumb */

  /* ---- component dimensions ---------------------------------
     Fixed sizes a component owns outright: not spacing between
     things, the thing itself. */
  --bar-h:62px;             /* the app shell top bar */
  --avatar-size:28px;       /* the account initials circle */
  --checkbox-size:18px;     /* a real checkbox input */
  --check-size:20px;        /* a list row's status check */
  --row-dot-size:8px;       /* the unread dot in a conversation row */
  --attach-size:38px;       /* the composer's attach button */
  --icon-size:18px;         /* an inline svg icon */
  --tray-x-size:22px;       /* the remove control on a pending attachment */
  --meter-h:6px;            /* the usage meter's track */
  --navlink-badge-gap:6px;  /* the gap before, and the padding around, a nav pending count */
  --navlink-badge-pad-y:3px;
  --toast-x-pad:2px;        /* the toast's own close glyph padding */
  --gap-tight:2px;          /* two stacked lines of text that read as one unit: a name and its meta */
  --gap-msg:6px;            /* a chat bubble's own column: the name line above it, close */
  --gap-baseline:7px;       /* a figure and its small trailing label, baseline aligned */
  --checkmark-w:5px;        /* a drawn checkmark's width, checkbox and row check alike */
  --checkmark-h-a:9px;      /* the checkbox's own checkmark height */
  --checkmark-h-b:10px;     /* the row check's checkmark height, a touch taller */
  --rot-a:40deg;            /* the checkbox checkmark's angle */
  --rot-b:42deg;            /* the row check's checkmark angle */
  --bullet-dash-w:6px;      /* the prose list's dash, in place of a bullet */
  --bullet-dash-top:.85em;  /* the dash's optical seat against the first line */
  --btn-pad-y:13px; --btn-pad-x:20px;     /* a standard button */
  --pad-compact-y:10px;     /* a dense control: a small button, the composer's text area */
  --btn-pad-x-sm:14px;      /* a small button */
  --field-pad-y:12px; --field-pad-x:14px; /* an input, select or textarea */
  --field-min-h:120px;      /* a plain textarea */
  --field-min-h-lg:200px;   /* a mail body, the longest-written field */
  --inline-code-pad-y:1px; --inline-code-pad-x:5px; /* inline code inside help text */
  --badge-pad-y:6px; --badge-pad-x:11px;  /* a pill badge */
  --pad-pill-y:9px;         /* vertical padding shared by every pill control: chip, cycle switch, choice, narrow nav button */
  --chip-pad-x:14px;
  --pad-cycle-x:16px;
  --pad-choice-x:15px;
  --pad-cycle-outer:3px;    /* the monthly/yearly switch's own casing */
  --msg-pad-top:9px; --msg-pad-bottom:6px; /* a chat bubble, uneven on purpose: see parts.css */
  --pad-tray-tight:5px;     /* a pending-attachment chip's top, right and bottom padding */
  --sz-hidden:1px;          /* the visually-hidden utility size: shrink to nothing, keep in the a11y tree */

  /* ---- measures and widths ----------------------------------
     Content and container widths: how wide a column, a dialog or
     a measure of text is allowed to get. */
  --measure-page:1160px;      /* the shared content width: bar, column, toasts, admin subbar */
  --measure-wrap:1200px;      /* the public landing page's own, slightly wider, wrap */
  --measure-chat-max:56rem;   /* a conversation column */
  --measure-msg-max:44rem;    /* a single chat bubble */
  --measure-toast:24rem;      /* the toast stack on a wide screen */
  --measure-overlay-w:calc(100vw - var(--s6) * 2); /* an overlay's width on a narrow screen: viewport minus the page gutter twice */
  --measure-modal-max:440px;  /* an ordinary dialog */
  --measure-zoom-w:92vw; --measure-zoom-max:1100px; --measure-zoom-h:82vh; /* the image zoom overlay */
  --measure-table-min:520px;  /* a scrolling table's minimum width */
  --measure-att-img:22rem;    /* a single sent image */
  --measure-att-thumb:13rem;  /* a sent image, shrunk because more than one arrived together */
  --measure-composer-max:12rem; /* the composer's text area, before it scrolls */
  --measure-prose-sm:44ch;    /* a short muted paragraph: empty state, pricing head */
  --measure-prose-md:60ch;    /* a medium paragraph: plan strip, document head */
  --measure-prose-lg:68ch;    /* the document body's reading column */
  --measure-prose-xl:74ch;    /* the same, when there is no contents list beside it */
  --measure-hero-lede:46ch;   /* the landing hero's lede */
  --measure-hero-copy:33rem;  /* the landing's left column: claim, card, link */
  --measure-home-narrow:46rem; /* the landing's questions */
  /* The landing's first screen is the whole window under the bar: the
     plans start below the fold, not peeking up from under the card.
     The moving picture grows with the window, within limits. svh, not
     vh, so a phone's sliding address bar does not cut it; the vh line
     is the fallback for browsers without it. */
  --site-bar-h:84px;          /* the public pages' bar, padding included */
  --hero-min-h:calc(100vh - var(--site-bar-h));
  --demo-h:clamp(460px, calc(100vh - 220px), 720px);
  --measure-demo-card:27rem;  /* a card inside it */
  --measure-demo-wide:32rem;  /* a card holding figures or a chart */
  --measure-demo-title:15ch;  /* a title scene's line length */
  /* Inside the moving picture (round 13). The video is a small frame
     beside its title: the comments under it are the scene. */
  --demo-mark-h:76px;         /* a mark scene's logo */
  --demo-avatar:34px;         /* a commenter's initial */
  --demo-frame-w:96px;        /* the video's frame */
  --demo-play:30px;           /* the play button on it */
  --demo-tag-dot:8px;         /* a category's swatch, on a chip or in a legend */
  --demo-chart-h:170px;       /* the columns' height */
  --demo-col-max:36px;        /* one column, at most */
  --demo-data-r:4px;          /* a bar's or column's rounded data end */
  --demo-data-gap:2px;        /* the surface gap between stacked parts */
  --measure-auth-line:18ch;   /* the auth side panel's pull quote */
  --measure-auth-note:34ch;   /* the auth side panel's note under it */
  --measure-auth-preview:30rem; /* the auth side panel's picture of the product */
  --measure-state:54ch;       /* a full page state: 404, 500, offline */
  --measure-state-min-h:60vh; /* the same page, vertically centred */
  --measure-mail-frame-w:375px; /* the email preview iframe, shared with its template */
  --measure-mail-frame-h:34rem;    /* the email preview iframe's height */
  --measure-mail-frame-h-sm:26rem; /* the same, narrower layout */
  --measure-toc-col:212px;    /* the document's table of contents column */
  --measure-log-time:84px;    /* the dashboard log's time column */
  --measure-log-time-sm:70px; /* the same, on a phone */
  --measure-pass-text-min:220px; /* the one-time Pass offer's text, before it wraps */
  --measure-auth-form:360px;  /* an auth form's own width */
  --measure-preview-line:1.2em; /* the mail preview's subject line, reserved even when empty */
  --viewport-h:100vh;         /* a full-viewport fallback, upgraded to 100dvh where supported */

  /* Page columns, named by the kind of page. A page picks one with
     `style="max-width:var(--col-...)"` on its `.col`. */
  --col-app:44rem;           /* the app's single-column pages: billing, feedback, new */
  --col-settings:46rem;      /* settings, a little wider for its two-up rows */
  --col-form:38rem;          /* a public form page: support */
  --col-small:34rem;         /* a one-message page: unsubscribe, the admin's file request */
  --col-confirm:26rem;       /* a confirm-and-leave page: delete the account */
  --col-admin-detail:56rem;  /* one account in the admin panel */
  --field-search:14rem;      /* the admin user search box */
  /* The component sheet's own demonstration widths. */
  --demo-w-sm:320px; --demo-w-md:340px; --demo-w-lg:400px; --demo-w-xl:520px;
  --demo-measure:52ch;

  /* ---- motion offsets ----------------------------------------
     How far arrival, a toast and a modal travel. Durations and
     curves are above; these are the only lengths motion owns. */
  --off-toast:-8px;   /* a toast's resting offset, travelled on the way in and out */
  --off-rise:10px;     /* an arriving block's rise */
  --off-msg:6px;       /* a newly arrived chat message's rise */
  --off-modal:12px;    /* a dialog's rise from under the veil */
}

/* ---- breakpoints -------------------------------------------
   Literal on purpose: a custom property is not valid inside a
   media query condition, so these live here as documentation
   instead of as tokens.

       520px   a two-field row folding to one column (support form)
       680px   the one phone breakpoint, used throughout parts.css
               and layout.css for the shell, product view and footer
       820px   the dashboard's status band folding to one column
       860px   the auth family's side-by-side split folding
       900px   the document layout's contents column folding
       980px   the pricing cards and the landing hero folding
   ============================================================ */


/* ---- dark ------------------------------------------------
   The dark theme is one colour with a ramp built off it. Set the
   ground and everything else follows:

       <html style="--dark-base:#14171C">

   The first version of this transposed the light paper's green
   cast straight across and it read as olive. A tint that is
   invisible at 92 per cent lightness is loud at 10, because the
   eye compares it to black instead of to white. The default is
   now barely warm, and the ground is a choice.

   The ramp: surfaces are the ground lifted a few per cent toward
   white, text is the ground lifted nearly all the way. Text lands
   near neutral whatever the ground is, and that is deliberate.
   The ground carries the character. The writing should not have
   to carry it as well. */

:root{
  --dark-base:#1B1A17;      /* warm, and only just */

  /* literal ramp, used as it is by anything without color-mix */
  --d-paper:#1B1A17;
  --d-well:#242320;
  --d-well-hover:#32312E;
  --d-surface:#2D2C2A;
  --d-surface-hover:#393835;
  --d-rule:#393835;
  --d-rule-firm:#52514F;
  --d-empty:#393835;
  --d-muted:#989897;
  --d-badge-ink:#B4B3B2;
  --d-ink:#EDEDEC;
  --d-miss:#E08A72;
  --d-miss-hover:#EC9B84;
  --d-miss-wash:#423029;
  --d-foot-bg:#121110;
}

/* A custom property accepts almost any token stream, so an
   unsupported color-mix would not fall back on its own. The gate
   does it instead. */
@supports (color:color-mix(in srgb,#000,#fff 10%)){
  :root{
    --d-paper:var(--dark-base);
    --d-well:color-mix(in srgb, var(--dark-base), #FFFFFF 4%);
    --d-well-hover:color-mix(in srgb, var(--dark-base), #FFFFFF 10%);
    --d-surface:color-mix(in srgb, var(--dark-base), #FFFFFF 8%);
    --d-surface-hover:color-mix(in srgb, var(--dark-base), #FFFFFF 13%);
    --d-rule:color-mix(in srgb, var(--dark-base), #FFFFFF 13%);
    --d-empty:color-mix(in srgb, var(--dark-base), #FFFFFF 13%);
    --d-rule-firm:color-mix(in srgb, var(--dark-base), #FFFFFF 24%);
    --d-muted:color-mix(in srgb, var(--dark-base), #FFFFFF 55%);
    --d-badge-ink:color-mix(in srgb, var(--dark-base), #FFFFFF 67%);
    --d-ink:color-mix(in srgb, var(--dark-base), #FFFFFF 92%);
    --d-miss-wash:color-mix(in srgb, var(--dark-base), var(--d-miss) 20%);
    --d-foot-bg:color-mix(in srgb, var(--dark-base), #000000 38%);
  }
}

/* The landing's window-sized first screen, where svh exists (see
   --hero-min-h above). */
@supports (height:100svh){
  :root{--hero-min-h:calc(100svh - var(--site-bar-h));
        --demo-h:clamp(460px, calc(100svh - 220px), 720px)}
}

/* When a theme is FORCED, color-scheme narrows along with it. At
   first there was only `color-scheme:light dark`, and when the OS
   was dark and the user picked Light in the app, the browser's own
   colours stayed DARK: `CanvasText` was white, our ground was light.
   Every browser surface that does not write its own colour --
   <dialog>, form controls, the scrollbar, autofill -- became
   invisible. The title and label in the delete modal had vanished
   this exact way.

   Written twice on purpose: once for the system preference, once
   for an explicit choice. The light block above stays the base,
   so an explicit light choice needs no rules of its own. */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:var(--accent-dark);
    --paper:var(--d-paper);
    --well:var(--d-well);
    --well-hover:var(--d-well-hover);
    --surface:var(--d-surface);
    --surface-hover:var(--d-surface-hover);
    --ink:var(--d-ink);
    --muted:var(--d-muted);
    --rule:var(--d-rule);
    --rule-firm:var(--d-rule-firm);
    --mark:var(--d-ink);
    --mark-hover:#FFFFFF;
    --on-mark:var(--d-paper);
    --badge-ink:var(--d-badge-ink);
    --miss:var(--d-miss);
    --miss-hover:var(--d-miss-hover);
    --miss-wash:var(--d-miss-wash);
    --empty:var(--d-empty);
    --veil:rgba(0,0,0,.58);
    --shadow-lift:0 18px 48px rgba(0,0,0,.55);
    --shadow-card:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.6);
    --foot-bg:var(--d-foot-bg);
    --foot-ink:var(--d-ink);
    --foot-soft:var(--d-muted);
    --foot-rule:var(--d-rule);
  }
}
:root[data-theme="dark"]{
  --accent:var(--accent-dark);
  --paper:var(--d-paper);
  --well:var(--d-well);
  --well-hover:var(--d-well-hover);
  --surface:var(--d-surface);
  --surface-hover:var(--d-surface-hover);
  --ink:var(--d-ink);
  --muted:var(--d-muted);
  --rule:var(--d-rule);
  --rule-firm:var(--d-rule-firm);
  --mark:var(--d-ink);
  --mark-hover:#FFFFFF;
  --on-mark:var(--d-paper);
  --badge-ink:var(--d-badge-ink);
  --miss:var(--d-miss);
  --miss-hover:var(--d-miss-hover);
  --miss-wash:var(--d-miss-wash);
  --empty:var(--d-empty);
  --veil:rgba(0,0,0,.58);
  --shadow-lift:0 18px 48px rgba(0,0,0,.55);
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.6);
  --foot-bg:var(--d-foot-bg);
  --foot-ink:var(--d-ink);
  --foot-soft:var(--d-muted);
  --foot-rule:var(--d-rule);
}

/* A light part of a dark page takes the light scheme too, so the
   browser's own colours (a form control, a scrollbar) follow, and
   starts its text in the light ink. */
.theme-light{color-scheme:light;color:var(--ink)}

/* ---- how far the accent reaches --------------------------
   Default is the rule under the section you are in, and nothing
   else. With fill, a meter takes the colour as well. */
:root[data-accent-reach="fill"],
[data-accent-reach="fill"] .theme-light{
  --meter-fill:var(--accent);
}

/* ---- reset ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* The scrollbar's space is ALWAYS reserved. Otherwise, going from a
   short page to a long one makes the bar appear, narrows the visible
   area by ~15px and shifts the whole page sideways -- which reads
   as a glitch. The panel's own pages are exactly like that: Overview
   short, Users long. */
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

/* ---- type roles ----------------------------------------- */
.display{font-family:var(--f-display);font-size:var(--t-hero);font-weight:600;
  line-height:1.08;letter-spacing:-.018em}
.h1{font-family:var(--f-display);font-size:var(--t-h1);font-weight:600;
  line-height:1.1;letter-spacing:-.018em}
.h2{font-family:var(--f-display);font-size:var(--t-h2);font-weight:600;
  line-height:1.16;letter-spacing:var(--tr-snug)}
.h3{font-family:var(--f-display);font-size:var(--t-h3);font-weight:600;line-height:1.25}
.lede{font-size:var(--t-lede);line-height:1.55}
.ui{font-family:var(--f-ui);font-size:var(--t-ui);line-height:1.5}
.small{font-family:var(--f-ui);font-size:var(--t-small);line-height:1.55;color:var(--muted)}
.label{font-family:var(--f-ui);font-size:var(--t-label);font-weight:600;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--muted);line-height:1}
.muted{color:var(--muted)}

/* Tabular figures go on figures. Several faces give commas and
   periods a digit width under tnum, which puts a gap in front of
   every punctuation mark in a paragraph. */
.num{font-variant-numeric:tabular-nums}

/* ---- focus ---------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:var(--ring-w) solid var(--ink);outline-offset:var(--ring-offset);border-radius:var(--r-sm);
}

.sr{position:absolute;width:var(--sz-hidden);height:var(--sz-hidden);overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* The skip link. Out of sight and out of the flow until a keyboard
   reaches it, then it sits over the bar. */
.skip{position:absolute;left:var(--s4);top:var(--s3);z-index:100;
  padding:var(--s2) var(--s3);border-radius:var(--r-md);
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:var(--f-ui);font-size:var(--t-small);font-weight:600;
  transform:translateY(calc(-100% - var(--s4)))}
.skip:focus{transform:none}