/* Arabesque, the Arabesque Labs design system. Generated by scripts/build.mjs: don't edit; change tokens/ and css/. */
@layer al.tokens, al.base, al.layout, al.components, al.utilities;
@layer al.tokens {
/* Arabesque: tokens. Generated by scripts/build.mjs from tokens/tokens.json: don't edit. */

:root {
  color-scheme: light;
  --al-color-sand-74: oklch(73.5% 0.012 100);
  --al-color-sand-93: oklch(92.8% 0.006 100);
  --al-color-cloud-21: oklch(20.8% 0.042 266);
  --al-color-cloud-45: oklch(44.6% 0.043 257);
  --al-color-cloud-87: oklch(86.9% 0.022 252);
  --al-color-cloud-93: oklch(92.9% 0.013 255);
  --al-color-cloud-96: oklch(96.8% 0.007 248);
  --al-color-cloud-98: oklch(98.4% 0.003 248);
  --al-color-slate-18: oklch(18.2% 0.017 265);
  --al-color-slate-21: oklch(21.2% 0.018 265);
  --al-color-slate-24: oklch(24.2% 0.018 265);
  --al-color-slate-62: oklch(62% 0.012 265);
  --al-color-teal-43: oklch(43% 0.08 183);
  --al-color-teal-51: oklch(51% 0.095 183);
  --al-color-teal-83: oklch(82.5% 0.105 168);
  --al-color-teal-91: oklch(91% 0.075 168);
  --al-color-red-46: oklch(46% 0.18 27);
  --al-color-red-54: oklch(54% 0.21 27);
  --al-color-red-68: oklch(68% 0.17 25);
  --al-color-red-78: oklch(78% 0.13 25);
  --al-color-amber-49: oklch(49% 0.105 75);
  --al-color-amber-80: oklch(80% 0.12 85);
  --al-color-blue-53: oklch(53% 0.19 262);
  --al-color-blue-80: oklch(80% 0.08 250);
  --al-color-chart-green-light: #007a5c;
  --al-color-chart-orange-light: #c26300;
  --al-color-chart-blue-light: #3d73b6;
  --al-color-chart-raspberry-light: #b8336a;
  --al-color-chart-green-dark: #3ba888;
  --al-color-chart-orange-dark: #ca7e31;
  --al-color-chart-blue-dark: #5188cd;
  --al-color-chart-raspberry-dark: #d75b8f;
  --al-color-white: oklch(100% 0 0);
  --al-color-bg: var(--al-color-cloud-98);
  --al-color-surface: var(--al-color-white);
  --al-color-surface-sunk: var(--al-color-cloud-96);
  --al-color-text: var(--al-color-cloud-21);
  --al-color-text-muted: var(--al-color-cloud-45);
  --al-color-line: var(--al-color-cloud-93);
  --al-color-line-strong: oklch(20.8% 0.042 266 / 0.4);
  --al-color-control: var(--al-color-slate-62);
  --al-color-accent: var(--al-color-teal-51);
  --al-color-accent-hover: var(--al-color-teal-43);
  --al-color-on-accent: var(--al-color-white);
  --al-color-accent-wash: oklch(60% 0.11 183 / 0.12);
  --al-color-focus: var(--al-color-teal-51);
  --al-color-focus-on-inverse: var(--al-color-teal-83);
  --al-color-danger: var(--al-color-red-54);
  --al-color-danger-hover: var(--al-color-red-46);
  --al-color-danger-wash: oklch(63% 0.22 27 / 0.1);
  --al-color-warning: var(--al-color-amber-49);
  --al-color-warning-wash: oklch(86% 0.16 92 / 0.3);
  --al-color-success: var(--al-color-teal-51);
  --al-color-success-wash: oklch(60% 0.11 183 / 0.12);
  --al-color-info: var(--al-color-blue-53);
  --al-color-info-wash: oklch(62% 0.19 262 / 0.1);
  --al-color-backdrop: oklch(20.8% 0.042 266 / 0.45);
  --al-color-inverse: var(--al-color-cloud-21);
  --al-color-on-inverse: var(--al-color-cloud-98);
  --al-color-chart-0: var(--al-color-cloud-87);
  --al-color-chart-1: var(--al-color-chart-green-light);
  --al-color-chart-2: var(--al-color-chart-orange-light);
  --al-color-chart-3: var(--al-color-chart-blue-light);
  --al-color-chart-4: var(--al-color-chart-raspberry-light);
  --al-color-tint-teal-bg: #CCFBF1;
  --al-color-tint-teal-ink: #115E59;
  --al-color-tint-green-bg: #DCFCE7;
  --al-color-tint-green-ink: #166534;
  --al-color-tint-yellow-bg: #FEF9C3;
  --al-color-tint-yellow-ink: #854D0E;
  --al-color-tint-orange-bg: #FFEDD5;
  --al-color-tint-orange-ink: #9A3412;
  --al-color-tint-pink-bg: #FCE7F3;
  --al-color-tint-pink-ink: #9D174D;
  --al-color-tint-purple-bg: #F3E8FF;
  --al-color-tint-purple-ink: #6B21A8;
  --al-color-tint-blue-bg: #DBEAFE;
  --al-color-tint-blue-ink: #1E40AF;
  --al-color-tint-cyan-bg: #CFFAFE;
  --al-color-tint-cyan-ink: #155E75;
  --al-color-syntax-keyword: #7E22CE;
  --al-color-syntax-string: #166534;
  --al-color-syntax-number: #9A3412;
  --al-color-syntax-comment: #5B6474;
  --al-color-syntax-function: #1D4ED8;
  --al-color-syntax-tag: #0F766E;
  --al-color-syntax-attribute: #9D174D;
  --al-color-pattern-line: oklch(24.5% 0.028 265 / 0.26);
  --al-color-pattern-scaffold: oklch(24.5% 0.028 265 / 0.12);
  --al-color-pattern-quiet: oklch(24.5% 0.028 265 / 0.14);
  --al-color-pattern-focal: var(--al-color-accent);
  --al-color-pattern-focal-fill: oklch(51% 0.095 183 / 0.16);
  --al-font-sans: "Jost", "IBM Plex Sans Arabic", "Noto Sans Arabic", "SF Arabic", "Geeza Pro", ui-sans-serif, system-ui, sans-serif;
  --al-font-display: "Jost", "Kufam", "Noto Kufi Arabic", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --al-font-serif: "Newsreader", "Amiri", "Noto Naskh Arabic", "Scheherazade New", "Georgia", serif;
  --al-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --al-script-scale: 1;
  --al-text-xs: calc(0.8125rem * var(--al-script-scale));
  --al-text-sm: calc(0.9375rem * var(--al-script-scale));
  --al-text-base: calc(1.0625rem * var(--al-script-scale));
  --al-text-md: calc(1.1875rem * var(--al-script-scale));
  --al-text-lg: calc(1.375rem * var(--al-script-scale));
  --al-text-xl: calc(1.625rem * var(--al-script-scale));
  --al-text-2xl: calc(clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem) * var(--al-script-scale));
  --al-text-3xl: calc(clamp(2.25rem, 1.7rem + 2.2vw, 3.375rem) * var(--al-script-scale));
  --al-text-display: calc(clamp(2.75rem, 1.9rem + 3.6vw, 5rem) * var(--al-script-scale));
  --al-leading-tight: 1.1;
  --al-leading-heading: 1.2;
  --al-leading-ui: 1.45;
  --al-leading-prose: 1.6;
  --al-weight-regular: 400;
  --al-weight-medium: 500;
  --al-weight-semibold: 600;
  --al-tracking-tight: -0.015em;
  --al-tracking-none: 0;
  --al-tracking-wide: 0.05em;
  --al-space-0: 0;
  --al-space-1: 0.25rem;
  --al-space-2: 0.5rem;
  --al-space-3: 0.75rem;
  --al-space-4: 1rem;
  --al-space-5: 1.25rem;
  --al-space-6: 1.5rem;
  --al-space-8: 2rem;
  --al-space-12: 3rem;
  --al-space-16: 4rem;
  --al-space-0-5: 0.125rem;
  --al-space-1-5: 0.375rem;
  --al-space-section: clamp(3rem, 2rem + 6vw, 9rem);
  --al-space-gutter: clamp(1rem, 0.5rem + 3vw, 4rem);
  --al-radius-sm: 0.125rem;
  --al-radius-md: 0.25rem;
  --al-radius-full: 999px;
  --al-border-hairline: 1px;
  --al-border-focus: 2px;
  --al-border-focus-offset: 2px;
  --al-size-control-sm: 2rem;
  --al-size-control-md: 2.5rem;
  --al-size-target-min: 1.5rem;
  --al-size-target-touch: 2.75rem;
  --al-size-icon: 1.125rem;
  --al-size-measure: 65ch;
  --al-size-page: 75rem;
  --al-size-dialog-sm: 30rem;
  --al-size-dialog-md: 48rem;
  --al-size-sidebar: 14rem;
  --al-size-sidebar-collapsed: 3.75rem;
  --al-duration-fast: 150ms;
  --al-duration-base: 250ms;
  --al-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --al-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --al-z-sticky: 10;
  --al-z-toast: 100;
  --al-breakpoint-sm: 40rem;
  --al-breakpoint-md: 52rem;
  --al-breakpoint-lg: 64rem;
  --al-pattern-side: 32px;
  --al-pattern-side-narrow: 22px;
  --al-pattern-stroke: 1.25px;
  --al-pattern-contact-angle: 67.5;
  --al-pattern-hero-side: 46px;
  --al-pattern-hero-side-narrow: 30px;
  --al-pattern-hero-stroke: 1px;
  --al-pattern-focal-stroke: 1.6px;
  --al-button-height: var(--al-size-control-md);
  --al-button-height-sm: var(--al-size-control-sm);
  --al-button-padding-inline: var(--al-space-4);
  --al-button-radius: var(--al-radius-sm);
  --al-field-height: var(--al-size-control-md);
  --al-field-padding-inline: var(--al-space-3);
  --al-field-radius: var(--al-radius-sm);
}

/* Dark: by the system's setting, unless light is chosen; or when chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --al-color-bg: var(--al-color-slate-18);
    --al-color-surface: var(--al-color-slate-21);
    --al-color-surface-sunk: var(--al-color-slate-24);
    --al-color-text: var(--al-color-sand-93);
    --al-color-text-muted: var(--al-color-sand-74);
    --al-color-line: oklch(100% 0 0 / 0.12);
    --al-color-line-strong: oklch(100% 0 0 / 0.4);
    --al-color-accent: var(--al-color-teal-83);
    --al-color-accent-hover: var(--al-color-teal-91);
    --al-color-on-accent: var(--al-color-slate-18);
    --al-color-accent-wash: oklch(82.5% 0.105 168 / 0.12);
    --al-color-focus: var(--al-color-teal-83);
    --al-color-focus-on-inverse: var(--al-color-teal-51);
    --al-color-danger: var(--al-color-red-68);
    --al-color-danger-hover: var(--al-color-red-78);
    --al-color-danger-wash: oklch(68% 0.17 25 / 0.14);
    --al-color-warning: var(--al-color-amber-80);
    --al-color-warning-wash: oklch(80% 0.12 85 / 0.12);
    --al-color-success: var(--al-color-teal-83);
    --al-color-success-wash: oklch(82.5% 0.105 168 / 0.12);
    --al-color-info: var(--al-color-blue-80);
    --al-color-info-wash: oklch(80% 0.08 250 / 0.12);
    --al-color-backdrop: oklch(0% 0 0 / 0.6);
    --al-color-inverse: var(--al-color-sand-93);
    --al-color-on-inverse: var(--al-color-slate-18);
    --al-color-chart-0: oklch(100% 0 0 / 0.2);
    --al-color-chart-1: var(--al-color-chart-green-dark);
    --al-color-chart-2: var(--al-color-chart-orange-dark);
    --al-color-chart-3: var(--al-color-chart-blue-dark);
    --al-color-chart-4: var(--al-color-chart-raspberry-dark);
    --al-color-tint-teal-bg: oklch(70% 0.13 183 / 0.18);
    --al-color-tint-teal-ink: #5EEAD4;
    --al-color-tint-green-bg: oklch(72% 0.17 150 / 0.18);
    --al-color-tint-green-ink: #86EFAC;
    --al-color-tint-yellow-bg: oklch(85% 0.17 95 / 0.18);
    --al-color-tint-yellow-ink: #FDE047;
    --al-color-tint-orange-bg: oklch(75% 0.16 55 / 0.18);
    --al-color-tint-orange-ink: #FDBA74;
    --al-color-tint-pink-bg: oklch(72% 0.17 350 / 0.18);
    --al-color-tint-pink-ink: #F9A8D4;
    --al-color-tint-purple-bg: oklch(70% 0.17 305 / 0.2);
    --al-color-tint-purple-ink: #D8B4FE;
    --al-color-tint-blue-bg: oklch(68% 0.16 262 / 0.2);
    --al-color-tint-blue-ink: #93C5FD;
    --al-color-tint-cyan-bg: oklch(75% 0.13 215 / 0.18);
    --al-color-tint-cyan-ink: #67E8F9;
    --al-color-syntax-keyword: #D8B4FE;
    --al-color-syntax-string: #86EFAC;
    --al-color-syntax-number: #FDBA74;
    --al-color-syntax-comment: #A3ABB8;
    --al-color-syntax-function: #93C5FD;
    --al-color-syntax-tag: #5EEAD4;
    --al-color-syntax-attribute: #F9A8D4;
    --al-color-pattern-line: oklch(100% 0 0 / 0.2);
    --al-color-pattern-scaffold: oklch(100% 0 0 / 0.1);
    --al-color-pattern-quiet: oklch(100% 0 0 / 0.1);
    --al-color-pattern-focal-fill: oklch(82.5% 0.105 168 / 0.16);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --al-color-bg: var(--al-color-slate-18);
  --al-color-surface: var(--al-color-slate-21);
  --al-color-surface-sunk: var(--al-color-slate-24);
  --al-color-text: var(--al-color-sand-93);
  --al-color-text-muted: var(--al-color-sand-74);
  --al-color-line: oklch(100% 0 0 / 0.12);
  --al-color-line-strong: oklch(100% 0 0 / 0.4);
  --al-color-accent: var(--al-color-teal-83);
  --al-color-accent-hover: var(--al-color-teal-91);
  --al-color-on-accent: var(--al-color-slate-18);
  --al-color-accent-wash: oklch(82.5% 0.105 168 / 0.12);
  --al-color-focus: var(--al-color-teal-83);
  --al-color-focus-on-inverse: var(--al-color-teal-51);
  --al-color-danger: var(--al-color-red-68);
  --al-color-danger-hover: var(--al-color-red-78);
  --al-color-danger-wash: oklch(68% 0.17 25 / 0.14);
  --al-color-warning: var(--al-color-amber-80);
  --al-color-warning-wash: oklch(80% 0.12 85 / 0.12);
  --al-color-success: var(--al-color-teal-83);
  --al-color-success-wash: oklch(82.5% 0.105 168 / 0.12);
  --al-color-info: var(--al-color-blue-80);
  --al-color-info-wash: oklch(80% 0.08 250 / 0.12);
  --al-color-backdrop: oklch(0% 0 0 / 0.6);
  --al-color-inverse: var(--al-color-sand-93);
  --al-color-on-inverse: var(--al-color-slate-18);
  --al-color-chart-0: oklch(100% 0 0 / 0.2);
  --al-color-chart-1: var(--al-color-chart-green-dark);
  --al-color-chart-2: var(--al-color-chart-orange-dark);
  --al-color-chart-3: var(--al-color-chart-blue-dark);
  --al-color-chart-4: var(--al-color-chart-raspberry-dark);
  --al-color-tint-teal-bg: oklch(70% 0.13 183 / 0.18);
  --al-color-tint-teal-ink: #5EEAD4;
  --al-color-tint-green-bg: oklch(72% 0.17 150 / 0.18);
  --al-color-tint-green-ink: #86EFAC;
  --al-color-tint-yellow-bg: oklch(85% 0.17 95 / 0.18);
  --al-color-tint-yellow-ink: #FDE047;
  --al-color-tint-orange-bg: oklch(75% 0.16 55 / 0.18);
  --al-color-tint-orange-ink: #FDBA74;
  --al-color-tint-pink-bg: oklch(72% 0.17 350 / 0.18);
  --al-color-tint-pink-ink: #F9A8D4;
  --al-color-tint-purple-bg: oklch(70% 0.17 305 / 0.2);
  --al-color-tint-purple-ink: #D8B4FE;
  --al-color-tint-blue-bg: oklch(68% 0.16 262 / 0.2);
  --al-color-tint-blue-ink: #93C5FD;
  --al-color-tint-cyan-bg: oklch(75% 0.13 215 / 0.18);
  --al-color-tint-cyan-ink: #67E8F9;
  --al-color-syntax-keyword: #D8B4FE;
  --al-color-syntax-string: #86EFAC;
  --al-color-syntax-number: #FDBA74;
  --al-color-syntax-comment: #A3ABB8;
  --al-color-syntax-function: #93C5FD;
  --al-color-syntax-tag: #5EEAD4;
  --al-color-syntax-attribute: #F9A8D4;
  --al-color-pattern-line: oklch(100% 0 0 / 0.2);
  --al-color-pattern-scaffold: oklch(100% 0 0 / 0.1);
  --al-color-pattern-quiet: oklch(100% 0 0 / 0.1);
  --al-color-pattern-focal-fill: oklch(82.5% 0.105 168 / 0.16);
}

/* Arabic: a little larger, more line height, no letter-spacing. Declared
   where a language is set (the root, or an element with lang), not on every
   element; the sizes are declared again, so they're worked out with
   Arabic's scale (var() resolves where it's declared). An element in
   another language inside an Arabic page gets its own metrics back. */
:root:lang(ar), [lang]:lang(ar) {
  --al-script-scale: 1.08;
  --al-leading-tight: 1.35;
  --al-leading-heading: 1.45;
  --al-leading-ui: 1.65;
  --al-leading-prose: 1.9;
  --al-tracking-tight: 0;
  --al-tracking-wide: 0;
  --al-text-xs: calc(0.8125rem * var(--al-script-scale));
  --al-text-sm: calc(0.9375rem * var(--al-script-scale));
  --al-text-base: calc(1.0625rem * var(--al-script-scale));
  --al-text-md: calc(1.1875rem * var(--al-script-scale));
  --al-text-lg: calc(1.375rem * var(--al-script-scale));
  --al-text-xl: calc(1.625rem * var(--al-script-scale));
  --al-text-2xl: calc(clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem) * var(--al-script-scale));
  --al-text-3xl: calc(clamp(2.25rem, 1.7rem + 2.2vw, 3.375rem) * var(--al-script-scale));
  --al-text-display: calc(clamp(2.75rem, 1.9rem + 3.6vw, 5rem) * var(--al-script-scale));
}
[lang]:not(:lang(ar)) {
  --al-script-scale: 1;
  --al-leading-tight: 1.1;
  --al-leading-heading: 1.2;
  --al-leading-ui: 1.45;
  --al-leading-prose: 1.6;
  --al-tracking-tight: -0.015em;
  --al-tracking-wide: 0.05em;
  --al-text-xs: calc(0.8125rem * var(--al-script-scale));
  --al-text-sm: calc(0.9375rem * var(--al-script-scale));
  --al-text-base: calc(1.0625rem * var(--al-script-scale));
  --al-text-md: calc(1.1875rem * var(--al-script-scale));
  --al-text-lg: calc(1.375rem * var(--al-script-scale));
  --al-text-xl: calc(1.625rem * var(--al-script-scale));
  --al-text-2xl: calc(clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem) * var(--al-script-scale));
  --al-text-3xl: calc(clamp(2.25rem, 1.7rem + 2.2vw, 3.375rem) * var(--al-script-scale));
  --al-text-display: calc(clamp(2.75rem, 1.9rem + 3.6vw, 5rem) * var(--al-script-scale));
}

}
@layer al.base {
/* css/base.css */
/* Base: a small reset (after modern-normalize), the page, text, links,
   focus, and the system-wide rules for reduced motion and forced colours.
   Every value comes from a token. */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--al-font-sans);
  font-size: 100%;
  line-height: var(--al-leading-ui);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  color: var(--al-color-text);
  background: var(--al-color-bg);
  hanging-punctuation: first last;
}

body {
  margin: 0;
  font-size: var(--al-text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- text -------------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--al-font-display);
  font-weight: var(--al-weight-regular);
  line-height: var(--al-leading-heading);
  letter-spacing: var(--al-tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--al-text-3xl); }
h2 { font-size: var(--al-text-xl); }
h3 { font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); letter-spacing: var(--al-tracking-none); }
h4, h5, h6 { font-size: var(--al-text-base); font-weight: var(--al-weight-medium); letter-spacing: var(--al-tracking-none); }

p, ul, ol, dl, figure, blockquote, pre { margin: 0; }
p { text-wrap: pretty; }
small { font-size: var(--al-text-sm); }
strong, b { font-weight: var(--al-weight-semibold); }

code, kbd, samp, pre { font-family: var(--al-font-mono); font-size: 0.92em; }
pre { overflow-x: auto; }

hr { border: 0; border-block-start: var(--al-border-hairline) solid var(--al-color-line); margin: var(--al-space-6) 0; }

/* Arabic: the tokens already drop tracking and add line height; nothing is
   ever set in capitals, and Latin product names inside keep their tracking. */
:lang(ar) { letter-spacing: 0; }

/* ---- links ------------------------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--al-color-line-strong);
  text-underline-offset: 0.2em;
  transition: color var(--al-duration-fast) var(--al-ease-standard), text-decoration-color var(--al-duration-fast) var(--al-ease-standard);
}
a:hover { color: var(--al-color-accent); text-decoration-color: currentColor; }

/* ---- media, tables, forms ---------------------------------------------------------------- */

img, video, canvas { display: block; max-inline-size: 100%; block-size: auto; }
svg { flex: none; }
table { border-collapse: collapse; border-spacing: 0; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; }
button, [role="button"] { cursor: pointer; }
:disabled, [aria-disabled="true"] { cursor: not-allowed; }
/* hidden always hides (it's !important, and in a layer, so a project's own
   display rules can't undo it); hidden="until-found" is left to the browser. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* The one spinning motion, for the spinner, busy buttons and saving. */

/* ---- focus and selection ----------------------------------------------------------------- */

/* One focus style everywhere: an outline (never a box-shadow, which forced
   colours removes), offset from the edge, only for keyboard focus. */
:focus-visible {
  outline: var(--al-border-focus) solid var(--al-color-focus);
  outline-offset: var(--al-border-focus-offset);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: color-mix(in oklch, var(--al-color-accent) 22%, transparent); }

/* ---- motion ------------------------------------------------------------------------------ */

/* Reduced motion: nothing moves; changes still happen, instantly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- forced colours ---------------------------------------------------------------------- */

/* Windows high contrast and other forced palettes: the system's colours
   win; keep every boundary visible as a border. Components add their own. */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}

/* More contrast, when asked for: secondary text becomes body text,
   hairlines become control borders, and focus is drawn thicker. Each
   token resolves in its own theme, so this holds in light and dark. */
@media (prefers-contrast: more) {
  :root {
    --al-color-text-muted: var(--al-color-text);
    --al-color-line: var(--al-color-control);
    --al-color-line-strong: var(--al-color-text);
    --al-border-focus: 3px;
  }
}

/* Less transparency, when asked for (from Apple's HIG, "Reduce
   transparency"): translucent grounds become solid. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --al-color-backdrop: color-mix(in oklch, var(--al-color-text) 70%, var(--al-color-bg));
    --al-color-accent-wash: color-mix(in oklch, var(--al-color-accent) 12%, var(--al-color-surface));
  }
}

}

@layer al.layout {
/* css/layout.css */
/* Layout primitives: compose pages from a few rules rather than one-off
   margins. All of them use logical properties, so they mirror with dir. */

/* A page's content column: centred, capped, with a fluid side gutter. */
.al-page {
  inline-size: 100%;
  max-inline-size: calc(var(--al-size-page) + 2 * var(--al-space-gutter));
  margin-inline: auto;
  padding-inline: var(--al-space-gutter);
}

/* A website section: generous, fluid space above and below, a hairline between. */
.al-section { padding-block: var(--al-space-section); }
.al-section + .al-section { border-block-start: var(--al-border-hairline) solid var(--al-color-line); }
.al-section__title { margin: 0; max-inline-size: 20ch; font-family: var(--al-font-display); font-size: var(--al-text-3xl); font-weight: var(--al-weight-regular); line-height: var(--al-leading-heading); letter-spacing: var(--al-tracking-tight); }
.al-section__lede { margin: 0; }
/* Eyebrow: a few words above a heading that say which part of the page
   this is, in the accent; a number before them counts the parts. Sentence
   case, never capitals. With its heading, in an <hgroup>. */
.al-section__head { display: flex; flex-direction: column; gap: var(--al-space-3); margin: 0; }
.al-eyebrow { display: flex; align-items: baseline; gap: var(--al-space-2); margin: 0; font-size: var(--al-text-sm); font-weight: var(--al-weight-medium); letter-spacing: var(--al-tracking-wide); color: var(--al-color-accent); }
.al-eyebrow__index { font-family: var(--al-font-mono); font-variant-numeric: tabular-nums; color: var(--al-color-text-muted); }

/* Stack: children one under another, evenly spaced (--al-stack-gap). */
.al-stack { display: flex; flex-direction: column; gap: var(--al-stack-gap, var(--al-space-4)); }
.al-stack--tight { --al-stack-gap: var(--al-space-2); }
.al-stack--loose { --al-stack-gap: var(--al-space-8); }

/* Cluster: children in a row that wraps, aligned to the start. */
.al-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-cluster-gap, var(--al-space-3)); }
.al-cluster--end { justify-content: flex-end; }
.al-cluster--between { justify-content: space-between; }

/* Grid: as many columns of at least --al-grid-min as fit. */
.al-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--al-grid-min, 16rem), 100%), 1fr));
  gap: var(--al-grid-gap, var(--al-space-4));
}

/* Split: a narrow and a wide column, stacked on small screens. */
.al-split {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: var(--al-space-8);
  align-items: start;
}
@media (max-width: 52rem) { .al-split { grid-template-columns: minmax(0, 1fr); } }

/* Reading width. */
.al-measure { max-inline-size: var(--al-size-measure); }

/* The app shell: a sidebar and the main column; the sidebar becomes a bar
   along the top on small screens (see components/sidebar.css). */
.al-shell {
  display: grid;
  grid-template-columns: var(--al-size-sidebar) minmax(0, 1fr);
  min-block-size: 100dvh;
}
.al-shell[data-sidebar="collapsed"] { grid-template-columns: var(--al-size-sidebar-collapsed) minmax(0, 1fr); }
.al-shell > main { min-inline-size: 0; padding: var(--al-space-8) var(--al-space-gutter); }
@media (max-width: 52rem) {
  .al-shell, .al-shell[data-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .al-shell > main { padding: var(--al-space-4); }
}

}

@layer al.components {
/* css/components/badge.css */
/* Badge: a short status beside something ("Active", "Experimental", "3").
   Sentence case, never capitals; its meaning in words, not colour alone.
   Tag: a label people add and remove; its colour is a dot, beside the name. */
.al-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1);
  min-block-size: 1.375rem;
  padding-inline: var(--al-space-2);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface-sunk);
  color: var(--al-color-text);
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-medium);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.al-badge--accent { background: var(--al-color-accent-wash); color: var(--al-color-accent); }
.al-badge--success { background: var(--al-color-success-wash); color: var(--al-color-success); }
.al-badge--warning { background: var(--al-color-warning-wash); color: var(--al-color-warning); }
.al-badge--danger { background: var(--al-color-danger-wash); color: var(--al-color-danger); }
.al-badge--info { background: var(--al-color-info-wash); color: var(--al-color-info); }
.al-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--al-color-line-strong); }
.al-badge--count { font-variant-numeric: tabular-nums; min-inline-size: 1.375rem; justify-content: center; }

.al-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1-5);
  min-block-size: var(--al-size-target-min);
  padding-inline: var(--al-space-2);
  border: var(--al-border-hairline) solid var(--al-color-line);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface);
  font-size: var(--al-text-sm);
}
.al-tag::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--al-tag-color, var(--al-color-chart-0)); flex: none; }
.al-tag__remove { all: unset; display: inline-grid; place-items: center; inline-size: var(--al-size-target-min); block-size: var(--al-size-target-min); margin-inline-end: calc(-1 * var(--al-space-2)); color: var(--al-color-text-muted); cursor: pointer; border-radius: var(--al-radius-sm); }
.al-tag__remove:hover { color: var(--al-color-danger); }
.al-tag__remove:focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus); }

@media (forced-colors: active) { .al-badge { border: 1px solid CanvasText; } .al-tag::before { forced-color-adjust: none; } }

}

@layer al.components {
/* css/components/brand.css */
/* Brand: the mark (one tile of the pattern, in a square frame) beside the
   wordmark. The mark is always one colour (currentColor), never redrawn,
   never on a busy ground; its clear space is a quarter of its size. */
.al-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--al-color-text);
  text-decoration: none;
  font-family: var(--al-font-display);
  font-weight: var(--al-weight-medium);
  font-size: var(--al-text-lg);
  line-height: 1;
}
.al-lockup:hover { color: var(--al-color-text); }
.al-mark { inline-size: 1.5em; block-size: 1.5em; color: currentColor; flex: none; }
/* The wordmark is tracked in Latin; written in Arabic, it isn't
   (--al-tracking-wide is 0 under lang="ar"). */
