/* ==========================================================================
   Endpoint Registration — application stylesheet
   Follows the Inexchange design manual (inexchange.com/designmanual):
     - Typography: Fraunces 400 for headlines, Inter 400/600 for body, actions and small headlines.
     - Text: soft black (#2B2E34, "Screen Text") on white; 100 % black on coloured backgrounds; white on dark.
     - Links: underlined, bold, in the text colour (black on light, white on dark).
     - Palette: Lavender, Full Pink, Watermelon, Flamingo, Lilac, Soft Pink + Silver Grey, Soft Grey, White, Black.
   Light and dark themes: the light tokens live on :root; the dark tokens on :root[data-theme="dark"] and — when no
   theme was chosen — under prefers-color-scheme: dark. Components only ever reference the semantic tokens, so the two
   dark blocks must stay identical. The only colour outside the manual is the functional green for "succeeded"
   states, which the brand palette does not provide.
   No framework, no JavaScript: design tokens, an app shell (sidebar + content), and the handful of components the
   management pages are built from.
   ========================================================================== */

/* ---------- Design tokens: light (default) ---------- */

:root {
    color-scheme: light;

    --font-headline: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;

    /* Inexchange palette */
    --ix-black: #000000;
    --ix-screen-text: #2b2e34;
    --ix-silver-grey: #d3cdd4;
    --ix-soft-grey: #f0eef0;
    --ix-white: #ffffff;
    --ix-lavender: #c187f5;
    --ix-full-pink: #ff8cec;
    --ix-watermelon: #f5627a;
    --ix-flamingo: #ffb3d6;
    --ix-lilac: #efd0eb;
    --ix-soft-pink: #f5e4f3;

    /* Semantic roles */
    --color-ink: var(--ix-screen-text);
    --color-ink-on-colour: var(--ix-black);
    --color-ink-muted: #5c6068;
    --color-ink-subtle: #7a7e86;
    --color-canvas: var(--ix-soft-grey);
    --color-surface: var(--ix-white);
    --color-surface-alt: #f8f6f8;
    --color-border: #e4e0e4;
    --color-border-strong: var(--ix-silver-grey);

    --color-accent: var(--ix-full-pink);
    --color-accent-soft: var(--ix-soft-pink);
    --color-accent-ring: rgba(255, 140, 236, 0.45);

    --color-action: var(--ix-black);
    --color-action-hover: var(--ix-screen-text);
    --color-on-action: var(--ix-white);
    --color-link: var(--ix-black);
    --color-on-tint: var(--ix-black);
    --color-input-focus-border: var(--ix-black);
    --color-control-accent: var(--ix-black);

    --color-danger: var(--ix-watermelon);
    --color-danger-hover: #e04a64;
    --color-danger-soft: #fde8ec;
    --color-danger-border: #f9b9c5;

    --color-success: #2e7d4f;
    --color-on-success: var(--ix-white);
    --color-success-soft: #e9f5ee;
    --color-success-border: #bfe3cd;

    --color-pending: var(--ix-lavender);
    --color-pending-soft: #f3e8fd;
    --color-pending-border: #e0c7fa;

    --color-sidebar: var(--ix-soft-pink);
    --color-sidebar-ink: var(--ix-black);
    --color-sidebar-hover: var(--ix-lilac);
    --color-sidebar-active: var(--ix-flamingo);
    --color-sidebar-active-ink: var(--ix-black);
    --color-sidebar-border: var(--ix-lilac);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(43, 46, 52, 0.05), 0 1px 3px rgba(43, 46, 52, 0.07);
    --shadow-md: 0 8px 20px rgba(43, 46, 52, 0.1);
    --color-backdrop: rgba(43, 46, 52, 0.5);

    --sidebar-width: 16.5rem;
    /* The content column is fluid: wide screens get wide tables, small windows still fit (tables scroll inside
       their card). Forms keep their own, narrower maximum for readability. */
    --content-max-width: none;

    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
}

