/* KHAS Collections: the site's appearance (design §9.3, v1.17 palette, v1.23 design system).
   1. Tokens   2. Base   3. Bootstrap controls   4. Navigation and page frame   5. Design-system components
   6. Lists and tables   7. Record pages (slip)   8. Row layouts (locations, people)   9. Help, back to top, errors
   10. Print and labels
   Colours, spacing and widths come from the tokens; use them rather than writing a colour or size again. */

/* 1. Tokens ------------------------------------------------------------------------------------------------- */

:root {
    --khas-ink: #26332e;
    --khas-ink-soft: #465249;
    --khas-muted: #5b635d;              /* at least 4.5:1 on the page and surface colours, for small text */
    --khas-page: #f7f6f1;
    --khas-surface: #fff;
    --khas-surface-sunken: #efeee6;
    --khas-surface-header: #f7f8f4;     /* table headings */
    --khas-border: #dedfd6;
    --khas-border-soft: #e8eae3;
    --khas-border-strong: #b9c0b7;
    --khas-control-border: #858c86;     /* form fields, tick boxes and radio buttons: at least 3:1 on white (WCAG 1.4.11) */
    --khas-accent: #315b49;
    --khas-accent-hover: #244535;
    --khas-accent-soft: #e9eee5;
    --khas-accent-soft-border: #d2dccc;
    --khas-accent-tint: #f0f4ee;        /* hover on rows and links */
    --khas-accent-muted: #8b9e92;       /* outlined button borders */
    --khas-nav: #263e33;
    --khas-nav-active: #3b5445;
    --khas-nav-border: #4c6454;
    --khas-nav-text: #d9e2db;
    --khas-warning-ink: #745413;
    --khas-warning-soft: #f7edcf;
    --khas-neutral-ink: #4f5750;
    --khas-neutral-soft: #e4e6e0;
    --khas-danger-ink: #a12a22;
    --khas-danger-soft: #fbeeec;
    --khas-danger-border: #e3b9b4;
    --khas-private-soft: #fdf8e9;       /* private contact details */
    --khas-private-border: #ecd89a;
    --khas-focus: #819c56;

    --khas-space-1: 0.25rem;
    --khas-space-2: 0.5rem;
    --khas-space-3: 0.75rem;
    --khas-space-4: 1rem;
    --khas-space-5: 1.5rem;
    --khas-space-6: 2.5rem;
    --khas-section-pad: clamp(1rem, 2.5vw, 1.5rem);

    --khas-radius: 0.6rem;
    --khas-radius-sm: 0.4rem;

    --khas-width-narrow: 32rem;
    --khas-width-form: 48rem;
    --khas-width-reading: 65rem;

    --khas-font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --khas-font-mono: ui-monospace, Consolas, "Cascadia Mono", monospace;

    /* Bootstrap follows the tokens, so its components match without overrides of their own. */
    --bs-body-font-family: var(--khas-font);
    --bs-body-color: var(--khas-ink);
    --bs-body-bg: var(--khas-page);
    --bs-emphasis-color: var(--khas-ink);
    --bs-secondary-color: var(--khas-muted);
    --bs-border-color: var(--khas-border);
    --bs-primary: var(--khas-accent);
    --bs-primary-rgb: 49, 91, 73;
    --bs-link-color: var(--khas-accent);
    --bs-link-color-rgb: 49, 91, 73;
    --bs-link-hover-color: var(--khas-accent-hover);
    --bs-link-hover-color-rgb: 36, 69, 53;
    --bs-tertiary-bg: var(--khas-surface-sunken);
    --bs-focus-ring-color: rgba(49, 91, 73, 0.25);
}

/* 2. Base --------------------------------------------------------------------------------------------------- */

@media screen {
    body {
        background-color: var(--khas-page);
        color: var(--khas-ink);
    }
}

body {
    line-height: 1.55;
}

h1, h2, h3 {
    color: var(--khas-ink);
    font-weight: 650;
}

h1 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

h1:focus {
    outline: none;
}

h2 {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1rem;
}

a {
    text-underline-offset: 0.2em;
}