.al-wordmark { letter-spacing: var(--al-tracking-wide); }
.al-lockup__product { color: var(--al-color-text-muted); font-weight: var(--al-weight-regular); }
.al-lockup__product::before { content: "·"; margin-inline: 0.4em; }
/* Stacked: the mark over the wordmark, for a splash or print. */
.al-lockup--stacked { flex-direction: column; gap: 0.6em; }
.al-lockup--stacked .al-mark { inline-size: 2.5em; block-size: 2.5em; }
.al-lockup--stacked .al-lockup__product::before { content: none; }

}

@layer al.components {
/* css/components/breadcrumbs.css */
/* Back link and breadcrumbs (from GOV.UK): a way back, at the top of the
   page, before the title. A back link goes to the previous step of a flow;
   breadcrumbs show where a page sits in a hierarchy. Not both. Their
   chevrons point back the way text reads, so they mirror in right-to-left. */
.al-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1);
  min-block-size: var(--al-size-target-min);
  color: var(--al-color-text);
  font-size: var(--al-text-sm);
  text-underline-offset: 0.2em;
}
.al-back-link::before {
  content: "";
  inline-size: 0.4em;
  block-size: 0.4em;
  border-block-end: 1.5px solid currentColor;
  border-inline-start: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.al-back-link:dir(rtl)::before { transform: rotate(-45deg); }
.al-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-1) 0; margin: 0; padding: 0; list-style: none; font-size: var(--al-text-sm); }
.al-breadcrumbs li { display: inline-flex; align-items: center; min-block-size: var(--al-size-target-min); }
.al-breadcrumbs li + li::before {
  content: "";
  inline-size: 0.35em;
  block-size: 0.35em;
  margin-inline: var(--al-space-2);
  border-block-start: 1.5px solid var(--al-color-text-muted);
  border-inline-end: 1.5px solid var(--al-color-text-muted);
  transform: rotate(45deg);
}
.al-breadcrumbs li:dir(rtl) + li::before { transform: rotate(-45deg); }
.al-breadcrumbs a { color: var(--al-color-text); text-underline-offset: 0.2em; }
.al-breadcrumbs [aria-current="page"] { color: var(--al-color-text-muted); }

}

@layer al.components {
/* css/components/bulk-bar.css */
/* Bulk action bar: once things are selected, what can be done to all of
   them, with how many are selected and a way to clear. Sticks to the end
   of the view; every action names its count ("Archive 3"). */
.al-bulk-bar {
  position: sticky;
  inset-block-end: var(--al-space-4);
  z-index: var(--al-z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-space-2) var(--al-space-4);
  padding: var(--al-space-2) var(--al-space-3) var(--al-space-2) var(--al-space-4);
  border-radius: var(--al-radius-md);
  background: var(--al-color-inverse);
  color: var(--al-color-on-inverse);
  /* The page's focus colour doesn't show on the inverse ground. */
  --al-color-focus: var(--al-color-focus-on-inverse);
}
.al-bulk-bar__count { font-weight: var(--al-weight-semibold); font-variant-numeric: tabular-nums; margin-inline-end: auto; }
.al-bulk-bar .al-button { --_fg: var(--al-color-on-inverse); --_border: color-mix(in oklch, var(--al-color-on-inverse) 45%, transparent); --_hover-bg: color-mix(in oklch, var(--al-color-on-inverse) 12%, transparent); }
.al-bulk-bar .al-button:hover { border-color: var(--al-color-on-inverse); }
.al-bulk-bar .al-button--quiet { --_border: transparent; }
@media (forced-colors: active) { .al-bulk-bar { border: 1px solid CanvasText; } }

}

@layer al.components {
/* css/components/button.css */
/* Button: five kinds. One primary per view or dialog; the label names the
   action and its object ("Save offer", "Archive 3 processes"), never "OK".
   Busy (aria-busy) and unavailable (aria-disabled / disabled) look
   different, so "working on it" isn't mistaken for "not allowed". */
.al-button {
  --_bg: transparent;
  --_fg: var(--al-color-text);
  --_border: var(--al-color-control);
  --_hover-bg: var(--al-color-surface-sunk);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--al-space-2);
  min-block-size: var(--al-button-height);
  min-inline-size: var(--al-size-target-min);
  padding-block: 0;
  padding-inline: var(--al-button-padding-inline);
  border: var(--al-border-hairline) solid var(--_border);
  border-radius: var(--al-button-radius);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-base);
  font-weight: var(--al-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--al-duration-fast) var(--al-ease-standard),
    border-color var(--al-duration-fast) var(--al-ease-standard),
    color var(--al-duration-fast) var(--al-ease-standard);
}
.al-button:hover { background: var(--_hover-bg); border-color: var(--al-color-text); color: var(--_fg); }
.al-button:active { transform: translateY(1px); }

/* Primary: the one action the view is for. */
.al-button--primary {
  --_bg: var(--al-color-accent);
  --_fg: var(--al-color-on-accent);
  --_border: var(--al-color-accent);
  --_hover-bg: var(--al-color-accent-hover);
}
.al-button--primary:hover { border-color: var(--_hover-bg); }

/* Quiet: a text action, for secondary and repeated actions (Edit, Add a
   step, Clear). Still a button, and still a 24px target at least. */
.al-button--quiet {
  --_border: transparent;
  --_fg: var(--al-color-accent);
  --_hover-bg: transparent;
  min-block-size: var(--al-size-target-min);
  padding-inline: var(--al-space-1);
  font-weight: var(--al-weight-medium);
}
.al-button--quiet:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; }

/* Danger: destroys something; the label says what. As a secondary button, a
   quiet one, or (the last step of a confirmation) a filled one. */
.al-button--danger { --_fg: var(--al-color-danger); --_border: var(--al-color-danger); }
.al-button--danger:hover { border-color: var(--al-color-danger); }
.al-button--danger.al-button--quiet { --_border: transparent; }
.al-button--danger.al-button--primary {
  --_bg: var(--al-color-danger);
  --_fg: var(--al-color-on-accent);
  --_border: var(--al-color-danger);
  --_hover-bg: var(--al-color-danger-hover);
}

/* Icon: square, borderless until hovered; always with an aria-label. */
.al-button--icon {
  --_border: transparent;
  inline-size: var(--al-button-height);
  padding-inline: 0;
}

.al-button--sm {
  min-block-size: var(--al-button-height-sm);
  padding-inline: var(--al-space-3);
  font-size: var(--al-text-sm);
}
.al-button--sm.al-button--icon { inline-size: var(--al-button-height-sm); }
.al-button--sm.al-button--quiet { min-block-size: var(--al-size-target-min); padding-inline: var(--al-space-1); }

/* Unavailable: dimmed, explained nearby (or in aria-describedby). Prefer
   aria-disabled to disabled, so it stays focusable and its reason is read. */
.al-button:disabled,
.al-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.al-button:disabled:hover,
.al-button[aria-disabled="true"]:hover { background: var(--_bg); border-color: var(--_border); text-decoration: none; }

/* Busy: the label stays; a spinner follows it. pointer-events stops a
   second click, but not Enter or Space: the handler must ignore presses
   while aria-busy="true" (check it first, and return). */
.al-button[aria-busy="true"] { cursor: progress; pointer-events: none; }
/* Its spinner (the star) is drawn by css/components/progress.css. */

/* Bigger targets for fingers. */
@media (pointer: coarse) {
  .al-button { min-block-size: var(--al-size-target-touch); }
  .al-button--icon { inline-size: var(--al-size-target-touch); }
}

@media (forced-colors: active) {
  .al-button { border-color: ButtonText; }
  .al-button--quiet, .al-button--icon { border-color: transparent; text-decoration: underline; }
  .al-button--primary { border-width: 2px; }
}


}

@layer al.components {
/* css/components/card.css */
/* Card: a bordered surface that groups one thing. Panel: a section of a
   page marked by a rule above, not a box (most groupings need only this).
   Stat: a figure with its label and a note; stats, a row of them, large,
   with a hairline before each and no boxes. No shadows: borders and
   surface steps carry depth. */
.al-card {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-4);
  padding: var(--al-space-5);
  border: var(--al-border-hairline) solid var(--al-color-line);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface);
  min-inline-size: 0;
}
.al-card__header { display: flex; flex-direction: column; gap: var(--al-space-1); }
.al-card__header h2, .al-card__header h3 { font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); letter-spacing: var(--al-tracking-none); }
.al-card__description { font-size: var(--al-text-sm); color: var(--al-color-text-muted); }
.al-card--interactive { transition: border-color var(--al-duration-fast) var(--al-ease-standard); }
.al-card--interactive:hover { border-color: var(--al-color-control); }
.al-card--selected { border-color: var(--al-color-accent); background: color-mix(in oklch, var(--al-color-accent-wash) 60%, var(--al-color-surface)); }

.al-panel { display: flex; flex-direction: column; gap: var(--al-space-3); padding-block-start: var(--al-space-4); border-block-start: var(--al-border-hairline) solid var(--al-color-line-strong); }
.al-panel > h2 { font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); letter-spacing: var(--al-tracking-none); }

.al-stat { display: flex; flex-direction: column; gap: var(--al-space-1); padding: var(--al-space-4); border: var(--al-border-hairline) solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface); }
.al-stat__label { font-size: var(--al-text-sm); color: var(--al-color-text-muted); }
.al-stat__value { font-family: var(--al-font-display); font-size: var(--al-text-2xl); line-height: var(--al-leading-tight); font-variant-numeric: tabular-nums; }
.al-stat__note { font-size: var(--al-text-sm); color: var(--al-color-text-muted); }

.al-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--al-space-6); }
.al-stats .al-stat { gap: var(--al-space-2); padding: 0; padding-inline-start: var(--al-space-5); border: 0; border-inline-start: var(--al-border-hairline) solid var(--al-color-line-strong); border-radius: 0; background: none; }
.al-stats .al-stat__value { font-size: var(--al-text-3xl); }

/* Quote: what someone said, in their words, then who they are. The
   quotation marks are the language's own (open-quote, close-quote). */
.al-quote { display: flex; flex-direction: column; justify-content: space-between; gap: var(--al-space-5); margin: 0; padding: var(--al-space-5); border: var(--al-border-hairline) solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface); min-inline-size: 0; }
.al-quote blockquote { display: flex; flex-direction: column; gap: var(--al-space-3); margin: 0; font-family: var(--al-font-serif); font-size: var(--al-text-md); line-height: var(--al-leading-prose); }
.al-quote blockquote > p { margin: 0; }
.al-quote blockquote > p:first-child::before { content: open-quote; }
.al-quote blockquote > p:last-child::after { content: close-quote; }
.al-quote__by { display: flex; align-items: center; gap: var(--al-space-3); font-size: var(--al-text-sm); }
.al-quote__name { display: block; font-weight: var(--al-weight-medium); }
.al-quote__role { display: block; color: var(--al-color-text-muted); }

@media (forced-colors: active) { .al-card, .al-stat, .al-stats .al-stat, .al-quote { border-color: CanvasText; } }

}

@layer al.components {
/* css/components/character-count.css */
/* Character count (from GOV.UK): a limit on a text field, said as what's
   left ("You have 12 characters remaining") and, once over, by how much
   ("You have 8 characters too many"). Typing past it is allowed (so a
   paste isn't cut), and the field shows the error. js/count.js updates
   the visible text and, after a pause, a polite live region. */
.al-character-count__message { font-size: var(--al-text-sm); color: var(--al-color-text-muted); font-variant-numeric: tabular-nums; }
.al-character-count__message[data-over] { color: var(--al-color-danger); font-weight: var(--al-weight-medium); }

}

@layer al.components {
/* css/components/chart.css */
/* Charts, in plain HTML: thin marks in the chart colours (a fixed order,
   checked for colour blindness), a 2px gap between marks, one value axis,
   a key, a tooltip on every mark (focusable), and the numbers also in a
   table. Columns (grouped or stacked, with a marker and a target line),
   a split bar (parts of a whole) and a bullet chart (each against a
   target). In right-to-left, categories and time run with the reading
   direction and bars grow from the start side; numbers stay as written. */
/* A mark's colour is its series: data-series="1" to "4", in that order;
   "0" is the neutral, for tracks and the rest, never for a series of data. */
[data-series="0"] { background: var(--al-color-chart-0); }
[data-series="1"] { background: var(--al-color-chart-1); }
[data-series="2"] { background: var(--al-color-chart-2); }
[data-series="3"] { background: var(--al-color-chart-3); }
[data-series="4"] { background: var(--al-color-chart-4); }
:is(.al-chart__bar, .al-chart__seg, .al-split-bar__part, .al-bullet__bar, .al-swatch) { forced-color-adjust: none; }

.al-chart { display: flex; flex-direction: column; gap: var(--al-space-2); padding-inline-start: 3rem; }
.al-chart__plot { position: relative; block-size: 12rem; }
.al-chart__grid { position: absolute; inset-inline: 0; border-block-start: var(--al-border-hairline) solid var(--al-color-line); }
.al-chart__grid > span { position: absolute; inset-inline-start: -3rem; inset-block-start: -0.6em; inline-size: 2.6rem; text-align: end; font-size: var(--al-text-xs); color: var(--al-color-text-muted); font-variant-numeric: tabular-nums; }
.al-chart__slots { position: absolute; inset: 0; display: flex; gap: var(--al-space-4); }
.al-chart__slot { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.al-chart__bar { inline-size: min(28px, 100%); min-inline-size: 6px; border-start-start-radius: var(--al-radius-md); border-start-end-radius: var(--al-radius-md); }
.al-chart__stack { display: flex; flex-direction: column-reverse; inline-size: min(44px, 70%); block-size: 100%; }
.al-chart__seg { display: block; border-block-start: 2px solid var(--al-color-surface); }
.al-chart__seg:last-child { border-start-start-radius: var(--al-radius-md); border-start-end-radius: var(--al-radius-md); }
.al-chart__marker { position: absolute; inline-size: min(60px, 90%); border-block-start: 3px solid var(--al-color-chart-1); transform: translateY(50%); }
.al-chart__target { position: absolute; inset-inline: 0; border-block-start: 2px dashed var(--al-color-text); opacity: 0.75; }
.al-chart__axis { display: flex; gap: var(--al-space-4); }
.al-chart__axis > span { flex: 1; text-align: center; font-size: var(--al-text-xs); color: var(--al-color-text-muted); }
.al-chart [tabindex]:hover, .al-chart [tabindex]:focus-visible,
.al-split-bar [tabindex]:hover, .al-split-bar [tabindex]:focus-visible,
.al-bullet [tabindex]:hover, .al-bullet [tabindex]:focus-visible { filter: brightness(1.1); }

.al-key { display: flex; flex-wrap: wrap; gap: var(--al-space-1) var(--al-space-4); font-size: var(--al-text-sm); }
.al-key__item { display: inline-flex; align-items: center; gap: var(--al-space-1-5); }
.al-swatch { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 2px; flex: none; }
.al-swatch--line { block-size: 0; inline-size: 0.875rem; border-block-start: 3px solid var(--al-color-chart-1); background: none; border-radius: 0; }
.al-swatch--target { block-size: 0; inline-size: 0.875rem; border-block-start: 2px dashed var(--al-color-text); background: none; border-radius: 0; }

.al-split-bar { display: flex; flex-direction: column; gap: var(--al-space-2); }
.al-split-bar__track { display: flex; gap: 2px; block-size: 1rem; }
.al-split-bar__part { display: block; min-inline-size: 2px; }
.al-split-bar__part:first-child { border-start-start-radius: var(--al-radius-md); border-end-start-radius: var(--al-radius-md); }
.al-split-bar__part:last-child { border-start-end-radius: var(--al-radius-md); border-end-end-radius: var(--al-radius-md); }

.al-bullet { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) auto; gap: var(--al-space-2) var(--al-space-3); align-items: center; font-size: var(--al-text-sm); }
.al-bullet__row { display: contents; }
.al-bullet__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-bullet__track { position: relative; block-size: 1.125rem; border-radius: var(--al-radius-md); background: color-mix(in oklch, var(--al-color-chart-0) 45%, transparent); }
.al-bullet__bar { position: absolute; inset-block: 3px; inset-inline-start: 0; border-start-end-radius: var(--al-radius-md); border-end-end-radius: var(--al-radius-md); }
.al-bullet__target { position: absolute; inset-block: -4px; border-inline-start: 2px dashed var(--al-color-text); }
.al-bullet__value { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.al-bullet > .al-key { grid-column: 1 / -1; }
/* The difference from the target, in words and colour. */
.al-bullet__diff--more { color: var(--al-color-success); }
.al-bullet__diff--less { color: var(--al-color-danger); }
@media (max-width: 40rem) {
  .al-bullet { grid-template-columns: minmax(0, 1fr) auto; }
  .al-bullet__label { grid-column: 1 / -1; }
}

/* Every chart has a title and a one-sentence summary of what it shows
   (from Apple's HIG): the takeaway first, in words, so the chart is
   understood without seeing it. Axis and grid labels are aria-hidden;
   marks carry their values with context ("£12,480 in March, Direct"). */
.al-chart__title { font-size: var(--al-text-sm); font-weight: var(--al-weight-medium); }
.al-chart__summary { font-size: var(--al-text-sm); color: var(--al-color-text-muted); max-inline-size: var(--al-size-measure); }

}

@layer al.components {
/* css/components/choice.css */
/* Choices: checkboxes and radios are native inputs in the accent colour,
   with a 24px row so the label is the target; a switch is a checkbox with
   role="switch" for settings that apply at once. */
.al-choice {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--al-space-2);
  min-block-size: var(--al-size-target-min);
  padding-block: var(--al-space-0-5);
  cursor: pointer;
  font-size: var(--al-text-base);
}
.al-choice > input:is([type="checkbox"], [type="radio"]):not(.al-switch) {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0.15em 0 0;
  flex: none;
  accent-color: var(--al-color-accent);
  cursor: pointer;
}
.al-choice__text { display: flex; flex-direction: column; gap: var(--al-space-0-5); }
.al-choice__hint { font-size: var(--al-text-sm); color: var(--al-color-text-muted); }
.al-choice:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.al-choices { display: flex; flex-direction: column; gap: var(--al-space-1); }
.al-choices--inline { flex-direction: row; flex-wrap: wrap; gap: var(--al-space-1) var(--al-space-5); }

/* Switch: on or off, now. */
.al-switch {
  appearance: none;
  position: relative;
  inline-size: 2.25rem;
  block-size: 1.25rem;
  margin: 0.1em 0 0;
  flex: none;
  border: var(--al-border-hairline) solid var(--al-color-control);
  border-radius: var(--al-radius-full);
  background: var(--al-color-surface-sunk);
  cursor: pointer;
  transition: background-color var(--al-duration-fast) var(--al-ease-standard);
}
.al-switch::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.125rem;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: 50%;
  background: var(--al-color-text-muted);
  transform: translateY(-50%);
  transition: inset-inline-start var(--al-duration-fast) var(--al-ease-standard), background-color var(--al-duration-fast) var(--al-ease-standard);
}
.al-switch:checked { background: var(--al-color-accent); border-color: var(--al-color-accent); }
.al-switch:checked::before { inset-inline-start: calc(100% - 1rem); background: var(--al-color-on-accent); }

@media (forced-colors: active) {
  .al-switch { border-color: ButtonText; }
  .al-switch::before { background: ButtonText; forced-color-adjust: none; }
  .al-switch:checked { background: Highlight; }
  .al-switch:checked::before { background: HighlightText; }
}

}

@layer al.components {
/* css/components/code.css */
/* Code: a sample to read or copy, in a box of its own that scrolls, always
   left to right (code reads that way in either language). A bar above names
   it, or offers it in several languages (tabs, js/tabs.js), and copies it
   (js/copy.js). Lines can be marked: the ones the reader should look at.
   Syntax colour (js/highlight.js) says what kind of word each is, the
   same in every sample; comments are italic too, so it isn't colour alone.
   A command: one line to paste into a terminal, with its copy button. */
.al-code { min-inline-size: 0; border: var(--al-border-hairline) solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface-sunk); }
.al-code__bar { display: flex; align-items: center; gap: var(--al-space-3); min-block-size: var(--al-size-control-md); padding-inline: var(--al-space-4) var(--al-space-1); border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
.al-code__caption { font-family: var(--al-font-mono); font-size: var(--al-text-xs); color: var(--al-color-text-muted); overflow-wrap: anywhere; }
.al-code__tabs { display: flex; gap: var(--al-space-1); margin-inline-start: calc(-1 * var(--al-space-2)); }
.al-code__tab { padding: var(--al-space-1) var(--al-space-2); border: var(--al-border-hairline) solid transparent; border-radius: var(--al-radius-sm); background: none; color: var(--al-color-text-muted); font: inherit; font-size: var(--al-text-sm); cursor: pointer; }
.al-code__tab:hover { color: var(--al-color-text); }
.al-code__tab[aria-selected="true"] { border-color: var(--al-color-line); background: var(--al-color-surface); color: var(--al-color-text); }
.al-code__tab:focus-visible, .al-code__pre:focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus); outline-offset: -2px; }
.al-code__copy { margin-inline-start: auto; }
.al-code__copy[data-copied] .al-code__copy-idle, .al-code__copy:not([data-copied]) .al-code__copy-done { display: none; }
.al-code__copy[data-copied] .al-code__copy-done { color: var(--al-color-success); }
.al-code__pre {
  margin: 0;
  padding: var(--al-space-4);
  overflow-x: auto;
  direction: ltr;
  text-align: start;
  font-family: var(--al-font-mono);
  font-size: var(--al-text-sm);
  line-height: 1.7;
  tab-size: 2;
}
.al-code__pre code { font: inherit; }
.al-code__line { display: inline-block; box-sizing: content-box; min-inline-size: 100%; min-block-size: 1lh; }
/* A marked line runs the box's width, with an accent bar at its start. */
.al-code__line--mark {
  margin-inline: calc(-1 * var(--al-space-4));
  padding-inline: calc(var(--al-space-4) - 2px) var(--al-space-4);
  border-inline-start: 2px solid var(--al-color-accent);
  background: var(--al-color-accent-wash);
  color: inherit;
}

.al-syntax-keyword { color: var(--al-color-syntax-keyword); }
.al-syntax-string { color: var(--al-color-syntax-string); }
.al-syntax-number { color: var(--al-color-syntax-number); }
.al-syntax-comment { color: var(--al-color-syntax-comment); font-style: italic; }
.al-syntax-function { color: var(--al-color-syntax-function); }
.al-syntax-tag { color: var(--al-color-syntax-tag); }
.al-syntax-attribute { color: var(--al-color-syntax-attribute); }

.al-command {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  max-inline-size: 100%;
  min-block-size: var(--al-size-control-md);
  padding-inline: var(--al-space-4) var(--al-space-1);
  border: var(--al-border-hairline) solid var(--al-color-line-strong);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface-sunk);
}
.al-command code { min-inline-size: 0; overflow-x: auto; direction: ltr; white-space: nowrap; font-family: var(--al-font-mono); font-size: var(--al-text-sm); }
/* The prompt is shown, never copied or read out. */
.al-command--prompt code::before { content: "$"; content: "$" / ""; margin-inline-end: 1ch; color: var(--al-color-text-muted); user-select: none; }
.al-command .al-code__copy { margin-inline-start: 0; }

@media (forced-colors: active) {
  .al-code, .al-command { border-color: CanvasText; }
  .al-code__tab[aria-selected="true"] { border-color: Highlight; }
  .al-code__line--mark { border-inline-start-color: Highlight; }
  .al-code [class*="al-syntax-"] { color: CanvasText; }
}

}

@layer al.components {
/* css/components/confirmation.css */
/* Confirmation (from GOV.UK): the end of a flow that sends or creates
   something: a clear title saying it's done, the reference people may
   need, then what happens next (in the page, under it). The one large,
   coloured block in the system; one per page. */
.al-confirmation {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
  padding: var(--al-space-8) var(--al-space-6);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-accent);
  color: var(--al-color-on-accent);
  text-align: center;
}
.al-confirmation__title { font-size: var(--al-text-2xl); line-height: var(--al-leading-heading); color: inherit; }
.al-confirmation__body { font-size: var(--al-text-lg); }
.al-confirmation__body strong { display: block; font-weight: var(--al-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
@media (forced-colors: active) { .al-confirmation { border: 2px solid CanvasText; } }

}

@layer al.components {
/* css/components/construction.css */
/* Construction figure: how the pattern is made, in three steps, each with
   its software reading (js/pattern.js initConstruction): the tiling; the
   strands drawn at the contact angle; the strands alone. An optional slider
   redraws steps 2 and 3 at another angle. */
.al-construction { margin: 0; }
.al-construction__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: var(--al-space-8) var(--al-space-6); }
.al-construction__art { max-inline-size: 16rem; aspect-ratio: 1; overflow: hidden; border: var(--al-border-hairline) solid var(--al-color-line); background: var(--al-color-surface); }
.al-construction__svg { display: block; inline-size: 100%; block-size: 100%; }
.al-construction__scaffold { fill: none; stroke: var(--al-color-pattern-scaffold); stroke-width: 0.9; }
.al-construction__rays { fill: none; stroke: var(--al-color-accent); stroke-width: 1.1; stroke-linejoin: miter; }
.al-construction__strands { fill: none; stroke: var(--al-color-text); stroke-width: 1.1; stroke-linejoin: miter; }
.al-construction__title { margin: var(--al-space-5) 0 0; max-inline-size: 24ch; line-height: var(--al-leading-prose); }
.al-construction__num { color: var(--al-color-accent); font-variant-numeric: tabular-nums; }
.al-construction__aside { margin: var(--al-space-3) 0 0; font-family: var(--al-font-serif); font-style: italic; color: var(--al-color-text-muted); }
.al-construction__aside:lang(ar) { font-style: normal; }
.al-construction__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-3) var(--al-space-4); margin-block-start: var(--al-space-8); }
.al-construction__control input[type="range"] { inline-size: min(20rem, 100%); min-block-size: var(--al-size-target-min); accent-color: var(--al-color-accent); margin: 0; }
.al-construction__control output { min-inline-size: 4.5ch; font-variant-numeric: tabular-nums; }
@media (forced-colors: active) {
  .al-construction__scaffold, .al-construction__strands { stroke: CanvasText; }
  .al-construction__rays { stroke: Highlight; }
}

}

@layer al.components {
/* css/components/cta.css */
/* Call to action: the page's last word. One line, then what to do: the
   primary action, a quieter one, and perhaps the command that starts it.
   Centred, on the sunk surface; with the pattern, quiet, behind it (in an
   .al-pattern--quiet). One per page, at its end. */
.al-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-space-5);
  padding: var(--al-space-section) var(--al-space-4);
  border-block-start: var(--al-border-hairline) solid var(--al-color-line);
  background: var(--al-color-surface-sunk);
  text-align: center;
}
.al-cta__title { margin: 0; max-inline-size: 20ch; font-family: var(--al-font-display); font-size: var(--al-text-3xl); font-weight: var(--al-weight-regular); line-height: var(--al-leading-heading); letter-spacing: var(--al-tracking-tight); text-wrap: balance; }
.al-cta__lede { margin: 0; }
.al-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--al-space-3); }

}

@layer al.components {
/* css/components/date-input.css */
/* Date input (from GOV.UK): day, month and year as three short number
   fields, for dates people know (a birthday, a start date on a document).
   A calendar is for choosing a date near today: that's the date picker
   (date-picker.css). Fields keep their order in
   right-to-left, as the date is written. */
.al-date-input { display: flex; flex-wrap: wrap; gap: var(--al-space-3); }
.al-date-input .al-field { flex: none; }
.al-date-input .al-input { inline-size: 3.5rem; }
.al-date-input__year .al-input { inline-size: 5rem; }

}

@layer al.components {
/* css/components/date-picker.css */
/* Date picker: a field for a date near today, and a calendar beside it
   (js/datepicker.js, the APG date picker dialog). The calendar is a modal
   <dialog> placed under the field, with a month grid in the page's
   language: in right to left the week runs from the right, and the
   month buttons point the way the reading goes. The date can always be
   typed instead. For a date people already know, use the date input. */
.al-date-picker { display: flex; align-items: stretch; gap: var(--al-space-2); max-inline-size: 16rem; }
.al-date-picker > .al-input { flex: 1; min-inline-size: 0; }
.al-date-picker__toggle { flex: none; block-size: auto; }

.al-date-picker__dialog {
  margin: 0;
  inset: auto;
  padding: var(--al-space-3);
  border: var(--al-border-hairline) solid var(--al-color-line);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface);
  color: var(--al-color-text);
}
/* Modal for focus and Escape, but it reads as a popover: no dimmed page. */
.al-date-picker__dialog::backdrop { background: transparent; }

.al-date-picker__head { display: flex; align-items: center; justify-content: space-between; gap: var(--al-space-2); margin-block-end: var(--al-space-2); }
.al-date-picker__title { font-size: var(--al-text-base); font-weight: var(--al-weight-medium); }
/* The chevron points forward; "previous" points back. Both turn round in
   right to left, where forward is to the left. */
.al-date-picker__prev .al-icon { transform: scaleX(-1); }
.al-date-picker__next .al-icon:dir(rtl) { transform: scaleX(-1); }
.al-date-picker__prev .al-icon:dir(rtl) { transform: none; }

.al-date-picker__grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.al-date-picker__grid th {
  block-size: var(--al-size-control-sm);
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-medium);
  color: var(--al-color-text-muted);
  text-align: center;
}
.al-date-picker__grid td { padding: 0; text-align: center; }
.al-date-picker__grid td[data-date] {
  inline-size: var(--al-size-control-md);
  block-size: var(--al-size-control-md);
  border-radius: var(--al-radius-sm);
  cursor: pointer;
}
.al-date-picker__grid td[data-date]:hover { background: var(--al-color-surface-sunk); }
/* The ring sits just outside the day, on the calendar's ground, so it
   shows on the chosen day's accent too. */
.al-date-picker__grid td[data-date]:focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus); outline-offset: var(--al-border-hairline); position: relative; z-index: 1; }
/* Today: a ring, so it doesn't look chosen. */
.al-date-picker__grid td[aria-current="date"] { box-shadow: inset 0 0 0 var(--al-border-hairline) var(--al-color-control); font-weight: var(--al-weight-semibold); }
.al-date-picker__grid td[aria-selected="true"] { background: var(--al-color-accent); color: var(--al-color-on-accent); }
.al-date-picker__grid td[aria-selected="true"]:hover { background: var(--al-color-accent-hover); }
.al-date-picker__grid td[aria-disabled="true"] { color: var(--al-color-text-muted); text-decoration: line-through; cursor: not-allowed; }
.al-date-picker__grid td[aria-disabled="true"]:hover { background: none; }

@media (forced-colors: active) {
  .al-date-picker__dialog { border-color: CanvasText; }
  .al-date-picker__grid td[aria-selected="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .al-date-picker__grid td[aria-current="date"] { outline: 1px solid CanvasText; outline-offset: -3px; }
}

}

@layer al.components {
/* css/components/dialog.css */
/* Dialog: a native <dialog> opened with showModal(), for a decision that
   needs the person's attention now. Title, body, then actions on the
   trailing side: the primary last, Cancel before it. Escape and Cancel
   close it; focus returns to what opened it.
   Confirmation is only for what can't be undone (and says why); anything
   reversible is done at once, with Undo in a toast instead. */
.al-dialog {
  inline-size: min(var(--al-size-dialog-sm), calc(100vw - 2 * var(--al-space-4)));
  max-block-size: min(85dvh, 48rem);
  padding: 0;
  border: var(--al-border-hairline) solid var(--al-color-line);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface);
  color: var(--al-color-text);
}
.al-dialog--md { inline-size: min(var(--al-size-dialog-md), calc(100vw - 2 * var(--al-space-4))); }
.al-dialog::backdrop { background: var(--al-color-backdrop); }
.al-dialog[open] { animation: al-dialog-in var(--al-duration-base) var(--al-ease-standard); }
.al-dialog > form, .al-dialog__inner { display: flex; flex-direction: column; gap: var(--al-space-4); padding: var(--al-space-6); }
.al-dialog__title { font-size: var(--al-text-xl); }
.al-dialog__body { display: flex; flex-direction: column; gap: var(--al-space-4); }
.al-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--al-space-3); padding-block-start: var(--al-space-2); }
@keyframes al-dialog-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.99); } }
@media (forced-colors: active) { .al-dialog { border-color: CanvasText; } }

/* On small screens a dialog is a sheet (from Apple's HIG): anchored to the
   bottom, full width, within thumb's reach. Its actions stack full-width,
   with the way out (Cancel, first in the markup) at the bottom, nearest
   the thumb, as iOS does: a destructive action is never the easy tap. */
@media (max-width: 40rem) {
  .al-dialog, .al-dialog--md {
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block: auto 0;
    margin-inline: 0;
    max-block-size: 90dvh;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-inline: 0;
    border-block-end: 0;
  }
  .al-dialog__actions { flex-direction: column-reverse; align-items: stretch; }
  .al-dialog[open] { animation-name: al-sheet-in; }
}
@keyframes al-sheet-in { from { transform: translateY(1.5rem); opacity: 0; } }

/* Leaving with unsaved changes (from Apple's HIG: confirm before closing a
   modal view that would lose what people made): not a second dialog, but
   a bar inside this one, offering to keep editing or discard.
   js/dialog.js shows it when Escape or Cancel would lose changes. */
.al-dialog__discard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-space-2) var(--al-space-3);
  padding: var(--al-space-3) var(--al-space-4);
  border-inline-start: 3px solid var(--al-color-warning);
  background: var(--al-color-warning-wash);
  font-size: var(--al-text-sm);
}
.al-dialog__discard > p { margin: 0; margin-inline-end: auto; font-weight: var(--al-weight-medium); }

}

@layer al.components {
/* css/components/disclosure.css */
/* Disclosure: a native <details>, for what's secondary. Its summary can
   show what's chosen inside ("Plan 2", "5%, salary sacrifice"), so it
   doesn't need opening to be checked. The chevron points the way text
   reads, and down when open. */
.al-disclosure { border-block-start: var(--al-border-hairline) solid var(--al-color-line); }
.al-disclosure > summary {
  display: flex;
  align-items: baseline;
  gap: var(--al-space-2);
  min-block-size: var(--al-size-target-min);
  padding-block: var(--al-space-2);
  list-style: none;
  cursor: pointer;
  font-weight: var(--al-weight-medium);
}
.al-disclosure > summary::-webkit-details-marker { display: none; }
.al-disclosure > summary::before {
  content: "";
  flex: none;
  inline-size: 0.45em;
  block-size: 0.45em;
  margin-inline-end: 0.15em;
  border-block-end: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: translateY(-0.1em) rotate(-45deg);
  transition: transform var(--al-duration-fast) var(--al-ease-standard);
}
.al-disclosure > summary:dir(rtl)::before { transform: translateY(-0.1em) rotate(45deg); }
.al-disclosure[open] > summary::before { transform: translateY(-0.25em) rotate(45deg); }
.al-disclosure[open] > summary:dir(rtl)::before { transform: translateY(-0.25em) rotate(-45deg); }
.al-disclosure__value {
  margin-inline-start: auto;
  color: var(--al-color-text-muted);
  font-weight: var(--al-weight-regular);
  font-size: var(--al-text-sm);
  text-align: end;
}
.al-disclosure__body { padding-block: var(--al-space-2) var(--al-space-4); display: flex; flex-direction: column; gap: var(--al-space-3); }
.al-disclosure:hover > summary { color: var(--al-color-accent); }
/* A group (questions and answers): a hairline under the last one too. */
.al-disclosure-group > .al-disclosure:last-child { border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
.al-disclosure:hover > summary .al-disclosure__value { color: var(--al-color-text-muted); }

}

@layer al.components {
/* css/components/empty-state.css */
/* Empty state: why there's nothing here, and the next action to take. Never
   a dead end. */
.al-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--al-space-3);
  padding: var(--al-space-8) var(--al-space-5);
  border: var(--al-border-hairline) dashed var(--al-color-line-strong);
  border-radius: var(--al-radius-sm);
}
.al-empty__title { font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); letter-spacing: var(--al-tracking-none); }
.al-empty__text { color: var(--al-color-text-muted); max-inline-size: var(--al-size-measure); }

}

@layer al.components {
/* css/components/error-summary.css */
/* Error summary (from GOV.UK): when a form is submitted with errors, a box
   at the top of the main content lists every error, in the order of the
   fields, each a link that moves focus to its field. It takes focus when it
   appears, and the page's title gains "Error: " so screen readers say so at
   once. Messages are worded exactly as the ones beside the fields. Shown
   even for one error. js/validate.js does the wiring. */
.al-error-summary {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
  padding: var(--al-space-4) var(--al-space-5);
  border: var(--al-border-focus) solid var(--al-color-danger);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface);
}
.al-error-summary:focus { outline: var(--al-border-focus) solid var(--al-color-focus); outline-offset: var(--al-border-focus-offset); }
.al-error-summary__title { display: flex; align-items: center; gap: var(--al-space-2); font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); color: var(--al-color-text); letter-spacing: var(--al-tracking-none); }
.al-error-summary__title > .al-icon { color: var(--al-color-danger); }
.al-error-summary__list { margin: 0; padding-inline-start: var(--al-space-5); display: flex; flex-direction: column; gap: var(--al-space-1); }
.al-error-summary__list a { color: var(--al-color-danger); font-weight: var(--al-weight-medium); text-underline-offset: 0.2em; }
.al-error-summary__list a:hover { text-decoration-thickness: 2px; }
@media (forced-colors: active) { .al-error-summary { border-color: Mark; } }

}

@layer al.components {
/* css/components/field.css */
/* Field: a label, the control, a hint, and an error, in that order. The
   label is always visible (a placeholder is an example, never the label);
   optional fields say so, rather than marking required ones (GOV.UK). The
   error says what's wrong and how to fix it, and is tied to the control
   with aria-describedby; the control gets aria-invalid. */
.al-field { display: flex; flex-direction: column; gap: var(--al-space-1-5); min-inline-size: 0; }

.al-label { font-size: var(--al-text-sm); font-weight: var(--al-weight-medium); color: var(--al-color-text); }
.al-label__optional { font-weight: var(--al-weight-regular); color: var(--al-color-text-muted); }
.al-hint { font-size: var(--al-text-sm); color: var(--al-color-text-muted); line-height: var(--al-leading-ui); }
.al-error {
  display: flex; gap: var(--al-space-1-5); align-items: flex-start;
  font-size: var(--al-text-sm); font-weight: var(--al-weight-medium); color: var(--al-color-danger);
}

.al-input, .al-select, .al-textarea {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--al-field-height);
  padding-block: var(--al-space-2);
  padding-inline: var(--al-field-padding-inline);
  border: var(--al-border-hairline) solid var(--al-color-control);
  border-radius: var(--al-field-radius);
  background: var(--al-color-surface);
  color: var(--al-color-text);
  font-size: var(--al-text-base);
  line-height: var(--al-leading-ui);
  transition: border-color var(--al-duration-fast) var(--al-ease-standard);
}
.al-textarea { resize: vertical; min-block-size: 6rem; }
.al-input::placeholder, .al-textarea::placeholder { color: var(--al-color-text-muted); opacity: 1; }
.al-input:hover, .al-select:hover, .al-textarea:hover { border-color: var(--al-color-text); }
/* Focus: an outline and the border in the accent, however the field was
   reached (a field being typed into always shows it; date inputs focus
   their parts, which :focus-visible misses). */
.al-input:focus, .al-input:focus-within, .al-select:focus, .al-textarea:focus {
  border-color: var(--al-color-focus);
  outline: var(--al-border-focus) solid var(--al-color-focus);
  outline-offset: 0;
}
.al-input[aria-invalid="true"], .al-select[aria-invalid="true"], .al-textarea[aria-invalid="true"] {
  border-color: var(--al-color-danger);
  border-inline-start-width: 3px;
}
.al-input:disabled, .al-select:disabled, .al-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.al-input[readonly] { background: var(--al-color-surface-sunk); }

/* Numbers and money: right-aligned in their own direction, tabular. */
.al-input--number { font-variant-numeric: tabular-nums; }
.al-input[type="date"], .al-input--number { direction: ltr; text-align: start; }
:lang(ar) .al-input--number, :lang(ar) .al-input[type="date"] { text-align: end; }

/* Affix: a currency, unit or period beside the value ("£", "a year"). */
.al-affix { display: flex; align-items: stretch; min-inline-size: 0; }
.al-affix > .al-input { border-radius: 0; flex: 1; }
.al-affix > :first-child { border-start-start-radius: var(--al-field-radius); border-end-start-radius: var(--al-field-radius); }
.al-affix > :last-child { border-start-end-radius: var(--al-field-radius); border-end-end-radius: var(--al-field-radius); }
.al-affix__text {
  display: inline-flex; align-items: center;
  padding-inline: var(--al-space-3);
  border: var(--al-border-hairline) solid var(--al-color-control);
  background: var(--al-color-surface-sunk);
  color: var(--al-color-text-muted);
  font-size: var(--al-text-sm);
  white-space: nowrap;
}
.al-affix > .al-affix__text:first-child { border-inline-end: 0; }
.al-affix > .al-affix__text:last-child { border-inline-start: 0; }
.al-affix > .al-select { inline-size: auto; flex: none; border-radius: 0; }

/* A group of fields under one question. */
.al-fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--al-space-3); }
.al-fieldset > legend { padding: 0; margin-block-end: var(--al-space-1); font-size: var(--al-text-sm); font-weight: var(--al-weight-medium); }

/* Changed but not saved: a mark on the field, in words as well as colour. */
.al-field[data-changed] .al-input, .al-field[data-changed] .al-select, .al-field[data-changed] .al-textarea {
  border-inline-start: 3px solid var(--al-color-warning);
}
/* Invalid wins over changed: the error is what needs doing. */
.al-field[data-changed] :is(.al-input, .al-select, .al-textarea)[aria-invalid="true"] { border-inline-start-color: var(--al-color-danger); }
/* On touch screens, 16px at least: iOS zooms the page into smaller fields. */
@media (pointer: coarse) {
  .al-input, .al-select, .al-textarea { font-size: max(1rem, var(--al-text-base)); }
}
.al-field__changed { font-size: var(--al-text-xs); color: var(--al-color-warning); font-weight: var(--al-weight-medium); }

@media (pointer: coarse) { .al-input, .al-select { min-block-size: var(--al-size-target-touch); } }
@media (forced-colors: active) {
  .al-input, .al-select, .al-textarea, .al-affix__text { border-color: FieldText; }
  .al-input[aria-invalid="true"], .al-select[aria-invalid="true"], .al-textarea[aria-invalid="true"] { border-color: Mark; }
}

}

@layer al.components {
/* css/components/footer.css */
/* Footer: who made it, where to go next, the legal line. Quiet, and the same
   on every page. */
.al-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--al-space-4) var(--al-space-8);
  padding-block: var(--al-space-8);
  border-block-start: var(--al-border-hairline) solid var(--al-color-line);
  color: var(--al-color-text-muted);
  font-size: var(--al-text-sm);
}
.al-footer__links { display: flex; flex-wrap: wrap; gap: var(--al-space-2) var(--al-space-5); list-style: none; margin: 0; padding: 0; }
.al-footer__links a { color: inherit; text-decoration: none; }
.al-footer__links a:hover { color: var(--al-color-accent); text-decoration: underline; }
.al-footer__legal { flex-basis: 100%; font-size: var(--al-text-xs); }

}

@layer al.components {
/* css/components/icon.css */
/* Icon: line icons on a 24-unit grid, 1.5 stroke, square ends, drawn in
   the text's colour. Decorative icons are aria-hidden; an icon alone in a
   control gets its name from the control (aria-label). */
.al-icon {
  inline-size: var(--al-size-icon);
  block-size: var(--al-size-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vertical-align: -0.2em;
  flex: none;
}
.al-icon--sm { inline-size: 1rem; block-size: 1rem; }
.al-icon--lg { inline-size: 1.5rem; block-size: 1.5rem; }

}

@layer al.components {
/* css/components/kbd.css */
/* Keyboard keys, and the list of shortcuts (opened with "?"). Shortcuts are
   single keys only when focus isn't in a text field, and can be turned off
   (WCAG 2.1.4). */
.al-kbd {
  display: inline-block;
  min-inline-size: 1.5em;
  padding: 0.05em 0.4em;
  border: var(--al-border-hairline) solid var(--al-color-line-strong);
  border-block-end-width: 2px;
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface);
  font-family: var(--al-font-mono);
  font-size: var(--al-text-xs);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
.al-shortcuts { display: grid; grid-template-columns: auto 1fr; gap: var(--al-space-2) var(--al-space-5); align-items: baseline; margin: 0; }
.al-shortcuts dt { display: flex; gap: var(--al-space-1); }
.al-shortcuts dd { margin: 0; }

}

@layer al.components {
/* css/components/language.css */
/* Language link: the page in the other language, named in that language
   ("العربية", "English") and marked with its lang and hreflang. Each
   language has its own address. Never a flag: languages aren't countries. */
.al-language {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1-5);
  min-block-size: var(--al-size-target-min);
  padding-inline: var(--al-space-2);
  color: var(--al-color-text-muted);
  text-decoration: none;
}
.al-language:hover { color: var(--al-color-text); }

}

@layer al.components {
/* css/components/link.css */
/* Text link: a link that stands on its own ("See how we build"), beside a
   primary button or after a paragraph. Underlined in the accent; thicker on
   hover. --arrow goes on to a next step: the arrow points along the reading
   direction and moves a little that way on hover. An external link opens a
   new tab, with its icon, and says so to screen readers. --muted is for
   footers and legal lines. Links inside running text need none of this. */
.al-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--al-color-text);
  text-decoration-color: var(--al-color-accent);
}
.al-link:hover { color: var(--al-color-accent); text-decoration-thickness: 2px; }
.al-link--muted { color: var(--al-color-text-muted); text-decoration-color: currentColor; }
.al-link .al-icon { inline-size: 1em; block-size: 1em; transition: translate var(--al-duration-fast) var(--al-ease-standard); }
.al-link--arrow:hover .al-icon { translate: 3px 0; }
.al-link--arrow:hover .al-icon:dir(rtl) { translate: -3px 0; }
@media (prefers-reduced-motion: reduce) { .al-link--arrow:hover .al-icon, .al-link--arrow:hover .al-icon:dir(rtl) { translate: none; } }

}

@layer al.components {
/* css/components/logos.css */
/* Logo wall: who uses it, as a list of their marks in one colour
   (currentColor for SVG; images in grey), as many to a row as fit. Still:
   never a scrolling marquee. A wordmark in type stands in for a logo file. */
.al-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--al-space-6) var(--al-space-8);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--al-color-text-muted);
}
.al-logos > li { display: flex; align-items: center; justify-content: center; min-block-size: 3rem; }
.al-logos :is(img, svg:not(.al-icon)) { max-inline-size: 100%; max-block-size: 2rem; inline-size: auto; }
.al-logos img { filter: grayscale(1); }
.al-logos__wordmark { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--al-font-display); font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); letter-spacing: var(--al-tracking-tight); white-space: nowrap; }

}

@layer al.components {
/* css/components/menu.css */
/* Menu: actions on one thing, behind a button ("More", "Move to…"), in a
   native popover. Arrow keys move between items, Escape closes and returns
   focus (js/menu.js, the ARIA APG menu button pattern). Destructive items
   last, after a separator. Positioned next to its button. */
.al-menu {
  margin: 0;
  min-inline-size: 12rem;
  max-inline-size: 20rem;
  padding: var(--al-space-1);
  border: var(--al-border-hairline) solid var(--al-color-line);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface);
  color: var(--al-color-text);
  inset: auto;
}
.al-menu__item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--al-space-2);
  inline-size: 100%;
  min-block-size: var(--al-size-control-sm);
  padding-inline: var(--al-space-3);
  border-radius: var(--al-radius-sm);
  cursor: pointer;
  text-align: start;
}
.al-menu__item:hover, .al-menu__item:focus-visible { background: var(--al-color-surface-sunk); outline: none; }
.al-menu__item:focus-visible { box-shadow: inset 0 0 0 var(--al-border-focus) var(--al-color-focus); }
.al-menu__item[aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--al-color-accent); }
.al-menu__item--danger { color: var(--al-color-danger); }
/* With a line about what it does, under its name. */
.al-menu__item--described { flex-direction: column; align-items: flex-start; gap: 0; padding-block: var(--al-space-2); }
.al-menu__description { font-size: var(--al-text-xs); color: var(--al-color-text-muted); }
.al-menu__separator { block-size: 1px; margin-block: var(--al-space-1); background: var(--al-color-line); border: 0; }
.al-menu__label { padding: var(--al-space-1-5) var(--al-space-3) var(--al-space-1); font-size: var(--al-text-xs); color: var(--al-color-text-muted); }
@media (forced-colors: active) {
  .al-menu { border-color: CanvasText; }
  .al-menu__item:focus-visible { outline: 2px solid Highlight; box-shadow: none; }
}

}

@layer al.components {
/* css/components/nav.css */
/* Tabs and section navigation. As links between pages, mark the current one
   with aria-current="page"; as in-page tabs, role="tablist" with
   aria-selected and arrow-key movement (js/tabs.js, the ARIA APG pattern).
   They look the same: the chosen one is underlined in the accent. */
.al-tabs { display: flex; gap: var(--al-space-1); border-block-end: var(--al-border-hairline) solid var(--al-color-line); overflow-x: auto; scrollbar-width: thin; }
.al-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1-5);
  min-block-size: var(--al-size-control-md);
  padding-inline: var(--al-space-3);
  border: 0;
  background: none;
  color: var(--al-color-text-muted);
  font-weight: var(--al-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.al-tab:hover { color: var(--al-color-text); }
.al-tab[aria-current="page"], .al-tab[aria-selected="true"] { color: var(--al-color-text); }
.al-tab[aria-current="page"]::after, .al-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--al-space-2);
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--al-color-accent);
}
.al-tab__count { font-size: var(--al-text-xs); color: var(--al-color-text-muted); font-variant-numeric: tabular-nums; }
.al-tabpanel { padding-block-start: var(--al-space-5); }

/* Feature tabs: a column of tabs, each a name and a line about it, beside
   the panel the chosen one shows (a sample, a picture of it working). Up
   and down arrows move (aria-orientation="vertical"). Under md the column
   sits above the panel. */
.al-feature-tabs { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); gap: var(--al-space-8); align-items: start; }
.al-feature-tabs__list { display: flex; flex-direction: column; gap: var(--al-space-1); }
.al-feature-tab {
  display: grid;
  gap: var(--al-space-1);
  padding: var(--al-space-3) var(--al-space-4);
  border: 0;
  border-inline-start: 2px solid var(--al-color-line);
  background: none;
  color: var(--al-color-text-muted);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.al-feature-tab__name { font-weight: var(--al-weight-medium); }
.al-feature-tab__about { font-size: var(--al-text-sm); }
.al-feature-tab:hover { color: var(--al-color-text); }
.al-feature-tab[aria-selected="true"] { border-inline-start-color: var(--al-color-accent); background: var(--al-color-surface-sunk); }
.al-feature-tab[aria-selected="true"] .al-feature-tab__name { color: var(--al-color-text); }
.al-feature-tab:focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus); outline-offset: -2px; }
.al-feature-tabs__panel { min-inline-size: 0; }
@media (max-width: 52rem) { .al-feature-tabs { grid-template-columns: minmax(0, 1fr); gap: var(--al-space-5); } }

@media (forced-colors: active) {
  .al-tab[aria-current="page"]::after, .al-tab[aria-selected="true"]::after { background: Highlight; forced-color-adjust: none; }
  .al-feature-tab[aria-selected="true"] { border-inline-start-color: Highlight; }
}

}

@layer al.components {
/* css/components/notice.css */
/* Notice: a message in the page. Four kinds, each with an icon and a title
   word, so the kind isn't told by colour alone: info (neutral), success
   (done), warning (needs attention), danger (an error; only for errors).
   role="status" for news, role="alert" only for errors that block.
   Side-effect note: what else an action will change, said before it's
   taken ("This also removes it from 2 offers"). */
.al-notice {
  --_status: var(--al-color-info);
  --_wash: var(--al-color-info-wash);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-1) var(--al-space-3);
  align-items: start;
  padding: var(--al-space-3) var(--al-space-4);
  border-inline-start: 3px solid var(--_status);
  border-radius: var(--al-radius-sm);
  background: var(--_wash);
}
.al-notice > .al-icon { color: var(--_status); margin-block-start: 0.15em; }
.al-notice__body { display: flex; flex-direction: column; gap: var(--al-space-1); min-inline-size: 0; }
.al-notice__title { font-weight: var(--al-weight-semibold); }
.al-notice__actions { display: flex; flex-wrap: wrap; gap: var(--al-space-2) var(--al-space-4); margin-block-start: var(--al-space-1); }
/* Dismiss: an icon button at the end of the first line. Notices never hide by themselves. */
.al-notice:has(> .al-notice__dismiss) { grid-template-columns: auto minmax(0, 1fr) auto; }
.al-notice__dismiss { margin-block: calc(-1 * var(--al-space-2)); margin-inline-end: calc(-1 * var(--al-space-2)); }
.al-notice--success { --_status: var(--al-color-success); --_wash: var(--al-color-success-wash); }
.al-notice--warning { --_status: var(--al-color-warning); --_wash: var(--al-color-warning-wash); }
.al-notice--danger { --_status: var(--al-color-danger); --_wash: var(--al-color-danger-wash); }

.al-side-effect {
  display: flex;
  gap: var(--al-space-2);
  align-items: flex-start;
  padding-inline-start: var(--al-space-3);
  border-inline-start: 2px solid var(--al-color-line-strong);
  color: var(--al-color-text-muted);
  font-size: var(--al-text-sm);
}
.al-side-effect strong { color: var(--al-color-text); font-weight: var(--al-weight-medium); }

@media (forced-colors: active) { .al-notice { border: 1px solid CanvasText; border-inline-start-width: 3px; } }

}

@layer al.components {
/* css/components/page-head.css */
/* Page head: the page's title, then (on the trailing side) what applies to
   the whole page: its settings, views and primary action. */
.al-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-space-3) var(--al-space-4);
  padding-block-end: var(--al-space-4);
  margin-block-end: var(--al-space-6);
  border-block-end: var(--al-border-hairline) solid var(--al-color-line);
}
.al-page-head > h1 { font-size: var(--al-text-3xl); }
.al-page-head__end { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-3); }
.al-page-head__lede { flex-basis: 100%; color: var(--al-color-text-muted); max-inline-size: var(--al-size-measure); }
@media (max-width: 52rem) { .al-page-head__end { margin-inline-start: 0; inline-size: 100%; } }

}

@layer al.components {
/* css/components/pattern.css */
/* Pattern: the tessellation of the mark's tile, as background texture only
   (js/pattern.js draws it as SVG). It fades out behind text: from the
   trailing side towards the start, mirrored in right-to-left. Never behind
   body copy at full strength; aria-hidden; still under reduced motion. */
.al-pattern { position: relative; isolation: isolate; overflow: hidden; }
.al-pattern__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--al-color-pattern-line);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0 40%, black 80%);
  mask-image: linear-gradient(to right, transparent 0 40%, black 80%);
}
.al-pattern__art:dir(rtl) {
  -webkit-mask-image: linear-gradient(to left, transparent 0 40%, black 80%);
  mask-image: linear-gradient(to left, transparent 0 40%, black 80%);
}
.al-pattern__art svg { inline-size: 100%; block-size: 100%; display: block; }
.al-pattern--full .al-pattern__art { -webkit-mask-image: none; mask-image: none; }
/* Quiet: a low-contrast field for a small area with nothing on it (an empty
   state, a card). No mask, at any width. */
.al-pattern--quiet .al-pattern__art, .al-pattern--quiet .al-pattern__art:dir(rtl) { color: var(--al-color-pattern-quiet); -webkit-mask-image: none; mask-image: none; }
@media (max-width: 52rem) {
  .al-pattern__art, .al-pattern__art:dir(rtl) {
    -webkit-mask-image: linear-gradient(to bottom, black 0 30%, transparent 70%);
    mask-image: linear-gradient(to bottom, black 0 30%, transparent 70%);
  }
}
@media (forced-colors: active) { .al-pattern__art { display: none; } }

/* Hero (js/pattern.js drawHero): the tessellation across a hero, as on
   arabesquelabs.com. One quiet line everywhere, quiet enough for the
   heading and lede to sit on; one octagon, the focal tile, in the accent,
   with its caption. Drawn in once on load if asked: the scaffolding, the
   strands from the focal tile outwards, then the focal tile and caption. */
/* Behind the heading and lede, at the start, the strands fall to a trace
   (a fifth of their strength), so the text reads clearly; towards the
   focal tile they come back in full. Under md, where the text takes the
   whole width, they're faint everywhere. */
.al-pattern--hero .al-pattern__art {
  color: inherit;
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.2) 0 40%, black 72%);
  mask-image: linear-gradient(to right, rgb(0 0 0 / 0.2) 0 40%, black 72%);
}
.al-pattern--hero .al-pattern__art:dir(rtl) {
  -webkit-mask-image: linear-gradient(to left, rgb(0 0 0 / 0.2) 0 40%, black 72%);
  mask-image: linear-gradient(to left, rgb(0 0 0 / 0.2) 0 40%, black 72%);
}
@media (max-width: 52rem) {
  .al-pattern--hero .al-pattern__art, .al-pattern--hero .al-pattern__art:dir(rtl) {
    -webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.35));
    mask-image: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.35));
  }
}
/* Drawn at its own size (a little taller than the section, so small changes in height don't need a redraw). */
.al-pattern--hero .al-pattern__art svg { inline-size: auto; block-size: auto; }
.al-pattern__scaffold { fill: none; stroke: var(--al-color-pattern-scaffold); stroke-width: var(--al-pattern-hero-stroke); opacity: 0; }
.al-pattern__strands { fill: none; stroke: var(--al-color-pattern-line); stroke-width: var(--al-pattern-hero-stroke); stroke-linejoin: miter; }
.al-pattern__focal-tile { fill: none; stroke: var(--al-color-pattern-focal); stroke-opacity: 0.45; stroke-width: var(--al-pattern-hero-stroke); }
.al-pattern__focal-star { fill: var(--al-color-pattern-focal-fill); stroke: var(--al-color-pattern-focal); stroke-width: var(--al-pattern-focal-stroke); stroke-linejoin: miter; }
.al-pattern__caption {
  margin: var(--al-space-12) 0 0;
  max-inline-size: 19rem;
  padding-block-start: var(--al-space-3);
  border-block-start: var(--al-border-hairline) solid var(--al-color-accent);
  font-size: var(--al-text-sm);
  line-height: var(--al-leading-prose);
  color: var(--al-color-text-muted);
}
.al-pattern__caption.is-placed { position: absolute; margin: 0; inline-size: 19rem; pointer-events: none; }
.al-pattern.is-drawing .al-pattern__strands path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: al-strand-draw 900ms var(--al-ease-standard) forwards; }
.al-pattern.is-drawing .al-pattern__scaffold { opacity: 1; animation: al-scaffold-fade 600ms var(--al-ease-standard) 1900ms forwards; }
.al-pattern.is-drawing :is(.al-pattern__focal, .al-pattern__caption) { opacity: 0; animation: al-focal-reveal 700ms var(--al-ease-standard) 1900ms forwards; }
@keyframes al-strand-draw { to { stroke-dashoffset: 0; } }
@keyframes al-scaffold-fade { to { opacity: 0; } }
@keyframes al-focal-reveal { to { opacity: 1; } }

}

@layer al.components {
/* css/components/phase-banner.css */
/* Phase banner (from GOV.UK): under the header, says the product (or a
   part of it) is new or changing, and asks for feedback. The badge names
   the phase (Alpha, Beta, Preview, Experimental); the sentence says what
   that means for the person. */
.al-phase-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-space-1) var(--al-space-3);
  padding-block: var(--al-space-2);
  border-block-end: var(--al-border-hairline) solid var(--al-color-line);
  font-size: var(--al-text-sm);
}
.al-phase-banner__text { color: var(--al-color-text-muted); }

/* Announcement: above everything, one line of news and its link, on the
   inverse ground, with a way to dismiss it that's remembered
   (js/announcement.js). One at a time, and never for anything urgent. */
.al-announcement {
  display: grid;
  grid-template-columns: var(--al-size-target-min) minmax(0, 1fr) var(--al-size-target-min);
  align-items: center;
  gap: var(--al-space-2);
  padding: var(--al-space-1) var(--al-space-2);
  background: var(--al-color-inverse);
  color: var(--al-color-on-inverse);
  font-size: var(--al-text-sm);
}
.al-announcement[hidden] { display: none; }
.al-announcement__text { grid-column: 2; margin: 0; text-align: center; }
.al-announcement a { color: inherit; text-decoration-color: currentColor; }
.al-announcement a:hover { color: inherit; text-decoration-thickness: 2px; }
.al-announcement :focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus-on-inverse); outline-offset: 2px; }
.al-announcement__dismiss { grid-column: 3; justify-self: end; color: inherit; }
.al-announcement__dismiss:hover { color: inherit; background: none; opacity: 0.8; }
@media (forced-colors: active) { .al-announcement { border-block-end: 1px solid CanvasText; } }

}

@layer al.components {
/* css/components/progress.css */
/* Loading, where it happens: a spinner in the control or region that's
   busy, a skeleton where content will appear, a bar for progress that can
   be measured. Busy regions get aria-busy="true". Without motion, the
   spinner is a still star and skeletons don't shimmer.
   The spinner is the mark's star, faint, with a bright segment going round
   its outline: the outline is a mask, the segment a turning conic gradient.
   A busy button and a saving save state use it too. */
@property --al-spin-from { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.al-spinner, .al-button[aria-busy="true"]::after, .al-save-state[data-state="saving"]::before {
  content: "";
  display: inline-block;
  inline-size: 1.1em;
  block-size: 1.1em;
  flex: none;
  vertical-align: -0.2em;
  background: conic-gradient(from var(--al-spin-from), currentColor 0 25%, color-mix(in oklch, currentColor 22%, transparent) 25% 100%);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 72 72'><path d='M64 32L48 38.63L54.63 54.63L38.63 48L32 64L25.37 48L9.37 54.63L16 38.63L0 32L16 25.37L9.37 9.37L25.37 16L32 0L38.63 16L54.63 9.37L48 25.37Z' fill='none' stroke='black' stroke-width='6' stroke-linejoin='miter'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 72 72'><path d='M64 32L48 38.63L54.63 54.63L38.63 48L32 64L25.37 48L9.37 54.63L16 38.63L0 32L16 25.37L9.37 9.37L25.37 16L32 0L38.63 16L54.63 9.37L48 25.37Z' fill='none' stroke='black' stroke-width='6' stroke-linejoin='miter'/></svg>") center / contain no-repeat;
  animation: al-trace 1.4s linear infinite;
  forced-color-adjust: none;
}
@keyframes al-trace { to { --al-spin-from: 360deg; } }
.al-skeleton {
  display: block;
  block-size: 1em;
  border-radius: var(--al-radius-sm);
  background: linear-gradient(90deg, var(--al-color-surface-sunk) 30%, color-mix(in oklch, var(--al-color-surface-sunk) 50%, var(--al-color-surface)) 50%, var(--al-color-surface-sunk) 70%);
  background-size: 300% 100%;
  animation: al-shimmer 1.4s ease-in-out infinite;
}
.al-progress {
  appearance: none;
  inline-size: 100%;
  block-size: 0.5rem;
  border: 0;
  border-radius: var(--al-radius-full);
  background: var(--al-color-surface-sunk);
  overflow: hidden;
}
.al-progress::-webkit-progress-bar { background: var(--al-color-surface-sunk); }
.al-progress::-webkit-progress-value { background: var(--al-color-accent); border-radius: var(--al-radius-full); }
.al-progress::-moz-progress-bar { background: var(--al-color-accent); }
@keyframes al-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .al-spinner, .al-button[aria-busy="true"]::after, .al-save-state[data-state="saving"]::before { animation: none; background: currentColor; opacity: 0.6; }
}
@media (forced-colors: active) { .al-progress { border: 1px solid CanvasText; } }

}

@layer al.components {
/* css/components/save-state.css */
/* Save state: whether what's been changed is kept. Unsaved → Saving… →
   Saved, or Couldn't save with Retry; always in words, beside what it's
   about, and in a polite live region (role="status").
   Stale: a figure or region that no longer matches its inputs (being worked
   out again, or failed): marked, not silently replaced. */
.al-save-state {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1-5);
  min-block-size: var(--al-size-target-min);
  font-size: var(--al-text-sm);
  color: var(--al-color-text-muted);
}
.al-save-state::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; flex: none; background: currentColor; }
.al-save-state[data-state="unsaved"] { color: var(--al-color-warning); }
/* Saving: the star spinner (css/components/progress.css). */
.al-save-state[data-state="saved"] { color: var(--al-color-success); }
.al-save-state[data-state="saved"]::before { background: none; inline-size: 0.35em; block-size: 0.7em; border-radius: 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-0.1em); }
.al-save-state[data-state="failed"] { color: var(--al-color-danger); }

/* Stale: muted, not faded, so the figure stays readable (4.5:1) while it's
   worked out again. */
.al-stale { position: relative; color: var(--al-color-text-muted); transition: color var(--al-duration-fast) var(--al-ease-standard); }
.al-stale-note {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1-5);
  font-size: var(--al-text-sm);
  color: var(--al-color-text-muted);
}
@media (prefers-reduced-motion: reduce) { .al-save-state[data-state="saving"]::before { border-inline-end-color: currentColor; border-style: dotted; } }

/* Rolled back: an optimistic change (shown at once, before the server
   agreed) that failed, put back where it was, saying what didn't happen,
   why, and offering Retry. It stays until the person acts or retries. */
.al-rolled-back {
  border-inline-start: var(--al-border-focus) solid var(--al-color-danger);
  background: var(--al-color-danger-wash);
  padding-inline-start: var(--al-space-3);
}
.al-rollback-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-space-1-5) var(--al-space-3);
  margin: 0;
  font-size: var(--al-text-sm);
  color: var(--al-color-danger);
}
.al-rollback-note > .al-icon { flex: none; }
@media (forced-colors: active) { .al-rolled-back { border-inline-start-color: Mark; } }

}

@layer al.components {
/* css/components/search.css */
/* Search field: an input with its icon and a Clear button once there's
   text. role="search" on its form; results update as people type, with
   the count announced politely. "/" focuses it (see kbd). */
.al-search { position: relative; display: flex; align-items: center; min-inline-size: 0; }
.al-search > .al-icon { position: absolute; inset-inline-start: var(--al-space-3); color: var(--al-color-text-muted); pointer-events: none; }
.al-search > .al-input { padding-inline-start: calc(var(--al-space-3) * 2 + var(--al-size-icon)); padding-inline-end: var(--al-size-control-sm); }
.al-search > .al-input::-webkit-search-cancel-button { display: none; }
.al-search__clear {
  all: unset;
  position: absolute;
  inset-inline-end: var(--al-space-1);
  display: inline-grid;
  place-items: center;
  inline-size: var(--al-size-control-sm);
  block-size: var(--al-size-control-sm);
  border-radius: var(--al-radius-sm);
  color: var(--al-color-text-muted);
  cursor: pointer;
}
.al-search__clear:hover { color: var(--al-color-text); }
.al-search__clear:focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus); }
.al-search > .al-input:placeholder-shown + .al-search__clear { display: none; }

}

@layer al.components {
/* css/components/segmented.css */
/* Segmented control: one of two to five short options, all visible. Made of
   radios (a choice that's part of a form) or buttons with aria-pressed (a
   view switch); either way, one is always on. */
.al-segmented {
  display: inline-flex;
  border: var(--al-border-hairline) solid var(--al-color-control);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-surface);
  padding: 0;
  margin: 0;
  min-inline-size: 0;
  align-self: flex-start;
  max-inline-size: 100%;
}
.al-segmented--fill { display: flex; align-self: stretch; }
.al-segmented--fill > * { flex: 1; }
.al-segmented > label, .al-segmented > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--al-size-control-sm);
  padding-inline: var(--al-space-3);
  border: 0;
  background: transparent;
  color: var(--al-color-text-muted);
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-medium);
  cursor: pointer;
  white-space: nowrap;
}
.al-segmented > * + * { border-inline-start: var(--al-border-hairline) solid var(--al-color-control); }
.al-segmented > label > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.al-segmented > label:hover, .al-segmented > button:hover { color: var(--al-color-text); background: var(--al-color-surface-sunk); }
.al-segmented > label:has(input:checked), .al-segmented > button[aria-pressed="true"] {
  background: var(--al-color-text);
  color: var(--al-color-bg);
}
.al-segmented > label:has(input:focus-visible) { outline: var(--al-border-focus) solid var(--al-color-focus); outline-offset: 2px; z-index: 1; }

@media (forced-colors: active) {
  .al-segmented { border-color: ButtonText; }
  .al-segmented > label:has(input:checked), .al-segmented > button[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}

}

@layer al.components {
/* css/components/sidebar.css */
/* Sidebar: the app's sections, in a column; collapsible to icons, with each
   name kept for screen readers and shown on hover. Under the md breakpoint
   it becomes a bar along the top, the current section's name and a menu
   button (js/sidebar.js); the sections and the foot drop below it, as the
   site header's menu does. */
.al-sidebar {
  position: sticky;
  inset-block-start: 0;
  block-size: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-6);
  padding: var(--al-space-5) var(--al-space-3);
  background: var(--al-color-surface-sunk);
  border-inline-end: var(--al-border-hairline) solid var(--al-color-line);
  overflow-y: auto;
}
.al-sidebar__nav { display: flex; flex-direction: column; gap: var(--al-space-0-5); }
.al-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  min-block-size: var(--al-size-control-sm);
  padding-inline: var(--al-space-2);
  border-inline-start: 2px solid transparent;
  border-radius: var(--al-radius-sm);
  color: var(--al-color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
/* A button among the links (Collapse) looks like them. */
button.al-sidebar__link { inline-size: 100%; border-block: 0; border-inline-end: 0; background: none; font: inherit; cursor: pointer; text-align: start; }
.al-sidebar__link:hover { color: var(--al-color-text); background: color-mix(in oklch, var(--al-color-surface) 60%, transparent); }
.al-sidebar__link[aria-current="page"] {
  color: var(--al-color-text);
  background: var(--al-color-surface);
  border-inline-start-color: var(--al-color-accent);
  font-weight: var(--al-weight-medium);
}
.al-sidebar__link[aria-current="page"] .al-icon { color: var(--al-color-accent); }
.al-sidebar__foot { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--al-space-1); padding-block-start: var(--al-space-3); border-block-start: var(--al-border-hairline) solid var(--al-color-line); }

/* Collapsed: icons only; names stay for screen readers, and as tooltips. */
[data-sidebar="collapsed"] .al-sidebar { padding-inline: var(--al-space-2); }
[data-sidebar="collapsed"] .al-sidebar__link { justify-content: center; padding-inline: 0; }
[data-sidebar="collapsed"] .al-sidebar__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The bar and its menu button show only under md; above it, the menu's
   wrapper steps aside, so the nav and the foot are the sidebar's own. */
.al-sidebar__bar { display: none; }
.al-sidebar__menu { display: contents; }
/* The menu button shows a cross while the menu is open. */
.al-sidebar__toggle[aria-expanded="true"] .al-sidebar__open, .al-sidebar__toggle:not([aria-expanded="true"]) .al-sidebar__close { display: none; }

@media (max-width: 52rem) {
  .al-sidebar { z-index: var(--al-z-sticky); block-size: auto; max-block-size: 100dvh; gap: 0; padding: 0 var(--al-space-3); border-inline-end: 0; border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
  .al-sidebar__bar { position: sticky; inset-block-start: 0; display: flex; align-items: center; gap: var(--al-space-3); min-block-size: 3.5rem; background: var(--al-color-surface-sunk); }
  .al-sidebar__here { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--al-weight-medium); }
  .al-sidebar__toggle { margin-inline-start: auto; }
  .al-sidebar__menu { display: flex; flex-direction: column; gap: var(--al-space-5); padding-block: var(--al-space-3) var(--al-space-5); border-block-start: var(--al-border-hairline) solid var(--al-color-line); }
  .al-sidebar:has(.al-sidebar__toggle:not([aria-expanded="true"])) .al-sidebar__menu { display: none; }
  /* In the menu, the links are rows to tap, names and all, collapsed or not. */
  .al-sidebar__link { min-block-size: var(--al-size-control-md); }
  [data-sidebar="collapsed"] .al-sidebar { padding-inline: var(--al-space-3); }
  [data-sidebar="collapsed"] .al-sidebar__link { justify-content: flex-start; padding-inline: var(--al-space-2); }
  [data-sidebar="collapsed"] .al-sidebar__label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
  .al-sidebar__collapse { display: none; }
}
@media (forced-colors: active) { .al-sidebar__link[aria-current="page"] { border-inline-start-color: Highlight; } }

}

@layer al.components {
/* css/components/site-header.css */
/* Site header: the website's top bar. The lockup, the sections, the
   language and theme controls; under the md breakpoint the sections fold
   into a menu (js/site-header.js), which drops below the bar. The language
   link and any other tools fold into it too, so the bar keeps only the
   lockup, the theme button and the menu button. */
/* It folds by its own width (a container query), so it works in a sidebar
   or a narrow preview as well as across a page. --sticky keeps it at the
   top while the page scrolls. */
.al-site-header { position: relative; container: al-site-header / inline-size; }
.al-site-header--sticky { position: sticky; inset-block-start: 0; z-index: var(--al-z-sticky); background: var(--al-color-bg); border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
.al-site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--al-space-6); min-block-size: 5rem; }
.al-site-header__lockup { min-inline-size: 0; color: var(--al-color-text); text-decoration: none; }
.al-site-header__end { display: flex; align-items: center; gap: var(--al-space-4) var(--al-space-8); }
.al-site-header__nav ul, .al-site-header__menu ul { list-style: none; margin: 0; padding: 0; }
.al-site-header__nav ul { display: flex; gap: var(--al-space-8); }
.al-site-header__nav a { color: var(--al-color-text-muted); text-decoration: none; transition: color var(--al-duration-fast) var(--al-ease-standard); }
.al-site-header__nav a:hover, .al-site-header__nav a[aria-current] { color: var(--al-color-text); }
/* The current page: underlined in the accent. */
.al-site-header__nav a[aria-current], .al-site-header__menu a[aria-current] { text-decoration: underline; text-decoration-color: var(--al-color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.al-site-header__tools { display: flex; align-items: center; gap: var(--al-space-2); }
.al-site-header__extras { display: flex; align-items: center; gap: var(--al-space-4); margin-inline-end: var(--al-space-2); }
.al-site-header__toggle { display: none; }
/* The page's one action (Sign up, Say hello): it stays in the bar at every width. */
.al-site-header__action { display: flex; }
/* The menu button shows a cross while the menu is open. */
.al-site-header__toggle[aria-expanded="true"] .al-site-header__open, .al-site-header__toggle:not([aria-expanded="true"]) .al-site-header__close { display: none; }
.al-site-header__menu { padding-block: var(--al-space-2) var(--al-space-6); border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
.al-site-header__menu li a { display: block; padding-block: var(--al-space-4); font-size: var(--al-text-lg); color: var(--al-color-text); text-decoration: none; border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
.al-site-header__menu li a:hover { color: var(--al-color-accent); }
/* Under the links: the language link and the other tools from the bar. */
.al-site-header__menu-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-3) var(--al-space-6); padding-block-start: var(--al-space-5); }
.al-site-header__menu[hidden] { display: none; }
@container al-site-header (max-width: 52rem) {
  .al-site-header__nav, .al-site-header__extras { display: none; }
  .al-site-header__toggle { display: inline-flex; }
  .al-site-header__bar { min-block-size: 4rem; }
}
@container al-site-header (min-width: 52.0625rem) { .al-site-header__menu { display: none; } }
/* On a phone, the lockup keeps the name only. */
@container al-site-header (max-width: 30rem) { .al-site-header__lockup .al-lockup__product { display: none; } }
/* With an action, narrower still: the mark alone, its name kept for screen readers. */
@container al-site-header (max-width: 28rem) {
  .al-site-header:has(.al-site-header__action) .al-site-header__lockup .al-wordmark { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* The theme toggle's half-filled disc turns over in dark. */
[data-theme-toggle] .al-icon { transition: rotate var(--al-duration-base) var(--al-ease-standard); }
:root[data-theme="dark"] [data-theme-toggle] .al-icon { rotate: 180deg; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-theme-toggle] .al-icon { rotate: 180deg; } }

}

@layer al.components {
/* css/components/steps.css */
/* Steps: a numbered sequence, such as the stages of how something is done
   ("Discover, Design, Build, Refine"). A rule above each, its number in the
   accent, a title and a short paragraph. Only for real sequences. */
.al-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--al-space-12) var(--al-space-8); }
.al-steps > li { border-block-start: var(--al-border-hairline) solid var(--al-color-line-strong); padding-block-start: var(--al-space-5); }
.al-steps__num { margin: 0; font-size: var(--al-text-sm); font-variant-numeric: tabular-nums; color: var(--al-color-accent); }
.al-steps__title { margin: var(--al-space-3) 0 0; font-family: var(--al-font-display); font-size: var(--al-text-xl); font-weight: var(--al-weight-medium); line-height: var(--al-leading-heading); }
.al-steps__body { margin: var(--al-space-4) 0 0; max-inline-size: 30ch; font-family: var(--al-font-serif); line-height: var(--al-leading-prose); color: var(--al-color-text-muted); }

}

@layer al.components {
/* css/components/summary-list.css */
/* Summary list (from GOV.UK): facts as key–value rows, each with its own
   action ("Change"), for checking answers before submitting and for any
   read view of a record. The action's hidden text names what it changes
   ("Change<span class=al-visually-hidden> name</span>"). A <dl>. */
.al-summary-list { margin: 0; display: flex; flex-direction: column; }
.al-summary-list__row {
  display: grid;
  grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr) auto;
  gap: var(--al-space-1) var(--al-space-5);
  align-items: baseline;
  padding-block: var(--al-space-3);
  border-block-end: var(--al-border-hairline) solid var(--al-color-line);
}
.al-summary-list__key { margin: 0; font-weight: var(--al-weight-medium); }
.al-summary-list__value { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.al-summary-list__value > * + * { margin-block-start: var(--al-space-1); }
.al-summary-list__actions { margin: 0; display: flex; gap: var(--al-space-3); justify-content: flex-end; }
.al-summary-list__row--no-actions { grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr); }
@media (max-width: 40rem) {
  .al-summary-list__row, .al-summary-list__row--no-actions { grid-template-columns: minmax(0, 1fr) auto; }
  .al-summary-list__key { grid-column: 1 / -1; }
}

}

@layer al.components {
/* css/components/table.css */
/* Table: for comparing values. Numbers line up (tabular, end-aligned), the
   total row stands out, aside rows recede. A wide table scrolls inside its
   own region, which is focusable and named so the keyboard can scroll it. */
.al-table-wrap { overflow-x: auto; max-inline-size: 100%; }
.al-table-wrap:focus-visible { outline-offset: 2px; }
.al-table { inline-size: 100%; font-size: var(--al-text-base); }
.al-table caption { text-align: start; font-weight: var(--al-weight-medium); padding-block-end: var(--al-space-2); }
.al-table th, .al-table td {
  padding: var(--al-space-2) var(--al-space-3);
  border-block-end: var(--al-border-hairline) solid var(--al-color-line);
  text-align: start;
  vertical-align: baseline;
}
.al-table thead th {
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-medium);
  color: var(--al-color-text-muted);
  border-block-end-color: var(--al-color-line-strong);
  white-space: nowrap;
}
.al-table tbody th { font-weight: var(--al-weight-regular); }
.al-table .al-table__num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-table .al-table__row--sub > * { font-weight: var(--al-weight-medium); }
.al-table .al-table__row--total > * { font-weight: var(--al-weight-semibold); background: var(--al-color-accent-wash); border-block-start: var(--al-border-hairline) solid var(--al-color-line-strong); }
.al-table .al-table__row--aside > * { color: var(--al-color-text-muted); font-size: var(--al-text-sm); }
.al-table--interactive tbody tr:hover > * { background: var(--al-color-surface-sunk); }
.al-table tbody tr[aria-selected="true"] > * { background: var(--al-color-accent-wash); }
.al-table--compact th, .al-table--compact td { padding-block: var(--al-space-1-5); }

/* A sortable column's header is a button; aria-sort on the th says how. */
.al-table th > button { all: unset; display: inline-flex; gap: var(--al-space-1); align-items: center; cursor: pointer; min-block-size: var(--al-size-target-min); }
.al-table th > button:focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus); outline-offset: 2px; }
.al-table th:is([aria-sort="ascending"], [aria-sort="descending"]) > button::after { content: ""; border: 0.3em solid transparent; border-block-start-color: currentColor; margin-block-start: 0.3em; }
.al-table th[aria-sort="ascending"] > button::after { border-block-start-color: transparent; border-block-end-color: currentColor; margin-block: -0.3em 0; }

@media (forced-colors: active) { .al-table .al-table__row--total > * { border-block-start-color: CanvasText; } }

}

@layer al.components {
/* css/components/task-list.css */
/* Task list (from GOV.UK): the parts of a longer job (set-up, onboarding,
   an application), each with its status in words, so people can do them
   in any order and see what's left. A task that can't start yet says
   why, and isn't a link. */
.al-task-list { margin: 0; padding: 0; list-style: none; border-block-start: var(--al-border-hairline) solid var(--al-color-line); }
.al-task-list__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--al-space-1) var(--al-space-4);
  align-items: center;
  padding-block: var(--al-space-3);
  border-block-end: var(--al-border-hairline) solid var(--al-color-line);
}
.al-task-list__name { font-weight: var(--al-weight-medium); }
.al-task-list__name a { color: var(--al-color-accent); text-underline-offset: 0.2em; }
/* The whole row is the link's target. */
.al-task-list__name a::after { content: ""; position: absolute; inset: 0; }
.al-task-list__item:has(a):hover { background: var(--al-color-surface-sunk); }
.al-task-list__hint { grid-column: 1; font-size: var(--al-text-sm); color: var(--al-color-text-muted); }
.al-task-list__status { grid-row: 1 / span 2; grid-column: 2; }

}

@layer al.components {
/* css/components/tint.css */
/* Tints: eight bright, pastel colours (teal, green, yellow, orange, pink,
   purple, blue, cyan), each a ground with an ink readable on it. They add
   colour where colour means identity or emphasis (a tag, a highlighted
   phrase, an avatar), never status: errors, warnings and success keep
   their own colours, icons and words. Choose with data-tint. */
[data-tint="teal"]   { --_tint-bg: var(--al-color-tint-teal-bg);   --_tint-ink: var(--al-color-tint-teal-ink); }
[data-tint="green"]  { --_tint-bg: var(--al-color-tint-green-bg);  --_tint-ink: var(--al-color-tint-green-ink); }
[data-tint="yellow"] { --_tint-bg: var(--al-color-tint-yellow-bg); --_tint-ink: var(--al-color-tint-yellow-ink); }
[data-tint="orange"] { --_tint-bg: var(--al-color-tint-orange-bg); --_tint-ink: var(--al-color-tint-orange-ink); }
[data-tint="pink"]   { --_tint-bg: var(--al-color-tint-pink-bg);   --_tint-ink: var(--al-color-tint-pink-ink); }
[data-tint="purple"] { --_tint-bg: var(--al-color-tint-purple-bg); --_tint-ink: var(--al-color-tint-purple-ink); }
[data-tint="blue"]   { --_tint-bg: var(--al-color-tint-blue-bg);   --_tint-ink: var(--al-color-tint-blue-ink); }
[data-tint="cyan"]   { --_tint-bg: var(--al-color-tint-cyan-bg);   --_tint-ink: var(--al-color-tint-cyan-ink); }

/* A highlighted phrase in running text: <mark class="al-highlight">. */
.al-highlight {
  padding-inline: 0.25em;
  border-radius: var(--al-radius-sm);
  background: var(--_tint-bg, var(--al-color-tint-yellow-bg));
  color: var(--_tint-ink, var(--al-color-tint-yellow-ink));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
a.al-highlight { text-decoration-color: currentColor; text-underline-offset: 0.2em; }

/* Tinted badges and tags. */
.al-badge[data-tint], .al-tag[data-tint] { background: var(--_tint-bg); color: var(--_tint-ink); border-color: transparent; }
.al-tag[data-tint]::before { background: currentColor; }

/* Avatar: initials on a tint, for a person or a workspace without a picture. */
.al-avatar {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  border-radius: var(--al-radius-full);
  background: var(--_tint-bg, var(--al-color-surface-sunk));
  color: var(--_tint-ink, var(--al-color-text));
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-semibold);
  line-height: 1;
}
.al-avatar--lg { inline-size: 3rem; block-size: 3rem; font-size: var(--al-text-lg); }

@media (forced-colors: active) {
  .al-highlight { forced-color-adjust: none; background: Mark; color: MarkText; }
  .al-avatar { border: 1px solid CanvasText; }
}

}

@layer al.components {
/* css/components/toast.css */
/* Toast: says what just happened, briefly, where it doesn't block; offers
   Undo when the change can be undone. Lives in one polite live region
   (js/toast.js). Stays 4s without an action, pausing while hovered or
   focused; with an action, until it's used or dismissed (WCAG 2.2.1).
   Never holds the only copy of an error. */
.al-toaster {
  position: fixed;
  inset-block-end: var(--al-space-5);
  inset-inline: var(--al-space-4);
  z-index: var(--al-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-space-2);
  pointer-events: none;
}
.al-toast {
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  max-inline-size: min(36rem, 100%);
  padding-block: var(--al-space-2);
  padding-inline: var(--al-space-4) var(--al-space-2);
  border-radius: var(--al-radius-md);
  background: var(--al-color-inverse);
  color: var(--al-color-on-inverse);
  --al-color-focus: var(--al-color-focus-on-inverse);
  font-size: var(--al-text-base);
  pointer-events: auto;
  animation: al-toast-in var(--al-duration-base) var(--al-ease-standard);
}
.al-toast:not(:has(.al-toast__action)) { padding-inline-end: var(--al-space-4); }
.al-toast__action {
  all: unset;
  min-block-size: var(--al-size-target-min);
  padding-inline: var(--al-space-2);
  border-radius: var(--al-radius-sm);
  font-weight: var(--al-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.al-toast__dismiss {
  all: unset;
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--al-size-target-min);
  min-block-size: var(--al-size-target-min);
  border-radius: var(--al-radius-sm);
  font-size: var(--al-text-lg);
  line-height: 1;
  cursor: pointer;
}
.al-toast__action:focus-visible,
.al-toast__dismiss:focus-visible { outline: var(--al-border-focus) solid currentColor; }
.al-toast[data-leaving] { opacity: 0; transition: opacity var(--al-duration-base) var(--al-ease-exit); }
@keyframes al-toast-in { from { opacity: 0; transform: translateY(0.5rem); } }
@media (forced-colors: active) { .al-toast { border: 1px solid CanvasText; } }

}

@layer al.components {
/* css/components/toc.css */
/* On this page: the page's sections, beside it, the one being read marked
   (js/toc.js). Sticky beside the content; above it, and not sticky, under md. */
.al-toc { position: sticky; inset-block-start: var(--al-space-6); font-size: var(--al-text-sm); }
.al-toc__title { margin: 0 0 var(--al-space-3); font-weight: var(--al-weight-medium); color: var(--al-color-text-muted); }
.al-toc ul { display: grid; margin: 0; padding: 0; list-style: none; }
.al-toc a { display: block; padding: var(--al-space-1) 0 var(--al-space-1) var(--al-space-3); border-inline-start: 2px solid var(--al-color-line); color: var(--al-color-text-muted); text-decoration: none; }
.al-toc a:hover { color: var(--al-color-text); }
.al-toc a[aria-current] { border-inline-start-color: var(--al-color-accent); color: var(--al-color-text); }
@media (max-width: 52rem) { .al-toc { position: static; } }
@media (forced-colors: active) { .al-toc a[aria-current] { border-inline-start-color: Highlight; } }

}

@layer al.components {
/* css/components/tooltip.css */
/* Tooltip: a short label for an icon or a mark, on hover and on focus, never
   holding anything essential. Escape hides it; it stays while the pointer
   is over it (WCAG 1.4.13). For anything longer, use a disclosure. */
.al-tooltip {
  position: fixed;
  z-index: var(--al-z-toast);
  max-inline-size: 18rem;
  margin: 0;
  padding: var(--al-space-1-5) var(--al-space-2);
  border: 0;
  border-radius: var(--al-radius-sm);
  background: var(--al-color-inverse);
  color: var(--al-color-on-inverse);
  font-size: var(--al-text-sm);
  line-height: var(--al-leading-ui);
  inset: auto;
}
.al-tooltip b { font-weight: var(--al-weight-semibold); }
@media (forced-colors: active) { .al-tooltip { border: 1px solid CanvasText; } }

}

@layer al.utilities {
/* css/utilities.css */
/* Utilities: few, and each does one thing. */

/* Read by screen readers, not shown. */
.al-visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* The first thing a keyboard reaches: "Skip to content". */
.al-skip-link {
  position: absolute; inset-block-start: var(--al-space-2); inset-inline-start: var(--al-space-2);
  z-index: var(--al-z-toast);
  padding: var(--al-space-2) var(--al-space-4);
  background: var(--al-color-inverse); color: var(--al-color-on-inverse);
  border-radius: var(--al-radius-sm);
  transform: translateY(-200%);
}
.al-skip-link:focus { transform: none; }

/* Bidi: a left-to-right fragment (a number, money, a code, an address)
   kept whole inside right-to-left text; and any fragment isolated from
   what's around it. In markup, <bdi> does the same. */
.al-ltr { direction: ltr; unicode-bidi: isolate; }
.al-isolate { unicode-bidi: isolate; }
/* Text whose direction follows its own first strong letter (user content). */
.al-auto-dir { unicode-bidi: plaintext; }

/* Mirrored in right-to-left: arrows, chevrons, undo, progress. */
.al-mirror:dir(rtl) { transform: scaleX(-1); }

.al-muted { color: var(--al-color-text-muted); }
.al-tabular { font-variant-numeric: tabular-nums; }
.al-nowrap { white-space: nowrap; }
.al-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-prose { font-family: var(--al-font-serif); font-size: var(--al-text-md); line-height: var(--al-leading-prose); max-inline-size: var(--al-size-measure); }
.al-prose > * + * { margin-block-start: 1em; }
.al-display { font-family: var(--al-font-display); font-size: var(--al-text-display); line-height: var(--al-leading-tight); letter-spacing: var(--al-tracking-tight); font-weight: var(--al-weight-regular); }
.al-lede { font-family: var(--al-font-serif); font-size: var(--al-text-lg); line-height: var(--al-leading-prose); color: var(--al-color-text-muted); max-inline-size: var(--al-size-measure); }

}
/* hunt's typefaces, and its one colour of its own. Everything else comes
   from Arabesque, the Arabesque Labs design system
   (vendor/arabesque/arabesque.css, served just before this file), by its
   --al-* names.
   Shared by the app (style.css) and the public pages (privacy, terms). */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/jost.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/newsreader.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-italic.woff2") format("woff2"); }
/* Arabic: the arabic subsets only, fetched only when a page has Arabic in it. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/amiri.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* The lattice, hunt's one ornament: the design system's pattern (its
   4.8.8 tile, dist/patterns/tile.svg, as a mask), in the system's quiet
   pattern colour at 70%, as faint as hunt's lattice has always been (ink
   at about 10% in light, white at 7% in dark). It's behind the sidebar's
   links, where the system's own textures don't go, hence hunt's own
   strength. Follows the theme with it. Everything else is the system's
   --al-* tokens, used directly. */
:root {
  --pattern: color-mix(in oklch, var(--al-color-pattern-quiet) 70%, transparent);
  --pattern-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='77.25' height='77.25' viewBox='0 0 77.25 77.25'%3E%3Cpath d='M8 -19.31L27.31 -27.31L19.31 -8M19.31 -8L38.63 0L19.31 8M19.31 8L27.31 27.31L8 19.31M8 19.31L0 38.63L-8 19.31M-8 19.31L-27.31 27.31L-19.31 8M-19.31 8L-38.63 0L-19.31 -8M-19.31 -8L-27.31 -27.31L-8 -19.31M-8 -19.31L0 -38.63L8 -19.31M85.25 -19.31L104.57 -27.31L96.57 -8M96.57 -8L115.88 0L96.57 8M96.57 8L104.57 27.31L85.25 19.31M85.25 19.31L77.25 38.63L69.25 19.31M69.25 19.31L49.94 27.31L57.94 8M57.94 8L38.63 0L57.94 -8M57.94 -8L49.94 -27.31L69.25 -19.31M69.25 -19.31L77.25 -38.63L85.25 -19.31M8 57.94L27.31 49.94L19.31 69.25M19.31 69.25L38.63 77.25L19.31 85.25M19.31 85.25L27.31 104.57L8 96.57M8 96.57L0 115.88L-8 96.57M-8 96.57L-27.31 104.57L-19.31 85.25M-19.31 85.25L-38.63 77.25L-19.31 69.25M-19.31 69.25L-27.31 49.94L-8 57.94M-8 57.94L0 38.63L8 57.94M85.25 57.94L104.57 49.94L96.57 69.25M96.57 69.25L115.88 77.25L96.57 85.25M96.57 85.25L104.57 104.57L85.25 96.57M85.25 96.57L77.25 115.88L69.25 96.57M69.25 96.57L49.94 104.57L57.94 85.25M57.94 85.25L38.63 77.25L57.94 69.25M57.94 69.25L49.94 49.94L69.25 57.94M69.25 57.94L77.25 38.63L85.25 57.94M38.63 32L49.94 27.31L45.25 38.63M45.25 38.63L49.94 49.94L38.63 45.25M38.63 45.25L27.31 49.94L32 38.63M32 38.63L27.31 27.31L38.63 32' fill='none' stroke='black' stroke-width='1.25'/%3E%3C/svg%3E") 0 0 / 77.25px 77.25px;
}
/* hunt — after the Arabesque Labs studio's look: warm paper, navy ink, one
   deep green accent; hairlines, near-square corners, no shadows. Jost for
   headings and the interface, Newsreader for reading. An eight-point star
   lattice (the design system's pattern) is the one ornament. */

/* The reset, type, links, focus, [hidden], reduced motion, forced colours
   and more contrast are the design system's base (arabesque.css). What
   follows is hunt's own. */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.2; font-weight: 400; }
h2, h3 { font-weight: 500; letter-spacing: 0; }
p { margin: 0 0 0.5rem; }
.muted { color: var(--al-color-text-muted); }
.small { font-size: 0.8125rem; }
/* Reading text, set in the serif. */
.prose, p.muted, .empty, .page-head + p, .al-dialog article > p.muted, .note textarea, .field.type-long-text textarea,
.preview-text, .clamp, .found .muted { font-family: var(--al-font-serif); }
p.muted, .empty { font-size: 1rem; line-height: 1.6; }

/* The ornament: the design system's pattern, faint (tokens.css). */
.lattice { position: relative; isolation: isolate; }
.lattice::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--pattern); -webkit-mask: var(--pattern-tile); mask: var(--pattern-tile);
}

/* layout: the design system's shell and sidebar (.al-shell, .al-sidebar),
   with sections, and settings at its foot. hunt adds its name at the top,
   counts and badges on links, the version, and the footer under the page. */
body.al-shell { grid-template-rows: 1fr auto; }
.al-shell > .sidebar { grid-row: 1 / span 2; }
/* The lattice behind it mustn't unstick it (.lattice is position: relative). */
.al-sidebar.lattice { position: sticky; }
/* Who makes hunt, under every page (footer.css draws it). */
.site-foot { grid-column: 2; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; color: var(--al-color-text); text-decoration: none; padding: 0 0.5rem; letter-spacing: 0; }
.brand svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--al-color-accent); }
.brand:hover { color: var(--al-color-text); }
/* A link's count (Inbox) or badge (Experimental), at its end. */
.al-sidebar__nav .al-sidebar__label { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-inline-size: 0; }
.sidebar .app-version { margin: 0; padding: 0 var(--al-space-2); font-size: var(--al-text-xs); color: var(--al-color-text-muted); font-variant-numeric: tabular-nums; }
/* Collapsed (wider screens; a phone has the bar along the top): the
   toggle's icon points the other way, and the logo stands alone. */
@media (min-width: 52.0625rem) {
  [data-sidebar="collapsed"] .al-sidebar__collapse .al-icon { scale: -1 1; }
  [data-sidebar="collapsed"] .brand { justify-content: center; padding: 0; }
  [data-sidebar="collapsed"] .sidebar .app-version { display: none; }
}

/* controls: text fields, selects and textareas are the design system's
   (.al-input, .al-select, .al-textarea, added by h()). These rules are for
   the rest: checkboxes, radios, file pickers, and hunt's own buttons. In
   :where(), so they weigh no more than the plain elements they once were. */
:where(input:not(.al-input, [type="checkbox"], [type="radio"]), select:not(.al-select), textarea:not(.al-textarea), button:not([class*="al-"], .al-segmented > button, .al-table th > .th-sort)) {
  font: inherit; color: var(--al-color-text); background: var(--al-color-surface);
  border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); padding: 0.45rem 0.6rem;
}
:where(input:not(.al-input, [type="checkbox"], [type="radio"])) { width: 100%; min-width: 0; border-color: var(--al-color-control); }
/* Fields fill their column, as hunt lays them out. */
.al-input, .al-select, .al-textarea { inline-size: 100%; min-inline-size: 0; }
/* A line's fields and selects at the field height, however large the text:
   the system's padding and 17px type would make them taller. */
input.al-input, select.al-select:not([multiple]) { block-size: var(--al-field-height); padding-block: 0; }
/* Checkboxes and radios are native, in the accent, as the system's choices (.al-choice). */
:where(input:is([type="checkbox"], [type="radio"])) { accent-color: var(--al-color-accent); }
.al-textarea { line-height: 1.55; }
/* Buttons are the design system's (.al-button, and those inside its
   components: a toast's, a tag's ×, a segment). These are hunt's own kinds
   of button, which aren't: steps, rows that open, column tools. */
:where(button:not([class*="al-"], .al-segmented > button, .al-table th > .th-sort)) { cursor: pointer; font-weight: 500; white-space: nowrap; background: transparent; border-color: var(--al-color-line-strong); }
:where(button:not([class*="al-"], .al-segmented > button, .al-table th > .th-sort)):hover { border-color: var(--al-color-text); }
:where(button:not([class*="al-"], .al-segmented > button, .al-table th > .th-sort)):disabled { opacity: 0.55; cursor: progress; }
.actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }

.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 30; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 2px);
  margin: 0; padding: 0.25rem; list-style: none; max-height: 16rem; overflow: auto;
  background: var(--al-color-surface); border: 1px solid var(--al-color-line-strong); border-radius: var(--al-radius-sm);
}
.combo-list li { padding: 0.4rem 0.55rem; border-radius: var(--al-radius-sm); cursor: pointer; display: flex; justify-content: space-between; gap: 0.5rem; }
.combo-list li small { color: var(--al-color-text-muted); }
.combo-list li.active, .combo-list li:hover { background: var(--al-color-accent-wash); }
.combo-list li.create { color: var(--al-color-accent); font-weight: 500; }

.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.85rem 1rem; }
.field .req { color: var(--al-color-accent); }
.field.type-long-text { grid-column: 1 / -1; }
/* Under each field: the system's save state, or its error. Quiet, and
   holding a line's room, so saving doesn't move the form. */
.field > .al-save-state { min-block-size: 1.25em; font-size: var(--al-text-xs); }
.field > .al-save-state:not([data-state])::before { content: none; }
.field > .al-error { font-size: var(--al-text-xs); }

/* page heads, as the studio sets its section titles */
.page { max-width: 76rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
/* Page heads, panels and the application's card are the design system's
   (.al-page-head, .al-panel, .al-card); hunt keeps their insides' layout. */
.page > .al-page-head { margin-block-end: 0; }
/* A section's page, as Cycles and Prep are: from the start of the space, no
   wider than reads well, its title and a line about it, then what's in it. */
.cycles-page, .prep-page, .list-page, .notes-page, .stats-page, .page.celebrate { max-width: 66rem; margin: 0; gap: var(--al-space-6); }
/* Cycles, Prep, Contacts, Files, Notes, Stats and Take-home pay have the
   whole width, as the board and the calendar do: room for more cycles,
   columns, notes, charts and figures side by side. Their lines of prose keep
   their own measure. */
.page:is(.cycles-page, .prep-page, .list-page, .notes-page, .stats-page, .take-home) { max-width: none; margin: 0; }
.page-head h1 { margin-inline-end: auto; }
.page-head .al-search { width: min(20rem, 100%); }
.page-head select { width: auto; max-width: min(14rem, 100%); }

/* the board: its head is the system's page head; under it, which cycle,
   the filters, the columns, and what's archived. */
.board { display: flex; flex-direction: column; gap: var(--al-space-5); }
.board > .al-page-head { margin: 0; }
.board-count { margin: 0; color: var(--al-color-text-muted); align-self: flex-end; padding-block-end: 0.4rem; }
.board-kbd { margin-inline-start: var(--al-space-1); padding: 0 0.35em; border: 1px solid currentColor; border-radius: var(--al-radius-sm); font-size: var(--al-text-xs); opacity: 0.8; background: none; color: inherit; box-shadow: none; }
.board-cycles { display: flex; flex-wrap: wrap; gap: var(--al-space-2) var(--al-space-3); align-items: center; }
.board-cycles .al-segmented > button { display: inline-flex; align-items: center; gap: var(--al-space-1-5); }
.board-empty { padding-block: var(--al-space-10); }
.board-empty .al-empty__title { margin: 0; }

/* Every column the same width, in every swimlane however many it has; more
   than fit, and they scroll. */
.columns {
  --column-width: 16rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--column-width); justify-content: start;
  gap: var(--al-space-4); overflow-x: auto; align-items: start; padding-bottom: var(--al-space-2);
  scroll-snap-type: x proximity;
}
/* The stages as tabs, on a phone (where a column is the screen's width). */
.stage-pager { display: none; gap: var(--al-space-1); overflow-x: auto; scrollbar-width: none; margin-bottom: calc(-1 * var(--al-space-2)); }
.stage-pager button {
  flex: none; display: inline-flex; align-items: center; gap: var(--al-space-1-5); padding: var(--al-space-1-5) var(--al-space-3);
  border: 1px solid var(--al-color-line); border-radius: 999px; background: var(--al-color-surface); color: var(--al-color-text-muted);
  font: inherit; font-size: var(--al-text-sm); cursor: pointer;
}
.stage-pager button[aria-current="true"] { background: var(--al-color-text); border-color: var(--al-color-text); color: var(--al-color-surface); }
.stage-pager-count { font-variant-numeric: tabular-nums; opacity: 0.75; }
/* A column reads as one of the studio's numbered steps: a rule, a number, a name. */
.column { display: flex; flex-direction: column; gap: var(--al-space-2); min-inline-size: 0; min-block-size: 12rem; border-top: 2px solid var(--al-color-text); scroll-snap-align: start; }
.column > header { display: flex; align-items: center; gap: var(--al-space-2); padding-block: var(--al-space-3) 0; }
.stage-no { color: var(--al-color-accent); font-size: var(--al-text-sm); font-variant-numeric: tabular-nums; }
.column h2 { margin: 0; font-size: var(--al-text-md); font-weight: 500; }
/* The name, its count and hiding it; folding at the end. */
.column > header .pack-fold { margin-inline-start: auto; }
.column footer { padding: 0; }

/* Columns grow with their cards; the page scrolls, not the column. */
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--al-space-2); min-height: 2.75rem; border-radius: var(--al-radius-sm); }
.cards.over { outline: 2px dashed var(--al-color-accent); outline-offset: 4px; }
/* Cards are the system's interactive cards. */
.card { padding: var(--al-space-3) var(--al-space-4); gap: var(--al-space-1-5); cursor: grab; }
.board.read-only .card { cursor: pointer; }
.card:active { cursor: grabbing; }
.card.dragging { opacity: 0.4; }
.card-company { font-weight: 500; }
.card-company-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-role { color: var(--al-color-text-muted); font-size: var(--al-text-sm); text-wrap: pretty; }
.card-next { display: flex; gap: var(--al-space-1-5); align-items: center; font-size: var(--al-text-sm); }
.card-next svg { flex: none; width: 14px; height: 14px; }
.card-next.overdue { color: var(--al-color-warning); font-weight: 500; }
.card-meta { font-size: var(--al-text-xs); color: var(--al-color-text-muted); }
.tag { border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); padding: 0 0.35rem; }
.placeholder { height: 3rem; border: 1px dashed var(--al-color-accent); border-radius: var(--al-radius-sm); background: var(--al-color-accent-wash); list-style: none; }

.due { font-size: 0.8125rem; color: var(--al-color-text-muted); white-space: nowrap; }
.due.today, .due.soon { color: var(--al-color-warning); background: var(--al-color-warning-wash); border-radius: var(--al-radius-sm); padding: 0 0.3rem; font-weight: 500; }
.due.late { color: var(--al-color-danger); background: var(--al-color-danger-wash); border-radius: var(--al-radius-sm); padding: 0 0.3rem; font-weight: 500; }

.add-card { align-self: flex-start; }
.add-form { margin: 0.35rem 0 0.5rem; padding: 0.75rem; background: var(--al-color-surface); border: 1px solid var(--al-color-line-strong); border-radius: var(--al-radius-sm); }
.application-form { display: flex; flex-direction: column; gap: 0.5rem; }
.application-form:not(.compact) { max-width: 34rem; }
.application-form .or { display: flex; align-items: center; gap: 0.6rem; color: var(--al-color-text-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0.25rem 0; }
.application-form .or::before, .application-form .or::after { content: ""; flex: 1; border-top: 1px solid var(--al-color-line); }
.add-form .actions { margin-top: 0.35rem; }
.posting-preview:empty, .same-posting:empty { display: none; }
.posting-preview .found { border-inline-start: 2px solid var(--al-color-accent); background: var(--al-color-accent-wash); padding: 0.5rem 0.65rem; font-size: 0.875rem; }
.posting-preview .al-notice { font-size: var(--al-text-sm); }

/* archived, under the board */
/* Folds are the design system's disclosure (.al-disclosure); the board's
   archived box, an application's sections, the audit log and Settings'
   groups draw its rule stronger, as section breaks. */
.zone { margin-top: var(--al-space-4); }
.zone > summary { align-items: center; gap: var(--al-space-2); }
.zone > summary h2 { font-size: inherit; font-weight: 500; margin: 0; }
.zone > summary .al-disclosure__value { font-size: var(--al-text-sm); }
.zone.over { outline: 2px dashed var(--al-color-accent); outline-offset: 4px; background: var(--al-color-accent-wash); }
.zone-tools { display: flex; align-items: center; gap: 0.5rem; }
.zone-tools select { width: auto; font-size: 0.875rem; padding: 0.2rem 0.4rem; }
/* A swimlane: a row of the board, its stages' columns, folded or not. */
.swimlane > summary h2 { font-size: var(--al-text-lg); font-weight: 500; }
.swimlane > .al-disclosure__body { display: flex; flex-direction: column; gap: var(--al-space-3); }
/* A terminal stage's column: quieter, and its cards needn't say why (its sub stages do). */
.column.terminal { border-top-color: var(--al-color-line-strong); }
.column.terminal .card-closed .al-badge { display: none; }
.pack-fold { inline-size: 1.75rem; block-size: 1.75rem; }
/* A pack, folded: its cards a blank pile (edges under it, two at most)
   saying how many; an empty one, a dashed outline. */
.cards.packed > .card { display: none; }
.cards.packed { min-height: 0; }
.pile-face { position: relative; isolation: isolate; }
.pile-face.several { padding-bottom: 6px; }
.pile-face.deep { padding-bottom: 12px; }
.pile-face button, .pile-face.empty span {
  display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: 2.75rem;
  border: 1px solid var(--al-color-line-strong); border-radius: var(--al-radius-sm); background: var(--al-color-surface);
  font: inherit; font-size: var(--al-text-sm); color: var(--al-color-text-muted);
}
.pile-face button { cursor: pointer; box-shadow: 0 2px 4px oklch(0% 0 0 / 0.1); }
.pile-face button:hover { border-color: var(--al-color-accent); color: var(--al-color-accent); }
.pile-face.several::before, .pile-face.deep::after {
  content: ""; position: absolute; z-index: -1; inset: 8px 6px 0; border: 1px solid var(--al-color-line-strong);
  border-radius: var(--al-radius-sm); background: var(--al-color-surface-sunk);
}
.pile-face.deep::before { inset: 8px 6px 6px; }
.pile-face.deep::after { z-index: -2; inset: 16px 12px 0; }
.pile-face.empty span { font-family: var(--al-font-sans); border-style: dashed; background: none; min-block-size: 2.25rem; font-size: var(--al-text-xs); }
/* Folding: the disclosure's chevron, down to unfold, up to fold. */
.pack-fold svg { transition: transform 0.15s; }
.pack-fold[aria-expanded="true"] svg { transform: rotate(180deg); }
.lane > header .pack-fold { margin-inline-start: auto; }
.lane > header { align-items: center; }
.card-closed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-1-5); }

/* dialogs */
/* Dialogs are the design system's (.al-dialog: --md for forms); hunt adds a
   wide one, for a whole record, and pads the record a dialog shows. */
.al-dialog.wide { inline-size: min(76rem, calc(100vw - 2rem)); }
.al-dialog > article { padding: var(--al-space-6); }

.process-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.process-head h1 { font-size: 1.85rem; }
.process-head p { margin: 0.3rem 0 0; font-size: 0.8125rem; }
.status-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0; border-block: 1px solid var(--al-color-line); margin-bottom: 1.25rem; }
.spacer { flex: 1; }
.status-bar .field { flex: 0 1 15rem; flex-direction: row; align-items: center; gap: 0.4rem; }
.status-bar .field > label { white-space: nowrap; }
.status-bar .al-save-state:not([data-state]) { display: none; }

.process-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
/* Panels are sections under a rule, not boxes. */
.panel-head h2 { font-size: 1.05rem; margin-bottom: 0.85rem; }
.panel details > summary { cursor: pointer; font-weight: 500; }
.panel details[open] > summary { margin-bottom: 0.85rem; }
.panel .inline-create { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--al-color-line); }
.inline-create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.75rem; align-items: end; }
.inline-create > .fields { grid-template-columns: minmax(10rem, 1.4fr) minmax(11rem, 1fr); }
.inline-create .al-save-state:not([data-state]) { display: none; }
.inline-create .actions { margin-top: 0; padding-bottom: 1px; }
.inline-create .form-error { grid-column: 1 / -1; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }

.steps, .notes, .people, .plain, .timeline, .stage-list { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem; align-items: start; padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--al-color-line); }
.fields.inline { grid-template-columns: minmax(8rem, 1.4fr) minmax(10rem, 1.2fr) minmax(7rem, 1fr); }
.note { padding: 0.5rem 0; border-top: 1px solid var(--al-color-line); }
.note-head { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--al-color-text-muted); }
.note-head button { margin-inline-start: auto; }
.note textarea { border-color: transparent; background: transparent; padding-inline: 0; font-size: 1rem; }
.note textarea:hover, .note textarea:focus { border-color: var(--al-color-line); padding-inline: 0.6rem; background: var(--al-color-surface); }
.note-add { margin-bottom: 0.6rem; }
.note-add .actions { margin-top: 0.5rem; }
.people li { display: grid; grid-template-columns: 1fr minmax(8rem, 10rem) auto; gap: 0.5rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--al-color-line); }
.people li .muted { display: none; }
.person-add { display: grid; grid-template-columns: 1fr minmax(8rem, 10rem) auto; gap: 0.5rem; margin-top: 0.75rem; }
.plain li { padding: 0.25rem 0; }
.activity { border-block-start: 1px solid var(--al-color-line-strong); padding-top: 0.35rem; }
.activity > summary { font-size: 1.05rem; }
.activity > summary h2 { font-size: inherit; margin: 0; }
.activity > summary .count { font-weight: 400; }
.activity[open] > summary { margin-bottom: 0.5rem; }
.record .activity { margin-top: 1.25rem; }

.files li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--al-color-line); }
.files .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-add { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; margin-top: 0.75rem; }
.file-add + p { margin: 0.5rem 0 0; }


/* files: taking them in */
.dropzone { border: 1px dashed var(--al-color-line-strong); border-radius: var(--al-radius-sm); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; background: var(--al-color-surface); }
.dropzone label { font-weight: 500; color: var(--al-color-text); }
.dropzone input { border: 0; padding: 0; background: transparent; box-shadow: none; }
.dropzone p { margin: 0; }
.dropzone.file-over, tr.file-over { background: var(--al-color-accent-wash); border-color: var(--al-color-accent); outline: 1px dashed var(--al-color-accent); outline-offset: -2px; }

/* a document: versions beside a preview of the chosen one */
.doc-versions { display: grid; grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr); gap: 1.5rem; margin-top: 1rem; align-items: start; }
.doc-list h2 { font-size: 1.05rem; margin-bottom: 0.85rem; }
.upload { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.upload-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.upload p { margin: 0; }
.versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.version { border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; background: var(--al-color-surface); }
.version.selected { border-color: var(--al-color-accent); box-shadow: inset 2px 0 0 var(--al-color-accent); }
button.version-head { display: grid; grid-template-columns: auto 1fr; gap: 0 0.5rem; text-align: start; border: 0; padding: 0; font-weight: 400; white-space: normal; }
.version-head b { color: var(--al-color-accent); font-weight: 500; }
.version-head .version-name { font-weight: 500; overflow-wrap: anywhere; }
.version-head .muted { grid-column: 2; font-size: 0.8125rem; }
.version .fields { grid-template-columns: 1fr; gap: 0.35rem; }
.version .al-save-state:not([data-state]) { display: none; }
.version textarea { min-height: 2.4rem; }
.version-foot { display: flex; align-items: center; gap: 0.5rem; }
.version-foot button { margin-inline-start: auto; }
.preview-pane { position: sticky; top: 0; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.preview-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.875rem; }
.preview-frame { width: 100%; height: min(75vh, 60rem); border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); background: #fff; }
.preview-image { border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); padding: 0.5rem; background: var(--al-color-surface); text-align: center; max-height: 75vh; overflow: auto; }
.preview-image img { max-width: 100%; height: auto; }
.preview-text { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface); max-height: 75vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.6; }
.preview-none { border: 1px dashed var(--al-color-line); border-radius: var(--al-radius-sm); padding: 2rem 1rem; text-align: center; color: var(--al-color-text-muted); }
dialog.preview { width: min(64rem, calc(100vw - 2rem)); padding: 1.25rem; }
dialog.preview .preview-frame { height: calc(100vh - 9rem); }
.preview-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; }
.preview-head h2 { font-size: 1.2rem; font-weight: 400; margin-inline-end: auto; }

.timeline li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--al-color-line); font-size: 0.875rem; }
.timeline li:last-child { border-bottom: 0; }
.timeline time { color: var(--al-color-text-muted); font-variant-numeric: tabular-nums; }
.timeline a { color: inherit; text-decoration: none; }
.timeline a:hover { color: var(--al-color-accent); text-decoration: underline; }
.timeline .deleted span, .timeline .deleted a { color: var(--al-color-danger); }
.timeline .moved span, .timeline .moved a { font-weight: 500; }

/* tables: the design system's (.al-table, in .al-table-wrap), a hairline
   stronger above. Lists whose rows open something are --interactive: the
   whole row is the target, and a row reached by Tab is marked. */
.al-table-wrap { border-block-start: 1px solid var(--al-color-line-strong); }
.al-table td b { font-weight: 500; }
.al-table--interactive td { vertical-align: middle; }
.al-table--interactive tbody tr { cursor: pointer; }
.al-table--interactive tbody tr:focus { outline: none; }
.al-table--interactive tbody tr:focus-visible > * { background: var(--al-color-surface-sunk); }
.al-table--interactive tbody tr:focus-visible > :first-child { box-shadow: inset 2px 0 0 var(--al-color-accent); }
.settings td .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.settings td .al-save-state:not([data-state]) { display: none; }
td.actions { margin: 0; display: table-cell; white-space: nowrap; text-align: end; }
td.actions > * { margin-inline-start: 0.4rem; }
.record .fields { margin-bottom: 1.25rem; }
.record .panel { margin-top: 1.25rem; }

.stage-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.85rem; }
.stage { display: grid; grid-template-columns: auto auto 1fr auto auto auto; gap: 0.5rem; align-items: center; padding: 0.35rem 0.5rem; background: var(--al-color-surface); border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); }
.stage:has(.stage-active) { grid-template-columns: auto auto 1fr auto auto auto auto; }
.stage.dragging { opacity: 0.5; }
.handle { cursor: grab; color: var(--al-color-text-muted); letter-spacing: -0.2em; padding-inline-end: 0.3rem; }
/* A name edited where it is (Settings' lists): text until pointed at or focused. */
.al-input.inline-name { border-color: transparent; background: transparent; padding-inline: 0.4rem; }
.al-input.inline-name:hover { border-color: var(--al-color-line); }
.al-input.inline-name:focus { border-color: var(--al-color-line-strong); background: var(--al-color-surface); }
.inline-add { display: flex; gap: 0.5rem; }

/* importing details from a page */
.import-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.import-result:empty { display: none; }
.import-result .actions { justify-content: flex-end; }
.import-table th[scope="row"] { white-space: nowrap; font-size: 0.8125rem; color: var(--al-color-text-muted); }
.import-table td { vertical-align: top; }
.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* forms: groups, more details, errors */
fieldset.group { grid-column: 1 / -1; border: 0; border-top: 1px solid var(--al-color-line); margin: 0.25rem 0 0; padding: 0.6rem 0 0; min-width: 0; }
fieldset.group > legend { padding: 0; padding-inline-end: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--al-color-text); }
.group-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.6rem 0.85rem; }
.more { margin-top: 1rem; }
.more > summary { font-size: var(--al-text-sm); }
.more[open] > summary { margin-bottom: 0.5rem; }
.form-error { margin-top: 0.85rem; }
.open-link { margin-inline-start: 0.5rem; font-weight: 400; font-size: 0.75rem; color: var(--al-color-accent); text-decoration: none; }
.open-link[hidden] { display: none; }

/* a record to read */
.record-view { display: flex; flex-direction: column; gap: 1.25rem; }
/* Facts are the system's summary list (.al-summary-list, by h()), its rows
   a little closer, as a record has many. */
.facts .al-summary-list__row { padding-block: var(--al-space-2); }
.subtitle { font-family: var(--al-font-serif); font-size: 1.15rem; color: var(--al-color-text-muted); margin: -0.5rem 0 0; }
.prose-block h2 { font-size: 0.75rem; color: var(--al-color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.prose { font-family: var(--al-font-serif); font-size: 1.05rem; line-height: 1.65; white-space: pre-line; max-width: 46rem; }
.panel-tools { display: flex; gap: 0.4rem; align-items: center; }
.view-edit-body { min-width: 0; }

/* logos */
.logo {
  --size: 28px; display: inline-grid; place-items: center; flex: none; width: var(--size); height: var(--size);
  border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface); overflow: hidden;
  font-size: calc(var(--size) * 0.5); color: var(--al-color-text-muted); vertical-align: middle; margin-inline-end: 0.5rem;
}
.logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.logo[data-initial]::before { content: attr(data-initial); }
.logo.round, .logo-preview.round { border-radius: 50%; }
.logo.round img { object-fit: cover; }
.profile-add { margin-bottom: 0.5rem; }
.people li .with-logo a { margin-inline-start: 0; }
.card-company { display: flex; align-items: center; min-width: 0; }
.card-company .logo { margin-inline-end: 0.45rem; }
.ev .logo { margin-inline-end: 0.1rem; border: 0; align-self: center; }
.combo-item { display: inline-flex; align-items: center; min-width: 0; }
.combo-item .logo { margin-inline-end: 0.45rem; }
.with-logo { display: inline-flex; align-items: center; }
.process-head h1 .logo, .record h1 .logo { margin-inline-end: 0.75rem; position: relative; top: -0.15em; }
.logo-preview { max-width: 64px; max-height: 64px; border: 1px solid var(--al-color-line); background: #fff; }
.logo-tools { display: flex; gap: 0.5rem; margin: 0.75rem 0 0; }
.gbp { color: var(--al-color-accent); font-size: 0.875rem; white-space: nowrap; }

/* the calendar */
.calendar .page-head .al-search { width: min(22rem, 100%); }
.cal-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.cal-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
/* No margin above or below, so it centres on the buttons' line. */
.cal-month { font-size: 1.35rem; font-weight: 400; margin-block: 0; margin-inline: 0.5rem 0.75rem; min-width: 12rem; }
/* At the bar's end: weekends, and the view. */
.cal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-inline-start: auto; }
.cal-filters > .al-segmented { align-self: center; }
/* The key, under the calendar. */
.cal-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 0.8125rem; color: var(--al-color-text-muted); }
.cal-legend li { display: flex; align-items: center; gap: 0.45rem; }
.cal-key { inline-size: 1.1rem; block-size: 0.8rem; border-inline-start: 2px solid var(--kind); background: color-mix(in oklab, var(--kind) 14%, var(--al-color-surface)); }
.cal-key.step-done { --kind: var(--al-color-line-strong); }
.cal-key-off { --kind: transparent; border: 1px solid var(--al-color-line); background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--al-color-text) 18%, transparent) 0 1px, transparent 1px 4px); }
.cal-key-now { block-size: 0; border: 0; border-top: 2px solid var(--al-color-danger); background: none; }
.cal-kind { align-items: center; font-size: 0.8125rem; }
.calendar select { width: auto; }
.kind-step { --kind: var(--al-color-accent); }
.kind-next { --kind: var(--al-color-text); }
.kind-closes { --kind: var(--al-color-danger); }
.kind-applied { --kind: var(--al-color-text-muted); }
.kind-posted { --kind: var(--al-color-line-strong); }
.cal-grid { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); border-top: 1px solid var(--al-color-line-strong); border-inline-start: 1px solid var(--al-color-line); }
.cal-dow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--al-color-text-muted); padding: 0.4rem 0.5rem; border-inline-end: 1px solid var(--al-color-line); border-bottom: 1px solid var(--al-color-line); }
.cal-day { min-height: 5.4rem; padding: 0.35rem 0.4rem 0.5rem; border-inline-end: 1px solid var(--al-color-line); border-bottom: 1px solid var(--al-color-line); display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; background: var(--al-color-surface); }
.cal-day.outside { background: transparent; }
/* The muted colour is enough (4.5:1); fading it as well wasn't. */
.cal-day.outside .cal-date { color: var(--al-color-text-muted); }
.cal-date { font-size: 0.8125rem; font-variant-numeric: tabular-nums; align-self: flex-start; padding: 0 0.25rem; }
.cal-day.today .cal-date { background: var(--al-color-accent); color: var(--al-color-on-accent); border-radius: var(--al-radius-sm); }
.ev { display: flex; gap: 0.3rem; align-items: baseline; font-size: 0.75rem; line-height: 1.3; padding: 0.15rem 0.35rem; text-decoration: none; color: var(--al-color-text); border-inline-start: 2px solid var(--kind); background: color-mix(in oklab, var(--kind) 9%, transparent); border-radius: 0; border-start-end-radius: var(--al-radius-sm); border-end-end-radius: var(--al-radius-sm); min-width: 0; overflow: hidden; }
.ev:hover { color: var(--al-color-text); background: color-mix(in oklab, var(--kind) 18%, transparent); }
.ev.late { --kind: var(--al-color-danger); }
.ev-time { font-variant-numeric: tabular-nums; color: var(--al-color-text-muted); flex: none; }
/* An interview that's happened: quieter than what's ahead. Cancelled: struck through. */
.ev.step-done, .ev.step-completed, .ev.step-passed, .ev.step-failed, .ev.step-cancelled { --kind: var(--al-color-line-strong); color: var(--al-color-text-muted); }
.ev.step-cancelled .ev-text, .ev.step-cancelled .ev-title, .agenda-items li.step-cancelled .agenda-what b { text-decoration: line-through; }
.agenda-items li.step-done, .agenda-items li.step-completed, .agenda-items li.step-passed, .agenda-items li.step-failed, .agenda-items li.step-cancelled { --kind: var(--al-color-line-strong); }
.agenda-what .al-badge { margin-inline-start: 0.5rem; }
.ev-outcome { color: var(--al-color-text-muted); font-size: 0.75rem; }
/* A day or a week: midnight to midnight down the side, events at their
   times; what has no time above. The hours scroll within the page. */
.cal-time { --gutter: 4.5rem; border-top: 1px solid var(--al-color-line-strong); }
.cal-time-head, .cal-time-allday, .cal-time-body { display: grid; grid-template-columns: repeat(var(--zones), var(--gutter)) repeat(var(--days), minmax(0, 1fr)); }
.cal-allday-label { grid-column: 1 / span var(--zones); }
/* Each zone's name over its hours; the calendar's own last, beside the days. */
.cal-zone { align-self: end; font-size: 0.6875rem; color: var(--al-color-text-muted); padding: 0.4rem 0.6rem 0.4rem 0; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-gutter.other .cal-hour { color: color-mix(in oklab, var(--al-color-text-muted) 80%, var(--al-color-bg)); }
.cal-time-head { border-bottom: 1px solid var(--al-color-line); }
.cal-time-day { display: flex; align-items: baseline; gap: var(--al-space-2); padding: 0.4rem 0.5rem; border-inline-start: 1px solid var(--al-color-line); }
.cal-time-day.today .cal-date { background: var(--al-color-accent); color: var(--al-color-on-accent); border-radius: var(--al-radius-sm); }
.cal-time-allday { border-bottom: 1px solid var(--al-color-line-strong); }
.cal-allday-items { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.3rem; min-width: 0; border-inline-start: 1px solid var(--al-color-line); }
.cal-hour { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--al-color-text-muted); padding: 0.3rem 0.6rem 0 0; text-align: end; }
.cal-time-scroll { max-block-size: 54vh; overflow-y: auto; }
.cal-time-top { position: sticky; inset-block-start: 0; z-index: 2; background: var(--al-color-bg); }
.cal-time-top:empty { display: none; }
.cal-gutter { display: grid; grid-template-rows: repeat(24, var(--hour)); }
.cal-gutter .cal-hour { transform: translateY(-0.9rem); }
.cal-col { position: relative; block-size: calc(24 * var(--hour)); min-width: 0; border-inline-start: 1px solid var(--al-color-line); background: repeating-linear-gradient(to bottom, var(--al-color-surface) 0 calc(var(--hour) - 1px), var(--al-color-line) calc(var(--hour) - 1px) var(--hour)); }
/* Outside working hours: faint diagonal hatching, the hour lines still showing. */
.cal-off { position: absolute; inset-inline: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--al-color-text) 9%, transparent) 0 1px, transparent 1px 7px),
    color-mix(in oklab, var(--al-color-text) 1.5%, transparent); }
/* An hour is short: two tight lines, the time and title, then the company. */
.cal-col .ev.ev-block { padding: 0.1rem 0.4rem; gap: 0; line-height: 1.2; }
.cal-col .ev-block .logo { display: none; }
.cal-col .ev-block { position: absolute; overflow: hidden; border-inline-end: 2px solid var(--al-color-bg); border-block-end: 1px solid var(--al-color-bg); background: color-mix(in oklab, var(--kind) 14%, var(--al-color-surface)); }
.ev-block .ev-line { display: flex; gap: 0.35rem; align-items: baseline; min-width: 0; }
.ev-block .ev-line .ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.cal-now { position: absolute; inset-inline: 0; border-top: 2px solid var(--al-color-danger); pointer-events: none; }
.cal-day-none { margin-top: 0.75rem; }
/* The whole width, as the Tracking board has: a week wants room. */
.page.calendar { max-width: none; margin: 0; }
.page.calendar, .cal-body { min-inline-size: 0; max-inline-size: 100%; }
/* Settings: working hours and other time zones. */
.work-hours { display: flex; flex-direction: column; gap: var(--al-space-3); margin-block-start: var(--al-space-3); }
.work-times { display: flex; gap: var(--al-space-4); flex-wrap: wrap; }
.work-times input { inline-size: 9rem; }
.work-days { display: flex; flex-wrap: wrap; gap: var(--al-space-2) var(--al-space-4); border: 0; padding: 0; margin: 0; }
.work-days legend { font-size: var(--al-text-sm); font-weight: 500; margin-block-end: var(--al-space-2); }
.other-zones { display: flex; flex-direction: column; gap: var(--al-space-2); align-items: flex-start; }
.other-zone { display: flex; gap: var(--al-space-2); align-items: center; }
.other-zone select { inline-size: min(22rem, 70vw); }
.ev-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.agenda-day h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--al-color-line-strong); margin-bottom: 0.25rem; }
.agenda-items { list-style: none; margin: 0; padding: 0; }
.agenda-items li { display: grid; grid-template-columns: 4.5rem 9.5rem minmax(0, 1.3fr) minmax(0, 1.5fr) auto; gap: 0.75rem; align-items: center; padding-block: 0.55rem; padding-inline: 0.6rem 0; border-bottom: 1px solid var(--al-color-line); border-inline-start: 2px solid var(--kind); }
.agenda-items li.late { --kind: var(--al-color-danger); }
.agenda-time { font-variant-numeric: tabular-nums; color: var(--al-color-text-muted); font-size: 0.875rem; }
.agenda-kind { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--al-color-text-muted); }
.agenda-what { text-decoration: none; }
.agenda-what b { font-weight: 500; }
.agenda-who { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 52rem) {
  .cal-day { min-height: 4.95rem; }
  .ev-text { display: none; }
  .agenda-items li { grid-template-columns: 4rem minmax(0, 1fr); }
  .agenda-kind, .agenda-who { grid-column: 2; }
}

/* toasts */
/* Toasts are the design system's (.al-toaster, .al-toast); hunt adds a red
   one for an error, which also shows by its field. */
.al-toast.error { background: var(--al-color-danger); color: var(--al-color-on-accent); --al-color-focus: currentColor; }

@media (max-width: 52rem) {
  .doc-versions { grid-template-columns: 1fr; }
  .preview-pane { position: static; }
  body.al-shell { grid-template-rows: auto 1fr auto; }
  .al-shell > .sidebar { grid-row: auto; }
  .site-foot { grid-column: 1; }
  /* The sidebar is the design system's bar along the top, with the menu
     under it: the logo leads the bar, so the menu doesn't repeat it. */
  .al-sidebar__menu > .brand { display: none; }
  .al-sidebar__bar .brand { padding: 0; }
  .process-body { grid-template-columns: 1fr; }
  .fields.inline { grid-template-columns: 1fr 1fr; }
  .fields.inline .field:first-child { grid-column: 1 / -1; }
  /* A column a screen, from one to the next by its tab or a swipe. */
  .columns { grid-auto-columns: 100%; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; overflow-y: hidden; transition: block-size 0.15s; }
  .stage-pager { display: flex; }
  /* A stage's swimlane and switches, under its name. */
  .stage:has(.stage-switches) { grid-template-columns: auto auto 1fr auto auto auto; }
  .stage-switches { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .zone-tools { flex-wrap: wrap; }
  .page-head h1, .board-head h1 { font-size: 1.75rem; }
  .timeline li { grid-template-columns: 1fr; gap: 0; }
}


/* ---- tags ---------------------------------------------------------------------------- */

/* Tags are the design system's (.al-tag), in a colour (TAG_COLORS in resource.rs):
   a hue, in one of four shades. Every hue is an angle and a chroma in oklch and
   every shade a lightness, so all of them match. Pale and light are grounds
   with the hue's ink on them, dimmed in the dark theme; bold and deep are
   fills, the same in both. */
.al-tag[data-hue] {
  --_tag-bg: oklch(91% calc(var(--tag-c) * 0.45) var(--tag-h));
  --_tag-ink: oklch(37% calc(var(--tag-c) * 0.85) var(--tag-h));
  background: var(--_tag-bg); color: var(--_tag-ink); border-color: transparent;
}
.al-tag[data-hue][data-shade="pale"] { --_tag-bg: oklch(96.5% calc(var(--tag-c) * 0.2) var(--tag-h)); --_tag-ink: oklch(42% calc(var(--tag-c) * 0.8) var(--tag-h)); }
.al-tag[data-hue][data-shade="bold"] { --_tag-bg: oklch(72% var(--tag-c) var(--tag-h)); --_tag-ink: oklch(22% calc(var(--tag-c) * 0.5) var(--tag-h)); }
.al-tag[data-hue][data-shade="deep"] { --_tag-bg: oklch(45% calc(var(--tag-c) * 0.9) var(--tag-h)); --_tag-ink: oklch(98% calc(var(--tag-c) * 0.1) var(--tag-h)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .al-tag[data-hue][data-shade="light"] { --_tag-bg: oklch(37% calc(var(--tag-c) * 0.5) var(--tag-h)); --_tag-ink: oklch(91% calc(var(--tag-c) * 0.45) var(--tag-h)); }
  :root:not([data-theme="light"]) .al-tag[data-hue][data-shade="pale"] { --_tag-bg: oklch(28% calc(var(--tag-c) * 0.3) var(--tag-h)); --_tag-ink: oklch(86% calc(var(--tag-c) * 0.4) var(--tag-h)); }
}
:root[data-theme="dark"] .al-tag[data-hue][data-shade="light"] { --_tag-bg: oklch(37% calc(var(--tag-c) * 0.5) var(--tag-h)); --_tag-ink: oklch(91% calc(var(--tag-c) * 0.45) var(--tag-h)); }
:root[data-theme="dark"] .al-tag[data-hue][data-shade="pale"] { --_tag-bg: oklch(28% calc(var(--tag-c) * 0.3) var(--tag-h)); --_tag-ink: oklch(86% calc(var(--tag-c) * 0.4) var(--tag-h)); }
.al-tag[data-hue]::before { background: currentColor; }
[data-hue="red"]     { --tag-h: 25;  --tag-c: 0.2; }
[data-hue="coral"]   { --tag-h: 38;  --tag-c: 0.17; }
[data-hue="orange"]  { --tag-h: 55;  --tag-c: 0.17; }
[data-hue="amber"]   { --tag-h: 75;  --tag-c: 0.16; }
[data-hue="yellow"]  { --tag-h: 95;  --tag-c: 0.16; }
[data-hue="lime"]    { --tag-h: 125; --tag-c: 0.18; }
[data-hue="green"]   { --tag-h: 148; --tag-c: 0.16; }
[data-hue="emerald"] { --tag-h: 165; --tag-c: 0.14; }
[data-hue="teal"]    { --tag-h: 185; --tag-c: 0.12; }
[data-hue="cyan"]    { --tag-h: 208; --tag-c: 0.13; }
[data-hue="sky"]     { --tag-h: 232; --tag-c: 0.14; }
[data-hue="blue"]    { --tag-h: 260; --tag-c: 0.19; }
[data-hue="indigo"]  { --tag-h: 278; --tag-c: 0.19; }
[data-hue="violet"]  { --tag-h: 295; --tag-c: 0.2; }
[data-hue="purple"]  { --tag-h: 312; --tag-c: 0.2; }
[data-hue="magenta"] { --tag-h: 332; --tag-c: 0.21; }
[data-hue="pink"]    { --tag-h: 352; --tag-c: 0.18; }
[data-hue="rose"]    { --tag-h: 10;  --tag-c: 0.19; }
[data-hue="brown"]   { --tag-h: 55;  --tag-c: 0.07; }
[data-hue="olive"]   { --tag-h: 108; --tag-c: 0.08; }
[data-hue="slate"]   { --tag-h: 255; --tag-c: 0.035; }
[data-hue="grey"]    { --tag-h: 0;   --tag-c: 0; }

.tag-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.25rem 0 0.75rem; }
.tag-editor-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--al-color-text-muted); margin-inline-end: 0.2rem; }
.tag-chips { display: contents; }
.tag-add { width: 12rem; }
.tag-add input { padding-block: 0.2rem; font-size: 0.85rem; }

.card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.tags-cell { display: table-cell; }
.tags-cell .al-tag { margin: 0 0 0.2rem; margin-inline-end: 0.2rem; white-space: nowrap; }
.tag-filter { width: auto; flex: none; max-width: 12rem; }
.board .card[hidden] { display: none; }

/* Settings' tags: the tag (its name edited in place), its colour, remove; each in a column. */
.setting-list.tag-rows { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto; column-gap: 1.25rem; }
.setting-list.tag-rows li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.tag-rows .al-tag { justify-self: start; max-inline-size: 100%; }
.tag-rows .al-tag:focus-within { outline: var(--al-border-focus) solid var(--al-color-focus); outline-offset: 2px; }
.al-tag .tag-name {
  all: unset; field-sizing: content; min-inline-size: 2ch; max-inline-size: 16rem;
  overflow: hidden; text-overflow: ellipsis; cursor: text; color: inherit;
}
.al-tag .tag-name:hover { text-decoration: underline dotted; text-underline-offset: 0.2em; }
.tag-colour-name {
  all: unset; justify-self: start; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.35rem; margin-inline-start: -0.35rem; border-radius: var(--al-radius-sm);
  color: var(--al-color-text-muted); font-size: 0.8125rem; cursor: pointer;
}
.tag-colour-name svg { width: 14px; height: 14px; }
.tag-colour-name:hover, .tag-colour-name[aria-expanded="true"] { background: var(--al-color-surface-sunk); color: var(--al-color-text); }
.tag-colour-name:focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus); }

/* A tag that opens its colours (colourTagChip in app.js): its name is the button. */
.tag-colour { all: unset; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-colour:hover { text-decoration: underline dotted; text-underline-offset: 0.2em; }
.tag-colour:focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus); outline-offset: 2px; border-radius: var(--al-radius-sm); }
/* Its colours (tagColours): a column per hue, palest at the top, in two bands;
   above, the tag in the colour pointed at, and its name. */
.tag-colours { min-inline-size: 0; max-inline-size: none; padding: var(--al-space-3) var(--al-space-3) var(--al-space-1); }
.tag-colours-head { display: flex; align-items: center; gap: 0.6rem; min-block-size: 1.9rem; margin-block-end: 0.6rem; }
.tag-colours-name { font-size: 0.8125rem; color: var(--al-color-text-muted); }
.tag-swatches { display: flex; flex-direction: column; gap: 0.75rem; }
.tag-swatch-grid { display: grid; grid-template-columns: repeat(var(--hues), 1.5rem); gap: 0.3rem; }
.al-tag.tag-swatch {
  display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; min-block-size: 0; padding: 0;
  border-radius: 50%; font: inherit; font-size: 0.7rem; line-height: 1; cursor: pointer; forced-color-adjust: none;
}
.al-tag.tag-swatch:not([data-hue]) { border-color: var(--al-color-line); }
.tag-swatch::before { display: none; }
.tag-swatch:hover { box-shadow: 0 0 0 2px var(--al-color-surface), 0 0 0 3px var(--al-color-text-muted); }
.tag-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--al-color-surface), 0 0 0 4px var(--al-color-text); }
.tag-swatch:focus-visible { outline: var(--al-border-focus) solid var(--al-color-focus); outline-offset: 3px; }
.tag-swatches .al-menu__separator { margin-block: 0; }
.tag-swatches .al-menu__item { margin-inline: calc(-1 * var(--al-space-2)); inline-size: calc(100% + 2 * var(--al-space-2)); }

/* ---- email ----------------------------------------------------------------------------- */

.nav-count {
  margin-inline-start: auto; min-width: 1.4rem; padding: 0 0.35rem; text-align: center;
  font-size: 0.72rem; line-height: 1.4; border-radius: var(--al-radius-sm);
  background: var(--al-color-accent); color: var(--al-color-on-accent);
}

.email-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.email { border-top: 1px solid var(--al-color-line); padding: 0.55rem 0; }
.email:first-child { border-top: 0; }
.email-toggle {
  display: grid; gap: 0.1rem; width: 100%; text-align: start; border: 0; background: none;
  padding: 0; min-height: 0; cursor: pointer; color: inherit; font: inherit;
}
.email-toggle:hover .email-subject { color: var(--al-color-accent); }
.email-line { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; }
.email-line time { font-size: 0.78rem; white-space: nowrap; }
.email.outgoing .email-who { color: var(--al-color-text-muted); font-weight: 500; }
.email-subject { font-weight: 500; }
.email-snippet { font-size: 0.82rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.email-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
.email-actions .spacer { flex: 1; }
.email-body { margin-top: 0.5rem; padding: 0.6rem 0.75rem; border-inline-start: 2px solid var(--al-color-line); }
.email-text { white-space: pre-wrap; font-family: "Newsreader", Georgia, serif; font-size: 0.98rem; line-height: 1.5; max-height: 28rem; overflow: auto; }
.dropzone.compact { padding: 0.6rem 0.75rem; margin-top: 0.6rem; }
.dropzone.compact .muted { margin: 0.15rem 0 0; }
.mail-how { margin-top: 0.6rem; }
.mail-how summary { cursor: pointer; font-size: 0.85rem; color: var(--al-color-text-muted); }
.mail-how code { font-size: 0.82rem; padding: 0 0.3rem; border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); }

.inbox .page-head { align-items: center; }
.inbox-status { margin: 0; flex: 1; }
.inbox .bad, .gmail .bad { color: var(--al-color-danger); }
.email-list.triage .email { padding: 0.9rem 0; }
.suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.55rem; }
.suggest > button { display: inline-flex; align-items: center; gap: 0.35rem; }
.suggest .combo { width: 16rem; }
.empty { padding: 2rem 0; color: var(--al-color-text-muted); }

.steps-help { padding-inline-start: 1.2rem; line-height: 1.7; }
.gmail-connect { max-width: 28rem; }
.gmail .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.gmail h3 { margin-top: 1.25rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--al-color-text-muted); }
.ignores li { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; }
.emails h2 .count { margin-inline-start: 0.5rem; }
.mail-query { white-space: pre-wrap; word-break: break-word; font-size: 0.78rem; padding: 0.5rem 0.65rem; border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface); color: var(--al-color-text-muted); max-height: 9rem; overflow: auto; }
.bookmarklet { cursor: grab; border-style: dashed; }
.bookmarklet { display: inline-flex; align-items: center; gap: 0.4rem; }
.bookmarklet img { width: 18px; height: 18px; }
.choose-person .choice { display: flex; }
.choose-person .combo { flex: 1; }
.google-signin { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--al-color-line); }
.google-signin h3, .gmail details h3 { margin: 0.25rem 0 0.5rem; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--al-color-text); }
.google-signin code, .linkedin code { font-size: 0.82rem; padding: 0 0.3rem; border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); word-break: break-all; }
.dropzone:focus-visible { outline: 2px solid var(--al-color-focus); outline-offset: 2px; }
.paste-email { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.paste-email textarea { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; }
.paste-email .actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.dropzone.compact > .al-button { align-self: flex-start; }
.dropzone:focus-visible { outline: 2px solid var(--al-color-focus); outline-offset: 2px; }
.paste-email { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.paste-email textarea { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; }
.paste-email .actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.backup .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0 0.25rem; }

/* ---- the application page ------------------------------------------------------------- */

.page.application { max-width: 58rem; gap: 0.75rem; }
.crumbs { font-size: 0.85rem; color: var(--al-color-text-muted); }
.crumbs a { color: var(--al-color-text-muted); }
.al-card.app { display: block; padding: 2rem 2.25rem 2.5rem; }
.app.editing { border-color: var(--al-color-accent); }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--al-color-text-muted); font-weight: 500; }

.app-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; }
.app-head > .logo { width: 48px; height: 48px; }
.app-head h1 { font-size: 2rem; line-height: 1.15; }
.app-names { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.app-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.75rem; }
.app-tags .eyebrow { margin-inline-end: 0.25rem; }
.app-tags .tag-input { width: 9rem; padding: 0.15rem 0.45rem; font-size: 0.85rem; }
.app-mode { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; align-items: center; }
.app-mode .al-segmented > button { padding-inline: var(--al-space-4); }

.app-standing { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.stepper { overflow-x: auto; }
.stepper ol { display: flex; min-width: max-content; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--al-color-line); border-bottom: 1px solid var(--al-color-line); }
.stepper li { flex: 1; }
.stepper button { width: 100%; text-align: start; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  padding: 0.6rem 0.8rem; color: var(--al-color-text-muted); font-size: 0.875rem; font-weight: 400; cursor: default; }
.stepper button:not([disabled]) { cursor: pointer; }
.stepper button:not([disabled]):hover { background: var(--al-color-surface-sunk); }
.stepper button[disabled] { opacity: 1; }
.stepper button.past { border-bottom-color: color-mix(in oklch, var(--al-color-accent) 40%, transparent); color: var(--al-color-text); }
.stepper button.current { border-bottom-color: var(--al-color-accent); color: var(--al-color-text); font-weight: 500; }
.stepper .stage-no { font-size: 0.75rem; }
.stepper button.past .stage-no, .stepper button.current .stage-no { color: var(--al-color-accent); }
.stepper.archived { opacity: 0.55; }
.app-archived { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.5rem 0.75rem; background: var(--al-color-surface-sunk); border-radius: var(--al-radius-sm); }

.app-sections { margin-top: 2rem; display: flex; flex-direction: column; gap: 2rem; }
.app-section, .app-sections > .panel { border-block-start: 1px solid var(--al-color-line-strong); padding-top: 0.5rem; }
.app-sections > .panel { padding-top: 1rem; }
.app-section > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; }
.app-section > summary { font-size: 1.125rem; }
/* The title stays whole (with its +/−) when the tools wrap under it. */
.app-section > header h2, .app-section > summary h2 { white-space: nowrap; }
.app-section[open] > summary { margin-bottom: 0.75rem; }
/* A section's buttons: after its summary (never in it), at the end of the
   header's row on wider screens, and under the header on a phone. */
.app-section { position: relative; }
.app-section-tools { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; justify-content: flex-end; margin-bottom: 0.75rem; }
@media (min-width: 52.0625rem) {
  .app-section-tools { position: absolute; inset-block-start: calc(0.5rem + var(--al-space-2)); inset-inline-end: 0; margin: 0; }
}
.app-section h2, .app-sections > .panel > h2, .app-sections > .panel summary h2 { font-size: 1.125rem; font-weight: 500; }
.app-section > summary h2 { font-size: inherit; }
.app-section h2 .count { margin-inline-start: 0.5rem; font-size: 0.85rem; font-weight: 400; }

.app-inlines { font-size: 0.95rem; }
.app-inlines { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0; }
.app-inline { display: flex; gap: 0.4rem; align-items: baseline; min-width: 0; }
.app-inline dt { color: var(--al-color-text-muted); font-size: 0.85rem; flex: none; }
.app-inline dd { margin: 0; overflow-wrap: anywhere; }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.75rem; }
.app-field { display: grid; gap: 0.25rem; min-width: 0; font-weight: 400; }
.app-field > span { font-size: 0.85rem; color: var(--al-color-text-muted); }
.app-field.wide { grid-column: 1 / -1; }
.app-row { display: flex; gap: 0.5rem; align-items: center; }
.app-salary { display: grid; grid-template-columns: 4.5rem 1fr 1fr 5.5rem; gap: 0.4rem; }
.app-salary-line { font-size: 1.5rem; margin: 0; }
.app-salary-line .gbp { font-size: 0.95rem; }
.app-pay-notes { margin: 0.5rem 0 0; white-space: pre-line; }

.app-steps { list-style: none; margin: 0; padding: 0; padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--al-color-line); display: flex; flex-direction: column; gap: 1rem; }
.app-steps li { position: relative; }
.app-steps .dot { position: absolute; inset-inline-start: -1.62rem; top: 0.45rem; width: 0.65rem; height: 0.65rem; border-radius: 50%;
  background: var(--al-color-surface); box-shadow: 0 0 0 1px var(--al-color-accent); }