/* ---------- Design tokens: dark — chosen explicitly ---------- */

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-ink: #f1eef1;
    --color-ink-on-colour: var(--ix-black);
    --color-ink-muted: #b9b5bb;
    --color-ink-subtle: #8f8b92;
    --color-canvas: #121114;
    --color-surface: #1c1b1f;
    --color-surface-alt: #242227;
    --color-border: #302e33;
    --color-border-strong: #4a474d;

    --color-accent-soft: rgba(255, 140, 236, 0.12);
    --color-accent-ring: rgba(255, 140, 236, 0.5);

    --color-action: var(--ix-white);
    --color-action-hover: #e6e1e6;
    --color-on-action: var(--ix-black);
    --color-link: var(--ix-white);
    --color-on-tint: #f1eef1;
    --color-input-focus-border: var(--ix-full-pink);
    --color-control-accent: var(--ix-full-pink);

    --color-danger-soft: rgba(245, 98, 122, 0.16);
    --color-danger-border: rgba(245, 98, 122, 0.5);

    --color-success: #6fcf97;
    --color-on-success: var(--ix-black);
    --color-success-soft: rgba(111, 207, 151, 0.14);
    --color-success-border: rgba(111, 207, 151, 0.45);

    --color-pending-soft: rgba(193, 135, 245, 0.16);
    --color-pending-border: rgba(193, 135, 245, 0.5);

    --color-sidebar: #17161a;
    --color-sidebar-ink: var(--ix-white);
    --color-sidebar-hover: rgba(255, 140, 236, 0.12);
    --color-sidebar-active: var(--ix-full-pink);
    --color-sidebar-active-ink: var(--ix-black);
    --color-sidebar-border: #302e33;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.55);
    --color-backdrop: rgba(0, 0, 0, 0.7);
}

/* ---------- Design tokens: dark — following the operating system (no explicit choice) ---------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-ink: #f1eef1;
        --color-ink-on-colour: var(--ix-black);
        --color-ink-muted: #b9b5bb;
        --color-ink-subtle: #8f8b92;
        --color-canvas: #121114;
        --color-surface: #1c1b1f;
        --color-surface-alt: #242227;
        --color-border: #302e33;
        --color-border-strong: #4a474d;

        --color-accent-soft: rgba(255, 140, 236, 0.12);
        --color-accent-ring: rgba(255, 140, 236, 0.5);

        --color-action: var(--ix-white);
        --color-action-hover: #e6e1e6;
        --color-on-action: var(--ix-black);
        --color-link: var(--ix-white);
        --color-on-tint: #f1eef1;
        --color-input-focus-border: var(--ix-full-pink);
        --color-control-accent: var(--ix-full-pink);

        --color-danger-soft: rgba(245, 98, 122, 0.16);
        --color-danger-border: rgba(245, 98, 122, 0.5);

        --color-success: #6fcf97;
        --color-on-success: var(--ix-black);
        --color-success-soft: rgba(111, 207, 151, 0.14);
        --color-success-border: rgba(111, 207, 151, 0.45);

        --color-pending-soft: rgba(193, 135, 245, 0.16);
        --color-pending-border: rgba(193, 135, 245, 0.5);

        --color-sidebar: #17161a;
        --color-sidebar-ink: var(--ix-white);
        --color-sidebar-hover: rgba(255, 140, 236, 0.12);
        --color-sidebar-active: var(--ix-full-pink);
        --color-sidebar-active-ink: var(--ix-black);
        --color-sidebar-border: #302e33;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.55);
    --color-backdrop: rgba(0, 0, 0, 0.7);
    }
}

/* ---------- Base ---------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--color-ink);
    background: var(--color-canvas);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-headline);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--color-ink);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.3rem;
}

p {
    margin: 0 0 0.75rem;
}

/* The manual: links are underlined and bold, in the text colour. */
a {
    color: var(--color-link);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-color: var(--color-accent);
}

code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-alt);
    color: var(--color-ink);
    word-break: break-all;
}

:focus-visible {
    outline: 3px solid var(--color-accent-ring);
    outline-offset: 2px;
}

/* ---------- App shell ---------- */

.appShell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    background: var(--color-sidebar);
    color: var(--color-sidebar-ink);
    border-right: 1px solid var(--color-sidebar-border);
}

.brand {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0.75rem 1.5rem;
    color: var(--color-sidebar-ink);
    text-decoration: none;
}

.brand:hover {
    text-decoration: none;
}

/* The company name set as type — the official Inexchange wordmark (black on light, white on dark) lives in the
   Stockpress asset library and can replace this span as an SVG; keep the "H"-width clear space around it. */
.brandWordmark {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-sidebar-ink);
}

.brandProduct {
    font-family: var(--font-headline);
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--color-sidebar-ink);
}

.navSection {
    margin-top: 0.75rem;
}

