/*
 * Basis Sheet design tokens: colour, type, space.
 * Fonts are self-hosted through @fontsource-variable (see basis-layout.astro).
 */
:root {
  /* Brand greens (evolved from the logo + Astra globals) */
  --green-950: #032b0b;        /* deepest band / footer */
  --green-900: #054010;        /* primary dark: headings, links, focus */
  --green-800: #1e421a;        /* logo dark green */
  --green-500: #579d3a;        /* logo mid green: fills, icons, large display only */
  --green-100: #e6eedf;        /* quiet tint for selected states */

  /* Action / warning (logo roof orange, ANSI orange) */
  --orange-600: #dc7030;       /* logo orange: large fills, rules */
  --orange-500: #ed6913;       /* action button fill (dark text on it) */
  --orange-200: #f6c39d;       /* focus ring + accents on dark bands */
  --orange-700: #a8480f;       /* orange as TEXT on paper/white (5.3:1) */

  /* Paper + ink (technical-report neutrals) */
  --paper: #f7f4ec;            /* warm paper page background */
  --paper-2: #efeadd;          /* sunken panels, table heads */
  --sheet: #ffffff;            /* white "sheet" surfaces */
  --rule: #cfc7b5;             /* hairlines on paper */
  --rule-strong: #8f8775;      /* plate borders */
  --ink: #1b2622;              /* strongest text */
  --text: #2f3b40;             /* body text (brand text color) */
  --muted: #4c5753;            /* secondary text — still >= 7:1 on paper */
  --on-dark: #f7f4ec;
  --on-dark-muted: #cfd8cc;

  /* Text and line roles of the brand colours. In the dark theme these turn light, while
     the green and orange fills (bands, buttons, CTA boxes, plate heads) stay as they are. */
  --heading: var(--green-900);
  --accent-ink: var(--green-900);        /* links, green labels */
  --accent-ink-soft: var(--green-800);   /* eyebrows, quieter labels */
  --accent-line: var(--green-900);       /* green borders, outlines, focus ring */
  --accent-line-soft: var(--green-800);
  --orange-ink: var(--orange-700);       /* orange as text */

  /* Component surfaces */
  --field: #ffffff;                      /* form fields on the page (not the footer) */
  --placeholder: #6b7470;                /* sample text in empty fields: 4.8:1 on --field */
  --plate: #fbfaf6;                      /* spec plate */
  --sheet-hover: #fffdf7;
  --panel-shadow: rgba(20, 30, 25, 0.16);
  --error-ink: #b42318;
  --error-bg: #fdf0ee;
  --mark-bg: #fde3c5;                    /* search-match highlight */
  --footer-field: #ffffff;             /* newsletter fields on the always-dark footer */
  --footer-field-ink: #1b2622;
  --footer-field-muted: #4c5753;
  --footer-field-line: #ffffff;

  /* Diagram tones: the colour coding of diagrams rebuilt from pictures (ink, fill, line). */
  --tone-green-ink: #1e5a2b; --tone-green-bg: #ebf3e6; --tone-green-line: #4a8a3c;
  --tone-blue-ink: #1f5f8b; --tone-blue-bg: #e8f1f9; --tone-blue-line: #3b7ca8;
  --tone-teal-ink: #1f6b66; --tone-teal-bg: #e5f3f1; --tone-teal-line: #2f8a83;
  --tone-yellow-ink: #735400; --tone-yellow-bg: #fbf4dc; --tone-yellow-line: #c9a227;
  --tone-orange-ink: #a8480f; --tone-orange-bg: #fdeee2; --tone-orange-line: #dc7030;
  --tone-red-ink: #a3302a; --tone-red-bg: #fbe9e7; --tone-red-line: #c0473c;
  --tone-purple-ink: #5d3f8e; --tone-purple-bg: #f1ebf8; --tone-purple-line: #7a5cb0;

  color-scheme: light;

  /* Type */
  --font-display: "Archivo Variable", "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-body: 1.1875rem;        /* 19px desktop; 18px under 700px */
  --fs-small: 1rem;            /* 16px: meta, captions, labels (never smaller) */
  --fs-lead: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --fs-h4: 1.25rem;
  --fs-h3: clamp(1.375rem, 0.5vw + 1.2rem, 1.625rem);
  --fs-h2: clamp(1.875rem, 1.6vw + 1.3rem, 2.75rem);
  --fs-h1: clamp(2.25rem, 3.2vw + 1.2rem, 4rem);
  --lh-body: 1.6;
  --lh-tight: 1.12;

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  --gutter: 16px;
  --max: 1200px;
  --measure: 70ch;
  --radius: 4px;               /* engineering-drawing corners, not pills */
  --tap: 48px;                 /* min tap target (>= 44px) */
  --header-h: 76px;
}

@media (min-width: 700px) { :root { --gutter: 32px; } }
@media (max-width: 699px) { :root { --fs-body: 1.125rem; } }
@media (max-width: 899px) { :root { --header-h: 124px; } }

/* ---------- Chinese screens ----------
 * Latin letters and numbers keep the brand faces; Chinese characters come from the
 * system's sans-serif Chinese fonts, so monospace labels never fall back to a serif one.
 */
:root:lang(zh) {
  --font-display: "Archivo Variable", "Archivo", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-body: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", "IBM Plex Mono", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", ui-monospace, monospace;
}

/* ---------- Dark theme ----------
 * "Auto" (no data-theme on <html>) follows the device; the appearance switch sets
 * data-theme="light" or "dark". light-dark() picks by the color-scheme in force, so every
 * token below flips together. Browsers without light-dark() keep the light theme, and the
 * switch hides itself there.
 */