/* One focus style for everything that can be reached with the keyboard. */
a:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.action-menu-panel button:focus-visible {
    outline: 3px solid var(--khas-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.text-muted {
    color: var(--khas-muted) !important;
}

.text-pre-line {
    white-space: pre-line;
}

.measure-narrow {
    max-width: var(--khas-width-narrow);
}

.measure-form {
    max-width: var(--khas-width-form);
}

code {
    color: var(--khas-ink-soft);
}

.catalogue-number {
    font-family: var(--khas-font-mono);
    font-weight: 650;
    text-decoration: none;
}

/* 3. Bootstrap controls ------------------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-border-radius: var(--khas-radius-sm);
    --bs-btn-focus-box-shadow: none;
}

.btn-sm {
    --bs-btn-padding-x: 0.65rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: 0.85rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-font-size: 1.1rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--khas-accent);
    --bs-btn-border-color: var(--khas-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--khas-accent-hover);
    --bs-btn-hover-border-color: var(--khas-accent-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--khas-accent-hover);
    --bs-btn-active-border-color: var(--khas-accent-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--khas-accent);
    --bs-btn-disabled-border-color: var(--khas-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--khas-accent);
    --bs-btn-border-color: var(--khas-accent-muted);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--khas-accent);
    --bs-btn-hover-border-color: var(--khas-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--khas-accent-hover);
    --bs-btn-active-border-color: var(--khas-accent-hover);
    --bs-btn-disabled-color: var(--khas-muted);
    --bs-btn-disabled-border-color: var(--khas-border-strong);
}

/* Printing and exporting. */
.btn-outline-secondary {
    --bs-btn-color: var(--khas-ink-soft);
    --bs-btn-border-color: var(--khas-border-strong);
    --bs-btn-hover-color: var(--khas-ink);
    --bs-btn-hover-bg: var(--khas-neutral-soft);
    --bs-btn-hover-border-color: var(--khas-border-strong);
    --bs-btn-active-color: var(--khas-ink);
    --bs-btn-active-bg: var(--khas-neutral-soft);
    --bs-btn-active-border-color: var(--khas-border-strong);
    --bs-btn-disabled-color: var(--khas-muted);
    --bs-btn-disabled-border-color: var(--khas-border);
}

/* Destructive: outlined to start, solid only on the step that does it. */
.btn-outline-danger {
    --bs-btn-color: var(--khas-danger-ink);
    --bs-btn-border-color: var(--khas-danger-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--khas-danger-ink);
    --bs-btn-hover-border-color: var(--khas-danger-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--khas-danger-ink);
    --bs-btn-active-border-color: var(--khas-danger-ink);
}

.btn-danger {
    --bs-btn-bg: var(--khas-danger-ink);
    --bs-btn-border-color: var(--khas-danger-ink);
    --bs-btn-hover-bg: #85211b;
    --bs-btn-hover-border-color: #85211b;
    --bs-btn-active-bg: #85211b;
    --bs-btn-active-border-color: #85211b;
    --bs-btn-disabled-bg: var(--khas-danger-ink);
    --bs-btn-disabled-border-color: var(--khas-danger-ink);
}

/* Quiet: Cancel, Clear, Done. */
.btn-link {
    --bs-btn-color: var(--khas-accent);
    --bs-btn-hover-color: var(--khas-accent-hover);
    --bs-btn-active-color: var(--khas-accent-hover);
    --bs-btn-font-weight: 600;
}

.form-control,
.form-select,
.form-check-input {
    background-color: var(--khas-surface);
    border-color: var(--khas-control-border);
}

.form-control,
.form-select {
    border-color: var(--khas-control-border);
    border-radius: var(--khas-radius-sm);
    min-height: 2.65rem;
    color: var(--khas-ink);
}

.form-control-sm,
.form-select-sm {
    min-height: 2.25rem;
}

/* Fields take the same 3 px focus outline as links and buttons (keyboard walk-through, v1.23). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--khas-accent);
    box-shadow: none;
}

.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid var(--khas-focus);
    outline-offset: 1px;
}

.form-check-input:checked {
    background-color: var(--khas-accent);
    border-color: var(--khas-accent);
}

/* Example text in an empty box must not look like an answer: italic and a pale colour (about 3:1 on white). */
.form-control::placeholder {
    color: #8f958f;
    font-style: italic;
    opacity: 1;
}

.form-label {
    color: var(--khas-ink-soft);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.form-check-label {
    font-size: 0.9rem;
}

/* A required answer's label ends in a red asterisk. Screen readers skip the asterisk (empty alternative text)
   because the box itself carries aria-required. */
.form-label.required::after,
.required-header::after {
    content: " *" / "";
    color: var(--bs-form-invalid-color);
    font-weight: 600;
}

legend.form-label {
    float: none;
}

.badge {
    border-radius: 0.35rem;
    padding: 0.35rem 0.55rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
}

/* Badges have three meanings (v1.23 D7): neutral (what it is), accent (classification, accessioned) and
   warning (a state to notice: superseded, uncertain, inactive, private). */
.badge-neutral {
    color: var(--khas-neutral-ink) !important;
    background-color: var(--khas-neutral-soft) !important;
    border: 1px solid transparent !important;
}

.badge-accent {
    color: var(--khas-accent) !important;
    background-color: var(--khas-accent-soft) !important;
    border: 1px solid var(--khas-accent-soft-border) !important;
}

.badge-warning {
    color: var(--khas-warning-ink) !important;
    background-color: var(--khas-warning-soft) !important;
    border: 1px solid transparent !important;
}

.alert {
    --bs-alert-border-radius: var(--khas-radius-sm);
}

.alert-info {
    --bs-alert-color: var(--khas-accent);
    --bs-alert-bg: #edf3e9;
    --bs-alert-border-color: var(--khas-accent-soft-border);
    --bs-alert-link-color: var(--khas-accent-hover);
}

.card {
    --bs-card-border-color: var(--khas-border);
    --bs-card-border-radius: var(--khas-radius);
    --bs-card-cap-bg: #f4f6f0;
    --bs-card-color: var(--khas-ink);
    --bs-card-bg: var(--khas-surface);
    --bs-card-spacer-x: var(--khas-section-pad);
    --bs-card-spacer-y: var(--khas-section-pad);
}

.list-group {
    --bs-list-group-color: var(--khas-ink);
    --bs-list-group-bg: var(--khas-surface);
    --bs-list-group-border-color: var(--khas-border);
    --bs-list-group-border-radius: var(--khas-radius);
    --bs-list-group-item-padding-x: 1.25rem;
    --bs-list-group-item-padding-y: 1rem;
    --bs-list-group-action-color: var(--khas-accent);
    --bs-list-group-action-hover-color: var(--khas-accent-hover);
    --bs-list-group-action-hover-bg: var(--khas-accent-tint);
    --bs-list-group-action-active-bg: var(--khas-accent-soft);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--khas-accent);
    --bs-list-group-active-border-color: var(--khas-accent);
}

.progress {
    --bs-progress-bg: var(--khas-accent-soft);
    --bs-progress-bar-bg: var(--khas-accent);
}

.lead {
    font-size: 1.05rem;
    max-width: 70ch;
}

dt {
    font-size: 0.85rem;
    color: var(--khas-muted);
    font-weight: 600;
}

dd {
    overflow-wrap: anywhere;
    margin-bottom: 0.75rem;
}

summary {
    color: var(--khas-accent);
    font-weight: 600;
    cursor: pointer;
}

/* 4. Navigation and page frame ------------------------------------------------------------------------------ */

.bg-khas {
    background-color: var(--khas-nav);
}

.khas-navigation {
    --bs-navbar-color: var(--khas-nav-text);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    border-bottom: 1px solid var(--khas-nav-border);
}

/* The brand is the KHAS mark (img/khas-mark.svg), with the name beside it where the bar has room. */
.khas-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0;
}

.khas-brand img {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
}

.khas-navigation .nav-link {
    border-radius: 0.35rem;
    white-space: nowrap;
}

/* On the dark bar the focus outline is white, so it can be seen. */
.khas-navigation a:focus-visible,
.khas-navigation .nav-link:focus-visible,
.khas-navigation .btn:focus-visible,
.khas-navigation summary:focus-visible,
.khas-navigation .form-control:focus-visible,
.khas-navigation .navbar-toggler:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: none;
}

/* The menu button gets a soft tint on hover, like the outline buttons beside it, but keeps its white lines visible. */
.khas-navigation .navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* Bootstrap rings the menu button on any focus, including a mouse click; the keyboard outline above is enough. */
.khas-navigation .navbar-toggler:focus:not(:focus-visible) {
    box-shadow: none;
}

.khas-navigation .nav-link.active {
    background-color: var(--khas-nav-active);
    font-weight: 600;
}

/* The bar's layout is measured on the bar, not the window (design v1.36), so it can make room for the help panel.
   The one row needs about 1,210 px (an Administrator's bar, with Administration), so it starts at 76rem (1,216 px)
   of bar width. The bar excludes any scrollbar, so with the panel closed this is a window of about 1,230 px. */
.navigation-frame {
    container: nav / inline-size;
}

/* Narrow bar: the opened menu starts clear of the menu button's focus outline. */
@container nav (max-width: 75.99rem) {
    .khas-navigation .navbar-collapse {
        margin-top: 0.5rem;
    }
}