.navSectionTitle {
    margin: 0 0 0.3rem;
    padding: 0 0.75rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-pill);
    color: var(--color-sidebar-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar nav a:hover {
    background: var(--color-sidebar-hover);
    text-decoration: none;
}

.sidebar nav a.active {
    background: var(--color-sidebar-active);
    color: var(--color-sidebar-active-ink);
}

.sidebarFooter {
    display: grid;
    gap: 0.6rem;
    margin-top: auto;
    padding: 1rem 0.75rem 0;
    border-top: 1px solid var(--color-sidebar-border);
    font-size: 0.9rem;
}

.sidebarFooter .userName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* ---------- Theme switch (System / Light / Dark) ---------- */

.themeSwitch {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.2rem;
    border: 1px solid var(--color-sidebar-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.themeSwitch a {
    flex: 1;
    padding: 0.28rem 0.7rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.themeSwitch a:hover {
    background: var(--color-accent-soft);
    text-decoration: none;
}

.themeSwitch a.active {
    background: var(--color-action);
    color: var(--color-on-action);
}

.content {
    width: 100%;
    max-width: var(--content-max-width);
    padding: 2.25rem 2.5rem 3rem;
}

/* ---------- Page header ---------- */

.pageHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pageHeader h1 {
    margin: 0;
}

.pageLead {
    margin: 0.4rem 0 0;
    max-width: 60rem;
    color: var(--color-ink-muted);
}

.pageActions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---------- Cards & surfaces ---------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card.tableWrapper {
    overflow-x: auto;
}

.form.card {
    padding: 1.75rem 2rem;
}

.emptyState {
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink-muted);
    text-align: center;
}

.loading {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-ink-muted);
}

.loading::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.hint {
    color: var(--color-ink-subtle);
    font-weight: 400;
    font-size: 0.9em;
}

/* ---------- Alerts ---------- */

.error,
.success {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid;
    border-radius: var(--radius-md);
    color: var(--color-on-tint);
    line-height: 1.45;
}

.error::before,
.success::before {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.error {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
}

.error::before {
    content: "!";
    background: var(--color-danger);
    color: var(--ix-black);
}

.success {
    background: var(--color-success-soft);
    border-color: var(--color-success-border);
}

.success::before {
    content: "\2713";
    background: var(--color-success);
    color: var(--color-on-success);
}

.success code {
    background: var(--color-surface);
    border-color: var(--color-success-border);
}

/* ---------- Buttons & button-styled links ---------- */

button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--color-action);
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-on-action);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button:hover,
a.button:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    text-decoration: none;
}

button:disabled {
    cursor: wait;
    opacity: 0.5;
}

button.secondary,
a.button.secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-ink);
}

button.secondary:hover,
a.button.secondary:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-link);
}

/* The destructive confirmation: filled Watermelon so it is unmistakably the dangerous choice, with 100 % black type as
   the manual prescribes on a colour background. Same in both themes — the colour is the brand's, not the surface's. */
button.danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--ix-black);
}

button.danger:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
    color: var(--ix-black);
}

button.danger:focus-visible {
    outline-color: rgba(245, 98, 122, 0.45);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
}

.rowActions {
    white-space: nowrap;
}

.rowActions > * + * {
    margin-left: 0.4rem;
}

.rowActions button,
.rowActions a.button {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
}

/* ---------- Tables ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
}

th,
td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--color-surface-alt);
    color: var(--color-ink-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

thead th:first-child {
    border-top-left-radius: var(--radius-lg);
}

thead th:last-child {
    border-top-right-radius: var(--radius-lg);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover td {
    background: var(--color-accent-soft);
}

td.nowrap {
    white-space: nowrap;
}

/* ---------- Status badges ---------- */

.badge {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-on-tint);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge.succeeded {
    background: var(--color-success-soft);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.badge.failed {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
}

.badge.pending {
    background: var(--color-pending-soft);
    border-color: var(--color-pending);
}

/* ---------- List querying: filter bar and sortable headers ---------- */

.filterBar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
}

.filterBar label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--color-ink-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.filterBar input,
.filterBar select {
    min-width: 14rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-weight: 400;
}

.filterBar input:focus,
.filterBar select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

th.sortable {
    padding: 0;
}

