/* Noise Patrol GO palettes supplied by the product owner. */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #0B0D0F;
    --surface: #15181C;
    --surface-raised: #1F242A;
    --text-primary: #F2F5F8;
    --text-secondary: #9AA2AB;
    --text-tertiary: #7A828B;
    --accent: #7FC142;
    --on-accent: #0B0D0F;
    --pass: #7FC142;
    --warning: #FFA827;
    --over: #FF4D4A;
    --separator: rgb(255 255 255 / 8%);
    --shadow: rgb(0 0 0 / 28%);
    --tint: #5AA0EB;
    --vehicle: #00649E;
}

:root[data-theme="light"] {
    color-scheme: light;
    --background: #F5F7F9;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --text-primary: #0C0F13;
    --text-secondary: #565E68;
    --text-tertiary: #69717B;
    --accent: #2B7D12;
    --on-accent: #FFFFFF;
    --pass: #2B7D12;
    --warning: #9A5800;
    --over: #D70015;
    --separator: rgb(0 0 0 / 8%);
    --shadow: rgb(0 0 0 / 5%);
    --tint: #0F4F8C;
    --vehicle: #00649E;
}

:root[data-theme="high-contrast"] {
    color-scheme: light;
    --background: #FFFFFF;
    --surface: #FFFFFF;
    --surface-raised: #EFF2F4;
    --text-primary: #000000;
    --text-secondary: #2A2E34;
    --text-tertiary: #565C64;
    --accent: #1E650B;
    --on-accent: #FFFFFF;
    --pass: #1E650B;
    --warning: #8F5200;
    --over: #B80000;
    --separator: rgb(0 0 0 / 22%);
    --shadow: rgb(0 0 0 / 0%);
    --tint: #0F4F8C;
    --vehicle: #00649E;
}

/* Values derived from the supplied palettes for Apple-style fills and controls. */
:root,
:root[data-theme="dark"] { --segment-thumb: color-mix(in srgb, var(--text-tertiary) 55%, var(--surface-raised)); --badge-tint: 14%; }
:root[data-theme="light"] { --segment-thumb: var(--surface-raised); --badge-tint: 7%; }
:root[data-theme="high-contrast"] { --segment-thumb: var(--background); --badge-tint: 7%; }

:root {
    --canvas: var(--background);
    --ink: var(--text-primary);
    --muted: var(--text-secondary);
    --border: var(--separator);
    --control-border: var(--text-tertiary);
    /* Links, plain buttons and keyboard focus use the brand green; the palette's tint stays reserved. */
    --focus: var(--accent);
    --link: var(--accent);
    --fill: color-mix(in srgb, var(--text-tertiary) 18%, transparent);
    --fill-strong: color-mix(in srgb, var(--text-tertiary) 30%, transparent);
    --hairline: 1px;
    --radius-control: 12px;
    --radius-group: 20px;
    --radius-pill: 999px;
    --font-text: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -.01em;
    color: var(--ink);
    background: var(--canvas);
    accent-color: var(--accent);
    scrollbar-color: var(--text-tertiary) var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: 100%;
}
/* iOS draws separators as hairlines; keep full pixels where contrast matters. */
@media (min-resolution: 2dppx) { :root { --hairline: .5px; } }
:root[data-theme="high-contrast"] { --hairline: 1px; }

