/* MultiOp Reception — application styles.
   Desktop-first (1920x1080+; minimum 1280 px). Dense, Access-dashboard-like layout with a modern finish.

   THREE INDEPENDENT TOKEN LAYERS (docs/ui-foundation-1.0H.md, approved prototype in docs/prototypes/):
     1. Shared tokens      font families, radii, minimum application width (identical everywhere)
     2. Display-size       <html data-size="compact|comfortable|large">   type scale, control heights, spacing,
                           minimum widths. Never colour.   Comfortable is the default (also plain :root).
     3. Theme              <html data-theme="classic|teal|slate|midnight"> colour only. Classic is the default.
   Components below use only these semantic tokens: no colour and no font size outside the token blocks.
   wwwroot/js/theme.js applies and stores the two preferences; a snippet in _Layout.cshtml applies them before paint.
   Container queries cannot read variables, so the adaptive-layout thresholds are written out once per display size. */

/* ======================= Tokens: shared ======================= */

:root {
    --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-code: Consolas, "Cascadia Mono", ui-monospace, monospace;
    --lh: 1.4;
    --radius: 4px;
    --radius-pill: 10px;
    --gap: 6px;
    /* R0 (docs/responsive-design-architecture.md): the least width the three regions need at the chosen Display size (two sides, the centre, two splitters,
       the panel's outer padding of one --gap on each side). It applies to the workspace area (.panel-host), never to the page, so the header and footer always fit the window. */
    --app-min-width: calc(2 * var(--ws-side-min) + var(--ws-centre-min) + 2 * var(--ws-splitter) + 2 * var(--gap));
}

/* ======================= Tokens: display size (type scale, spacing, minimum widths; never colour) ======================= */

/* Comfortable (default). Labels 14.5 medium, values 16 medium, table data 15, column headings 14 semibold,
   section headings 16 semibold, names 20 semibold, nothing below 13 px. */
:root,
:root[data-size="comfortable"] {
    --fs-xs: 13px;       /* badges and captions: the smallest text */
    --fs-sm: 14px;       /* secondary information */
    --fs-md: 15px;       /* body text, inputs, buttons */
    --fs-label: 14.5px;  /* field labels (medium weight) */
    --fs-value: 16px;    /* field values (medium weight) */
    --fs-table: 15px;    /* table data */
    --fs-th: 14px;       /* column headings (semibold) */
    --fs-heading: 16px;  /* region and section headings (semibold) */
    --fs-title: 20px;    /* animal and person names (semibold) */
    --fs-lg: 17px;       /* panel title */
    --control-h: 32px; --region-bar-h: 40px; --header-h: 46px; --status-h: 30px;
    --row-pad: 5px; --cell-px: 10px; --head-py: 7px; --head-px: 12px; --body-mx: 12px; --body-my: 8px; --dl-gap: 5px 14px; --dl-gap-tight: 3px 14px;
    --ws-side-min: 320px; --ws-centre-min: 450px;
    --footer-h: 24px;
    --logo-h-header: 30px; --logo-h-signin: 60px; --logo-h-about: 84px;   /* official logo heights (width follows the artwork's ratio) */
}
:root[data-size="compact"] {
    --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-label: 13px; --fs-value: 14px; --fs-table: 13px; --fs-th: 13px;
    --fs-heading: 14px; --fs-title: 18px; --fs-lg: 15px;
    --control-h: 28px; --region-bar-h: 34px; --header-h: 40px; --status-h: 26px;
    --row-pad: 3px; --cell-px: 8px; --head-py: 5px; --head-px: 10px; --body-mx: 10px; --body-my: 6px; --dl-gap: 3px 12px; --dl-gap-tight: 2px 12px;
    --ws-side-min: 300px; --ws-centre-min: 420px;
    --footer-h: 22px;
    --logo-h-header: 26px; --logo-h-signin: 52px; --logo-h-about: 72px;
}
:root[data-size="large"] {
    --fs-xs: 14px; --fs-sm: 15.5px; --fs-md: 17px; --fs-label: 16px; --fs-value: 18px; --fs-table: 16.5px; --fs-th: 15.5px;
    --fs-heading: 18px; --fs-title: 22px; --fs-lg: 19px;
    --control-h: 38px; --region-bar-h: 46px; --header-h: 52px; --status-h: 34px;
    --row-pad: 7px; --cell-px: 10px; --head-py: 9px; --head-px: 14px; --body-mx: 14px; --body-my: 10px; --dl-gap: 6px 16px; --dl-gap-tight: 4px 16px;
    --ws-side-min: 360px; --ws-centre-min: 480px;
    --footer-h: 28px;
    --logo-h-header: 36px; --logo-h-signin: 72px; --logo-h-about: 100px;
}
@media (max-width: 1500px) {
    /* The window never shrinks text; at most the table cell padding tightens a little. */
    :root,
    :root[data-size="comfortable"] { --cell-px: 9px; }
    :root[data-size="compact"] { --cell-px: 7px; }
    :root[data-size="large"] { --cell-px: 9px; }
}

/* ======================= Tokens: themes (colour only; every theme defines every token) ======================= */

/* Classic MultiOp — Navy and Sky Blue (default) */
:root,
:root[data-theme="classic"],
.menu-swatch[data-swatch="classic"] {
    color-scheme: light;
    --bg:#eef1f5; --surface:#ffffff; --surface-alt:#f7f9fb; --surface-sunken:#eef1f5;
    --text:#17212b; --text-strong:#0b1219; --text-muted:#46535f; --text-subtle:#5a6673;
    --text-label:#475569; --heading-bg:#dbe9f7; --border:#dde2e8; --border-strong:#c3cbd4;
    --border-control:#6b7888; --accent:#2369b8; --accent-strong:#1a559a; --accent-soft:#d9e8f9;
    --on-accent:#ffffff; --hover:#eef5fc; --selected:#d6e8fa; --selected-text:#0b1219;
    --selected-bar:#2369b8; --focus:#2369b8; --header-bg:#0e2b50; --header-text:#e8eef5;
    --header-hover:#1d4775; --header-line:#7cc0f5; --nav-active-bg:#f4f8fc; --nav-active-text:#0b4f9c; --success-bg:#dcf2e2; --success-border:#6dbb83;
    --success-text:#165029; --warning-bg:#fff4dc; --warning-border:#e2b45a; --warning-text:#734400;
    --danger-bg:#fdecea; --danger-border:#e69a92; --danger-text:#9b2218; --info-bg:#dbeafb;
    --info-border:#72a8e2; --info-text:#144a85; --neutral-bg:#eceff3; --neutral-border:#c0c8d1;
    --neutral-text:#3a4655;
    --header-bg-end:#0b4c8a; --create:#1e7b3d; --create-strong:#17632f; --on-create:#ffffff; --create-person:#6a35b8; --create-person-strong:#55289a; --on-create-person:#ffffff; --danger-strong:#9b2218; --on-danger:#ffffff;
    --ctx-animal:#16773a; --ctx-animal-bg:#e0f2e6; --ctx-intake:#2369b8; --ctx-intake-bg:#e4eefa; --ctx-person:#6a35b8; --ctx-person-bg:#efe4fa; --person-select:#e2d0f6; --person-select-text:#2b1250; --person-th-bg:#f6f0fc; --person-badge-bg:#e9dcf8; --person-badge-border:#b99be3; --person-badge-text:#4a2184;
    --icon-muted:#1d5aa0; --primary:#174c93; --primary-strong:#103b75; --on-primary:#ffffff; --ink-brand:#15325a; --btn-border:#93a3b6; --nav-active-line:#1677e0;
    --mod-receiving:#16773a; --mod-receiving-strong:#17632f; --mod-lost:#2f78c4; --mod-lost-strong:#1d5799; --mod-found:#b27410; --mod-found-strong:#8c5a06; --mod-medical:#13919a; --mod-medical-strong:#0b6a72; --on-module-strong:#ffffff;
}
/* Teal & Sage */
:root[data-theme="teal"],
.menu-swatch[data-swatch="teal"] {
    color-scheme: light;
    --bg:#eaf0ed; --surface:#ffffff; --surface-alt:#f5f9f7; --surface-sunken:#edf2ef;
    --text:#16211f; --text-strong:#0a1412; --text-muted:#43544f; --text-subtle:#566762;
    --text-label:#3e514b; --heading-bg:#d5ebe5; --border:#d3ddd8; --border-strong:#b9c8c1;
    --border-control:#76887f; --accent:#0f766e; --accent-strong:#0b5f58; --accent-soft:#d3ebe5;
    --on-accent:#ffffff; --hover:#ecf6f3; --selected:#cfe9e3; --selected-text:#0a1412;
    --selected-bar:#0f766e; --focus:#0f766e; --header-bg:#123c39; --header-text:#e6f2ef;
    --header-hover:#21534f; --header-line:#8fd6c6; --nav-active-bg:#edf7f4; --nav-active-text:#084c46; --success-bg:#dcf2e2; --success-border:#6dbb83;
    --success-text:#165029; --warning-bg:#fff4dc; --warning-border:#e2b45a; --warning-text:#734400;
    --danger-bg:#fdecea; --danger-border:#e69a92; --danger-text:#9b2218; --info-bg:#dbeafb;
    --info-border:#72a8e2; --info-text:#144a85; --neutral-bg:#e9eeeb; --neutral-border:#bcc8c2;
    --neutral-text:#37463f;
    --header-bg-end:#17675f; --create:#23784a; --create-strong:#1b603a; --on-create:#ffffff; --create-person:#6d3f80; --create-person-strong:#582f69; --on-create-person:#ffffff; --danger-strong:#9b2218; --on-danger:#ffffff;
    --ctx-animal:#2f7535; --ctx-animal-bg:#e0f0de; --ctx-intake:#0f766e; --ctx-intake-bg:#ddefeb; --ctx-person:#6d3f80; --ctx-person-bg:#f0e3f3; --person-select:#e5d0ea; --person-select-text:#36193f; --person-th-bg:#f7f0f9; --person-badge-bg:#ead9ef; --person-badge-border:#bd98c9; --person-badge-text:#4d2a5c;
    --icon-muted:#0d6a62; --primary:#0c5f57; --primary-strong:#084a44; --on-primary:#ffffff; --ink-brand:#0e3c38; --btn-border:#8aa29a; --nav-active-line:#13958a;
    --mod-receiving:#2f7535; --mod-receiving-strong:#25622c; --mod-lost:#3b78b5; --mod-lost-strong:#26598f; --mod-found:#b27914; --mod-found-strong:#8a5d0c; --mod-medical:#0f8f94; --mod-medical-strong:#0a6a70; --on-module-strong:#ffffff;
}
/* Slate & Warm Neutral */
:root[data-theme="slate"],
.menu-swatch[data-swatch="slate"] {
    color-scheme: light;
    --bg:#f0ede8; --surface:#fffefc; --surface-alt:#f8f6f2; --surface-sunken:#efece6;
    --text:#1f2328; --text-strong:#101215; --text-muted:#524d46; --text-subtle:#645e56;
    --text-label:#4e4a43; --heading-bg:#dee4eb; --border:#ddd7cd; --border-strong:#c6bdaf;
    --border-control:#857d70; --accent:#44607f; --accent-strong:#344d68; --accent-soft:#dde4ec;
    --on-accent:#ffffff; --hover:#f3efe8; --selected:#dfe5ec; --selected-text:#101215;
    --selected-bar:#44607f; --focus:#44607f; --header-bg:#262c34; --header-text:#ece9e4;
    --header-hover:#3a434f; --header-line:#d1a76a; --nav-active-bg:#f5f1ea; --nav-active-text:#2c435c; --success-bg:#dcf2e2; --success-border:#6dbb83;
    --success-text:#165029; --warning-bg:#fff4dc; --warning-border:#e2b45a; --warning-text:#734400;
    --danger-bg:#fdecea; --danger-border:#e69a92; --danger-text:#9b2218; --info-bg:#dbeafb;
    --info-border:#72a8e2; --info-text:#144a85; --neutral-bg:#ece8e1; --neutral-border:#c8bfb2;
    --neutral-text:#4a453e;
    --header-bg-end:#4b5868; --create:#3b7340; --create-strong:#2e5c32; --on-create:#ffffff; --create-person:#7a4460; --create-person-strong:#613550; --on-create-person:#ffffff; --danger-strong:#962a20; --on-danger:#ffffff;
    --ctx-animal:#506c2b; --ctx-animal-bg:#e7edd9; --ctx-intake:#44607f; --ctx-intake-bg:#e3e8ee; --ctx-person:#7a4460; --ctx-person-bg:#f2e3eb; --person-select:#ebd0de; --person-select-text:#44182f; --person-th-bg:#f8f0f4; --person-badge-bg:#eed8e3; --person-badge-border:#c898b0; --person-badge-text:#5a2640;
    --icon-muted:#3d5875; --primary:#36506d; --primary-strong:#283d55; --on-primary:#ffffff; --ink-brand:#23364a; --btn-border:#a39887; --nav-active-line:#a26e2a;
    --mod-receiving:#506c2b; --mod-receiving-strong:#3f5a1f; --mod-lost:#5079a8; --mod-lost-strong:#36597f; --mod-found:#a87818; --mod-found-strong:#85600f; --mod-medical:#2e8f8c; --mod-medical-strong:#1f6b69; --on-module-strong:#ffffff;
}
/* Midnight — dark */
:root[data-theme="midnight"],
.menu-swatch[data-swatch="midnight"] {
    color-scheme: dark;
    --bg:#0e151d; --surface:#16202b; --surface-alt:#1b2734; --surface-sunken:#111a24;
    --text:#e4ebf3; --text-strong:#ffffff; --text-muted:#a9b7c6; --text-subtle:#95a4b5;
    --text-label:#b6c4d3; --heading-bg:#1f3249; --border:#2a3848; --border-strong:#3b4c61;
    --border-control:#71859b; --accent:#6bb2f0; --accent-strong:#8cc6f6; --accent-soft:#1b3550;
    --on-accent:#08131f; --hover:#1e2c3c; --selected:#21415f; --selected-text:#ffffff;
    --selected-bar:#6bb2f0; --focus:#8cc6f6; --header-bg:#070c12; --header-text:#dbe6f2;
    --header-hover:#18242f; --header-line:#6bb2f0; --nav-active-bg:#dbe6f2; --nav-active-text:#0a1017; --success-bg:#12301f; --success-border:#2f7048;
    --success-text:#8fdca8; --warning-bg:#382a0b; --warning-border:#85641a; --warning-text:#f2c76a;
    --danger-bg:#3a1816; --danger-border:#8e3a34; --danger-text:#ffa098; --info-bg:#112b46;
    --info-border:#2f5f90; --info-text:#93c9f7; --neutral-bg:#243142; --neutral-border:#41546b;
    --neutral-text:#c7d2de;
    --header-bg-end:#11304f; --create:#5fcf86; --create-strong:#82dca0; --on-create:#06150c; --create-person:#c9a7f6; --create-person-strong:#dcc4fa; --on-create-person:#1a0f2b; --danger-strong:#ff8a80; --on-danger:#1c0705;
    --ctx-animal:#66d48c; --ctx-animal-bg:#14301f; --ctx-intake:#6bb2f0; --ctx-intake-bg:#152a3e; --ctx-person:#c9a7f6; --ctx-person-bg:#2a1f3e; --person-select:#3b2c57; --person-select-text:#f1e8fd; --person-th-bg:#231a35; --person-badge-bg:#3a2b55; --person-badge-border:#8f72c2; --person-badge-text:#e4d3fb;
    --icon-muted:#8cc6f6; --primary:#6bb2f0; --primary-strong:#8cc6f6; --on-primary:#06121e; --ink-brand:#d6e7f8; --btn-border:#5d7690; --nav-active-line:#1f6dbd;
    --mod-receiving:#66d48c; --mod-receiving-strong:#82dca0; --mod-lost:#7db4ee; --mod-lost-strong:#9cc7f3; --mod-found:#e2b04f; --mod-found-strong:#efc673; --mod-medical:#4fd1c5; --mod-medical-strong:#7fe0d6; --on-module-strong:#08131f;
}

/* Derived and shared colours (same in every theme) */
:root {
    --heading-color: var(--text-strong);
    --heading-soft: color-mix(in srgb, var(--heading-bg) 62%, var(--surface));
    /* Button hierarchy (docs/ui-design-system-1.0I.md): primary = solid accent; secondary = outlined accent text; tertiary = neutral;
       danger = permanent deletion only; create = the one green "new record" action of a toolbar. All derive from the theme tokens. */
    --btn-secondary-bg: var(--surface);
    --btn-secondary-text: var(--ink-brand);
    --btn-secondary-border: var(--btn-border);
    --btn-secondary-hover: var(--accent-soft);
    --btn-tertiary-text: var(--text);
    --btn-tertiary-border: var(--border-strong);
    --btn-tertiary-hover: var(--hover);
    --btn-shadow: 0 1px 1px rgb(0 0 0 / .06);
    --focus-halo: var(--surface);
    --target-min: 24px;              /* WCAG 2.2 2.5.8: every pointer target at least 24 by 24 CSS px */
    --header-divider: rgb(255 255 255 / .12);
    --header-active: rgb(255 255 255 / .08);
    --header-outline: rgb(255 255 255 / .35);
    --header-alert: #ffd28a;
    --shadow-header: 0 1px 2px rgb(0 0 0 / .2);
    --shadow-pop: 0 6px 20px rgb(0 0 0 / .28);
    --shadow-dialog: 0 12px 40px rgb(0 0 0 / .35);
    --backdrop: rgb(15 30 50 / .45);
    --backdrop-strong: rgb(10 15 25 / .7);
    --nav-separator: rgb(255 255 255 / .45);   /* the thin white line between module tabs (the header is dark in every theme) */
    --logo-plate: #ffffff;           /* the official logo artwork has a white background: it sits on this plate in every theme */
    --photo-frame: #1d2733;          /* photographs sit on a dark frame in every theme */
    --photo-frame-text: #c9d2dc;
    --lightbox-bg: #11181f;
    --lightbox-border: #000000;
    --lightbox-text: #e8eef5;
}

/* ======================= Base ======================= */

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

html, body { height: 100%; margin: 0; }

body {
    height: 100dvh;      /* the visible height on tablets whose browser bars collapse (100% above is the fallback) */
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: var(--fs-md)/var(--lh) var(--font-ui);
}

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Header & navigation ---------------------------------------------- */

.app-header {
    flex: 0 0 var(--header-h);
    display: flex;
    align-items: stretch;
    background: var(--header-bg) linear-gradient(90deg, var(--header-bg) 0%, var(--header-bg) 30%, var(--header-bg-end) 100%); /* the colour stays the base for contrast */
    color: var(--header-text);
    box-shadow: var(--shadow-header);
    z-index: 1;
}

.app-brand {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border-right: 1px solid var(--header-divider);
}

.app-nav { display: flex; align-items: stretch; }

.tab-list {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0 0 0 4px;
    list-style: none;
}
.tab-list > li { display: flex; }

.tab {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--header-text);
    font-size: var(--fs-md);
    text-decoration: none;
    white-space: nowrap;
}
.tab:hover { background: var(--header-hover); }
/* The selected main panel is the colour inversion of the header: light background and dark text against the dark bar
   (--nav-active-*, defined by every theme), with an accent underline; only the main navigation uses this. */
.tab.is-active,
.tab.is-active:hover {
    border-bottom-color: var(--accent);
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 600;
    border-radius: var(--radius) var(--radius) 0 0;
}
.tab:focus-visible { outline: 2px solid var(--header-line); outline-offset: -2px; }
.tab.is-active:focus-visible { outline-color: var(--nav-active-text); }
/* Module paging (nav-pages.js): "..." shows the next page of module tabs, the left chevron the previous one; a tab of another page is hidden, never removed. */
.tab-more, .tab-prev { padding: 0 14px; font-size: 1.2em; letter-spacing: .1em; }
.tab-more[hidden], .tab-prev[hidden] { display: none; }
.tab-list > li.is-paged-out { display: none; }
/* A thin separator between adjacent VISIBLE module tabs (none before the first or after the last; hidden or paged-out modules count for nothing). The tabs' own side padding
   puts it midway between the labels; it is shorter than the tab and takes no part in the active-tab styling. */
.tab-list > li:not([hidden], .is-paged-out) ~ li:not([hidden], .is-paged-out)::before {
    content: "";
    align-self: center;
    width: 1px;
    height: 56%;
    background: var(--nav-separator);
}
.btn-app-menu, .btn-product-menu { display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; padding: 1px 8px; }
.btn-app-menu .icon, .btn-product-menu .icon { width: 1.3em; height: 1.3em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.btn-app-menu:popover-open, .btn-app-menu[aria-expanded="true"], .btn-product-menu:popover-open, .btn-product-menu[aria-expanded="true"] { background: var(--header-hover); border-color: var(--header-text); }

.app-header-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.app-message { margin-right: 10px; font-size: var(--fs-sm); color: var(--header-alert); }

/* ---- Application (hamburger) popover menu: Theme, Display size, About -------- */

.menu {
    position: fixed;
    inset: auto;
    margin: 0;
    min-width: 340px;
    padding: 6px 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-pop);
}
.menu > .menu-sep:first-child { display: none; }
.menu-label {
    padding: 6px 14px 2px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-label);
}
.menu-sep { height: 1px; margin: 6px 0; background: var(--border); }
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 14px;
    border: 0;
    background: none;
    color: var(--text);
    font-size: var(--fs-md);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); outline: none; }
.menu-item:focus-visible { box-shadow: inset 3px 0 0 var(--accent); }
.menu-item[aria-checked="true"] { font-weight: 600; }
.menu-item .menu-check { width: 1em; color: var(--accent-strong); font-weight: 700; }
.menu-item[aria-checked="true"] .menu-check::before { content: "\2713"; }
.menu-item .menu-hint { margin-left: auto; padding-left: 14px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }
.menu-item:disabled { color: var(--text-subtle); cursor: not-allowed; }
.menu-item[hidden] { display: none; }
.menu-swatch { display: inline-flex; flex: 0 0 auto; width: 42px; height: 16px; border: 1px solid var(--border-control); border-radius: 3px; overflow: hidden; }
.menu-swatch i { flex: 1; }
.menu-swatch i:nth-child(1) { background: var(--header-bg); }
.menu-swatch i:nth-child(2) { background: var(--accent); }
.menu-swatch i:nth-child(3) { background: var(--surface); }
.menu-swatch i:nth-child(4) { background: var(--heading-bg); }
.menu-size-sample { display: inline-flex; flex: 0 0 auto; justify-content: center; width: 42px; font-weight: 600; color: var(--text-label); }
.menu-size-sample[data-sample="compact"] { font-size: .86em; }
.menu-size-sample[data-sample="large"] { font-size: 1.2em; }

/* ---- Language switch --------------------------------------------------- */

.lang-switch {
    flex-shrink: 0;
    display: flex;
    border: 1px solid var(--header-outline);
    border-radius: var(--radius);
    overflow: hidden;
}
.lang-option {
    min-height: var(--target-min);
    padding: 2px 10px;
    border: 0;
    background: none;
    color: var(--header-text);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.lang-option + .lang-option { border-left: 1px solid var(--header-outline); }
.lang-option:hover { background: var(--header-hover); }
.lang-option.is-current { background: var(--header-text); color: var(--header-bg); cursor: default; }

/* ---- Panels ------------------------------------------------------------ */

.app-main { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; overflow-x: auto; overflow-y: hidden; }   /* positioned, so absolutely placed descendants (screen-reader-only text) scroll with it instead of widening the page */   /* a window narrower than the workspace scrolls this area, not the page */
.app-footer {
    flex: 0 0 var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 12px;
    font-size: var(--fs-xs);
    color: var(--text-label);
    white-space: nowrap;
    overflow: hidden;
}

/* Copyright left, "Licensed to: <customer>" right (Classic's main form); a narrow window shortens each with an ellipsis (the name keeps its title), never overlapping. */
.app-copyright, .app-licensed { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-licensed { margin-left: auto; flex: 0 1 auto; }
.app-licensed-name { font-weight: 600; color: var(--text-strong); }

.panel-host { flex: 1 1 auto; display: flex; min-width: 0; }   /* R1: a narrow window changes the layout mode (workspace.js) instead of scrolling the workspace */

.panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--gap);
    gap: var(--gap);
}
.panel[hidden] { display: none; }

.panel-toolbar {
    flex: 0 0 auto; /* never squeezed by the panel body: a group that wraps in a narrow column (1366 px) grows the toolbar instead of being clipped */
    display: flex;
    align-items: center;
    gap: var(--gap);
    min-height: calc(var(--control-h) + 8px);
    padding: 0 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.panel-title { margin: 0 4px 0 0; font-size: var(--fs-lg); font-weight: 600; color: var(--text-strong); }
.tb-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); min-width: 0; }

/* Receiving toolbar on the workspace columns: Animal actions above the Animal Record, title and record navigation above the
   Intake/Dispositions centre, Person actions above the Persons region. The columns repeat the workspace's (same shared widths,
   splitters, rails), so the groups follow the splitters; the outline is a shadow because a border would shift the columns. */
.panel { --tb-left: minmax(var(--ws-side-min), var(--ws-left)); --tb-right: minmax(var(--ws-side-min), var(--ws-right)); }
.panel:has(.workspace[data-left-collapsed]) { --tb-left: var(--ws-rail); }
.panel:has(.workspace[data-right-collapsed]) { --tb-right: var(--ws-rail); }
.panel-toolbar-columns {
    display: grid;
    grid-template-columns: var(--tb-left) var(--ws-splitter) minmax(var(--ws-centre-min), 1fr) var(--ws-splitter) var(--tb-right);
    gap: 0;
    padding: 0;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--border);
}
.panel-toolbar-columns > .tb-group { padding: 3px 8px; }
.panel-toolbar-columns > .tb-animal { grid-column: 1; }
.panel-toolbar-columns > .tb-centre { grid-column: 3; flex-wrap: nowrap; }
.panel-toolbar-columns > .tb-person { grid-column: 5; }
/* A collapsed region is a 30 px rail, and the matching map replaces the Persons region: its actions are out of reach, so they are not shown. */
.panel:has(.workspace[data-left-collapsed]) .tb-animal,
.panel:has(.workspace[data-right-collapsed]) .tb-person,
.panel:has(.workspace[data-right-view=matching]) .tb-person { display: none; }

.panel-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: var(--gap);
}

.region {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
/* Region heading: a tint of the theme colour with a restrained accent mark at its left edge. */
.region-header {
    padding: 0 var(--head-px);
    background: var(--heading-bg);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: inset 3px 0 0 var(--accent);
    font-size: var(--fs-heading);
    font-weight: 600;
    color: var(--heading-color);
}

.placeholder {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-label);
}

.panel-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: var(--status-h);
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    color: var(--text-label);
}

/* ---- Buttons & form controls ----------------------------------------- */

/* Button hierarchy (docs/ui-design-system-1.0I.md). .btn is the SECONDARY action (Add, Edit, Search from a toolbar, Select): outlined, accent text.
   .btn-primary: the one main action of a dialog or bar (Save, Confirm, Search in a search dialog, New Intake). .btn-create: the green "new record" action
   of a toolbar (New Animal). .btn-tertiary: Cancel, Back, Close. .btn-danger: a permanent deletion only (End, a staged Remove and Undo are not).
   Every variant takes its colours from the theme; hover, :active, :focus-visible, :disabled and aria-busy are shared. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: max(var(--target-min), var(--control-h));
    min-width: var(--target-min);
    padding: 0 14px;
    border: 1px solid var(--btn-secondary-border);
    border-radius: var(--radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    font-size: var(--fs-md);
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--btn-shadow);
}
.btn:hover:not(:disabled) { border-color: var(--accent); background: var(--btn-secondary-hover); color: var(--accent-strong); }
.btn:active:not(:disabled) { background: var(--selected); box-shadow: none; }
.btn:disabled { border-color: var(--border); background: var(--surface-sunken); color: var(--text-subtle); box-shadow: none; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo); }
.btn[hidden] { display: none; }
.btn-primary { border-color: var(--accent-strong); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover:not(:disabled) { border-color: var(--accent-strong); background: var(--accent-strong); color: var(--on-accent); }
.btn-primary:active:not(:disabled) { background: var(--accent-strong); }
.btn-create { border-color: var(--create-strong); background: var(--create); color: var(--on-create); font-weight: 600; }
.btn-create:hover:not(:disabled) { border-color: var(--create-strong); background: var(--create-strong); color: var(--on-create); }
.btn-create:active:not(:disabled) { background: var(--create-strong); }
.btn-create-person { border-color: var(--create-person-strong); background: var(--create-person); color: var(--on-create-person); font-weight: 600; }          /* New Person: the Person panel's purple, as New Animal is green */
.btn-create-person:hover:not(:disabled) { border-color: var(--create-person-strong); background: var(--create-person-strong); color: var(--on-create-person); }
.btn-create-person:active:not(:disabled) { background: var(--create-person-strong); }
.btn-tertiary { border-color: var(--btn-tertiary-border); background: var(--surface); color: var(--btn-tertiary-text); box-shadow: none; }
.btn-tertiary:hover:not(:disabled) { border-color: var(--border-control); background: var(--btn-tertiary-hover); color: var(--text-strong); }
.btn-danger { border-color: var(--danger-border); background: var(--surface); color: var(--danger-text); }
.btn-danger:hover:not(:disabled) { border-color: var(--danger-strong); background: var(--danger-bg); color: var(--danger-text); }
.btn-danger:active:not(:disabled) { background: var(--danger-bg); }
/* Disabled is the same for every variant: never mistaken for an available command. */
.btn-primary:disabled, .btn-create:disabled, .btn-create-person:disabled, .btn-danger:disabled, .btn-tertiary:disabled { border-color: var(--border); background: var(--surface-sunken); color: var(--text-subtle); }
/* A command waiting for the server (aria-busy="true"): a spinner beside its label, no second click. */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after {
    content: "";
    width: .9em;
    height: .9em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation-duration: 2.4s; } }
.btn-icon { min-width: max(var(--target-min), calc(var(--control-h) - 6px)); padding: 0 6px; font-size: var(--fs-xs); }

input, select {
    font: inherit;
    font-size: var(--fs-md);
    color: var(--text);
    height: var(--control-h);
    min-width: 0;
    padding: 0 8px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    background: var(--surface);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
input[type=checkbox] { height: auto; margin: 0; accent-color: var(--accent); }

.check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }

/* ---- Panel toolbar additions -------------------------------------------- */

.record-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.record-nav[hidden] { display: none; }
.record-nav-position { padding: 0 8px; font-size: var(--fs-sm); color: var(--text-label); white-space: nowrap; }

/* ---- Search dialog ------------------------------------------------------ */

.search-dialog {
    width: min(1760px, calc(100vw - 48px));
    height: min(940px, calc(100vh - 48px));
    height: min(940px, calc(100dvh - 48px));
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--shadow-dialog);
}
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: var(--backdrop); }
.search-dialog.is-busy .grid-scroll { opacity: .6; }

.dialog-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--header-h);
    padding: 0 6px 0 14px;
    background: var(--header-bg);
    color: var(--header-text);
}
.dialog-header h2 { margin: 0; font-size: var(--fs-heading); font-weight: 600; }
.dialog-context { font-size: var(--fs-sm); opacity: .85; }
.dialog-header-tools { margin-left: auto; }

.search-top {
    flex: 0 0 auto;
    display: flex;
    gap: var(--gap);
    padding: var(--gap);
}

.search-criteria {
    flex: 1 1 auto;
    display: grid;
    /* Always one row of four panels (Animal, Location, Owner, Identification) so Identification stays beside the actions. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    margin: 0;
}
.search-criteria fieldset {
    display: grid;
    grid-template-columns: fit-content(45%) minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
    margin: 0;
    padding: 4px 10px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.search-criteria legend {
    padding: 0 6px;
    font-size: var(--fs-heading);
    font-weight: 600;
    color: var(--heading-color);
}
.search-criteria label:not(.check) { color: var(--text-label); font-size: var(--fs-label); font-weight: 500; overflow-wrap: anywhere; }
.search-criteria input:not([type=checkbox]), .search-criteria select { width: 100%; }
/* Search groups keep their own layout (every field fills its cell, so a French date never leaves its panel); their labels already wrap like the editors' (overflow-wrap). */
.date-today { display: inline-flex; gap: 4px; align-items: center; justify-self: start; min-width: 0; }
.field-pair > .date-today { flex: 1 1 0; }
.today-btn { min-height: var(--target-min); padding-block: 0; flex: 0 0 auto; }
.field-pair, .field-range { display: flex; gap: 4px; min-width: 0; align-items: center; }
.field-range { flex-wrap: wrap; }
input[type=date] { min-width: 9.2em; }
input[type=time] { min-width: 6.4em; }
.field-pair > input:not([type=checkbox]), .field-pair > select { flex: 1 1 0; }
.field-pair > input.narrow { flex: 0 0 4.6em; }
.field-pair > .check { flex: 0 0 auto; }
.field-range > input { flex: 1 1 0; }
/* Search criteria: a pair that gets too narrow wraps its second control instead of squeezing the first. */
.search-criteria { container-type: inline-size; container-name: criteria; }
.search-criteria .field-pair { flex-wrap: wrap; }
.search-criteria .field-pair > input:not([type=checkbox]):not(.narrow), .search-criteria .field-pair > select { flex: 1 1 7em; }
/* Large text in a narrow dialog (1366 px): each panel puts its labels above the fields so four panels still fit in one row.
   Container queries cannot read variables, so this applies to the Large size only. */
@container criteria (max-width: 1240px) {
    :root[data-size="large"] .search-criteria fieldset { grid-template-columns: minmax(0, 1fr); gap: 1px 8px; }
    :root[data-size="large"] .search-criteria fieldset > label:not(.check) { margin-top: 4px; }
}

.search-actions {
    flex: 0 0 11em;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.search-actions .btn { width: 100%; }
.search-actions .check { padding: 4px 2px; }
.search-actions .btn-close { margin-top: auto; }

.search-status {
    flex: 0 0 auto;
    display: flex;
    gap: 16px;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    font-size: var(--fs-sm);
    color: var(--text-label);
}
.search-status [data-search-summary] { display: flex; gap: 16px; }
.search-message:not(:empty) { color: var(--danger-text); font-weight: 600; }

/* ---- Tables: results grid and the record tables share one look ---------------------- */

.grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 var(--gap) var(--gap);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.grid-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.grid {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-table);
}
.grid th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border-strong);
    border-right: 1px solid var(--border);
    text-align: left;
}
.grid th button {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: var(--row-pad) var(--cell-px);
    border: 0;
    background: none;
    color: var(--text-label);
    font-size: var(--fs-th);
    font-weight: 600;
    text-align: inherit;
    white-space: nowrap;
}
.grid th button:hover { background: var(--hover); color: var(--text-strong); }
.grid th button::after { content: ""; width: .6em; color: var(--accent-strong); }
.grid th[aria-sort=ascending] button::after { content: "\25B2"; font-size: .6em; }
.grid th[aria-sort=descending] button::after { content: "\25BC"; font-size: .6em; }
.grid td {
    padding: var(--row-pad) var(--cell-px);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    white-space: nowrap;
    max-width: 18em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grid .col-number { text-align: right; font-variant-numeric: tabular-nums; }
.grid .col-date { font-variant-numeric: tabular-nums; }
.grid tbody tr { cursor: default; }
.grid tbody tr:nth-child(even) td { background: var(--surface-alt); }
.grid tbody tr:hover td { background: var(--hover); }
.grid tbody tr.is-selected td { background: var(--selected); color: var(--selected-text); }
.grid tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--selected-bar); }
.grid-scroll:focus-within .grid tbody tr.is-selected td { background: var(--accent); color: var(--on-accent); }

/* ---- Three-region workspace (Animal | operations | right) ---------------------------
   Columns: left region, splitter, centre, splitter, right region. Side widths are shared
   percentages (--ws-left / --ws-right, set by workspace.js) with minimum widths that follow the
   display size (--ws-side-min / --ws-centre-min); the centre takes the rest. A collapsed side
   region is a narrow rail; a panel without a right region (Lost/Found outside expanded matching)
   gives that space to the centre. */

:root {
    --ws-left: 25%;
    --ws-right: 25%;
    --ws-rail: 30px;
    --ws-splitter: 6px;
}

.workspace {
    --col-left: minmax(var(--ws-side-min), var(--ws-left));
    --col-right: minmax(var(--ws-side-min), var(--ws-right));
    --col-split-right: var(--ws-splitter);
    grid-template-columns: var(--col-left) var(--ws-splitter) minmax(var(--ws-centre-min), 1fr) var(--col-split-right) var(--col-right);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
}
.workspace > * { grid-row: 1; min-width: 0; }
.workspace > [data-region=left] { grid-column: 1; }
.workspace > .splitter-left { grid-column: 2; }
.workspace > [data-region=centre] { grid-column: 3; }
.workspace > .splitter-right { grid-column: 4; }
.workspace > [data-region=right] { grid-column: 5; }

.workspace[data-left-collapsed] { --col-left: var(--ws-rail); }
.workspace[data-right-collapsed] { --col-right: var(--ws-rail); }
.workspace[data-right-view=none] { --col-right: 0px; --col-split-right: 0px; }
.workspace[data-right-view=none] > [data-region=right],
.workspace[data-right-view=none] > .splitter-right { display: none; }
.workspace[data-left-collapsed] > .splitter-left,
.workspace[data-right-collapsed] > .splitter-right { visibility: hidden; }
.workspace[data-right-view=matching] .right-default,
.workspace:not([data-right-view=matching]) .right-matching { display: none; }

.region-right > div { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.region-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.region-centre { container-type: inline-size; }

.region-header { display: flex; align-items: center; gap: 6px; min-height: var(--region-bar-h); }
.region-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-toggle {
    flex: 0 0 auto;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--text-label);
    font-size: var(--fs-sm);
    line-height: 1;
}
.region-toggle:hover { color: var(--accent-strong); }
.region-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.region-toggle > span { display: inline-block; }
.region-right .region-toggle { order: -1; }

/* Collapsed regions: a rail with the vertical title; clicking it expands the region. */
.workspace[data-left-collapsed] > [data-region=left],
.workspace[data-right-collapsed] > [data-region=right] { cursor: pointer; }
.workspace[data-left-collapsed] > [data-region=left] .region-content,
.workspace[data-right-collapsed] > [data-region=right] .region-content { display: none; }
.workspace[data-left-collapsed] > [data-region=left] .region-header,
.workspace[data-right-collapsed] > [data-region=right] .region-header {
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: 6px 0;
    border-bottom: 0;
}
.workspace[data-left-collapsed] > [data-region=left] .region-title,
.workspace[data-right-collapsed] > [data-region=right] .region-title { writing-mode: vertical-rl; }
.workspace[data-left-collapsed] > [data-region=left] .region-toggle > span,
.workspace[data-right-collapsed] > [data-region=right] .region-toggle > span { transform: scaleX(-1); }

/* ---- Responsive layout modes (R1; docs/responsive-design-architecture.md) ---------------------------------------------------------------------------
   workspace.js sets data-layout-mode on each workspace from the width it has and the Display-size minimums: wide (the grid above, untouched), two (a pair of regions) or
   one (a single region). Regions that are not shown carry data-hidden (display: none: they stay in the page with their state); shown ones carry data-slot. The saved
   widths and collapsed flags are never written by a mode: they apply again whenever the layout is wide. */
.ws-viewbar { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ws-viewbar[hidden], .ws-context[hidden], .ws-context [hidden] { display: none; }
.ws-context { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; flex: 1 1 14em; min-width: 0; }
.ws-context-label { color: var(--text-label); font-size: var(--fs-label); }
.ws-context-name { color: var(--text-strong); font-size: var(--fs-heading); font-weight: 700; overflow-wrap: anywhere; }
.ws-context-id, .ws-context-none { color: var(--text-label); font-size: var(--fs-md); }
.ws-viewswitch { display: inline-flex; flex-wrap: nowrap; margin-left: auto; max-width: 100%; }
.ws-viewswitch .btn-toggle { min-height: max(var(--target-min), var(--control-h)); padding: 0 14px; font-size: var(--fs-md); white-space: normal; }
.workspace[data-layout-mode=two], .workspace[data-layout-mode=one] { column-gap: var(--ws-splitter); }
.workspace[data-layout-mode=two] { grid-template-columns: var(--pair-a) var(--pair-b); }
.workspace[data-layout-mode=one] { grid-template-columns: minmax(0, 1fr); }
.workspace[data-layout-mode=two][data-pair="left-centre"] { --pair-a: minmax(var(--ws-side-min), 42%); --pair-b: minmax(var(--ws-centre-min), 1fr); }
.workspace[data-layout-mode=two][data-pair="centre-right"] { --pair-a: minmax(var(--ws-centre-min), 1fr); --pair-b: minmax(var(--ws-side-min), 42%); }
.workspace[data-layout-mode=two][data-pair="left-right"] { --pair-a: minmax(var(--ws-side-min), 1fr); --pair-b: minmax(var(--ws-side-min), 1fr); }
.workspace:is([data-layout-mode=two], [data-layout-mode=one]) > .splitter { display: none; }
.workspace:is([data-layout-mode=two], [data-layout-mode=one]) > [data-region][data-hidden] { display: none; }
.workspace:is([data-layout-mode=two], [data-layout-mode=one]) > [data-region][data-slot="1"] { grid-column: 1; }
.workspace:is([data-layout-mode=two], [data-layout-mode=one]) > [data-region][data-slot="2"] { grid-column: 2; }
.workspace:is([data-layout-mode=two], [data-layout-mode=one]) .region-toggle { display: none; }      /* the rails belong to the wide layout */
/* the Receiving toolbar is laid out on the wide columns; otherwise it wraps and shows the actions of the regions on screen */
.panel:has(.workspace:is([data-layout-mode=two], [data-layout-mode=one])) .panel-toolbar-columns { display: flex; flex-wrap: wrap; box-shadow: none; border: 1px solid var(--border); }
.panel:has(.workspace:is([data-layout-mode=two], [data-layout-mode=one]):not([data-show-left])) .tb-animal,
.panel:has(.workspace:is([data-layout-mode=two], [data-layout-mode=one]):not([data-show-right])) .tb-person { display: none; }

/* Splitters */
.splitter { position: relative; cursor: col-resize; touch-action: none; outline: none; }
.splitter::after { content: ""; position: absolute; inset: 0 2px; border-radius: 2px; }
@media (pointer: coarse) {
    :root { --target-min: 44px; }                                   /* every control that uses max(var(--target-min), ...) becomes a 44 px touch target */
    .ws-tab, .menu-item, .lang-option { min-height: var(--target-min); }
    .lang-option { min-width: var(--target-min); }
    .splitter::before { content: ""; position: absolute; inset: 0 -9px; }   /* a 24 px grab area around the 6 px splitter (the keyboard and reset alternatives remain) */
}
.splitter:hover::after, .splitter:focus-visible::after, .workspace.is-resizing .splitter::after { background: var(--accent); opacity: .45; }
.workspace.is-resizing { cursor: col-resize; user-select: none; }

/* Tabs: text tabs with an accent underline; long labels wrap (or the strip wraps) instead of truncating */
.tab-strip {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0 2px;
    padding: 0 8px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border-strong);
}
.ws-tab {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 6px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-label);
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
}
.ws-tab:hover { color: var(--text); background: var(--hover); }
.ws-tab.is-active { border-bottom-color: var(--accent); color: var(--text-strong); font-weight: 600; }
.ws-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tab-count { margin-left: 6px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--neutral-bg); color: var(--neutral-text); font-size: var(--fs-xs); font-weight: 600; }
.tab-count:empty { display: none; }
.region-centre > .tab-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tab-pane[hidden] { display: none !important; }
.ops-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; }

/* Displays bound to the panel's animal (outside the Animal region) */
.animal-bound { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.animal-bound-empty, .animal-bound-body { display: none; }
[data-animal-state=empty] .animal-bound-empty { display: flex; }
[data-animal-state=loaded] .animal-bound-body { display: block; }
.rv-sheet-tall { max-height: 55vh; }

/* Placeholders for later milestones (never imitate real operations) */
.ws-placeholder {
    margin: 0 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    overflow: hidden;
}
/* The same section heading as the record views: a subtle tint over the content. */
.ws-placeholder h3 {
    margin: 0;
    padding: var(--head-py) var(--head-px);
    background: var(--heading-soft);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-heading);
    font-weight: 600;
    color: var(--heading-color);
}
.ws-placeholder p { margin: 0; padding: var(--body-my) var(--head-px); font-size: var(--fs-md); color: var(--text-label); }
.ws-placeholder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 10px; align-content: start; }
.ws-placeholder-grid .ws-placeholder { margin: 0; }
.ws-pending {
    padding: 0 8px;
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-pill);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.ws-note { margin: 6px 0 0; font-size: var(--fs-sm); font-style: italic; color: var(--text-label); }

/* Matching (layout only until the matching milestone) */
.matching { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.matching-toolbar { display: flex; align-items: center; gap: 8px; }
.matching-toolbar h3 { margin: 0; font-size: var(--fs-heading); font-weight: 600; color: var(--heading-color); }
.matching-toggle { margin-left: auto; }
.matching-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 21em; gap: 10px; }
.matching-results { min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.matching-table td.is-empty { padding: 16px 8px; text-align: center; }
.matching-detail { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.match-photo { margin: 0; }
.match-photo-frame,
.match-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--text-label);
    font-size: var(--fs-sm);
}
.match-photo-frame { height: 200px; }
.match-photo figcaption { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-label); text-align: center; }
.match-contact { flex-direction: column; align-items: stretch; padding: 6px 8px; }
.match-contact h4 { margin: 0 0 2px; font-size: var(--fs-sm); }
.match-contact p { margin: 0; }
@container (max-width: 760px) {
    .matching-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(160px, 1fr) auto; }
    .matching-detail { flex-direction: row; flex-wrap: wrap; }
    .matching-detail > * { flex: 1 1 200px; }
}

/* Check Lost (G4): criteria row, notices, results and the read-only candidate detail. Colour only through tokens; the frame keeps the matching layout. */
.check-lost .match-photo-frame, .check-lost .match-contact { border-style: solid; }
.cl-context { margin: 0; font-weight: 600; color: var(--text-strong); }
.cl-criteria { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.cl-criteria[hidden] { display: none; }
.cl-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cl-field label, .cl-label { color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
.cl-field select { min-width: 9em; }
.cl-radius .field-pair { flex-wrap: nowrap; }
.cl-radius-input { width: 5.5em; flex: 0 0 5.5em; text-align: right; }
.cl-radius .field-pair > select { flex: 0 0 auto; min-width: 7.5em; }
.cl-error { color: var(--danger-text); font-weight: 600; }
.cl-error[hidden] { display: none; }
.cl-radius-input[aria-invalid="true"] { border-color: var(--danger-border); box-shadow: 0 0 0 1px var(--danger-border); }
.cl-center-value { color: var(--text-strong); font-weight: 500; }
.cl-actions { display: flex; gap: 6px; align-self: flex-end; margin-left: auto; }
.cl-notice, .cl-truncated { margin: 0; padding: 6px 12px; border: 1px solid var(--warning-border); border-left-width: 4px; border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); font-weight: 600; }
.cl-notice { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
.cl-notice[hidden], .cl-truncated[hidden] { display: none; }
.cl-status { margin: 0; min-height: 1.4em; color: var(--text-label); }
.cl-table td.col-num, .cl-table th:first-child { white-space: nowrap; }
.cl-table tbody tr.is-selected td { background: var(--selected); color: var(--selected-text); }
.cl-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--selected-bar); }
.cl-pick { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 2px 4px; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; border-radius: var(--radius); }
.cl-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cl-detail-title { margin: 0; font-size: var(--fs-heading); color: var(--heading-color); }
.cl-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cl-photo { height: 150px; overflow: hidden; }
.cl-photo img { width: 100%; height: 100%; object-fit: contain; }
.cl-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0; }
.cl-facts dt { color: var(--text-label); font-size: var(--fs-label); }
.cl-facts dd { margin: 0; color: var(--text-strong); font-weight: 500; overflow-wrap: anywhere; }
.cl-facts[hidden] { display: none; }
.cl-contact { gap: 6px; }

/* Check Lost, results stage: the candidate list above, the Recovered and Lost Candidate galleries below. The stage scrolls inside the pane (the dialog never outgrows the window). */
.cl-results-stage { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.cl-results-stage[hidden] { display: none; }
.cl-results-bar { display: flex; align-items: center; gap: 10px; }
.cl-summary { margin: 0; flex: 1 1 auto; font-weight: 600; color: var(--text-strong); }
.cl-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cl-list { flex: 0 0 auto; max-height: 15em; }
.cl-table td:not(:nth-child(2)):not(:nth-child(4)):not(:nth-child(5)) { white-space: nowrap; }
.cl-none { margin: 0; padding: 16px 8px; text-align: center; font-weight: 600; color: var(--text-strong); }
.cl-none[hidden] { display: none; }
.cl-review-note { margin: 0; }
.cl-compare { flex: 1 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.cl-compare[hidden] { display: none; }
.cl-gallery { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px 10px; border: 1px solid var(--border); border-top-width: 4px; border-radius: var(--radius); background: var(--surface); }
.cl-gallery-recovered { border-top-color: var(--ctx-animal); }
.cl-gallery-candidate { border-top-color: var(--ctx-intake); }
.cl-gallery-head h4 { margin: 0; font-size: var(--fs-heading); font-weight: 700; color: var(--heading-color); }
.cl-gallery-sub { margin: 0; min-height: 1.4em; color: var(--text-label); }
.cl-stage { position: relative; height: 16.5em; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); overflow: hidden; }
.cl-photo-btn { width: 100%; height: 100%; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.cl-photo-btn:disabled { cursor: default; }
.cl-photo-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.cl-photo-btn img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-photo-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 8px; text-align: center; font-weight: 600; color: var(--text-label); pointer-events: none; }
.cl-photo-state[hidden] { display: none; }
.cl-gallery-nav { display: flex; align-items: center; gap: 6px; }
.cl-position { min-width: 5em; text-align: center; font-weight: 600; color: var(--text-strong); }
.cl-position[hidden] { display: none; }
.cl-gallery-nav .btn:last-child { margin-left: auto; }
.cl-gallery .cl-contact h5 { margin: 0 0 2px; font-size: var(--fs-sm); }
/* The two galleries stay side by side down to a narrow third of the screen (about 440 px of panel); the details under them are two columns as well. */
.cl-compare > .cl-details { grid-column: 1 / -1; }
.cl-gallery { padding: 6px 8px 8px; }
.cl-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; min-width: 0; }
.cl-detail-col { min-width: 0; padding: 6px 8px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.cl-detail-col h4 { margin: 0; padding: 2px 6px; background: var(--heading-bg); color: var(--text-strong); font-size: var(--fs-heading); font-weight: 600; border-radius: var(--radius); }
.cl-place { display: grid; gap: 1px; color: var(--text-strong); font-weight: 500; overflow-wrap: anywhere; }
.cl-place p { margin: 0; }
.cl-place-label { display: block; color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
.cl-detail-col .cl-contact { border-top: 1px solid var(--border); padding-top: 4px; }
.cl-contact-text, [data-cl-contact-text] { overflow-wrap: anywhere; }
@container (max-width: 440px) {
    .cl-compare, .cl-details { grid-template-columns: minmax(0, 1fr); }
}
/* Check Known Animals (K3): the Check Lost layout (cl-*) with a criteria form in two groups, and the candidate's guardians under the photographs. */
.cl-gallery[hidden] { display: none; }
.ck-criteria { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.ck-group { margin: 0; padding: 4px 8px 8px; border: 1px solid var(--border); border-radius: var(--radius); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; min-width: 0; }
.ck-group > legend { padding: 0 6px; font-size: var(--fs-heading); font-weight: 600; color: var(--text-strong); }
.ck-group .cl-field:not(.cl-radius) :is(input, select) { width: 100%; min-width: 0; }
.ck-wide { grid-column: 1 / -1; }
.ck-check { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; color: var(--text-strong); font-weight: 500; }
.ck-locate, .ck-quick { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ck-radius-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ck-radius-row .ck-quick { margin-left: auto; justify-content: flex-end; }
.ck-group .cl-radius .field-pair { justify-content: flex-start; }
.ck-group .cl-radius-input { flex: 0 0 6em; width: 6em; }
.ck-actions { align-self: flex-end; margin-left: 0; }
.check-known .cl-list { max-height: 11em; }
.check-known .cl-stage { height: 11em; }
.check-known[data-stage="results"] :is(.cl-context, .matching-toolbar, .cl-status) { display: none; }
/* The centre pane scrolls as one: the tab pane clips (overflow hidden), so the pane itself must be the scroller, and its children keep their natural height. */
.check-known { overflow-y: auto; overflow-x: hidden; }
.check-known > * { flex-shrink: 0; }
.check-known .cl-results-stage { overflow: visible; flex: 0 0 auto; }
.ck-head { display: grid; gap: 6px; }
.ck-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ck-head-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; margin-left: auto; }
.ck-head-summary { margin: 0; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.ck-head-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ck-head-criteria { margin: 0; color: var(--text-label); overflow-wrap: anywhere; }
.ck-head-criteria:empty { display: none; }
.detail-dialog { width: min(900px, calc(100vw - 48px)); }
.detail-shell { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
.detail-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 50px); }
.detail-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.detail-gallery { margin: 8px 12px; max-width: 28em; }  /* the summary line already says what was searched; the room goes to the guardians */
.ck-compare[data-origin="none"] .cl-gallery-candidate { grid-column: 1 / -1; }
.ck-table td:not(:nth-child(2)):not(:nth-child(4)):not(:nth-child(5)) { white-space: nowrap; }
.ck-guardians { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px 8px 8px; border: 1px solid var(--border); border-top: 4px solid var(--ctx-person); border-radius: var(--radius); background: var(--surface); }
.ck-guardians-head { display: flex; align-items: center; gap: 8px; }
.ck-guardians-head h4 { margin: 0; font-size: var(--fs-heading); font-weight: 700; color: var(--heading-color); }
.ck-guardians-head .btn { margin-left: auto; }
.ck-guardians-head .btn[hidden], .ck-withheld[hidden] { display: none; }
.ck-guardian-list { display: grid; gap: 6px; min-width: 0; }
.ck-guardian { display: grid; gap: 3px; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.ck-guardian-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ck-guardian-name { margin: 0; font-size: var(--fs-value); font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; }
.ck-guardian-name.is-restricted { color: var(--text-subtle); font-weight: 600; }
.ck-rel { padding: 0 6px; border: 1px solid var(--info-border); border-radius: var(--radius); background: var(--info-bg); color: var(--info-text); font-size: var(--fs-sm); font-weight: 600; }
.ck-distance { margin-left: auto; color: var(--text-label); font-weight: 500; white-space: nowrap; }
.ck-address p { margin: 0; color: var(--text-strong); font-weight: 500; overflow-wrap: anywhere; }
.ck-address .ck-same-place { color: var(--text-label); font-size: var(--fs-sm); font-weight: 400; }
.ck-phones { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ck-phone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ck-number { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ck-ptype { color: var(--text-label); overflow-wrap: anywhere; }
.ck-warn { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-sm); font-weight: 600; }
.ck-view-guardian { justify-self: start; }
.app-nav li[hidden] { display: none; }  /* a module tab the server has not confirmed for this session */
/* Standalone Check Known Animals (K5): the component beside its own map, no animal and no person region. */
.ka-standalone { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px; gap: 6px; }
.ka-intro { margin: 0; }
.ka-layout { --ka-split: 50; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: calc((100% - 10px) * var(--ka-split) / 100) 10px minmax(0, 1fr); }  /* --ka-split: the left share in percent, set by known-animals-split.js */
.ka-main { grid-column: 1; }
.ka-splitter { grid-column: 2; align-self: stretch; }
.ka-splitter::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 44px; transform: translate(-50%, -50%); border-radius: 2px; background: var(--border-strong); }
.ka-map { grid-column: 3; }
.ka-layout.is-resizing { user-select: none; }
.ka-layout.is-resizing .ka-map { pointer-events: none; }
.ka-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ka-map { min-width: 0; min-height: 24em; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); }
.ka-map .pm { flex: 1 1 auto; min-height: 0; }
@media (max-width: 1500px) { .ka-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ka-splitter { display: none; } .ka-main, .ka-map { grid-column: auto; } }
.ck-selected-loc { margin: 0; color: var(--text-strong); font-weight: 600; overflow-wrap: anywhere; }
.ck-selected-loc[hidden] { display: none; }
.ck-marker { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; padding: 0 6px; border: 2px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-sm); font-weight: 700; }
.ck-marker.is-secondary { border-style: dashed; }
.ck-guardian.is-selected-location { border-color: var(--selected-bar); border-width: 2px; box-shadow: inset 5px 0 0 var(--selected-bar); }
.ck-guardian.is-selected-location .ck-marker { background: var(--danger-strong); border-color: var(--danger-strong); }
.ck-map-toggle { margin-left: auto; }
.pm-photo-where { display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--text-strong); }
.pm-photo-where[hidden] { display: none; }
.pm-photo-where p { margin: 0; overflow-wrap: anywhere; }
.pm-photo-where .pm-photo-where-title { color: var(--text-label); font-weight: 600; }
.pm.is-compact-windows .pm-photo-where p:nth-of-type(n+3) { display: none; }
@container (min-width: 560px) {
    .ck-group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ck-group > .cl-field:not(.ck-wide) { grid-column: span 1; }
}
.map-placeholder {
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: repeating-linear-gradient(45deg, var(--surface-alt) 0 12px, var(--surface-sunken) 12px 24px);
    color: var(--text-label);
    text-align: center;
}
.map-placeholder p { margin: 0; max-width: 260px; }
.map-pin { font-size: 2.2em; }

/* Media tab */
.media-body { flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 10px; padding: 12px; }
[data-animal-state=loaded] .media-body { display: flex; }
.media-layout { display: none; }
.media-toolbar { display: none; flex: 0 0 auto; align-items: center; gap: 6px; }
.media-body[data-state=loaded] > .media-toolbar, .media-body[data-state=none] > .media-toolbar { display: flex; }
.media-toolbar[hidden] { display: none !important; }
.media-body[data-state=loaded] .media-layout { display: grid; }
.media-body[data-state=none] > .media-none,
.media-body[data-state=loading] > .media-loading { display: flex; }
.media-layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(16em, 2fr) minmax(0, 3fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
}
.media-list-pane, .media-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.media-detail { overflow: auto; }
.media-list-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.media-list { display: flex; flex-direction: column; gap: 4px; padding: 2px; }
.media-truncated { margin: 0; font-size: var(--fs-sm); color: var(--text-label); }
.media-item {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.media-item:hover { background: var(--surface-alt); }
.media-item[aria-selected=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--surface-alt); }
.media-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.media-item.is-cage-card { border-left: 4px solid var(--warning-border); }
.media-item.is-unavailable .media-thumb { border-style: dashed; }
.media-thumb {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--photo-frame);
    color: var(--photo-frame-text);
}
.media-thumb-ext { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; }
.media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.media-item-type { font-weight: 700; color: var(--text-strong); }
.media-item-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item-date { font-size: var(--fs-sm); color: var(--text-label); }
.media-badges { display: flex; flex-wrap: wrap; gap: 2px; }
.media-badges:empty { display: none; }
.media-preview {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 260px;
    max-height: 55%;
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--photo-frame);
    color: var(--photo-frame-text);
}
.media-preview img, .media-preview video { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.media-preview img[data-media-image] { width: 100%; height: 100%; }
.media-preview .media-preview-thumb { max-height: 160px; }
.media-preview audio { width: 100%; }
.media-preview[data-kind="pdf"][data-file="available"] { min-height: 420px; padding: 0; align-items: stretch; justify-content: stretch; }
.media-preview-pdf { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--surface); }
.media-preview-note { margin: 0; max-width: 34em; text-align: center; color: var(--photo-frame-text); }
.media-missing { display: none; color: var(--photo-frame-text); }
.is-missing > .media-missing { display: block; }
.is-missing > img { display: none; }
.media-nav { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.media-position { min-width: 70px; text-align: center; font-size: var(--fs-sm); color: var(--text-label); }
.media-meta { align-content: start; margin: 0; }
.media-meta dd { white-space: pre-line; overflow-wrap: anywhere; }
.media-meta [hidden], .media-meta[hidden] { display: none; }

/* M2: editing the selected record (media-edit.js). The form replaces the details; the list and the preview stay. */
.media-status { margin: 0; padding: 4px 10px; border: 1px solid var(--success-border); border-radius: var(--radius); background: var(--success-bg); color: var(--success-text); font-weight: 600; }
.media-status.is-error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
.media-status[hidden], .media-form[hidden], .media-replace[hidden], .media-conflict[hidden], .media-form [hidden] { display: none; }
.media-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.media-form-heading { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text-strong); }
.media-form-grid { padding: 0; }
.media-form-wide { grid-column: 1 / -1; }
.media-form textarea { resize: vertical; }
.media-flags { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.media-location { margin: 0; padding: 6px 8px 8px; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.media-location legend { padding: 0 4px; font-weight: 600; color: var(--text-label); }
.media-location-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.media-form :disabled { cursor: not-allowed; }
.media-replace { padding: 8px 10px; border: 1px solid var(--warning-border); border-left-width: 4px; border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); }
.media-replace h4 { margin: 0 0 4px; font-size: var(--fs-md); }
.media-replace p { margin: 0 0 4px; }
.media-replace-list { margin: 0 0 8px; padding-left: 1.2em; }
.media-replace-list li { display: flex; flex-wrap: wrap; gap: 0 8px; }
.media-replace-list li > span:not(:last-child)::after { content: " ·"; }
.media-replace-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.media-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.media-form-actions { padding: 6px 0 0; background: none; }

/* M3: the Add media dialog (media-upload.js): drop zone, queue with a progress bar per file, camera. */
.media-upload-dialog { width: min(760px, 96vw); }
.upload-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; border: 2px dashed var(--border-strong, var(--border)); border-radius: var(--radius); background: var(--surface); }
.upload-drop.is-dragging { border-color: var(--primary); background: var(--info-bg); }
.upload-drop-hint { margin: 0; color: var(--text-label); }
.upload-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.upload-camera { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 6px; }
.upload-camera[hidden], .upload-all[hidden], .upload-list:empty, .editor-note[hidden] { display: none; }
.upload-camera h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text-strong); }
.camera-stage { display: flex; justify-content: center; background: var(--text-strong); border-radius: var(--radius); min-height: 8em; }
.camera-stage video, .camera-stage img { display: block; max-width: 100%; max-height: 40vh; }
.camera-stage [hidden] { display: none; }
.camera-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.upload-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow: auto; }
.upload-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.upload-item[data-state=done] { border-color: var(--success-border); background: var(--success-bg); color: var(--success-text); }
.upload-item[data-state=error] { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
.upload-item-name { overflow-wrap: anywhere; font-weight: 600; }
.upload-item-size { font-weight: 400; color: inherit; margin-left: 6px; }
.upload-item-fields { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.upload-item-fields select, .upload-item-fields input { flex: 1 1 12em; min-width: 0; }
.upload-item progress { grid-column: 1 / -1; width: 100%; height: 0.9em; accent-color: var(--primary); }
.upload-item progress[hidden] { display: none; }
.upload-item-status { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); }
.upload-item-actions { display: flex; gap: 4px; }

/* Cards with their own delete button, the toolbar message, the delete confirmation and the source / destination lines. */
.media-delete-layer { position: absolute; inset: 0; pointer-events: none; }
.media-list .media-item { padding-right: 72px; }
/* Each card's two actions, side by side at its top right: Break Link | Delete (positioned by media.js). */
:is(.media-delete, .media-unlink) { position: absolute; top: 4px; left: 0; pointer-events: auto; min-width: var(--target-min, 24px); min-height: var(--target-min, 24px); padding: 2px 5px; }
:is(.media-delete, .media-unlink)[data-icon]::before { margin: 0; }
:is(.media-delete, .media-unlink):disabled { opacity: .5; }
.media-delete-note { margin: 6px 0 0; color: var(--text-muted); }
.media-toolbar { flex-wrap: wrap; }
.media-toolbar-status { flex: 1 1 14em; min-width: 0; padding: 2px 8px; border-radius: var(--radius); background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); font-weight: 600; }
/* Processing of videos and recordings (media-jobs.js): one row per job; working = information colours, failed = danger. Tokens only. */
.media-jobs { margin: 0 0 8px; padding: 6px 8px; border: 1px solid var(--info-border); border-radius: var(--radius); background: var(--info-bg); color: var(--info-text); }
.media-jobs[hidden] { display: none; }
.media-jobs h3 { margin: 0 0 4px; font-size: var(--fs-label); font-weight: 600; }
.media-jobs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.media-job { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.media-job-name { flex: 1 1 10em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.media-job-state { font-size: var(--fs-sm); }
.media-job-progress { width: 9em; height: 0.8em; }
.media-job-error { flex: 1 1 100%; font-size: var(--fs-sm); }
.media-job-actions { display: inline-flex; gap: 6px; }
.media-job [hidden] { display: none !important; }
.media-job[data-state=failed] { padding: 4px 6px; border: 1px solid var(--danger-border); border-radius: var(--radius); background: var(--danger-bg); color: var(--danger-text); }

/* Sound recorder in the Add media dialog (media-upload.js). */
.upload-recorder { display: grid; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.upload-recorder[hidden] { display: none; }
.upload-recorder h3 { margin: 0; font-size: var(--fs-heading); font-weight: 600; }
.upload-recorder audio { width: 100%; }
.recorder-time { font-variant-numeric: tabular-nums; font-size: var(--fs-heading); font-weight: 600; color: var(--text-strong); }
.recorder-time[data-recording=true] { color: var(--danger-text); }
.media-toolbar-status.is-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.media-toolbar-status[hidden] { display: none; }
.media-delete-card { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.media-delete-thumb { position: relative; flex: 0 0 auto; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); overflow: hidden; }
.media-delete-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-delete-facts { flex: 1 1 auto; min-width: 0; margin: 0; }
.media-delete-cage { margin: 8px 0 0; }
/* The read-only card: Cage Card, Internet and Flyer on one full-width row (wrapping only when the width truly runs out), and View on Map. */
.media-flags-card { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0; padding: 4px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.media-flag { display: inline-flex; align-items: baseline; gap: 6px; }
.media-flag dt { color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
.media-flag dd { margin: 0; color: var(--text-strong); font-size: var(--fs-value); font-weight: 600; }
.media-flag[hidden], .media-flags-card[hidden], .media-geo-actions[hidden] { display: none; }
.media-geo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.media-geo-actions [hidden] { display: none; }
/* The image editor (media-image-editor.js): the crop stage with a draggable selection and eight handles, the server-rendered preview, size and quality. */
.image-editor-dialog { width: min(1180px, 97vw); }
.image-editor-body { display: flex; flex-direction: column; gap: 8px; }
.image-editor-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.image-editor-tools select { width: auto; }
.image-editor-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .image-editor-panes { grid-template-columns: minmax(0, 1fr); } }
.image-editor-pane { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.image-editor-pane h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text-strong); }
.ie-stage-wrap, .ie-preview { display: flex; align-items: center; justify-content: center; min-height: 14em; padding: 6px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; }
.ie-stage { position: relative; flex: 0 0 auto; touch-action: none; user-select: none; cursor: crosshair; line-height: 0; }
.ie-stage canvas { display: block; max-width: none; }
.ie-crop { position: absolute; box-sizing: border-box; border: 2px solid var(--primary); box-shadow: 0 0 0 9999px color-mix(in srgb, var(--text-strong) 45%, transparent); cursor: move; outline-offset: 2px; }
.ie-crop[hidden] { display: none; }
.ie-crop:focus-visible { outline: 3px solid var(--focus); }
.ie-handle { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--surface); border: 2px solid var(--primary); border-radius: 3px; box-sizing: border-box; }
.ie-handle[data-handle="nw"] { left: 0; top: 0; cursor: nwse-resize; } .ie-handle[data-handle="n"] { left: 50%; top: 0; cursor: ns-resize; } .ie-handle[data-handle="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.ie-handle[data-handle="w"] { left: 0; top: 50%; cursor: ew-resize; } .ie-handle[data-handle="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.ie-handle[data-handle="sw"] { left: 0; top: 100%; cursor: nesw-resize; } .ie-handle[data-handle="s"] { left: 50%; top: 100%; cursor: ns-resize; } .ie-handle[data-handle="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.ie-preview img { display: block; max-width: 100%; max-height: 380px; }
.ie-preview img[hidden] { display: none; }
.image-editor-options { display: flex; flex-wrap: wrap; gap: 8px; }
.image-editor-options fieldset { margin: 0; padding: 6px 10px 8px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.image-editor-options legend { padding: 0 4px; font-weight: 600; color: var(--text-label); }
.image-editor-options input[type=number] { width: 6.5em; }
.image-editor-options input[type=range] { width: 10em; }
.image-editor-dialog .editor-note[hidden], .image-editor-dialog .editor-error[hidden] { display: none; }
.upload-source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.upload-source [hidden], .upload-destination[hidden] { display: none; }
.upload-destination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.upload-destination-label { color: var(--text-label); font-size: var(--fs-label); }
.upload-destination-path { color: var(--text-strong); font-size: var(--fs-value); overflow-wrap: anywhere; flex: 1 1 12em; }
.media-folder-path { margin: 0; color: var(--text-strong); font-weight: 600; overflow-wrap: anywhere; }
.media-folder-bar { display: flex; gap: 8px; align-items: center; }
.media-folder-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; border: 1px solid var(--border-control); border-radius: var(--radius); }
.media-folder-list li + li { border-top: 1px solid var(--border-control); }
.media-folder-item { width: 100%; justify-content: flex-start; text-align: left; }
.media-folder-new { margin-top: 8px; }
@container (max-width: 640px) {
    .media-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(8em, 40%) minmax(0, 1fr); }
}

.gallery-thumb {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 96px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: var(--fs-xs);
    color: var(--text-label);
}
.gallery-thumb img { width: 90px; height: 66px; object-fit: cover; background: var(--surface-alt); }
.gallery-thumb[aria-selected=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gallery-thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.gallery-thumb.is-cage-card { border-top: 3px solid var(--warning-border); }
.gallery-thumb.is-missing img { visibility: hidden; }

/* Enlarged photograph (dark in every theme) */
.lightbox {
    width: min(1500px, calc(100vw - 48px));
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    max-height: none;
    padding: 0;
    border: 1px solid var(--lightbox-border);
    border-radius: var(--radius);
    background: var(--lightbox-bg);
    color: var(--lightbox-text);
    box-shadow: var(--shadow-dialog);
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: var(--backdrop-strong); }
.lightbox-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; }
.lightbox-nav { border: 0; background: none; color: var(--lightbox-text); font-size: 2em; }
.lightbox-nav:hover:not(:disabled) { background: rgb(255 255 255 / .08); }
.lightbox-nav:disabled { opacity: .2; cursor: default; }
.lightbox-nav:focus-visible { outline: 2px solid var(--lightbox-text); outline-offset: -2px; }
.lightbox-stage { min-width: 0; min-height: 0; display: flex; overflow: auto; }
.lightbox-stage img { margin: auto; }
.lightbox-stage[data-zoom=fit] img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; } /* scaled to the window, up or down */
.lightbox-stage[data-zoom=actual] img { flex: none; max-width: none; cursor: zoom-out; }
.lightbox-stage .media-missing { margin: auto; }
.lightbox-caption { display: flex; gap: 16px; min-height: 28px; padding: 6px 16px; font-size: var(--fs-sm); color: var(--photo-frame-text); }
.lightbox-caption .is-empty { color: inherit; }

/* Medical (placeholders + the rabies summary) */
.medical-centre { display: flex; flex-direction: column; gap: 10px; }
.medical-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }          /* one column of sections; each uses the whole width for its own columns */
.medical-row .ws-placeholder { margin: 0; }
/* Medical: when the centre region is narrower than two readable columns (it can now be 450 px wide at a 1114 px window) the paired sections stack. */
.medical-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.medical-stack > * { margin: 0; }
.medical-centre { position: relative; }    /* the screen-reader-only table captions are absolutely positioned: this keeps them inside the scrolling centre instead of stretching the page */
.medical-centre > * { flex-shrink: 0; }    /* the sections keep their height and the centre region scrolls */
.vacc-scroll { overflow-x: auto; max-height: 18em; overflow-y: auto; scroll-padding-top: var(--control-h); }   /* a focused row is never left under the sticky headings */
.vacc-scroll .record-table { min-width: max-content; }
.vacc-scroll .record-table th { position: sticky; top: 0; }
.med-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-align: start; text-decoration: underline; cursor: pointer; min-height: var(--target-min); }
.med-link[aria-pressed="true"] { font-weight: 700; color: var(--text-strong); }
.med-cards { display: flex; flex-direction: column; gap: 10px; }
.med-card { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.med-card.is-completed { border-style: dashed; }
.med-card h4, .med-card h5, .med-unattached h4 { margin: 6px 0 4px; color: var(--text-strong); }
.med-dl { margin: 0; }
.med-vet-dialog { width: min(520px, calc(100vw - 48px)); }
.med-sub { margin: 4px 0 0; }
.med-plans { margin: 0; padding-inline-start: 1.2em; }
.med-unattached { margin-top: 12px; }
.medical-section .btn { margin-top: 6px; }
.medical-exam .tab-strip { margin: 0 -12px 6px; }

/* ---- Records (Animal and Person) ------------------------------------------------ */

.animal-record, .person-record {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    container-type: inline-size;
}
.record-state, .record-body { display: none; }
.animal-record[data-state=empty] .record-empty,
.person-record[data-state=no-animal] .person-no-animal,
.person-record[data-state=no-guardian] .person-no-guardian,
[data-state=loading] > .record-loading,
[data-state=error] > .record-error { display: flex; }
[data-state=loaded] > .record-body { display: block; }

/* Related views (Datasheet / Form) */
.rv-header { display: flex; align-items: center; gap: 8px; }
.rv-tools { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.rv-position { padding: 0 4px; font-size: var(--fs-sm); color: var(--text-label); white-space: nowrap; }
.rv-position[hidden] { display: none; }
.rv-modes { display: inline-flex; margin-left: 4px; }
.btn-toggle { min-height: max(var(--target-min), calc(var(--control-h) - 8px)); padding: 0 10px; font-size: var(--fs-sm); border-radius: 0; box-shadow: none; }
.btn-toggle:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-toggle:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.btn-toggle[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.related-view[data-mode=sheet] .rv-form,
.related-view[data-mode=sheet] .rv-form-only,
.related-view[data-mode=form] .rv-sheet { display: none; }
.rv-sheet { max-height: 16em; overflow: auto; }
.rv-table:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rv-table tbody tr[data-index] { cursor: default; }
.rv-table tbody tr[data-index]:hover td { background: var(--hover); }
.rv-table tbody tr[data-index].is-selected td { background: var(--selected); color: var(--selected-text); }
.rv-table tbody tr[data-index].is-selected td:first-child { box-shadow: inset 3px 0 0 var(--selected-bar); }
.rv-table:focus tbody tr[data-index].is-selected td { background: var(--accent); color: var(--on-accent); }
.rv-table:focus tbody tr[data-index].is-selected .record-badge { background: var(--surface); }
.rv-table th[data-sortable] { cursor: pointer; }
.rv-table th[data-sortable]:hover { color: var(--accent-strong); }
.rv-table th[aria-sort=ascending]::after { content: " \25B2"; font-size: .6em; }
.rv-table th[aria-sort=descending]::after { content: " \25BC"; font-size: .6em; }
.rv-form { padding: 2px 0; outline: none; }
.rv-form dl { display: grid; grid-template-columns: fit-content(11.5em) minmax(0, 1fr); gap: var(--dl-gap); align-items: baseline; margin: 0; }
.rv-form dt { color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
.rv-form dd { margin: 0; overflow-wrap: anywhere; color: var(--text-strong); font-size: var(--fs-value); font-weight: 500; }

/* Compact read-only Form views (Animal Record identifiers, guardians, licences; Person addresses): label-over-value pairs share rows, and WHOLE pairs wrap onto the next row only when the card
   is too narrow for them. A value pair takes its natural width (flex-basis auto = its content); a pair marked rv-grow (Code, Issuer, Name, Street ...) takes what is left of the row, never less
   than 6em (descriptive text wraps inside it, e.g. a long issuer on two lines). Atomic values (dates, flags, badges) never break: the first version gave every pair an equal flex column
   (flex-basis 0), so the browser squeezed a date to its smallest break opportunity and "Jan 5, 2026" wrapped onto three lines beside free space. In a narrow card (below 380px) a long label
   such as "Owner-type relationship" may wrap onto two lines so three groups still share one row. */
.rv-form dl.rv-compact { display: flex; flex-direction: column; align-items: stretch; gap: var(--dl-gap-tight); }
.rv-compact .rv-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 14px; min-width: 0; }
.rv-compact .rv-pair { display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 0 1 auto; min-width: min-content; max-width: 100%; }
.rv-compact .rv-pair.rv-grow { flex: 1 1 6em; }
.rv-compact .rv-pair dt { flex: 0 0 auto; }
.rv-compact .rv-pair dd { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.rv-compact .rv-pair dd:is([data-kind="date"], [data-kind="dob"], [data-kind="yesno"], [data-kind="current"], [data-kind="idFlags"], [data-kind="addressFlags"]) { white-space: nowrap; }
@container (max-width: 380px) { .rv-compact .rv-pair dt { max-width: 6.5em; } }
.rv-compact .rv-row.rv-when-filled:has(dd.is-empty), .rv-compact .rv-row.rv-when-filled:has(dd:empty) { display: none; }
.rv-compact .rv-pair.rv-when-filled:has(dd.is-empty), .rv-compact .rv-pair.rv-when-filled:has(dd:empty) { display: none; }   /* a flag pair inside a row (the identifier flags) */

/* Person */
.person-header { margin-bottom: 8px; }
.person-header h2 { margin: 0 0 4px; font-size: var(--fs-title); font-weight: 600; line-height: 1.2; color: var(--text-strong); }
.person-relationship { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; color: var(--text-strong); font-size: var(--fs-value); font-weight: 500; }
.person-notes td:nth-child(3) { white-space: pre-line; overflow-wrap: anywhere; }
.record-table tr.is-current-animal td { background: var(--accent-soft); font-weight: 600; }
.record-table tr.is-current-animal .med-link { color: var(--text-strong); }          /* a link on the selected row keeps its underline and takes the strong text colour: the accent link colour does not reach contrast on the selected tint in every theme */
.badge-alert { background: var(--danger-bg); color: var(--danger-text); }

.record-state {
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-label);
}
.record-error { color: var(--danger-text); border-color: var(--danger-border); font-weight: 600; }
.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.record-body { padding: 12px; }

.record-header { margin-bottom: 8px; }
.record-header h2 { margin: 0 0 2px; font-size: var(--fs-title); font-weight: 700; line-height: 1.2; color: var(--text-strong); }
.record-id { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--accent-strong); font-size: var(--fs-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.record-primary-id { display: flex; gap: 8px; align-items: baseline; }
.record-label { color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
.record-code { font-family: var(--font-code); font-size: var(--fs-value); font-weight: 600; color: var(--text-strong); }
.record-muted { color: var(--text-muted); }

.record-alerts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.alert-chip {
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: calc(var(--fs-xs) + 6px);
    border: 1px solid;
}
.alert-chip[hidden] { display: none; }
.alert-caution { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.alert-isolate { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.alert-notes { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }
.alert-deceased { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral-border); }
/* MultiWEB employee security administration (Pages/Admin/Security.cshtml). */
.security-admin { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; }
.security-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.security-admin-title { margin: 0; font-size: var(--fs-heading); font-weight: 700; color: var(--heading-color); }
.security-admin-section { display: flex; flex-direction: column; gap: 8px; }
.security-admin-section h2 { margin: 6px 0 0; font-size: var(--fs-heading); font-weight: 600; color: var(--text-strong); }
.security-admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.security-admin-row label { color: var(--text-label); font-size: var(--fs-label); }
.security-admin-grid, .security-admin-users { width: auto; max-width: 100%; }
.security-admin-grid td, .security-admin-users td { text-align: left; }
.security-admin-grid input[type=checkbox], .security-admin-users input[type=checkbox] { width: var(--target-min); height: var(--target-min); }
.sa-colhead { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sa-colhead input[type=checkbox] { width: var(--target-min); height: var(--target-min); }
.sa-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; min-height: var(--target-min); border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.sa-sort:hover { text-decoration: underline; }
.sa-sort-mark { font-size: var(--fs-sm); }
.security-admin-app-name { font-weight: 700; }
.security-admin-section-name { font-weight: 500; padding-left: 24px; }
.security-admin-inactive { color: var(--warning-text); font-size: var(--fs-sm); }
.security-admin-status { min-height: 1.5em; margin: 0; color: var(--text-strong); }
.security-admin-status.is-error { color: var(--danger-text); }
/* Commercial entitlement refused (Pages/Index.cshtml): one clear line above the panels, the semantic danger colours of every theme. */
.entitlement-banner {
    margin: 8px 16px;
    padding: 10px 14px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
    background: var(--danger-bg);
    color: var(--danger-text);
    font-size: var(--fs-value);
    font-weight: 600;
}

/* Compact field grid beside a modest reference photograph (click: Media tab / enlarged). */
.record-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 4px; }
.record-photo {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    cursor: zoom-in;
}
.record-photo:disabled { cursor: default; }
.record-photo:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.record-photo img { width: 100%; height: 100%; object-fit: cover; }
.record-photo-placeholder { font-size: var(--fs-sm); color: var(--text-label); }
.record-photo.has-photo .record-photo-placeholder { display: none; }

/* Labels are darker and medium weight, values larger and near-black: the hierarchy is size, colour and spacing, not bold. */
.record-fields {
    display: grid;
    grid-template-columns: fit-content(11.5em) minmax(0, 1fr);
    gap: var(--dl-gap);
    align-items: baseline;
    margin: 0 0 8px;
}
.record-fields dt { color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
.record-fields dd { margin: 0; overflow-wrap: anywhere; color: var(--text-strong); font-size: var(--fs-value); font-weight: 500; }
.record-fields-text dd { white-space: pre-line; }
.record-fields dd.is-empty, .rv-form dd.is-empty { color: var(--text-subtle); font-weight: 400; }
@container (min-width: 560px) {
    .record-fields-wide { grid-template-columns: fit-content(11.5em) minmax(0, 1fr) fit-content(11.5em) minmax(0, 1fr); }
    /* Placement rows: Status | Status date, Location on a row of its own, Shelter area | Pen. */
    .record-fields-placement dd[data-field="location"] { grid-column: 2 / -1; }
}
.is-empty { color: var(--text-subtle); }

.record-related { display: flex; flex-direction: column; gap: 10px; }
.record-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Identifiers (left) beside Telephones (right) in two equal columns; below the per-size container thresholds written out further down (about 540 px of Person panel: each card keeps roughly 265 px),
   the two sections stack and each takes the full width. */

/* Section (card): a subtle theme-tinted heading over the content */
.record-list {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    container-type: inline-size;
    overflow: hidden;
}
.record-list > h3, .record-list > .rv-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-height: calc(var(--control-h) + 2px);
    margin: 0;
    padding: var(--head-py) var(--head-px);
    background: var(--heading-soft);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-heading);
    font-weight: 600;
    color: var(--heading-color);
}
.rv-header h3 { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.record-list > :not(h3):not(.rv-header) { margin: var(--body-my) var(--body-mx); }
.record-list h4 { margin: 4px 0 2px; font-size: var(--fs-label); font-weight: 600; color: var(--text-label); }
.record-count { font-size: var(--fs-label); font-weight: 500; color: var(--text-label); text-transform: none; letter-spacing: 0; }

.record-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.record-table th {
    padding: var(--row-pad) var(--cell-px);
    text-align: left;
    vertical-align: bottom;
    font-size: var(--fs-th);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-label);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border-strong);
}
.record-table td { padding: var(--row-pad) var(--cell-px); border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.record-table tbody tr:last-child td { border-bottom: 0; }
.record-table td.col-date, .record-table .col-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.record-table td.col-code { font-family: var(--font-code); white-space: nowrap; font-variant-numeric: tabular-nums; }
.record-table td.is-empty { color: var(--text-subtle); }
/* Person Record › Identifiers: Type takes half the width, Code the other half with the Primary mark at its right edge (inside the card, with the body margin as breathing room). */
.person-record .record-table[data-related="identifiers"] { table-layout: fixed; width: calc(100% - 2 * var(--body-mx)); }   /* .record-list gives its body a --body-mx side margin: 100% plus that margin pushed the table (and the Primary mark) past the card's right edge */
.person-record .record-table[data-related="identifiers"] th:nth-child(1) { width: 50%; }
.person-record .record-table[data-related="identifiers"] th:nth-child(3) { width: 5.8em; }
.person-record .record-table[data-related="identifiers"] th:nth-child(3),
.person-record .record-table[data-related="identifiers"] td:nth-child(3) { text-align: right; white-space: nowrap; }
.person-record .record-table[data-related="identifiers"] td:nth-child(1),
.person-record .record-table[data-related="identifiers"] td.col-code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-badge {
    display: inline-block;
    margin-right: 3px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: calc(var(--fs-xs) + 6px);
    white-space: nowrap;
}
.badge-primary { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }
.badge-chip { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.badge-current { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.badge-former { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral-border); }
.badge-alert { border-color: var(--danger-border); }

/* Adaptive layout instead of smaller text. Container queries cannot read variables, so the widths below are
   written out for each display size (they follow the type scale). A table column marked data-priority hides in a
   narrow card (priority 1 first) and stays visible in Form view; a long code ellipsizes only below its threshold. */
/* compact */
@container (max-width: 680px) { :root[data-size="compact"] [data-priority="1"] { display: none; } }
@container (max-width: 540px) { :root[data-size="compact"] [data-priority="2"] { display: none; } }
@container (max-width: 430px) { :root[data-size="compact"] [data-priority="3"] { display: none; } }
@container (max-width: 330px) { :root[data-size="compact"] td.col-code { max-width: 0; width: 55%; overflow: hidden; text-overflow: ellipsis; } }
@container (max-width: 420px) { :root[data-size="compact"] .record-top { grid-template-columns: minmax(0, 1fr); } :root[data-size="compact"] .record-photo { width: 112px; height: 112px; order: -1; } }
@container (max-width: 500px) { :root[data-size="compact"] .record-pair { grid-template-columns: minmax(0, 1fr); } }
/* comfortable */
@container (max-width: 760px) { :root:not([data-size="compact"]):not([data-size="large"]) [data-priority="1"], :root[data-size="comfortable"] [data-priority="1"] { display: none; } }
@container (max-width: 620px) { :root:not([data-size="compact"]):not([data-size="large"]) [data-priority="2"], :root[data-size="comfortable"] [data-priority="2"] { display: none; } }
@container (max-width: 500px) { :root:not([data-size="compact"]):not([data-size="large"]) [data-priority="3"], :root[data-size="comfortable"] [data-priority="3"] { display: none; } }
@container (max-width: 380px) { :root:not([data-size="compact"]):not([data-size="large"]) td.col-code, :root[data-size="comfortable"] td.col-code { max-width: 0; width: 55%; overflow: hidden; text-overflow: ellipsis; } }
@container (max-width: 440px) { :root:not([data-size="compact"]):not([data-size="large"]) .record-top, :root[data-size="comfortable"] .record-top { grid-template-columns: minmax(0, 1fr); } :root:not([data-size="compact"]):not([data-size="large"]) .record-photo, :root[data-size="comfortable"] .record-photo { width: 112px; height: 112px; order: -1; } }
@container (max-width: 540px) { :root:not([data-size="compact"]):not([data-size="large"]) .record-pair, :root[data-size="comfortable"] .record-pair { grid-template-columns: minmax(0, 1fr); } }
/* large */
@container (max-width: 860px) { :root[data-size="large"] [data-priority="1"] { display: none; } }
@container (max-width: 720px) { :root[data-size="large"] [data-priority="2"] { display: none; } }
@container (max-width: 580px) { :root[data-size="large"] [data-priority="3"] { display: none; } }
@container (max-width: 460px) { :root[data-size="large"] td.col-code { max-width: 0; width: 55%; overflow: hidden; text-overflow: ellipsis; } }
@container (max-width: 480px) { :root[data-size="large"] .record-top { grid-template-columns: minmax(0, 1fr); } :root[data-size="large"] .record-photo { width: 112px; height: 112px; order: -1; } }
@container (max-width: 600px) { :root[data-size="large"] .record-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---- Operator session (header) ------------------------------------------------ */

.session { display: flex; align-items: center; gap: 6px; margin-right: 10px; }
.session-user { font-size: var(--fs-sm); font-weight: 600; color: var(--header-text); white-space: nowrap; }
.session-user[hidden], .session [hidden] { display: none; }
.btn-header { min-height: max(var(--target-min), calc(var(--control-h) - 6px)); padding: 1px 10px; border-color: var(--header-outline); background: none; color: var(--header-text); font-size: var(--fs-sm); }
.btn-header:hover:not(:disabled) { background: var(--header-hover); border-color: var(--header-text); }
.btn-header:focus-visible { outline: 2px solid var(--header-text); outline-offset: 2px; }

/* Known Persons: the permanent toolbar button (icon + label; under 1500 px the label is for assistive technology and the tooltip only). */
.btn-known-persons { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; white-space: nowrap; }
.btn-known-persons .icon { width: 1.3em; height: 1.3em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 1499px) {
    .btn-known-persons .btn-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- Editors (sign-in, animal, intake, person selection) ---------------------- */

.editor-dialog {
    width: min(1100px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--shadow-dialog);
}
.editor-dialog::backdrop { background: var(--backdrop); }
.editor-dialog > form { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
.editor-dialog > form { display: flex; flex-direction: column; max-height: calc(100dvh - 50px); }
.signin-dialog { width: min(440px, calc(100vw - 48px)); }

/* ---- Official MultiOp logo (assets: Resources/MultiOpMasterLogo.png, served from /branding/) ---- */
.brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    background: var(--logo-plate);
    border-radius: var(--radius);
    object-fit: contain;
}
.brand-logo-header { height: var(--logo-h-header); }
.brand-logo-signin { height: var(--logo-h-signin); }
.brand-logo-about { height: var(--logo-h-about); }
.signin-brand, .about-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 2px; }
.signin-brand .brand-logo, .about-hero .brand-logo { box-shadow: 0 0 0 1px var(--border); }

/* ---- About MultiOp ---- */
.about-dialog { width: min(520px, calc(100vw - 48px)); }
.about-body { gap: 14px; }
.about-product { margin: 0; font-size: var(--fs-heading); font-weight: 600; color: var(--text-strong); text-align: center; }
.about-facts {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    gap: var(--dl-gap);
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.about-facts dt { font-size: var(--fs-label); font-weight: 500; color: var(--text-label); }
.about-facts dd { margin: 0; font-size: var(--fs-value); font-weight: 500; color: var(--text-strong); overflow-wrap: anywhere; }
.about-facts a { color: var(--accent-strong); }
.about-code { font-family: var(--font-code); }
.about-copyright { margin: 0; font-size: var(--fs-sm); color: var(--text-label); text-align: center; }
.person-picker { width: min(1500px, calc(100vw - 48px)); }
.editor-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.editor-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(22em, 1fr)); gap: 10px; }
.editor-grid {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    align-items: center;
    align-content: start;
    gap: 6px 10px;
    min-width: 0;
    margin: 0;
    padding: 4px 12px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.editor-grid legend, .editor-subhead {
    padding: 0 6px;
    font-size: var(--fs-heading);
    font-weight: 600;
    color: var(--heading-color);
}
.editor-subhead { grid-column: 1 / -1; margin-top: 6px; padding: 0; font-size: var(--fs-label); color: var(--text-label); }
.editor-subhead[hidden] { display: none; }
/* A long label (French) wraps inside its column, which fit-content caps at 40 %: it never widens the column or pushes the fields out of alignment. */
.editor-grid > label:not(.check) { color: var(--text-label); font-size: var(--fs-label); font-weight: 500; overflow-wrap: break-word; hyphens: auto; }
.editor-grid input:not([type=checkbox]), .editor-grid select, .editor-grid textarea { width: 100%; }
/* Layout convention (docs/form-layout-and-now-shortcut.md): a value of known short length (date, time) keeps its natural width and sits at the start of its cell; text, selects and long values fill the cell. */
.editor-grid > input[type=date], .editor-grid > input[type=time], .editor-grid > input[type=datetime-local] { width: auto; justify-self: start; }
.editor-grid .field-pair input.narrow, .field-pair .narrow { flex: 0 0 4.6em; width: 4.6em; }
.field-pair .narrow-time { flex: 0 0 6.4em; width: 6.4em; }
.field-pair select { flex: 1 1 0; min-width: 0; }
/* Two related fields on one row of an editor grid (Gender | Altered, Status | Status date, Shelter area | Pen): the second label sits inline, the first control may take a larger share. */
.field-pair > .pair-label { flex: 0 0 auto; color: var(--text-label); font-size: var(--fs-label); font-weight: 500; padding-left: 4px; }
.field-pair.pair-wrap { flex-wrap: wrap; row-gap: 4px; }   /* a very narrow dialog wraps the second half under the first instead of squeezing a list */
.field-pair.pair-wrap > select { flex: 1 1 5.5em; min-width: 5.5em; }
.field-pair.pair-wrap > select.pair-wide { flex: 2 1 7em; min-width: 7em; }
.editor-grid .field-pair > input.pair-date { flex: 0 0 auto; width: auto; }
.editor-grid .field-pair > .date-calc-field { flex: 1 1 0; min-width: 0; }
.editor-grid .field-pair > .date-calc-field > input[type=date] { flex: 0 1 auto; width: auto; min-width: 0; }
textarea { font: inherit; font-size: var(--fs-md); color: var(--text); min-width: 0; padding: 4px 8px; border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--surface); resize: vertical; }
select:disabled, input:disabled, textarea:disabled { background: var(--surface-sunken); color: var(--text-subtle); border-color: var(--border); cursor: not-allowed; }
.editor-history { display: flex; flex-wrap: wrap; gap: 4px 16px; }
/* The pen questions of an edit that changes the pen (animal-editor.js), a full row of the Status group */
/* Read-only checkbox of the record summaries (kind "checkbox": the Person's Company flag). Not a control: no focus, no input. */
.check-indicator { display: inline-block; vertical-align: -3px; box-sizing: border-box; width: 18px; height: 18px; border: 1.5px solid var(--border-control); border-radius: 3px; background: var(--surface); position: relative; }
.check-indicator.is-checked { background: var(--accent); border-color: var(--accent); }
.check-indicator.is-checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.person-record [data-company-only][hidden] { display: none; }
.pen-history { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.pen-history[hidden], .pen-history [hidden] { display: none; }
.pen-history .field-pair { flex-wrap: wrap; }
.editor-grid .pen-history input:not([type=checkbox]) { flex: 0 0 auto; width: auto; }
.editor-history [hidden] { display: none; }
.editor-note { margin: 0; font-size: var(--fs-sm); color: var(--text-label); }
.editor-note[hidden], .editor-error[hidden] { display: none; }
.editor-error { margin: 0; padding: 6px 12px; border: 1px solid var(--danger-border); border-left-width: 4px; border-radius: var(--radius); background: var(--danger-bg); color: var(--danger-text); font-weight: 600; }
.editor-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.editor-actions [hidden] { display: none; }

/* Intake editor (inline in Receiving's Intake/Dispositions tab) */
.intake-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.intake-editor { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; border-color: var(--accent); }
.intake-editor[hidden] { display: none; }
.intake-editor .editor-actions { padding: 6px 0 0; border-top: 0; background: none; }
.intake-licenses { margin: 0; padding: 4px 12px 10px; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); }
.intake-licenses[hidden] { display: none; }
.intake-licenses [data-license-list] { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.person-field { display: flex; align-items: center; gap: 4px; min-width: 0; }
.person-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.address-line input[name=street] { flex: 1 1 10em; min-width: 8em; }
/* Country-aware street controls (docs/country-aware-addresses.md): each width follows its content, in either order. Number and the two directions are compact, the Suffix has room for a street
   type ("Boulevard", "Promenade"), the Street takes what is left and wraps onto its own row only when the row is genuinely too narrow (the inputs are moved by address-street.js, never resized
   by the order). */
.address-line { flex-wrap: wrap; }
.address-line input[name=streetNumber] { flex: 0 0 5.2em; width: 5.2em; }
.address-line input[name=streetDirection], .address-line input[name=streetDirection2] { flex: 0 0 4.4em; width: 4.4em; }
.address-line input.street-suffix { flex: 0 0 7.5em; width: 7.5em; }

[data-icon="maximize"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E"); }
[data-icon="restore"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10h-6V4M4 14h6v6M14 10l7-7M10 14l-7 7'/%3E%3C/svg%3E"); }
[data-icon="resize"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11v10H11M21 21l-9-9M15 21h0M21 15h0'/%3E%3C/svg%3E"); }

/* ---- Resizable search dialogs (dialog-frame.js, docs/search-dialogs.md) ------------------------------------------------------------------------------------------------------
   The dialog keeps its own default size until an operator resizes it; then it has an explicit size ([data-sized]) and the results area takes the extra room. Edges and corners
   are hit areas only (the keyboard way is the Resize button in the header); Maximize is temporary and hides them. */
.dialog-frame-tools { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.dialog-frame-tools + .dialog-header-tools { margin-left: 0; }
.dialog-frame-btn { min-width: var(--target-min); min-height: var(--target-min); padding: 0 6px; border: 1px solid var(--header-outline); border-radius: var(--radius); background: none; color: var(--header-text); }
.dialog-frame-btn::before { margin: 0; }
.dialog-frame-btn:hover:not(:disabled) { background: var(--header-hover); }
.dialog-frame-btn:disabled { opacity: .45; cursor: not-allowed; }
.dialog-frame-btn:focus-visible { outline: 2px solid var(--header-text); outline-offset: 2px; }
.dlg-edge { position: absolute; z-index: 3; touch-action: none; }
.dlg-edge[data-edge="e"], .dlg-edge[data-edge="w"] { top: 14px; bottom: 14px; width: 8px; cursor: ew-resize; }
.dlg-edge[data-edge="n"], .dlg-edge[data-edge="s"] { left: 14px; right: 14px; height: 8px; cursor: ns-resize; }
.dlg-edge[data-edge="e"] { right: 0; } .dlg-edge[data-edge="w"] { left: 0; } .dlg-edge[data-edge="n"] { top: 0; } .dlg-edge[data-edge="s"] { bottom: 0; }
.dlg-edge[data-edge="ne"], .dlg-edge[data-edge="nw"], .dlg-edge[data-edge="sw"], .dlg-edge[data-edge="se"] { width: 16px; height: 16px; }
.dlg-edge[data-edge="ne"] { right: 0; top: 0; cursor: nesw-resize; } .dlg-edge[data-edge="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.dlg-edge[data-edge="sw"] { left: 0; bottom: 0; cursor: nesw-resize; } .dlg-edge[data-edge="se"] { right: 0; bottom: 0; cursor: nwse-resize; }
/* A visible grip on the bottom-right corner shows that the dialog can be resized (decorative; the header has the accessible control). */
.dlg-edge[data-edge="se"]::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; background: linear-gradient(135deg, transparent 0 50%, var(--text-label) 50% 58%, transparent 58% 72%, var(--text-label) 72% 80%, transparent 80%); opacity: .7; }
@media (pointer: coarse) {
    .dlg-edge[data-edge="e"], .dlg-edge[data-edge="w"] { width: 16px; } .dlg-edge[data-edge="n"], .dlg-edge[data-edge="s"] { height: 16px; }
    .dlg-edge[data-edge="ne"], .dlg-edge[data-edge="nw"], .dlg-edge[data-edge="sw"], .dlg-edge[data-edge="se"] { width: 28px; height: 28px; }
}
dialog[data-dialog-frame][data-sized] { max-width: none; max-height: none; }
dialog[data-dialog-frame][data-maximized] .dlg-edge { display: none; }
/* Criteria stay their natural size, the results take the rest (Animal Search is already a column; Person Search becomes one while sized). */
.search-dialog[data-sized] .search-top { flex: 0 1 auto; min-height: 0; overflow: auto; max-height: 62%; }
.person-picker[data-sized] { max-height: none; }
.person-picker[data-sized][open] { display: flex; flex-direction: column; }
.person-picker[data-sized] > form { flex: 1 1 auto; min-height: 0; max-height: none; }
.person-picker[data-sized] .picker-top { flex: 0 1 auto; min-height: 0; overflow: auto; max-height: 62%; }
.person-picker[data-sized] .picker-results { flex: 1 1 auto; min-height: 120px; max-height: none; }
/* The criteria follow the DIALOG's width (not the window's): below these widths whole panels wrap into fewer columns; the actions panel stays beside them. */
.search-top { container-type: inline-size; container-name: searchtop; }
@container searchtop (max-width: 1000px) { .search-criteria:not(.person-criteria) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container searchtop (max-width: 820px) { .picker-top .person-criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container searchtop (max-width: 720px) { .search-top .search-criteria, .picker-top .person-criteria { grid-template-columns: minmax(0, 1fr); } }

/* Person selection */
.picker-top { padding: 0; }
/* Person Search: Address | Other criteria | Identification | Name (widest, beside the actions) | actions. */
.person-criteria { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); }
.person-name .name-input { font-size: var(--fs-value); font-weight: 500; min-height: calc(var(--control-h) + 6px); }
.person-name .name-label { font-weight: 600; color: var(--text-strong); }
.person-name .name-hint { grid-column: 1 / -1; margin: 0; white-space: normal; font-size: var(--fs-sm); color: var(--text-label); }
.person-criteria .person-name { grid-template-columns: minmax(0, 1fr); gap: 2px 8px; }
.person-name > .check { margin-top: 4px; }
/* Narrow dialog or large text: labels above the fields (the container query cannot read the size variables, so Large has its own limit). */
@container criteria (max-width: 1240px) {
    .person-criteria fieldset { grid-template-columns: minmax(0, 1fr); gap: 1px 8px; }
    .person-criteria fieldset > label:not(.check) { margin-top: 4px; }
}
@container criteria (max-width: 1420px) {
    :root[data-size="large"] .person-criteria fieldset { grid-template-columns: minmax(0, 1fr); gap: 1px 8px; }
    :root[data-size="large"] .person-criteria fieldset > label:not(.check) { margin-top: 4px; }
}
.picker-warning { width: min(520px, calc(100vw - 48px)); }
.editor-warning { padding: 8px 12px; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); font-weight: 600; }
.editor-warning[hidden] { display: none; }
/* Access criteria groups: the groups that are not being used are greyed (still focusable: entering one makes it the active group). */
.person-criteria [data-inactive] { color: var(--text-subtle); }
.person-criteria input[data-inactive], .person-criteria select[data-inactive] { background: var(--surface-sunken); border-color: var(--border); }
/* A value in a group that does not have the focus is still searched: normal text, accent border (never greyed). */
.person-criteria input[data-filled]:not(:focus), .person-criteria select[data-filled]:not(:focus) { border-color: var(--accent); }
/* Sortable headings: a button per heading (keyboard), the arrow shows the direction. */
.picker-table th { padding: 0; }
.picker-table th button {
    display: flex; align-items: center; gap: 4px; width: 100%; padding: var(--row-pad) var(--cell-px);
    border: 0; background: none; color: inherit; font: inherit; text-align: inherit; white-space: nowrap; cursor: pointer;
}
.picker-table th button:hover { color: var(--accent-strong); }
.picker-table th button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.picker-table.rv-table th[aria-sort]::after { content: none; }
.picker-table th[aria-sort=ascending] button::after { content: "\25B2"; font-size: .6em; }
.picker-table th[aria-sort=descending] button::after { content: "\25BC"; font-size: .6em; }
.picker-table .col-number { width: 6.5em; }
.picker-table td.col-date { white-space: nowrap; }
.picker-results { min-height: 160px; max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* ---- Error page -------------------------------------------------------- */

.error-page { margin: 40px auto; max-width: 640px; }
.error-page a { color: var(--accent-strong); }

/* Person editor (person-editor.js), duplicate candidates, the read-only PIN, Persons region actions */
.person-editor { width: min(1000px, calc(100vw - 48px)); }
.person-editor [hidden] { display: none !important; }
.person-note-editor [hidden] { display: none !important; }
.animal-identifier-editor [hidden] { display: none !important; }
.animal-identifier-editor .ai-grid > .ai-wide { grid-column: 1 / -1; }
.person-editor .editor-grid.editor-single { grid-template-columns: minmax(0, 1fr); }
.field-wrap { flex-wrap: wrap; }
/* Edit Person: Identity in four columns (First | Middle, Last Name across the rest of the row with Company after it, Record number | Person ID); the flags span the whole row, left-aligned, and wrap only when they must. */
.person-editor .pe-identity { grid-template-columns: fit-content(30%) minmax(0, 3fr) fit-content(24%) minmax(0, 2fr); }
.person-editor .pe-identity > .pe-span-rest { grid-column: 2 / -1; }
.person-editor .pe-identity > output { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.person-editor .pe-flags { grid-column: 1 / -1; justify-content: flex-start; gap: 4px 16px; }
@media (max-width: 760px) {
    .person-editor .pe-identity { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
    .person-editor .pe-identity > .pe-span-rest { grid-column: 2; }
}
.phone-list, .identifier-list { display: flex; flex-direction: column; gap: 4px; }
.phone-row, .identifier-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.phone-row [data-phone=number] { flex: 0 0 11em; width: 11em; }
.phone-row [data-phone=type] { flex: 1 1 10em; min-width: 8em; }
.phone-row [data-phone=carrier] { flex: 0 1 14em; min-width: 9em; }                    /* shown while SMS Allowed is checked */
.identifier-row select { flex: 0 0 14em; width: 14em; }
.identifier-row [data-id-field=code] { flex: 0 0 12em; width: 12em; }
.identifier-row [data-id-field=note] { flex: 1 1 10em; min-width: 8em; }
.identifier-row .editor-note { flex: 1 1 100%; }
.delete-confirm, .delete-pending { display: flex; gap: 6px; align-items: center; padding: 2px 8px; border: 1px solid var(--danger-border); border-radius: var(--radius); background: var(--danger-bg); color: var(--danger-text); }
.is-confirming > :not(.delete-confirm) { opacity: .55; pointer-events: none; }
.is-deleted > :not(.delete-pending) { display: none !important; }
.pin-value { font-family: var(--font-code); font-size: 1.15em; font-weight: 700; letter-spacing: .12em; }
.person-dups { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border: 1px solid var(--warning-border); border-left-width: 4px; border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); }
.person-dups h3 { margin: 0; font-size: var(--fs-heading); }
.person-dups .editor-note { color: inherit; }
.person-dups .record-table td { vertical-align: top; }
.dup-actions { display: flex; justify-content: flex-end; }
.person-saved { gap: 8px; }
.person-saved h3 { margin: 0; }
.person-pin[hidden] { display: none; }
/* A person chosen with Person Search or kept while navigating its animals has no single "relationship to the animal". */
.person-record[data-source=selected] .person-relationship { display: none; }
.record-empty { margin: 2px 0 4px; color: var(--text-subtle); font-size: var(--fs-md); }
.btn-leading { margin-right: auto; }

/* Guardian relationship editor (guardian-editor.js) and the Guardians action bar of the Animal Record */
.rv-actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rv-actionbar .btn { min-height: max(var(--target-min), calc(var(--control-h) - 8px)); padding: 0 10px; font-size: var(--fs-sm); }
.rv-message { flex: 1 1 8em; font-size: var(--fs-sm); font-weight: 600; color: var(--success-text); }
.rv-message[hidden] { display: none; }
.guardian-editor { width: min(640px, calc(100vw - 48px)); }
.guardian-editor [hidden] { display: none !important; }
.guardian-editor .person-field .btn { flex: 0 0 auto; }
.guardian-review { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border: 1px solid var(--warning-border); border-left-width: 4px; border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); }
.guardian-review h3 { margin: 0 0 2px; font-size: var(--fs-heading); }
.guardian-review .editor-note { color: inherit; }
.guardian-review .editor-warning { border-color: var(--warning-border); background: var(--surface); color: var(--text-strong); }
.guardian-warnings { margin: 0 0 4px; padding-left: 1.2em; }
.decision-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.decision-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.decision-name { flex: 1 1 14em; min-width: 0; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.decision-meta { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--text-label); }
.decision-choice { display: flex; gap: 12px; }
.guardian-editor .editor-grid .field-pair { flex-wrap: wrap; }

/* Mapping dialog and the intake's location state (location-dialog.js, intake-editor.js): tokens only */
.badge-warn { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.location-dialog { width: min(760px, calc(100vw - 48px)); }
.location-dialog [hidden] { display: none !important; }
.location-address-text { margin: 0 0 var(--gap); color: var(--text-strong); }
.location-candidates { list-style: none; margin: var(--gap) 0 0; padding: 0; display: grid; gap: 4px; }
.location-candidates label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); cursor: pointer; }
.location-candidates label:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.location-candidate-text { flex: 1 1 220px; color: var(--text-strong); }
.location-candidate-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.location-map { height: min(380px, 42vh); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.location-coordinates { margin-top: var(--gap); }
.location-state { display: grid; gap: 4px; }
.location-stale { color: var(--warning-text); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius); padding: 4px 8px; }

/* Intake Form view (Receiving): the Access intake form's pairs side by side, groups only when they apply. Tokens only. */
.intake-form .intake-pairs { grid-template-columns: fit-content(11.5em) minmax(0, 1fr); }
.intake-form-group { margin-top: 10px; }
.intake-form-group h4 { margin: 0 0 4px; padding: 2px 6px; background: var(--heading-bg); color: var(--text-strong); font-size: var(--fs-heading); font-weight: 600; border-radius: var(--radius); }
.intake-form-group[hidden] { display: none; }
@container (min-width: 560px) {
    .intake-form .intake-pairs { grid-template-columns: fit-content(11.5em) minmax(0, 1fr) fit-content(11.5em) minmax(0, 1fr); column-gap: 18px; }
    /* Full rows: the description, the address, each associated person, the reasons, the euthanasia reason, the owner it went back to and the note. */
    .intake-form .intake-pairs dd[data-form-field="location"], .intake-form .intake-pairs dd[data-form-field="address"],
    .intake-form .intake-pairs dd[data-form-field="receivedType"], .intake-form .intake-pairs dd[data-form-field="receivedBy"], .intake-form .intake-pairs dd[data-form-field="daysInShelter"],
    .intake-form .intake-pairs dd[data-form-field="surrenderedBy"], .intake-form .intake-pairs dd[data-form-field="broughtInBy"], .intake-form .intake-pairs dd[data-form-field="noSurrenderPerson"],
    .intake-form .intake-pairs dd[data-form-field="surrenderReasons"], .intake-form .intake-pairs dd[data-form-field="euthanasiaReason"],
    .intake-form .intake-pairs dd[data-form-field="returnedTo"], .intake-form .intake-pairs dd[data-form-field="dispositionNote"] { grid-column: 2 / -1; }
}
/* A row of the Surrender group that applies to some intakes only: its label and value keep taking part in the grid. */
.intake-form .intake-row { display: contents; }
.intake-form .intake-row[hidden] { display: none; }
.intake-form .intake-pairs dd { overflow-wrap: anywhere; }
/* The Disposition section is its own bordered box, as in the Access form. */
.intake-form-group.intake-disposition { padding: 4px 10px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.intake-form-group.intake-disposition h4 { margin: 0 -4px 6px; }
.intake-form .intake-pairs dd[data-form-field="surrenderReasons"], .intake-form .intake-pairs dd[data-form-field="dispositionNote"] { white-space: pre-line; }

/* Owner Surrender choice, surrender reasons chips (Receiving intake Phase 2). Tokens only. */
.surrender-owner { width: min(640px, calc(100vw - 48px)); }
.surrender-owner [hidden] { display: none !important; }
.owner-list { list-style: none; margin: var(--gap) 0 0; padding: 0; display: grid; gap: 4px; }
.owner-list label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); cursor: pointer; }
.owner-list label:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.owner-name { flex: 1 1 200px; color: var(--text-strong); }
.reasons-control { display: grid; gap: 4px; min-width: 0; }
.reason-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.reason-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 2px 0 8px; border: 1px solid var(--info-border); border-radius: var(--radius); background: var(--info-bg); color: var(--info-text); }
.reason-chip.is-custom { border-color: var(--neutral-border); background: var(--neutral-bg); color: var(--neutral-text); }
.reason-chip .btn-icon { min-height: 0; padding: 0 6px; }

/* Cage Cards dialog (Receiving intake Phase 2). Tokens only; the printable card itself is wwwroot/css/cage-card.css. */
.cage-cards { width: min(560px, calc(100vw - 48px)); }
.cage-cards [hidden] { display: none !important; }
.cage-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cage-card-list label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); cursor: pointer; }
.cage-card-list label:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.cage-card-list label:has(input:disabled) { cursor: default; color: var(--text-subtle); }
.card-name { flex: 1 1 160px; color: var(--text-strong); }
.cage-card-list label:has(input:disabled) .card-name { color: var(--text-subtle); }

/* Known Persons address editor (person-address-editor.js): tokens only. */
.person-address-editor { width: min(860px, calc(100vw - 48px)); }
.person-address-editor [hidden] { display: none !important; }
.pa-flags { flex-wrap: wrap; gap: 4px 16px; }
.pa-inline { color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
/* Address relationship dates: one full-width row beneath the complete physical address; the pair wraps only when the dialog is too narrow for both. */
.pa-dates { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.editor-grid .pa-dates > label { width: auto; margin: 0; color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
.editor-grid .pa-dates > input { width: auto; flex: 0 0 auto; min-width: 11em; }
.editor-grid .pa-dates > label + input + label { margin-left: 14px; }
.pa-panel { border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--text-strong); border-radius: var(--radius); padding: 8px 12px; display: grid; gap: 6px; }
.pa-panel h3 { margin: 0; font-size: var(--fs-heading); font-weight: 600; color: var(--warning-text); }
.pa-panel p { margin: 0; }
.pa-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pa-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-licenses { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

/* Fixed-centre map and the shared Mapping menu (A4). Tokens only. */
.location-map-wrap { position: relative; }
/* Resizable Photograph Location dialog (location-dialog.js): edges and corners drag, the corner grip also answers the arrow keys. Once sized, the map fills the dialog. Tokens only. */
.loc-edge { position: absolute; z-index: 2; padding: 0; border: 0; background: transparent; }
.loc-edge[data-edge="e"], .loc-edge[data-edge="w"] { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.loc-edge[data-edge="n"], .loc-edge[data-edge="s"] { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.loc-edge[data-edge="e"] { right: 0; } .loc-edge[data-edge="w"] { left: 0; } .loc-edge[data-edge="n"] { top: 0; } .loc-edge[data-edge="s"] { bottom: 0; }
.loc-edge[data-edge="ne"], .loc-edge[data-edge="nw"], .loc-edge[data-edge="sw"], .loc-edge[data-edge="se"] { width: 16px; height: 16px; }
.loc-edge[data-edge="ne"] { right: 0; top: 0; cursor: nesw-resize; } .loc-edge[data-edge="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.loc-edge[data-edge="sw"] { left: 0; bottom: 0; cursor: nesw-resize; } .loc-edge[data-edge="se"] { right: 0; bottom: 0; cursor: nwse-resize; }
.loc-corner { background: linear-gradient(135deg, transparent 0 55%, var(--text-label) 55% 62%, transparent 62% 72%, var(--text-label) 72% 79%, transparent 79% 89%, var(--text-label) 89% 96%, transparent 96%); border-radius: 0 0 var(--radius) 0; pointer-events: auto; }
.loc-grip { margin-right: auto; width: var(--target-min); height: var(--target-min); min-width: 0; padding: 0; background: linear-gradient(135deg, transparent 0 55%, var(--text-label) 55% 62%, transparent 62% 72%, var(--text-label) 72% 79%, transparent 79% 89%, var(--text-label) 89% 96%, transparent 96%); }
.loc-grip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.location-dialog[data-sized] { max-height: none; }
.location-dialog[data-sized][open] { display: flex; flex-direction: column; }
.location-dialog[data-sized] > form { flex: 1 1 auto; min-height: 0; max-height: none; }
.location-dialog[data-sized] .editor-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.location-dialog[data-sized] .location-position { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.location-dialog[data-sized] .location-map-wrap { flex: 1 1 auto; min-height: 200px; }
.location-dialog[data-sized] .location-map { height: 100%; min-height: 200px; }
.location-crosshair { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); pointer-events: none;
    border: 2px solid var(--danger-text); border-radius: 50%; background: transparent; box-shadow: 0 0 0 2px var(--surface); }
.location-crosshair::before, .location-crosshair::after { content: ""; position: absolute; background: var(--danger-text); }
.location-crosshair::before { left: 50%; top: -8px; bottom: -8px; width: 2px; transform: translateX(-50%); }
.location-crosshair::after { top: 50%; left: -8px; right: -8px; height: 2px; transform: translateY(-50%); }
.location-crosshair[hidden] { display: none; }
.mapping-menu-wrap { position: relative; display: inline-block; flex: 0 0 auto; }
.mapping-menu { position: absolute; z-index: 20; top: calc(100% + 2px); right: 0; min-width: 19em; display: grid; padding: 4px 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px var(--backdrop); }
.mapping-menu[hidden] { display: none; }
.mapping-item { display: grid; gap: 2px; padding: 6px 12px; color: var(--text-strong); text-decoration: none; font-size: var(--fs-md); cursor: pointer; }
.mapping-item:hover, .mapping-item:focus-visible { background: var(--surface-alt); }
.mapping-item[aria-disabled="true"] { color: var(--text-subtle); cursor: default; }
.mapping-item small { color: var(--text-subtle); font-size: var(--fs-xs); }
.mapping-item small[hidden] { display: none; }
.person-address-editor .pa-note-label, .person-address-editor .pa-note, .person-address-editor .pa-verified { grid-column: 1 / -1; }
.person-address-editor .pa-note { width: 100%; box-sizing: border-box; min-height: 4.5em; resize: vertical; }

.mapping-status { margin: 0; padding: 6px 12px; color: var(--warning-text); background: var(--warning-bg); border-top: 1px solid var(--warning-border); font-size: var(--fs-sm); }
.mapping-status[hidden] { display: none; }

/* ======================= Design system 1.0I: icons, context accents, section headings ======================= */

/* Icons (no dependency): a line icon drawn by a mask in the text colour, placed before the label of any element with data-icon="name".
   Decorative only: the visible text remains the accessible name, and elements with i18n keep text-only content (the icon is a pseudo-element). */
[data-icon]::before {
    content: "";
    flex: 0 0 auto;
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    background: currentColor;
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
}
.btn[data-icon]::before { margin-left: -2px; }
[data-icon=""]::before { content: none; } /* no name: no icon (never an empty square) */
[data-icon="search"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); }
[data-icon="columns-3"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E"); }
[data-icon="medical"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
[data-icon="package"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.2v9.6L12 21l-8-4.2V7.2z'/%3E%3Cpath d='M4 7.2l8 4.2 8-4.2M12 11.4V21'/%3E%3C/svg%3E"); }
[data-icon="plus"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
[data-icon="edit"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
[data-icon="check"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
[data-icon="print"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V4h10v5'/%3E%3Cpath d='M7 17H5a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2'/%3E%3Cpath d='M7 14h10v6H7z'/%3E%3C/svg%3E"); }
[data-icon="pin"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.7-6.5-11a6.5 6.5 0 0 1 13 0c0 5.3-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
[data-icon="crosshair"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4'/%3E%3C/svg%3E"); }
[data-icon="map"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L3.5 6v14L9 18l6 2 5.5-2V4L15 6 9 4z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E"); }
[data-icon="unlink"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.84 12.25l1.72-1.71a5 5 0 0 0-.12-7.07 5 5 0 0 0-6.95 0l-1.72 1.71M5.17 11.75l-1.71 1.71a5 5 0 0 0 .12 7.07 5 5 0 0 0 6.95 0l1.71-1.71M7.5 1.5v3.5M1.5 7.5h3.5M16.5 19v3.5M19 16.5h3.5'/%3E%3C/svg%3E"); }
[data-icon="trash"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
[data-icon="home"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11L12 4l8.5 7'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E"); }
[data-icon="paw"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='10' r='1.8'/%3E%3Ccircle cx='9.5' cy='5.5' r='1.8'/%3E%3Ccircle cx='14.5' cy='5.5' r='1.8'/%3E%3Ccircle cx='18' cy='10' r='1.8'/%3E%3Cpath d='M8 17.2c0-2.6 1.8-5.2 4-5.2s4 2.6 4 5.2c0 1.6-1.2 2.3-2.6 2.3h-2.8C9.2 19.5 8 18.8 8 17.2z'/%3E%3C/svg%3E"); }
[data-icon="person"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5c0-4 3.4-6.8 7.5-6.8s7.5 2.8 7.5 6.8'/%3E%3C/svg%3E"); }
[data-icon="users"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.3'/%3E%3Cpath d='M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16.5 14.1c2.6.2 4.5 2.4 4.5 5.4'/%3E%3C/svg%3E"); }
[data-icon="badge"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16c.6-1.4 1.7-2 3-2s2.4.6 3 2M14.5 10h4M14.5 14h3'/%3E%3C/svg%3E"); }
[data-icon="phone"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h3l1.5 4.5-2 1.3a11 11 0 0 0 6.2 6.2l1.3-2 4.5 1.5v3a2 2 0 0 1-2 2A16.5 16.5 0 0 1 4 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
[data-icon="note"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h9l4 4V20.5H6z'/%3E%3Cpath d='M14.5 3.5V8H19M9 12h7M9 15.5h7'/%3E%3C/svg%3E"); }
[data-icon="list"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Cpath d='M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01'/%3E%3C/svg%3E"); }
[data-icon="clipboard"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='4.5' width='13' height='16' rx='2'/%3E%3Cpath d='M9 4.5V3h6v1.5M9 10h6M9 13.5h6M9 17h3.5'/%3E%3C/svg%3E"); }
[data-icon="mail"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
[data-icon="chevron-left"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5l-5.5 5.5 5.5 5.5'/%3E%3C/svg%3E"); }
[data-icon="x"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
[data-icon="circle"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='2' fill='black'/%3E%3C/svg%3E"); }
[data-icon="external"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
[data-icon="chevron-down"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E"); }
[data-icon="warning"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4L2.8 19.5h18.4L12 4z'/%3E%3Cpath d='M12 10v4.5M12 17.2h.01'/%3E%3C/svg%3E"); }
[data-icon="heart"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.3 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E"); }

/* Region headings carry the context of their column: Animal (green), Intake (blue, the centre tabs), Person (violet), each adapted by the theme. */
.region-header { --ctx: var(--accent); --ctx-bg: var(--heading-bg); background: var(--ctx-bg); box-shadow: inset 4px 0 0 var(--ctx); }
.region-animal .region-header { --ctx: var(--ctx-animal); --ctx-bg: var(--ctx-animal-bg); }
.region-person .region-header { --ctx: var(--ctx-person); --ctx-bg: var(--ctx-person-bg); }
.region-centre > .region-header { --ctx: var(--ctx-animal); --ctx-bg: var(--ctx-animal-bg); }          /* Receiving works on the animal: the same green as the Animal Record */
.region-header h1.region-title { margin: 0; font: inherit; }
.region-title { display: inline-flex; align-items: center; gap: 8px; }
.region-title[data-icon]::before { width: 1.3em; height: 1.3em; color: var(--ctx); }
.region-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target-min); min-height: var(--target-min); border-radius: var(--radius); }
.region-toggle:hover { background: color-mix(in srgb, var(--ctx) 12%, transparent); }
/* Only the main navigation is inverted (approved): an operations tab keeps a plain background and takes the Intake context colour for its underline. */
.ws-tab.is-active { border-bottom-color: var(--ctx-intake); }

/* Section headings: a soft tint of the theme heading colour, a contextual icon and a clear title. */
.record-list > h3, .record-list > .rv-header { background: var(--heading-bg); border-bottom-color: var(--border-strong); }
.rv-header h3[data-icon] { display: inline-flex; align-items: center; gap: 7px; }
.record-list > h3[data-icon] { gap: 7px; }
/* Toolbar commands keep one row in a 25 % column: a little less padding, never a smaller font. */
.panel-toolbar .btn { padding: 0 9px; gap: 5px; }
.record-list h3[data-icon]::before, .rv-header h3[data-icon]::before, legend[data-icon]::before { color: var(--icon-muted); }
/* Person panel subsections (Addresses, Identifiers, Telephones, Animals, Notes) use the Person header's own treatment: its tint, accent bar, border and icon colour. */
:is(.region-person, .person-editor, .person-address-editor) .record-list > h3, :is(.region-person, .person-editor, .person-address-editor) .record-list > .rv-header { background: var(--ctx-person-bg); box-shadow: inset 5px 0 0 var(--ctx-person); border-bottom-color: color-mix(in srgb, var(--ctx-person) 30%, var(--border-strong)); }
:is(.region-person, .person-editor, .person-address-editor) .record-list h3[data-icon]::before, :is(.region-person, .person-editor, .person-address-editor) .rv-header h3[data-icon]::before { color: var(--ctx-person); }
/* Lost panel (L1; lost-panel.js): the Incident view's states and groups, and the search criteria. Tokens only. */
.lost-incident[data-state=empty] > .lost-empty,
.lost-incident[data-state=noreport] > .lost-no-report { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lost-header h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: var(--fs-title); font-weight: 700; color: var(--text-strong); }
.lost-group { margin: 0 0 12px; }
.lost-group > h3 { margin: 0 0 4px; padding: var(--row-pad) var(--cell-px); font-size: var(--fs-heading); font-weight: 700; color: var(--text-strong); background: var(--heading-bg); border-bottom: 1px solid var(--border-strong); }
.lost-group > .record-fields { margin: 0 var(--cell-px); }
.lost-group > h3[data-icon] { display: flex; align-items: center; gap: 7px; }
.lost-group > h3[data-icon]::before { color: var(--icon-muted); }
.lost-output-note { display: block; margin: 12px; }
.lp-ignore { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }

/* Lost Report actions and editor (L1; lost-panel.js, lost-editor.js). Tokens only. */
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.report-go { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.report-go input { width: 6.5em; }
.report-status { flex: 1 1 100%; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--success-text); }
.report-status.is-error { color: var(--danger-text); }
.report-status:empty { display: none; }
.lost-incident[data-mode=edit] > .record-state, .lost-incident[data-mode=edit] > .record-body { display: none !important; }
.lost-form { display: grid; gap: 8px; padding: 8px 10px; }
.lost-form[hidden], .lost-form [hidden] { display: none !important; }
.lost-form-header h2 { margin: 0; font-size: var(--fs-title); font-weight: 700; color: var(--text-strong); }
.lost-form-animal { margin: 2px 0 0; color: var(--text-label); }
.lost-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lost-owner-text { flex: 1 1 10em; font-weight: 600; color: var(--text-strong); }
.lost-owner-address { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lost-owner-address select { flex: 1 1 14em; min-width: 0; }
.lost-owner-note { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 8px; border: 1px solid var(--info-border); border-radius: var(--radius); background: var(--info-bg); color: var(--info-text); }
.lost-flyer-cell { display: grid; justify-items: stretch; gap: 6px; min-width: 0; }
.lost-flyer-cell textarea { width: 100%; }
.lost-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 6px 0; }
/* Lost editor layout (docs/lost-panel-l1.md, "Compact, map-aware layout"): the centre panel is a size container (.region-centre). With the map hidden the panel is wide and the
   form has two columns (report and search | location and flyer); with the map open it is one column. Inside a column the pairs use four grid columns (label, control, label,
   control) while the column is wide enough and fall back to two when it is narrow, as the intake editor does. Tokens only. */
.lost-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.lost-col { display: grid; gap: 8px; min-width: 0; container-type: inline-size; container-name: lostcol; align-content: start; }
@container (min-width: 980px) {
    .lost-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.lost-form-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.lost-form-header .lost-form-animal { margin: 0; }
.lost-grid { grid-template-columns: fit-content(8.5em) minmax(0, 1fr) fit-content(8.5em) minmax(0, 1fr); gap: 5px 10px; padding-bottom: 8px; }
.lost-grid > :not(label) { grid-column: 2 / -1; }
.lost-grid > .half { grid-column: auto; }
.lost-grid > span:empty { display: none; }
.lost-grid > label { align-self: start; padding-top: 0.4em; }
.lost-grid .field-pair { flex-wrap: wrap; }
.lost-grid .field-pair.half > .btn { flex: 0 1 auto; max-width: 100%; }
.lost-grid .lost-owner > select, .lost-grid .lost-owner-address > select { flex: 1 1 10em; min-width: 0; }
.lost-grid .lost-flyer-actions { justify-content: space-between; }
.lost-grid .field-pair > .lp-ignore { margin-left: 8px; }
.lost-grid .lost-checks { gap: 4px 16px; }
@container lostcol (max-width: 519px) {
    .lost-grid { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
    .lost-grid > :not(label), .lost-grid > .half { grid-column: 2; }
}
/* The action row stays reachable while a long form scrolls; fields scrolled into view stay clear of it. */
.lost-form-actions { position: sticky; bottom: 0; z-index: 2; background: var(--surface); border-top: 1px solid var(--border); }
.lost-form :is(input, select, textarea, button) { scroll-margin-bottom: 4em; }
/* Lost Results (docs/lost-panel-l1.md, "Results: reporting party and identifier matches"): the Results pane scrolls as one; the lost animal and its reporting party are the left
   column of the comparison, the candidate and its details the right one; identifier matches sit between the proximity list and the comparison. Tokens only. */
.lost-search { overflow: auto; }
.lost-search .cl-results-stage { overflow: visible; flex: 0 0 auto; }
.lost-compare { align-items: start; }
/* Resizable results list (results-resizer.js): a horizontal splitter under the candidate table; once sized the list takes the chosen height instead of its default maximum. */
.cl-list.is-sized { max-height: none; }
.rs-splitter { position: relative; flex: 0 0 auto; height: 10px; margin: -4px 0; cursor: row-resize; touch-action: none; outline: none; }
.rs-splitter::before { content: ""; position: absolute; inset: -7px 0; }
.rs-splitter::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 2px; background: var(--icon-muted); }
.rs-splitter:hover::after, .rs-splitter:focus-visible::after, body.is-resizing-rows .rs-splitter::after { background: var(--accent); }
.rs-splitter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rs-splitter[hidden], .rs-reset[hidden] { display: none; }
/* Under a Medical list the grab area extends downwards only: it must never cover the last row's controls (24 px targets) */
.medical-section .rs-splitter { height: 10px; margin: 0; }
.medical-section .rs-splitter::before { inset: 0 0 -6px 0; }
.medical-section .rs-splitter::after { height: 2px; background: var(--border-strong); }
.medical-section .rs-splitter:hover::after, .medical-section .rs-splitter:focus-visible::after, body.is-resizing-rows .medical-section .rs-splitter::after { height: 4px; background: var(--accent); }
@media (pointer: coarse) { .medical-section .rs-splitter { height: 14px; } .medical-section .rs-splitter::before { inset: 0 0 -10px 0; } }
body.is-resizing-rows { cursor: row-resize; user-select: none; }
@media (pointer: coarse) {
    .rs-splitter { height: 14px; }
    .rs-splitter::before { inset: -15px 0; }
}
.cl-side { display: grid; gap: 8px; min-width: 0; align-content: start; }
.cl-geo-title, .idm-title { margin: 0; font-size: var(--fs-heading); font-weight: 600; color: var(--heading-color); }
.cl-detail-col h4[data-icon] { display: flex; align-items: center; gap: 7px; }
.cl-detail-col h4[data-icon]::before { color: var(--icon-muted); }
.cl-party-state { margin: 0; color: var(--text-label); }
.cl-party-state[hidden], .cl-party-facts[hidden] { display: none; }
.cl-party-phones { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cl-party-facts .is-empty, .cl-party-phones .is-empty { color: var(--text-subtle); font-weight: 400; }
.cl-party-type { color: var(--text-label); font-weight: 400; }
.cl-party-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.idm { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); min-width: 0; }
.idm[hidden] { display: none; }
.idm-title { display: flex; align-items: center; gap: 7px; }
.idm-title[data-icon]::before { color: var(--icon-muted); }
.idm-hint { margin: 0; }
.idm-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.idm-code { flex: 1 1 14em; }
.idm-code input { width: 100%; min-width: 0; font-family: var(--font-code); }
.idm-actions { margin-left: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.idm-list { max-height: 15em; }
.idm-thumb { display: block; width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.idm-lines { white-space: pre-line; }
.idm-code-cell { font-family: var(--font-code); overflow-wrap: anywhere; }
.idm-table tbody tr.is-selected td { background: var(--selected); color: var(--selected-text); }
.idm-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--selected-bar); }
.idm-badge { display: inline-block; margin: 0 4px 2px 0; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; white-space: normal; }
.idm-badge.is-exact { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.idm-badge.is-normalized { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.idm-badge.is-both { background: var(--primary); border-color: var(--primary-strong); color: var(--on-primary); }
.lost-email-dialog { width: min(640px, calc(100vw - 48px)); }
.lost-email-grid { grid-template-columns: fit-content(30%) minmax(0, 1fr); }
.lost-email-grid textarea { min-height: 12em; }
/* Lost Output tab (L3): the flyer preview frame, its actions and the notices that come before printing. Tokens only; the printed page has its own stylesheet (lost-flyer.css). */
.lost-output { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 0; }
.lost-output [hidden] { display: none !important; }
.lost-output-heading { margin: 0; }
.lost-output-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lost-output-actions a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.lost-output-actions a.btn.is-disabled { color: var(--text-subtle); border-color: var(--border); pointer-events: none; cursor: not-allowed; }
.lost-output-historical { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; color: var(--text-strong); }
.lost-output-notopen, .lost-output-unsaved { padding: 8px 10px; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); }
.lost-output-unsaved { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lost-output-warnings { padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.lost-output-warnings h4 { margin: 0 0 4px; font-size: var(--fs-md); color: var(--text-strong); }
.lost-output-warnings ul { margin: 0; padding-left: 20px; color: var(--text); }
.lost-output-status { margin: 0; color: var(--text-label); font-size: var(--fs-sm); min-height: 1.2em; }
.lost-output-status.is-error { color: var(--danger-text); font-weight: 600; }
.lost-output-layout { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@container (min-width: 880px) { .lost-output-layout { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); } }
.lost-output-options { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lost-output-preview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lost-output-group, .lost-output-sub { margin: 0; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); min-width: 0; }
.lost-output-group > legend, .lost-output-sub > legend { padding: 0 6px; font-weight: 700; color: var(--text-strong); }
.lost-output-sub { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.lost-output-sub > label:not(.lost-output-check) { font-weight: 600; color: var(--text-label); }
.lost-output-sub select { width: 100%; }
.lost-output-check { display: flex; gap: 8px; align-items: flex-start; color: var(--text-strong); }
.lost-output-flagbar { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); }
.lost-output-flagbar p { margin: 0; }
.lost-output-warnings li.is-strong { font-weight: 700; color: var(--danger-text); }
.lost-output-warnings[role="alert"] { border-color: var(--danger-border); background: var(--danger-bg); }
.lost-output-stage { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.lost-output-frame { display: block; width: 816px; height: 1056px; border: 0; transform-origin: 0 0; background: var(--surface); }

/* Module colour identity (docs/module-color-identity.md): each operational module has its own accent so the operator knows where they are: Receiving green, Lost blue, Found amber,
   Medical teal. The theme supplies the raw colours (--mod-*); a panel exposes the semantic tokens below for its own module, so components never name a module. Animal Record stays
   green and Person purple (their own tokens), status and action colours keep their meaning (success, warning, danger, info), and nothing here changes a layout. */
.panel {
    --module-accent: var(--accent);
    --module-accent-strong: var(--primary);
}
.panel[data-panel="receiving"] { --module-accent: var(--mod-receiving); --module-accent-strong: var(--mod-receiving-strong); }
.panel[data-panel="lost"]      { --module-accent: var(--mod-lost);      --module-accent-strong: var(--mod-lost-strong); }
.panel[data-panel="found"]     { --module-accent: var(--mod-found);     --module-accent-strong: var(--mod-found-strong); }
.panel[data-panel="medical"]   { --module-accent: var(--mod-medical);   --module-accent-strong: var(--mod-medical-strong); }
.panel {
    --module-surface: color-mix(in srgb, var(--module-accent) 12%, var(--surface));
    --module-surface-selected: color-mix(in srgb, var(--module-accent) 24%, var(--surface));
    --module-border: color-mix(in srgb, var(--module-accent) 42%, var(--border));
    --module-focus: var(--module-accent-strong);
}
.panel[data-panel="receiving"] { --module-surface: var(--ctx-animal-bg); }          /* Receiving keeps the established green tint */
.tab[data-panel-tab="receiving"] { --module-line: var(--mod-receiving); }
.tab[data-panel-tab="lost"]      { --module-line: var(--mod-lost); }
.tab[data-panel-tab="found"]     { --module-line: var(--mod-found); }
.tab[data-panel-tab="medical"]   { --module-line: var(--mod-medical); }
/* Main navigation: the selected tab keeps the approved header inversion; only its underline takes the module accent. */
.tab.is-active[data-panel-tab], .tab.is-active[data-panel-tab]:hover { border-bottom-color: var(--module-line, var(--nav-active-line)); }

/* The module panel header: its title and a module-coloured rule under the toolbar; the centre region heading and the operations tabs follow the module. */
.panel-title { color: var(--module-accent-strong); }
.panel-toolbar { box-shadow: inset 0 -3px 0 var(--module-accent); }
.panel .region-centre > .region-header { --ctx: var(--module-accent); --ctx-bg: var(--module-surface); }
.panel .ws-tab.is-active { border-bottom-color: var(--module-accent); color: var(--module-accent-strong); }
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-right .region-header { --ctx: var(--module-accent); --ctx-bg: var(--module-surface); }

/* Lost, Found and Medical: section headings and icons, table headings, selected rows, primary actions, focus and decorative borders. Receiving keeps its established look here. */
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre :is(.lost-group > h3, .record-list > h3, .record-list > .rv-header, .cl-detail-col h4, .ws-placeholder h3, .matching-toolbar, .idm-title, .editor-grid > legend) {
    color: var(--text-strong);
}
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre :is(.lost-group > h3, .cl-detail-col h4, .ws-placeholder h3, .record-list > h3, .record-list > .rv-header) {
    background: var(--module-surface);
    border-bottom-color: var(--module-border);
}
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre :is(h3, h4, legend)[data-icon]::before { color: var(--module-accent); }
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre :is(.record-table, .rv-table, .matching-table) thead th {
    background: var(--module-surface);
    color: var(--text-label);
    border-bottom-color: var(--module-border);
}
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre :is(.cl-table, .idm-table, .rv-table) tbody tr.is-selected td,
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre .rv-table tbody tr[aria-current="true"] td {
    background: var(--module-surface-selected);
    color: var(--selected-text);
}
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre :is(.cl-table, .idm-table) tbody tr.is-selected td:first-child { box-shadow: inset 4px 0 0 var(--module-accent-strong); }
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre .btn-primary {
    border-color: var(--module-accent-strong);
    background: var(--module-accent-strong);
    color: var(--on-module-strong);
}
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre .btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--module-accent-strong) 86%, var(--text-strong));
    color: var(--on-module-strong);
}
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--module-focus); }
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre :is(.lost-form .editor-grid, .idm, .cl-criteria, .cl-detail-col, .cl-gallery) { border-color: var(--module-border); }
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre .cl-gallery-candidate { border-top-color: var(--module-accent); }
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre .cl-gallery-recovered { border-top-color: var(--ctx-animal); }
.panel:is([data-panel="lost"], [data-panel="found"], [data-panel="medical"]) .region-centre .lost-form .editor-grid > legend { color: var(--module-accent-strong); }
.lost-new-dialog { width: min(560px, calc(100vw - 48px)); }
.lost-new-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lost-new-current { margin: 0; color: var(--text-strong); font-weight: 600; }

/* Person panel and its dialogs (.person-editor, .person-address-editor): everything follows the Person theme (tokens --ctx-person*, --person-*), except the blue buttons and badges (Primary, Mailing, ...), error and warning states. Scoped; no global table, badge or button rule changes. */
:is(.region-person, .person-editor, .person-address-editor) .record-id { color: var(--ctx-person); }
:is(.region-person, .person-editor, .person-address-editor) .record-table th { background: var(--person-th-bg); border-bottom-color: color-mix(in srgb, var(--ctx-person) 30%, var(--border-strong)); }
:is(.region-person, .person-editor, .person-address-editor) .rv-table th[data-sortable]:hover { color: var(--ctx-person); }
:is(.region-person, .person-editor, .person-address-editor) .rv-table tbody tr[data-index].is-selected td { background: var(--person-select); color: var(--person-select-text); }
:is(.region-person, .person-editor, .person-address-editor) .rv-table tbody tr[data-index].is-selected td:first-child { box-shadow: inset 3px 0 0 var(--ctx-person); }
:is(.region-person, .person-editor, .person-address-editor) .rv-table:focus tbody tr[data-index].is-selected td { background: var(--ctx-person); color: var(--on-create-person); }
:is(.region-person, .person-editor, .person-address-editor) .btn-toggle[aria-pressed=true] { background: var(--person-select); border-color: var(--ctx-person); color: var(--person-select-text); }
:is(.region-person, .person-editor, .person-address-editor) .badge-current, :is(.region-person, .person-editor, .person-address-editor) .badge-chip { background: var(--person-badge-bg); color: var(--person-badge-text); border-color: var(--person-badge-border); }
/* Person dialogs: a Person-purple title bar and primary action, legends with purple icons, section borders tinted lavender. Delete and Cancel, warnings and errors keep their own styles. */
:is(.person-editor, .person-address-editor) .dialog-header { background: var(--create-person-strong); color: var(--on-create-person); }
:is(.person-editor, .person-address-editor) .editor-grid { border-color: color-mix(in srgb, var(--ctx-person) 30%, var(--border)); }
:is(.person-editor, .person-address-editor) legend[data-icon]::before { color: var(--ctx-person); }
:is(.person-editor, .person-address-editor) .btn-primary:not(:disabled) { border-color: var(--create-person-strong); background: var(--create-person); color: var(--on-create-person); }
:is(.person-editor, .person-address-editor) .btn-primary:hover:not(:disabled), :is(.person-editor, .person-address-editor) .btn-primary:active:not(:disabled) { border-color: var(--create-person-strong); background: var(--create-person-strong); color: var(--on-create-person); }
legend[data-icon] { display: inline-flex; align-items: center; gap: 6px; }
.rv-actionbar .btn { box-shadow: none; }

/* The Addresses section of the Person editor is the related view itself: no second frame around it. */
.person-addresses { padding: 0; border: 0; background: none; gap: 6px; }
/* The Identifiers group of the Person editor is a single list: its heading stays, the frame around the one list goes (Telephones and the two-column groups keep theirs). */
.person-editor .person-identifiers { padding: 0; border: 0; background: none; gap: 6px; }

/* Checkboxes and radio buttons: a 16 px box with 4 px of space around it, so its 24 px target never overlaps a neighbour (WCAG 2.2 2.5.8);
   the label around it is clickable as well. */
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 4px; flex: 0 0 auto; accent-color: var(--accent); }
.person-addresses .editor-note { margin: 0 2px; }

/* ======================= Design system 1.0I refinement: fidelity to the approved mockup ======================= */
/* Solid glyphs for the region headings; outline icons use 2.5 px strokes. */
[data-icon="paw-solid"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cellipse cx='5.6' cy='10.2' rx='2.1' ry='2.5'/%3E%3Cellipse cx='9.3' cy='5.6' rx='2.1' ry='2.6'/%3E%3Cellipse cx='14.7' cy='5.6' rx='2.1' ry='2.6'/%3E%3Cellipse cx='18.4' cy='10.2' rx='2.1' ry='2.5'/%3E%3Cpath d='M12 11.2c-2.7 0-5.3 3.1-5.3 6 0 2 1.4 2.9 3 2.9.9 0 1.5-.4 2.3-.4s1.4.4 2.3.4c1.6 0 3-.9 3-2.9 0-2.9-2.6-6-5.3-6z'/%3E%3C/g%3E%3C/svg%3E"); }
[data-icon="clipboard-solid"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M9 2h6a1 1 0 011 1v1h2.5A1.5 1.5 0 0120 5.5v15a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 014 20.5v-15A1.5 1.5 0 015.5 4H8V3a1 1 0 011-1zM8 10v1.7h8V10zm0 4v1.7h8V14zm0 4v1.7h5V18z'/%3E%3C/svg%3E"); }
[data-icon="person-solid"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Ccircle cx='12' cy='7.6' r='4.3'/%3E%3Cpath d='M3.5 21c0-4.6 3.8-8 8.5-8s8.5 3.4 8.5 8z'/%3E%3C/g%3E%3C/svg%3E"); }
[data-icon="heart-solid"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20.5s-8-4.8-8-10.6A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 2.9c0 5.8-8 10.6-8 10.6z'/%3E%3C/svg%3E"); }

/* Header: the deep navy-to-blue band of the mockup and a visible product title (wide screens). */
.app-header { background: var(--header-bg) linear-gradient(90deg, var(--header-bg) 0%, var(--header-bg) 28%, var(--header-bg-end) 100%); }
.app-title { display: flex; align-items: center; padding: 0 18px; font-size: var(--fs-lg); font-weight: 600; color: var(--header-text); white-space: nowrap; }
/* The title gives way before the tabs and the tools do (a long tab label such as the French "Rechercher des animaux connus" pushed the tools off a 1536 px window): it shrinks with an ellipsis. */
.app-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* MultiWEB 2.0 is short enough to stay at every width; the pre-release tag (development builds only) is subordinate and gives way first. */
.app-title { gap: 8px; }
/* R0 adaptive header (docs/responsive-design-architecture.md, D6): before anything clips, the product title and the operator's name give way (the name stays
   for assistive technology; Sign out, the menu and the language switch always remain). The remaining narrow-window consolidation is milestone R3. */
@media (max-width: 899px) {
    .app-title { display: none; }
    .session-user { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 200 % and 400 % zoom (about 640 and 320 CSS px; WCAG 1.4.10, docs/multiweb-spanish-accessibility-checklist.md G4). Text is never shrunk and nothing is removed:
   - below 720 px the official logo keeps its width (it used to shrink to nothing, losing the application's identity); from 720 px the header is unchanged;
   - below 720 px the header's own copy of the language buttons gives way to the application menu, whose first group lists every selectable language (same choices, same order);
   - at 599 px and below the tools row wraps under the logo and the module tabs (the tabs are already paged by the "..." control). Tablets and desktops are unchanged. */
@media (max-width: 719px) {
    .app-brand, .brand-logo-header { flex-shrink: 0; }
    .app-header-tools .lang-switch { display: none; }
}
@media (max-width: 599px) {
    .app-header { flex-wrap: wrap; flex: 0 0 auto; min-height: var(--header-h); }
    .app-header-tools { flex: 1 1 100%; justify-content: flex-end; padding-block: 4px; }
}
.about-platform { margin: 0; font-size: var(--fs-md); color: var(--text-label); text-align: center; }
.tab.is-active, .tab.is-active:hover { border-bottom: 4px solid var(--nav-active-line); }
.tab { font-size: var(--fs-lg); padding: 0 18px; }

/* Buttons: bolder labels and icons; primary is the theme's deep solid colour. */
.btn { font-weight: 600; }
.btn:hover:not(:disabled) { color: var(--ink-brand); }
.btn[data-icon]::before { width: 1.3em; height: 1.3em; }
.btn-primary { border-color: var(--primary-strong); background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled), .btn-primary:active:not(:disabled) { border-color: var(--primary-strong); background: var(--primary-strong); color: var(--on-primary); }
.btn-create:hover:not(:disabled) { color: var(--on-create); }
.btn-create-person:hover:not(:disabled) { color: var(--on-create-person); }
.btn-danger:hover:not(:disabled) { color: var(--danger-text); }
.btn-tertiary { font-weight: 500; }
.btn-toggle { font-weight: 500; }
.btn-toggle[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 700; }

/* Region headings: a strong context bar, a solid icon and a bold title. */
.region-header { box-shadow: inset 5px 0 0 var(--ctx); font-weight: 700; border-bottom-color: color-mix(in srgb, var(--ctx) 30%, var(--border-strong)); }
.region-title[data-icon]::before { width: 1.45em; height: 1.45em; }
.ws-tab.is-active { color: var(--accent-strong); font-weight: 700; border-bottom-width: 3px; }

/* Section headings: the stronger theme tint, a bold title and the accent-coloured icon. */
.record-list > h3, .record-list > .rv-header { font-weight: 700; }
.record-list h3[data-icon]::before, .rv-header h3[data-icon]::before { width: 1.25em; height: 1.25em; }
.record-list > h3 .record-count, .rv-header .record-count { font-weight: 600; }

/* Status badges: fuller pills with a defined border and bold text (the label always says the status). */
.record-badge { padding: 1px 10px; font-weight: 700; line-height: calc(var(--fs-xs) + 8px); border-width: 1px; }

/* Person Record > Identifiers: the Primary mark must fit its narrow column so the code keeps the width (a full Person ID is never cut to "6..."). */
.person-record .record-table[data-related="identifiers"] .record-badge { padding: 1px 7px; margin-right: 0; }

/* A narrow Identifiers card (the region at its narrowest, or stacked in a small region): Type gives up part of its half so the whole Person ID and the Primary mark fit.
   Wider cards keep the approved half-and-half split. The card is the .record-list container. */
@container (max-width: 400px) {
    .person-record .record-table[data-related="identifiers"] th:nth-child(1) { width: 34%; }
}


/* Proximity map (G5): toolbar, canvas, picture windows and the expanded page. Tokens only; the pins and the circle are drawn from the same tokens by proximity-map.js. */
.pm { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.pm-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-toolbar [hidden] { display: none; }
.pm-toolbar .pm-close-map { margin-left: auto; }
.pm-status { margin: 0; min-height: 1.4em; color: var(--text-label); }
.pm-note { margin: 0; padding: 6px 10px; border: 1px solid var(--danger-border); border-left-width: 4px; border-radius: var(--radius); background: var(--danger-bg); color: var(--danger-text); font-weight: 600; }
.pm-note[hidden] { display: none; }
.pm-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; }
.pm-canvas-wrap { position: relative; flex: 1 1 auto; min-width: 0; min-height: 18em; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); overflow: hidden; }
.pm-canvas { position: absolute; inset: 0; }
.pm-list { flex: 0 0 34em; min-width: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pm-list-title { margin: 0; padding: 6px 10px; font-size: var(--fs-heading); font-weight: 700; color: var(--heading-color); background: var(--heading-bg); }
.pm-table tbody tr.is-selected td { background: var(--selected); color: var(--selected-text); }
.pm-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--selected-bar); }
.pm-table td.col-num { white-space: nowrap; }
.pm-photo { box-sizing: border-box; width: 18em; max-width: 100%; display: flex; flex-direction: column; gap: 4px; background: var(--surface); color: var(--text); font-size: var(--fs-md); }
.pm-photo-title { margin: 0; font-weight: 700; color: var(--text-strong); }
.pm-photo-detail { margin: 0; color: var(--text-label); font-size: var(--fs-sm); }
.pm-photo-detail:empty { display: none; }
.pm-photo-stage { position: relative; height: 150px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); overflow: hidden; }
.pm-photo-btn { width: 100%; height: 100%; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.pm-photo-btn:disabled { cursor: default; }
.pm-photo-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.pm-photo-btn img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pm-photo-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 6px; text-align: center; font-weight: 600; color: var(--text-label); pointer-events: none; }
.pm-photo-state[hidden] { display: none; }
.pm-photo-nav { display: flex; align-items: center; gap: 6px; }
.pm-photo-position { min-width: 4.5em; text-align: center; font-weight: 600; color: var(--text-strong); }
.pm-photo-position[hidden] { display: none; }
.pm-photo-nav .btn:last-child { margin-left: auto; }
.pm-chooser { box-sizing: border-box; background: var(--surface); color: var(--text); font-size: var(--fs-md); min-width: 14em; }
.pm-chooser-title { margin: 0 0 4px; font-weight: 700; color: var(--text-strong); }
.pm-chooser ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pm-region .pm { padding: 6px; }
.pm-region .pm-canvas-wrap { min-height: 22em; }
.map-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; }
.map-page-title { margin: 0; font-size: var(--fs-heading); font-weight: 700; color: var(--heading-color); }
.map-page .pm { padding: 0; }
.map-page .pm-canvas-wrap { min-height: 30em; }

/* Live-acceptance corrections (G5): the embedded map is narrow, so its picture windows are smaller; a double click on a list row must not select its text. */
.pm-region .pm-photo { width: 11em; }
.pm-region .pm-photo-stage { height: 96px; }
.pm-region .pm-photo-detail { font-size: var(--fs-sm); }
.cl-table tbody, .pm-table tbody { user-select: none; }

.pm-list[hidden] { display: none; }

/* Two picture windows that cannot fit side by side in a narrow map are compact: no details line, a shorter picture (proximity-map.js layoutWindows). */
.pm.is-compact-windows .pm-photo { width: 9em; }
.pm.is-compact-windows .pm-photo-stage { height: 70px; }
.pm.is-compact-windows .pm-photo-detail { display: none; }


/* Intake editor layout (Receiving), after the Access form (docs/intake-layout.md): three full-width groups instead of two columns, pairs in a 4-column grid
   (label, control, label, control) sized by the middle panel, short controls at their natural width, every other control across the rest of the row. Below 520 px
   the pairs stack in the usual two columns. Tokens only. */
.intake-editor { gap: 8px; }
.intake-grid { grid-template-columns: fit-content(9.5em) minmax(0, 1fr) fit-content(9.5em) minmax(0, 1fr); gap: 5px 10px; padding-bottom: 8px; }
.intake-grid > :not(label) { grid-column: 2 / -1; }
.intake-grid > .half { grid-column: auto; }
.intake-grid > span:empty { display: none; }
.intake-grid .field-pair > input[type=date], .intake-grid .field-pair > input[type=time] { flex: 0 0 auto; width: auto; }
.intake-people .person-name { white-space: normal; overflow-wrap: anywhere; }
/* A date with its button (Hold Until + Calculate, Adoptable Date + the hold date, an address + Insert Address): the button wraps below instead of leaving its half of the row. */
.intake-grid .field-pair.half { flex-wrap: wrap; }
.intake-grid .field-pair.half > .btn { flex: 0 1 auto; max-width: 100%; }
/* Today / Now buttons and the Date Calculator icon beside an intake date or time: the field keeps its natural width, the controls follow it and wrap together. */
.intake-grid .field-pair.half > :is(.date-today, .date-calc-field) { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; }
.intake-grid .date-today > input, .intake-grid .date-calc-field input[type=date] { flex: 0 1 auto; width: auto; min-width: 0; }
/* About one third of the screen: the label columns narrow (labels wrap) so a date and its button still fit in half the row. */
@container (max-width: 700px) {
    .intake-grid { grid-template-columns: fit-content(7em) minmax(0, 1fr) fit-content(7em) minmax(0, 1fr); column-gap: 8px; }
    .intake-grid .field-pair > input[type=date], .intake-grid .field-pair > input[type=time] { min-width: 0; max-width: 100%; }
}
@container (max-width: 519px) {
    .intake-grid { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
    .intake-grid > :not(label), .intake-grid > .half { grid-column: 2; }
}

/* Intake editor refinements: Edit Street (the button takes the label's place, the street line is read-only), a compact address row, the coordinates with their
   buttons grouped, and Surrender Reasons across the whole block. The street panel sits inside the intake form only (ViewData StreetEditor); person addresses keep their row. */
.intake-grid > .street-edit-cell { grid-column: 1; align-self: start; }
.street-cell { display: grid; gap: 6px; min-width: 0; }
.street-text { width: 100%; background: var(--surface-alt); color: var(--text-strong); }
.street-editor { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: end; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); min-width: 0; }
.street-editor[hidden] { display: none; }
.street-part { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-label); color: var(--text-label); }
.street-part > input { width: 100%; min-width: 0; }
.street-narrow { flex: 0 0 4.2em; }
.street-suffix { flex: 0 0 7.5em; }
.street-part.street-narrow:first-child { flex-basis: 5.2em; }
.street-wide { flex: 1 1 8em; }
.street-actions { display: flex; flex: 1 0 100%; gap: 6px; justify-content: flex-end; }
.intake-grid > label { align-self: start; padding-top: 0.4em; }
.intake-location .field-pair { flex-wrap: wrap; }
.intake-location .field-pair > input.narrow { flex: 0 0 6.6em; width: 6.6em; }
.intake-location .field-pair > input[type=number] { flex: 1 1 7em; min-width: 7em; }
.intake-location .field-pair > input[name=city] { flex: 1 1 9em; min-width: 7em; }
.coord-actions { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 1 auto; align-items: center; }
.reasons-control .field-pair { flex-wrap: wrap; }
.reasons-control .field-pair > select, .reasons-control .field-pair > input { flex: 1 1 10em; min-width: 0; }
.intake-form .intake-pairs dd[data-form-field="address"] { white-space: pre-line; }

/* Surrender group (docs/intake-layout.md): each person on one row (name wraps, Search and Clear stay), the person's addresses on the row beneath across the whole width
   with Insert Address on the right; the reason entries share the control column; the selected reasons run across the whole fieldset (subgrid keeps the label column). */
.intake-people .person-field, .intake-people .address-cell { grid-column: 2 / -1; }
.intake-people .person-field .btn { flex: 0 0 auto; }
.address-cell { display: grid; gap: 2px; min-width: 0; }
.address-pick { flex-wrap: nowrap; }
.address-pick > select { flex: 1 1 0; min-width: 0; text-overflow: ellipsis; }
.address-pick > .btn { flex: 0 0 auto; }
.address-full { color: var(--text-label); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.address-full[hidden] { display: none; }
.intake-people .reasons-control { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 5px 10px; }
.reasons-control > label { align-self: start; padding-top: 0.4em; }
.reasons-control .reason-entry { grid-column: 2 / -1; display: grid; gap: 5px; min-width: 0; }
.reasons-control .field-pair { flex-wrap: nowrap; }
.reasons-control .field-pair > select, .reasons-control .field-pair > input { flex: 1 1 0; min-width: 0; }
.reasons-control .field-pair > .btn { flex: 0 0 auto; }
.reasons-control .reason-chips { grid-column: 1 / -1; margin: 2px 0 0; padding: 0; border: 0; background: none; align-content: flex-start; }
.reasons-control .reason-chips > li { max-width: 100%; overflow-wrap: anywhere; }
@container (max-width: 519px) {
    .intake-people .person-field, .intake-people .address-cell, .reasons-control .reason-entry { grid-column: 2; }
}
.reason-chip { align-items: stretch; }
.reason-text { font: inherit; color: inherit; background: none; border: 0; padding: 2px 0; margin: 0; text-align: left; cursor: pointer; border-radius: var(--radius); overflow-wrap: anywhere; min-height: var(--target-min); }
.reason-text:hover { text-decoration: underline; text-underline-offset: 2px; }
.reason-text:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.reason-chip .btn-icon { align-self: center; }
.reason-edit { width: min(560px, calc(100vw - 48px)); }
.reason-edit [hidden] { display: none !important; }
.reason-edit textarea { width: 100%; min-height: 8em; resize: vertical; }
.record-error { gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.confirm-dialog { width: min(480px, calc(100vw - 48px)); }
.confirm-dialog .editor-actions { flex-wrap: wrap; justify-content: flex-end; }
.confirm-dialog .editor-actions .btn { white-space: normal; max-width: 100%; }

/* Compact read-only information (dashboard density refinement): the Intake History sections (Intake, Location, Surrender, Disposition) sit closer than other record fields; the
   two cards of the Person's Identifiers | Telephones pair share the width equally, align their headings, and give long values room to wrap or truncate instead of overflowing. */
.intake-form dl { gap: var(--dl-gap-tight); }
.record-pair { align-items: start; }
.record-pair > .record-list { min-width: 0; }
.record-pair .record-table th, .record-pair .record-table td { padding-left: 6px; padding-right: 6px; }          /* two cards share the width: tighter cell padding, telephone numbers stay whole */
.record-pair .record-table td { overflow-wrap: break-word; hyphens: none; }          /* a word ("Maison") is never split letter by letter while a narrower neighbour can give way */

/* ---- Health Status Exam editing (medical-exam-editor.js) ---- */
.med-exam-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }
.med-exam-actions > p { margin: 0; flex: 1 1 14em; }
.med-exam-actions .editor-error { flex-basis: 100%; }
.med-exam-dialog { width: min(720px, calc(100vw - 48px)); }
.med-exam-dialog .editor-grid textarea { min-height: 4.5em; resize: vertical; }
.med-weight-choices { grid-template-columns: minmax(0, 1fr); }
.med-weight-choices .check { display: flex; align-items: center; gap: 8px; min-height: var(--target-min); }
.med-weight-choices .check input { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.med-weight-choices .editor-note { margin: 0 0 6px 2em; }
.med-add-finding { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.med-add-finding select { flex: 1 1 14em; min-width: 0; }
.med-note { width: 100%; min-width: 8em; }
td input[type="checkbox"] { width: 1.25em; height: 1.25em; }
@media (pointer: coarse) { td input[type="checkbox"] { width: 1.75em; height: 1.75em; } }

/* ---- Spay/Neuter and Condition editing (medical-fields-editor.js) ---- */
.med-fields-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }
.med-fields-actions > p { margin: 0; flex: 1 1 12em; }
.med-fields-form[hidden] { display: none; }
.med-fields-form .editor-grid textarea { min-height: 5em; resize: vertical; }
.med-fields-form .editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.med-fields-form .check { display: flex; align-items: center; gap: 8px; min-height: var(--target-min); }
.med-fields-form .check input { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

/* ---- Medical Assessment picker and row actions (medical-assessment-editor.js) ---- */
.med-assess-dialog { width: min(760px, calc(100vw - 48px)); }
.med-assess-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.med-assess-filter input { flex: 1 1 14em; min-width: 0; }
.med-assess-letters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
.med-letter { min-width: var(--target-min); padding-inline: 6px; }
.med-letter[aria-pressed="true"] { border-color: var(--module-accent); background: var(--module-surface-selected); font-weight: 600; }
.med-assess-list { list-style: none; margin: 0 0 8px; padding: 4px; max-height: 16em; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.med-assess-list li label { display: flex; align-items: center; gap: 8px; min-height: var(--target-min); padding: 0 4px; cursor: pointer; }
.med-assess-list li label:hover { background: var(--module-surface-selected); }
.med-assess-list input { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.med-row-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* ---- Vaccination editor and formatted-memo guard (medical-vaccination-editor.js, medical-sections.js richField) ---- */
.med-vacc-dialog { width: min(820px, calc(100vw - 48px)); }
.med-vacc-nextdue { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--heading-bg); }
.med-vacc-nextdue h3 { margin: 0 0 6px; }
.med-vacc-nextdue .editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.med-rich-guard { grid-column: 2; }

/* ---- Health Status Exam findings: category chooser (medical-sections.js renderCategories) ---- */
.med-cats { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.med-cat[aria-pressed="true"] { border-color: var(--module-accent); background: var(--module-surface-selected); font-weight: 600; }

/* ---- Weight History chart (medical-weight-editor.js): tokens only ---- */
.med-chart-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.med-chart-unit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 6px; padding: 0; border: 0; }
.med-chart-unit legend { float: left; margin-right: 12px; padding: 0; font-weight: 600; }
.med-chart-unit .check { display: inline-flex; align-items: center; gap: 6px; min-height: var(--target-min); }
.med-chart-frame { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); padding: 4px; }
.med-chart-frame:focus-visible { outline: 2px solid var(--module-focus, var(--accent)); outline-offset: 2px; }
.med-chart-frame svg { display: block; width: 100%; height: auto; min-height: 12em; }
.wt-grid { stroke: var(--border); stroke-width: 1; }
.wt-axis { stroke: var(--border-control); stroke-width: 1.5; }
.wt-label { fill: var(--text-label); font-size: var(--fs-sm); font-family: inherit; }
.wt-line { fill: none; stroke: var(--module-accent); stroke-width: 2; stroke-linejoin: round; }
.wt-point { fill: var(--module-accent); stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.wt-point.is-selected { fill: var(--surface); stroke: var(--module-accent-strong, var(--module-accent)); stroke-width: 3; }
.med-chart-stats { margin: 8px 0; }
.med-chart-table summary { cursor: pointer; min-height: var(--target-min); display: flex; align-items: center; }

/* ---- Medical density: one column of sections, several columns of information in each ---- */
.medical-section { position: relative; }
.med-head-actions .med-toggle { position: static; }
.medical-section > h3 { padding-inline-end: 12em; }                               /* room for the expand button on the heading line */
.medical-centre .record-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(7em, 11em) minmax(8em, 1fr)); column-gap: 14px; row-gap: 3px; align-items: baseline; }
.med-more { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; row-gap: 1px; }
.med-more dt { color: var(--text-label); font-size: var(--fs-sm); }
/* Compact Medical lists (docs/medical-discovery.md section 14.21): tighter cell padding, vertically centred cells, compact but still 24 px Edit / Delete buttons, and the More cell lays its fields out
   two (wide list: three) label / value pairs per line instead of one tall stack. Text size and the 24 px target are unchanged. */
.medical-section .vacc-scroll .record-table td { padding-block: calc(var(--row-pad) - 2px); vertical-align: middle; }
.medical-section .vacc-scroll .record-table thead th { padding-block: calc(var(--row-pad) - 1px); }
.med-row-actions { display: flex; flex-wrap: nowrap; gap: 4px; }
.medical-section .med-row-actions .btn { min-height: var(--target-min); margin: 0; padding-block: 0; padding-inline: 9px; }
.med-more { grid-template-columns: fit-content(9em) minmax(5em, 1fr); column-gap: 10px; row-gap: 0; max-width: 18em; }
.med-more.is-wide { grid-template-columns: repeat(2, fit-content(7em) minmax(4em, 1fr)); max-width: 26em; }
.med-more dd { overflow-wrap: break-word; }
/* a narrow Medical list wraps its cells instead of scrolling sideways */
.medical-section .vacc-scroll .record-table { min-width: 0; }
.medical-section .record-table td span[data-i18n-date] { white-space: nowrap; }
[data-med-section="weights"] .record-table td { white-space: nowrap; }                /* short values: a weight, its change, a date, the buttons */
@container (max-width: 46em) { .med-more { max-width: 14em; } }
@container (max-width: 34em) { .medical-section:not([data-med-section="weights"]) .med-row-actions { flex-wrap: wrap; } .medical-section:not([data-med-section="weights"]) .record-table td span[data-i18n-date] { white-space: normal; } .med-more { grid-template-columns: fit-content(4.8em) minmax(2.6em, 1fr); max-width: 8.8em; column-gap: 5px; } .medical-section .med-row-actions .btn { padding-inline: 6px; } }
.med-more dd { margin: 0; font-size: var(--fs-table); overflow-wrap: anywhere; }

/* ---- Medical History workspace (docs/medical-discovery.md section 14.17): heading with quick access, datasheet, detail, child tabs, packages prototype ---- */
/* The Medical heading and its three workspace tabs (docs/medical-discovery.md section 14.18) stay in view while a workspace scrolls. */
.med-head { position: sticky; top: 0; z-index: 3; background: var(--surface); display: grid; gap: 4px; padding-top: 2px; }
.med-workspace-header { display: flex; align-items: center; gap: 8px 14px; }
.med-workspace-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-title); font-weight: 700; color: var(--text-strong); }
.med-workspace-title::before { width: 1.3em; height: 1.3em; color: var(--module-accent-strong); }
.med-head .tab-strip { border-bottom: 2px solid var(--module-accent); }
.med-head .ws-tab { font-size: var(--fs-heading); font-weight: 600; padding-inline: 18px; }
.med-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.med-pane[hidden] { display: none; }
.med-pane > * { flex-shrink: 0; }
.med-pane .medical-row.med-pair { grid-template-columns: repeat(auto-fit, minmax(28em, 1fr)); }
.med-services-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.med-services-bar .med-fields-actions { margin: 0; flex: 1 1 18em; }
.med-services-end { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
/* the Add (and Delete Selected, View chart) actions of a list are rendered inside its section and sit over its heading bar, at the right end; the notes and messages of the action bar stay above the section */
.med-pane .medical-stack { gap: 4px; }
.med-pane .medical-stack > .med-fields-actions { margin: 0; }
.med-pane .medical-stack > .med-fields-actions > p:empty { display: none; }
.med-pane .medical-section { position: relative; }
.med-head-actions { position: absolute; inset-block-start: 0; inset-inline-end: 6px; z-index: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-height: calc(var(--control-h) + 2px); }
.med-head-actions .btn { min-height: var(--target-min); padding-block: 1px; }
.med-head-actions [hidden] { display: none; }
/* a narrow section: the actions drop under the heading instead of covering its title */
@container (max-width: 34em) {
    .medical-section:has(> .med-head-actions) > h3 { padding-inline-end: var(--head-px, 8px); }
    .med-head-actions { position: static; justify-content: flex-end; flex-wrap: wrap; padding: 4px 6px 0; min-height: 0; }
}
.medical-section:has(> .med-head-actions) > h3 { padding-inline-end: 16em; }
/* Medical Assessments grouped by category: a heading row per group (disclosure button, count, select-all) and one individually selectable row per recorded assessment */
.med-group th { background: var(--heading-soft); border-bottom: 1px solid var(--border); padding: 1px var(--head-px, 8px); text-align: start; }
.med-group-head { display: flex; align-items: center; gap: 8px; min-height: var(--target-min); }
.med-group-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--text-strong); cursor: pointer; min-height: var(--target-min); text-align: start; }
.med-group-toggle[aria-expanded="false"]::before { transform: rotate(-90deg); }
.med-group-toggle::before { transition: transform 0.12s; }
.med-select-col { width: 2.4em; text-align: center; }
.med-select-col input, .med-group-head input[type=checkbox] { width: var(--target-min); height: var(--target-min); margin: 0; }
.med-assess-name { font-weight: 500; color: var(--text-strong); }
/* the hierarchy: a child row (its checkbox AND its text, one container) is inset from its category's checkbox and chevron, which stay at the root; the other columns keep their alignment. The inset and the guide
   scale with the Display size (em) and the guide runs down the category checkbox's centre line with a tick to each child. */
[data-med-section="assessments"] { --tree-indent: 2.4em; --tree-x: calc(var(--head-px, 8px) + var(--target-min) / 2); }
[data-med-section="assessments"] td.med-assess-name {
    padding-inline-start: var(--head-px, 8px);
    background-image: linear-gradient(var(--border-strong), var(--border-strong)), linear-gradient(var(--border-strong), var(--border-strong));
    background-repeat: no-repeat;
    background-size: 1px 100%, calc(var(--tree-indent) - var(--target-min) / 2) 1px;
    background-position: var(--tree-x) 0, var(--tree-x) 50%;
}
.med-child { display: flex; align-items: center; gap: 0.5em; margin-inline-start: var(--tree-indent); min-width: 0; }
.med-child > input[type=checkbox] { flex: 0 0 auto; width: var(--target-min); height: var(--target-min); margin: 0; }
.med-child-text { min-width: 0; overflow-wrap: break-word; }
[data-med-section="assessments"] td.med-assess-name { min-width: 9em; }
.med-by-inline { display: none; color: var(--text-muted); }
/* a narrow pane: the By column folds under the date so the Assessment text keeps a readable width */
@container (max-width: 40em) {
    [data-med-section="assessments"] .med-by { display: none; }
    [data-med-section="assessments"] .med-by-inline { display: block; }
}
/* in a narrow pane the columns wrap (note, By, buttons) instead of the list scrolling sideways */
[data-med-section="assessments"] .vacc-scroll .record-table { min-width: 0; width: 100%; }
[data-med-section="assessments"] td.med-date { white-space: nowrap; }
[data-med-section="assessments"] .med-note-preview { white-space: normal; max-width: 28em; overflow-wrap: anywhere; }
.med-note-preview { display: inline-block; max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
[data-med-section="assessments"] tr.is-selected td { background-color: var(--module-surface-selected); }
.confirm-detail { margin: 6px 0 0; padding-inline-start: 1.2em; max-height: 12em; overflow: auto; }
.med-sort { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: start; min-height: var(--target-min); }
.med-sort::after { content: ""; display: inline-block; margin-inline-start: 4px; }
th[aria-sort="ascending"] .med-sort::after { content: "\25B2"; }
th[aria-sort="descending"] .med-sort::after { content: "\25BC"; }
.med-history .vacc-scroll { max-height: 22em; }
/* Compact Medical forms: related fields share a row (label, control, label, control) so a date, fee or frequency is not stretched across a whole dialog or pane. Long text (a note) takes the rest of its row. */
.editor-grid.med-pairs > label:has(+ textarea) { align-self: start; padding-top: 4px; }
@media (min-width: 780px) {
    .med-exam-dialog .editor-grid.med-pairs { grid-template-columns: fit-content(24%) minmax(0, 1fr) fit-content(24%) minmax(0, 1fr); column-gap: 12px; }
    .med-exam-dialog .editor-grid.med-pairs > label:has(+ textarea) { grid-column: 1; }
    .med-exam-dialog .editor-grid.med-pairs > textarea { grid-column: 2 / -1; }
}
@container (min-width: 46em) {
    .med-fields-form .editor-grid.med-pairs { grid-template-columns: fit-content(22%) minmax(0, 1fr) fit-content(22%) minmax(0, 1fr); column-gap: 12px; }
    .med-fields-form .editor-grid.med-pairs > label:has(+ textarea) { grid-column: 1; }
    .med-fields-form .editor-grid.med-pairs > textarea { grid-column: 2 / -1; }
}
/* Medical History form (docs/medical-plan-notes-test-results.md): logical rows; every group keeps its own width and wraps as a whole under the one before it, so a date and its time never share a line with a squeezed neighbour
   and nothing scrolls sideways. Labels sit above their controls (one label placement for the whole form). */
.hist-grid [hidden] { display: none !important; }
.hist-grid { display: flex; flex-direction: column; gap: 8px; }
.hist-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; min-width: 0; }
.hist-row > .hf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-grid label:not(.check) { color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
.hist-grid :is(select, textarea, input:not([type=checkbox], [type=date], [type=time])) { width: 100%; box-sizing: border-box; min-width: 0; }
.hist-grid input[type=date] { width: auto; min-width: 9.5em; }
.hist-grid input[type=time] { width: auto; min-width: 6.5em; }
.hist-dt { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.hf-service, .hf-dt, .hf-time, .hf-done { flex: 0 0 auto; }
.hf-care { flex: 1 1 11em; }
.hf-issue { flex: 2.5 1 16em; }
.hf-freq { flex: 1 1 10em; }
.hf-vet, .hf-tech { flex: 1 1 14em; }
.hf-fee { flex: 0 0 8em; }
.hf-note { flex: 1 1 100%; }
.hist-sub-form { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 6px; }
.hist-sub-form > h4 { margin: 0 0 4px; color: var(--text-strong); }
.med-hist-detail { display: flex; flex-direction: column; gap: 6px; }
.med-hist-detail .med-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.med-hist-children { border-top: 1px solid var(--border); padding-top: 4px; }
.med-hist-children .vacc-scroll { max-height: 14em; }
.med-attachments { margin: 0; padding-inline-start: 1.2em; }
/* Manual Medical Inventory rows (docs/medical-discovery.md section 14.23) */
.med-inv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
.med-inv-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.med-inv-locked { color: var(--text-subtle); white-space: nowrap; }
.med-inv-dialog { width: min(720px, calc(100vw - 48px)); }
.inv-grid .inv-item { flex: 3 1 14em; }
.inv-combo { position: relative; display: block; }
.inv-combo > input { width: 100%; box-sizing: border-box; padding-right: calc(var(--target-min) + 4px); text-overflow: ellipsis; }
.inv-combo-toggle { position: absolute; top: 0; right: 0; bottom: 0; min-width: var(--target-min); padding: 0 6px; border-color: transparent; background: none; }
.inv-combo-toggle::before { margin: 0; }
.inv-combo-popup { position: fixed; z-index: 5; box-sizing: border-box; overflow-y: auto; background: var(--surface); color: var(--text-strong); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-header); }
.inv-combo-popup[hidden] { display: none; }
.inv-combo-popup ul { list-style: none; margin: 0; padding: 2px 0; }
.inv-combo-popup li[role=option] { padding: 5px 10px; cursor: pointer; overflow-wrap: anywhere; border-left: 3px solid transparent; }
.inv-combo-popup li[role=option]:hover { background: var(--hover); }
.inv-combo-popup li[role=option].is-active { background: var(--selected); color: var(--selected-text); outline: 2px solid var(--focus); outline-offset: -2px; }
.inv-combo-popup li[role=option][aria-selected=true] { border-left-color: var(--module-accent, var(--focus)); font-weight: 600; }
.inv-combo-empty { margin: 0; padding: 8px 10px; color: var(--text-label); }
.inv-grid .inv-lot { flex: 1.5 1 9em; }
.inv-grid .inv-qty { flex: 0 1 8em; }
.inv-grid .hf-vet { flex: 1 1 14em; }
.inv-grid .hf-dt > input { width: auto; min-width: 12em; }
.inv-grid .med-inv-qty { display: flex; align-items: center; gap: 6px; }
.inv-grid .med-inv-qty input { width: 5.5em; }
.med-inv-qty { display: flex; align-items: center; gap: 8px; }
.med-inv-unit { color: var(--text-label); }
.med-pkg-dialog { width: min(980px, calc(100vw - 48px)); }
.med-pkg-dialog .editor-grid { margin-bottom: 8px; }
.med-pkg-dialog .check { display: flex; align-items: center; gap: 8px; min-height: var(--target-min); }
.med-pkg-dialog [data-pkg-pick] { width: var(--target-min); height: var(--target-min); margin: 0; }
.med-pkg-layout { display: grid; grid-template-columns: minmax(10em, 14em) minmax(0, 1fr); gap: 10px; }
.med-pkg-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.med-pkg-list button[aria-pressed="true"] { font-weight: 700; border-color: var(--module-accent); }

/* Follow-up File (F1): filter bar, server-paged list, read-only detail. Tokens only. */
.fu-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px; gap: 6px; overflow: auto; }
.fu-body { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.fu-filters { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.fu-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
.fu-field { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-label); color: var(--text-label); min-width: 0; }
.fu-field > span { font-weight: 500; }
.fu-grow { flex: 1 1 14em; }
.fu-grow input { width: 100%; }
.fu-check { display: inline-flex; align-items: center; gap: 4px; min-height: var(--target-min); color: var(--text-label); }
.fu-dates, .fu-periods { display: flex; flex-wrap: wrap; align-items: end; gap: 4px; }
.fu-dates > .btn, .fu-periods > .btn { min-width: var(--target-min); }
.fu-periods .btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fu-summary { margin: 0; min-height: 1.4em; color: var(--text-label); }
.fu-error { margin: 0; }
.fu-list { container-type: inline-size; max-height: 46vh; min-height: 8em; }
.fu-table th > span { display: block; padding: var(--row-pad) var(--cell-px); color: var(--text-label); font-size: var(--fs-th); font-weight: 600; white-space: nowrap; }   /* same look as the sortable headings */
.fu-table tbody tr { cursor: pointer; }
.fu-table tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fu-table tbody tr[aria-current="true"] td { background: var(--accent-soft); font-weight: 600; }
.fu-table .fu-flag { text-align: center; }
.fu-table .fu-note-cell { max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-withheld { color: var(--text-subtle); font-style: italic; }
@container (max-width: 1150px) { .fu-table [data-priority="1"] { display: none; } }
@container (max-width: 900px) { .fu-table [data-priority="2"] { display: none; } }
.fu-pager { display: flex; align-items: center; gap: 8px; }
.fu-detail { padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.fu-detail-title { margin: 0 0 4px; font-size: var(--fs-md); font-weight: 700; color: var(--text-strong); }
.fu-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 4px 16px; margin: 0; }
.fu-facts > div { min-width: 0; }
.fu-facts dt { font-size: var(--fs-label); font-weight: 500; color: var(--text-label); }
.fu-facts dd { margin: 0; font-weight: 500; color: var(--text-strong); overflow-wrap: anywhere; }
.fu-note-title { margin: 6px 0 2px; font-size: var(--fs-label); font-weight: 500; color: var(--text-label); }
.fu-note { margin: 0; white-space: pre-wrap; color: var(--text-strong); overflow-wrap: anywhere; }
.fu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fu-actions .btn:disabled { cursor: not-allowed; }
.followup-editor .editor-body { min-width: min(46rem, 94vw); }
.followup-editor textarea { width: 100%; min-height: 8em; resize: vertical; }
.followup-editor .field-pair { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* ---- Shared Date Calculator (docs/date-calculator.md): the icon button beside a date field and the calculator dialog; tokens only. ---- */
[data-icon="calculator"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8.5 7.5h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01'/%3E%3C/svg%3E"); }
.date-calc-field { display: inline-flex; align-items: center; gap: 4px; justify-self: start; max-width: 100%; }
.date-calc-button { min-width: var(--target-min); min-height: var(--target-min); padding: 0 6px; }
.date-calc-button::before { margin: 0; }
.date-calc { width: min(46rem, calc(100vw - 32px)); }
.dc-body { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(15rem, 1fr); gap: calc(var(--gap) * 3); align-items: start; }
.dc-body h3 { margin: 0 0 6px; font-size: var(--fs-heading); font-weight: 600; color: var(--text-strong); }
.dc-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.dc-nav select { flex: 1 1 auto; min-width: 0; }
.dc-nav input[type="number"] { width: 5.5em; }
.dc-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dc-grid th { padding: 2px 0; font-size: var(--fs-th); font-weight: 600; color: var(--text-label); text-align: center; }
.dc-grid td { padding: 1px; text-align: center; }
.dc-grid button { width: 100%; min-height: var(--target-min); padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.dc-grid button.is-outside { color: var(--text-subtle); }
.dc-grid button:hover { background: var(--heading-bg); }
.dc-grid button.is-today { border-color: var(--border-strong); font-weight: 700; }
.dc-grid button.is-start, .dc-grid button.is-start:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary-strong); font-weight: 700; }
.dc-selected { margin: 6px 0 0; color: var(--text-label); }
.dc-hint { margin: 0 0 8px; color: var(--text-label); }
.dc-offsets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.dc-offset { display: flex; flex-direction: column; gap: 2px; color: var(--text-label); }
.dc-offset input { width: 100%; text-align: right; }
.dc-business { margin: 0 0 8px; padding: 0; border: 0; }
.dc-weekdays { display: grid; gap: 6px; margin-top: 6px; }
.dc-weekday-list { display: flex; flex-wrap: wrap; gap: 4px; }
.dc-weekday { display: inline-flex; align-items: center; gap: 4px; min-height: var(--target-min); padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.dc-weekday:has(input:checked) { background: var(--heading-bg); border-color: var(--primary); font-weight: 600; }
.dc-result { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--heading-bg); }
.dc-result-value { min-height: 1.4em; font-size: var(--fs-title); font-weight: 700; color: var(--text-strong); }
.dc-clear { margin-right: auto; }
@media (max-width: 640px) { .dc-body { grid-template-columns: 1fr; } }
.medical-tasks { width: min(30rem, calc(100vw - 32px)); }
.mt-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: 50vh; overflow: auto; }
.mt-list label { display: flex; align-items: center; gap: 8px; min-height: var(--target-min); padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.mt-list label:has(input:checked) { background: var(--heading-bg); border-color: var(--primary); font-weight: 600; }
.mt-list .is-applied { color: var(--text-subtle); }
.fu-origin-link { margin-left: 8px; }
.fe-note-field { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.fe-note-field textarea { align-self: stretch; }
.hist-followups { margin-top: calc(var(--gap) * 2); }
.hist-followups table { width: 100%; }

/* ---- Follow-up and Date Calculator visual refinement: existing theme tokens only (no new tokens, no hex). ---- */
[data-icon="followup"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M8 14l3 3 5-6'/%3E%3C/svg%3E"); }
.panel-title[data-icon] { display: inline-flex; align-items: center; gap: 8px; }
.panel-title[data-icon]::before { width: 1.2em; height: 1.2em; color: var(--module-accent, var(--accent)); }
.fu-filters { gap: 4px; padding: 4px; background: var(--surface-alt); }
.fu-group { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.fu-group + .fu-group { border-left-color: var(--info-border); }
.fu-group-label { align-self: center; min-width: 4.5em; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-strong); }
.fu-group > .fu-row { flex: 1 1 auto; }
.fu-table thead th { background: var(--heading-bg); border-bottom: 2px solid var(--border-strong); }
.fu-table tbody tr:hover td { background: var(--hover); }
.fu-table tbody tr[aria-current="true"] td { background: var(--selected); color: var(--selected-text); box-shadow: none; }
.fu-table tbody tr[aria-current="true"] td:first-child { box-shadow: inset 4px 0 0 var(--selected-bar); }
.fu-table tbody tr.is-done td { color: var(--text-muted); }
.fu-badge { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border: 1px solid var(--neutral-border); border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.fu-badge-done { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.fu-badge-locked { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.fu-badge-private { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.fu-badge-overdue { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.fu-off { color: var(--text-subtle); }
.fu-detail { border-top: 3px solid var(--accent); }
.fu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 6px; }
.fu-card { padding: 4px 8px 6px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); }
.fu-card > h3 { margin: -4px -8px 4px; padding: 3px 8px; background: var(--heading-bg); border-bottom: 1px solid var(--border-strong); border-radius: var(--radius) var(--radius) 0 0; font-size: var(--fs-label); font-weight: 700; color: var(--text-strong); }
.fu-card .fu-facts { grid-template-columns: 1fr 1fr; }
.fu-card-status .fu-facts, .fu-card-who .fu-facts { grid-template-columns: 1fr; }
.fu-card-status .fu-facts > div, .fu-card-who .fu-facts > div { display: flex; gap: 8px; align-items: baseline; }
.fu-card-status dt, .fu-card-who dt { min-width: 7em; }
.fu-actions { padding: 2px 0; }
.fu-note { padding: 4px 8px; background: var(--surface-alt); border-left: 3px solid var(--border-strong); border-radius: var(--radius); }
/* editor sections */
.followup-editor .fe-section { margin: 0 0 6px; padding: 6px 8px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.followup-editor .fe-who { border-left-color: var(--ctx-animal); }
.followup-editor .fe-note-section { border-left-color: var(--info-border); }
.followup-editor .fe-flags { border-left-color: var(--warning-border); }
.followup-editor .fe-section > legend { padding: 0 6px; font-size: var(--fs-label); font-weight: 700; color: var(--text-strong); }
/* Medical Tasks List */
.mt-list label { border-color: var(--border); background: var(--surface); }
.mt-list label:hover { background: var(--hover); }
.mt-list label:has(input:checked) { background: var(--selected); color: var(--selected-text); border-color: var(--selected-bar); box-shadow: inset 4px 0 0 var(--selected-bar); }
.mt-list label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Date Calculator */
.date-calc .dialog-header { background: var(--header-bg); color: var(--header-text); }
.dc-start, .dc-calc { padding: 6px 8px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.dc-body h3 { padding: 3px 8px; margin: -6px -8px 6px; background: var(--heading-bg); border-bottom: 1px solid var(--border-strong); border-radius: var(--radius) var(--radius) 0 0; }
.dc-grid th:nth-child(n+6) { color: var(--text-muted); }
.dc-grid td:nth-child(n+6) button:not(.is-start):not(.is-result) { background: var(--surface-sunken); }
.dc-grid button.is-holiday:not(.is-start):not(.is-result) { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.dc-grid button.is-nonworking:not(.is-start):not(.is-result):not(.is-holiday) { background: var(--neutral-bg); color: var(--neutral-text); text-decoration: line-through; text-decoration-thickness: 1px; }
.dc-grid button.is-result, .dc-grid button.is-result:hover { background: var(--success-bg); color: var(--success-text); border: 2px solid var(--success-border); font-weight: 700; }
.dc-grid button.is-start.is-result { box-shadow: inset 0 0 0 2px var(--success-border); }
.dc-grid button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dc-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--text-label); }
.dc-legend li { display: inline-flex; align-items: center; gap: 4px; }
.dc-swatch { width: 12px; height: 12px; border: 1px solid var(--border-strong); border-radius: 3px; }
.dc-swatch-start { background: var(--primary); border-color: var(--primary-strong); }
.dc-swatch-result { background: var(--success-bg); border: 2px solid var(--success-border); }
.dc-swatch-holiday { background: var(--danger-bg); border-color: var(--danger-border); }
.dc-swatch-off { background: var(--neutral-bg); border-color: var(--neutral-border); }
.dc-offset { padding: 4px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.dc-offset:has(input:disabled) { background: var(--surface-sunken); }
.dc-offset input:disabled { background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed; }
.dc-business { padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--info-border); border-radius: var(--radius); }
.dc-result { background: var(--success-bg); border-color: var(--success-border); border-left: 4px solid var(--success-border); }
.dc-result > span, .dc-result-value { color: var(--success-text); }
.fu-facts > div[hidden] { display: none; }

/* Follow-up entry points of the other modules (F3): the record bars and the count badge; existing tokens only. */
.record-followup { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.record-followup[hidden] { display: none; }
.record-followup .btn { min-height: var(--target-min); }
.fu-badge-count { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.fu-badge-count:empty { display: none; }
.fu-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 2px 8px; background: var(--info-bg); border: 1px solid var(--info-border); border-radius: var(--radius); color: var(--info-text); font-weight: 600; }
.fu-scope[hidden] { display: none; }

/* ---- Email composer (docs/email-composer.md): existing theme tokens only. ---- */
[data-icon="send"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3L11 14'/%3E%3Cpath d='M22 3l-7 19-4-8-8-4z'/%3E%3C/svg%3E"); }
.email-composer { width: min(72rem, calc(100vw - 32px)); }
.ec-body { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(18rem, 1fr); gap: calc(var(--gap) * 2); align-items: stretch; }
.ec-form { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ec-section { margin: 0; padding: 6px 8px 8px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.ec-message { border-left-color: var(--info-border); }
.ec-section > legend { padding: 0 6px; font-size: var(--fs-label); font-weight: 700; color: var(--text-strong); }
.ec-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; color: var(--text-label); font-size: var(--fs-label); font-weight: 500; }
.ec-field input, .ec-field select, .ec-field textarea { width: 100%; }
.ec-field textarea { min-height: 12em; resize: vertical; font-family: ui-monospace, Consolas, monospace; }
.ec-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ec-preview { display: flex; flex-direction: column; min-width: 0; padding: 4px 8px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.ec-preview > h3 { margin: -4px -8px 6px; padding: 3px 8px; background: var(--heading-bg); border-bottom: 1px solid var(--border-strong); border-radius: var(--radius) var(--radius) 0 0; font-size: var(--fs-label); font-weight: 700; color: var(--text-strong); }
.ec-frame { flex: 1 1 auto; width: 100%; min-height: 20em; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.ec-messages { padding: 0 12px; display: grid; gap: 4px; }
.ec-result { margin: 4px 0; padding: 6px 10px; border: 1px solid var(--border); border-left: 4px solid var(--info-border); border-radius: var(--radius); background: var(--info-bg); color: var(--info-text); font-weight: 600; }
.ec-result-accepted { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.ec-result-uncertain { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.ec-result[hidden] { display: none; }
@media (max-width: 760px) { .ec-body { grid-template-columns: 1fr; } }
.ec-field[hidden] { display: none; }

/* ---- MultiWEB product home and Enforcement workspace (shared by every product) ---- */
a.app-title { text-decoration: none; }
a.app-title:hover { text-decoration: underline; }
a.app-title:focus-visible { outline: 2px solid var(--header-line); outline-offset: 2px; }
.product-home { box-sizing: border-box; width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.product-home-title { margin: 0; font-size: var(--fs-title); font-weight: 600; color: var(--text-strong); }
.product-home-status { margin: 0; font-size: var(--fs-md); color: var(--text); }
.product-grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.product-card { display: grid; grid-template-columns: 32px 1fr; gap: 2px 12px; align-items: center; min-height: 96px; padding: 14px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); text-decoration: none; }
.product-card:hover { background: var(--hover); border-color: var(--accent); }
.product-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.product-card-icon { grid-row: span 2; width: 32px; height: 32px; fill: var(--accent); }
.product-card-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-strong); }
.product-card-description { grid-column: 2; font-size: var(--fs-sm); color: var(--text-muted); }
.enforcement-panel { box-sizing: border-box; padding: 20px 16px; max-width: 760px; }
.enforcement-product { margin: 0 0 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.enforcement-status { display: inline-block; margin: 10px 0; padding: 4px 10px; font-size: var(--fs-sm); font-weight: 600; background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); border-radius: var(--radius); }
.enforcement-summary { margin: 0; font-size: var(--fs-md); color: var(--text); }