/* The heading text is the control: a reset button that takes the cell padding and inherits the header typography. */
.sortButton {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.75rem 1rem;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.sortButton:hover {
    color: var(--color-ink);
    background: var(--color-accent-soft);
}

.sortButton:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.sortIndicator {
    opacity: 0.5;
    font-size: 0.7rem;
}

th[aria-sort="ascending"] .sortIndicator,
th[aria-sort="descending"] .sortIndicator {
    opacity: 1;
    color: var(--color-accent);
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.paginationStatus {
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* ---------- Disclosure (details/summary) ---------- */

details summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    color: var(--color-link);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.15em;
    cursor: pointer;
    user-select: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: "\25B8";
    display: inline-block;
    transition: transform 0.15s ease;
}

details[open] summary::before {
    transform: rotate(90deg);
}

details ul {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.3rem;
}

details dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0.5rem 0 0;
}

details dl dt {
    margin: 0;
    color: var(--color-ink-subtle);
    font-size: 0.85rem;
    font-weight: 600;
}

details dl dd {
    margin: 0;
}

dl dt {
    font-weight: 600;
}

dl dd {
    margin-left: 0;
}

/* ---------- Forms ---------- */

.form {
    display: grid;
    gap: 1.1rem;
    max-width: 52rem;
}

.formRow {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.formRow label {
    font-weight: 600;
    color: var(--color-ink);
}

.formRow input,
.formRow select,
.formRow textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.formRow input:focus,
.formRow select:focus,
.formRow textarea:focus {
    outline: none;
    border-color: var(--color-input-focus-border);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.formRow input::placeholder {
    color: var(--color-ink-subtle);
}

/* The search picker (SearchPicker.razor): a combobox whose matches drop down under the text box. */
.searchPicker {
    position: relative;
}

.searchPickerField {
    position: relative;
}

.searchPickerField .searchPickerInput {
    padding-right: 2.5rem;
}

.searchPickerClear {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-subtle);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.searchPickerClear:hover,
.searchPickerClear:focus-visible {
    color: var(--color-ink);
    background: var(--color-accent-soft);
}

.searchPickerList {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.searchPickerOption {
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
}

.searchPickerOption[aria-selected="true"] {
    background: var(--color-accent-soft);
    color: var(--color-on-tint);
}

.searchPickerOptionMeta {
    color: var(--color-ink-subtle);
    font-size: 0.85em;
}

.searchPickerOption[aria-selected="true"] .searchPickerOptionMeta {
    color: inherit;
}

.searchPickerMessage {
    padding: 0.5rem 0.85rem;
    color: var(--color-ink-subtle);
    font-size: 0.9em;
}

.searchPickerError {
    color: var(--color-danger);
}

fieldset {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

legend {
    padding: 0 0.4rem;
    font-family: var(--font-headline);
    font-size: 1.1rem;
}

/* Read-only label/value pairs on a detail page. */
.detailList {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.detailList dt {
    color: var(--color-ink-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: baseline;
}

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

/* Compact rows of items with an action at the end — the documents in a package, the search results to add from. */
.itemList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.itemList li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.itemList li:hover {
    border-color: var(--color-border-strong);
    background: var(--color-accent-soft);
}

.itemMain {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.itemTitle {
    font-weight: 600;
}

.itemMeta {
    font-size: 0.85rem;
    color: var(--color-ink-muted);
    overflow-wrap: anywhere;
}

.itemActions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.itemActions button {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
}

input[type="search"] {
    appearance: none;
}

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-control-accent);
    cursor: pointer;
}

/* A link that leaves this application (opens in a new tab), marked with an arrow so the jump is expected. */
.externalLink::after {
    content: " \2197";
    font-size: 0.85em;
}

/* A small link placed beside another control, e.g. the "Open" link next to a document checkbox. */
.inlineLink {
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ---------- Landing page ---------- */

/* Brand-coloured surface in both themes, so its text is 100 % black as the manual prescribes for colour backgrounds. */
.hero {
    padding: 2.75rem 2.5rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--ix-soft-pink) 0%, var(--ix-lilac) 55%, var(--ix-flamingo) 100%);
    color: var(--ix-black);
    box-shadow: var(--shadow-md);
}

.hero h1 {
    margin-bottom: 0.75rem;
    font-size: 2.4rem;
    color: var(--ix-black);
}

.hero p {
    max-width: 40rem;
    color: var(--ix-black);
}

.hero a.button {
    margin-top: 0.5rem;
    background: var(--ix-black);
    border-color: var(--ix-black);
    color: var(--ix-white);
}

.hero a.button:hover {
    background: var(--ix-screen-text);
    border-color: var(--ix-screen-text);
}

.tileGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.tile {
    display: block;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
    font-weight: 400;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.tile:hover {
    border-color: var(--color-link);
    background: var(--color-accent-soft);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}

.tile h2 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    color: var(--color-link);
}

.tile p {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: 0.9rem;
}

/* ---------- Modal dialog ---------- */

.modalBackdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--color-backdrop);
}

.modal {
    width: min(32rem, 100%);
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
}

.modal h2 {
    margin-bottom: 0.6rem;
}

.modal p {
    margin-bottom: 0.5rem;
}

.modal .error {
    margin-top: 0.75rem;
}

.modalActions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .appShell {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1rem;
        padding: 0.75rem 1rem;
        border-right: none;
        border-bottom: 1px solid var(--color-sidebar-border);
    }

    .brand {
        padding: 0;
    }

    .brandProduct {
        font-size: 1.1rem;
    }

    .sidebar nav {
        display: contents;
    }

    .navSection {
        display: flex;
        gap: 0.25rem;
        margin: 0;
    }

    .navSectionTitle {
        display: none;
    }

    .sidebarFooter {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-left: auto;
        padding: 0;
        border: none;
    }

    .content {
        padding: 1.25rem 1rem 2rem;
    }

    h1 {
        font-size: 1.6rem;
    }

    .formRow {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    .form.card {
        padding: 1.25rem;
    }
}