* { box-sizing: border-box; }
/* Elements toggled with the hidden attribute stay hidden whatever display their class sets. */
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--link); }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
button, summary { cursor: pointer; }
input, textarea { caret-color: var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* A wider gap keeps the green ring distinct from green filled buttons and switches. */
.button:focus-visible, .switch:focus-visible { outline-offset: 3px; }

/* Apple text styles: large title 34, title 2 22, title 3 20, body 17, subheadline 15, footnote 13, caption 12. */
h1 { margin: 0 0 8px; font-size: clamp(28px, 2.2vw + 14px, 34px); font-weight: 700; line-height: 1.18; letter-spacing: -.012em; overflow-wrap: anywhere; text-wrap: balance; }
h2 { margin: 0 0 16px; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -.01em; }
p { max-width: 70ch; }
.intro { color: var(--muted); margin: 0 0 32px; }
.help, .muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.help { font-size: 13px; line-height: 1.38; margin: 8px 0; letter-spacing: 0; }

.site-header { min-height: 72px; padding: 14px max(24px, calc((100vw - 1120px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand .logo { display: block; height: 40px; width: auto; flex: none; }
.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
/* Signed-in header: on wider screens the menu's contents are ordinary header items (display: contents);
   on phones a menu button opens them as a panel. */
.menu-button { display: none; }
.site-menu[popover] { display: contents; }
/* Theme control: three icon segments on a capsule track with a thumb that slides to the checked radio. */
.theme-picker { --segment: 40px; position: relative; display: inline-grid; grid-template-columns: repeat(3, var(--segment)); padding: 2px; border-radius: var(--radius-pill); background: var(--fill); }
.theme-picker[hidden] { display: none; }
.theme-picker::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: var(--segment); border-radius: var(--radius-pill); background: var(--segment-thumb); box-shadow: 0 3px 8px rgb(0 0 0 / 12%), 0 1px 1px rgb(0 0 0 / 4%); transition: transform .3s var(--ease-out); }
.theme-picker:has([value="light"]:checked)::before { transform: translateX(var(--segment)); }
.theme-picker:has([value="high-contrast"]:checked)::before { transform: translateX(calc(var(--segment) * 2)); }
.theme-picker label { position: relative; display: grid; place-items: center; height: 32px; border-radius: var(--radius-pill); color: var(--muted); cursor: pointer; transition: color .2s ease-out; }
.theme-picker label:hover, .theme-picker label:has(:checked) { color: var(--ink); }
.theme-picker label:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 0; }
.theme-picker input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.theme-picker .icon { width: 18px; height: 18px; }
:root[data-theme="high-contrast"] .theme-picker { box-shadow: inset 0 0 0 1px var(--control-border); }
:root[data-theme="high-contrast"] .theme-picker::before { box-shadow: inset 0 0 0 2px var(--ink); }
.account { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); }
/* Staff navigation: plain capsules; the current section sits on a fill like a selected segment. */
.primary-nav { display: flex; gap: 4px; }
.primary-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-pill); color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.primary-nav a:hover { background: var(--fill); color: var(--ink); }
.primary-nav a[aria-current] { background: var(--fill); color: var(--ink); font-weight: 600; }
.container { width: min(1120px, calc(100% - 48px)); margin: 40px auto 72px; flex: 1; min-width: 0; }
.container.narrow { max-width: 400px; }
.container.form-width { max-width: 640px; }
.container.detail-width { max-width: 800px; }
/* The form sits a little above centre. Sign-in pages are exactly the window's height, and the space below is a
   spacer that gives way first, so short windows don't scroll; taller content still scrolls from the top (safe centre). */
body:has(> .auth-layout) { height: 100vh; height: 100dvh; }
.auth-layout { display: flex; flex-direction: column; justify-content: safe center; max-width: 440px; min-height: 0; margin-bottom: 0; }
.auth-layout::after { content: ""; flex: 0 1 clamp(0px, 8vh, 80px); }
.auth-logo { display: flex; justify-content: center; margin-bottom: 40px; color: var(--ink); }
.auth-logo .logo { display: block; height: 104px; width: auto; }
/* Short windows get a smaller logo, so the recovery forms and their messages fit without scrolling. */
@media (min-width: 701px) and (max-height: 720px) { .auth-logo { margin-bottom: 28px; } .auth-logo .logo { height: 80px; } }
.auth-help { margin: 32px 0 0; color: var(--muted); font-size: 15px; text-align: center; }
/* A centred title and one-line explanation under the logo, for recovery pages. */
.auth-heading { margin: -12px 0 28px; text-align: center; }
.auth-heading h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; text-wrap: pretty; }
.auth-link { margin: 20px 0 0; font-size: 15px; text-align: center; }
.auth-link + .auth-help { margin-top: 12px; }
.auth-link a, .auth-help a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--link); text-decoration: none; }
.auth-link a:hover, .auth-help a:hover { color: var(--link); text-decoration: underline; }
.auth-status { margin: 0 0 24px; color: var(--muted); font-size: 15px; text-align: center; }
.notice-action { min-height: 32px; margin: -6px 0 -6px 4px; padding: 4px 10px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.page-heading .button { flex: none; margin-top: 4px; }

/* Buttons: capsule shapes, tint-coloured plain buttons, and dimming on press as on iOS. */
.button { display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 15px; line-height: 1.33; font-weight: 600; text-decoration: none; width: fit-content; transition: background-color .15s ease-out, opacity .15s ease-out; }
.button.large { min-height: 50px; padding: 13px 24px; font-size: 17px; }
.button.full-width { width: 100%; }
.button.primary { background: var(--accent); color: var(--on-accent); }
.button.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); color: var(--on-accent); }
.button.secondary { background: var(--fill); color: var(--ink); }
.button.secondary:hover { background: var(--fill-strong); color: var(--ink); }
:root[data-theme="high-contrast"] .button.secondary { border-color: var(--control-border); }
.button.quiet { background: transparent; color: var(--link); }
.button.quiet:hover { background: var(--fill); color: var(--link); }
.button.danger { background: var(--over); color: var(--on-accent); }
.button.quiet.destructive, .button.quiet.destructive:hover { color: var(--over); }
.button.danger:hover { background: color-mix(in srgb, var(--over) 86%, var(--ink)); color: var(--on-accent); }
.button:active { opacity: .7; }
.button:disabled { opacity: .45; cursor: default; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Standalone fields keep a visible outline; grouped fields below use the group as their boundary. */
input, select, textarea { width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--control-border); border-radius: var(--radius-control); min-height: 44px; padding: 10px 14px; font-size: 17px; line-height: 1.3; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--over); }
textarea { resize: vertical; min-height: 120px; }
.form-stack { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 15px; font-weight: 500; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.required-label, .optional-label { font-size: 13px; font-weight: 400; color: var(--muted); }
.field-hint { margin: 0; font-size: 13px; line-height: 1.38; color: var(--muted); letter-spacing: 0; }
.field-link { width: fit-content; font-size: 13px; line-height: 1.38; color: var(--link); }
.field-error { font-size: 13px; line-height: 1.38; color: var(--over); letter-spacing: 0; }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.reveal-input { position: relative; display: flex; }
.reveal-input input { padding-right: 52px; }
.reveal-button { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); transform: translateY(-50%); }
.reveal-button:hover { background: var(--fill); color: var(--ink); }

/* Inset grouped list: rows share one rounded surface and are divided by inset hairlines. */
.group-label { margin: 0 0 8px 16px; font-size: 13px; color: var(--muted); letter-spacing: 0; }
.group-footer { margin: 8px 16px 0; font-size: 13px; line-height: 1.38; color: var(--muted); letter-spacing: 0; }
.group { container-type: inline-size; background: var(--surface); border: var(--hairline) solid var(--border); border-radius: var(--radius-group); }
:root[data-theme="high-contrast"] .group { border-color: var(--control-border); }
.group > * { position: relative; display: grid; grid-template-columns: minmax(9em, 34%) minmax(0, 1fr); align-items: center; column-gap: 16px; min-height: 48px; margin: 0; padding: 8px 16px; }
.group > :first-child { border-radius: calc(var(--radius-group) - 1px) calc(var(--radius-group) - 1px) 0 0; }
.group > :last-child { border-radius: 0 0 calc(var(--radius-group) - 1px) calc(var(--radius-group) - 1px); }
.group > :only-child { border-radius: calc(var(--radius-group) - 1px); }
.group > * + *::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: var(--hairline) solid var(--border); }
.group .field label { font-size: 17px; font-weight: 400; }
.group input:not([type="checkbox"]), .group select, .group textarea { min-height: 32px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; }
.group textarea { min-height: 96px; }
.group input:focus-visible, .group select:focus-visible, .group textarea:focus-visible { outline: none; }
.group > :has(:focus-visible) { box-shadow: inset 0 0 0 2px var(--focus); }
.group .field-error { grid-column: 2; }
.group .field:has([aria-invalid="true"]) label { color: var(--over); }
.group .reveal-input input { padding-right: 44px; }
.group .reveal-button { right: -10px; }
@container (max-width: 360px) {
    .group > * { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding-block: 10px; }
    .group .field label { font-size: 13px; color: var(--muted); letter-spacing: 0; }
    .group .field-error { grid-column: 1; }
}

/* iOS switch on a native checkbox: give the input role="switch" in markup. */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; }
.group > .switch-row { display: flex; }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 51px; height: 31px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--fill-strong); cursor: pointer; transition: background-color .2s ease-out; }
.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 3px 8px rgb(0 0 0 / 15%), 0 1px 1px rgb(0 0 0 / 16%); transition: transform .25s var(--ease-out); }
.switch:checked { background: var(--accent); }
.switch:checked::before { transform: translateX(20px); }
:root[data-theme="high-contrast"] .switch { box-shadow: inset 0 0 0 1px var(--control-border); }
:root[data-theme="high-contrast"] .switch::before { box-shadow: 0 0 0 1px var(--control-border); }