.app-steps li:is(.is-done, .is-completed, .is-passed) .dot { background: var(--al-color-accent); }
.app-steps li.is-failed .dot { background: var(--al-color-danger); box-shadow: 0 0 0 1px var(--al-color-danger); }
.app-steps li.is-cancelled .dot { background: var(--al-color-text-muted); box-shadow: 0 0 0 1px var(--al-color-text-muted); }
.app-step-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 0.75rem; }
.app-step-head h3 { font-size: 1rem; font-weight: 500; }
.app-steps p { margin: 0.1rem 0 0; }
.app-step-note { white-space: pre-wrap; font-size: 0.95rem; margin-top: 0.3rem !important; }
.app-step-edit { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--al-color-line); background: var(--al-color-bg); border-radius: var(--al-radius-sm); }

.app-notes { white-space: pre-wrap; margin: 0; padding: 0.75rem 0.9rem; background: var(--al-color-bg); border-inline-start: 2px solid color-mix(in oklch, var(--al-color-accent) 50%, transparent); }

.app-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.app-events li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; font-size: 0.95rem; }
.app-events li.editing { grid-template-columns: 10rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.app-events time { color: var(--al-color-text-muted); font-size: 0.875rem; }

.app-emails { list-style: none; margin: 0 0 0.75rem; padding: 0; border-top: 1px solid var(--al-color-line); }
.app-emails li { border-bottom: 1px solid var(--al-color-line); }
.app-emails summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.65rem 0.25rem; cursor: pointer; list-style: none; }
.app-emails summary::-webkit-details-marker { display: none; }
.app-emails summary:hover { background: var(--al-color-surface-sunk); }
.app-email-icon { color: var(--al-color-text-muted); }
.app-email-what { display: grid; min-width: 0; }
.app-email-what > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-email-what b { font-weight: 500; }
.app-email-body { padding: 0 0 0.5rem; padding-inline-start: 1.75rem; }
.app-email-tools { display: flex; gap: 0.5rem; padding: 0 0 0.75rem; padding-inline-start: 1.75rem; }


.app-footer .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.app-footer .spacer { flex: 1; }
.app textarea { width: 100%; resize: vertical; }

@media (max-width: 720px) {
  .app { padding: 1.25rem 1rem 1.5rem; }
  .app-head { grid-template-columns: auto minmax(0, 1fr); }
  .app-mode { grid-column: 1 / -1; justify-content: flex-start; }
  .app-head h1 { font-size: 1.6rem; }
  .app-grid, .app-names { grid-template-columns: 1fr; }
  .app-salary { grid-template-columns: 4rem 1fr 1fr; }
  .app-salary select { grid-column: 1 / -1; }
  .app-events li { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .app-events li.editing { grid-template-columns: 1fr auto; }
  .app-events li.editing input[type="date"] { grid-column: 1 / -1; }
}
.paste-email[hidden] { display: none; }

.app-sections > .activity > summary { font-size: 1.125rem; }

.app-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.app-people li { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.app-people li select { width: auto; margin-inline-start: auto; }
.app-contact { display: inline-flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; margin-inline-start: auto; font-size: 0.85rem; }
.app-contact a { display: inline-flex; align-items: center; gap: 0.3rem; }
.app-contact svg { width: 14px; height: 14px; color: var(--al-color-text-muted); flex: none; }
.app-section .person-add, .app-section .file-add { margin-top: 0.75rem; }

.app-footer { display: flex; flex-direction: column; gap: 0.85rem; }
.app-footer .app-tags { margin-top: 0; }
.app-others { font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: baseline; }
.app-others .eyebrow { margin-inline-end: 0.5rem; }

/* The role: where and how, then pay, then the rest. */
.app-key { font-size: 1.02rem; }
.app-key .app-inline dd { font-weight: 500; }
.app-pay { margin-top: 0.85rem; }
.app-pay .app-inlines { margin-top: 0.15rem; }
.app-more { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px dashed var(--al-color-line); }
.app-key-fields { grid-template-columns: 2fr 1fr 1fr; }
.app-pay-fields, .app-more-fields { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--al-color-line); }
.app-pay-fields .app-salary { grid-template-columns: 5rem 1fr 1fr 7rem; max-width: 36rem; }
@media (max-width: 720px) { .app-key-fields { grid-template-columns: 1fr; } }
.app-salary-orig { margin: 0.1rem 0 0; }
.app-with { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.app-with-label { font-size: 0.85rem; color: var(--al-color-text-muted); }
.app-with .combo { flex: 1; min-width: 14rem; }
.app-with-before { flex-basis: 100%; margin: 0; }

/* ---- general notes ------------------------------------------------------------------ */

.notes-grid { columns: 3 18rem; column-gap: 1rem; }
/* Notes are the system's cards (.al-card), in columns. */
.note-card { break-inside: avoid; margin: 0 0 1rem; padding: 1rem 1.1rem; gap: 0.5rem; cursor: pointer; }
.note-card h2 { font-size: 1.05rem; font-weight: 500; }
.note-body { font-family: var(--al-font-serif); font-size: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
.note-card footer { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.note-card footer time { margin-inline-start: auto; }
.note-card.editing { cursor: auto; border-color: var(--al-color-accent); column-span: all; }
.note-card.editing textarea { font-family: var(--al-font-serif); font-size: 1rem; line-height: 1.6; width: 100%; }
.note-card .actions { display: flex; gap: 0.5rem; align-items: center; }
.note-card .actions .spacer { flex: 1; }

/* ---- stats ---------------------------------------------------------------------------- */
/* Data colours (--al-color-chart-0…3) are the design system's chart palette: see tokens.css.
   hunt's green for single series; amber and blue join it only where series
   must be told apart (work modes), always with labels. */

.viz-kpis { display: grid; grid-template-columns: minmax(14rem, 1fr) 3fr; gap: 1rem; }
/* Tiles are the system's stat (.al-stat), cards its card (.al-card). */
.viz-hero { justify-content: center; }
.viz-hero .viz-hero-value { font-size: 4rem; line-height: 1; letter-spacing: -0.02em; }
.viz-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.viz-tile.up .al-stat__note { color: var(--al-color-accent); }

.viz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 1rem; align-items: start; }
.viz-card > header h2 { font-size: 1.05rem; }
.viz-card > header p { margin: 0; }

/* Horizontal bars: thin, rounded at the data end, square at the baseline. */
/* Charts are the system's (.al-chart, .al-bullet, .al-split-bar, .al-key).
   On a card, the columns sit closer, as there are sixteen of them. */
.viz-card .al-chart__slots, .viz-card .al-chart__axis { gap: 2px; }
.viz-card .al-chart__plot { block-size: 9rem; }
.viz-card .al-chart__axis > span { white-space: nowrap; }
.viz-card .al-bullet__bar + .al-bullet__bar { border-inline-end: 2px solid var(--al-color-surface); }

/* Pay ranges on one axis, with the median. */
.ranges { position: relative; display: flex; flex-direction: column; gap: 0.45rem; }
.range-row { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) 3.5rem; gap: 0.75rem; align-items: center; font-size: 0.875rem; }
.range-track { position: relative; height: 14px; }
.range-bar { position: absolute; top: 0; height: 100%; min-width: 8px; border-radius: var(--al-radius-md); }
.range-median { position: absolute; top: -0.3rem; bottom: -0.3rem; width: 0; border-inline-start: 1px solid var(--al-color-line-strong); pointer-events: none; }
.range-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-value { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.85rem; }
.range-bar:hover, .range-bar:focus-visible, .heat-cell[role="img"]:hover, .heat-cell[role="img"]:focus-visible { filter: brightness(1.1); }

/* Activity: one hue, more is darker. */
.heat { display: flex; gap: 0.4rem; overflow-x: auto; }
.heat-days { display: grid; grid-template-rows: repeat(7, 11px); gap: 3px; font-size: 0.65rem; color: var(--al-color-text-muted); }
.heat-days span { line-height: 11px; }
.heat-grid { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; grid-auto-columns: 11px; gap: 3px; }
.heat-cell { display: inline-block; width: 11px; height: 11px; border-radius: 2px; background: var(--al-color-surface-sunk); }
.heat-cell.l1 { background: color-mix(in oklab, var(--al-color-chart-1) 28%, var(--al-color-surface)); }
.heat-cell.l2 { background: color-mix(in oklab, var(--al-color-chart-1) 50%, var(--al-color-surface)); }
.heat-cell.l3 { background: color-mix(in oklab, var(--al-color-chart-1) 75%, var(--al-color-surface)); }
.heat-cell.l4 { background: var(--al-color-chart-1); }
.heat-legend { display: flex; align-items: center; gap: 3px; margin: 0; font-size: 0.8rem; color: var(--al-color-text-muted); }
.heat-legend .heat-cell { margin: 0 1px; }

.viz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
.viz-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; }
.company-apps li { align-items: start; }
.company-app { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.company-app-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.viz-table > summary { font-size: var(--al-text-sm); color: var(--al-color-text-muted); }
.viz-table table { margin-top: 0.5rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .viz-kpis { grid-template-columns: 1fr; }
  .viz-tiles { grid-template-columns: repeat(2, 1fr); }
  .viz-grid { grid-template-columns: 1fr; }
}

/* Sections, one timeline, emails as threads, formatted text. */
.app-role { border-top: 0; padding-top: 0; }
.app-timeline li.is-event .dot { width: 0.45rem; height: 0.45rem; inset-inline-start: -1.53rem; top: 0.55rem; background: var(--al-color-text-muted); box-shadow: none; }
.app-event { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; font-size: 0.95rem; }
.app-event-edit { display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }

.email-add { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem; margin-bottom: 0.85rem; border: 1px dashed var(--al-color-line-strong); border-radius: var(--al-radius-sm); background: var(--al-color-bg); }
.email-add.file-over { border-color: var(--al-color-accent); background: var(--al-color-accent-wash); }
.email-add-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.email-add textarea { font-family: var(--al-font-mono); font-size: 0.8rem; }
.email-add .actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.email-thread > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.65rem 0.25rem; cursor: pointer; list-style: none; }
.email-thread > summary::-webkit-details-marker { display: none; }
.email-thread > summary:hover { background: var(--al-color-surface-sunk); }
.email-thread-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.25rem 0 0.9rem; padding-inline-start: 1.75rem; }
.email-msg header { display: flex; flex-wrap: wrap; gap: 0 0.5rem; align-items: baseline; margin-bottom: 0.35rem; }
.email-msg header time { margin-inline-start: auto; }
.email-msg + .email-msg { padding-top: 0.75rem; border-top: 1px solid var(--al-color-line); }
.email-text { background: var(--al-color-bg); border-inline-start: 2px solid color-mix(in oklch, var(--al-color-accent) 45%, transparent); border-radius: var(--al-radius-sm);
  padding: 0.75rem 0.9rem; font-family: var(--al-font-serif); font-size: 0.95rem; line-height: 1.6; max-height: 30rem; overflow: auto; }
.email-plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.email-quote { margin: 0.5rem 0; padding-inline-start: 0.75rem; border-inline-start: 2px solid var(--al-color-line); color: var(--al-color-text-muted); white-space: pre-wrap; font-size: 0.9rem; }
.app-email-tools { padding: 0.4rem 0 0; }

/* A posting reads like an email: its text in the same box, laid out. */
.app-posting header .al-badge { margin-inline-start: 0.25rem; }
.posting-add { margin-bottom: 0.85rem; }
.posting-choices label.choice { white-space: nowrap; }
.posting-choices tr.differ th { color: var(--al-color-text); }
.posting-choices thead a { text-transform: none; letter-spacing: 0; }
.posting-choices .differ-mark { color: var(--al-color-danger); font-weight: 600; }
.posting-texts { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.75rem 0; }
.app-posting .posting-when { margin-inline-start: auto; }
.posting-text > :last-child { margin-bottom: 0; }
.posting-text p { margin: 0 0 0.75rem; max-width: 46rem; }
.posting-text h3 { font-family: var(--al-font-sans); font-size: 0.9rem; font-weight: 500; margin: 1.1rem 0 0.4rem; }
.posting-text h3:first-child { margin-top: 0; }
.posting-text ul, .posting-text ol { margin: 0 0 0.75rem; padding-inline-start: 1.25rem; max-width: 46rem; }
.posting-text li { margin: 0.15rem 0; }
.app-footer .app-tags .app-add { margin-inline-start: 0.25rem; }

/* ---- the Tracking Board's table view -------------------------------------------------- */

.table-mode { display: flex; flex-direction: column; gap: 1rem; }
.table-mode .board-head { margin-bottom: 0; }
.table-tools { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.table-tools input[type="search"] { width: min(20rem, 100%); }
.table-tools select { width: auto; }
.table-tools .spacer { flex: 1; }
/* Sorting is the system's: a button in the header, aria-sort on it. */
.th-sort:hover { color: var(--al-color-accent); }
.app-table th[aria-sort] .th-sort { color: var(--al-color-text); }
/* The arrow is the sort button's, not the eye's beside it. */
.al-table th > .col-hide::after { content: none; }
.app-table td.nowrap { white-space: nowrap; }
.table-app { text-decoration: none; color: inherit; }
.table-app b { font-weight: 500; }

/* ---- the Tracking Board's filters ----------------------------------------------------- */
.filter-bar { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--al-space-3); align-items: center; }
.filter-search { flex: 1 1 16rem; max-inline-size: 22rem; }
.filter-search .al-search { width: 100%; }
.filter-row > .filter-mode { width: auto; }
.filter-clear[hidden] { display: none; }
.filter-row select, .filter-row input[type="search"] { width: auto; max-width: 14rem; font-size: 0.875rem; padding-block: 0.3rem; }
.filter-row input[type="search"] { width: 16rem; }
.filter-more .al-search { flex: none; width: 16rem; }
.filter-row .al-search > input { width: 100%; max-width: none; }
.filter-row .set { border-color: var(--al-color-accent); box-shadow: 0 0 0 1px var(--al-color-accent); }
/* The page's own control at the end of the filters' row: a switch. */
.filter-extra { margin-inline-start: auto; }
.switch { align-items: center; font-size: 0.85rem; user-select: none; }
.filter-row .check { align-items: center; font-size: 0.85rem; }



.filter-status { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.85rem; }
.filter-status[hidden] { display: none; }
.filter-count { color: var(--al-color-text-muted); }
.filter-row .check[hidden] { display: none; }

/* ---- pages for companies, people and documents ---------------------------------------- */
.record-page .doc-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); color: var(--al-color-accent); font-size: 1.4rem; }
.app-head.no-pic { grid-template-columns: minmax(0, 1fr); }
.app-head .app-title p { margin: 0.35rem 0 0; font-size: 0.9rem; }
.record-form .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.75rem; }
.record-form .field.type-long-text, .record-form fieldset.group { grid-column: 1 / -1; }
.app-footer .actions { flex-wrap: wrap; }
.record-page .doc-versions { border-top: 0; padding-top: 0; }
@media (max-width: 720px) { .record-form .fields { grid-template-columns: 1fr; } }
.doc-versions .upload[hidden] { display: none; } .doc-list > .app-add { align-self: flex-start; }

/* ---- Stats: resources -------------------------------------------------------------------- */
.viz-system { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--al-color-line); display: flex; flex-direction: column; gap: 1rem; }
.viz-system-head h2 { margin: 0; }
.viz-system-head p { margin: 0.25rem 0 0; }
.viz-system > div { display: flex; flex-direction: column; gap: 1rem; }
.system-tiles { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .system-tiles { grid-template-columns: 1fr 1fr; } }
.meter-value { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--al-color-text-muted); }
.links { display: flex; flex-direction: column; gap: 0.4rem; }
.settings .panel h4 { margin: 1rem 0 0.5rem; font-size: 0.9rem; }

/* ---- Settings: groups that fold, sections that read first -------------------------------- */
.settings-group { border-block-start: 1px solid var(--al-color-line-strong); padding: 0.25rem 0; }
.settings-group:last-of-type { border-block-end: 1px solid var(--al-color-line-strong); }
.settings-group > summary { gap: 0.25rem 0.75rem; flex-wrap: wrap; padding-block: 0.9rem; font-size: 1.25rem; }
.settings-group > summary h2 { margin: 0; font-size: inherit; }
.settings-group > summary .muted { font-weight: 400; }
.settings-body { display: flex; flex-direction: column; gap: 1.5rem; padding: 0 0 1.5rem; padding-inline-start: 1.6rem; }
.settings-panel { border-top: 1px solid var(--al-color-line); padding-top: 0.85rem; }
.settings-body > .settings-panel:first-child, .settings-body > .panel:first-child { border-top: 0; padding-top: 0; }
.settings-panel .panel-head { margin-bottom: 0.35rem; }
.settings-panel .panel-head h3 { margin: 0; font-size: 1.05rem; }
.settings-panel > p.muted { margin: 0 0 0.85rem; }
.settings-panel .facts { margin-bottom: 0.5rem; }
.setting-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; }
.setting-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--al-color-line); }
.setting-list li:first-child { border-top: 1px solid var(--al-color-line); }
.setting-list .setting-name { flex: 1; min-width: 0; }
.row-actions { display: inline-flex; gap: 0.85rem; font-size: 0.85rem; }
.row-actions .al-button--quiet { font-size: 0.85rem; }
.fields.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
@media (max-width: 720px) { .fields.two { grid-template-columns: 1fr; } .settings-body { padding-inline-start: 0; } }
.panel-head .al-button--quiet { font-size: 0.85rem; }

/* ---- listings: a row's edit and remove icons ------------------------------------------- */
/* Columns that hide: an eye on the header, and what's hidden above. */
th.hideable { white-space: nowrap; }
.col-hide { display: inline-grid; place-items: center; width: var(--al-size-target-min); height: var(--al-size-target-min); min-height: 0; padding: 0; margin-inline-start: 0.2rem;
  vertical-align: middle; border: 0; background: none; color: var(--al-color-text-muted); opacity: 0.4; cursor: pointer; border-radius: var(--al-radius-sm); }
.col-hide svg { width: 14px; height: 14px; }
th:hover .col-hide, .column > header:hover .col-hide, .col-hide:focus-visible { opacity: 1; }
/* Hiding is next to the name; the count and folding at the end. */
.column > header .col-hide { flex: none; }
.col-hide:hover { color: var(--al-color-text); background: var(--al-color-surface-sunk); }
@media (hover: none) { .col-hide { opacity: 0.75; } }
.hidden-columns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.chip-button { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 0; padding: 0.1rem 0.5rem; font-size: 0.8rem;
  border: 1px dashed var(--al-color-line-strong); border-radius: var(--al-radius-sm); background: none; color: var(--al-color-text); cursor: pointer; }
.chip-button svg { width: 13px; height: 13px; color: var(--al-color-text-muted); }
.chip-button:hover { border-style: solid; border-color: var(--al-color-accent); }
th.row-icons, td.row-icons { width: 1%; white-space: nowrap; text-align: end; }
td.row-icons { padding-block: 0.25rem; }
.sidebar .app-version a { display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; text-decoration: none; }
.sidebar .app-version a:hover { color: var(--al-color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.sidebar .app-version svg { width: 12px; height: 12px; }

/* ---- lanes: a stage's column divided by outcome ------------------------------------- */
.column.has-lanes .cards.unlaned.empty { min-height: 0.25rem; padding: 0; }
.column.has-lanes .cards.unlaned.empty.over { min-height: 2.75rem; }
.lane { display: flex; flex-direction: column; gap: var(--al-space-2); border-top: 1px dashed var(--al-color-line-strong); margin-top: var(--al-space-2); }
.lane > header { display: flex; align-items: baseline; gap: var(--al-space-2); padding-block-start: var(--al-space-2); }
.lane h3 { font-size: var(--al-text-xs); font-weight: 400; color: var(--al-color-text-muted); margin: 0; }
/* Take-home pay's flag in the sidebar: the UK's, for now. */
.uk-flag { display: inline-block; inline-size: 1.125rem; block-size: 0.5625rem; margin-inline-start: 0.35rem; vertical-align: middle; border-radius: 1px; box-shadow: 0 0 0 1px var(--al-color-line); }
/* A stage's default sub stage: where a card going into the stage goes. */
.lane-default { font-size: var(--al-text-xs); color: var(--al-color-accent); }
.lane-count { font-size: var(--al-text-xs); color: var(--al-color-text-muted); font-variant-numeric: tabular-nums; }
.lane .cards { min-height: 2.25rem; }
.lane-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
/* A stage's lanes, indented under it in Settings. */
.setting-list li.sub-row { padding-inline-start: 1.6rem; font-size: 0.92rem; }
.setting-list li.sub-row .setting-name { color: var(--al-color-text-muted); }
/* A stage's Active switch; an inactive stage (where closed applications go), quieter. */
/* Settings → Board: a swimlane, a box: its row the box's head, its stages
   (and theirs, their sub stages) in it. */
.stage.swimlane-row { background: var(--al-color-surface-sunk); border-color: var(--al-color-line-strong); border-end-start-radius: 0; border-end-end-radius: 0; }
.stage.swimlane-row .inline-name { font-weight: 500; }
.stage-list > .swimlane-row + .nested { margin-top: -0.4rem; }
.stage-list > li.nested {
  padding: var(--al-space-3); margin-bottom: var(--al-space-3); background: var(--al-color-surface);
  border: 1px solid var(--al-color-line-strong); border-top: 0; border-end-start-radius: var(--al-radius-sm); border-end-end-radius: var(--al-radius-sm);
}
.nested-list .stage-list { margin-bottom: var(--al-space-2); }
.stage-switches { display: flex; flex-wrap: wrap; gap: var(--al-space-3); align-items: center; justify-content: flex-end; }
.stage-switches .stage-swimlane { inline-size: auto; min-block-size: 0; padding: 0.2rem 1.75rem 0.2rem 0.5rem; font-size: var(--al-text-sm); }
.stage-active { font-size: var(--al-text-sm); color: var(--al-color-text-muted); white-space: nowrap; }
.stage-list li.stage.inactive .inline-name { color: var(--al-color-text-muted); }
.stage-list li.sub-row { display: flex; align-items: center; gap: 0.5rem; padding-inline-start: 3.2rem; }
.stage-list li.sub-row input { max-width: 18rem; }
/* A lane's name fills its row, so its buttons line up under its stage's (whose row has a border and padding). */
.stage-list li.sub-row input.inline-name { flex: 1; max-width: none; }
.stage-list li.sub-row:not(.sub-add) { padding-inline-end: calc(0.5rem + 1px); }
.stage-list li.sub-add form { display: flex; gap: 0.5rem; flex: 1; }
.sub-mark { color: var(--al-color-text-muted); }
:dir(rtl) .sub-mark { display: inline-block; transform: scaleX(-1); }
.lane-chips { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }


/* ---- right to left (Arabic) ---------------------------------------------------------- */
/* Arabic letters join: spacing them apart breaks the words. By language, not
   direction, so English inside an Arabic page keeps its tracking. */
:lang(ar) { letter-spacing: 0 !important; }
body:lang(ar) { line-height: 1.6; }
/* Icons that point somewhere point the other way. */
:dir(rtl) .flip-rtl { transform: scaleX(-1); }
/* What people wrote reads in its own direction: English notes left to right. */
:dir(rtl) :is(.posting-text, .email-plain, .email-quote, .app-notes, .note-body, .app-event-body, .clamp, .prose) { unicode-bidi: plaintext; }

/* ---- an offer accepted: the celebration ----------------------------------------------- */
.celebrate-hero { position: relative; overflow: hidden; padding: 3rem 2rem 2.25rem; border: 1px solid var(--al-color-line);
  border-radius: calc(var(--al-radius-sm) * 2); background:
    radial-gradient(120% 90% at 50% 0%, var(--al-color-accent-wash), transparent 70%), var(--al-color-surface); text-align: center; }
.celebrate-hero .eyebrow { color: var(--al-color-accent); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; margin: 0; }
.celebrate-hero .celebrate-title { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0.35rem 0 0.25rem; }
.celebrate-lead { font-family: var(--al-font-serif); font-size: 1.3rem; margin: 0 0 1.75rem; }
.celebrate-offer { position: relative; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start;
  text-align: start; max-width: 38rem; width: 100%; padding: 1.25rem 1.4rem; border: 1px solid var(--al-color-line-strong);
  border-radius: var(--al-radius-sm); background: var(--al-color-bg); }
.celebrate-offer h2 { font-size: 1.35rem; margin: 0 0 0.2rem; }
.celebrate-offer p { margin: 0 0 0.45rem; }
.celebrate-pay { font-size: 1.6rem; font-weight: 500; }
.celebrate-note { font-family: var(--al-font-serif); }
.celebrate-stats h2, .celebrate-thanks h2 { font-size: 1.3rem; margin: 0 0 0.75rem; }
.celebrate-tiles { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.celebrate-tile .al-stat__value { font-size: 2rem; color: var(--al-color-accent); }
.celebrate-thanks .app-people li { justify-content: space-between; }
.celebrate-thanks .al-button svg { width: 13px; height: 13px; margin-inline-end: 0.3rem; vertical-align: -2px; }
.celebrate-actions { display: flex; gap: 0.6rem; justify-content: center; }
.wrap-up-all { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.wrap-up .import-table select { width: auto; font-size: 0.85rem; padding-block: 0.2rem; }
/* Confetti: falling once, then still; none for those who'd rather not have motion. */
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti span { position: absolute; top: -1rem; inset-inline-start: var(--x); width: 0.5rem; height: 0.85rem; border-radius: 2px;
  background: oklch(72% 0.16 var(--hue)); opacity: 0; animation: confetti-fall 2.6s ease-in var(--d) 1 forwards; }
.confetti span:nth-child(3n) { width: 0.65rem; height: 0.65rem; border-radius: 50%; }
@keyframes confetti-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(28rem) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* ---- many at once: selecting, and the bar of what to do ------------------------------- */
/* The bar is the system's (.al-bulk-bar), with room above it. */
.bulk-bar { margin-block-start: 0.75rem; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.bulk-actions select { width: auto; font-size: 0.85rem; padding-block: 0.2rem; }
th.row-select, td.row-select { width: 1%; padding-inline: 0.75rem 0.25rem; }
/* A checkbox without a label of its own (a row's): as the system's choice draws one. */
td.row-select input, th.row-select input { inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--al-color-accent); cursor: pointer; vertical-align: middle; }
.card.selected { outline: 2px solid var(--al-color-accent); outline-offset: 1px; background: color-mix(in oklch, var(--al-color-accent-wash) 50%, var(--al-color-surface)); }

/* ---- several people: the account screen and the admin centre ------------------------- */
body.no-account .al-sidebar__nav, body.no-account #logout + * { display: none; }
.account-page { max-width: 34rem; margin: 6vh auto 0; gap: 1rem; }
.account-page h1 { font-size: 2.2rem; }
.account-lead { font-family: var(--al-font-serif); font-size: 1.15rem; margin: 0; }
.account-form { display: flex; flex-direction: column; gap: 0.9rem; }
.account-form textarea { width: 100%; resize: vertical; }
.account-form .agree { font-family: var(--al-font-serif); font-size: 1rem; line-height: 1.5; color: var(--al-color-text-muted); }
.admin-page { gap: 1.75rem; }
.admin-section h2 { font-size: 1.3rem; display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.6rem; }
.admin-section .count { margin-inline-start: 0; }
.admin-section select { width: auto; font-size: 0.85rem; padding-block: 0.2rem; }
.admin-tiles { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* ---- take-home pay (an experiment) ---------------------------------------------------- */
/* The sidebar's "Experimental": the system's warning badge, at the end. */
.nav-badge { margin-inline-start: auto; }
.take-home .page-head h1 { margin-inline-end: 0; }
.th-meta { margin-inline-start: auto; align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.th-where { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; white-space: nowrap; }
.th-where a { color: var(--al-color-text); text-decoration-color: var(--al-color-line-strong); }
.th-year { display: flex; align-items: center; gap: 0.5rem; padding-inline-start: 1rem; border-inline-start: 1px solid var(--al-color-line); }
.th-head-label { font-size: 0.8125rem; color: var(--al-color-text-muted); font-weight: 500; white-space: nowrap; }
.th-year select { width: auto; }
.th-intro { margin: -0.5rem 0 0; max-width: 46rem; }
.th-layout { display: grid; grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.th-form { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 1rem; }
.th-form .panel > h2 { margin-bottom: 0.75rem; }
.th-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.th-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.75rem; align-items: end; }
.location-fields { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.75rem; }
.location-fields .check { font-size: 0.9rem; }
.location-fields .field { width: min(100%, 22rem); }
.th-pair.th-top { align-items: start; }
.th-money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; align-items: end; }
.th-money > :first-child { grid-column: 1 / -1; }
.th-money #th-amount { font-size: 1.1rem; }
.th-group { display: flex; flex-direction: column; gap: 0.6rem; border-top: 1px dashed var(--al-color-line); padding-top: 0.75rem; }
.th-group h3 { font-size: 0.875rem; font-weight: 500; margin: 0; }
.th-full > summary { font-size: 0.9rem; }
.th-full[open] > summary { margin-bottom: 0.75rem; }
.th-side-by-side thead th { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.th-from > button { padding-inline: var(--al-space-2); }
.th-label { font-size: 0.8125rem; color: var(--al-color-text-muted); font-weight: 500; letter-spacing: 0.01em; }
.th-chosen { color: var(--al-color-text-muted); font-weight: 400; font-size: 0.8125rem; text-align: end; }
.th-also { color: var(--al-color-text-muted); font-size: 0.6em; font-weight: 400; }
.th-rate-note { margin: -0.4rem 0 0; }
.app-take-home { margin: 0.3rem 0 0; }
.app-take-home b { color: var(--al-color-text); font-weight: 500; }
.th-form .al-hint, .th-hint { margin: 0; font-size: 0.75rem; line-height: 1.45; color: var(--al-color-text-muted); }
.th-loans { border: 0; padding: 0; margin: 0; min-width: 0; }
.th-loans legend { font-size: 0.8125rem; color: var(--al-color-text-muted); font-weight: 500; padding: 0; margin-bottom: 0.35rem; }
.th-checks { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.th-check { font-size: 0.875rem; }
.th-more { margin-top: 0.85rem; }
.th-more > summary { font-size: var(--al-text-sm); }
.th-more[open] > summary { margin-bottom: 0.75rem; }
.th-results { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.th-results > .empty { margin: 0; padding: 2rem 0; color: var(--al-color-text-muted); }
.th-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.th-tiles .al-stat__value, .th-headline .al-stat__value { font-variant-numeric: tabular-nums; }
.th-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.th-headline { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--al-color-line); }
.th-headline .al-stat__value { font-size: 2rem; }
.th-verdict { margin: 0; font-family: var(--al-font-serif); font-size: 1.15rem; }
.th-verdict b { font-family: var(--al-font-sans); font-weight: 600; color: var(--al-color-accent); }
/* The system's table (sub, total and aside rows), a little tighter. */
.th-table { font-size: var(--al-text-sm); }
.th-table th, .th-table td { padding: 0.4rem 0.5rem; }
.th-workings > summary { font-size: var(--al-text-sm); }
.th-workings[open] > summary { margin-bottom: 0.75rem; }
.th-bands { margin-top: 0.85rem; }
.th-bands h3 { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }
.th-small-print { margin: 0; max-width: 46rem; }
.th-code-advice { margin: 0 0 0.75rem; }
.th-code-advice b { font-family: var(--al-font-mono); font-size: 0.95em; }
.th-code-differs { color: var(--al-color-warning); }
.th-advice b { font-family: var(--al-font-mono); }
.th-reasons { margin: 0.25rem 0 0.4rem; padding-inline-start: 1.1rem; font-size: 0.8125rem; }
.th-more-pay { color: var(--al-color-accent); font-weight: 500; }
.th-less-pay { color: var(--al-color-danger); font-weight: 500; }
.th-desired-none { margin: 0; }
.th-gate { max-width: 40rem; }
.th-disclaimer { padding: 0.85rem 1rem; border: 1px solid var(--al-color-warning); border-inline-start-width: 3px; border-radius: var(--al-radius-sm); background: var(--al-color-warning-wash); font-size: 0.8125rem; line-height: 1.5; color: var(--al-color-text); }
.th-disclaimer p { margin: 0; }
.th-disclaimer p + p { margin-top: 0.5rem; }
.th-disclaimer b { color: var(--al-color-warning); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.th-grants { display: flex; flex-direction: column; gap: 0.75rem; }
.th-grant { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem; border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface); }
.th-grant-head { display: flex; align-items: center; gap: 0.75rem; }
.th-grant-name { flex: 1; font-weight: 500; }
.th-notes p { margin: 0; }
.th-projection .th-table th.al-table__num { white-space: nowrap; }
.th-gate > h2 { margin-bottom: 0.5rem; }
.th-results.th-stale > :not(.th-problem) { opacity: 0.45; transition: opacity 0.15s; }
.th-problem { margin: 0; }
#th-tax_code { font-family: var(--al-font-mono); text-transform: uppercase; }
#th-tax_code::placeholder { font-family: var(--al-font-sans); text-transform: none; }
.th-desired-table td.al-table__num { vertical-align: top; }
.th-cell-main { display: block; }
.th-cell-diff { display: block; font-size: 0.75rem; color: var(--al-color-text-muted); }
.th-desired-table td .th-more-pay, .th-desired-table td .th-less-pay { font-weight: 500; }
.th-cell-diff.th-more-pay { color: var(--al-color-accent); }
.th-cell-diff.th-less-pay { color: var(--al-color-danger); }
@media (max-width: 64rem) { .th-compare { grid-template-columns: 1fr; } }
@media (max-width: 52rem) {
  .th-meta { margin-inline-start: 0; width: 100%; }
  .th-year { padding-inline-start: 0; border-inline-start: 0; }
  .th-layout { grid-template-columns: 1fr; }
  .th-form { position: static; }

}

/* ---- cycles: the sidebar's box, and their page ---------------------------------------- */
/* Under hunt's name: a box per running cycle; those the board shows are marked. */
.cycle-box { margin-block-end: var(--al-space-4); }
.cycle-cards { display: flex; flex-direction: column; gap: var(--al-space-1-5); }
.cycle-card { min-block-size: 3rem; border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); background: color-mix(in oklch, var(--al-color-surface) 55%, transparent); }
.cycle-card[aria-current="true"] { border-color: var(--al-color-accent); box-shadow: inset 3px 0 0 var(--al-color-accent); background: var(--al-color-surface); color: var(--al-color-text); }
.cycle-card[aria-current="true"] > .al-icon { color: var(--al-color-accent); }
.cycle-card.is-past .al-icon { color: var(--al-color-text-muted); }
.cycle-what { display: flex; flex-direction: column; line-height: 1.25; min-inline-size: 0; flex: 1; white-space: normal; }
.cycle-name { display: flex; align-items: center; gap: var(--al-space-1-5); min-inline-size: 0; }
.cycle-name-text { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.cycle-meta { font-size: var(--al-text-xs); color: var(--al-color-text-muted); text-wrap: pretty; }
/* Collapsed to icons (wider screens: a phone's menu shows the cycles whole). */
@media (min-width: 52.0625rem) {
  [data-sidebar="collapsed"] .cycle-card { min-block-size: 0; border-color: transparent; background: none; box-shadow: none; }
  [data-sidebar="collapsed"] .cycle-card[aria-current="true"] { background: var(--al-color-surface); }
}

.al-page-head > h1 { font-family: var(--al-font-display); font-weight: 400; margin: 0; }
.al-page-head > p { margin: 0; }
/* A page's line about itself takes its words' width (to the measure), so a
   short one leaves room for the page's actions beside it. */
.al-page-head__lede { flex-basis: auto; }
.cycle-section { display: flex; flex-direction: column; gap: var(--al-space-3); }
.cycle-section > h2 { margin: 0; }
.cycle-running { border-color: var(--al-color-accent); }
.cycle-past-card { display: flex; flex-direction: column; gap: var(--al-space-3); padding: var(--al-space-4) var(--al-space-5); }
.cycle-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--al-space-1) var(--al-space-3); }
.cycle-head h3 { margin: 0; font-family: var(--al-font-display); font-weight: 400; font-size: var(--al-text-xl); }
.cycle-edit-button { margin-inline-start: auto; }
.cycle-desc { margin: 0; max-inline-size: 62ch; text-wrap: pretty; }
.cycle-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--al-space-4); }
.cycle-actions { display: flex; flex-wrap: wrap; gap: var(--al-space-2); }
.cycle-outcome { display: flex; flex-wrap: wrap; gap: var(--al-space-2); align-items: baseline; }
.cycle-figures { margin: 0; display: flex; flex-wrap: wrap; gap: var(--al-space-2) var(--al-space-6); font-size: var(--al-text-sm); }
.cycle-figures > div { display: flex; gap: var(--al-space-1-5); align-items: baseline; }
.cycle-figures dt { color: var(--al-color-text-muted); }
.cycle-figures dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.cycle-edit { display: flex; flex-direction: column; gap: var(--al-space-4); }
.cycle-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--al-space-3); }
.cycle-what-happens { display: flex; flex-direction: column; gap: var(--al-space-2); padding: var(--al-space-3) var(--al-space-4); border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); }
.cycle-effects { margin: 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: var(--al-space-1); font-size: var(--al-text-sm); }