@supports (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light dark;

    --paper: light-dark(#f7f4ec, #0f1713);
    --paper-2: light-dark(#efeadd, #141e19);
    --sheet: light-dark(#ffffff, #18231d);
    --rule: light-dark(#cfc7b5, #2d3b33);
    --rule-strong: light-dark(#8f8775, #5c6c63);
    --ink: light-dark(#1b2622, #eef2ec);
    --text: light-dark(#2f3b40, #d5ddd4);
    --muted: light-dark(#4c5753, #a7b3ab);
    --green-100: light-dark(#e6eedf, #1f3523);

    --heading: light-dark(#054010, #e6efe2);
    --accent-ink: light-dark(#054010, #a9d99b);
    --accent-ink-soft: light-dark(#1e421a, #b9dbab);
    --accent-line: light-dark(#054010, #7dbb6b);
    --accent-line-soft: light-dark(#1e421a, #5f9150);
    --orange-ink: light-dark(#a8480f, #f5a466);

    --field: light-dark(#ffffff, #101a15);
    --placeholder: light-dark(#6b7470, #808b84);
    --plate: light-dark(#fbfaf6, #17221c);
    --sheet-hover: light-dark(#fffdf7, #1f2b24);
    --panel-shadow: light-dark(rgba(20, 30, 25, 0.16), rgba(0, 0, 0, 0.55));
    --error-ink: light-dark(#b42318, #ff9c8f);
    --error-bg: light-dark(#fdf0ee, #3b1915);
    --mark-bg: light-dark(#fde3c5, #5c3a17);
    --footer-field: light-dark(#ffffff, #0d1912);
    --footer-field-ink: light-dark(#1b2622, #eef2ec);
    --footer-field-muted: light-dark(#4c5753, #a7b3ab);
    --footer-field-line: light-dark(#ffffff, rgba(255, 255, 255, 0.45));

    --tone-green-ink: light-dark(#1e5a2b, #a6d79c); --tone-green-bg: light-dark(#ebf3e6, #17271b); --tone-green-line: light-dark(#4a8a3c, #6fae67);
    --tone-blue-ink: light-dark(#1f5f8b, #a3cdee); --tone-blue-bg: light-dark(#e8f1f9, #142430); --tone-blue-line: light-dark(#3b7ca8, #5f9cc9);
    --tone-teal-ink: light-dark(#1f6b66, #93d6cf); --tone-teal-bg: light-dark(#e5f3f1, #12292a); --tone-teal-line: light-dark(#2f8a83, #57b0a8);
    --tone-yellow-ink: light-dark(#735400, #ecce73); --tone-yellow-bg: light-dark(#fbf4dc, #2a2412); --tone-yellow-line: light-dark(#c9a227, #b8962c);
    --tone-orange-ink: light-dark(#a8480f, #f5a466); --tone-orange-bg: light-dark(#fdeee2, #2e1d12); --tone-orange-line: light-dark(#dc7030, #dc7030);
    --tone-red-ink: light-dark(#a3302a, #f3a197); --tone-red-bg: light-dark(#fbe9e7, #2e1715); --tone-red-line: light-dark(#c0473c, #d9695e);
    --tone-purple-ink: light-dark(#5d3f8e, #cdb8f0); --tone-purple-bg: light-dark(#f1ebf8, #231b30); --tone-purple-line: light-dark(#7a5cb0, #9b84cf);
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

/* packages/core/src/css/flag-offsets.css */
:root {
  --iti-flag-width: 20px;
  --iti-flag-count: 244;
}
.iti__ac {
  --iti-flag-offset: 0;
}
.iti__ad {
  --iti-flag-offset: -1;
}
.iti__ae {
  --iti-flag-offset: -2;
}
.iti__af {
  --iti-flag-offset: -3;
}
.iti__ag {
  --iti-flag-offset: -4;
}
.iti__ai {
  --iti-flag-offset: -5;
}
.iti__al {
  --iti-flag-offset: -6;
}
.iti__am {
  --iti-flag-offset: -7;
}
.iti__ao {
  --iti-flag-offset: -8;
}
.iti__ar {
  --iti-flag-offset: -9;
}
.iti__as {
  --iti-flag-offset: -10;
}
.iti__at {
  --iti-flag-offset: -11;
}
.iti__au {
  --iti-flag-offset: -12;
}
.iti__aw {
  --iti-flag-offset: -13;
}
.iti__ax {
  --iti-flag-offset: -14;
}
.iti__az {
  --iti-flag-offset: -15;
}
.iti__ba {
  --iti-flag-offset: -16;
}
.iti__bb {
  --iti-flag-offset: -17;
}
.iti__bd {
  --iti-flag-offset: -18;
}
.iti__be {
  --iti-flag-offset: -19;
}
.iti__bf {
  --iti-flag-offset: -20;
}
.iti__bg {
  --iti-flag-offset: -21;
}
.iti__bh {
  --iti-flag-offset: -22;
}
.iti__bi {
  --iti-flag-offset: -23;
}
.iti__bj {
  --iti-flag-offset: -24;
}
.iti__bl {
  --iti-flag-offset: -25;
}
.iti__bm {
  --iti-flag-offset: -26;
}
.iti__bn {
  --iti-flag-offset: -27;
}
.iti__bo {
  --iti-flag-offset: -28;
}
.iti__bq {
  --iti-flag-offset: -29;
}
.iti__br {
  --iti-flag-offset: -30;
}
.iti__bs {
  --iti-flag-offset: -31;
}
.iti__bt {
  --iti-flag-offset: -32;
}
.iti__bw {
  --iti-flag-offset: -33;
}
.iti__by {
  --iti-flag-offset: -34;
}
.iti__bz {
  --iti-flag-offset: -35;
}
.iti__ca {
  --iti-flag-offset: -36;
}
.iti__cc {
  --iti-flag-offset: -37;
}
.iti__cd {
  --iti-flag-offset: -38;
}
.iti__cf {
  --iti-flag-offset: -39;
}
.iti__cg {
  --iti-flag-offset: -40;
}
.iti__ch {
  --iti-flag-offset: -41;
}
.iti__ci {
  --iti-flag-offset: -42;
}
.iti__ck {
  --iti-flag-offset: -43;
}
.iti__cl {
  --iti-flag-offset: -44;
}
.iti__cm {
  --iti-flag-offset: -45;
}
.iti__cn {
  --iti-flag-offset: -46;
}
.iti__co {
  --iti-flag-offset: -47;
}
.iti__cr {
  --iti-flag-offset: -48;
}
.iti__cu {
  --iti-flag-offset: -49;
}
.iti__cv {
  --iti-flag-offset: -50;
}
.iti__cw {
  --iti-flag-offset: -51;
}
.iti__cx {
  --iti-flag-offset: -52;
}
.iti__cy {
  --iti-flag-offset: -53;
}
.iti__cz {
  --iti-flag-offset: -54;
}
.iti__de {
  --iti-flag-offset: -55;
}
.iti__dj {
  --iti-flag-offset: -56;
}
.iti__dk {
  --iti-flag-offset: -57;
}
.iti__dm {
  --iti-flag-offset: -58;
}
.iti__do {
  --iti-flag-offset: -59;
}
.iti__dz {
  --iti-flag-offset: -60;
}
.iti__ec {
  --iti-flag-offset: -61;
}
.iti__ee {
  --iti-flag-offset: -62;
}
.iti__eg {
  --iti-flag-offset: -63;
}
.iti__eh {
  --iti-flag-offset: -64;
}
.iti__er {
  --iti-flag-offset: -65;
}
.iti__es {
  --iti-flag-offset: -66;
}
.iti__et {
  --iti-flag-offset: -67;
}
.iti__fi {
  --iti-flag-offset: -68;
}
.iti__fj {
  --iti-flag-offset: -69;
}
.iti__fk {
  --iti-flag-offset: -70;
}
.iti__fm {
  --iti-flag-offset: -71;
}
.iti__fo {
  --iti-flag-offset: -72;
}
.iti__fr {
  --iti-flag-offset: -73;
}
.iti__ga {
  --iti-flag-offset: -74;
}
.iti__gb {
  --iti-flag-offset: -75;
}
.iti__gd {
  --iti-flag-offset: -76;
}
.iti__ge {
  --iti-flag-offset: -77;
}
.iti__gf {
  --iti-flag-offset: -78;
}
.iti__gg {
  --iti-flag-offset: -79;
}
.iti__gh {
  --iti-flag-offset: -80;
}
.iti__gi {
  --iti-flag-offset: -81;
}
.iti__gl {
  --iti-flag-offset: -82;
}
.iti__gm {
  --iti-flag-offset: -83;
}
.iti__gn {
  --iti-flag-offset: -84;
}
.iti__gp {
  --iti-flag-offset: -85;
}
.iti__gq {
  --iti-flag-offset: -86;
}
.iti__gr {
  --iti-flag-offset: -87;
}
.iti__gt {
  --iti-flag-offset: -88;
}
.iti__gu {
  --iti-flag-offset: -89;
}
.iti__gw {
  --iti-flag-offset: -90;
}
.iti__gy {
  --iti-flag-offset: -91;
}
.iti__hk {
  --iti-flag-offset: -92;
}
.iti__hn {
  --iti-flag-offset: -93;
}
.iti__hr {
  --iti-flag-offset: -94;
}
.iti__ht {
  --iti-flag-offset: -95;
}
.iti__hu {
  --iti-flag-offset: -96;
}
.iti__id {
  --iti-flag-offset: -97;
}
.iti__ie {
  --iti-flag-offset: -98;
}
.iti__il {
  --iti-flag-offset: -99;
}
.iti__im {
  --iti-flag-offset: -100;
}
.iti__in {
  --iti-flag-offset: -101;
}
.iti__io {
  --iti-flag-offset: -102;
}
.iti__iq {
  --iti-flag-offset: -103;
}
.iti__ir {
  --iti-flag-offset: -104;
}
.iti__is {
  --iti-flag-offset: -105;
}
.iti__it {
  --iti-flag-offset: -106;
}
.iti__je {
  --iti-flag-offset: -107;
}
.iti__jm {
  --iti-flag-offset: -108;
}
.iti__jo {
  --iti-flag-offset: -109;
}
.iti__jp {
  --iti-flag-offset: -110;
}
.iti__ke {
  --iti-flag-offset: -111;
}
.iti__kg {
  --iti-flag-offset: -112;
}
.iti__kh {
  --iti-flag-offset: -113;
}
.iti__ki {
  --iti-flag-offset: -114;
}
.iti__km {
  --iti-flag-offset: -115;
}
.iti__kn {
  --iti-flag-offset: -116;
}
.iti__kp {
  --iti-flag-offset: -117;
}
.iti__kr {
  --iti-flag-offset: -118;
}
.iti__kw {
  --iti-flag-offset: -119;
}
.iti__ky {
  --iti-flag-offset: -120;
}
.iti__kz {
  --iti-flag-offset: -121;
}
.iti__la {
  --iti-flag-offset: -122;
}
.iti__lb {
  --iti-flag-offset: -123;
}
.iti__lc {
  --iti-flag-offset: -124;
}
.iti__li {
  --iti-flag-offset: -125;
}
.iti__lk {
  --iti-flag-offset: -126;
}
.iti__lr {
  --iti-flag-offset: -127;
}
.iti__ls {
  --iti-flag-offset: -128;
}
.iti__lt {
  --iti-flag-offset: -129;
}
.iti__lu {
  --iti-flag-offset: -130;
}
.iti__lv {
  --iti-flag-offset: -131;
}
.iti__ly {
  --iti-flag-offset: -132;
}
.iti__ma {
  --iti-flag-offset: -133;
}
.iti__mc {
  --iti-flag-offset: -134;
}
.iti__md {
  --iti-flag-offset: -135;
}
.iti__me {
  --iti-flag-offset: -136;
}
.iti__mf {
  --iti-flag-offset: -137;
}
.iti__mg {
  --iti-flag-offset: -138;
}
.iti__mh {
  --iti-flag-offset: -139;
}
.iti__mk {
  --iti-flag-offset: -140;
}
.iti__ml {
  --iti-flag-offset: -141;
}
.iti__mm {
  --iti-flag-offset: -142;
}
.iti__mn {
  --iti-flag-offset: -143;
}
.iti__mo {
  --iti-flag-offset: -144;
}
.iti__mp {
  --iti-flag-offset: -145;
}
.iti__mq {
  --iti-flag-offset: -146;
}
.iti__mr {
  --iti-flag-offset: -147;
}
.iti__ms {
  --iti-flag-offset: -148;
}
.iti__mt {
  --iti-flag-offset: -149;
}
.iti__mu {
  --iti-flag-offset: -150;
}
.iti__mv {
  --iti-flag-offset: -151;
}
.iti__mw {
  --iti-flag-offset: -152;
}
.iti__mx {
  --iti-flag-offset: -153;
}
.iti__my {
  --iti-flag-offset: -154;
}
.iti__mz {
  --iti-flag-offset: -155;
}
.iti__na {
  --iti-flag-offset: -156;
}
.iti__nc {
  --iti-flag-offset: -157;
}
.iti__ne {
  --iti-flag-offset: -158;
}
.iti__nf {
  --iti-flag-offset: -159;
}
.iti__ng {
  --iti-flag-offset: -160;
}
.iti__ni {
  --iti-flag-offset: -161;
}
.iti__nl {
  --iti-flag-offset: -162;
}
.iti__no {
  --iti-flag-offset: -163;
}
.iti__np {
  --iti-flag-offset: -164;
}
.iti__nr {
  --iti-flag-offset: -165;
}
.iti__nu {
  --iti-flag-offset: -166;
}
.iti__nz {
  --iti-flag-offset: -167;
}
.iti__om {
  --iti-flag-offset: -168;
}
.iti__pa {
  --iti-flag-offset: -169;
}
.iti__pe {
  --iti-flag-offset: -170;
}
.iti__pf {
  --iti-flag-offset: -171;
}
.iti__pg {
  --iti-flag-offset: -172;
}
.iti__ph {
  --iti-flag-offset: -173;
}
.iti__pk {
  --iti-flag-offset: -174;
}
.iti__pl {
  --iti-flag-offset: -175;
}
.iti__pm {
  --iti-flag-offset: -176;
}
.iti__pr {
  --iti-flag-offset: -177;
}
.iti__ps {
  --iti-flag-offset: -178;
}
.iti__pt {
  --iti-flag-offset: -179;
}
.iti__pw {
  --iti-flag-offset: -180;
}
.iti__py {
  --iti-flag-offset: -181;
}
.iti__qa {
  --iti-flag-offset: -182;
}
.iti__re {
  --iti-flag-offset: -183;
}
.iti__ro {
  --iti-flag-offset: -184;
}
.iti__rs {
  --iti-flag-offset: -185;
}
.iti__ru {
  --iti-flag-offset: -186;
}
.iti__rw {
  --iti-flag-offset: -187;
}
.iti__sa {
  --iti-flag-offset: -188;
}
.iti__sb {
  --iti-flag-offset: -189;
}
.iti__sc {
  --iti-flag-offset: -190;
}
.iti__sd {
  --iti-flag-offset: -191;
}
.iti__se {
  --iti-flag-offset: -192;
}
.iti__sg {
  --iti-flag-offset: -193;
}
.iti__sh {
  --iti-flag-offset: -194;
}
.iti__si {
  --iti-flag-offset: -195;
}
.iti__sj {
  --iti-flag-offset: -196;
}
.iti__sk {
  --iti-flag-offset: -197;
}
.iti__sl {
  --iti-flag-offset: -198;
}
.iti__sm {
  --iti-flag-offset: -199;
}
.iti__sn {
  --iti-flag-offset: -200;
}
.iti__so {
  --iti-flag-offset: -201;
}
.iti__sr {
  --iti-flag-offset: -202;
}
.iti__ss {
  --iti-flag-offset: -203;
}
.iti__st {
  --iti-flag-offset: -204;
}
.iti__sv {
  --iti-flag-offset: -205;
}
.iti__sx {
  --iti-flag-offset: -206;
}
.iti__sy {
  --iti-flag-offset: -207;
}
.iti__sz {
  --iti-flag-offset: -208;
}
.iti__tc {
  --iti-flag-offset: -209;
}
.iti__td {
  --iti-flag-offset: -210;
}
.iti__tg {
  --iti-flag-offset: -211;
}
.iti__th {
  --iti-flag-offset: -212;
}
.iti__tj {
  --iti-flag-offset: -213;
}
.iti__tk {
  --iti-flag-offset: -214;
}
.iti__tl {
  --iti-flag-offset: -215;
}
.iti__tm {
  --iti-flag-offset: -216;
}
.iti__tn {
  --iti-flag-offset: -217;
}
.iti__to {
  --iti-flag-offset: -218;
}
.iti__tr {
  --iti-flag-offset: -219;
}
.iti__tt {
  --iti-flag-offset: -220;
}
.iti__tv {
  --iti-flag-offset: -221;
}
.iti__tw {
  --iti-flag-offset: -222;
}
.iti__tz {
  --iti-flag-offset: -223;
}
.iti__ua {
  --iti-flag-offset: -224;
}
.iti__ug {
  --iti-flag-offset: -225;
}
.iti__us {
  --iti-flag-offset: -226;
}
.iti__uy {
  --iti-flag-offset: -227;
}
.iti__uz {
  --iti-flag-offset: -228;
}
.iti__va {
  --iti-flag-offset: -229;
}
.iti__vc {
  --iti-flag-offset: -230;
}
.iti__ve {
  --iti-flag-offset: -231;
}
.iti__vg {
  --iti-flag-offset: -232;
}
.iti__vi {
  --iti-flag-offset: -233;
}
.iti__vn {
  --iti-flag-offset: -234;
}
.iti__vu {
  --iti-flag-offset: -235;
}
.iti__wf {
  --iti-flag-offset: -236;
}
.iti__ws {
  --iti-flag-offset: -237;
}
.iti__xk {
  --iti-flag-offset: -238;
}
.iti__ye {
  --iti-flag-offset: -239;
}
.iti__yt {
  --iti-flag-offset: -240;
}
.iti__za {
  --iti-flag-offset: -241;
}
.iti__zm {
  --iti-flag-offset: -242;
}
.iti__zw {
  --iti-flag-offset: -243;
}

/* packages/core/src/css/intlTelInput.css */
:root {
  --iti-hover-color: rgba(0, 0, 0, 0.05);
  --iti-border-color: #ccc;
  --iti-country-selector-bg: white;
  --iti-icon-color: #555;
  --iti-spacer-horizontal: 10px;
  --iti-flag-height: calc(var(--iti-flag-width) * 3 / 4);
  --iti-globe-icon-size: 17px;
  --iti-clear-icon-size: 15px;
  --iti-close-icon-size: 20px;
  --iti-border-width: 1px;
  --iti-arrow-size: 5px;
  --iti-arrow-width: 1.5px;
  --iti-arrow-padding: 7px;
  --iti-mobile-popup-margin: 44px;
  --iti-strict-reject-flash-color: rgba(255, 0, 0, 0.12);
}
.iti {
  position: relative;
  display: inline-block;
}
.iti * {
  box-sizing: border-box;
}
.iti input.iti__tel-input,
.iti input.iti__tel-input[type=text],
.iti input.iti__tel-input[type=tel] {
  position: relative;
  z-index: 0;
  display: block;
  min-width: 100%;
  margin: 0 !important;
}
.iti__a11y-text {
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
}
.iti__country-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding: var(--iti-border-width);
}
.iti__selected-country {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}
.iti__selected-country-primary {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
}
.iti__selected-dial-code {
  margin-left: 4px;
}
.iti__arrow {
  margin-left: var(--iti-arrow-padding);
  margin-top: -2px;
  width: var(--iti-arrow-size);
  height: var(--iti-arrow-size);
  box-sizing: border-box;
  border-right: var(--iti-arrow-width) solid var(--iti-icon-color);
  border-bottom: var(--iti-arrow-width) solid var(--iti-icon-color);
  transform: rotate(45deg);
}
.iti__arrow--up {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.iti__country-selector {
  border-radius: 3px;
  background-color: var(--iti-country-selector-bg);
}
.iti--inline-country-selector .iti__country-selector {
  border: var(--iti-border-width) solid var(--iti-border-color);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.iti--inline-country-selector:not(.iti--detached-country-selector) .iti__country-selector {
  position: absolute;
  z-index: 2;
  left: 0;
}
.iti__search-input {
  width: 100%;
  border-width: 0;
  border-radius: 3px;
  padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
}
[dir=rtl] .iti__search-input {
  padding-left: inherit;
  padding-right: 30px;
  background-position: right 8px center;
}
.iti__search-input::-webkit-search-cancel-button {
  appearance: none;
}
.iti__search-input,
.iti__country {
  padding-top: 8px;
  padding-bottom: 8px;
}
.iti__search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--iti-border-color);
}
.iti__search-icon {
  position: absolute;
  left: var(--iti-spacer-horizontal);
  display: flex;
  pointer-events: none;
}
[dir=rtl] .iti__search-icon {
  left: auto;
  right: var(--iti-spacer-horizontal);
}
.iti__search-icon-svg {
  width: var(--iti-globe-icon-size);
  height: var(--iti-globe-icon-size);
  display: block;
  stroke: var(--iti-icon-color);
  fill: none;
  stroke-width: 3;
}
.iti__search-clear {
  position: absolute;
  right: calc(var(--iti-spacer-horizontal) / 2);
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  padding: calc(var(--iti-spacer-horizontal) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.iti__search-clear .iti__search-clear-x {
  stroke-width: 2;
}
.iti__search-clear .iti__search-clear-bg {
  fill: var(--iti-icon-color);
}
[dir=rtl] .iti__search-clear {
  right: auto;
  left: var(--iti-spacer-horizontal);
}
.iti__search-clear:hover,
.iti__search-clear:focus-visible {
  background: var(--iti-hover-color);
  outline: none;
}
.iti__search-clear-svg {
  width: var(--iti-clear-icon-size);
  height: var(--iti-clear-icon-size);
  display: block;
}
.iti__no-results {
  text-align: center;
  padding: 30px 0;
}
.iti__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.iti--inline-country-selector .iti__country-list {
  max-height: 185px;
}
.iti--flexible-dropdown-width .iti__country-list {
  white-space: nowrap;
}
@media (max-width: 500px) {
  .iti--flexible-dropdown-width .iti__country-list {
    white-space: normal;
  }
}
.iti__country {
  display: flex;
  align-items: center;
  padding-left: var(--iti-spacer-horizontal);
  padding-right: var(--iti-spacer-horizontal);
}
.iti__country.iti__highlight {
  background-color: var(--iti-hover-color);
}
.iti__country-name {
  flex-grow: 1;
}
.iti__country-check {
  margin-left: var(--iti-spacer-horizontal);
  display: flex;
  align-items: center;
  color: var(--iti-icon-color);
}
.iti__country-check-svg {
  width: var(--iti-clear-icon-size);
  height: var(--iti-clear-icon-size);
  display: block;
}
.iti__country-list .iti__flag {
  margin-right: var(--iti-spacer-horizontal);
  flex-shrink: 0;
}
[dir=rtl] :is(.iti__country-list .iti__flag) {
  margin-right: 0;
  margin-left: var(--iti-spacer-horizontal);
}
:is(.iti--has-country-selector .iti__country-container:has(+ input[disabled]), .iti--has-country-selector .iti__country-container:has(+ input[readonly])) button.iti__selected-country {
  cursor: not-allowed;
}
:is(.iti--has-country-selector .iti__country-container:has(+ input[disabled]), .iti--has-country-selector .iti__country-container:has(+ input[readonly])) button.iti__selected-country .iti__arrow {
  visibility: hidden;
}
.iti--has-country-selector .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
.iti--has-country-selector .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country[aria-expanded=true] .iti__selected-country-primary {
  background-color: var(--iti-hover-color);
}
.iti--detached-country-selector {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
}
.iti--detached-country-selector:hover {
  cursor: pointer;
}
.iti--detached-country-selector {
  top: calc(anchor(bottom) + 3px);
  left: anchor(left);
  position-try-fallbacks: --iti-flip-above;
}
@position-try --iti-flip-above {
  top: auto;
  bottom: calc(anchor(top) + 3px);
}
.iti__hide {
  display: none;
}
.iti__v-hide {
  visibility: hidden;
}
.iti--fullscreen-popup.iti--detached-country-selector {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  padding: var(--iti-mobile-popup-margin);
  padding-bottom: calc(var(--iti-mobile-popup-margin) + var(--iti-virtual-keyboard-height, 0px));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.iti--fullscreen-popup .iti__country-selector {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
}
.iti--fullscreen-popup .iti__close-button {
  position: absolute;
  bottom: 100%;
  right: calc(-1 * var(--iti-mobile-popup-margin));
  width: var(--iti-mobile-popup-margin);
  height: var(--iti-mobile-popup-margin);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
[dir=rtl] :is(.iti--fullscreen-popup .iti__close-button) {
  right: auto;
  left: calc(-1 * var(--iti-mobile-popup-margin));
}
.iti--fullscreen-popup .iti__close-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.iti--fullscreen-popup .iti__close-button-svg {
  width: var(--iti-close-icon-size);
  height: var(--iti-close-icon-size);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}
.iti--fullscreen-popup .iti__country,
.iti--fullscreen-popup .iti__search-input {
  padding-top: 10px;
  padding-bottom: 10px;
}
.iti--fullscreen-popup .iti__search-input {
  font-size: max(16px, 1em);
}
.iti--fullscreen-popup .iti__country {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.5em;
}
.iti__flag {
  height: var(--iti-flag-height);
  width: var(--iti-flag-width);
  border-radius: 1px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: image-set(var(--iti-path-flags-1x) 1x, var(--iti-path-flags-2x) 2x);
  background-repeat: no-repeat;
  background-position: calc(var(--iti-flag-offset, 100) * var(--iti-flag-width)) 0;
  background-size: calc(var(--iti-flag-count) * var(--iti-flag-width)) var(--iti-flag-height);
}
.iti__loading {
  position: relative;
  background: none;
  box-shadow: none;
}
.iti__loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--iti-flag-height);
  height: var(--iti-flag-height);
  box-sizing: border-box;
  border: 2px solid var(--iti-icon-color);
  border-right-color: transparent;
  border-radius: 50%;
  animation: iti-spinner 1s linear infinite;
}
@keyframes iti-spinner {
  to {
    transform: rotate(360deg);
  }
}
.iti__strict-reject-animation .iti__tel-input,
.iti__strict-reject-animation .iti__selected-country {
  animation: iti-strict-reject-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@media (prefers-reduced-motion: reduce) {
  .iti__strict-reject-animation .iti__tel-input {
    animation: iti-strict-reject-flash 0.3s ease-out both;
  }
  .iti__strict-reject-animation .iti__selected-country {
    animation: none;
  }
}
@keyframes iti-strict-reject-shake {
  10%, 90% {
    transform: translateX(-1px);
  }
  20%, 80% {
    transform: translateX(2px);
  }
  30%, 50%, 70% {
    transform: translateX(-3px);
  }
  40%, 60% {
    transform: translateX(3px);
  }
}
@keyframes iti-strict-reject-flash {
  40% {
    background-color: var(--iti-strict-reject-flash-color);
  }
}
.iti__globe {
  background: none;
  box-shadow: none;
  height: var(--iti-globe-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.iti__globe .iti__globe-svg {
  width: 100%;
  height: 100%;
  fill: var(--iti-icon-color);
}
@supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))) {
  .iti__tel-input:focus {
    outline-offset: 1px;
  }
}

/* packages/core/src/css/intlTelInputWithAssets.css */
:root {
  --iti-path-flags-1x: url(img/flags.webp?v=1.14.0);
  --iti-path-flags-2x: url(img/flags@2x.webp?v=1.14.0);
}

/*
 * HazBasis Back Office styles. Tokens come from tokens.css, copied verbatim from the
 * website (apps/website/src/styles/tokens.css), so colours, type and spacing match it.
 * Component shapes (buttons, fields, the spec plate, mono labels) follow basis.css.
 */

/* ---------- Fonts (self-hosted, same families as the website) ---------- */
@font-face { font-family: "Archivo Variable"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url("/assets/fonts/archivo-latin-wdth-normal.woff2?v=1.14.0") format("woff2-variations"); 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: "Archivo Variable"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url("/assets/fonts/archivo-latin-ext-wdth-normal.woff2?v=1.14.0") format("woff2-variations"); 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2?v=1.14.0") format("woff2-variations"); 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: "Atkinson Hyperlegible Next Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2?v=1.14.0") format("woff2-variations"); 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next Variable"; font-style: italic; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2?v=1.14.0") format("woff2-variations"); 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: "Atkinson Hyperlegible Mono Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2?v=1.14.0") format("woff2-variations"); 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; }

/* ---------- Base ---------- */
:root {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23054010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9d99b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9d99b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
/* Tables set their lines at the font's own spacing, tighter than body text: every list was
   laid out that way while the pages ran in quirks mode, which gives tables that spacing. */
table { line-height: normal; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: 92%;
  color: var(--heading);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.875rem, 1.6vw + 1.3rem, 2.5rem); font-weight: 800; }
h2 { font-size: var(--fs-h4); font-weight: 750; }
h3 { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
p { margin: 0 0 var(--s-4); }
strong { color: var(--ink); }
a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 3px; border-radius: 2px; }
code, .mono { font-family: var(--font-mono); font-size: 0.9375em; }
code { background: var(--paper-2); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--green-900); color: #fff; padding: 12px 16px; font-weight: 700;
}
.skip-link:focus { top: 8px; }

/* The gutter comes from the width, so a component's own padding can never remove it. */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink-soft);
  margin: 0 0 var(--s-2);
}

/* ---------- Buttons (basis.css shapes) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 10px 22px;
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; line-height: 1.2;
  border-radius: var(--radius); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn--action { background: var(--orange-500); color: #14110f; border-color: #b9520f; }
.btn--action:hover { background: #f27d2f; }
.btn--primary { background: var(--green-900); color: #fff; }
.btn--primary:hover { background: var(--green-950); }
.btn--outline { background: transparent; color: var(--accent-ink); border-color: var(--accent-line); }
.btn--outline:hover { background: var(--green-100); }
.btn--quiet { min-height: 40px; padding: 6px 14px; font-size: 1rem; background: transparent; color: var(--accent-ink); border-color: var(--rule-strong); }
.btn--quiet:hover { border-color: var(--accent-line); background: var(--green-100); }
/* An icon-only button: a square as tall as the other buttons. Its tooltip shows the same
   words as its aria-label on hover and keyboard focus, and opens rightward from its left
   edge so it never runs off a phone screen. */
.btn--icon { position: relative; width: var(--tap); padding: 0; }
.btn--icon svg { width: 20px; height: 20px; }
.btn--icon::after {
  content: attr(aria-label); position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5;
  padding: 6px 10px; border-radius: var(--radius); background: var(--ink); color: var(--paper);
  font-size: 0.875rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease-out;
}
.btn--icon:hover::after, .btn--icon:focus-visible::after { opacity: 1; visibility: visible; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer; }
.link-button:hover { text-decoration-thickness: 3px; }

/* ---------- App shell ---------- */
/* The signed-in pages use the width of a wide screen, where lists and tables need it;
   forms and reading text keep narrower measures of their own. */
.app { --max: 1920px; --bar-h: 72px; --header-h: 79px; --rail-w: 96px; --tabbar-h: 61px; display: flex; flex-direction: column; min-height: 100vh; }
.app-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--sheet);
  border-top: 6px solid var(--green-900);
  border-bottom: 1px solid var(--rule);
}
.app-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--orange-600); }
.app-header__bar { display: flex; align-items: center; gap: var(--s-5); height: var(--bar-h); padding-inline: var(--gutter); }
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand__logo { height: 44px; width: auto; }
.brand__logo--dark { display: none; }
.brand__tag {
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink-soft); border-left: 1px solid var(--rule-strong); padding-left: var(--s-3); line-height: 1.2;
}
/* Quick find: a search box between the logo and the bell. Ctrl K (⌘K on a Mac) puts the
   cursor in it, and the key sits inside the box's right end as a reminder. */
.quick-find { position: relative; flex: 0 1 32rem; min-width: 14rem; margin: 0 auto; }
.quick-find__icon { position: absolute; top: 50%; left: 12px; width: 20px; height: 20px; margin-top: -10px; color: var(--muted); pointer-events: none; }
.quick-find__box {
  width: 100%; min-height: 44px; padding: 0 76px 0 42px; font: 400 1rem var(--font-body); color: var(--ink);
  background: var(--field); border: 2px solid var(--rule-strong); border-radius: var(--radius); appearance: none;
}
.quick-find__box::placeholder { color: var(--placeholder); opacity: 1; }
.quick-find__box:focus-visible { border-color: var(--accent-line); }
.quick-find__key {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding: 2px 6px;
  font: 600 0.75rem var(--font-mono); color: var(--muted); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
}
/* Once something is typed, the key gives way to the browser's clear button, which takes
   the key's place at the box's right end. */
.quick-find__box:not(:placeholder-shown) { padding-right: 12px; }
.quick-find__box:not(:placeholder-shown) + .quick-find__key { display: none; }
/* Tablets: the logo drops its "Back Office" tag and the box its key, so the whole hint in
   the box still shows beside the rail. */
@media (max-width: 899px) {
  .brand__tag, .quick-find__key { display: none; }
  .quick-find__box { padding-right: 12px; }
}

/* The bell, the account and every section are <details> disclosures, so
   they open without JavaScript; app.ts closes them on Escape, on a click elsewhere, and
   when focus leaves them. */
.nav-menu { position: relative; }
.nav-menu__toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-3);
  color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; border-bottom: 3px solid transparent;
}
.nav-menu__toggle::-webkit-details-marker { display: none; }
.nav-menu__toggle:hover { border-bottom-color: var(--rule-strong); }
.nav-menu__toggle.is-current { border-bottom-color: var(--orange-600); color: var(--accent-ink); }
.nav-menu__chevron { flex: none; width: 16px; height: 16px; transition: transform 0.15s; }
.nav-menu[open] .nav-menu__chevron { transform: rotate(180deg); }
/* The bell and the account end the bar. On a phone a search button joins them, standing
   in for the quick find box. */
.app-tools { display: flex; flex: none; align-items: center; gap: var(--s-1); }
.app-tools__find { display: none; }
.app-tools__find-icon { width: 22px; height: 22px; }

/* The section rail down the left: each section an icon with its name under it, staying in
   place while the page scrolls. Its column is drawn by the row behind it, so the column
   runs the page's full height while the rail itself is only as tall as its sections. A
   section opens a fly-out beside it, listing its groups and each page with a line on what
   it holds; on a computer it also opens when the mouse rests on it (app.ts). The
   list starts right at the header's line, so the first section's tint meets it, and stops
   1px short of the column's right border, so a tinted section leaves the border showing. */
.app-body { position: relative; display: flex; flex: 1; }
/* The notices and the page share the column beside the rail, so the rail and its
   fly-outs start right under the header and never cut through a notice. */
.app-column { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--rail-w); background: var(--sheet); border-right: 1px solid var(--rule); }
.app-rail {
  position: sticky; z-index: 30; top: var(--header-h); align-self: flex-start; flex: none;
  width: var(--rail-w); max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.app-rail__list { display: grid; gap: 2px; margin: 0; padding: 0 1px var(--s-2) 0; list-style: none; }
.app-rail__item--more { display: none; }
.app-rail__link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; padding: var(--s-2) var(--s-1);
  color: var(--ink); font: 700 0.8125rem/1.2 var(--font-body); text-align: center; text-decoration: none; list-style: none;
  border: 0 solid transparent; border-inline-width: 3px; cursor: pointer;
}
.app-rail__link::-webkit-details-marker { display: none; }
.app-rail__link:hover { background: var(--green-100); text-decoration: none; }
.app-rail__link:focus-visible, .app-rail__page:focus-visible { outline-offset: -3px; }
.app-rail__link.is-current { color: var(--accent-ink); background: var(--green-100); border-left-color: var(--orange-600); }
.app-rail__menu[open] > .app-rail__link { color: var(--accent-ink); background: var(--green-100); }
.app-rail__icon { flex: none; width: 24px; height: 24px; }
.app-rail__label { max-width: 100%; overflow-wrap: anywhere; }
/* The fly-out runs down to the footer's top edge: app.ts sets --flyout-bottom to the height
   of footer on screen. */
.app-rail__flyout {
  position: fixed; z-index: 45; top: var(--header-h); bottom: var(--flyout-bottom, 0px); left: var(--rail-w); width: 320px; overflow-y: auto; padding: var(--s-4) 0;
  background: var(--sheet); border-right: 1px solid var(--rule-strong); box-shadow: 12px 0 28px var(--panel-shadow);
}
.app-rail__title { margin: 0 0 var(--s-3); padding: 0 var(--s-5) var(--s-3); border-bottom: 1px solid var(--rule); font: 600 0.8125rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink-soft); }
.app-rail__group-title { margin: 0; padding: 0 var(--s-5) var(--s-2); font: 600 0.75rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.app-rail__pages { margin: 0; padding: 0; list-style: none; }
.app-rail__page { display: grid; gap: 2px; padding: 10px var(--s-5) 10px calc(var(--s-5) - 3px); color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.app-rail__page:hover { background: var(--green-100); text-decoration: none; }
.app-rail__page[aria-current="page"] { background: var(--green-100); border-left-color: var(--orange-600); }
.app-rail__name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;

  font-weight: 700;
}
.app-rail__page[aria-current="page"] .app-rail__name { color: var(--accent-ink); }
.app-rail__detail { font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.app-rail__group + .app-rail__group, .app-rail__subgroup + .app-rail__subgroup { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule); }

/* The bell's panel lines up with the bell's right edge; on a phone it spans the bar. A new
   notification has an orange edge and "New" written out. */
.notice-menu__bell { flex: none; width: 22px; height: 22px; }
.app-rail__badge, .notice-menu__count {
  display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--orange-500); color: #14110f; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; line-height: 1;
}
.notice-panel {
  position: absolute; z-index: 45; top: calc(100% + 6px); right: 0; width: 380px; max-height: 70vh; overflow-y: auto;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-top: 3px solid var(--green-900); border-radius: var(--radius);
  box-shadow: 0 10px 28px var(--panel-shadow);
}
.notice-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--rule); }
.notice-panel__title { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.notice-panel__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 var(--s-3); }
.notice-panel__actions form { margin: 0; }
.notice-panel__actions .link-button, .notice-panel__all { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 0.9375rem; }
.notice-panel__empty { margin: 0; padding: var(--s-4); font-size: 0.9375rem; color: var(--muted); }
.notice-list { margin: 0; padding: 0; list-style: none; }
.notice-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; min-width: 0; }
.notice-item + .notice-item { border-top: 1px solid var(--rule); }
.notice-item__link {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); align-items: start; min-height: 0;
  padding: var(--s-3) var(--s-4); border-bottom: 0; border-left: 3px solid transparent; color: var(--ink); font-weight: 400; text-decoration: none;
}
a.notice-item__link:hover { background: var(--green-100); }
.notice-item--new .notice-item__link { border-left-color: var(--orange-600); }
.notice-item__dismiss-form, .notice-item__action-form { margin: 0; }
.notice-item__dismiss {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
  background: none; border: 0; color: var(--muted); font: 700 1.125rem/1 var(--font-body); cursor: pointer;
}
.notice-item__dismiss:hover { background: var(--green-100); color: var(--accent-ink); }
.notice-item__dismiss-icon { width: 18px; height: 18px; }
/* On the notifications page, Dismiss and Restore sit in the middle of their row, however
   many lines the notification takes; the bell's × stays beside the first line. */
.notice-item__action-form { align-self: center; padding: var(--s-2) var(--s-3) var(--s-2) 0; }
.notice-item__action { min-height: var(--tap); padding: 6px 12px; font-size: 0.9375rem; }
.notice-item__icon { width: 20px; height: 20px; margin-top: 2px; color: var(--muted); }
.notice-item--alert .notice-item__icon { color: var(--tone-orange-ink); }
.notice-item--payment .notice-item__icon { color: var(--tone-green-ink); }
.notice-item__body { display: grid; gap: 2px; min-width: 0; }
.notice-item__text { font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.notice-item__meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); font-size: 0.8125rem; color: var(--muted); }
.notice-item__new { font-weight: 700; color: var(--accent-ink); }
.notice-list--page { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.notice-page__actions { display: flex; justify-content: flex-end; margin: 0 0 var(--s-3); }

/* The account: the person's initials in a green circle (and their name on a wide screen),
   opening who is signed in, the other language and Sign out. */
.account-menu__toggle { gap: var(--s-2); padding: 0 var(--s-2); }
.account-menu__avatar {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--green-900); color: #fff; font-size: 0.875rem; font-weight: 700; line-height: 1;
}
.account-menu__name { display: none; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1440px) { .account-menu__name { display: inline; } }
.account-panel {
  position: absolute; z-index: 45; top: calc(100% + 6px); right: 0; width: 300px;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-top: 3px solid var(--green-900); border-radius: var(--radius);
  box-shadow: 0 10px 28px var(--panel-shadow);
}
.account-panel__who { display: grid; gap: 2px; margin: 0; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); line-height: 1.35; }
.account-panel__label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.account-panel__name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.account-panel__email { font-size: 0.9375rem; color: var(--muted); overflow-wrap: anywhere; }
.account-panel__list { margin: 0; padding: var(--s-2) 0; list-style: none; }
.account-panel__list form { margin: 0; }
.account-panel__item {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px; padding: 0 var(--s-4);
  font: 700 1rem var(--font-body); color: var(--ink); text-align: left; text-decoration: none;
  background: none; border: 0; border-left: 3px solid transparent; cursor: pointer;
}
.account-panel__item:hover { background: var(--green-100); text-decoration: none; }
.account-panel__icon { flex: none; width: 20px; height: 20px; color: var(--muted); }

/* Mobile mode, at 1024px and below: a search button stands in for the quick find box, the
   rail becomes a tab bar along the bottom of the screen, and a section's pages open as a
   sheet above it. When a person can open more sections than five tabs hold, the fifth is
   More, holding the rest. */
@media (max-width: 1024px) {
  .app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .app--no-sections { padding-bottom: 0; }
  .quick-find { display: none; }
  .app-tools { margin-left: auto; }
  .app-tools__find {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-2);
    color: var(--ink); border-bottom: 3px solid transparent;
  }
  .app-tools__find:hover { border-bottom-color: var(--rule-strong); }
  .app-body::before { display: none; }
  .app-rail {
    position: fixed; z-index: 35; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: none; overflow: visible;
    padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--sheet); border-top: 1px solid var(--rule);
  }
  .app-rail__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .app-rail__item--home { display: none; }
  .app--no-sections .app-rail { display: none; }
  .app-rail__item--overflow { display: none; }
  .app-rail__item--more { display: block; }
  .app-rail__link { min-height: 60px; padding: 6px 2px; font-size: 0.75rem; border-width: 3px 0; }
  .app-rail__link.is-current { border-top-color: var(--orange-600); }
  .app-rail__flyout {
    top: auto; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); left: 0; width: auto;
    max-height: 70vh; max-height: calc(100dvh - var(--header-h) - var(--tabbar-h) - var(--s-6));
    border-top: 3px solid var(--green-900); border-right: 0; box-shadow: 0 -10px 28px var(--panel-shadow);
  }
  .app-rail__title, .app-rail__group-title, .app-rail__page { padding-inline: var(--gutter); }
  .app-rail__page { padding-left: calc(var(--gutter) - 3px); }
  .settings-form[data-dirty] .settings-form__actions { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-3)); }
}
/* Phones: the logo, the search button, the bell and the initials share one row, so the logo
   is a step smaller and the account drops its arrow. The bell's and the account's panels
   span the bar. */
@media (max-width: 559px) {
  .app-header__bar { position: relative; column-gap: var(--s-2); }
  .brand__logo { height: 40px; }
  .app-tools { gap: 0; }
  .notice-menu__toggle { padding: 0 var(--s-2); }
  .account-menu__toggle { padding: 0 0 0 var(--s-1); }
  .account-menu__toggle .nav-menu__chevron { display: none; }
  .notice-menu, .account-menu { position: static; }
  .notice-panel, .account-panel { left: 0; right: 0; width: auto; }
}
/* The smallest phones (320px): the tab names are a step smaller and use the tab's whole
   width, so "Newsletters" stays on one line. */
@media (max-width: 359px) {
  .app-rail__link { padding-inline: 0; font-size: 0.6875rem; }
}

.env-banner { background: var(--tone-yellow-bg); color: var(--tone-yellow-ink); border-bottom: 1px solid var(--tone-yellow-line); font-size: 0.9375rem; font-weight: 600; }
.env-banner .wrap { padding-block: var(--s-2); }
/* The banners' content lines up with the page: same left edge, same 1920px cap. */
.env-banner .wrap, .alert-banner__bar.wrap { margin-inline: var(--gutter) auto; }

/* A disputed payment that is not closed: on every page, above the notes, until it closes. */
.alert-banner { background: var(--error-bg); color: var(--error-ink); border-bottom: 1px solid var(--tone-red-line); font-size: 0.9375rem; font-weight: 600; }
.alert-banner__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-4); padding-block: var(--s-1); }
.alert-banner__text { margin: 0; padding-block: var(--s-1); }
.alert-banner__link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.app-main { flex: 1; min-width: 0; padding-block: var(--s-6) var(--s-8); }
/* Pages start at the left, beside the rail, at every width: the breadcrumb and the page
   share one left edge, and a capped page (a form, a settings page) ends early on the right
   instead of floating in the middle. */
.app-main > .wrap { margin-inline: var(--gutter) auto; }
.app-main:focus { outline: none; }

.app-footer { border-top: 1px solid var(--rule); background: var(--sheet); color: var(--muted); font-size: 0.9375rem; }
/* The footer's content runs the whole footer, edge to edge inside the gutters. */
.app-footer__bar.wrap { width: auto; margin-inline: var(--gutter); }
.app-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 56px; padding-block: var(--s-2); }
.app-footer__about { margin: 0; }
/* Appearance: one small button showing the choice in force (Auto, Light or Dark), opening
   the three upward, each with a line on what it does. The choice is marked like the current
   page in the rail: a tint, an orange edge and a tick. */
.appearance { position: relative; flex: none; }
.appearance__toggle {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 10px 0 var(--s-3);
  font: 600 0.9375rem/1 var(--font-body); color: var(--accent-ink); cursor: pointer; list-style: none;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.appearance__toggle::-webkit-details-marker { display: none; }
.appearance__toggle:hover, .appearance[open] > .appearance__toggle { background: var(--green-100); }
.appearance__now { display: none; }
.appearance[data-current="auto"] .appearance__now--auto,
.appearance[data-current="light"] .appearance__now--light,
.appearance[data-current="dark"] .appearance__now--dark { display: inline; }
.appearance__prefix { margin-inline-end: 0.25em; }
:lang(zh) .appearance__prefix { margin-inline-end: 0; }
.appearance__icon { flex: none; width: 18px; height: 18px; }
.appearance__chevron { flex: none; width: 16px; height: 16px; transition: transform 0.15s; }
.appearance[open] .appearance__chevron { transform: rotate(180deg); }
.appearance__panel {
  position: absolute; z-index: 45; right: 0; bottom: calc(100% + var(--s-2)); width: 280px; padding: var(--s-2) 0;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-top: 3px solid var(--green-900); border-radius: var(--radius);
  box-shadow: 0 10px 28px var(--panel-shadow);
}
.appearance__title { margin: 0; padding: var(--s-1) var(--s-4) var(--s-2); font: 600 0.75rem/1.6 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.appearance__option {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; margin: 0; padding: var(--s-1) var(--s-4) var(--s-1) calc(var(--s-4) - 3px);
  font: 700 1rem/1.3 var(--font-body); color: var(--ink); text-align: left; cursor: pointer;
  background: none; border: 0; border-left: 3px solid transparent;
}
.appearance__option:hover { background: var(--green-100); }
.appearance__option:focus-visible { outline-offset: -3px; }
.appearance__option[aria-pressed="true"] { background: var(--green-100); border-left-color: var(--orange-600); }
.appearance__option .appearance__icon { width: 20px; height: 20px; color: var(--muted); }
.appearance__option[aria-pressed="true"] .appearance__icon { color: var(--accent-ink); }
.appearance__text { display: grid; flex: 1; min-width: 0; }
.appearance__detail { font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.appearance__check { flex: none; width: 18px; height: 18px; color: var(--accent-ink); visibility: hidden; }
.appearance__option[aria-pressed="true"] .appearance__check { visibility: visible; }
/* Mobile mode: a 44-pixel button. Phones: the version line takes two short lines beside
   it, and the button shows only the choice; "Appearance:" stays for screen readers. */
@media (max-width: 1024px) {
  .appearance__toggle { min-height: 44px; }
}
@media (max-width: 559px) {
  .app-footer__bar { flex-wrap: nowrap; }
  .app-footer__about { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
  .app-footer__dot { display: none; }
  .appearance__prefix { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ---------- Page head, flash, stats ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-6); }
.page-head__text { flex: 1 1 32rem; min-width: 0; }
.page-head__text > :last-child { margin-bottom: 0; }
.page-head h1 { margin-bottom: var(--s-3); }
.page-head__lead { color: var(--ink); font-size: 1.0625rem; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.page-head__actions form { margin: 0; }
.crumbs { margin: 0 0 var(--s-3); font-size: 0.9375rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.crumbs li { min-width: 0; overflow-wrap: anywhere; }
.crumbs li + li::before { content: " / "; white-space: pre; }
.crumbs__home { display: inline-flex; align-items: center; vertical-align: middle; }
.crumbs__home-icon { flex: 0 0 auto; width: 1rem; height: 1rem; transform: translateY(-1px); }
:lang(zh) .crumbs__home-icon { transform: translateY(-1.75px); }

.flash { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--tone-green-line); border-left-width: 4px; border-radius: var(--radius); background: var(--tone-green-bg); color: var(--tone-green-ink); font-weight: 600; }
.flash--error { border-color: var(--tone-red-line); background: var(--error-bg); color: var(--error-ink); }
.flash--warn { border-color: var(--tone-yellow-line); background: var(--tone-yellow-bg); color: var(--tone-yellow-ink); }

/* ---------- Home ---------- */
.home-head { margin-bottom: var(--s-6); }
.home-head__date { margin: 0 0 var(--s-2); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.home-head h1 { margin-bottom: var(--s-3); font-size: clamp(2.25rem, 2.3vw + 1.3rem, 3.5rem); }
.home-head__summary { margin: 0; color: var(--ink); font-size: 1.125rem; }
.home-grid, .home-side { display: grid; gap: var(--s-5); align-items: start; }
.home-grid .home-card { margin: 0; }
.home-side { min-width: 0; }
.home-fine { background: var(--tone-green-bg); border-color: var(--tone-green-line); }
.home-todos { margin: 0; padding: 0; list-style: none; }
.home-todo + .home-todo { border-top: 1px solid var(--rule); }
.home-todo__link {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; align-items: center; gap: var(--s-3);
  min-height: 76px; padding: var(--s-3) 0; color: var(--ink); text-decoration: none;
}
.home-todo:first-child .home-todo__link { padding-top: 0; }
.home-todo:last-child .home-todo__link { padding-bottom: 0; }
.home-todo__link:hover { text-decoration: none; }
.home-todo__link:hover .home-todo__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.home-todo__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); }
.home-todo__icon svg { width: 22px; height: 22px; }
.home-todo--red .home-todo__icon { color: var(--tone-red-ink); background: var(--tone-red-bg); }
.home-todo--orange .home-todo__icon { color: var(--tone-orange-ink); background: var(--tone-orange-bg); }
.home-todo--blue .home-todo__icon { color: var(--tone-blue-ink); background: var(--tone-blue-bg); }
.home-todo--yellow .home-todo__icon { color: var(--tone-yellow-ink); background: var(--tone-yellow-bg); }
.home-todo__body { display: grid; gap: 2px; min-width: 0; }
.home-todo__title { overflow-wrap: anywhere; }
.home-todo__detail { color: var(--muted); font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.home-todo__deadline { justify-self: end; }
.home-todo__chevron { width: 20px; height: 20px; color: var(--muted); }
.home-quick__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s-3); }
.home-quick__link { justify-content: flex-start; width: 100%; height: 100%; min-width: 0; min-height: var(--tap); }
.home-quick__link span { min-width: 0; overflow-wrap: normal; word-break: normal; }
.home-quick__icon { flex: none; width: 20px; height: 20px; }
.home-fine__list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.home-fine__line { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); align-items: start; color: var(--tone-green-ink); }
.home-fine__line--warn { color: var(--tone-orange-ink); }
.home-fine__icon { width: 20px; height: 20px; margin-top: 2px; }
@media (max-width: 559px) {
  .home-todo__link { grid-template-columns: 40px minmax(0, 1fr) 18px; }
  .home-todo__icon { width: 40px; height: 40px; }
  .home-todo__deadline { grid-column: 2; justify-self: start; margin-top: var(--s-1); }
  .home-todo__chevron { grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; }
}
@media (max-width: 430px) {
  .home-quick__links { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1025px) {
  .home-grid { grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.8fr); }
  .home-quick__links { grid-template-columns: 1fr; }
}

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0 0 var(--s-6); padding: 0; border: 1px solid var(--rule-strong); background: var(--sheet); border-radius: var(--radius); }
.stats li { display: grid; gap: 4px; padding: var(--s-4) var(--s-5); border-left: 1px solid var(--rule); }
.stats li:first-child { border-left: 0; }
.stats--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.status-note { margin: calc(var(--s-6) * -1 + var(--s-3)) 0 var(--s-6); }
.stats__label { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.stats__value { font-family: var(--font-display); font-stretch: 92%; font-size: 1.75rem; font-weight: 800; color: var(--heading); line-height: 1.1; }
.stats__value--alert { color: var(--error-ink); }
@media (max-width: 599px) {
  .stats { grid-template-columns: 1fr; }
  .stats li { border-left: 0; border-top: 1px solid var(--rule); }
  .stats li:first-child { border-top: 0; }
}

/* ---------- Sheets, plates, sections ---------- */
.sheet { margin: 0 0 var(--s-5); padding: var(--s-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); min-width: 0; }
fieldset.sheet { padding-top: var(--s-4); }
.backup-automatic { display: grid; gap: var(--s-4); min-width: 0; margin: 0 0 var(--s-5); padding: 0; border: 0; }
.backup-automatic > .btn { justify-self: start; }
.backup-automatic > .switch { padding-top: 0; border-top: 0; }
.sheet__title {
  display: block; padding: 0; margin: 0 0 var(--s-4);
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink-soft);
}
/* The legend floats so it sits inside the sheet like a heading; everything after it
   clears the float, including content that appears after a hidden sibling. */
fieldset.sheet > .sheet__title { float: left; width: 100%; }
fieldset.sheet > :not(legend) { clear: both; }
.sheet__subtitle { margin: var(--s-5) 0 var(--s-3); }
.sheet__subtitle--first { margin-top: var(--s-4); }
/* A section's description runs the full width of its sheet, with the same space under
   it as under the title, whatever follows; so does a notice inside the section. */
.sheet > .sheet__lead, .sheet > .flash { margin-bottom: var(--s-4); }
.sheet > :last-child { margin-bottom: 0; }
.backup-card { display: grid; justify-items: start; gap: var(--s-3); }
.backup-card > * { margin: 0; }
.backup-privacy { font-weight: 400; }
.backup-progress:empty { display: none; }
.backup-progress { color: var(--muted); }
.backup-summary { width: 100%; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.backup-summary h3 { margin: 0 0 var(--s-2); font-size: 1rem; }
.backup-summary ul { margin: 0; padding-left: 1.4em; }
.backup-file { width: max-content; }
@media (max-width: 1024px) {
  .backup-file { width: 100%; }
}
.section { margin-top: var(--s-7); }

.plate {
  position: relative; background: var(--plate); border: 2px solid var(--accent-line); border-radius: 6px;
  box-shadow: inset 0 0 0 4px var(--plate), inset 0 0 0 5px var(--rule-strong);
  padding: 0; overflow: hidden; margin: 0 0 var(--s-5);
}
.plate__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; background: var(--green-900); color: #fff; padding: 10px 18px; font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.plate__head b { color: var(--orange-200); font-weight: 600; }
.plate__body { padding: var(--s-2) 18px; }
.plate dl { margin: 0; display: grid; }
.plate dl > div { display: grid; gap: 2px 16px; padding: 12px 0; border-bottom: 1px dashed var(--rule-strong); }
.plate dl > div:last-child { border-bottom: 0; }
@media (min-width: 560px) { .plate dl > div { grid-template-columns: 8.5rem 1fr; align-items: baseline; } }
.plate dt { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.plate dd { margin: 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.plate .form-field-value { font-weight: 400; white-space: pre-wrap; }
.plate .readout { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 600; color: var(--accent-ink); white-space: nowrap; overflow-wrap: normal; }
/* An amount readout sits under its label with the row's full width, so a large amount stays
   on one line instead of breaking inside the number. */
.plate dl > div:has(> .readout) { grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.dd-sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.9375rem; }

/* Integration details use the same compact label-value rhythm as a plate, without the
   plate frame. Long translated labels wrap in their own column at every width. */
.details-list { margin: 0 0 var(--s-4); display: grid; }
.details-list > div { display: grid; gap: 2px 16px; padding: 12px 0; border-bottom: 1px dashed var(--rule-strong); }
.details-list > div:first-child { padding-top: 0; }
.details-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 560px) { .details-list > div { grid-template-columns: minmax(8.5rem, 14rem) minmax(0, 1fr); align-items: baseline; } }
.details-list dt { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.details-list dd { margin: 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }

.detail-grid { display: grid; gap: var(--s-5); align-items: start; }
.detail-grid > * { margin-bottom: 0; }
@media (min-width: 960px) { .detail-grid { grid-template-columns: 1.3fr 1fr; } }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); padding: 12px 0; border-bottom: 1px dashed var(--rule-strong); }
.link-list li:first-child { padding-top: 0; }
.link-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.link-list li > span:first-child { flex: none; font-weight: 700; color: var(--ink); }
/* A value too wide to sit beside its name drops to a line of its own, still at the right. */
.link-list li > :last-child:not(:first-child) { margin-left: auto; text-align: right; }
.link-list li > .hash { min-width: 0; text-align: right; }

/* ---------- Tables ---------- */
/* Relative, so hidden screen reader text inside a wide table stays inside its scroll box
   instead of widening the whole page. */
.table-wrap { position: relative; overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
/* Wide tables keep a visible scrollbar (styling the WebKit scrollbar turns off macOS's
   hidden overlay one) and fade their right edge while more columns wait there. The fade
   follows the table's own scroll, so it's gone at the end and never shows on a table that
   fits. The scrollbar strip stays unfaded. */
@property --table-fade { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes table-fade { 0%, 92% { --table-fade: 56px; } 100% { --table-fade: 0px; } }
@media (min-width: 1025px) {
  .table-wrap {
    animation: table-fade linear both;
    animation-timeline: scroll(self inline);
    mask-image: linear-gradient(to left, transparent, #000 var(--table-fade)), linear-gradient(#000, #000);
    mask-position: top, bottom;
    mask-size: 100% calc(100% - 14px), 100% 14px;
    mask-repeat: no-repeat;
  }
  .table-wrap::-webkit-scrollbar { height: 14px; }
  .table-wrap::-webkit-scrollbar-track { background: var(--paper-2); border-top: 1px solid var(--rule); }
  .table-wrap::-webkit-scrollbar-thumb { background: var(--accent-line); border: 3px solid var(--paper-2); border-radius: 999px; }
}
/* A note under a table sits as far below it as the note under each log. */
.table-wrap + .field__hint, .table-wrap + .hint { margin-top: var(--s-3); }
.table-wrap + .form-actions { margin-top: var(--s-6); }
.data { width: 100%; border-collapse: collapse; font-size: 1rem; }
.data th, .data td { padding: 12px var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.data thead th { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); border-bottom: 2px solid var(--accent-line); white-space: nowrap; }
/* The frame draws the line under the last row, so its cells have none of their own. In
   mobile mode each row is a card, so the last cell of every card has none. */
@media (min-width: 1025px) { .data tbody tr:last-child > * { border-bottom: 0; } }
/* The tick boxes match the alerts and People tables'. In the table each one sits in the
   middle of its column, level with the first line of the row; in a mobile card it sits at
   the start of the value, like the other values. */
.forms-table__select { width: 1%; }
.forms-table__select input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--accent-line); }
@media (min-width: 1025px) {
  .data .forms-table__select { text-align: center; }
  .forms-table__select input[type="checkbox"] { display: block; margin: 0 auto; }
}
.forms-table__received { display: inline-flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.forms-table__received-piece { white-space: nowrap; }
@media (min-width: 1025px) { .forms-table__from { overflow-wrap: anywhere; } }
.selection-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.selection-bar__count {
  margin: 0;
  color: var(--muted);
}
/* Buttons side by side share one width, the widest one's. */
.selection-bar__actions {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--s-2);
}
.selection-bar > .btn--icon { flex-shrink: 0; }
.is-unread { font-weight: 700; }
.is-unread .dd-sub,
.is-unread .muted { font-weight: 700; }
.js .selection-bar {
  position: fixed;
  right: 0;
  z-index: 30;

  width: fit-content;
  margin: 0 auto;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  gap: var(--s-5);

  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--panel-shadow);
}
.js .selection-bar__count {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.js .selection-bar[data-empty] { display: none; }
@media (max-width: 1024px) {
  .js .selection-bar {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-3));
    left: 0;

    max-width: calc(100% - 2 * var(--gutter));
  }
}
/* On a phone the bar stays one row: worded buttons show their short label, while screen
   readers keep the full one. The bar floats over the page; nothing moves for it. */
.selection-bar__short { display: none; }
@media (max-width: 600px) {
  .js .selection-bar {
    width: calc(100% - 2 * var(--gutter));
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
    gap: var(--s-2);
  }
  .js .selection-bar__count { margin-right: auto; }
  .js .selection-bar__actions .btn { padding-inline: var(--s-3); }
  .js .selection-bar__full { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .js .selection-bar__short { display: inline; }
}
@media (min-width: 1025px) {
  .js .selection-bar {
    bottom: var(--s-5);
    left: var(--rail-w);

    max-width: calc(100% - var(--rail-w) - 2 * var(--gutter));
  }
}
/* The two status headings may wrap on desktop so their columns stay compact. */
@media (min-width: 1025px) {
  .forms-table thead th.forms-table__status { white-space: normal; }
}
.data tbody tr:has([data-row-link]) { cursor: pointer; }
/* The whole row opens, so its main link drops the underline and keeps its colour and
   weight; it stays a link for Tab, a new tab and screen readers, with the focus ring. */
.data [data-row-link], .data [data-row-link]:hover { text-decoration: none; }
.data tbody tr:has([data-row-link]):hover td { background: var(--sheet-hover); }
.data tfoot th, .data tfoot td { border-top: 2px solid var(--rule-strong); border-bottom: 0; font-weight: 700; color: var(--ink); background: var(--paper-2); }
.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong-link { font-weight: 700; }
@media (max-width: 1024px) {
  .table-wrap { background: transparent; border: 0; overflow: visible; }
  .data thead { display: none; }
  .data, .data tbody, .data tr, .data td, .data tfoot, .data tfoot tr { display: block; width: 100%; }
  .data tbody tr { margin-bottom: var(--s-3); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
  .data td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-3); padding: 10px var(--s-4); border-bottom: 1px dashed var(--rule); overflow-wrap: anywhere; }
  .data tbody tr > :last-child { border-bottom: 0; }
  .data td.num { text-align: left; }
  .data td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
  .data td > .pill, .data td > .source { justify-self: start; }
  .data td .pill-row { display: grid; justify-items: start; width: 100%; }
  .data td .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; border-radius: 14px; }
  .cell-stack > .source { white-space: normal; }
  .data tfoot tr { display: flex; justify-content: space-between; padding: 12px var(--s-4); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); }
  .data tfoot th, .data tfoot td { display: inline; padding: 0; border: 0; background: none; width: auto; }
}

/* A white paper has one visible picker action. JavaScript hides the small submit fallback
   and sends a chosen PDF at once; without it, the same native form still submits. */
.white-paper-upload { margin: 0; }
.white-paper-upload__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.white-paper-upload__button { width: max-content; }
.white-paper-upload__button[aria-disabled="true"] { opacity: 0.6; cursor: progress; pointer-events: none; }
.white-paper-upload__error { margin-top: var(--s-2); }
@media (max-width: 1024px) {
  .data td.white-papers-table__file { grid-template-columns: minmax(0, 1fr); }
  .white-paper-upload__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .white-paper-upload__button { width: 100%; }
}

/* ---------- Status pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: 999px; border: 1px solid; font-size: 0.875rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill--paid, .pill--sent, .pill--processed, .pill--delivered, .pill--viewed, .pill--copied, .pill--won, .pill--applied, .pill--ready { color: var(--tone-green-ink); background: var(--tone-green-bg); border-color: var(--tone-green-line); }
.pill--sending, .pill--processing, .pill--received, .pill--simulated, .pill--requested, .pill--pending, .pill--partly-refunded, .pill--double, .pill--delayed, .pill--waiting, .pill--copying, .pill--under-review, .pill--open, .pill--partly-paid, .pill--credit, .pill--attention { color: var(--tone-yellow-ink); background: var(--tone-yellow-bg); border-color: var(--tone-yellow-line); }
.pill--failed, .pill--rejected, .pill--bounced, .pill--complained, .pill--needs-response, .pill--lost, .pill--overdue { color: var(--tone-red-ink); background: var(--tone-red-bg); border-color: var(--tone-red-line); }
.pill--void, .pill--ignored, .pill--duplicate, .pill--refunded, .pill--canceled, .pill--started, .pill--nomatch, .pill--closed, .pill--demo, .pill--imported { color: var(--muted); background: var(--paper-2); border-color: var(--rule-strong); }
.pill-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Where a QuickBooks record was made: a square tag, so it never reads as a status. */
.source { display: inline-flex; align-items: center; min-height: 26px; padding: 1px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.source--backoffice { color: var(--accent-ink); border-color: var(--accent-line); background: var(--green-100); }

/* ---------- Empty state ---------- */
.empty { padding: var(--s-7) var(--s-5); text-align: center; background: var(--sheet); border: 1px dashed var(--rule-strong); border-radius: var(--radius); }
.empty p { margin-inline: auto; max-width: 48ch; }
.empty > :last-child { margin-bottom: 0; }
.empty__title { font-family: var(--font-display); font-stretch: 92%; font-size: var(--fs-h4); font-weight: 750; color: var(--heading); margin-bottom: var(--s-2); }

/* ---------- Forms ---------- */
/* A field in a grid row keeps its natural height (label, control, hint) instead of
   stretching to the tallest field beside it, so controls line up along the top. */
.field { display: grid; align-content: start; gap: 6px; margin-bottom: var(--s-4); min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field label { font-weight: 700; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1.0625rem var(--font-body); color: var(--ink);
  background: var(--field); border: 2px solid var(--rule-strong); border-radius: var(--radius);
}
.field select { appearance: none; padding-right: 40px; background-image: var(--select-chevron); background-position: right 8px center; background-size: 20px 20px; background-repeat: no-repeat; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--accent-line); }
.field [aria-invalid="true"] { border-color: var(--error-ink); }
.field__hint { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.grid-2, .grid-3 { display: grid; gap: 0 var(--s-4); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid-2 .field, .grid-3 .field { margin-bottom: var(--s-4); }
.field--check { align-content: end; }

/* The HazBasis calendar (src/islands/date-picker.ts): a button drawn like a field that
   opens a month grid under it. Without JavaScript the plain date input shows instead. */
.date-picker { position: relative; }
.date-picker__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1.0625rem var(--font-body); color: var(--ink); text-align: left;
  background: var(--field); border: 2px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer;
}
.date-picker__trigger:hover { border-color: var(--accent-line-soft); }
.date-picker__trigger:focus-visible, .date-picker__trigger[aria-expanded="true"] { border-color: var(--accent-line); }
.date-picker__icon { flex: none; width: 20px; height: 20px; color: var(--accent-ink); }
.date-picker__panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 320px; max-width: calc(100vw - 32px); padding: var(--s-3);
  background: var(--sheet); border: 1px solid var(--rule-strong); border-top: 3px solid var(--green-900); border-radius: var(--radius);
  box-shadow: 0 10px 28px var(--panel-shadow);
}
.date-picker__panel--end { left: auto; right: 0; }
.date-picker__head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.date-picker__title { margin: 0; text-align: center; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.date-picker__nav {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  color: var(--accent-ink); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
}
.date-picker__nav:hover { background: var(--green-100); border-color: var(--rule); }
.date-picker__nav svg { width: 20px; height: 20px; }
.date-picker__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.date-picker__grid th {
  padding: 0 0 6px; text-align: center; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.date-picker__grid td { height: 40px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); border-radius: var(--radius); cursor: pointer; }
.date-picker__grid td:hover { background: var(--green-100); }
.date-picker__grid td.is-outside { color: var(--placeholder); }
.date-picker__grid td[aria-current="date"] { box-shadow: inset 0 0 0 2px var(--orange-600); font-weight: 700; }
.date-picker__grid td[aria-selected="true"] { background: var(--accent-line); color: var(--sheet); font-weight: 700; }
.date-picker__grid td[aria-disabled="true"] { background: transparent; color: var(--placeholder); text-decoration: line-through; cursor: not-allowed; }
.date-picker__grid td:focus-visible { position: relative; z-index: 1; outline-offset: 1px; }
.date-picker__foot { display: flex; justify-content: flex-end; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
@media (max-width: 559px) {
  .date-picker__panel, .date-picker__panel--end { left: 0; right: 0; width: auto; }
}
.check { display: flex; gap: var(--s-3); align-items: flex-start; min-height: 48px; padding-top: 10px; font-weight: 700; color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--green-900); flex: none; }
@media (min-width: 640px) { .grid-2 .field, .grid-3 .field { margin-bottom: 0; } }

.form-actions { display: grid; gap: var(--s-3); }
.form-actions--inline { display: flex; flex-wrap: wrap; margin-bottom: var(--s-6); }
.form-error { margin: 0; padding: var(--s-3) var(--s-4); background: var(--error-bg); color: var(--error-ink); border-left: 4px solid var(--error-ink); border-radius: var(--radius); font-weight: 600; }

/* Every page and every form uses the full page width from the left edge (decided
   2026-11-08). */

/* Invoice form: the work on the left, the summary and fee switches on the right. */
/* The 16px below the form keeps the space above the footer the page was laid out with
   while it ran in quirks mode, which gives a form that margin. */
.invoice-form { display: grid; gap: var(--s-5); align-items: start; margin-bottom: var(--s-4); }
@media (min-width: 1025px) { .invoice-form { grid-template-columns: minmax(0, 1fr) 340px; } .invoice-form__side { position: sticky; top: 104px; } }
.invoice-form__main > .sheet:last-child { margin-bottom: 0; }

.combo { position: relative; }
.combo__list {
  position: absolute; z-index: 20; top: calc(100% - 22px); left: 0; right: 0; margin: 0; padding: 4px 0; list-style: none;
  max-height: 320px; overflow-y: auto; background: var(--sheet); border: 2px solid var(--accent-line); border-radius: var(--radius); box-shadow: 0 10px 28px var(--panel-shadow);
}
.combo__list li { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--rule); }
.combo__list li:last-child { border-bottom: 0; }
.combo__list li[aria-selected="true"], .combo__list li:hover { background: var(--green-100); }
.combo__name { display: block; font-weight: 700; color: var(--ink); }
.combo__meta { display: block; font-size: 0.9375rem; color: var(--muted); }
.combo__empty { color: var(--muted); cursor: default; }

.client-card { margin: 0 0 var(--s-4); padding: var(--s-4); background: var(--plate); border: 1px solid var(--rule-strong); border-left: 4px solid var(--accent-line); border-radius: var(--radius); }
.client-card p { margin: 0 0 var(--s-1); }
.client-card__name { font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.client-card__address { color: var(--muted); white-space: pre-line; }

.lines { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); container-type: inline-size; }
.lines:empty { display: none; }
.lines__limit { margin-top: var(--s-2); }
/* Lines lay out by the width of their own column (container query), not the window,
   because the summary column beside them takes a fixed share of wide screens. */
/* Narrow: the item and its remove button, the description, quantity and a wider rate, then
   the line's amount on its own row, so a five-figure amount never runs into the rate. */
.line {
  display: grid; gap: var(--s-3); align-items: end; padding: var(--s-4); background: var(--plate); border: 1px solid var(--rule); border-radius: var(--radius);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  grid-template-areas: "item item remove" "description description description" "qty rate rate" "amount amount amount";
}
.line .field { margin: 0; }
.line__item { grid-area: item; }
.line__description { grid-area: description; }
.line__qty { grid-area: qty; }
.line__rate { grid-area: rate; }
.line__amount { grid-area: amount; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--rule); }
.line__amount-label { font-weight: 700; color: var(--ink); }
.line__amount output { font-family: var(--font-mono); font-weight: 600; color: var(--accent-ink); }
.line__remove { grid-area: remove; justify-self: end; align-self: end; width: 44px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--muted); border: 2px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; }
.line__remove:hover { color: var(--error-ink); border-color: var(--error-ink); }
.line__remove svg { width: 18px; height: 18px; }
/* Wide: one row. The amount column grows to the widest line amount (the script sets
   --amount-chars; its monospaced characters are 0.632em wide), so it never runs into the
   remove button. */
@container (min-width: 760px) {
  .line { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 76px 128px max(104px, calc(var(--amount-chars, 0) * 0.632em)) 44px; grid-template-areas: "item description qty rate amount remove"; }
  .line__amount { display: grid; grid-template-rows: auto 48px; justify-items: end; align-content: start; gap: 6px; min-height: 0; padding-top: 0; border-top: 0; }
  .line__amount output { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; }
}

.summary .plate__body { padding-block: 0; }
/* The new invoice's total also shrinks to fit when it is very long: the script sets --chars
   to its length, and the readout's monospaced characters are 0.632em wide. */
.summary .readout { font-size: min(1.375rem, calc(100cqi / (var(--chars, 1) * 0.632))); }
.summary__limit { margin: 0 0 12px; }
.summary__tax { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.fees .field__hint, .methods .field__hint { margin-bottom: var(--s-4); }
.fees .field__hint:last-child { margin: var(--s-2) 0 0; }

/* Fee switches: a real checkbox drives a drawn track, so keyboard and screen readers work. */
.switch { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--rule); cursor: pointer; }
.switch input { position: absolute; width: 48px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.switch__track { position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--rule-strong); transition: background 0.15s; margin-top: 2px; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.switch input:checked + .switch__track { background: var(--green-900); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--accent-line); outline-offset: 3px; }
.switch:has(input:disabled), .switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .switch__track, .switch:has(input:disabled) .switch__text { opacity: 0.5; }
.switch__text { display: grid; gap: 2px; }
.switch__text > span { color: var(--muted); font-size: 0.9375rem; }
.switch__text strong { font-size: 1rem; }
.switch__estimate { color: var(--accent-ink) !important; font-weight: 700; }
.switch__estimate:empty { display: none; }

/* Settings pages use the full page width, like the Status page and the lists. */
.settings-page { min-width: 0; }
.settings-form .sheet { margin-bottom: var(--s-5); }
.connection p { margin-bottom: var(--s-3); }
.connection form { margin: 0; }
.connection__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
/* Usage on Settings: a card per count, grouped by service, laid out like the configuration
   check below it. A bar's track is a lighter step of its fill's tone, green while there is
   room, amber from 80% and red from 95%, with the words under it so colour never works
   alone. A column is 16rem at least, or the whole width on a phone narrower than that. */
.usage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@media (min-width: 560px) { .usage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .usage { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.usage-card { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.usage-card__label { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--muted); }
.usage-card__value { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.usage-card__of { margin-left: var(--s-1); font-size: 1rem; font-weight: 400; color: var(--muted); }
.usage-card__detail { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.meter { display: grid; gap: var(--s-2); }
.meter__bar svg { display: block; width: 100%; height: 8px; }
.meter__track { fill: var(--tone-green-bg); }
.meter__fill { fill: var(--tone-green-line); }
.meter__bar--near .meter__track { fill: var(--tone-orange-bg); }
.meter__bar--near .meter__fill { fill: var(--tone-orange-line); }
.meter__bar--at .meter__track { fill: var(--tone-red-bg); }
.meter__bar--at .meter__fill { fill: var(--tone-red-line); }
/* The dark tone backgrounds sit below the card, so the dark tracks are a step lighter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .meter__track { fill: #2a4430; }
  :root:not([data-theme="light"]) .meter__bar--near .meter__track { fill: #4a301e; }
  :root:not([data-theme="light"]) .meter__bar--at .meter__track { fill: #55292a; }
}
:root[data-theme="dark"] .meter__track { fill: #2a4430; }
:root[data-theme="dark"] .meter__bar--near .meter__track { fill: #4a301e; }
:root[data-theme="dark"] .meter__bar--at .meter__track { fill: #55292a; }
.meter__note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.9375rem; font-weight: 700; }
.meter__note svg { flex: none; width: 16px; height: 16px; }
.meter__note--near { color: var(--tone-orange-ink); }
.meter__note--at { color: var(--tone-red-ink); }

/* The configuration check: a block per check, three across on a wide screen and one per
   row on a phone, each opening its details in a dialog over the page. */
.check-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--s-3); margin: 0; padding: 0; }
/* Sync's service cards share the row between them, and each figure sits on one line
   beside its label instead of in the wide label column other detail lists use. */
.sync-services { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.sync-services__details > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.sync-services__details dd { text-align: right; white-space: nowrap; }
.check-card { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-2); padding: var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-top: 4px solid var(--tone-green-line); border-radius: var(--radius); }
.check-card--warn { border-top-color: var(--tone-orange-line); }
.check-card--demo { border-top-color: var(--rule-strong); }
.check-card__head { display: grid; justify-items: start; align-content: start; gap: var(--s-2); }
.check-card__name { margin: 0; font-size: 1.0625rem; }
.check-card__state { margin: 0; color: var(--muted); }
.check-card__open { justify-self: start; }
.check-dialog { width: min(40rem, calc(100% - 2 * var(--s-4))); max-height: calc(100% - 2 * var(--s-5)); padding: 0; color: var(--text); background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.check-dialog::backdrop { background: rgb(20 17 15 / 55%); }
.check-dialog__body { padding: var(--s-5); }
.check-dialog__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-2); }
.check-dialog__title { margin: 0; }
.check-dialog__title:focus { outline: none; }
.check-dialog__state { color: var(--muted); }
.check-dialog__subtitle { margin: var(--s-4) 0 var(--s-2); font-size: 1rem; color: var(--ink); }
.check-dialog__actions { display: flex; justify-content: flex-end; margin: var(--s-4) 0 0; }
.external-link-dialog__address { margin: var(--s-2) 0 0; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-small); overflow-wrap: anywhere; }
.confirm-dialog [data-confirm-dialog-text] { white-space: pre-line; }
.external-link-dialog__actions, .confirm-dialog__actions { gap: var(--s-3); }
.external-link-dialog__actions > .btn, .confirm-dialog__actions > .btn { flex: 1 1 0; min-height: 48px; }
.external-link-dialog[data-three-actions] .external-link-dialog__actions { flex-direction: column; }
.external-link-dialog[data-three-actions] .external-link-dialog__actions > .btn { flex-basis: auto; width: 100%; }
@media (max-width: 559px) {
  .external-link-dialog__actions, .confirm-dialog__actions { flex-direction: column; }
  .external-link-dialog__actions > .btn, .confirm-dialog__actions > .btn { flex-basis: auto; width: 100%; }
}
@media (min-width: 560px) {
  .external-link-dialog__actions, .confirm-dialog__actions { flex-direction: row; }
}
.check-items { list-style: none; margin: 0; padding: 0; }
.check-items__item { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--s-3); padding: 8px 0 8px 22px; border-bottom: 1px dashed var(--rule); }
.check-items__item::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--tone-green-line); }
.check-items__item--warn::before { background: var(--orange-600); }
.check-items__name { font-weight: 600; color: var(--ink); }
.check-items__state { color: var(--muted); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.check-steps { margin: 0; padding-left: 1.4em; }
.check-steps li { margin-bottom: var(--s-3); }
.setup-code { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.setup-code code { overflow-wrap: anywhere; }
.setup-link { display: block; margin-top: var(--s-2); }
.check-dialog__note { margin-top: var(--s-4); }
.check-items__setting { display: block; width: fit-content; margin-top: 4px; font-size: var(--fs-small); font-weight: 400; }
.check-tips { margin: 0; padding-left: 1.4em; list-style: disc; }

/* Under an integration, the pages that work with it: a block each, laid out like the
   checks above them, with the line the menu shows for the page. */
.related-pages { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--s-3); margin: 0; padding: 0; }
.related-pages__link {
  display: grid; align-content: start; gap: 2px; height: 100%; padding: var(--s-3) var(--s-4);
  color: var(--ink); text-decoration: none; border: 1px solid var(--rule); border-radius: var(--radius);
}
.related-pages__link:hover { border-color: var(--accent-line); background: var(--green-100); text-decoration: none; }
.related-pages__name { font-weight: 700; color: var(--accent-ink); }
.related-pages__detail { font-size: 0.9375rem; line-height: 1.4; color: var(--muted); }
.check-tips li { margin-bottom: var(--s-3); }

/* The alerts table: who gets each alert, a tick box per alert centred under its heading,
   grouped by Managers, Staff and other addresses, with a flag under anyone whose alerts
   bounce. In mobile mode each person becomes a card with a row per alert. */
.alert-table thead th.alert-table__kind { white-space: normal; text-align: center; min-width: 6.5rem; }
.alert-table tbody th { padding: 12px var(--s-4); text-align: left; vertical-align: middle; font-weight: 400; border-bottom: 1px solid var(--rule); }
.alert-table__group th { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); }
.alert-table__who { display: block; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.alert-table__bounce { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 0.9375rem; }
.alert-table td.alert-table__check { text-align: center; vertical-align: middle; }
.alert-table input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--accent-line); }
/* A cell's checkbox is a block in the middle of the cell: alone on a text line, it would
   sit on the line's baseline, a little above the middle. */
@media (min-width: 1025px) { .alert-table td.alert-table__check input[type="checkbox"] { display: block; margin: 0 auto; } }
/* With more alerts than fit, the table scrolls sideways inside its card while the Who
   column stays pinned and wide enough for a name and address. */
@media (min-width: 1025px) {
  .alert-table thead th:first-child,
  .alert-table tbody tr:not(.alert-table__group) > th:first-child { position: sticky; left: 0; z-index: 1; min-width: 14rem; background: var(--sheet); box-shadow: inset -1px 0 0 var(--rule); }
  .alert-table thead th:first-child { background: var(--paper-2); }
  .alert-table__group-label { position: sticky; left: var(--s-4); }
}
.alert-table__remove { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.9375rem; color: var(--muted); }
.alert-table__remove input[type="checkbox"] { width: 22px; height: 22px; }
.alert-table__input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; font: 400 1rem var(--font-body); color: var(--ink); background: var(--field); border: 2px solid var(--rule-strong); border-radius: var(--radius); }
.alert-table__input::placeholder { color: var(--placeholder); opacity: 1; }
.alert-table__input:focus-visible { border-color: var(--accent-line); }
@media (max-width: 1024px) {
  .alert-table tbody th { display: block; border-bottom: 1px dashed var(--rule); }
  .alert-table tbody tr.alert-table__group { margin: var(--s-4) 0 var(--s-2); background: none; border: 0; }
  .alert-table tbody .alert-table__group th { padding: 0; background: none; border: 0; }
  .alert-table tbody tr.alert-table__none { background: none; border: 0; }
  .alert-table__none td { display: block; padding: 0; border: 0; }
  .alert-table__none td::before { content: none; }
  .alert-table td.alert-table__check { text-align: left; align-items: center; }
}
.alert-kinds { margin-top: var(--s-2); }

/* Form emails follow the Forms menu: one group heading, then one full-width card per
   form. Each card names the actual emails that form sends instead of exposing storage
   fields as table columns. */
.form-email-form { width: 100%; }
.form-email-group { margin-bottom: var(--s-6); }
.form-email-group__title {
  margin: 0 0 var(--s-3); font: 600 0.8125rem var(--font-mono); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.form-email-group__cards { display: grid; gap: var(--s-4); }
.settings-form .form-email-card { margin: 0; }
.form-email-card__title { margin-bottom: var(--s-4); font-size: 1.125rem; }
.form-email-card__note { margin: var(--s-3) 0 0; }
.form-email-card__columns, .form-email-row { display: grid; grid-template-columns: minmax(12rem, 0.8fr) minmax(15rem, 1fr) minmax(15rem, 1fr); gap: var(--s-4); }
.form-email-card__columns {
  padding: 0 0 var(--s-2); font: 600 0.8125rem var(--font-mono); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--accent-line);
}
.form-email-row { align-items: start; padding: var(--s-3) 0; border-bottom: 1px dashed var(--rule); }
.form-email-row:last-child { padding-bottom: 0; border-bottom: 0; }
.form-email-row__email { padding-top: 13px; font-weight: 700; color: var(--ink); }
.form-email-row__email label { cursor: pointer; }
.form-email-row__field { margin: 0; }
.form-email-row__mobile-label { display: none; }
.form-email-row__plain { display: grid; align-content: center; min-height: 48px; }
.form-email-row__muted { color: var(--muted); }
@media (max-width: 1024px) {
  .form-email-card__columns { display: none; }
  .form-email-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; }
  .form-email-row__email { padding-top: 0; }
  .form-email-row__mobile-label { display: block; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .form-email-row__plain { align-content: start; gap: 6px; min-height: 0; }
}
:lang(zh) .form-email-group__title, :lang(zh) .form-email-card__columns, :lang(zh) .form-email-row__mobile-label { letter-spacing: 0; text-transform: none; }

/* The People page: the directory matches with a Choose button each, then the add form
   with the quick choices and an area per line. Its table of who can open what is drawn
   like the alerts table above. */
.people-results { margin: 0 0 var(--s-4); padding: 0; list-style: none; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.people-results__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); }
.people-results__item + .people-results__item { border-top: 1px solid var(--rule); }
.people-results__who { display: grid; gap: 2px; min-width: 0; }
.people-results__name { font-weight: 700; color: var(--ink); }
.people-add { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--rule-strong); }
.people-add .sheet__subtitle { margin-bottom: var(--s-1); }
.people-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
.people-presets__label { font-weight: 700; color: var(--ink); }
.people-areas { display: grid; gap: 0; min-width: 0; margin: 0 0 var(--s-4); padding: 0; border: 0; }
.people-areas__item > span { display: grid; gap: 2px; }
.people-areas__item .dd-sub { font-weight: 400; }
@media (min-width: 1025px) { .people-table tbody th { min-width: 14rem; } }
/* Five area columns fit beside the rail from 1025 pixels: the area columns keep the
   same room for their headings with half the side padding, and Last sign-in may wrap its
   heading like the area headings do. */
@media (min-width: 1025px) {
  .people-table thead th.alert-table__kind { min-width: 5.5rem; padding-right: var(--s-2); padding-left: var(--s-2); }
  .people-table td.alert-table__check { padding-right: var(--s-2); padding-left: var(--s-2); }
  .people-table thead th:last-child { white-space: normal; }
}
/* The sender stands apart from the table's note above it, as far as the heading below. */
.alert-sender { margin-top: var(--s-5); }

/* Text only screen readers hear, such as the label of the new alert address field. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Label and value pairs, such as the Stripe webhook setup: labels in a narrow column. */
.pairs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; }
.pairs dt { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.pairs dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; min-width: 0; }
.pairs code { overflow-wrap: anywhere; }
@media (max-width: 559px) {
  .pairs { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pairs dd { margin-bottom: var(--s-2); }
}

/* ---------- Timeline, logs ---------- */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule-strong); }
.timeline__item { position: relative; display: grid; gap: 2px var(--s-4); padding: 0 0 var(--s-4) var(--s-5); }
.timeline__item::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--accent-line); }
.timeline__item--error::before, .timeline__item--failed-payment::before, .timeline__item--bounced::before, .timeline__item--rejected::before, .timeline__item--complained::before { border-color: var(--error-ink); background: var(--error-bg); }
.timeline__item--warning::before, .timeline__item--delayed::before, .timeline__item--dispute::before { border-color: var(--orange-600); background: var(--tone-orange-bg); }
.timeline__item--paid::before { background: var(--accent-line); }
.timeline__time { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
/* A SHA-256 in a line has no spaces, so it may break anywhere instead of widening the entry. */
.timeline__detail { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.timeline__actor { font-size: 0.9375rem; color: var(--muted); }
@media (min-width: 760px) { .timeline__item { grid-template-columns: 13rem 1fr auto; align-items: baseline; } }

.email-frame { display: block; width: 100%; height: 720px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: #f7f4ec; }
.code-block { margin: 0; padding: var(--s-4); max-height: 640px; overflow: auto; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 0.875rem; line-height: 1.5; }
.code-block code { background: none; padding: 0; white-space: pre; }
.error-text { color: var(--error-ink) !important; }

/* An archive file's SHA-256: all 64 characters, so it can be checked against the copy. */
.hash { display: block; max-width: 34ch; font-size: 0.8125rem; line-height: 1.45; overflow-wrap: anywhere; color: var(--ink); }
.section__lead { color: var(--muted); }
.section__actions { margin-top: var(--s-4); }

/* ---------- Payments and refunds ---------- */
/* A table cell with more than one line (a pill and its reason, a time and who) keeps them
   together, so on phones they stay beside the cell's label. */
.cell-stack { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.cell-stack form { margin: 4px 0 0; }
.refund-double { display: grid; gap: var(--s-3); justify-items: start; }
.refund-double p { margin: 0; }
.refund-double__form { margin: 0; }
.refund-form .grid-2 { margin-bottom: var(--s-4); }
.refund-form .form-actions { align-items: center; }

/* The invoice references: under the dates on the invoice form, and under the QuickBooks
   choice on the Settings page with its explanation and review link. */
@media (min-width: 640px) {
  .invoice-form__references, .settings__references { margin-top: var(--s-4); }
  .settings__references { row-gap: var(--s-2); }
}
.settings__references-hint { grid-column: 1 / -1; }
.settings__references-link { grid-column: 1 / -1; margin: var(--s-2) 0 0; }
.invoice-reference-preview { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-3); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.invoice-reference-preview p { margin: 0; }
.invoice-reference-preview code { white-space: normal; overflow-wrap: anywhere; }
.invoice-reference-warning { display: grid; gap: var(--s-2); }
.invoice-reference-warning p, .invoice-reference-warning ul { margin: 0; }
.invoice-reference-warning ul { display: grid; gap: var(--s-1); padding-left: var(--s-5); }
.reference-review td { min-width: 12rem; overflow-wrap: anywhere; }
.reference-review .forms-table__select { min-width: 0; }
.reference-review__removed {
  padding: 1px 3px;
  color: var(--error-ink);
  background: var(--error-bg);
  text-decoration: line-through;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The clients and QuickBooks list pages: the search box with its button on one row above
   the list, and a way back to the whole list while a search is shown. The column may
   narrow, so on a small phone the box shrinks instead of pushing the button off screen. */
.search-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; max-width: 40rem; margin: 0 0 var(--s-5); }
.search-form__clear { justify-self: start; font-size: 0.9375rem; }
.search-form label { font-weight: 700; color: var(--ink); }
.search-form__row { display: flex; gap: var(--s-2); }
.search-form__row input {
  flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px; font: 400 1.0625rem var(--font-body); color: var(--ink);
  background: var(--field); border: 2px solid var(--rule-strong); border-radius: var(--radius);
}
.search-form__row input::placeholder { color: var(--placeholder); opacity: 1; }
.search-form__row input:focus-visible { border-color: var(--accent-line); }
.search-form > .search-form__row + .field { margin-top: calc(var(--s-4) - 6px); }

/* Quick find: pages, invoices and clients in one list, a group each. A row is the match's
   name and a line under it, with its section, status or action at the right end. */
.find-results { display: grid; gap: var(--s-6); }
.find-group h2 { margin-bottom: var(--s-3); }
.find-group__none { margin: 0 0 var(--s-4); color: var(--muted); }
.find-group__none:last-child { margin-bottom: 0; }
.find-group__more { margin: var(--s-3) 0 0; }
.find-list { margin: 0; padding: 0; list-style: none; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.find-list__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); }
.find-list__item + .find-list__item { border-top: 1px solid var(--rule); }
.find-list__main { display: grid; gap: 2px; flex: 1 1 18rem; min-width: 0; overflow-wrap: anywhere; }
.client-form__country { max-width: 20rem; }
@media (min-width: 640px) { .client-form .grid-2, .client-form .grid-3, .product-form .grid-2 { row-gap: var(--s-4); margin-bottom: var(--s-4); } }

/* Client hub: compact service states, live detail panels and one card per decision. */
.service-states, .service-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.service-links { display: grid; }
.service-state { display: inline-flex; align-items: center; gap: var(--s-1); }
.service-state__icon { width: 14px; height: 14px; }
.pill.service-state::before { display: none; }
.service-state--linked { color: var(--tone-green-ink); background: var(--tone-green-bg); border-color: var(--tone-green-line); }
.service-state--waiting { color: var(--tone-yellow-ink); background: var(--tone-yellow-bg); border-color: var(--tone-yellow-line); }
.service-state--failed, .service-state--attention { color: var(--tone-red-ink); background: var(--tone-red-bg); border-color: var(--tone-red-line); }
.details-grid { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.section-block { margin-top: var(--s-6); }
.attention-list { display: grid; gap: var(--s-4); }
.attention-card { padding: var(--s-4); background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.attention-card__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-2) var(--s-4); }
.attention-card__head time { color: var(--muted); text-align: right; white-space: nowrap; }
.attention-card__text { margin: var(--s-1) 0 0; }
.attention-records { display: grid; gap: var(--s-3); margin: var(--s-4) 0; }
.attention-record { display: grid; align-content: start; gap: var(--s-1); padding: var(--s-3); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.attention-actions { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2); }
.attention-actions label { display: grid; gap: var(--s-1); }
.attention-actions > form:not(.attention-link-search) .btn, .attention-actions > .btn { min-width: 9.75rem; min-height: 48px; justify-content: center; }
.attention-link-search { flex: 1 1 100%; margin: 0; }
.merge-progress { display: grid; gap: var(--s-4); margin: var(--s-4) 0 0; }
.merge-progress > .flash, .merge-progress > .details-list { margin: 0; }
.merge-steps dd { display: grid; justify-items: start; gap: var(--s-2); }
.merge-steps dd > p { margin: 0; }
.merge-choice { grid-template-columns: 24px minmax(0, 1fr); border-width: 2px; cursor: pointer; }
.merge-choice:hover { border-color: var(--accent-line-soft); }
.merge-choice:has(> input:checked) { background: var(--green-100); border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.merge-choice:has(> input:focus-visible) { outline: 3px solid var(--accent-line); outline-offset: 3px; }
.merge-choice > input {
  display: grid; place-content: center; width: 24px; height: 24px; margin: 0; appearance: none;
  background: var(--field); border: 2px solid var(--accent-line); border-radius: 50%; cursor: pointer;
}
.merge-choice > input::before { content: ""; width: 12px; height: 12px; background: var(--accent-line); border-radius: 50%; transform: scale(0); transition: transform 100ms ease-out; }
.merge-choice > input:checked::before { transform: scale(1); }
.merge-choice > input:focus-visible { outline: 0; }
.merge-choice > span { display: grid; gap: var(--s-1); min-width: 0; }
.merge-actions .btn { min-height: var(--tap); }
@media (min-width: 760px) { .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .details-grid--single { grid-template-columns: minmax(0, 1fr); } .attention-records { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }

/* The Products and services page: the Active and Inactive tabs above the search, a long
   description cut to two lines in the list (the form shows all of it), and making one
   inactive in its own sheet under the form. */
.product-list__tabs { margin: 0 0 var(--s-4); }
.sync-tabs { margin: 0 0 var(--s-5); }
.product-list__description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-inactive { display: grid; gap: var(--s-3); justify-items: start; margin: 0; }
.product-inactive p { margin: 0; }

/* The client's billing street: one box per line, each added line with its remove button
   (the first line keeps the space, so every box is the same width), and "Add a line"
   under them, up to the five lines QuickBooks keeps. */
.street { min-width: 0; margin: 0 0 var(--s-4); padding: 0; border: 0; }
.street__legend { margin-bottom: 6px; padding: 0; font-weight: 700; color: var(--ink); }
.street__lines { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.street__line { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: var(--s-2); align-items: end; }
.street__line:only-child { grid-template-columns: minmax(0, 1fr); }
.street__line input {
  width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1.0625rem var(--font-body); color: var(--ink);
  background: var(--field); border: 2px solid var(--rule-strong); border-radius: var(--radius);
}
.street__line input:focus-visible { border-color: var(--accent-line); }
.street__line .line__remove { grid-area: auto; }
.street__add { margin-bottom: var(--s-2); }
.street__add svg { width: 18px; height: 18px; }

/* The country dropdown: a button that reads like a select, opening a panel with a search
   box and every country with its flag. */
.country-picker { position: relative; }
.country-picker__button {
  width: 100%; min-height: 48px; padding: 10px 40px 10px 12px; text-align: left; font: 400 1.0625rem var(--font-body); color: var(--ink); cursor: pointer;
  background-color: var(--field); border: 2px solid var(--rule-strong); border-radius: var(--radius);
  background-image: var(--select-chevron); background-position: right 8px center; background-size: 20px 20px; background-repeat: no-repeat;
}
.country-picker__button:focus-visible, .country-picker__button[aria-expanded="true"] { border-color: var(--accent-line); }
.country-picker__panel {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; overflow: hidden;
  background: var(--sheet); border: 2px solid var(--accent-line); border-radius: var(--radius); box-shadow: 0 10px 28px var(--panel-shadow);
}
.country-picker__search { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1rem var(--font-body); color: var(--ink); background: var(--field); border: 0; border-bottom: 1px solid var(--rule); }
.country-picker__search::placeholder { color: var(--placeholder); opacity: 1; }
.country-picker__search:focus-visible { outline: 3px solid var(--accent-line); outline-offset: -3px; }
.country-picker__list { max-height: 264px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; }
.country-picker__option { display: flex; align-items: center; gap: var(--s-2); padding: 10px 12px; color: var(--ink); cursor: pointer; }
.country-picker__option[aria-selected="true"], .country-picker__option:hover { background: var(--green-100); }
.country-picker__option .iti__flag { flex: none; }
.country-picker__empty { margin: 0; padding: 12px; color: var(--muted); }

/* The phone field (intl-tel-input). The library sets its defaults on :root; set on body,
   these win whatever order the styles load in. */
body {
  --iti-border-width: 2px;
  --iti-spacer-horizontal: 12px;
  --iti-arrow-padding: 3px;
  --iti-arrow-size: 20px;
  --iti-icon-color: var(--muted);
  --iti-border-color: var(--rule-strong);
  --iti-country-selector-bg: var(--sheet);
  --iti-hover-color: var(--green-100);
}
.field .iti { display: block; }
.iti__selected-country { color: var(--ink); }
.field .iti__selected-country { font-size: 1.0625rem; }
/* The phone picker uses the same centred 20px Lucide ChevronDown as the app's selects. */
.iti .iti__arrow {
  flex: none; margin-top: 0; border: 0; background: var(--iti-icon-color); transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.iti .iti__arrow--up { margin-top: 0; transform: rotate(180deg); }
.iti__selected-country:focus-visible { outline-offset: -3px; }
.iti__country-selector { border-radius: var(--radius); color: var(--text); }
.iti--inline-country-selector .iti__country-selector { box-shadow: 0 8px 24px var(--panel-shadow); }
.iti__country-list .iti__country { margin: 0; font-size: var(--fs-small); }
.iti--inline-country-selector .iti__country-list { max-height: 15.75rem; }
.iti__dial-code { color: var(--muted); }
.iti__country-selector .iti__search-input {
  min-height: 48px; border: 0; border-radius: 0; background: var(--field); color: var(--ink); font-size: var(--fs-small);
  padding-left: calc(var(--iti-spacer-horizontal) * 2 + var(--iti-globe-icon-size));
  padding-right: calc(var(--iti-spacer-horizontal) * 2 + var(--iti-clear-icon-size));
}
.iti__country-selector .iti__search-input:focus-visible { outline-offset: -3px; }

/* A dispute's evidence form: the documents to add, the service date, then the buttons
   with what the drawn PDF came to beside them. */
.evidence-form .field input[type="file"] { padding: 9px 12px; font-size: 1rem; }
.evidence-form .form-actions { align-items: center; margin-bottom: 0; }

/* Log pages: which entries a page shows beside the page links, wrapping onto two rows on
   a phone, and the note on how the log is trimmed under them. */
.list-footer { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.pager { display: flex; flex: 1 1 34rem; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.pager__status { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.pager__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pager__link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
a.pager__link:hover { border-color: var(--accent-line); background: var(--green-100); text-decoration: none; }
.pager__link[aria-current="page"] { border-color: var(--green-900); background: var(--green-900); color: #fff; }
.pager__link[aria-disabled="true"] { border-color: var(--rule); color: var(--muted); opacity: 0.6; }
.pager__gap { padding: 0 var(--s-1); color: var(--muted); }
.page-size { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.page-size__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);

  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 400;
}
.page-size__select, .page-size__submit { min-height: 40px; }
.page-size__select {
  appearance: none;

  width: auto;
  min-height: 40px;
  padding: 0 36px 0 12px;

  color: var(--accent-ink);
  font: 600 1rem var(--font-body);

  background-color: transparent;
  background-image: var(--select-chevron);
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);

  cursor: pointer;
}
.page-size__select:hover { border-color: var(--accent-line); background-color: var(--green-100); }
.page-size__submit { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 559px) {
  .list-footer, .pager, .page-size { width: 100%; }
  .page-size { justify-content: flex-start; }
}
@media (min-width: 560px) {
  .list-footer, .pager, .page-size { width: auto; }
}
.log-note { margin: var(--s-3) 0 0; color: var(--muted); font-size: 0.9375rem; }

/* Log filters: a panel of fields above the email and webhook logs, side by side where
   they fit and one under another on a phone, applied together by the button. */
.log-filters { margin: 0 0 var(--s-5); padding: var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.log-filters__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s-4); }
.log-filters__fields .field { margin: 0; }
/* The merged transaction lists give search its own row, then keep their narrower filters
   equal: six columns on a wide desktop, three on a narrow one, two on tablets, and one
   on phones. */
@media (min-width: 1280px) {
  .log-filters__fields .field--wide { grid-column: span 2; }
  .log-filters--transactions .log-filters__fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .log-filters--transactions .log-filters__fields .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .log-filters__fields .field--wide { grid-column: span 2; }
  .log-filters--transactions .log-filters__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .log-filters--transactions .log-filters__fields .field--wide { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .log-filters--transactions .log-filters__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log-filters--transactions .log-filters__fields .field--wide { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .log-filters--transactions .log-filters__fields { grid-template-columns: minmax(0, 1fr); }
}
.log-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }

/* The pay page log's and Website forms' tabs, one control like the appearance switch,
   each with its count, and any sort beside them, dropping under them on a phone. A row
   with a More menu stays on one line: app.ts moves the tabs that don't fit into More,
   keeping the first tab and the open one in the row. Without JavaScript the tabs wrap. */
.log-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); margin: 0 0 var(--s-5); }
.tabs { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--accent-line); border-radius: var(--radius); }
.tabs--more { display: flex; min-width: 0; width: max-content; max-width: 100%; }
.tabs--more.is-fitted { flex-wrap: nowrap; }
.tabs--more.is-fitted > .tabs__tab { flex: 0 0 auto; white-space: nowrap; }
.tabs__more { flex: 0 0 auto; border-left: 2px solid var(--accent-line); }
.tabs__more-toggle { height: 100%; white-space: nowrap; cursor: pointer; list-style: none; }
.tabs__more-toggle::-webkit-details-marker { display: none; }
.tabs__more[open] > .tabs__more-toggle { background: var(--green-100); }
.tabs__menu {
  position: absolute; z-index: 45; top: calc(100% + 6px); right: -2px; min-width: 15rem; padding: var(--s-1) 0;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-top: 3px solid var(--green-900); border-radius: var(--radius);
  box-shadow: 0 10px 28px var(--panel-shadow);
}
.tabs__menu > .tabs__tab { display: flex; justify-content: space-between; width: 100%; white-space: nowrap; }
.tabs__menu > .tabs__tab + .tabs__tab { border-left: 0; }
.tabs__tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.tabs__tab + .tabs__tab { border-left: 2px solid var(--accent-line); }
.tabs__tab:hover { background: var(--green-100); text-decoration: none; }
.tabs__tab[aria-current="page"] { background: var(--accent-line); color: var(--sheet); }
.tabs__count { font-family: var(--font-mono); font-size: 0.875rem; }
/* Phones: a step less padding, so the first tab, the open one and More fit on one line
   even at 320px wide. */
@media (max-width: 559px) {
  .tabs__tab { gap: 6px; padding: 0 var(--s-3); }
  /* Two tabs fit side by side on a phone; three or more stack into one full-width column. */
  .tabs:not(.tabs--more):has(> .tabs__tab:nth-child(3)) { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .tabs:not(.tabs--more):has(> .tabs__tab:nth-child(3)) > .tabs__tab { width: 100%; }
  .tabs:not(.tabs--more):has(> .tabs__tab:nth-child(3)) > .tabs__tab + .tabs__tab { border-top: 2px solid var(--accent-line); border-left: 0; }
}
.log-toolbar__sort { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2); margin: 0; }
.log-toolbar__sort .field { min-width: 12rem; margin: 0; }

/* The log settings: the limits under the lead, the trimming switch, then Trim now with
   its hint. */
/* How long log entries are kept and the Cloudflare plan, side by side from 640px like
   the PO and quote choices. The line on the database size sits under both, 6px below
   like a field's own hint. */
.settings__keep { margin-top: var(--s-4); }
.settings__keep .field:has(+ .settings__keep-hint) { margin-bottom: 6px; }
.settings__keep-hint { grid-column: 1 / -1; }
.settings__limits { margin-top: var(--s-4); }
.settings__switch { margin-top: var(--s-4); }

/* Settings save bar: once a setting differs from what was saved, the Save button rises into
   a bar pinned to the bottom of the screen with a note, so nobody takes the page for saving
   by itself. "Show changes" opens a small list above the bar, each change with an undo. */
.settings-form__actions { position: relative; align-items: center; gap: var(--s-3) var(--s-4); }
.settings-form__unsaved { min-width: 0; }
.settings-form__unsaved-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); margin: 0; font-weight: 700; color: var(--ink); }
.settings-form__unsaved-text .link-button { font-weight: 400; }
.settings-form[data-dirty] .settings-form__actions {
  position: sticky; bottom: var(--s-3); z-index: 30; justify-content: space-between;
  padding: var(--s-3) var(--s-4); background: var(--sheet); border: 2px solid var(--accent-line); border-radius: var(--radius); box-shadow: 0 10px 28px var(--panel-shadow);
  animation: settings-save-rise 0.2s ease-out;
}
@keyframes settings-save-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .settings-form[data-dirty] .settings-form__actions { animation: none; } }
.settings-form__changes {
  position: absolute; left: 0; bottom: calc(100% + var(--s-2)); width: min(32rem, 100%); max-height: min(50vh, 26rem); overflow-y: auto;
  padding: var(--s-3) var(--s-4); background: var(--sheet); border: 2px solid var(--accent-line); border-radius: var(--radius); box-shadow: 0 10px 28px var(--panel-shadow);
}
.settings-form__changes-title { margin: 0 0 var(--s-1); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
:lang(zh) .settings-form__changes-title { letter-spacing: 0; text-transform: none; }
.settings-form__changes-list { display: grid; margin: 0; padding: 0; list-style: none; }
.settings-form__change { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: center; padding: var(--s-2) 0; border-top: 1px dashed var(--rule); }
.settings-form__change:first-child { border-top: 0; }
.settings-form__change-name { grid-column: 1; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.settings-form__change-values { grid-column: 1; color: var(--muted); overflow-wrap: anywhere; }
.settings-form__undo { grid-column: 2; grid-row: 1 / span 2; }
.settings__trim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-3); }
.settings__trim .field__hint { flex: 1 1 20rem; }

/* ---------- Chinese screens ----------
 * Spaced-out capitals suit the English labels; Chinese characters read best set close.
 */
:lang(zh) .brand__tag, :lang(zh) .account-panel__label, :lang(zh) .stats__label, :lang(zh) .sheet__title, :lang(zh) .plate__head,
:lang(zh) .plate dt, :lang(zh) .details-list dt, :lang(zh) .data thead th, :lang(zh) .data td::before, :lang(zh) .pairs dt, :lang(zh) .date-picker__grid th,
:lang(zh) .eyebrow, :lang(zh) .login__foot, :lang(zh) .app-rail__title, :lang(zh) .app-rail__group-title { letter-spacing: 0; }
.login__language { font-size: 0.9375rem; color: var(--accent-ink); }

/* ---------- Sign-in page ---------- */
.login { min-height: 100vh; background: var(--paper); border-top: 6px solid var(--green-900); position: relative; }
.login::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--orange-600); }
.login__main { display: grid; place-items: center; align-content: center; gap: var(--s-4); min-height: calc(100vh - 6px); padding: var(--s-6) var(--gutter); }
.login__card {
  width: min(100%, 460px); padding: var(--s-6); background: var(--sheet);
  border: 2px solid var(--accent-line); border-radius: 6px; box-shadow: inset 0 0 0 4px var(--sheet), inset 0 0 0 5px var(--rule-strong), 0 18px 40px var(--panel-shadow);
}
.login__head { margin-bottom: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
.login__head .brand__logo { height: 60px; }
.login__card h1 { font-size: clamp(1.75rem, 1.2vw + 1.4rem, 2.125rem); margin-bottom: var(--s-3); }
.login__lead { color: var(--ink); }
.btn--microsoft { width: 100%; gap: var(--s-3); background: var(--green-900); color: #fff; margin-top: var(--s-2); }
.btn--microsoft:hover { background: var(--green-950); }
.ms-logo { width: 20px; height: 20px; flex: none; background: #fff; padding: 1px; border-radius: 2px; }
.login__dev { display: grid; gap: var(--s-2); justify-items: start; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--rule-strong); }
.login__dev span { font-size: 0.875rem; color: var(--muted); }
.login__dev-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.login__help { margin: var(--s-5) 0 0; font-size: 0.9375rem; color: var(--muted); }
.login__foot { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--muted); }
@media (max-width: 479px) { .login__card { padding: var(--s-5); } }

/* ---------- PDF preview loading screen ---------- */
/* The tab a PDF preview opens in, while the PDF is drawn: the sign-in page's band, the logo
   and a bar that sweeps across under it. With reduced motion the bar stays still. */
.pdf-loading { margin: 0; min-height: 100vh; background: var(--paper); border-top: 6px solid var(--green-900); position: relative; }
.pdf-loading::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--orange-600); }
.pdf-loading__main { display: grid; place-items: center; align-content: center; gap: var(--s-5); min-height: calc(100vh - 6px); padding: var(--s-6) var(--gutter); }
.pdf-loading__main .brand__logo { height: 64px; width: auto; }
.pdf-loading__bar { position: relative; width: min(240px, 60vw); height: 4px; overflow: hidden; background: var(--green-100); border-radius: 2px; }
.pdf-loading__bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--accent-line); border-radius: 2px; animation: pdf-loading-sweep 1.2s ease-in-out infinite; }
.pdf-loading__label { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@keyframes pdf-loading-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .pdf-loading__bar::after { animation: none; width: 100%; opacity: 0.5; } }
:lang(zh) .pdf-loading__label { letter-spacing: 0; text-transform: none; }

/* ---------- Dark theme: swap to the logo made for dark backgrounds ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo--light { display: none; }
  :root:not([data-theme="light"]) .brand__logo--dark { display: block; }
}
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }