/*
 * 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; }
}

/*
 * 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") 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") 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") 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") 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") 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") 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 ---------- */
*, *::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; }
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); }
.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-underline-offset: 0.18em; cursor: pointer; }

/* ---------- App shell ---------- */
.app { 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; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); min-height: 72px; padding-block: var(--s-2); }
.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;
}
.app-nav { margin-left: auto; }
.app-nav > ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.app-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3);
  color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent;
}
.app-nav a:hover { border-bottom-color: var(--rule-strong); }
.app-nav a[aria-current="page"] { border-bottom-color: var(--orange-600); color: var(--accent-ink); }

/* The Logs menu is a <details> disclosure, so it opens without JavaScript; app.ts closes
   it on Escape, on a click elsewhere, and when focus leaves it. */
.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 { width: 16px; height: 16px; transition: transform 0.15s; }
.nav-menu[open] .nav-menu__chevron { transform: rotate(180deg); }
.nav-menu__list {
  position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; min-width: 200px;
  display: grid; gap: 0; margin: 0; padding: var(--s-2) 0; list-style: none;
  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);
}
.app-nav .nav-menu__list a { display: flex; width: 100%; min-height: 44px; padding: 0 var(--s-4); border-bottom: 0; border-left: 3px solid transparent; }
.app-nav .nav-menu__list a:hover { background: var(--green-100); }
.app-nav .nav-menu__list a[aria-current="page"] { border-left-color: var(--orange-600); background: var(--green-100); }
/* Who is signed in reads as a label and a name, set apart from the menu by a rule, so it
   is not mistaken for a link. */
.app-user { display: flex; align-items: center; gap: var(--s-3); padding-left: var(--s-4); border-left: 1px solid var(--rule-strong); }
.app-user form { margin: 0; }
.app-user__who { display: grid; margin: 0; line-height: 1.3; }
.app-user__label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.app-user__name { font-size: 0.9375rem; color: var(--ink); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 899px) {
  .app-nav { order: 3; width: 100%; margin-left: 0; border-top: 1px solid var(--rule); }
  .app-user { margin-left: auto; }
}
@media (max-width: 559px) {
  .brand__tag { display: none; }
  .app-user { padding-left: 0; border-left: 0; }
  .app-user__who { display: none; }

  /* Narrower links keep four menu items on one row on a phone. A Manager's five sit in
     columns, three above two, instead of leaving Settings alone on a row. */
  .app-nav a, .nav-menu__toggle { padding: 0 var(--s-2); }
  .app-nav > ul:has(> li:nth-child(5)) { display: grid; grid-template-columns: repeat(3, max-content); }
}

.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); }

/* 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; padding-block: var(--s-6) var(--s-8); }
.app-main:focus { outline: none; }

.app-footer { border-top: 1px solid var(--rule); background: var(--sheet); color: var(--muted); font-size: 0.9375rem; }
.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); }
/* Appearance switch: Auto, Light or Dark as three buttons in one pill, as on the website.
   The corners are on the end buttons, not clipped by the pill, so focus rings show in full. */
.appearance { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.appearance__options { display: inline-flex; border: 2px solid var(--accent-line); border-radius: var(--radius); }
.appearance__option {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; margin: 0; padding: 0 14px; cursor: pointer;
  font: 600 1rem/1 var(--font-body); color: var(--accent-ink); background: transparent;
  border: 0; border-radius: 0;
}
.appearance__option + .appearance__option { border-left: 2px solid var(--accent-line); }
.appearance__option:first-child { border-radius: 2px 0 0 2px; }
.appearance__option:last-child { border-radius: 0 2px 2px 0; }
.appearance__option:hover { background: var(--green-100); }
.appearance__option[aria-pressed="true"] { background: var(--accent-line); color: var(--sheet); }
.appearance__option:focus-visible { position: relative; z-index: 1; }
.appearance__icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
/* Phones: the pill drops below its label and spans the footer, like the website's menu. */
@media (max-width: 559px) {
  .appearance, .appearance__options { width: 100%; }
  .appearance__option { flex: 1; }
}

/* ---------- 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 { max-width: var(--measure); 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); }

.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); }

.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__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); }
.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; }
.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 .readout { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 600; color: var(--accent-ink); }
.dd-sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.9375rem; }

.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; justify-content: space-between; gap: 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); }
.link-list li > .hash { min-width: 0; text-align: right; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
/* A note under a table sits as far below it as the note under each log. */
.table-wrap + .field__hint { margin-top: var(--s-3); }
.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. On a
   phone each row is a card with its own frame, so the last cell of every card has none. */
@media (min-width: 700px) { .data tbody tr:last-child > * { border-bottom: 0; } }
.data tbody tr: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: 699px) {
  .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 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; }
}

/* ---------- 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 { 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__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: linear-gradient(45deg, transparent 50%, var(--accent-ink) 50%), linear-gradient(135deg, var(--accent-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; 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; fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; }
.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; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.date-picker__nav--previous svg { transform: scaleX(-1); }
.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; }

/* Invoice form: the work on the left, the summary and fee switches on the right. */
.invoice-form { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 1024px) { .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-height: 1.2; }
.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; }
@container (min-width: 760px) {
  .line { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 76px 112px 104px 44px; grid-template-areas: "item description qty rate amount remove"; }
  .line__amount { display: grid; justify-items: end; align-content: end; gap: 6px; min-height: 48px; padding-top: 0; padding-bottom: 12px; border-top: 0; }
}

.summary .plate__body { padding-block: 0; }
.fees .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__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-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); }
/* 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(16rem, 1fr)); gap: var(--s-3); margin: 0; padding: 0; }
.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: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 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; }
.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-2); }
.setup-code { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.setup-code code { overflow-wrap: anywhere; }

/* 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. On a phone 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); }
.alert-table__remove { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.9375rem; color: var(--muted); }
.alert-table__remove input[type="checkbox"] { width: 18px; height: 18px; }
.alert-table__input { width: 100%; min-width: 12rem; 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: 699px) {
  .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); }

/* 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); }
.timeline__detail { margin: 0; color: var(--ink); }
.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 { 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; max-width: var(--measure); }
.refund-double__form { margin: 0; }
.refund-form .grid-2 { margin-bottom: var(--s-4); }
.refund-form .form-actions { align-items: center; }

/* The PO and quote numbers: under the dates on the invoice form, and under the QuickBooks
   choices on the Settings page with one hint for both. */
@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; }

/* 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. */
.search-form { display: grid; 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); }
.client-form__country { max-width: 20rem; }
@media (min-width: 640px) { .client-form .grid-2, .client-form .grid-3 { row-gap: var(--s-4); margin-bottom: var(--s-4); } }

/* 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. */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-top: 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); }
.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; }
@media (min-width: 700px) { .log-filters__fields .field--wide { grid-column: span 2; } }
.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 tabs, one control like the appearance switch, each with its count,
   and the sort beside them, dropping under them on a phone. */
.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__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; }
.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__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,
 * and the language switch keeps its width in either language.
 */
:lang(zh) .brand__tag, :lang(zh) .app-user__label, :lang(zh) .stats__label, :lang(zh) .sheet__title, :lang(zh) .plate__head,
:lang(zh) .plate 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 { letter-spacing: 0; }
.app-user__language { min-width: 5.5rem; }
.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); } }

/* ---------- 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; }