.khas-navigation .form-control {
    border-color: var(--khas-border-strong);
    border-radius: 0.35rem;
}

/* The account menu (v1.23 D9): the user's name opens Your account and Sign out. */
.navigation-account-menu > summary {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.khas-navigation .navigation-go .form-control {
    width: 8.5rem;
}

@container nav (max-width: 35.98rem) {
    .navigation-account-menu > summary {
        max-width: 8rem;
    }
}

/* Wide bar: the whole menu in one row (design v1.15; from 75rem since v1.23 D9; 76rem of the bar's width since v1.36). */
@container nav (min-width: 76rem) {
    .khas-navigation,
    .khas-navigation > .container-fluid {
        flex-wrap: nowrap;
    }

    .khas-navigation .navbar-toggler {
        display: none;
    }

    /* Help and the account menu sit outside the collapsible menu, so they still show when it is collapsed; here they go last. */
    .khas-navigation .navigation-tools {
        order: 1;
        margin-left: 0.75rem;
    }

    .khas-navigation .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .khas-navigation .navbar-nav {
        flex-direction: row;
        flex-shrink: 0;
    }

    .khas-navigation .nav-link {
        padding-right: 0.45rem;
        padding-left: 0.45rem;
    }

    .khas-navigation form {
        flex-shrink: 0;
    }
}

/* The name shows beside the mark only on a roomy one-row bar (88rem and over); elsewhere it is for screen readers only. */
@container nav (max-width: 87.98rem) {
    .khas-navigation .khas-brand-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Between 76rem and 88rem the one-row bar is tight: slightly smaller text and padding, so Help and the account
   menu still fit at 1,216 px. */
@container nav (min-width: 76rem) and (max-width: 87.98rem) {
    .khas-navigation .navbar-brand {
        font-size: 1.1rem;
        margin-right: 0.5rem;
    }

    .khas-navigation .nav-link {
        font-size: 0.92rem;
        padding-right: 0.35rem;
        padding-left: 0.35rem;
    }

    .khas-navigation .navigation-go .form-control {
        width: 7rem;
    }

    .navigation-account-menu > summary {
        max-width: 8rem;
    }
}

.khas-navigation .help-button {
    white-space: nowrap;
}

/* Pages sit straight on the page background (v1.23 D3); content groups are white surfaces. */
main.container-lg {
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 1.5rem) 3rem;
}

/* Page layouts are measured on the page, not the window (design v1.35), so a page beside the help panel lays out as it
   would in a window that narrow. Page CSS that depends on width uses @container page, never @media.
   The thresholds are Bootstrap's breakpoints less the page's side padding: 33.75rem (sm, 576 px window), 45rem (md, 768),
   57rem (lg, 992) and 68.25rem (xl, 1,200). With the panel closed, pages lay out as they would with Bootstrap's own rules. */
#main-content {
    container: page / inline-size;
}

/* Bootstrap's col-sm/md/lg-* follow the window; inside the page they follow the page instead. The id outranks
   Bootstrap's rules, so these start every responsive column full width and set its width from the page's.
   Only the widths the pages use are listed: a page using another (say col-md-7) needs it added here. */
#main-content :is([class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"]) {
    flex: 0 0 auto;
    width: 100%;
}

/* The one fixed column used alongside a responsive one (the audit log's filters). */
#main-content .col-6 {
    width: 50%;
}

@container page (min-width: 33.75rem) {
    #main-content .col-sm-4 { width: 33.33333333%; }
    #main-content .col-sm-5 { width: 41.66666667%; }
    #main-content .col-sm-6 { width: 50%; }
    #main-content .col-sm-7 { width: 58.33333333%; }
    #main-content .col-sm-8 { width: 66.66666667%; }
}

@container page (min-width: 45rem) {
    #main-content .col-md-auto { width: auto; }
    #main-content .col-md-2 { width: 16.66666667%; }
    #main-content .col-md-3 { width: 25%; }
    #main-content .col-md-4 { width: 33.33333333%; }
    #main-content .col-md-5 { width: 41.66666667%; }
    #main-content .col-md-6 { width: 50%; }
    #main-content .col-md-8 { width: 66.66666667%; }
    #main-content .col-md-9 { width: 75%; }
}

@container page (min-width: 57rem) {
    #main-content .col-lg-3 { width: 25%; }
}

.catalogue-theme {
    color: var(--khas-ink);
}

/* Public pages (sign in, errors): one narrow white panel. */
.catalogue-public {
    max-width: var(--khas-width-narrow);
    margin: 1rem auto;
    padding: clamp(1.25rem, 4vw, 2rem);
    background: var(--khas-surface);
    border: 1px solid var(--khas-border);
    border-radius: var(--khas-radius);
}

/* 5. Design-system components (v1.23) ----------------------------------------------------------------------- */

/* PageHeader */
.page-header {
    margin-bottom: var(--khas-space-5);
}

.page-back {
    font-size: 0.875rem;
    margin-bottom: var(--khas-space-4);
}

.page-back a {
    text-decoration: none;
}

.page-header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--khas-space-4) var(--khas-space-5);
}

.page-header-text {
    flex: 1 1 22rem;
    min-width: 0;
}

.page-header-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--khas-space-2) var(--khas-space-3);
}

.page-header h1 {
    margin: 0;
    overflow-wrap: anywhere;
}

.page-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--khas-space-2);
}

.page-header-intro {
    color: var(--khas-muted);
    max-width: 65ch;
    margin: var(--khas-space-2) 0 0;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--khas-space-2);
}

@container page (max-width: 33.74rem) {
    .page-header-actions {
        width: 100%;
    }
}

/* RecordSection */
.record-section {
    background: var(--khas-surface);
    border: 1px solid var(--khas-border);
    border-radius: var(--khas-radius);
    padding: var(--khas-section-pad);
    margin-bottom: var(--khas-space-4);
}

.record-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--khas-space-2) var(--khas-space-4);
    margin-bottom: var(--khas-space-3);
}

.record-section-head > h2,
.record-section-head > h3 {
    margin: 0;
}

/* The heading (or the summary, when there is one) takes up the spare room, which keeps the buttons at the right
   while they share its line. When the buttons wrap onto their own line they start at the left, under the heading. */
.record-section-head > :is(h2, h3):not(:has(+ .record-section-summary)) {
    flex: 1 1 auto;
}

.record-section-summary {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--khas-ink);
    overflow-wrap: anywhere;
}

.record-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--khas-space-2);
}

.record-section-intro {
    color: var(--khas-muted);
    font-size: 0.875rem;
    max-width: 75ch;
    margin-bottom: var(--khas-space-3);
}

.record-section > :last-child,
.record-section-body > :last-child {
    margin-bottom: 0;
}