/* Segmented control: one capsule track; the selected segment is a raised thumb. */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 2px; border-radius: var(--radius-pill); background: var(--fill); }
:root[data-theme="high-contrast"] .segmented { box-shadow: inset 0 0 0 1px var(--control-border); }
/* Matches the theme control: 36px track, 32px segments, secondary text until selected. */
.segmented > * { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px; border-radius: var(--radius-pill); color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s ease-out; }
.segmented > :hover { color: var(--ink); }
.segmented > [aria-current], .segmented > [aria-checked="true"] { background: var(--segment-thumb); color: var(--ink); font-weight: 600; box-shadow: 0 3px 8px rgb(0 0 0 / 12%), 0 1px 1px rgb(0 0 0 / 4%); }
:root[data-theme="high-contrast"] .segmented > [aria-current], :root[data-theme="high-contrast"] .segmented > [aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
/* With segmented.js, one thumb slides to the selected link (positioned through --thumb-* variables). */
.segmented.is-sliding { position: relative; }
.segmented.is-sliding::before { content: ""; position: absolute; top: 0; left: 0; width: var(--thumb-w, 0); height: var(--thumb-h, 0); border-radius: var(--radius-pill); background: var(--segment-thumb); box-shadow: 0 3px 8px rgb(0 0 0 / 12%), 0 1px 1px rgb(0 0 0 / 4%); transform: translate(var(--thumb-x, 0), var(--thumb-y, 0)); transition: transform .3s var(--ease-out), width .3s var(--ease-out); pointer-events: none; }
.segmented.is-sliding.no-slide::before { transition: none; }
.segmented.is-sliding > * { position: relative; }
.segmented.is-sliding > [aria-current] { background: none; box-shadow: none; }
:root[data-theme="high-contrast"] .segmented.is-sliding::before { box-shadow: inset 0 0 0 2px var(--ink); }
:root[data-theme="high-contrast"] .segmented.is-sliding > [aria-current] { box-shadow: none; }
/* Form choices: radio buttons shown as a segmented control, one pill per option. */
.field-label { font-size: 15px; font-weight: 500; }
.segmented.choice { align-self: flex-start; }
.segmented.choice > label { position: relative; align-items: center; min-height: 40px; padding: 6px 20px; cursor: pointer; }
.segmented.choice > label:has(:checked) { background: var(--segment-thumb); color: var(--ink); font-weight: 600; box-shadow: 0 3px 8px rgb(0 0 0 / 12%), 0 1px 1px rgb(0 0 0 / 4%); }
.segmented.choice > label:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 0; }
.segmented.choice input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
:root[data-theme="high-contrast"] .segmented.choice > label:has(:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
/* Company name and VAT number apply only when billing a company. */
.billing-form:has([name="is_individual"][value="1"]:checked) .company-fields { display: none; }

.list-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 8px 0 24px; }
.status-filter span { font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
/* iOS search field: filled capsule, leading magnifier, trailing clear button; Enter submits. */
.search-form { display: flex; flex: 1 1 320px; max-width: 420px; }
.search-input { display: flex; position: relative; flex: 1 1 auto; min-width: 0; }
.search-input .icon { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.search-form input { min-height: 36px; padding: 6px 42px 6px 38px; border-color: transparent; border-radius: var(--radius-pill); background: var(--fill); }
.search-form input:focus-visible { border-color: var(--focus); }
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
:root[data-theme="high-contrast"] .search-form input { border-color: var(--control-border); }
.search-clear { position: absolute; top: 50%; right: 2px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); transform: translateY(-50%); }
.search-clear:hover { color: var(--ink); }
.search-clear svg { width: 18px; height: 18px; }
.search-clear circle { fill: currentColor; }
.search-clear path { fill: none; stroke: var(--canvas); stroke-width: 2.2; stroke-linecap: round; }

.table-scroll { overflow-x: auto; border: var(--hairline) solid var(--border); border-radius: var(--radius-group); background: var(--surface); }
.table-scroll table { table-layout: fixed; }
.serial-column { width: 210px; }
.status-column { width: 116px; }
.created-column { width: 128px; }
.since-column { width: 136px; }
.chevron-column { width: 44px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
th { color: var(--muted); font-weight: 400; font-size: 13px; letter-spacing: 0; padding: 14px 20px; }
td { padding: 16px 20px; border-top: var(--hairline) solid var(--separator); vertical-align: middle; }
tbody tr { position: relative; }
tbody tr:hover, tbody tr:focus-within { background: var(--fill); }
/* The serial link stretches over its row, so the whole row opens the licence as an iOS list row does. */
a.row-link::after { content: ""; position: absolute; inset: 0; }
a.row-link:focus-visible { outline: none; }
tbody tr:has(.row-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
td.chevron { padding-left: 0; color: var(--text-tertiary); text-align: right; }
td.chevron svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.serial { font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
a.serial { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; padding-block: 10px; }
.serial-heading { font-size: clamp(22px, 4vw, 34px); }
/* Long addresses end in an ellipsis; the full address shows on hover. */
.email-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date, time { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.mobile-label { display: none; }
/* Status capsules tint their own colour; the written label always carries the meaning. */
.badge { display: inline-flex; align-items: center; font-size: 13px; line-height: 1.38; padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0; background: color-mix(in srgb, currentColor var(--badge-tint), var(--surface)); white-space: nowrap; }
.badge.large { font-size: 15px; padding: 6px 14px; }
.badge.pending { color: var(--warning); }
.badge.active { color: var(--pass); }
.badge.revoked { color: var(--over); }
/* A declined request was never active, so it reads quieter than a revoked license. */
.badge.declined { color: var(--muted); }
.badge.neutral { color: var(--muted); }
.invitations { margin-top: 32px; }
.list-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); margin-top: 12px; flex-wrap: wrap; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 15px; }
.pagination a { padding: 10px 0; color: var(--link); text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination [aria-disabled] { opacity: .5; }
.empty-state { padding: 64px 24px; border: var(--hairline) solid var(--border); border-radius: var(--radius-group); background: var(--surface); text-align: center; }
.empty-state p { margin: 0 auto 24px; color: var(--muted); }
.button.small { min-height: 36px; padding: 6px 14px; }
.button.quiet.destructive, .button.quiet.destructive:hover { color: var(--over); }

/* JSON-driven lists share the grouped list surface. */
.list-panel { border: var(--hairline) solid var(--border); border-radius: var(--radius-group); background: var(--surface); }
.list-status, .list-empty { padding: 48px 24px; color: var(--muted); text-align: center; }
.list-status p { margin: 0 auto 16px; }
.list-status p:only-child { margin-bottom: 0; }
.list-empty h2 { margin-bottom: 8px; color: var(--ink); }
.list-empty p { margin: 0 auto; }
/* Minimum widths fit the longest date line and Send reset email + Delete, so pending invitations line up with users. */
.user-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, auto) minmax(15rem, auto); }
/* Rows share the list's columns, so dates and actions line up even when a row has no Delete button. */
.user-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 4px 24px; padding: 12px 12px 12px 20px; }
.user-row + .user-row { border-top: var(--hairline) solid var(--border); }
.user-main { display: flex; flex-direction: column; min-width: 0; }
.user-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.user-name { font-weight: 600; overflow-wrap: anywhere; }
.user-email { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
/* One date per line here; phones put them on one line split by a dot. Each date's dot sits outside the clipped
   left edge when it starts a line, so no line starts with a stray dot. */
.user-dates { display: flex; flex-direction: column; overflow: hidden; color: var(--muted); font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.user-dates > span { margin-left: -1.25em; }
.user-dates > span::before { content: "·" / ""; display: inline-block; width: 1.25em; text-align: center; }
.user-actions { display: flex; gap: 4px; justify-content: flex-start; }

/* Confirmation dialog in the style of an iOS alert. */
.sheet { width: min(420px, calc(100% - 32px)); padding: 24px; border: var(--hairline) solid var(--border); border-radius: var(--radius-group); background: var(--surface-raised); color: var(--ink); box-shadow: 0 24px 48px rgb(0 0 0 / 30%); }
.sheet::backdrop { background: rgb(0 0 0 / 50%); }
.sheet h2 { margin: 0 0 8px; font-size: 20px; overflow-wrap: anywhere; }
.sheet p { margin: 0 0 24px; color: var(--muted); font-size: 15px; }
.sheet .form-actions { justify-content: flex-end; }
:root[data-theme="high-contrast"] .sheet { border-color: var(--control-border); }

/* Activity log: capsule filters like the search field, then one inset list per day. */
.activity-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 28px; }
.filter-field { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-left: 14px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--fill); color: var(--muted); font-size: 15px; }
.filter-field:has(:focus-visible) { border-color: var(--focus); }
.filter-field input, .filter-field select { width: auto; min-height: 34px; padding: 4px 12px 4px 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-size: 15px; }
.filter-field input:focus-visible, .filter-field select:focus-visible { outline: none; }
.filter-event { padding-left: 0; }
.filter-event select { appearance: none; padding: 4px 36px 4px 14px; cursor: pointer; }
.filter-event::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.filter-field select option, .filter-field select optgroup { background: var(--surface-raised); color: var(--ink); }
/* Where the browser allows it, the open event list is a rounded panel like the app's sheets: grouped
   headings, roomy rows, a fill on hover/focus and a green check on the chosen event. Others keep the native list. */
@supports (appearance: base-select) {
    .filter-event select, .filter-event select::picker(select) { appearance: base-select; }
    /* A customizable select sizes to its current text; keep the width the native control had for the longest event. */
    .filter-event select { display: flex; align-items: center; min-width: 248px; }
    .filter-event select::picker-icon { display: none; }
    .filter-event select::picker(select) { min-width: max(anchor-size(width), 260px); max-height: min(440px, 70vh); margin-top: 6px; padding: 6px; border: var(--hairline) solid var(--border); border-radius: 16px; background: var(--surface-raised); color: var(--ink); box-shadow: 0 16px 40px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 12%); }
    .filter-event option { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px 6px 10px; border-radius: 10px; background: transparent; color: var(--ink); font-size: 15px; cursor: pointer; }
    .filter-event option::checkmark { order: 1; margin-left: auto; color: var(--accent); font-weight: 600; }
    .filter-event option:hover, .filter-event option:focus-visible { background: var(--fill); outline: none; }
    .filter-event option:checked { font-weight: 600; }
    .filter-event optgroup { margin-top: 6px; padding-top: 6px; border-top: var(--hairline) solid var(--border); background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
    .filter-event optgroup::before { padding: 4px 10px; }
    .filter-event optgroup option { font-weight: 400; }
    .filter-event optgroup option:checked { font-weight: 600; }
    :root[data-theme="high-contrast"] .filter-event select::picker(select) { border-color: var(--control-border); }
    :root[data-theme="high-contrast"] .filter-event option:hover, :root[data-theme="high-contrast"] .filter-event option:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
}
:root[data-theme="high-contrast"] .filter-field { border-color: var(--control-border); }
:root[data-theme="high-contrast"] .filter-field:has(:focus-visible) { border-color: var(--focus); }
.filter-chips { display: contents; }
/* Date fields open the app's own calendar (date-picker.js) instead of the browser's, which pages cannot style. */
.filter-field input.has-calendar { width: 108px; padding-right: 2px; font-variant-numeric: tabular-nums; }
.filter-field:has([aria-invalid="true"]) { border-color: var(--over); }
.calendar-button { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: 3px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.calendar-button:hover, .calendar-button[aria-expanded="true"] { background: var(--fill); color: var(--ink); }
.calendar-button svg, .calendar-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calendar { position: fixed; inset: auto; width: min(304px, calc(100vw - 16px)); margin: 0; padding: 12px; border: var(--hairline) solid var(--border); border-radius: var(--radius-group); background: var(--surface-raised); color: var(--ink); box-shadow: 0 16px 40px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 12%); }
.calendar-header { display: flex; align-items: center; gap: 2px; padding: 0 0 6px 8px; }
.calendar-title { margin: 0 auto 0 0; font-size: 16px; font-weight: 600; }
.calendar-nav { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.calendar-nav:hover { background: var(--fill); }
.calendar-nav svg { stroke-width: 2; }
.calendar-weekdays, .calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { padding: 4px 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.calendar-week { margin-bottom: 2px; }
.calendar-week > span { display: grid; place-items: center; }
/* The chosen From–To range shows as a tinted band, rounded at its ends and at the edges of each week. */
.calendar-week > .in-range { background: color-mix(in srgb, var(--accent) var(--badge-tint), transparent); }
.calendar-week > .in-range:first-child, .calendar-week > .range-start { border-start-start-radius: 20px; border-end-start-radius: 20px; }
.calendar-week > .in-range:last-child, .calendar-week > .range-end { border-start-end-radius: 20px; border-end-end-radius: 20px; }
.calendar-day { display: grid; place-items: center; width: 100%; max-width: 38px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
.calendar-day:hover { background: var(--fill); }
.calendar-day.is-outside { color: var(--text-tertiary); }
.calendar-day.is-today { color: var(--accent); font-weight: 700; }
/* The other end of the range is a soft accent circle; a ring would read as keyboard focus. */
.calendar-day.is-partner { background: color-mix(in srgb, var(--accent) 32%, transparent); font-weight: 600; }
.calendar-day[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.calendar-day[aria-disabled="true"] { background: none; color: var(--text-tertiary); opacity: .45; cursor: default; }
.calendar-day:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.calendar-footer { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: var(--hairline) solid var(--border); }
.calendar-footer .button { min-height: 32px; padding: 4px 12px; }
:root[data-theme="high-contrast"] .calendar { border-color: var(--control-border); }
:root[data-theme="high-contrast"] .calendar-day.is-outside { color: var(--text-secondary); }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px 6px 14px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) var(--badge-tint), var(--surface)); color: var(--ink); font-size: 15px; text-decoration: none; overflow-wrap: anywhere; }
.filter-chip:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) calc(var(--badge-tint) * 1.6), var(--surface)); }
.filter-chip svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.activity-day + .activity-day { margin-top: 28px; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 12px 20px; }
.activity-row + .activity-row { border-top: var(--hairline) solid var(--border); }
.activity-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.activity-title { font-weight: 600; }
.activity-main a.serial { color: var(--link); }
.activity-subject { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.activity-meta { color: var(--muted); font-size: 13px; letter-spacing: 0; overflow-wrap: anywhere; }
.activity-actor { text-decoration: none; }
.activity-actor:hover { text-decoration: underline; }
.activity-time { padding-top: 2px; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -8px 0 16px -2px; color: var(--link); text-decoration: none; }
.back-link:hover { color: var(--link); text-decoration: underline; }
.title-line { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.title-line h1 { margin: 0; }
.heading-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; margin-top: 4px; }
/* One column of sections (Customer, Approval, Billing, History) separated by space. Lines appear only
   between rows inside the grouped panels, like the forms and the Users list. */
.detail-section + .detail-section { margin-top: 40px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; }
.section-heading form { margin: 0; }
/* Quiet actions have no visible box, so their text lines up with the panel edge below. */
.section-heading .button.quiet { margin-right: -14px; }
.detail-section > h2 { margin-bottom: 12px; }
/* Notes under a panel span it, inset like its rows, instead of stopping at the usual line length. */
.detail-section .facts + .help { max-width: none; margin: 8px 16px 0; }
.billing-section .notice, .history-section .notice { margin-bottom: 16px; }
/* Labels in a column with values beside them, so the eye does not cross the page for each pair. */
.facts { margin: 0; background: var(--surface); border: var(--hairline) solid var(--border); border-radius: var(--radius-group); }
.facts div { position: relative; display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; padding: 12px 16px; }
.facts div + div::before, .history li + li::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: var(--hairline) solid var(--border); }
.facts dt { color: var(--muted); font-size: 15px; }
.facts dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.facts dd.lines { white-space: pre-line; }
.history { list-style: none; padding: 0; margin: 0; background: var(--surface); border: var(--hairline) solid var(--border); border-radius: var(--radius-group); }
.history li { position: relative; padding: 14px 16px; }
.event-heading { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.history .help { margin: 4px 0 0; }
.history + .pagination { margin-top: 16px; }
.changes { font-size: 13px; margin: 12px 0 0; letter-spacing: 0; }
.changes div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
.changes dt { color: var(--muted); }
.changes dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
/* Short centred messages on a tint of their status colour, like the badges; a list of errors stays left-aligned. */
/* Messages in the system style: a soft tinted fill with no outline, led by a filled status symbol. */
.notice { --notice-tint: var(--pass); padding: 13px 18px; margin-bottom: 28px; border-radius: var(--radius-group); background: color-mix(in srgb, var(--notice-tint) var(--badge-tint), var(--surface)); color: var(--ink); font-size: 15px; line-height: 1.4; text-align: center; text-wrap: pretty; overflow-wrap: anywhere; }
.notice.error { --notice-tint: var(--over); }
.notice.info { --notice-tint: var(--tint); text-align: left; --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Ccircle cx='12' cy='6.8' r='1.4'/%3E%3Cpath d='M12 11v6' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='11' mask='url(%23m)'/%3E%3C/svg%3E"); }
/* A standing caution on a page, not a flash message, so it reads left-aligned like the form below it. */
.notice.warning { --notice-tint: var(--warning); text-align: left; }
.notice.warning { --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12 9v4.6' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.4' r='1.4'/%3E%3C/mask%3E%3Cpath d='M10.27 3a2 2 0 0 1 3.46 0l9 15.6a2 2 0 0 1-1.73 3H3a2 2 0 0 1-1.73-3Z' mask='url(%23m)'/%3E%3C/svg%3E"); }
.notice::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3.5px; background: var(--notice-tint); -webkit-mask: var(--notice-icon) center / contain no-repeat; mask: var(--notice-icon) center / contain no-repeat; }
.notice.success { --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='m7.6 12.4 3 3 5.8-6.3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='11' mask='url(%23m)'/%3E%3C/svg%3E"); }
.notice.error { --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12 6.8v6.4' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.45'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='11' mask='url(%23m)'/%3E%3C/svg%3E"); }
:root[data-theme="high-contrast"] .notice { border: 1px solid var(--notice-tint); }
/* A short bold title with the symbol, then a lighter detail line. */
.notice-detail { display: block; margin-top: 2px; color: var(--muted); }
.notice:has(ul) { text-align: left; }
.notice ul { margin: 8px 0 0; padding-left: 20px; }
.form-stack > .notice { margin: 0; }
/* Script notices sit above the form at the form's own spacing; once the form is sent and hidden, the back link follows at its usual distance. */
.auth-layout > .notice { margin-bottom: 24px; }
.auth-layout > .notice:has(+ form[hidden] + .auth-link) { margin-bottom: 0; }
.auth-layout > .notice:has(+ form[hidden] + [data-forgot-again]) { margin-bottom: 20px; }
.notice[tabindex="-1"]:focus { outline: none; }
fieldset { border: 0; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
legend { font-size: 20px; font-weight: 600; padding: 0; margin-bottom: 20px; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 24px; text-align: center; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 20px 0 28px; color: var(--muted); font-size: 12px; letter-spacing: 0; }
.skip-link { position: absolute; left: 24px; top: -80px; background: var(--ink); color: var(--canvas); padding: 12px; z-index: 2; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 900px) {
    .account > span { display: none; }
    .list-tools { align-items: stretch; gap: 16px; }
    .search-form { max-width: none; flex-basis: 100%; }
    /* The licence table becomes a list of rows here: with five columns, narrower tables squeeze the email to nothing. */
    .table-scroll { overflow: visible; }
    .table-scroll table, tbody { display: block; }
    colgroup { display: none; }
    thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 2px 12px; padding: 14px 16px; border-top: var(--hairline) solid var(--border); }
    tbody tr:first-child { border-top: 0; }
    tbody tr:first-child:hover, tbody tr:first-child:focus-within { border-radius: var(--radius-group) var(--radius-group) 0 0; }
    tbody tr:last-child:hover, tbody tr:last-child:focus-within { border-radius: 0 0 var(--radius-group) var(--radius-group); }
    td { display: block; padding: 0; border: 0; min-width: 0; }
    td:first-child { align-self: center; }
    .email-cell { grid-column: 1 / 3; color: var(--muted); font-size: 15px; }
    /* The dates share a line, split by a dot. When the second wraps, its dot sits outside the clipped
       left edge, so no line starts or ends with a stray dot. */
    td.date { grid-column: 1 / 3; display: flex; flex-wrap: wrap; column-gap: 1.25em; overflow: hidden; font-size: 13px; }
    td.date > span { margin-left: -1.25em; }
    td.date > span::before { content: "·" / ""; display: inline-block; width: 1.25em; text-align: center; }
    td.created-cell { display: none; }
    td.chevron { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
    .mobile-label { display: inline; }
    .desktop-label { display: none; }
}
@media (max-width: 700px) {
    .site-header { flex-wrap: nowrap; padding: 12px 16px; gap: 12px; }
    .menu-button { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -6px 0 auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
    .menu-button:hover { background: var(--fill); }
    .menu-button .icon { width: 24px; height: 24px; stroke-width: 2; }
    .menu-button .icon-close, body:has(.site-menu:popover-open) .menu-button .icon-open { display: none; }
    body:has(.site-menu:popover-open) .menu-button .icon-close { display: block; }
    .site-menu[popover] { display: none; }
    /* Positioned on the page, not the screen: the page keeps scrolling and the menu moves with the header. */
    .site-menu:popover-open { display: flex; flex-direction: column; position: absolute; inset: 68px 12px auto; width: auto; max-height: calc(100dvh - 80px); overflow-y: auto; margin: 0; padding: 8px; border: var(--hairline) solid var(--border); border-radius: var(--radius-group); background: var(--surface-raised); color: var(--ink); box-shadow: 0 16px 40px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 12%); }
    .site-menu .primary-nav { flex-direction: column; gap: 2px; }
    .site-menu .primary-nav a { min-height: 48px; padding: 0 14px; border-radius: 14px; font-size: 17px; }
    .site-menu .header-actions { flex-direction: column; align-items: stretch; gap: 12px; margin: 8px 0 0; padding: 14px 6px 2px; border-top: var(--hairline) solid var(--border); }
    .site-menu .theme-picker { --segment: calc((100% - 4px) / 3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-menu .theme-picker:has([value="light"]:checked)::before { transform: translateX(100%); }
    .site-menu .theme-picker:has([value="high-contrast"]:checked)::before { transform: translateX(200%); }
    .site-menu .account { justify-content: space-between; padding-left: 8px; }
    .site-menu .account > span { display: inline; min-width: 0; overflow-wrap: anywhere; }
    :root[data-theme="high-contrast"] .site-menu:popover-open { border-color: var(--control-border); }
    .filter-event { flex: 1 1 100%; }
    .filter-event select { width: 100%; }
    .filter-field:not(.filter-event) { flex: 1 1 0; min-width: 0; }
    .filter-field input { flex: 1 1 auto; min-width: 0; }
    .activity-row { padding: 12px 16px; }
    .user-list { grid-template-columns: minmax(0, 1fr); }
    .user-row { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
    .user-dates { flex-direction: row; flex-wrap: wrap; column-gap: 1.25em; }
    .user-actions { justify-content: flex-start; margin: 4px 0 -6px -14px; }
    .sheet .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .sheet .form-actions .button { width: 100%; }
    .theme-picker { --segment: 44px; }
    .theme-picker label { height: 40px; }
    .container { width: calc(100% - 32px); margin: 24px auto 48px; }
    .page-heading { flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
    .page-heading .intro { margin-bottom: 8px; }
    .page-heading .button { margin-top: 8px; }
    .status-filter { display: flex; width: 100%; }
    .status-filter > * { flex: 1 1 0; gap: 4px; padding-inline: 8px; }
    .heading-actions { margin-top: 0; }
    .field-pair { grid-template-columns: 1fr; }
    .site-footer { width: calc(100% - 32px); }
    .auth-layout { justify-content: flex-start; margin-bottom: 0; }
    .auth-logo { margin-bottom: 28px; }
    .auth-logo .logo { height: 72px; }
    .header-actions:not(:has(.account)) { justify-content: flex-end; }
}
@media (max-width: 420px) {
    /* Stack each count under its label so four segments fit on a phone. */
    .status-filter { border-radius: 16px; }
    .status-filter > *, .status-filter.is-sliding::before { border-radius: 14px; }
    .status-filter > * { flex-direction: column; gap: 0; min-height: 44px; padding: 4px; font-size: 13px; line-height: 1.2; }
    .status-filter span { font-size: 12px; }
    /* Two date fields side by side would clip their values; give each its own row. */
    .filter-field:not(.filter-event) { flex-basis: 100%; }
    /* A narrower label column leaves room for a whole email address on one line. */
    .facts div { grid-template-columns: 7em minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 359px) {
    tbody tr { gap: 2px 8px; padding: 12px; }
    .badge { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { transition-duration: 0s !important; }
}
@media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; }
    .badge, .notice, .group, .segmented, .switch { border: 1px solid CanvasText; }
    .switch:checked, .segmented > [aria-current], .segmented > [aria-checked="true"], .segmented.choice > label:has(:checked) { outline: 2px solid Highlight; outline-offset: -3px; }
    .theme-picker { border: 1px solid CanvasText; }
    .theme-picker label:has(:checked) { outline: 2px solid Highlight; outline-offset: -3px; }
}