/* ---- prep: what to read, practise and rehearse ---------------------------------------- */
.prep-group-head h2 { margin: 0; font-size: var(--al-text-base); font-weight: 500; }
.prep-bar { display: block; block-size: 4px; background: var(--al-color-line); border-radius: 2px; overflow: hidden; }
.prep-bar > span { display: block; block-size: 100%; background: var(--al-color-accent); }
.prep-soon { color: var(--al-color-warning); font-weight: 500; }
.prep-panel { display: flex; flex-direction: column; gap: var(--al-space-6); }
.prep-filters { display: flex; flex-wrap: wrap; gap: var(--al-space-3); align-items: flex-end; }
.prep-filters .field:first-child { flex: 0 1 16rem; }
.prep-filters .field { flex: 0 1 12rem; }
.prep-summary { margin-inline-start: auto; }
.prep-add, .story-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--al-space-3); }
.prep-wide { grid-column: 1 / -1; }
.prep-daily { align-self: end; }
.prep-add-actions { grid-column: 1 / -1; display: flex; gap: var(--al-space-2); justify-content: flex-end; align-items: center; }
.prep-group { display: flex; flex-direction: column; }
.prep-group-head { display: flex; align-items: baseline; gap: var(--al-space-2); padding-block-end: var(--al-space-2); border-block-end: 1px solid var(--al-color-line-strong); }
.prep-group-head .al-hint { margin-inline-start: auto; }
.prep-list { list-style: none; margin: 0; padding: 0; }
.prep-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--al-space-3); align-items: start; padding-block: var(--al-space-3); border-block-end: 1px solid var(--al-color-line); }
.prep-item > input { inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: 0.2rem; cursor: pointer; }
.prep-body { display: flex; flex-direction: column; gap: var(--al-space-1); min-inline-size: 0; }
.prep-line { display: flex; flex-wrap: wrap; gap: var(--al-space-1) var(--al-space-2); align-items: baseline; }
.prep-title { text-wrap: pretty; }
.prep-item.done .prep-title { color: var(--al-color-text-muted); text-decoration: line-through; text-decoration-color: var(--al-color-line-strong); }
.prep-meta { display: flex; flex-wrap: wrap; gap: var(--al-space-1) var(--al-space-3); font-size: var(--al-text-sm); color: var(--al-color-text-muted); }
.prep-meta a { color: var(--al-color-text-muted); }
.prep-confidence { display: flex; flex-wrap: wrap; gap: var(--al-space-2); align-items: center; margin-block-start: var(--al-space-1); }
.prep-confidence .al-segmented > button { min-block-size: 1.75rem; font-size: var(--al-text-sm); }
.prep-tools { display: flex; gap: var(--al-space-1); align-items: center; }
.prep-empty { margin: 0; padding-block: var(--al-space-3); font-size: var(--al-text-sm); color: var(--al-color-text-muted); }
.prep-intro { margin: 0; color: var(--al-color-text-muted); max-inline-size: var(--al-size-measure); }
.story-list { display: flex; flex-direction: column; gap: var(--al-space-3); }
.story-head { display: flex; flex-direction: column; gap: var(--al-space-1); min-inline-size: 0; }
.story-title { font-weight: 500; }
.story-themes { display: flex; flex-wrap: wrap; gap: var(--al-space-1); align-items: center; }
.story-parts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--al-space-2) var(--al-space-4); max-inline-size: var(--al-size-measure); }
.story-parts dt { font-weight: 500; color: var(--al-color-accent); }
.story-parts dd { margin: 0; font-family: var(--al-font-serif); line-height: var(--al-leading-prose); white-space: pre-line; }
.prep-add-story { align-self: flex-start; }

/* ---- adding an application: a posting's link, read, or by hand ------------------------ */
.new-link-row { display: flex; gap: var(--al-space-2); }
.new-link-row > .al-button { flex: none; }
.new-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--al-space-4); }
.new-label { display: flex; gap: var(--al-space-2); align-items: baseline; }
.new-filled { font-size: var(--al-text-xs); color: var(--al-color-accent); font-weight: 400; }
.new-filled[hidden] { display: none; }
.new-read:empty, .new-side[hidden] { display: none; }
.new-side { margin: 0; }
@media (max-width: 40rem) { .new-fields { grid-template-columns: 1fr; } }
.table-overdue { color: var(--al-color-warning); font-weight: 500; }

/* ---- an application, as it reads: what's next and the timeline, the facts beside ------ */
.page.application.reading { max-width: 72rem; margin: 0; gap: var(--al-space-5); }
.al-back-link { align-self: flex-start; }
.app-page-head { align-items: center; margin: 0; }
.app-page-head > .logo { inline-size: 3rem; block-size: 3rem; margin: 0; }
.app-titles { display: flex; flex-direction: column; gap: var(--al-space-1); min-inline-size: 0; }
.app-titles h1 { margin: 0; font-family: var(--al-font-display); font-weight: 400; font-size: var(--al-text-2xl); }
.app-sub { display: flex; flex-wrap: wrap; gap: var(--al-space-3); align-items: center; color: var(--al-color-text-muted); }
.app-sub a { color: var(--al-color-text); }
.app-cycle { inline-size: auto; }
.app-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--stages, 5), minmax(0, 1fr)); gap: var(--al-space-1); }
.app-stages button { all: unset; box-sizing: border-box; cursor: pointer; display: block; inline-size: 100%; padding-block: var(--al-space-2); font-size: var(--al-text-sm);
  border-block-start: 3px solid var(--al-color-line); color: var(--al-color-text-muted); }
.app-stages button.reached { border-block-start-color: var(--al-color-accent); }
.app-stages button[aria-current="step"] { color: var(--al-color-text); font-weight: 500; }
.app-stages button:hover:not(:disabled) { color: var(--al-color-text); }
.app-stages button:focus-visible { outline: 2px solid var(--al-color-focus); outline-offset: 2px; }
.app-stages button:disabled { cursor: default; }
.app-stages.archived { opacity: 0.55; }
.app-stages .stage-no { font-variant-numeric: tabular-nums; }
/* On a phone, many stages don't fit as equal columns: each keeps its name's
   width, and the row scrolls. */
@media (max-width: 40rem) {
  .app-stages { grid-template-columns: repeat(var(--stages, 5), max-content); gap: var(--al-space-3); overflow-x: auto; }
  .app-stages button { white-space: nowrap; }
}
.page.application .app-standing { margin: 0; }
.app-layout { display: flex; flex-wrap: wrap; gap: var(--al-space-8); align-items: flex-start; }
.app-main { display: flex; flex-direction: column; gap: var(--al-space-6); min-inline-size: 0; flex: 999 1 32rem; }
.app-aside { display: flex; flex-direction: column; gap: var(--al-space-6); flex: 1 1 16rem; max-inline-size: 22rem; }
.app-panel-head { display: flex; align-items: baseline; gap: var(--al-space-2); }
.app-panel-head h2 { margin: 0; }
.app-panel-tools { margin-inline-start: auto; display: flex; gap: var(--al-space-2); align-items: baseline; }
.app-panel-add { align-self: flex-start; }
.app-main > .app-section { border-block-start: 1px solid var(--al-color-line-strong); }
.upnext { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.upnext-item { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: var(--al-space-3); align-items: start; padding-block: var(--al-space-3); border-block-end: 1px solid var(--al-color-line); }
.upnext-icon { display: inline-grid; place-items: center; margin-block-start: 0.15rem; color: var(--al-color-text-muted); }
.upnext-icon.is-step { color: var(--al-color-accent); }
.upnext-icon.is-late, .upnext-due.is-late { color: var(--al-color-warning); }
.upnext-due.is-late { font-weight: 500; }
.upnext-what { display: flex; flex-direction: column; gap: var(--al-space-0-5); min-inline-size: 0; text-wrap: pretty; }
.upnext-due { font-size: var(--al-text-sm); color: var(--al-color-text-muted); }
.upnext-tools { display: flex; flex-wrap: wrap; gap: var(--al-space-1); justify-content: flex-end; }
.composer { display: flex; flex-direction: column; gap: var(--al-space-3); padding: var(--al-space-3); border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface); }
.composer-kinds { align-self: flex-start; }
.composer-kinds > button { min-block-size: 1.75rem; font-size: var(--al-text-sm); }
.composer-note { display: flex; gap: var(--al-space-2); }
.composer-note > .al-button { flex: none; }
.composer-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--al-space-3); }
.composer-wide, .composer-foot { grid-column: 1 / -1; }
.composer-half { grid-column: span 2; }
@media (max-width: 40rem) { .composer-half { grid-column: 1 / -1; } }
.composer-foot { display: flex; flex-wrap: wrap; gap: var(--al-space-2) var(--al-space-3); align-items: center; }
.composer-foot > .al-button--primary { margin-inline-start: auto; }
.composer-remind { display: flex; align-items: center; gap: var(--al-space-2); }
.composer-remind select { inline-size: auto; }
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: var(--al-space-3); padding-block: var(--al-space-3); border-block-end: 1px solid var(--al-color-line); }
.tl-dot { justify-self: center; inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; margin-block-start: 0.55rem; background: var(--al-color-line-strong); }
.tl-note-item .tl-dot { background: var(--al-color-text); }
.tl-step .tl-dot { inline-size: 0.75rem; block-size: 0.75rem; margin-block-start: 0.35rem; border: 2px solid var(--al-color-accent); background: transparent; }
.tl-step.done .tl-dot { background: var(--al-color-accent); }
.tl-what { display: flex; flex-direction: column; gap: var(--al-space-0-5); min-inline-size: 0; }
.tl-title { text-wrap: pretty; }
.tl-step .tl-title { font-weight: 500; }
.tl-event .tl-title { color: var(--al-color-text-muted); }
.tl-serif { font-family: var(--al-font-serif); white-space: pre-line; }
.tl-sub { font-size: var(--al-text-sm); color: var(--al-color-text-muted); }
.tl-where { font-size: var(--al-text-sm); align-self: flex-start; }
.tl-prep, .tl-note { font-size: var(--al-text-sm); font-family: var(--al-font-serif); padding-inline-start: var(--al-space-3); border-inline-start: 2px solid var(--al-color-line); margin-block-start: var(--al-space-1); white-space: pre-line; }
.tl-when { font-size: var(--al-text-sm); color: var(--al-color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--al-space-2) var(--al-space-4); font-size: var(--al-text-sm); }
.app-facts dt { color: var(--al-color-text-muted); }
.app-facts dd { margin: 0; overflow-wrap: anywhere; }
.app-prep, .app-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--al-space-2); font-size: var(--al-text-sm); }
.app-prep li { display: flex; gap: var(--al-space-2); align-items: flex-start; }
.app-prep input { margin-block-start: 0.2rem; }
.app-links { gap: var(--al-space-3); font-size: inherit; }
.app-links li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--al-space-2); align-items: start; }
.app-link { display: flex; flex-direction: column; min-inline-size: 0; overflow-wrap: anywhere; }
.app-link-form { display: flex; flex-direction: column; gap: var(--al-space-3); padding-block-start: var(--al-space-3); border-block-start: 1px solid var(--al-color-line); }
.app-link-form > .al-button { align-self: flex-start; }
.app-aside .app-people li { flex-direction: column; align-items: flex-start; gap: 0; }
.app-aside .app-contact { margin-inline-start: 0; }
.app-aside .person-add, .app-aside .file-add { grid-template-columns: 1fr; }
.app-aside .tag-editor { margin: 0; }
.app-aside .tag-editor-label { display: none; }
.app-delete { border-block-start: 1px solid var(--al-color-line); padding-block-start: var(--al-space-4); }
.pay-figure { font-family: var(--al-font-display); font-size: var(--al-text-xl); font-variant-numeric: tabular-nums; }
.pay-month b { color: var(--al-color-text); font-weight: 400; font-variant-numeric: tabular-nums; }
.pay-versus { display: flex; flex-direction: column; gap: var(--al-space-1-5); }
.pay-versus:empty { display: none; }
.pay-track { position: relative; block-size: 0.5rem; background: var(--al-color-line); border-radius: var(--al-radius-sm); }
.pay-range { position: absolute; inset-block: 0; background: var(--al-color-accent); border-radius: var(--al-radius-sm); }
.pay-target { position: absolute; inset-block: -0.3rem; inline-size: 2px; background: var(--al-color-text); }
.pay-verdict { font-size: var(--al-text-sm); color: var(--al-color-text-muted); text-wrap: pretty; }
.pay-verdict.is-above { color: var(--al-color-success); }
.pay-verdict.is-below { color: var(--al-color-warning); }
.pay-how > summary { font-size: var(--al-text-sm); }
.pay-table { font-size: var(--al-text-sm); }
.app-page-head .al-save-state:not([data-state]) { display: none; }
.stats-periods { flex-wrap: wrap; }
.stats-periods > button { display: inline-flex; align-items: center; gap: var(--al-space-1-5); }
.th-apps { display: flex; flex-direction: column; gap: var(--al-space-3); padding-block-start: var(--al-space-6); border-block-start: 1px solid var(--al-color-line); }
.th-apps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--al-space-2) var(--al-space-4); }
.th-apps-head h2 { margin: 0; }
.th-app { display: flex; flex-direction: column; }

/* ---- Settings: tabs down the side, sections that say who they're for ------------------ */
.page.settings { max-width: 66rem; margin: 0; gap: var(--al-space-6); }
.settings-layout { display: flex; flex-wrap: wrap; gap: var(--al-space-6) var(--al-space-8); align-items: flex-start; }
.settings-nav { flex: 1 1 12rem; max-inline-size: 14rem; display: flex; flex-direction: column; gap: 2px; position: sticky; inset-block-start: var(--al-space-6); }
.settings-nav a { display: flex; flex-direction: column; gap: 1px; padding: var(--al-space-2) var(--al-space-3); border-inline-start: 2px solid transparent;
  color: var(--al-color-text); text-decoration: none; border-start-end-radius: var(--al-radius-sm); border-end-end-radius: var(--al-radius-sm); }
.settings-nav a:hover { background: var(--al-color-surface-sunk); }
.settings-nav a[aria-current="page"] { border-inline-start-color: var(--al-color-accent); font-weight: 500; background: var(--al-color-surface-sunk); }
.settings-nav-hint { font-size: var(--al-text-xs); color: var(--al-color-text-muted); font-weight: 400; }
.settings-nav-hint:empty { display: none; }
.settings-content { flex: 999 1 30rem; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--al-space-6); }
.settings-content .settings-panel { border-top: 0; padding-top: 0; }
.settings-content .panel-head { justify-content: flex-start; flex-wrap: wrap; gap: var(--al-space-2) var(--al-space-3); align-items: baseline; }
.settings-content .panel-head h2 { margin: 0; font-size: var(--al-text-lg); }
.settings-edit { margin-inline-start: auto; }
.settings-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--al-space-2) var(--al-space-6); padding-block-start: var(--al-space-3); border-block-start: 1px solid var(--al-color-line); }
.settings-row-label { display: flex; flex-direction: column; gap: var(--al-space-0-5); }
.settings-row > .al-segmented { align-self: start; justify-self: start; }
.settings-copy { display: flex; flex-wrap: wrap; gap: var(--al-space-2); }
.settings-copy > input { flex: 1 1 18rem; }
.settings-mono { font-family: var(--al-font-mono); font-size: var(--al-text-sm); }
@media (max-width: 52rem) { .settings-nav { position: static; max-inline-size: none; flex-direction: row; flex-wrap: wrap; } .settings-nav-hint { display: none; } }
/* Switchers as tall as the fields and selects beside them: the segments
   inside the switcher's border. */
.al-segmented > label, .al-segmented > button { min-block-size: calc(var(--al-field-height) - 2 * var(--al-border-hairline)); }
.al-segmented > button[aria-pressed="true"] .al-badge--accent { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.board-cycles .al-segmented { max-inline-size: 100%; overflow-x: auto; }
.board-cycles .al-segmented > button { flex: none; }
.filter-more-toggle { white-space: nowrap; }
.filter-more[hidden] { display: none; }
.admin-users { display: flex; flex-direction: column; gap: var(--al-space-4); }
.admin-sub { margin: 0; font-size: var(--al-text-lg); }
.admin-invite { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--al-space-3); align-items: end; }
.admin-invite > .al-button { justify-self: start; }
.admin-page .viz-system { margin: 0; padding: 0; border: 0; }

/* ---- a file, as it reads: its preview, its versions and details beside --------------- */
.app-page-head > .doc-icon { inline-size: 3rem; block-size: 3rem; margin: 0; }
.page.record-page.reading .app-main .preview-frame { block-size: min(80vh, 64rem); }
.page.record-page.reading .preview-text, .page.record-page.reading .preview-image { max-block-size: 80vh; }
.doc-shown { margin: 0; overflow-wrap: anywhere; }
.doc-description { margin: 0; font-family: var(--al-font-serif); font-size: var(--al-text-sm); white-space: pre-line; }
.doc-version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--al-space-2); }
.doc-version-list > li { display: flex; flex-direction: column; gap: var(--al-space-1); }
.doc-version { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: var(--al-space-0-5); padding: var(--al-space-2) var(--al-space-3);
  border: 1px solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface); }
.doc-version:hover { border-color: var(--al-color-line-strong); }
.doc-version:focus-visible { outline: 2px solid var(--al-color-focus); outline-offset: 2px; }
.doc-version[aria-current="true"] { border-color: var(--al-color-accent); box-shadow: inset 2px 0 0 var(--al-color-accent); }
.doc-version-head { display: flex; gap: var(--al-space-2); align-items: baseline; min-inline-size: 0; }
.doc-version-head b { color: var(--al-color-accent); font-weight: 500; }
.doc-version-name { font-weight: 500; overflow-wrap: anywhere; }
.doc-version-sent { padding-inline: var(--al-space-3); }
.doc-upload { margin: 0; }

/* ---- lists: the title and what's new on a row, then the tools to find things -------- */
.list-page > .al-page-head { margin: 0; }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-3); }
.list-tools > .al-search { flex: 1 1 16rem; max-inline-size: 22rem; }
.list-tools > select { inline-size: auto; }
.page.record-page.reading { max-width: 72rem; margin: 0; gap: var(--al-space-5); }
.profile-prose { font-size: 1rem; }
.profile-picture { display: flex; align-items: center; gap: var(--al-space-3); flex-wrap: wrap; }
.profile-picture > .logo { margin: 0; }
.app-aside .record-view .facts { font-size: var(--al-text-sm); }

/* ---- the calendar's events as blocks: in a day or a week ---------------------------- */
.cal-week-dow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--al-color-text-muted); }
.ev.ev-block { flex-direction: column; align-items: stretch; gap: 0.1rem; padding: 0.3rem 0.45rem; }
.ev-block .ev-title { font-weight: 500; overflow-wrap: anywhere; }
.ev-block .ev-who { display: flex; align-items: center; gap: 0.25rem; color: var(--al-color-text-muted); min-width: 0; }
.ev-block .ev-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On a phone, a week keeps its seven columns, and scrolls sideways. */
@media (max-width: 52rem) {
  /* Its own width doesn't widen the page: it scrolls within it. */
  .cal-time { overflow-x: auto; --gutter: 3.25rem; contain: inline-size; }
  .cal-time:has(.cal-time-head) > * { min-inline-size: 40rem; }
  /* The filters wrap to the page's width. */
  .cal-filters { inline-size: 100%; justify-content: space-between; }
}
.admin-accounts { display: flex; flex-direction: column; gap: var(--al-space-3); }
.admin-accounts > .list-tools .al-search { max-inline-size: 16rem; }
.admin-accounts tbody tr[aria-selected="true"] > * { background: var(--al-color-accent-wash); }
.admin-accounts tbody tr[aria-selected="true"] > :first-child { box-shadow: inset 3px 0 0 var(--al-color-accent); }
.admin-breakdown-head { display: flex; align-items: baseline; gap: var(--al-space-3); }
/* Up next, at the top of the narrow column: its buttons under each item, and what to add after it. */
.app-aside .upnext-item { grid-template-columns: 1.25rem minmax(0, 1fr); }
.app-aside .upnext-tools { grid-column: 2; justify-content: flex-start; }
.upnext-add { display: flex; flex-wrap: wrap; gap: var(--al-space-1) var(--al-space-3); }
.composer-head { display: flex; align-items: center; gap: var(--al-space-3); }
.composer-head > .al-button { margin-inline-start: auto; }
.composer-title { margin: 0; font-size: var(--al-text-base); font-weight: 500; }
.board-welcome { display: flex; flex-direction: column; gap: var(--al-space-6); }
.board-welcome .al-empty__title { font-family: var(--al-font-display); font-weight: 400; font-size: var(--al-text-3xl); }
.board-welcome .al-empty p { margin: 0; }
.past-cycles > summary { align-items: center; gap: var(--al-space-2); font-weight: 500; }
.past-cycles .al-disclosure__body { display: flex; flex-direction: column; gap: var(--al-space-3); }
/* The theme and the language, a click away, above Settings. */
.quick-settings { display: flex; flex-direction: column; gap: var(--al-space-0-5); padding-block-end: var(--al-space-1); border-block-end: 1px solid var(--al-color-line); }
.quick-settings .al-sidebar__link { color: var(--al-color-text-muted); }
.quick-settings .al-sidebar__link:hover { color: var(--al-color-text); }
@media (max-width: 52rem) { .quick-settings { flex-direction: row; border: 0; padding: 0; } }
.board-welcome .al-empty { border: 0; background: none; padding-inline: 0; align-items: flex-start; text-align: start; }
/* The footer under every page, the design system's (.al-footer), as
   arabesquelabs.com's: the studio's lockup and the links on one line, the
   legal lines under them. hunt gives it the page's gutter. */
.site-foot { padding-inline: 2rem; }
.site-foot .al-lockup { font-size: var(--al-text-base); }
.al-footer__legal p { margin: 0; line-height: 1.6; }
/* English, in an Arabic page: still left to right, set to the page's side. */
[dir="rtl"] .al-footer__legal [dir="ltr"] { text-align: right; }
@media (max-width: 52rem) {
  /* One column, not wrapping: the legal line's flex-basis (100%, for a row)
     would otherwise wrap it into a second column, off a phone's screen. */
  .site-foot { padding-inline: 1rem; flex-direction: column; flex-wrap: nowrap; }
}