/* A section inside a section (e.g. the people in "Where it came from"). */
.record-section .record-section {
    border: 0;
    border-top: 1px solid var(--khas-border);
    border-radius: 0;
    padding: var(--khas-space-4) 0 0;
    margin: var(--khas-space-4) 0 0;
}

/* Collapsible sections: the heading row is the button that opens them. */
.record-section-collapsible > summary {
    list-style: none;
    margin-bottom: 0;
    color: var(--khas-ink);
}

.record-section-collapsible > summary::-webkit-details-marker {
    display: none;
}

.record-section-collapsible > summary::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--khas-accent);
    border-bottom: 2px solid var(--khas-accent);
    transform: rotate(-45deg);
    transition: transform 0.15s;
}

.record-section-collapsible[open] > summary::before {
    transform: rotate(45deg);
}

.record-section-collapsible[open] > summary {
    margin-bottom: var(--khas-space-3);
}

/* Two sections side by side on wide screens (e.g. ownership and accession), stacked otherwise. */
.record-section-pair {
    display: grid;
    gap: 0 var(--khas-space-4);
}

@container page (min-width: 68.25rem) {
    .record-section-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #main-content .record-section-pair .col-md-6 {
        width: 100%;
    }
}

/* FactList */
.fact-list {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: var(--khas-space-2) var(--khas-space-5);
    margin: 0;
}

.fact-list dt {
    padding-top: 0.1rem;
}

.fact-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@container page (max-width: 33.74rem) {
    .fact-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .fact-list dd {
        margin-bottom: var(--khas-space-3);
    }
}

/* EditArea */
.edit-area {
    background: var(--khas-surface-sunken);
    border-radius: var(--khas-radius-sm);
    padding: var(--khas-space-4) var(--khas-section-pad);
    margin: var(--khas-space-3) 0;
}

.edit-area-intro {
    margin-bottom: var(--khas-space-3);
}

.edit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--khas-space-2);
    margin-top: var(--khas-space-4);
}

/* Something rarely needed inside a section, e.g. "Location history": a quiet line that opens on demand. */
.record-subdetails {
    border-top: 1px solid var(--khas-border-soft);
    padding-top: var(--khas-space-3);
    margin-top: var(--khas-space-3);
}

.record-subdetails > summary {
    font-size: 0.9rem;
}

.record-subdetails[open] > summary {
    margin-bottom: var(--khas-space-2);
}

/* DangerZone */
.danger-zone {
    border: 1px solid var(--khas-danger-border);
    border-radius: var(--khas-radius);
    background: var(--khas-surface);
    margin: var(--khas-space-5) 0 var(--khas-space-4);
}

.danger-zone > summary {
    padding: var(--khas-space-3) var(--khas-section-pad);
    color: var(--khas-danger-ink);
}

.danger-zone-hint {
    color: var(--khas-muted);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: var(--khas-space-2);
}

.danger-zone-body {
    padding: 0 var(--khas-section-pad) var(--khas-section-pad);
}

.danger-zone-item {
    border-top: 1px solid var(--khas-border);
    padding-top: var(--khas-space-4);
    max-width: var(--khas-width-narrow);
}

.danger-zone-item + .danger-zone-item {
    margin-top: var(--khas-space-5);
}

.danger-zone-item > :last-child {
    margin-bottom: 0;
}

.danger-zone-item p {
    font-size: 0.9rem;
}

/* EmptyState */
.empty-state p {
    color: var(--khas-muted);
    margin-bottom: 0;
}

.empty-state-action {
    margin-top: var(--khas-space-3);
}

/* Banners for a lasting state of the record (superseded, merged, inactive). */
.record-banner {
    margin-bottom: var(--khas-space-4);
}

/* Private contact details (Administrators and Editors only): the same tint wherever they appear (§3.4). */
.fact-list dd.fact-private,
.private-details {
    background: var(--khas-private-soft);
    border-left: 3px solid var(--khas-private-border);
    border-radius: 0 var(--khas-radius-sm) var(--khas-radius-sm) 0;
    padding: var(--khas-space-2) var(--khas-space-3);
}

/* A whole section of private details, e.g. a contact's email, phone and address. */
.record-section.record-section-private {
    background: var(--khas-private-soft);
    border-color: var(--khas-private-border);
}

/* A list framed inside a section needs no space of its own below it. */
.record-section .results-frame {
    margin-bottom: 0;
}

/* ActionMenu: one button opening a short list of choices (e.g. the ways of printing labels). */
.action-menu {
    position: relative;
    display: inline-block;
}

.action-menu > summary {
    list-style: none;
}

.action-menu > summary::-webkit-details-marker {
    display: none;
}

.action-menu > summary::after {
    content: "";
    display: inline-block;
    margin-left: 0.4em;
    vertical-align: 0.15em;
    border-top: 0.35em solid currentColor;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
}

.action-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 15rem;
    background: var(--khas-surface);
    border: 1px solid var(--khas-border);
    border-radius: var(--khas-radius-sm);
    box-shadow: 0 0.5rem 1.25rem rgb(38 51 46 / 0.12);
    padding: var(--khas-space-2) 0;
}

.action-menu-heading {
    color: var(--khas-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: var(--khas-space-2) var(--khas-space-3) var(--khas-space-1);
}

.action-menu-panel a,
.action-menu-panel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--khas-space-1) var(--khas-space-3);
    color: var(--khas-ink);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 0.9rem;
}

.action-menu-panel a:hover,
.action-menu-panel button:hover {
    background: var(--khas-accent-tint);
}

.action-menu-panel form {
    display: block !important;
}

/* 6. Lists and tables --------------------------------------------------------------------------------------- */

.catalogue-filters,
.results-frame,
.catalogue-empty {
    background: var(--khas-surface);
    border: 1px solid var(--khas-border);
    border-radius: var(--khas-radius);
    margin-bottom: var(--khas-space-5);
}

.catalogue-filters,
.catalogue-empty {
    padding: var(--khas-section-pad);
}

.catalogue-filters h2,
.catalogue-empty h2 {
    font-size: 1.05rem;
    margin-bottom: var(--khas-space-4);
}

.catalogue-filters .form-check {
    margin-bottom: 0.4rem;
}

.catalogue-more-filters {
    border-top: 1px solid var(--khas-border);
    padding-top: var(--khas-space-4);
}

.catalogue-more-filters summary {
    font-size: 0.9rem;
}

.catalogue-more-filters[open] > summary {
    margin-bottom: var(--khas-space-2);
}

.catalogue-filter-hint {
    display: inline-block;
    color: var(--khas-muted);
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: var(--khas-space-2);
}

.results-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--khas-space-2);
    border-bottom: 1px solid var(--khas-border);
    padding: var(--khas-space-4) 1.25rem;
    font-size: 0.9rem;
    color: var(--khas-muted);
}

.results-toolbar p {
    margin: 0 auto 0 0;
}

/* Several buttons wrap as one group: on the right beside the count while they all fit there, otherwise on their own
   lines below it, from the left, rather than the first button staying beside the count and the rest wrapping under it. */
.results-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--khas-space-2);
}

.results-footer {
    border-top: 1px solid var(--khas-border);
    padding: var(--khas-space-3) 1.25rem;
}

.results-footer > nav,
.results-footer > p {
    margin: 0 !important;
}

.table {
    --bs-table-color: var(--khas-ink);
    --bs-table-bg: var(--khas-surface);
    --bs-table-hover-bg: var(--khas-accent-tint);
    --bs-table-hover-color: var(--khas-ink);
    --bs-table-border-color: var(--khas-border-soft);
    font-size: 0.9rem;
}

.table th {
    background: var(--khas-surface-header);
    color: #59645b;
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
}

.catalogue-theme .table th,
.catalogue-theme .table td {
    padding: 0.85rem 1rem;
}

.catalogue-theme .table-sm th,
.catalogue-theme .table-sm td {
    padding: 0.5rem 0.75rem;
}

.results-frame .table {
    margin-bottom: 0;
}

.catalogue-object-name {
    font-weight: 600;
    min-width: 12rem;
}

.catalogue-accession {
    display: block;
    color: var(--khas-muted);
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

/* Keeps absolutely positioned content (visually hidden column headings) inside the scrolling table, so a wide table
   scrolls in its own box and never widens the page on a narrow screen. */
.table-responsive {
    position: relative;
}

@container page (max-width: 33.74rem) {
    .catalogue-theme .table th,
    .catalogue-theme .table td {
        padding: 0.75rem;
    }
}

/* Lists that show each row as a labelled card when narrow instead of scrolling sideways.
   Each cell carries data-label with its column heading. Unlabelled cells: table-stack-title leads the card,
   table-stack-select (a row checkbox) sits in the card's top-right corner, table-stack-actions holds buttons.
   A labelled cell with table-stack-required shows " *" after its label, like a required-header column heading.
   In the header, only table-stack-keep cells (e.g. "select all") stay visible; table-stack-only text shows only on cards.
   The rows become cards when the list's results frame is narrower than 62rem, not only on a phone. It is measured on
   the frame, like the quick entry grid, so opening the help panel beside the page turns the rows into cards too; a
   table-stack table must therefore sit in a results frame (ResultsFrame, ObjectTable or a .results-frame div). */
.table-stack-only {
    display: none;
}

.results-frame:has(.table-stack) {
    container-type: inline-size;
}

@container (max-width: 61.98rem) {
    .table.table-stack > thead > tr > th:not(.table-stack-keep) {
        display: none;
    }

    .table.table-stack,
    .table.table-stack > thead,
    .table.table-stack > thead > tr,
    .table.table-stack > tbody,
    .table.table-stack > tbody > tr,
    .table.table-stack > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .table.table-stack > thead > tr:not(:has(.table-stack-keep)) {
        display: none;
    }

    .table.table-stack > thead > tr > th.table-stack-keep {
        display: block;
        padding: 0 0.25rem 0.75rem;
        background: none;
        border: 0;
    }

    .table.table-stack .table-stack-only {
        display: inline;
    }

    /* The rows become separate white cards on a tinted, padded strip, so the gaps between them show
       whether the list sits on the page or inside a white panel (e.g. the Inventory results). */
    .table-responsive:has(> .table-stack) {
        background: var(--khas-surface-sunken);
        border: 0;
        border-radius: var(--khas-radius);
        padding: 0.75rem;
    }

    .results-frame > .table-responsive:has(> .table-stack) {
        border-radius: 0;
    }

    .table.table-stack {
        background: none;
    }

    .table.table-stack > tbody > tr:last-child {
        margin-bottom: 0;
    }

    .table.table-stack > tbody > tr {
        position: relative;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0;
        background: var(--khas-surface);
        border: 1px solid var(--khas-border);
        border-radius: 0.5rem;
    }

    .catalogue-theme .table.table-stack > tbody > tr > td {
        position: relative;
        border: 0;
        padding: 0.1rem 0.75rem;
        line-height: 1.3;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    /* table-hover helps the eye follow a wide row, but a card is not clickable, so it gets no hover tint. */
    .table.table-hover.table-stack > tbody > tr:hover > * {
        --bs-table-bg-state: initial;
        --bs-table-color-state: initial;
    }

    .table.table-stack > tbody > tr > td[data-label]:empty {
        display: none;
    }

    .catalogue-theme .table.table-stack > tbody > tr > td[data-label] {
        padding-left: 9rem;
    }

    .table.table-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        width: 7.75rem;
        color: var(--khas-muted);
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.3rem;
        overflow-wrap: normal;
    }

    /* A cell holding a small input or select (e.g. the Split rows): the label lines up with the box beside it. */
    .table.table-stack > tbody > tr > td[data-label]:has(> .form-control-sm, > .form-select-sm)::before {
        line-height: calc(1.5 * 0.875rem + 0.5rem + 2px);
    }

    .table.table-stack > tbody > tr > td.table-stack-required[data-label]::before {
        content: attr(data-label) " *";
    }

    .table.table-stack > tbody > tr > td.text-nowrap {
        white-space: normal !important;
    }

    .catalogue-theme .table.table-stack > tbody > tr > td.table-stack-title {
        font-size: 1.05rem;
        padding-bottom: 0.3rem;
        padding-right: 3rem;
    }

    /* Raised above the cells after it: they are positioned too and have the table's white background, so they would cover it. */
    .table.table-stack > tbody > tr > td.table-stack-select {
        position: absolute;
        top: 0.5rem;
        right: 0;
        width: auto;
        z-index: 1;
    }

    .catalogue-theme .table.table-stack > tbody > tr > td.table-stack-actions {
        padding-top: 0.4rem;
    }
}

.catalogue-form {
    max-width: var(--khas-width-form);
}

/* A new-record form on its own white surface, its buttons at the foot (§3.4). */
.form-surface {
    background: var(--khas-surface);
    border: 1px solid var(--khas-border);
    border-radius: var(--khas-radius);
    padding: var(--khas-section-pad);
    margin-bottom: var(--khas-space-5);
}

/* Related questions grouped under a heading, e.g. "About the object" and "Where it is". */
.form-fieldset {
    margin: 0 0 var(--khas-space-5);
}

.form-fieldset > legend {
    font-size: 1rem;
    font-weight: 650;
    margin-bottom: var(--khas-space-3);
}

/* "More details": the optional questions, collapsed. */
.form-more {
    border-top: 1px solid var(--khas-border-soft);
    padding-top: var(--khas-space-4);
}

.form-more > summary {
    font-weight: 650;
}

/* Quick entry: "Where are they?" has its "In a place / Into a storage container" choice beside the label, so the box below
   lines up with "From an Entry or box". Everything else in the column takes a full line. */
.quick-entry-where {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--khas-space-4);
}

.quick-entry-where > * {
    flex: 0 0 100%;
}

.quick-entry-where > .form-label,
.quick-entry-where > [role=radiogroup] {
    flex: 0 0 auto;
}

/* No taller than the label beside it, or the box below drops out of line. */
.quick-entry-where > [role=radiogroup] {
    margin-bottom: 0 !important;
}

.quick-entry-where > [role=radiogroup] > .form-check {
    min-height: 0;
    margin-bottom: 0;
}

/* Sorting a box: the place picker under "Somewhere else", lined up with that option's text. */
.quick-entry-where-else {
    padding-left: 1.5em;
    margin-top: var(--khas-space-1);
}

/* Quick entry: the grid's own buttons under it, Save last on the right. */
.quick-entry-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--khas-space-2);
    margin: calc(-1 * var(--khas-space-3)) 0 var(--khas-space-5);
}

.quick-entry-actions > .btn-primary {
    margin-left: auto;
}

.results-frame[data-quickentry-grid] .table th:first-child,
.results-frame[data-quickentry-grid] .table td:first-child {
    padding-left: var(--khas-space-3);
}

/* When the grid is narrower than 75rem each row becomes a labelled card, like table-stack but much sooner: the grid
   has seven columns of inputs, which only fit comfortably on a wide screen. It is measured on the grid itself, not
   the window, so opening the help panel beside the page turns the rows into cards too. A row's errors join the foot
   of its card. */
.quick-entry-grid-host {
    container-type: inline-size;
}

.quick-entry-card-only {
    display: none;
}

@container (max-width: 74.98rem) {
    .quick-entry-grid > thead {
        display: none;
    }

    .quick-entry-grid,
    .quick-entry-grid > tbody,
    .quick-entry-grid > tbody > tr,
    .quick-entry-grid > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .quick-entry-grid .quick-entry-card-only {
        display: inline;
    }

    .results-frame[data-quickentry-grid] {
        background: var(--khas-surface-sunken);
        border: 0;
        padding: 0.75rem;
    }

    .table.quick-entry-grid {
        background: none;
    }

    .quick-entry-grid > tbody > tr {
        margin-bottom: 0.75rem;
        padding: 0.5rem 0;
        background: var(--khas-surface);
        border: 1px solid var(--khas-border);
        border-radius: 0.5rem;
    }

    .quick-entry-grid > tbody > tr:last-child {
        margin-bottom: 0;
    }

    .catalogue-theme .table.quick-entry-grid > tbody > tr > td,
    .results-frame[data-quickentry-grid] .table.quick-entry-grid > tbody > tr > td:first-child {
        position: relative;
        border: 0;
        padding: 0.2rem 0.75rem;
        line-height: 1.3;
        white-space: normal !important;
    }

    .catalogue-theme .table.quick-entry-grid > tbody > tr > td[data-label] {
        padding-left: 9rem;
    }

    .quick-entry-grid > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        width: 7.75rem;
        color: var(--khas-muted);
        font-size: 0.85rem;
        font-weight: 600;
        /* The height of a small input, so the label lines up with it. */
        line-height: calc(1.5 * 0.875rem + 0.5rem + 2px);
    }

    .quick-entry-grid > tbody > tr > td.quick-entry-required[data-label]::before {
        content: attr(data-label) " *";
    }

    .catalogue-theme .table.quick-entry-grid > tbody > tr > td.quick-entry-row-title {
        font-size: 0.95rem;
        font-weight: 600;
        padding-bottom: 0.3rem;
    }

    .catalogue-theme .table.quick-entry-grid > tbody > tr > td.quick-entry-row-actions {
        padding-top: 0.4rem;
    }

    .quick-entry-grid > tbody > tr:has(+ tr.quick-entry-error) {
        margin-bottom: 0;
        border-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .quick-entry-grid > tbody > tr.quick-entry-error {
        padding: 0 0 0.5rem;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .quick-entry-grid > tbody > tr.quick-entry-error:has(+ tr.quick-entry-error) {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
        border-radius: 0;
    }

    .quick-entry-grid > tbody > tr.quick-entry-error > td:empty {
        display: none;
    }
}

/* Dashboard shortcuts: the main action, then the others as a quieter group. */
.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--khas-space-3) var(--khas-space-5);
    margin-bottom: var(--khas-space-5);
}

.dashboard-actions-more {
    display: flex;
    flex-wrap: wrap;
    gap: var(--khas-space-2);
}

.dashboard-lists {
    margin-top: var(--khas-space-5);
}

.catalogue-overview .display-6 {
    color: var(--khas-accent);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.catalogue-overview a.card:hover {
    border-color: var(--khas-accent-muted);
    background: var(--khas-accent-tint);
}

.catalogue-admin-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}

.catalogue-admin-links .list-group-item {
    border: 1px solid var(--khas-border);
    border-radius: var(--khas-radius);
}

.catalogue-print-options {
    margin: var(--khas-space-4) auto;
    background: var(--khas-surface);
    border: 1px solid var(--khas-border);
    border-radius: var(--khas-radius);
    padding: var(--khas-section-pad);
}

/* 7. Record pages ------------------------------------------------------------------------------------------- */

/* Entry and object pages: the record as one paper slip; a dashed tear-off line parts its heading from its details. */
.record-slip {
    background: var(--khas-surface);
    border: 1px solid var(--khas-border);
    border-radius: var(--khas-radius);
    margin-bottom: var(--khas-space-4);
}

.record-slip-head {
    padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2rem) 1.25rem;
}

.record-slip-ref {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    color: var(--khas-muted);
    margin-bottom: 0.6rem;
}

/* The kind of record, its number and badges take up the spare room, which keeps the buttons at the right while
   they share the line. When the buttons wrap onto their own line they start at the left (as in .record-section-head). */
.record-slip-ref-text {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.record-slip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.record-slip-ref .catalogue-number {
    color: var(--khas-accent);
    font-size: 1.1rem;
    margin-left: 0.2rem;
}

h1.record-slip-title {
    max-width: 30ch;
    overflow-wrap: anywhere;
    margin-bottom: 0.75rem;
}

.record-slip-head .record-explainer {
    margin-bottom: 0;
}

.record-slip-body {
    border-top: 1px dashed #c9cbc0;
    padding: 1.25rem clamp(1rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.5rem);
}

.record-slip-body > h2 {
    margin-bottom: 0.5rem;
}

.record-slip-identity {
    display: flex;
    gap: 1rem 1.25rem;
    align-items: flex-start;
}

.record-slip-identity > div {
    flex: 1 1 auto;
    min-width: 0;
}

.catalogue-photo {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--khas-radius);
    border: 1px solid var(--khas-border);
}

@container page (max-width: 33.74rem) {
    .record-slip-identity .catalogue-photo {
        width: 4rem;
        height: 4rem;
    }
}

/* The key facts of a record at a glance, in the slip's heading (v1.23 D4): where it is, who owns it, and so on. */
.record-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--khas-space-3) var(--khas-space-5);
    margin: var(--khas-space-2) 0 var(--khas-space-4);
    padding: var(--khas-space-3) 0;
    border-top: 1px solid var(--khas-border-soft);
    border-bottom: 1px solid var(--khas-border-soft);
}

.record-summary > div {
    min-width: 0;
}

.record-summary dt {
    font-size: 0.8rem;
    margin-bottom: 0.1rem;
}

.record-summary dd {
    margin: 0;
    font-weight: 500;
}

.record-summary dd a {
    text-decoration: none;
}

.record-summary dd a:hover {
    text-decoration: underline;
}

.record-summary-detail {
    display: block;
    color: var(--khas-muted);
    font-size: 0.85rem;
    font-weight: 400;
}

/* "On this page" links to a record's sections. */
.record-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--khas-space-1) var(--khas-space-4);
    margin-top: var(--khas-space-3);
    font-size: 0.875rem;
}

.record-jump-label {
    color: var(--khas-muted);
    font-weight: 600;
}

.record-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--khas-space-1) var(--khas-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Jump links land with the section's heading clear of the top of the window. */
.record-section,
.danger-zone {
    scroll-margin-top: var(--khas-space-4);
}

/* Photo thumbnails in "Photos and documents". */
.attachment-thumb {
    width: 10rem;
}

.attachment-thumb img {
    aspect-ratio: 1;
    object-fit: cover;
}

/* Add photos (design v1.33): the file inputs are hidden and their labels look like buttons, so the keyboard focus ring goes on
   the label. Take a photo is offered only where there is no mouse, i.e. phones and tablets, which have a camera to open. */
.photo-pickers input:focus-visible + label {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .photo-camera {
        display: none !important;
    }
}

/* A collapsible block inside a record page that is not a section of its own (e.g. Make inactive outside Administrator actions). */
.catalogue-detail details:not(.record-section):not(.record-subdetails):not(.danger-zone):not(.catalogue-more-filters):not(.action-menu):not(.form-more) {
    border-top: 1px solid var(--khas-border);
    padding: 1rem 0;
}

.catalogue-detail details[open]:not(.record-section):not(.record-subdetails):not(.action-menu):not(.form-more) > summary {
    margin-bottom: 1rem;
}

.catalogue-detail .catalogue-edit {
    max-width: var(--khas-width-form);
}

@container page (max-width: 33.74rem) {
    .catalogue-detail .card-body {
        padding: 1rem 0;
    }
}

/* 8. Row layouts -------------------------------------------------------------------------------------------- */

/* Storage & locations: each row has its name and details on the left and its buttons in a right-aligned column,
   so the buttons line up from row to row whatever the length of the name. --depth indents the name only.
   When the list is narrow, rows become white cards on a tinted strip (like the stacked tables) with the
   buttons on their own line at the bottom of each card. */
.location-tree-frame {
    container-type: inline-size;
}

.location-tree .location-row {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    border-left-width: 0;
    border-right-width: 0;
}

.location-row-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: calc(var(--depth, 0) * 1.5rem);
    overflow-wrap: anywhere;
}

.location-row-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Deactivate and Reactivate take the same space, so the buttons beside them don't shift. */
.location-row-actions .location-toggle {
    min-width: 6.5rem;
}

@container (max-width: 44rem) {
    .location-tree {
        background: var(--khas-surface-sunken);
        border-radius: 0.75rem;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .location-tree .location-row {
        flex-direction: column;
        align-items: stretch;
        margin-left: calc(var(--depth, 0) * 0.75rem);
        padding: 0.6rem 0.75rem;
        background: var(--khas-surface);
        border: 1px solid var(--khas-border);
        border-radius: 0.5rem;
    }

    .location-tree .location-row + .location-row {
        border-top-width: 1px;
    }

    .location-row-text {
        padding-left: 0;
        font-size: 1.05rem;
    }

    .location-row-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* People and organisations linked to an Entry or object: laid out like Storage & locations, with the name and role
   on the left and the buttons in a right-aligned column. When narrow, rows become white cards on a tinted strip
   with the buttons on their own line. */
.role-list-frame {
    container-type: inline-size;
}

/* The Entry's "not linked yet" reminders: text on the left, every button lined up on the right, a rule between rows. */
.people-reminders > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.4rem 0;
}

.people-reminders > li + li {
    border-top: 1px solid var(--bs-alert-border-color);
}

.people-reminders > li > span {
    flex: 1 1 20rem;
}

.people-reminder-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.role-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

.role-list:empty {
    display: none;
}

.role-row {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--khas-border);
}

.role-row-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.role-row-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0.5rem;
}

@container (max-width: 36rem) {
    .role-list {
        background: var(--khas-surface-sunken);
        border-radius: 0.75rem;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .role-row {
        flex-direction: column;
        align-items: stretch;
        padding: 0.6rem 0.75rem;
        background: var(--khas-surface);
        border: 1px solid var(--khas-border);
        border-radius: 0.5rem;
    }

    .role-row-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* 9. Help, back to top, errors ------------------------------------------------------------------------------ */

/* Help (design §9.4): a non-modal panel on the right, and the same text as a page. */
.help-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.help-panel {
    --bs-offcanvas-width: 26rem;
    color: var(--khas-ink);
    background: #fbfaf6;
    box-shadow: -0.5rem 0 1.5rem rgba(38, 51, 46, 0.12);
}

.help-panel .offcanvas-header {
    border-bottom: 1px solid var(--khas-border);
}

.help-content {
    line-height: 1.6;
}

.help-content h2 {
    font-size: 1rem;
    margin-top: 1.25rem;
}

.help-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    font-size: 0.925rem;
}

.help-content th,
.help-content td {
    border-bottom: 1px solid var(--khas-border);
    padding: 0.35rem 0.5rem 0.35rem 0;
    vertical-align: top;
    text-align: left;
}

.help-content code {
    color: inherit;
    font-size: 0.95em;
}

.help-page {
    max-width: var(--khas-width-form);
}

.help-page .help-content {
    background: var(--khas-surface);
    border: 1px solid var(--khas-border);
    border-radius: var(--khas-radius);
    padding: var(--khas-section-pad);
}

.help-page .help-content > :last-child {
    margin-bottom: 0;
}

/* From 62rem, make room for the panel rather than covering the page (design v1.35); narrower windows have no room for
   both, so there it covers the page. The panel is narrower below 75rem so the page keeps about 40rem. The width must be
   auto: container-lg's width: 100% would keep the page full width and the browser would drop the margin, leaving the
   panel over the page and the page's layouts (measured on the page, #main-content) none the narrower.
   The navigation bar makes the same room (design v1.36), so Help, the account menu and the menu button stay in view. */
@media (min-width: 62rem) {
    main.help-open {
        width: auto;
        margin-right: 22rem;
    }

    .navigation-frame.help-open {
        margin-right: 22rem;
    }

    .help-panel {
        --bs-offcanvas-width: 22rem;
    }
}

@media (min-width: 75rem) {
    main.help-open,
    .navigation-frame.help-open {
        margin-right: 26rem;
    }

    .help-panel {
        --bs-offcanvas-width: 26rem;
    }
}

/* Suggestions while typing (TypeAhead, design v1.38): a list under the box, over whatever is below it, at least wide enough to
   read a number and a short title even under a narrow box. */
.type-ahead {
    position: relative;
}

.type-ahead-list {
    --bs-list-group-item-padding-x: var(--khas-space-3);
    --bs-list-group-item-padding-y: var(--khas-space-2);
    --bs-list-group-active-bg: var(--khas-accent);
    --bs-list-group-active-border-color: var(--khas-accent);
    --bs-list-group-border-radius: var(--khas-radius-sm);
    position: absolute;
    z-index: 25;
    top: calc(100% + 0.25rem);
    left: 0;
    width: 100%;
    min-width: min(22rem, calc(100vw - 2rem));
    max-height: 22rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border-right: 0;
    box-shadow: 0 0.5rem 1.25rem rgb(38 51 46 / 0.12);
}

.type-ahead-list > .list-group-item {
    cursor: pointer;
    color: var(--khas-ink);
    line-height: 1.35;
}

.type-ahead-list > .list-group-item.active {
    color: #fff;
}

.type-ahead-list > .list-group-item.active .text-muted {
    color: rgb(255 255 255 / 0.85) !important;
}

.type-ahead-list > .type-ahead-none {
    cursor: default;
    color: var(--khas-muted);
}

.type-ahead-number {
    font-weight: 650;
    margin-right: var(--khas-space-2);
}

/* The picture for a kind of record (design v1.42): an outline in the colour of the text beside it, sized to that text. */
.record-icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.type-ahead .record-icon {
    margin-right: var(--khas-space-1);
    color: var(--khas-muted);
}

.object-number-with-icon {
    display: inline-flex;
    align-items: baseline;
    gap: var(--khas-space-1);
}

.object-number-with-icon > .record-icon {
    align-self: flex-start;
    margin-top: 0.1em;
}

/* The highlighted suggestion has light text on green; the muted grey would be too faint there. */
.type-ahead .active .record-icon {
    color: inherit;
}

.khas-navigation .navigation-go .type-ahead {
    margin-right: 0.25rem;
}

/* In the one-row bar the box is near the right-hand end, so its list opens leftwards. */
@container nav (min-width: 76rem) {
    .khas-navigation .navigation-go .type-ahead-list {
        left: auto;
        right: 0;
    }
}

/* Back to top (MainLayout, js/app.js): hidden until the page has been scrolled down by more than a screen. */
.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background-color: var(--khas-nav);
    border: 0;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

html.khas-scrolled .back-to-top {
    opacity: 0.9;
    visibility: visible;
}

html.khas-scrolled .back-to-top:hover,
html.khas-scrolled .back-to-top:focus-visible {
    color: #fff;
    background-color: var(--khas-nav-active);
    opacity: 1;
}

/* Keep clear of the help panel when it sits beside the page. */
@media (min-width: 62rem) {
    main.help-open ~ .back-to-top {
        right: 23rem;
    }
}

@media (min-width: 75rem) {
    main.help-open ~ .back-to-top {
        right: 27rem;
    }
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* 10. Print and labels -------------------------------------------------------------------------------------- */

@media print {
    .no-print,
    .help-panel,
    .back-to-top {
        display: none !important;
    }
}

/* Receiving box labels (design §10). The grid matches common 3 × 7 A4 label sheets (63.5 × 38.1 mm labels).
   PrintLayout makes every printed page A4 with no margin, so the layouts below supply their own spacing.
   On paper the sheet is only as tall as its rows, and breaks come before each later sheet rather than after every one:
   a full-height sheet or a trailing break printed an empty last page whenever the paper came out shorter than A4. */
.box-label-sheet {
    width: 210mm;
    padding: 15.15mm 7.2mm 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 63.5mm);
    grid-auto-rows: 38.1mm;
    column-gap: 2.5mm;
    background: #fff;
    color: #000;
}

.box-label-sheet + .box-label-sheet,
.box-label-page + .box-label-page {
    break-before: page;
}

.box-label-cell {
    padding: 3mm 4mm;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box-label-cell-ref {
    font: 700 20pt/1.1 ui-monospace, Consolas, monospace;
}

.box-label-cell-description {
    font-size: 9pt;
    line-height: 1.2;
}

.box-label-cell-note {
    font-size: 7pt;
    color: #444;
}

/* Object labels (M5 plan §9.1): the Object Number is the principal identifier, the accession number smaller beneath it. */
.object-label-number {
    font: 700 18pt/1.1 ui-monospace, Consolas, monospace;
}

.object-label-accession {
    font: 600 10pt/1.2 ui-monospace, Consolas, monospace;
}

.object-label-page-accession {
    font: 600 28pt/1.2 ui-monospace, Consolas, monospace;
    margin-top: 2mm;
}

.box-label-page {
    text-align: center;
    padding: 55mm 15mm 15mm;
    background: #fff;
    color: #000;
}

.box-label-ref {
    font: 700 72pt/1.1 ui-monospace, Consolas, monospace;
}

.box-label-description {
    font-size: 24pt;
    margin-top: 6mm;
}

.box-label-location {
    font-size: 16pt;
    color: #333;
    margin-top: 4mm;
}

.box-label-note {
    font-size: 11pt;
    margin-top: 20mm;
}

@media screen {
    .box-label-sheet {
        height: 297mm;
        margin: 0 auto 1rem;
        border: 1px dashed #bbb;
    }

    .box-label-cell {
        outline: 1px dotted #ddd;
    }

    .box-label-page {
        max-width: 210mm;
        margin: 0 auto 1rem;
        border: 1px dashed #bbb;
        min-height: 150mm;
    }
}