/* =====================================================================
   LearnShare — shared stylesheet
   Visual tokens follow the accepted Claude Design reference (Selected
   Design v9). The app's Content-Security-Policy allows only same-origin
   styles and fonts, so Onest and IBM Plex Mono are self-hosted below, and
   the reference's Google-hosted Material Symbols are replaced by inline SVG
   icons.
   ===================================================================== */

/* Self-hosted Latin subsets (SIL OFL 1.1); see /assets/fonts/README.txt. */
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/onest-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/onest-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/onest-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/onest-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Shell icons (sidebar, tab bar, account menu): a subset of Material Symbols
   Outlined, opsz 20..48 and FILL 0..1. "block" keeps the icon names from
   showing as text while the file loads; the layout preloads it. */
@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/fonts/material-symbols-outlined-subset.woff2") format("woff2");
}

:root {
    color-scheme: light;

    --background: #f5f6f8;
    --foreground: #14171c;
    --card: oklch(100% 0 0);
    --muted: #eef0f4;
    --muted-foreground: #5b6472;
    --text-secondary: #3b4350;
    --border: #e3e6eb;
    --border-soft: #eef0f3;
    --input: #cfd5dd;
    --primary: #2b63d1;
    --primary-hover: #1f4fae;
    --primary-foreground: oklch(99% 0.005 250);
    --accent-surface: #e9f0fd;
    --accent-ink: #1f4fae;
    --hover-surface: #f1f3f6;
    --ring: #2b63d1;
    --surface: oklch(97.2% 0.018 248);
    --surface-foreground: oklch(32% 0.06 255);
    --neutral-surface: oklch(95.5% 0.005 250);
    --success: oklch(48% 0.12 155);
    --success-surface: oklch(95.5% 0.035 155);
    --warning: oklch(52% 0.12 70);
    --warning-surface: oklch(96% 0.045 80);
    --destructive: oklch(55% 0.2 25);
    --destructive-surface: oklch(97% 0.02 25);
    --ai: oklch(52% 0.17 295);
    --ai-surface: oklch(96.8% 0.022 300);

    --radius-sm: 0.625rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --shadow-card:
        0 1px 2px oklch(45% 0.09 250 / 6%),
        0 6px 18px oklch(45% 0.09 250 / 7%);
    --focus-ring: 0 0 0 3px oklch(52% 0.16 255 / 22%);

    --font-sans:
        "Onest", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
        BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:
        "IBM Plex Mono", "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", monospace;

    --rail-width: 5.25rem;
    --sidebar-width: 15.5rem;
    --header-height: 3.5rem;
    --tabbar-height: 4.5rem;

    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
}

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

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

body {
    min-height: 100vh;
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-underline-offset: 0.18em;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: -0.015em;
}

h2 {
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
}

h3 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

code,
.inline-code {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

.inline-code {
    padding: 0.05rem 0.35rem;
    border-radius: 0.375rem;
    background: var(--neutral-surface);
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

[hidden] {
    display: none !important;
}

.eyebrow {
    margin: 0 0 0.35rem;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lead {
    max-width: 46rem;
    margin-bottom: 1.25rem;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.muted-copy {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.55;
}

.text-link {
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Brand
   --------------------------------------------------------------------- */

.brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    color: var(--foreground);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-decoration: none;
}

.site-header {
    width: min(72rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1rem 0;
}

/* ---------------------------------------------------------------------
   Cards and panels
   --------------------------------------------------------------------- */

.panel,
.form-card,
.status-card,
.dashboard-card {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.form-card,
.status-card,
.dashboard-card {
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.panel-heading {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.panel-heading h2,
.panel-title {
    margin: 0 0 0.875rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.375rem;
}

.panel-heading .panel-title,
.panel-heading h2 {
    margin-bottom: 0;
}

.panel-subtitle {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.single-card-shell {
    width: min(72rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

.single-card-shell .form-card,
.single-card-shell .status-card {
    max-width: 40rem;
    margin: 0 auto;
}

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

form {
    display: grid;
    gap: 0.875rem;
}

.field {
    display: grid;
    min-width: 0;
    gap: 0.375rem;
}

label {
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

input,
textarea,
select {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--foreground);
    font: inherit;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px oklch(23% 0.03 255 / 4%);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted-foreground);
}

input[type="radio"],
input[type="checkbox"] {
    width: 1rem;
    min-height: 1rem;
    margin: 0;
    padding: 0;
    box-shadow: none;
    accent-color: var(--primary);
}

input[type="file"] {
    padding: 0.4rem;
}

select {
    padding-right: 2.25rem;
    background-image: url("/assets/images/chevron-down.svg");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    appearance: none;
    cursor: pointer;
}

textarea {
    min-height: 8rem;
    resize: vertical;
    line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ring);
    outline: none;
    box-shadow: var(--focus-ring);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--destructive);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.form-grid > div {
    display: grid;
    gap: 0.375rem;
    align-content: start;
}

fieldset {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

legend {
    padding: 0 0.35rem;
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 600;
}

legend span {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 400;
}

.field-help,
.field-error {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.field-help {
    color: var(--muted-foreground);
}

.field-error {
    color: var(--destructive);
    font-weight: 500;
}

/* Forms that place label, control, and help text directly in the grid
   (moderation, provisioning) keep them visually grouped. */
form > label {
    margin-bottom: -0.5rem;
}

form > .field-help,
form > .field-error {
    margin-top: -0.5rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}

.form-link {
    margin: 1.25rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    text-align: center;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

button,
.button-link,
.button-secondary,
.button-ghost,
.button-block {
    display: inline-flex;
    min-height: 2.25rem;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button:hover,
.button-link:hover,
.button-block:hover {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
}

.button-secondary,
.button-secondary.button-link {
    border-color: var(--border);
    background: var(--card);
    color: var(--foreground);
    box-shadow: 0 1px 2px oklch(23% 0.03 255 / 5%);
}

.button-secondary:hover,
.button-secondary.button-link:hover {
    border-color: oklch(52% 0.16 255 / 35%);
    background: var(--surface);
    color: var(--foreground);
}

.button-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--foreground);
}

.button-ghost:hover {
    border-color: transparent;
    background: var(--muted);
}

.button-small {
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
}

.button-block {
    width: 100%;
    min-height: 2.5rem;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

button:disabled,
button:disabled:hover {
    border-color: var(--border);
    background: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------
   Alerts, notices, badges
   --------------------------------------------------------------------- */

.alert {
    margin: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.5;
}

.alert-error {
    border-color: oklch(55% 0.2 25 / 25%);
    background: var(--destructive-surface);
    color: oklch(45% 0.17 25);
}

.alert-success {
    border-color: oklch(48% 0.12 155 / 25%);
    background: var(--success-surface);
    color: var(--success);
}

.alert-info {
    border-color: oklch(52% 0.16 255 / 20%);
    background: var(--surface);
    color: var(--surface-foreground);
}

.alert-warning {
    border-color: oklch(52% 0.12 70 / 25%);
    background: var(--warning-surface);
    color: oklch(42% 0.1 70);
}

.notice {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid oklch(52% 0.16 255 / 20%);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--surface-foreground);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.notice .icon {
    margin-top: 0.15rem;
    color: var(--primary);
}

.notice-compact {
    display: block;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
}

.badge,
.status-pill {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
}

.badge-success,
.status-approved {
    border-color: oklch(48% 0.12 155 / 25%);
    background: var(--success-surface);
    color: var(--success);
}

.badge-neutral {
    border-color: var(--border);
    background: var(--neutral-surface);
    color: var(--muted-foreground);
}

.badge-role {
    border-color: oklch(52% 0.16 255 / 20%);
    background: var(--surface);
    color: var(--surface-foreground);
}

.status-pill {
    border-color: oklch(52% 0.12 70 / 25%);
    background: var(--warning-surface);
    color: var(--warning);
}

.status-pill.status-approved {
    border-color: oklch(48% 0.12 155 / 25%);
    background: var(--success-surface);
    color: var(--success);
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.tag-list,
.review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-list li,
.review-tags li {
    padding: 0.125rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--surface-foreground);
    font-size: 0.75rem;
    line-height: 1.125rem;
}

/* ---------------------------------------------------------------------
   Signed-out authentication pages
   --------------------------------------------------------------------- */

.signed-out {
    background: oklch(97.6% 0.012 248);
}

.auth-shell {
    width: min(72rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1rem 0 4rem;
}

.signed-out .auth-shell {
    display: grid;
    justify-items: center;
}

.auth-card {
    width: 100%;
    max-width: 28rem;
    padding: clamp(1.5rem, 5vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.auth-card h1 {
    margin-bottom: 0.5rem;
}

.auth-intro {
    margin-bottom: 1.25rem;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.auth-card > .alert {
    margin-bottom: 1rem;
}

.auth-form {
    gap: 1rem;
}

.auth-form button[type="submit"] {
    margin-top: 0.25rem;
}

.auth-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--primary);
}

.auth-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.auth-footnote {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.55;
}

/* Two-column intro + form pages inside the signed-in shell
   (for example Admin account provisioning). */
.app-content .auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.intro-panel {
    padding: 0.25rem 0 0;
}

.intro-panel h1 {
    margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------
   Signed-in shell
   Sidebar rail (collapsed by default, expandable on wide screens),
   breadcrumb header with account menu, and a bottom tab bar on phones.
   --------------------------------------------------------------------- */

.signed-in {
    background: var(--background);
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: -4rem;
    left: 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.skip-link:focus {
    top: 0.75rem;
}

.app-frame {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    width: var(--rail-width);
    height: 100vh;
    flex: 0 0 var(--rail-width);
    flex-direction: column;
    padding: 0.875rem 0.5rem 0.75rem;
    border-right: 1px solid var(--border);
    background: var(--card);
    overflow-x: hidden;
    overflow-y: auto;
}

.app-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    border-radius: 0.625rem;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.app-brand-mark {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.625rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
}

.app-brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Shell icons: Material Symbols Outlined, drawn by ligature from the
   self-hosted subset in /assets/fonts (see README.txt there). The glyph box
   is one clipped em square, so a missing font file shows a short fragment,
   not a long icon name. FILL 1 is the filled form used for active items. */
.ms {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    overflow: hidden;
    font-family: "Material Symbols Outlined";
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

.app-nav-link.is-active .ms,
.app-nav-tile.is-active > .ms,
.app-tab.is-active .ms {
    font-variation-settings: "FILL" 1;
}

/* Navigation (V9 "4a"): Home plus one group per role area. In the
   collapsed rail a group is a tile that opens its pages in a flyout; the
   expanded sidebar and the phone sheet list the pages under the group
   heading. Context selectors below use :where() so they add no specificity
   and the plain .is-active / :hover rules still win. */
.app-navigation {
    display: flex;
    min-height: 0;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    /* On a short screen the list scrolls on its own, so the product mark
       and the collapse/expand button stay in view. The side padding keeps
       focus rings from being clipped by the scroll box. */
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.app-nav-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* One hairline between Home and the group tiles, as in the reference. */
.app-nav-group-home {
    gap: 0;
}

.app-nav-group-home::after {
    height: 1px;
    margin: 0.625rem 0.75rem 0.375rem;
    background: var(--border);
    content: "";
}

/* Without JavaScript there are no tiles: the rail is the plain list of
   links, separated by group. */
html:not(.has-js) .app-nav-group-home::after {
    display: none;
}

html:not(.has-js) .app-nav-group + .app-nav-group {
    padding-top: 0.375rem;
    border-top: 1px solid var(--border);
}

/* Parts that only some layouts show. */
.app-nav-label,
.app-nav-sheet-head,
.app-nav-menu-head,
.app-nav-menu-foot,
.app-nav-current,
.app-nav-scrim,
.app-tabbar {
    display: none;
}

/* The dock groups the backdrop, the sheet and the bottom tabs so the open
   sheet can be one dialog; it never has a box of its own. */
.app-nav-dock {
    display: contents;
}

/* The sheet wrapper only becomes a box on the phone. */
.app-nav-sheet {
    display: contents;
}

/* A page link as a rail tile: icon above its short label. */
.app-nav-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.5rem 0.125rem;
    border-radius: 0.625rem;
    color: var(--muted-foreground);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-nav-link:hover {
    background: var(--hover-surface);
    color: var(--foreground);
}

.app-nav-link.is-active {
    background: var(--accent-surface);
    color: var(--accent-ink);
    font-weight: 600;
}

.app-nav-link:focus-visible,
.app-nav-tile:focus-visible,
.app-nav-menu-expand:focus-visible,
.app-nav-sheet-close:focus-visible,
.app-tab:focus-visible,
.app-brand:focus-visible,
.app-rail-toggle:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

/* In the rail the short label is shown; the full label stays available to
   assistive technology. */
.app-nav-text-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.app-nav-text-short {
    display: block;
    max-width: 100%;
}

/* Group tile (JavaScript only): icon, group name, and when the current page
   is inside it a pill naming that page. */
.app-nav-tile {
    position: relative;
    display: none;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.5rem 0.125rem;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    box-shadow: none;
}

html.has-js .app-nav-tile {
    display: flex;
}

.app-nav-tile:hover {
    border: 0;
    background: var(--hover-surface);
    color: var(--foreground);
}

.app-nav-tile.is-active {
    padding-bottom: 0.4375rem;
    background: var(--accent-surface);
    color: var(--accent-ink);
    font-weight: 600;
}

.app-nav-tile[aria-expanded="true"] {
    box-shadow: inset 0 0 0 2px var(--primary);
}

.app-nav-tile-label {
    display: block;
}

.app-nav-tile-current {
    display: block;
    max-width: 100%;
    padding: 0 0.4375rem;
    border-radius: 999px;
    background: var(--card);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
}

.app-nav-tile-caret {
    position: absolute;
    top: 0.6875rem;
    right: 0.0625rem;
    display: block;
    line-height: 0;
}

.app-nav-tile-caret .ms {
    font-size: 1rem;
    color: #8a93a1;
}

.app-nav-tile.is-active .app-nav-tile-caret .ms {
    color: inherit;
}

/* A group's page list. Without JavaScript it is simply the links in the
   rail; with it, it is the flyout, the expanded sidebar's list or the phone
   sheet's list. */
.app-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

html.has-js .app-nav-menu {
    display: none;
}

html.has-js .app-nav-group[data-open] .app-nav-menu {
    position: fixed;
    z-index: 60;
    left: calc(var(--rail-width) + 0.4375rem);
    display: flex;
    width: 16.75rem;
    max-width: calc(100vw - var(--rail-width) - 1rem);
    max-height: calc(100vh - 1rem);
    padding: 0.375rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--card);
    box-shadow:
        0 12px 32px oklch(23% 0.02 255 / 16%),
        0 2px 6px oklch(23% 0.02 255 / 6%);
    overflow-y: auto;
}

html.has-js .app-nav-group[data-open] .app-nav-menu-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: 0.5rem 0.625rem 0.375rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
}

.app-nav-menu-count {
    font-family: var(--font-mono);
    font-weight: 400;
}

html.has-js .app-nav-group[data-open] .app-nav-link.is-active .app-nav-current {
    display: block;
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
}

html.has-js .app-nav-group[data-open] .app-nav-link:focus-visible {
    outline-offset: -2px;
}

/* A page link as a row: icon, full label. */
:where(html.has-js .app-nav-menu) .app-nav-link {
    min-height: 2.5rem;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0 0.625rem;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.3;
    text-align: left;
}

:where(html.has-js .app-nav-menu) .app-nav-link:not(.is-active) .ms {
    color: var(--muted-foreground);
}

:where(html.has-js .app-nav-menu) .app-nav-text-full {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    overflow-wrap: break-word;
}

:where(html.has-js .app-nav-menu) .app-nav-text-short {
    display: none;
}

.app-nav-menu-expand {
    width: 100%;
    min-height: 2.5rem;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    font-weight: 500;
    box-shadow: none;
}

.app-nav-menu-expand:hover {
    border: 0;
    background: var(--hover-surface);
    color: var(--foreground);
}

.app-nav-menu-expand .ms {
    color: var(--muted-foreground);
}

/* Forced colours drop backgrounds and box-shadows, which carry the current
   and open states; an outline survives. */
@media (forced-colors: active) {
    .app-nav-link.is-active,
    .app-nav-tile.is-active,
    .app-nav-tile[aria-expanded="true"],
    .app-tab.is-active,
    .app-tab[aria-expanded="true"] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/* The foot only holds the expand/collapse button, which exists on wide
   screens; below that an empty strip would show its hairline. */
.app-sidebar-foot {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.app-rail-toggle {
    display: none;
    width: 100%;
    min-height: 0;
    padding: 0.5rem 0.125rem;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
}

.app-rail-toggle:hover {
    border: 0;
    background: var(--hover-surface);
    color: var(--foreground);
}

.app-rail-toggle-expand,
.app-rail-toggle-collapse {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
}

.app-rail-toggle-collapse {
    display: none;
}

.app-main {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.app-header {
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    height: var(--header-height);
    gap: 0.75rem;
    align-items: center;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.app-header-brand {
    flex: 0 0 auto;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.app-crumbs {
    min-width: 0;
}

.app-crumbs ol {
    display: flex;
    min-width: 0;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    list-style: none;
}

.app-crumbs li {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-crumbs li + li::before,
.app-header-brand + .app-crumbs li:first-child::before {
    margin-right: 0.5rem;
    color: #c3c9d2;
    content: "/";
}

.app-crumbs li[aria-current="page"] {
    color: var(--foreground);
    font-weight: 600;
}

.app-search {
    position: relative;
    display: block;
    width: min(100%, 17.5rem);
    min-width: 0;
    margin-left: auto;
}

.app-search .ms {
    position: absolute;
    top: 50%;
    left: 0.6875rem;
    font-size: 1.25rem;
    color: var(--muted-foreground);
    transform: translateY(-50%);
    pointer-events: none;
}

.app-search input {
    min-height: 2.25rem;
    padding-left: 2.25rem;
    border-color: var(--input);
    border-radius: 0.5rem;
}

.app-account {
    position: relative;
    margin-left: auto;
}

.app-search + .app-account {
    margin-left: 0;
}

/* Header notification link (V9's bell): a 40 px square with a count badge.
   It takes the free space when nothing precedes it, and the account menu then
   sits right after it. "?" is the unavailable state, never a zero. */
.app-bell {
    position: relative;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    margin-left: auto;
    place-items: center;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.app-search + .app-bell,
.app-bell + .app-account {
    margin-left: 0;
}

.app-bell:hover,
.app-bell.is-active {
    background: var(--hover-surface);
}

/* V9 tints the bell while its panel is open and does not fill the glyph. */
.app-bell.is-active {
    background: var(--accent-surface);
}

.app-bell:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.app-bell-count {
    position: absolute;
    top: 0.1875rem;
    right: 0.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--card);
    color: var(--primary-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-align: center;
}

.app-bell-count-unknown {
    background: var(--muted);
    color: var(--text-secondary);
}

.app-account-trigger {
    display: flex;
    min-width: 0;
    height: 2.75rem;
    gap: 0.5625rem;
    align-items: center;
    padding: 0 0.375rem 0 0.25rem;
    border-radius: 0.625rem;
    color: var(--foreground);
    list-style: none;
    cursor: pointer;
}

.app-account-trigger::-webkit-details-marker {
    display: none;
}

.app-account-trigger:hover,
.app-account[open] .app-account-trigger {
    background: var(--hover-surface);
}

.app-account-trigger > .ms {
    font-size: 1.25rem;
    color: var(--muted-foreground);
    transition: transform 0.15s ease;
}

.app-account[open] .app-account-trigger > .ms {
    transform: rotate(180deg);
}

.app-avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: var(--foreground);
    color: var(--primary-foreground);
    font-size: 0.75rem;
    font-weight: 600;
}

.app-account-text {
    display: flex;
    min-width: 0;
    max-width: 11.875rem;
    flex-direction: column;
    line-height: 1.25;
}

.app-account-name {
    overflow: hidden;
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-account-role {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.app-account-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.375rem);
    right: 0;
    width: min(16rem, calc(100vw - 2rem));
    padding: 0.375rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--card);
    box-shadow:
        0 12px 32px oklch(23% 0.02 255 / 16%),
        0 2px 6px oklch(23% 0.02 255 / 6%);
}

.app-account-panel-id {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0.5rem 0.625rem 0.625rem;
    border-bottom: 1px solid var(--border-soft);
}

.app-account-panel-name {
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.app-account-panel-role {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

/* "My Profile" sits above Sign out and reads like it: same row height, icon
   and hover, so the two menu actions look like one list. */
.app-account-link {
    display: flex;
    min-height: 2.5rem;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.25rem;
    padding: 0 0.625rem;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.app-account-link:hover,
.app-account-link.is-active {
    background: var(--hover-surface);
    color: var(--foreground);
}

.app-account-link .ms {
    font-size: 1.25rem;
    color: var(--muted-foreground);
}

.app-signout {
    display: block;
    padding-top: 0.25rem;
}

.app-signout button {
    width: 100%;
    min-height: 2.5rem;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0 0.625rem;
    border-color: transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
}

.app-signout button:hover {
    border-color: transparent;
    background: var(--hover-surface);
    color: var(--foreground);
}

.app-signout .ms {
    font-size: 1.25rem;
    color: var(--muted-foreground);
}

.app-content {
    min-width: 0;
    flex: 1 1 auto;
}

.app-content:focus {
    outline: none;
}

.page,
.app-content .single-card-shell,
.app-content .repository-shell,
.app-content .auth-shell {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* Expanded sidebar: wide screens only, chosen by the person and
   remembered in this browser. */
@media (min-width: 64rem) {
    html.has-js .app-sidebar-foot {
        display: flex;
    }

    .app-rail-toggle {
        display: flex;
    }

    /* "Show full sidebar" only makes sense where the sidebar can expand. */
    html.has-js .app-nav-group[data-open] .app-nav-menu-foot {
        display: block;
        margin-top: 0.25rem;
        padding-top: 0.25rem;
        border-top: 1px solid var(--border-soft);
    }

    html[data-rail="expanded"] .app-sidebar {
        width: var(--sidebar-width);
        flex-basis: var(--sidebar-width);
        padding: 0.875rem 0.75rem 0.75rem;
    }

    html[data-rail="expanded"] .app-brand {
        justify-content: flex-start;
        padding: 0 0.25rem 0.5rem;
        margin-bottom: 0;
    }

    html[data-rail="expanded"] .app-brand-name {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }

    /* The page lists replace the tiles, under their group headings. */
    html[data-rail="expanded"] .app-navigation {
        gap: 0;
    }

    html[data-rail="expanded"] .app-nav-group-home {
        padding-top: 0.5rem;
    }

    html[data-rail="expanded"] .app-nav-group-home::after {
        display: none;
    }

    html[data-rail="expanded"] .app-nav-label {
        display: block;
        margin: 0;
        padding: 1rem 0.625rem 0.375rem;
        color: var(--muted-foreground);
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1rem;
    }

    html[data-rail="expanded"] .app-nav-tile {
        display: none;
    }

    html[data-rail="expanded"] .app-nav-menu {
        display: flex;
    }

    /* Home is a direct link: a row here, a tile in the rail. */
    :where(html[data-rail="expanded"]) .app-nav-link-direct {
        min-height: 2.5rem;
        flex-direction: row;
        gap: 0.75rem;
        padding: 0 0.625rem;
        border-radius: 0.5rem;
        color: var(--text-secondary);
        font-size: 0.875rem;
        line-height: 1.3;
        text-align: left;
    }

    :where(html[data-rail="expanded"]) .app-nav-link-direct:not(.is-active) .ms {
        color: var(--muted-foreground);
    }

    :where(html[data-rail="expanded"]) .app-nav-link-direct .app-nav-text-full {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }

    :where(html[data-rail="expanded"]) .app-nav-link-direct .app-nav-text-short {
        display: none;
    }

    html[data-rail="expanded"] .app-rail-toggle {
        min-height: 2.5rem;
        justify-content: flex-start;
        padding: 0 0.625rem;
        font-size: 0.875rem;
    }

    html[data-rail="expanded"] .app-rail-toggle-expand {
        display: none;
    }

    html[data-rail="expanded"] .app-rail-toggle-collapse {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
    }

    /* The sidebar shows the product name when expanded; the header shows
       it when the rail is collapsed. */
    html[data-rail="expanded"] .app-header-brand {
        display: none;
    }

    html[data-rail="expanded"] .app-header-brand + .app-crumbs li:first-child::before {
        content: none;
    }
}

/* A short desktop screen (about 600 px high): the expanded sidebar tightens
   its headings and rows (28 px) so a full Admin list, with Academic Taxonomy,
   System Settings and AI Capability Settings, fits without scrolling. */
@media (min-width: 64rem) and (max-height: 40rem) {
    html[data-rail="expanded"] .app-nav-label {
        padding-top: 0.375rem;
        padding-bottom: 0.25rem;
    }

    html[data-rail="expanded"] .app-nav-link {
        min-height: 1.75rem;
    }

    html[data-rail="expanded"] .app-nav-group-home {
        padding-top: 0.25rem;
    }

    html[data-rail="expanded"] .app-brand {
        padding-bottom: 0.25rem;
    }
}

/* ---------------------------------------------------------------------
   Page headings
   --------------------------------------------------------------------- */

.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    margin-bottom: 0.25rem;
    overflow-wrap: anywhere;
}

.page-subtitle {
    max-width: 48rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.45;
}

.back-link {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--primary);
    font-size: 0.875rem;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Dashboard (role-aware, v9)
   Every rule is scoped by a .dash class, so no other screen changes.
   --------------------------------------------------------------------- */

.dash {
    display: flex;
    width: 100%;
    max-width: 84rem;
    flex-direction: column;
    gap: 1.125rem;
    margin: 0 auto;
    padding: 1.5rem 2rem 2.5rem;
}

.dash-staff {
    gap: 1.375rem;
}

.dash-head {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: space-between;
}

.dash-head-text {
    min-width: 0;
}

.dash h1 {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.dash-subtitle {
    margin: 0.25rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.45;
}

.dash-upload {
    height: 2.625rem;
    flex: 0 0 auto;
    padding: 0 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.dash-upload .icon,
.dash-upload-button .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.dash-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--card);
    overflow: hidden;
}

/* Find a resource */
.dash-find {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.375rem;
    overflow: visible;
}

.dash-find h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
}

.dash-find-row {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.dash-search {
    display: flex;
    height: 2.875rem;
    min-width: 0;
    flex: 1 1 0;
    gap: 0.5rem;
    align-items: center;
    padding: 0 0.3125rem 0 0.75rem;
    border: 1px solid var(--input);
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--muted-foreground);
}

.dash-search:focus-within {
    border-color: var(--ring);
    box-shadow: var(--focus-ring);
}

.dash-search > .icon {
    width: 1.375rem;
    height: 1.375rem;
}

.dash-search input {
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex: 1 1 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--foreground);
    font-size: 0.9375rem;
    box-shadow: none;
}

.dash-search input:focus {
    border: 0;
    box-shadow: none;
}

.dash-search button {
    height: 2.25rem;
    flex: 0 0 auto;
    padding: 0 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.dash-search-compact {
    width: 20rem;
    height: 2.625rem;
    flex: 0 0 auto;
}

.dash-search-compact input {
    font-size: 0.875rem;
}

.dash-search-compact button {
    height: 2rem;
}

.dash-browse {
    display: inline-flex;
    height: 2.875rem;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border: 1px solid var(--input);
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dash-browse:hover {
    background: var(--hover-surface);
}

.dash-browse .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
}

.dash-note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.78125rem;
    line-height: 1.45;
}

/* Layout */
.dash-grid {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.dash-grid-contributor {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

.dash-grid-admin {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 1.5rem;
}

.dash-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.25rem;
}

.dash-section {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.75rem;
}

.dash-section-head {
    display: flex;
    min-height: 2.125rem;
    gap: 0.625rem;
    align-items: center;
}

.dash-section-head h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
}

.dash-card-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.8125rem 1.125rem;
}

.dash-card-head h2 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.dash-link {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    color: var(--primary);
    font-size: 0.84375rem;
    font-weight: 600;
    text-decoration: none;
}

.dash-link:hover {
    text-decoration: underline;
}

.dash-link .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.dash-message,
.dash-queue-message {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.8125rem 1.125rem 0.9375rem;
    border-top: 1px solid var(--border-soft);
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.5;
}

.dash-message .icon,
.dash-queue-message .icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    color: var(--muted-foreground);
}

/* Newly approved: rows open the shared protected preview */
.dash-resource-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-resource {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.375rem 1.125rem;
    padding: 0.875rem 1.125rem;
    border-top: 1px solid var(--border-soft);
    transition: background-color 0.15s ease;
}

.dash-resource:hover {
    background: #fafbfc;
}

.dash-resource:has(.dash-resource-link:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.dash-resource-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.dash-resource-type {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.type-tile.type-tile-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
}

.type-tile.type-tile-sm .icon {
    width: 0.9375rem;
    height: 0.9375rem;
}

.type-tile.type-tile-xs {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.375rem;
}

.type-tile.type-tile-xs .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.dash-resource-type-label {
    font-size: 0.78125rem;
    font-weight: 600;
    line-height: 1.2;
}

.dash-resource-title {
    margin: 0;
    font-size: 0.90625rem;
    font-weight: 600;
    line-height: 1.35;
}

/* The title link covers the whole row, so the row is one target. */
.dash-resource-link {
    color: var(--foreground);
    text-decoration: none;
}

.dash-resource-link::after {
    position: absolute;
    inset: 0;
    content: "";
}

.dash-resource-link:focus-visible {
    outline: none;
}

.dash-resource-title-text {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.dash-resource:has(.dash-resource-link:focus-visible) .dash-resource-title-text {
    display: block;
    overflow: visible;
}

.dash-resource-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.dash-dot {
    color: #8a93a1;
}

.dash-resource-side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: space-between;
}

.dash-date {
    color: var(--muted-foreground);
    font: 0.75rem var(--font-mono);
    white-space: nowrap;
}

/* Share a resource */
.dash-share {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.125rem 1.25rem;
}

.dash-share h2 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.dash-share-lead {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.55;
}

.dash-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.45;
    list-style: none;
}

.dash-steps li {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

.dash-step-number {
    display: grid;
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--muted);
    color: var(--foreground);
    font: 600 0.75rem var(--font-mono);
}

.dash-upload-button {
    height: 2.625rem;
    align-self: flex-start;
    padding: 0 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Pending submissions (Moderator and Admin) */
.dash-queue-head {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem 0.75rem 0.875rem 1.125rem;
}

.dash-queue-title {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.dash-queue-icon {
    display: grid;
    place-items: center;
    color: var(--text-secondary);
}

.dash-queue-icon .icon {
    width: 1.375rem;
    height: 1.375rem;
}

.dash-queue-title h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.dash-queue-title .dash-link {
    height: 2rem;
    margin-left: auto;
    padding: 0 0.25rem 0 0.5rem;
    white-space: nowrap;
}

.dash-count {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    margin: 0;
}

.dash-count-number {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.dash-count-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.dash-count-note {
    color: var(--muted-foreground);
    font: 0.78125rem var(--font-mono);
}

.dash-queue-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-queue-list li {
    border-top: 1px solid var(--border-soft);
}

.dash-queue-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    align-items: center;
    padding: 0.75rem 0.875rem 0.75rem 1.125rem;
    color: inherit;
    text-decoration: none;
}

.dash-queue-link:hover {
    background: #fafbfc;
}

.dash-queue-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.dash-queue-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.3125rem;
}

.dash-queue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.78125rem;
    line-height: 1.3;
}

.dash-queue-type {
    font-weight: 600;
}

.dash-queue-rest {
    color: var(--muted-foreground);
}

.dash-queue-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dash-queue-since {
    grid-column: 1;
    color: var(--muted-foreground);
    font: 0.75rem var(--font-mono);
}

.dash-queue-cta {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: center;
    color: var(--primary);
    font-size: 0.84375rem;
    font-weight: 600;
}

.dash-queue-cta .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.dash-queue-foot {
    margin: 0;
    padding: 0.625rem 1.125rem 0.75rem;
    border-top: 1px solid var(--border-soft);
    color: var(--muted-foreground);
    font-size: 0.78125rem;
}

/* Administration (Admin) */
.dash-admin {
    padding: 0.125rem 0 0.375rem;
}

.dash-admin-group {
    margin: 0;
    padding: 0.75rem 1.125rem 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
}

.dash-admin-item {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 1.125rem;
    gap: 0.125rem 0.75rem;
    align-items: center;
    padding: 0.5625rem 0.75rem 0.5625rem 1.125rem;
    color: inherit;
    text-decoration: none;
}

.dash-admin-item:hover {
    background: #fafbfc;
}

.dash-admin-item:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.dash-admin-icon {
    grid-row: span 2;
    align-self: start;
    padding-top: 1px;
    color: var(--text-secondary);
}

.dash-admin-icon .icon {
    width: 1.375rem;
    height: 1.375rem;
}

.dash-admin-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.dash-admin-chevron {
    grid-row: span 2;
    color: #8a93a1;
}

.dash-admin-chevron .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.dash-admin-desc {
    grid-column: 2;
    color: var(--muted-foreground);
    font-size: 0.78125rem;
    line-height: 1.45;
}

@media (min-width: 48rem) {
    /* A full-width queue card has room to put the waiting date beside the
       title instead of under it. */
    .dash-queue-wide .dash-queue-link {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 1.5rem;
    }

    .dash-queue-wide .dash-queue-since {
        grid-column: 2;
        grid-row: 1;
    }

    .dash-queue-wide .dash-queue-cta {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (max-width: 63.99rem) {
    .dash-grid-contributor,
    .dash-grid-admin {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 47.99rem) {
    .dash {
        padding: 1.25rem 1rem 2.5rem;
    }

    .dash-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .dash-head-text {
        flex: 1 1 100%;
    }

    .dash-search-compact {
        width: 100%;
    }

    .dash-find-row {
        flex-wrap: wrap;
    }

    .dash-search,
    .dash-browse {
        flex: 1 1 100%;
    }

    .dash-resource {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-resource-side {
        flex-direction: row;
        align-items: center;
    }
}

/* ---------------------------------------------------------------------
   Resource library
   White toolbar band (title, search, method, filters, count) above a
   grey results area of resource cards.
   --------------------------------------------------------------------- */

.library {
    min-width: 0;
}

.library-inner {
    width: 100%;
    max-width: 84rem;
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.library-toolbar {
    padding: 1.125rem 0 0.875rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.library-toolbar .library-inner {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.library-toolbar .alert {
    margin: 0;
}

.library-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.library-title-row {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.library-title-row h1 {
    flex: 0 0 auto;
    margin: 0 0.625rem 0 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.75rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.library-search-field {
    display: flex;
    height: 2.625rem;
    min-width: 0;
    flex: 1 1 0;
    gap: 0.5rem;
    align-items: center;
    padding: 0 0.3125rem 0 0.75rem;
    border: 1px solid var(--input);
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--muted-foreground);
}

.library-search-field:focus-within {
    border-color: var(--ring);
    box-shadow: var(--focus-ring);
}

.library-search-field > .icon {
    width: 1.3125rem;
    height: 1.3125rem;
}

.library-search-field input {
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex: 1 1 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--foreground);
    font-size: 0.90625rem;
    box-shadow: none;
}

.library-search-field input:focus {
    border: 0;
    box-shadow: none;
}

.library-search-button {
    height: 2rem;
    flex: 0 0 auto;
    padding: 0 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.library-upload {
    height: 2.625rem;
    flex: 0 0 auto;
    padding: 0 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.library-upload .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.segmented {
    display: flex;
    height: 2.625rem;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    gap: 0;
    padding: 0.1875rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--muted);
}

.segmented legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.segmented-option {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    cursor: pointer;
}

.segmented-option input {
    position: absolute;
    opacity: 0;
}

.segmented-option span {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.segmented-option input:checked + span {
    background: var(--card);
    color: var(--foreground);
    font-weight: 600;
    box-shadow: 0 1px 2px oklch(0% 0 0 / 8%);
}

.segmented-option input:focus-visible + span {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.library-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8125rem;
}

/* Filters: one compact chip per filter. An unset chip reads like its
   "All …" choice; an applied chip is tinted, names its filter and carries
   its own remove control. Each chip is still a native select. */
.filter-disclosure-summary {
    display: none;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

.filter-chip-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-chip {
    position: relative;
    display: inline-flex;
    height: 2rem;
    max-width: 100%;
    align-items: center;
    padding-left: 0.75rem;
    border: 1px solid #d5dbe3;
    border-radius: 999px;
    background: var(--card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.filter-chip:hover {
    border-color: oklch(52% 0.16 255 / 45%);
}

.filter-chip:focus-within {
    border-color: var(--ring);
    box-shadow: var(--focus-ring);
}

.filter-chip-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.filter-chip select {
    width: auto;
    max-width: 15rem;
    height: 100%;
    min-height: 0;
    padding: 0 1.75rem 0 0;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    background-position: right 0.4375rem center;
    background-size: 1.125rem;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-overflow: ellipsis;
    box-shadow: none;
    field-sizing: content;
}

.filter-chip select:focus {
    border: 0;
    box-shadow: none;
}

.filter-chip.is-active {
    border-color: transparent;
    background: var(--accent-surface);
    color: var(--accent-ink);
}

.filter-chip.is-active .filter-chip-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    margin-right: 0.3125rem;
    white-space: nowrap;
}

.filter-chip.is-active .filter-chip-label::after {
    content: ":";
}

.filter-chip.is-active select {
    padding-right: 0;
    background-image: none;
    font-weight: 600;
}

.filter-chip-clear {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    place-items: center;
    margin: 0 0.25rem 0 0.125rem;
    border-radius: 999px;
    color: var(--accent-ink);
}

.filter-chip-clear:hover {
    background: oklch(52% 0.16 255 / 14%);
}

.filter-chip-clear .icon {
    width: 1rem;
    height: 1rem;
}

.filter-count {
    margin: 0 0 0 auto;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.filter-count strong {
    color: var(--foreground);
    font-weight: 600;
}

.library-reset {
    margin-left: 0.25rem;
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
}

.library-reset:hover {
    text-decoration: underline;
}

.library-results {
    padding: 1.25rem 0 2rem;
}

.library-results .library-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.library-results .alert {
    margin: 0;
}

.library-note {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.library-note .icon {
    width: 0.9375rem;
    height: 0.9375rem;
    margin-top: 0.15rem;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: 1rem;
}

.resource-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 0.875rem 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.resource-card:hover {
    border-color: oklch(52% 0.16 255 / 40%);
    box-shadow: 0 2px 10px oklch(23% 0.02 255 / 7%);
}

.resource-card:has(.resource-card-link:focus-visible) {
    border-color: var(--ring);
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.resource-card-head {
    display: flex;
    min-height: 1.75rem;
    gap: 0.5rem;
    align-items: center;
}

.type-tile {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.4375rem;
    background: var(--muted);
    color: var(--text-secondary);
}

.type-tile .icon {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 1.75;
}

.resource-card-type {
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}

.resource-card-title {
    margin: 0;
    font-size: 0.96875rem;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -0.005em;
}

/* The title link covers the whole card, so the card is one target. */
.resource-card-link {
    color: var(--foreground);
    text-decoration: none;
}

.resource-card-link::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
}

.resource-card-link:focus-visible {
    outline: none;
}

.resource-card-title-text {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.resource-card-class {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

.resource-card-description {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.resource-card-byline {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.78125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.resource-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    margin-top: auto;
    padding-top: 0.625rem;
    border-top: 1px solid var(--border-soft);
}

.file-chip {
    display: inline-flex;
    padding: 0.1875rem 0.3125rem;
    border: 1px solid var(--input);
    border-radius: 0.25rem;
    background: var(--card);
    color: var(--text-secondary);
    font: 500 0.6875rem/1 var(--font-mono);
    letter-spacing: 0.02em;
}

.file-size {
    color: var(--muted-foreground);
    font: 0.75rem var(--font-mono);
}

.resource-card-cta {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: var(--primary);
    font-size: 0.84375rem;
    font-weight: 600;
}

.resource-card-cta .icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform 0.15s ease;
}

.resource-card:hover .resource-card-cta .icon {
    transform: translateX(2px);
}

.semantic-search-status {
    margin-top: 0;
}

.semantic-match-context {
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--ai-surface);
    font-size: 0.8125rem;
}

.semantic-match-context p {
    margin: 0;
}

.semantic-match-label {
    color: var(--ai);
    font-size: 0.75rem;
    font-weight: 600;
}

.semantic-match-locator {
    margin-top: 0.25rem;
    color: var(--muted-foreground);
}

.semantic-match-excerpt {
    display: -webkit-box;
    margin-top: 0.25rem;
    overflow: hidden;
    color: var(--foreground);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.library-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 3rem 1.25rem;
    border: 1px dashed var(--input);
    border-radius: 0.75rem;
    background: var(--card);
    text-align: center;
}

.library-empty h3 {
    margin: 0;
}

.library-empty p {
    max-width: 30rem;
    margin: 0 0 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.library-empty-icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-surface);
    color: var(--primary);
}

.library-empty-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.resource-card-nopreview {
    color: var(--muted-foreground);
    font-size: 0.78125rem;
}

/* Keyboard focus shows the whole title; otherwise long titles stop at three lines. */
.resource-card:has(.resource-card-link:focus-visible) .resource-card-title-text {
    display: block;
    overflow: visible;
}

.library-note-line {
    display: block;
}

/* The keyboard hint is only true once the preview script is running. */
.library-hint {
    display: none;
    margin: 0;
    color: var(--muted-foreground);
    font: 0.75rem var(--font-mono);
    text-align: right;
}

html.has-js .library-hint {
    display: block;
}

/* ---------------------------------------------------------------------
   Resource preview dialog (opened from Library cards)
   The stage shows the real file when the browser can render the format,
   otherwise an honest "no preview" state with Download. The detail column
   is the same information the card summarises.
   --------------------------------------------------------------------- */

html.has-dialog {
    overflow: hidden;
}

.preview-dialog {
    width: min(68.75rem, calc(100vw - 3rem));
    max-width: none;
    height: calc(100vh - 4.5rem);
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 0.875rem;
    background: var(--card);
    color: var(--foreground);
    box-shadow:
        0 24px 70px oklch(23% 0.02 255 / 30%),
        0 2px 6px oklch(23% 0.02 255 / 12%);
    overflow: hidden;
}

.preview-dialog[open] {
    display: flex;
    flex-direction: column;
}

.preview-dialog::backdrop {
    background: oklch(23% 0.02 255 / 50%);
}

.preview-bar {
    display: flex;
    height: 3.5rem;
    flex: 0 0 auto;
    gap: 0.25rem;
    align-items: center;
    padding: 0 0.625rem 0 0.75rem;
    border-bottom: 1px solid var(--border);
}

.preview-spacer {
    flex: 1 1 0;
}

.preview-position {
    margin-left: 0.375rem;
    color: var(--muted-foreground);
    font: 0.78125rem var(--font-mono);
}

.preview-icon-button {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
}

.preview-icon-button:hover {
    border: 0;
    background: var(--hover-surface);
    color: var(--foreground);
}

.preview-icon-button .icon {
    width: 1.375rem;
    height: 1.375rem;
}

.preview-icon-button[aria-disabled="true"] {
    color: #a9b1bd;
    cursor: default;
}

.preview-icon-button[aria-disabled="true"]:hover {
    background: transparent;
    color: #a9b1bd;
}

.preview-close {
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 0.375rem;
}

.preview-full-link {
    display: inline-flex;
    height: 2.25rem;
    gap: 0.375rem;
    align-items: center;
    padding: 0 0.75rem;
    border: 1px solid var(--input);
    border-radius: 0.5rem;
    color: var(--foreground);
    font-size: 0.84375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.preview-full-link:hover {
    background: var(--hover-surface);
}

.preview-full-link .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.preview-body {
    display: grid;
    min-height: 0;
    flex: 1 1 0;
    grid-template-columns: minmax(0, 1fr) 24.5rem;
}

.preview-stage {
    position: relative;
    display: flex;
    min-height: 0;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--muted);
    overflow: hidden;
}

.preview-frame {
    display: block;
    width: 100%;
    min-height: 0;
    flex: 1 1 0;
    border: 0;
    background: var(--card);
}

.preview-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 0;
    padding: 1.5rem;
    object-fit: contain;
}

.preview-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    pointer-events: none;
}

.preview-state {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 2.5rem;
    text-align: center;
}

.preview-state-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.preview-state-copy {
    max-width: 24rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.preview-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.preview-side {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.preview-side-scroll {
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.375rem 1.5rem 1.125rem;
    overflow: auto;
}

.preview-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.preview-meta-row .type-tile {
    width: 1.625rem;
    height: 1.625rem;
}

.preview-meta-row .type-tile .icon {
    width: 1.0625rem;
    height: 1.0625rem;
}

.preview-title {
    margin: 0;
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.preview-title:focus {
    outline: none;
}

.preview-uploader {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
}

.preview-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.preview-facts {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    margin: 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-soft);
    font-size: 0.84375rem;
    line-height: 1.4;
}

.preview-facts dt {
    color: var(--muted-foreground);
}

.preview-facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.preview-facts dd[data-fact="submitted"] {
    align-self: center;
    font: 0.78125rem var(--font-mono);
}

.preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.preview-tags li {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--muted);
    font-size: 0.78125rem;
}

.preview-note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.78125rem;
    line-height: 1.5;
}

.preview-side-foot {
    flex: 0 0 auto;
    padding: 0.875rem 1.5rem 1.125rem;
    border-top: 1px solid var(--border);
}

.preview-side-foot .download-button {
    width: 100%;
}

/* Unavailable: no details, no download, one way back. */
.preview-dialog.is-unavailable .preview-body {
    grid-template-columns: minmax(0, 1fr);
}

.preview-dialog.is-unavailable .preview-side,
.preview-dialog.is-unavailable .preview-full-link {
    display: none;
}

.preview-dialog.is-unavailable .preview-stage {
    border-right: 0;
}

/* ---------------------------------------------------------------------
   Resource detail
   --------------------------------------------------------------------- */

.app-content .resource-detail {
    max-width: 80rem;
}

.detail-header {
    margin-bottom: 1.25rem;
}

.detail-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.625rem;
}

.detail-header h1 {
    max-width: 60rem;
    margin: 0 0 0.25rem;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.detail-byline {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1rem;
    align-items: start;
}

.detail-main {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.detail-aside {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    display: grid;
    gap: 0.75rem;
}

/* No file preview exists yet, so this says so plainly and puts the
   protected download where the preview would be. */
.file-stage {
    display: flex;
    min-height: 18rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--muted);
    text-align: center;
}

.file-stage-tile {
    display: grid;
    width: 4rem;
    height: 4.875rem;
    place-items: center;
    border: 1px solid #d5dbe3;
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--text-secondary);
    font: 500 0.875rem var(--font-mono);
}

.file-stage-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.file-stage-copy {
    max-width: 24rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.file-stage-name {
    max-width: 100%;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.download-button {
    display: flex;
    min-height: 2.75rem;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 1.125rem;
    border: 1px solid var(--primary);
    border-radius: 0.5rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.90625rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.download-button:hover {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
}

.download-button .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.download-button-size {
    font: 500 0.78125rem var(--font-mono);
    opacity: 0.9;
}

.download-button-stage {
    display: inline-flex;
}

.download-button-aside {
    width: 100%;
}

/* Details page: the same real preview in the file panel. */
.file-stage.file-stage-live {
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.file-stage-frame {
    display: block;
    width: 100%;
    height: clamp(26rem, 72vh, 54rem);
    border: 0;
    background: var(--card);
}

.file-stage-view {
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.file-stage-image {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 0.25rem;
    background: var(--card);
}

.file-stage-foot {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--card);
}

.file-stage-foot .file-stage-name {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

.file-stage-foot .download-button {
    min-height: 2.5rem;
    flex: 0 0 auto;
}

.resource-description {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.detail-facts {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.625rem 1rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.detail-facts dt {
    color: var(--muted-foreground);
}

.detail-facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.action-panel {
    display: grid;
    gap: 0.875rem;
}

.action-panel-note {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.45;
}

.action-panel-note .icon {
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.1rem;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.stat-row dt {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.stat-row dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.related-resource-list {
    display: grid;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.related-resource-list li + li {
    border-top: 1px solid var(--border);
}

.related-resource-link {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    color: var(--foreground);
    text-decoration: none;
}

.related-resource-link:hover .related-resource-title {
    color: var(--primary);
    text-decoration: underline;
}

.related-resource-title {
    font-size: 0.875rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.related-resource-meta {
    flex: 0 0 auto;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.empty-state {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.empty-state h3 {
    margin: 0;
}

.empty-state p {
    max-width: 30rem;
    margin: 0 0 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.empty-state-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
}

/* ---------------------------------------------------------------------
   Upload workflow (file → details → review → confirmation)
   Scoped to .upload-page; the shared .dropzone base rules below are also
   used by the Admin CSV import, so only the Upload page overrides them.
   --------------------------------------------------------------------- */

.upload-page {
    --up-danger: #b3261e;
    --up-danger-ink: #8e1f17;
    --up-danger-line: #f0b8b2;
    --up-danger-bg: #fdf0ee;
    --up-outline: #cfd5dd;
}

.upload-header {
    max-width: 47.5rem;
    margin-bottom: 1.125rem;
}

.upload-header h1 {
    margin-bottom: 0.375rem;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.upload-page > .alert {
    margin-bottom: 1rem;
}

/* Stepper: pills joined by short rules, finished steps are links back. */
.stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    margin: 0 0 1.125rem;
    padding: 0;
    list-style: none;
}

.stepper-item {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.stepper-item + .stepper-item::before {
    width: 2.25rem;
    height: 2px;
    border-radius: 1px;
    background: var(--input);
    content: "";
}

.stepper .stepper-button {
    display: inline-flex;
    min-height: 2.25rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0 0.75rem 0 0.3125rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.stepper .stepper-button:disabled {
    background: transparent;
    color: var(--muted-foreground);
    cursor: default;
}

.stepper .stepper-button:not(:disabled):hover {
    background: var(--accent-surface);
    color: var(--foreground);
}

.stepper-marker {
    display: grid;
    width: 1.625rem;
    height: 1.625rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px #c3c9d2;
    color: var(--muted-foreground);
    font: 500 0.8125rem var(--font-mono);
}

.stepper-marker .icon {
    display: none;
    width: 1rem;
    height: 1rem;
    stroke-width: 3;
}

.stepper-item.is-current .stepper-button {
    color: var(--foreground);
    font-weight: 600;
}

.stepper-item.is-current .stepper-marker {
    box-shadow: inset 0 0 0 2px var(--primary);
    color: var(--accent-ink);
    font-weight: 600;
}

.stepper-item.is-complete .stepper-button {
    color: var(--foreground);
}

.stepper-item.is-complete .stepper-marker {
    background: var(--primary);
    box-shadow: none;
    color: var(--primary-foreground);
}

.stepper-item.is-complete .stepper-number {
    display: none;
}

.stepper-item.is-complete .stepper-marker .icon {
    display: block;
}

/* Layout: the form and a guidance/preview column. */
.upload-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
}

.upload-form {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.upload-step,
.upload-review-step {
    display: grid;
    gap: 1rem;
}

.upload-step-card {
    display: grid;
    gap: 1.125rem;
    padding: 1.25rem 1.375rem 1.375rem;
}

.upload-step-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0;
    outline: none;
}

.upload-step-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.upload-step-hint {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.upload-step-title:focus-visible,
.upload-summary:focus-visible,
.upload-alert:focus-visible,
.tag-fieldset:focus-visible,
.upload-done h1:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
}

/* Alerts that live inside the flow (file problems, send outcomes). */
.upload-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.875rem 0.5rem 0.875rem 1rem;
    border: 1px solid var(--up-danger-line);
    border-radius: var(--radius-sm);
    background: var(--up-danger-bg);
}

.upload-alert:not(:has(.upload-alert-close)) {
    padding-right: 1rem;
}

.upload-alert-icon {
    width: 1.375rem;
    height: 1.375rem;
    color: var(--up-danger);
}

.upload-alert-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.3125rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.upload-alert-body strong {
    color: var(--up-danger-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.upload-alert-body > span:empty {
    display: none;
}

.upload-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.upload-alert-info {
    border-color: oklch(52% 0.16 255 / 20%);
    background: var(--surface);
}

.upload-alert-info .upload-alert-icon {
    color: var(--primary);
}

.upload-alert-info .upload-alert-body strong {
    color: var(--surface-foreground);
}

/* The three outcome icons live in spans so the icon can change. */
.upload-alert > span[data-outcome-icon] {
    display: contents;
}

.upload-alert .upload-alert-close {
    width: 2.25rem;
    min-height: 2.25rem;
    margin-top: -0.375rem;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--muted-foreground);
}

.upload-alert .upload-alert-close:hover {
    border-color: transparent;
    background: oklch(55% 0.2 25 / 10%);
    color: var(--up-danger-ink);
}

/* Step 1: native file input stretched over a styled drop area, so click,
   keyboard, and drag-and-drop all remain native browser behavior. */
.dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 1.75rem 1rem;
    border: 1.5px dashed oklch(52% 0.16 255 / 35%);
    border-radius: var(--radius-lg);
    background: oklch(98.4% 0.01 248);
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.dropzone:hover,
.dropzone.is-dragover {
    border-color: var(--primary);
    background: var(--surface);
}

.dropzone:focus-within {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.dropzone:has(.dropzone-input[aria-invalid="true"]) {
    border-color: var(--destructive);
}

.dropzone-input,
.dropzone-input[type="file"] {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    box-shadow: none;
    cursor: pointer;
}

.dropzone-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    margin-bottom: 0.25rem;
    border-radius: 999px;
    background: var(--card);
    color: var(--primary);
    box-shadow: var(--shadow-card);
}

.dropzone-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.dropzone-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.dropzone-hint {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.dropzone-button {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: 0 1px 2px oklch(23% 0.03 255 / 5%);
}

/* Step 1: drop area (native file input stretched over it, so click,
   keyboard and drag-and-drop stay native browser behavior). */
.upload-page .dropzone {
    gap: 0.625rem;
    padding: 1.875rem 1.25rem 1.625rem;
    border: 1.5px dashed #b9c2ce;
    background: #f8f9fb;
}

.upload-page .dropzone:hover,
.upload-page .dropzone.is-dragover {
    border-color: var(--primary);
    background: #f4f7fe;
}

.upload-page .dropzone-icon {
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary);
}

.upload-page .dropzone-icon .icon {
    width: 2rem;
    height: 2rem;
    stroke-width: 1.5;
}

.upload-page .dropzone-title {
    font-size: 0.9375rem;
}

.upload-page .dropzone-button {
    min-height: 2.625rem;
    gap: 0.5rem;
    margin: 0;
    padding: 0 1rem;
    border-color: var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    box-shadow: none;
    color: var(--primary-foreground);
    font-size: 0.875rem;
    font-weight: 600;
}

.upload-page .dropzone:hover .dropzone-button {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
}

.upload-page .dropzone-button .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.upload-page .dropzone-hint {
    font-size: 0.8125rem;
    line-height: 1.45;
}

.dropzone-required {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    color: var(--up-danger);
    font-size: 0.84375rem;
    font-weight: 600;
}

.dropzone-required .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.file-ext {
    display: grid;
    width: 2.75rem;
    height: 3.375rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #d5dbe3;
    border-radius: 0.375rem;
    background: var(--card);
    color: var(--text-secondary);
    font: 500 0.71875rem var(--font-mono);
}

.file-ext-small {
    width: 2.25rem;
    height: 2.75rem;
    font-size: 0.6875rem;
}

.file-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.875rem;
    align-items: center;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
}

.file-card-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.file-card-name {
    font-size: 0.90625rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.file-card-meta {
    color: var(--muted-foreground);
    font: 0.78125rem var(--font-mono);
}

.file-card-ready {
    display: inline-flex;
    gap: 0.3125rem;
    align-items: center;
    color: var(--accent-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.file-card-ready .icon {
    width: 1.0625rem;
    height: 1.0625rem;
}

.file-card-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.file-card-actions button {
    min-height: 2.375rem;
    padding: 0 0.75rem;
    font-size: 0.84375rem;
    font-weight: 600;
}

.file-card-actions .button-ghost {
    color: var(--text-secondary);
}

/* Live text for screen readers; the file card shows the same thing. */
.upload-file-feedback {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.upload-file-note {
    margin: 0;
}

/* Step 2 */
.upload-file-strip {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--background);
}

.upload-file-strip-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.upload-file-strip-name {
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.upload-file-strip-meta {
    color: var(--muted-foreground);
    font: 0.75rem var(--font-mono);
}

.upload-file-strip .upload-link-button {
    margin-left: auto;
}

.upload-page .button-ghost.upload-link-button {
    min-height: 2.375rem;
    padding: 0 0.625rem;
    color: var(--primary);
    font-size: 0.84375rem;
    font-weight: 600;
}

.upload-page .button-ghost.upload-link-button:hover {
    background: #f4f7fe;
}

.upload-summary {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--up-danger-line);
    border-radius: var(--radius-sm);
    background: var(--up-danger-bg);
    color: var(--up-danger-ink);
}

.upload-summary h3 {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.upload-summary h3 .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--up-danger);
}

.upload-summary ul {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding-left: 1.75rem;
}

.upload-summary a {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    color: var(--up-danger-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.upload-step-card .field {
    gap: 0.375rem;
}

.upload-step-card .field > label,
.tag-fieldset legend {
    font-size: 0.875rem;
    font-weight: 600;
}

.upload-step-card .field input,
.upload-step-card .field select,
.upload-step-card .field textarea {
    min-height: 2.75rem;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    font-size: 0.9375rem;
}

.upload-step-card .field select {
    padding-right: 2.375rem;
}

.upload-step-card .field textarea {
    min-height: 5.5rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.upload-step-card .field-error {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    color: var(--up-danger);
    font-size: 0.84375rem;
    font-weight: 600;
    line-height: 1.35;
}

.upload-step-card .field-error:not([hidden])::before {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
    -webkit-mask: url("/assets/images/alert-circle.svg") center / contain no-repeat;
    mask: url("/assets/images/alert-circle.svg") center / contain no-repeat;
}

.upload-step-card input[aria-invalid="true"],
.upload-step-card select[aria-invalid="true"],
.upload-step-card textarea[aria-invalid="true"] {
    border-color: var(--up-danger);
}

.upload-metadata-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tag-fieldset {
    gap: 0.375rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
}

.tag-fieldset legend {
    margin-bottom: 0.25rem;
    padding: 0;
}

.tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-option {
    position: relative;
    display: inline-flex;
    min-height: 2rem;
    gap: 0.25rem;
    align-items: center;
    margin: 0;
    padding: 0.25rem 0.875rem;
    border: 1px solid var(--input);
    border-radius: 999px;
    background: var(--card);
    color: var(--foreground);
    font-size: 0.84375rem;
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tag-option:hover {
    border-color: oklch(52% 0.16 255 / 40%);
}

.tag-option input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
}

.tag-option:has(input:checked) {
    border-color: var(--primary);
    background: var(--accent-surface);
    color: var(--accent-ink);
}

.tag-option:has(input:checked)::before {
    content: "\2713";
    font-weight: 700;
}

.tag-option:has(input:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Step 3 */
.review-group {
    display: grid;
}

.review-group-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0 0.125rem;
    border-bottom: 1px solid var(--border-soft);
}

.review-group-head h3 {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.84375rem;
    font-weight: 600;
}

.review-file {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0 1rem;
}

.review-file-name {
    min-width: 0;
    font-size: 0.90625rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.review-file-size {
    color: var(--muted-foreground);
    font: 0.78125rem var(--font-mono);
    white-space: nowrap;
}

.review-list {
    display: grid;
    gap: 0.625rem 1rem;
    margin: 0;
    padding: 0.875rem 0 0.5rem;
}

.review-list > div {
    display: grid;
    grid-template-columns: 9.375rem minmax(0, 1fr);
    gap: 1rem;
}

.review-list dt {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.5;
}

.review-list dd {
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.review-list dd.is-empty {
    color: var(--muted-foreground);
}

.upload-next-card {
    display: grid;
    gap: 0.625rem;
    padding: 1.125rem 1.375rem 1.25rem;
}

.upload-next-card h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.upload-next-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    list-style: none;
}

.upload-next-list li {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

.upload-next-list strong {
    color: var(--foreground);
    font-weight: 600;
}

.upload-next-number {
    display: grid;
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--muted);
    color: var(--text-secondary);
    font: 600 0.75rem var(--font-mono);
}

.badge-pending {
    border-color: oklch(52% 0.12 70 / 25%);
    background: var(--warning-surface);
    color: var(--warning);
}

/* Actions under each step */
.upload-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.upload-actions-spacer {
    flex: 1 1 0;
}

.upload-step-actions > button,
.upload-step-actions > a,
.upload-alert-actions > button,
.upload-alert-actions > a,
.upload-done-actions > a {
    min-height: 2.625rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.upload-step-actions .icon,
.upload-alert-actions .icon,
.upload-done-actions .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.upload-progress {
    display: grid;
    width: 16.25rem;
    max-width: 100%;
    gap: 0.375rem;
}

.upload-progress-label {
    font-size: 0.84375rem;
    font-weight: 600;
}

.upload-progress-track {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--border);
}

.upload-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--primary);
    transition: width 0.2s ease;
}

/* Guidance and library illustration */
.upload-aside {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.upload-aside > div {
    display: grid;
    gap: 1rem;
}

.upload-aside-card {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.125rem 1.125rem;
}

.upload-aside-card h2 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.upload-aside-card ul {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding-left: 1.125rem;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.5;
}

.upload-aside-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.55;
}

.upload-preview {
    display: grid;
    gap: 0.5rem;
}

.upload-preview h2 {
    margin: 0;
    color: var(--muted-foreground);
    font: 500 0.6875rem var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.upload-preview-card:hover {
    border-color: var(--border);
    box-shadow: none;
}

.upload-preview-card .is-placeholder {
    color: var(--muted-foreground);
}

.upload-preview-card .type-tile > span {
    display: grid;
    place-items: center;
}

.upload-preview-title {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.upload-preview-note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.78125rem;
    line-height: 1.5;
}

/* Confirmation */
.upload-done-page {
    max-width: 52rem;
    margin-inline: 0;
}

.upload-done {
    display: grid;
    gap: 1rem;
    padding: 1.75rem 1.75rem 1.625rem;
}

.upload-done-mark {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-surface);
    color: var(--accent-ink);
}

.upload-done-mark .icon {
    width: 1.875rem;
    height: 1.875rem;
}

.upload-done-head {
    display: grid;
    gap: 0.5rem;
}

.upload-done h1 {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    outline: none;
}

.upload-done-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.upload-done-meta,
.upload-done-file {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin: 0;
}

.upload-done-mono {
    color: var(--muted-foreground);
    font: 0.78125rem var(--font-mono);
}

.upload-done-filename {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.upload-done .badge {
    min-height: 1.625rem;
    padding: 0 0.625rem 0 0.4375rem;
    font-weight: 600;
}

.upload-done .badge .icon {
    width: 1.0625rem;
    height: 1.0625rem;
}

.upload-done-lead,
.upload-done-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.upload-done-lead strong {
    color: var(--foreground);
    font-weight: 600;
}

.upload-done-note {
    font-size: 0.875rem;
}

.upload-done-outcomes {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.upload-done-outcomes li {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.90625rem;
    line-height: 1.5;
}

.upload-done-outcomes .badge {
    justify-self: start;
}

.upload-done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding-top: 0.25rem;
}

/* ---------------------------------------------------------------------
   Admin account provisioning workspace (CSV import + manual form)
   --------------------------------------------------------------------- */

.account-workspace .workspace-alert {
    margin-bottom: 1rem;
}

.workspace-alert a {
    font-weight: 600;
}

.workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 1fr);
    gap: 1rem;
    align-items: start;
}

.workspace-panel {
    display: grid;
    gap: 0.875rem;
}

.workspace-panel .panel-title,
.workspace-panel .panel-heading {
    margin-bottom: 0;
}

.workspace-panel .muted-copy {
    margin-top: -0.25rem;
}

.import-limits {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.import-limits code,
.data-table code {
    font-size: 0.75rem;
}

/* A long unbroken display name inside a confirmation list wraps instead of
   widening the whole panel. */
.import-limits strong {
    overflow-wrap: anywhere;
}

.import-form,
.manual-form {
    gap: 0.75rem;
}

.import-form > label {
    margin-bottom: -0.375rem;
}

.import-form > .field-help {
    margin-top: -0.375rem;
}

.dropzone-compact {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    text-align: left;
}

.dropzone-compact .dropzone-icon {
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
}

.dropzone-compact .dropzone-button {
    margin: 0;
}

.inline-form {
    display: contents;
}

.alert-title {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.alert p:last-child,
.alert-list {
    margin-bottom: 0;
}

.alert-list {
    margin-top: 0;
    padding-left: 1.1rem;
}

/* Tables: scrolling is contained in the table region, never the page. */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
}

.table-scroll:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.data-table th {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.data-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.format-table .data-table td:first-child {
    white-space: nowrap;
}

.import-table {
    min-width: 40rem;
}

.cell-code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    white-space: nowrap;
}

.cell-muted {
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.row-invalid td {
    background: var(--destructive-surface);
}

.row-issues {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    color: oklch(45% 0.17 25);
    font-size: 0.8125rem;
    list-style: none;
}

.row-issues strong {
    font-weight: 600;
}

.badge-error {
    border-color: oklch(55% 0.2 25 / 25%);
    background: var(--destructive-surface);
    color: oklch(45% 0.17 25);
}

.table-panel {
    display: grid;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.table-panel-heading {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
}

.row-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.confirm-panel,
.result-panel,
.single-result-panel {
    display: grid;
    gap: 0.875rem;
    max-width: 44rem;
}

/* One shrinkable column, and long unbroken names or usernames wrap inside it.
   An implicit "auto" grid track grows to the longest unbreakable word, which
   carried the text and the action links out of the panel and, on a phone,
   widened the layout viewport. */
.confirm-panel,
.result-panel {
    grid-template-columns: minmax(0, 1fr);
}

.confirm-panel p,
.confirm-panel li,
.result-panel p,
.result-panel li {
    overflow-wrap: anywhere;
}

.confirm-panel .panel-title {
    margin: 0;
}

.result-panel p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.username-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.username-list li {
    padding: 0.125rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--neutral-surface);
}

.credential-code {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border: 1px solid oklch(52% 0.16 255 / 25%);
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    user-select: all;
}

.result-actions {
    margin-top: 1rem;
}

.single-result-panel .account-summary {
    margin: 0;
}

.single-result-panel .credential-once {
    margin: 0;
}

/* ---------------------------------------------------------------------
   Pending Queue and submission review (staff)
   Layout and hierarchy follow Selected Design v9 (Pending Queue and review).
   --------------------------------------------------------------------- */

.mq,
.rv {
    --my-warm-ink: #8a4510;
    --my-warm-bg: #fdf1e4;
    --my-warm-line: #f1d2ae;
}

/* Pending Queue ------------------------------------------------------- */

.mq-header {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.125rem;
}

.mq-header h1 {
    margin-bottom: 0.25rem;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.mq-header .page-subtitle {
    max-width: 38rem;
    font-size: 0.875rem;
}

.mq-count {
    margin: 0;
    color: var(--muted-foreground);
    font: 0.8125rem var(--font-mono);
    white-space: nowrap;
}

.mq > .my-banner,
.mq > .alert {
    margin-bottom: 1.125rem;
}

.mq-list {
    display: grid;
    margin: 0 0 0.875rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-card);
    list-style: none;
}

.mq-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem 8.5rem auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-soft);
}

.mq-row:first-child {
    border-top: 0;
}

.mq-main {
    display: grid;
    min-width: 0;
    gap: 0.3125rem;
}

.mq-kindline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.875rem;
    align-items: center;
    margin: 0;
    font-size: 0.78125rem;
    font-weight: 600;
}

.mq-kind,
.mq-type {
    display: inline-flex;
    gap: 0.3125rem;
    align-items: center;
}

.mq-kind {
    color: var(--text-secondary);
}

.mq-kind .icon {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
}

.mq-kind-resubmitted,
.mq-kind-resubmitted .icon {
    color: var(--accent-ink);
}

.mq-type {
    color: var(--text-secondary);
    font-weight: 500;
}

.mq-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mq-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.mq-who {
    display: grid;
    min-width: 0;
    gap: 0.0625rem;
    font-size: 0.8125rem;
}

.mq-who-name {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mq-who-role,
.mq-since-label {
    color: var(--muted-foreground);
}

.mq-since {
    display: grid;
    gap: 0.0625rem;
    font-size: 0.75rem;
}

.mq-since-date {
    color: var(--foreground);
    font: 0.8125rem var(--font-mono);
}

.mq-review {
    display: inline-flex;
    min-height: 2.375rem;
    align-items: center;
    padding: 0 1rem;
    border: 1px solid #c9d7f3;
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--primary-hover);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.mq-review:hover {
    background: #f4f7fe;
}

.mq-empty {
    display: grid;
    max-width: 34rem;
    gap: 0.5rem;
    justify-items: start;
}

.mq-empty h2 {
    margin: 0;
    font-size: 1.125rem;
}

.mq-empty p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Submission review --------------------------------------------------- */

.rv-back {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    margin: 0 0 0.375rem -0.375rem;
    padding: 0 0.625rem 0 0.25rem;
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.rv-back:hover {
    background: var(--accent-surface);
}

.rv-back .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.rv-head {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
}

.rv-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin: 0;
}

.rv-kind {
    display: inline-flex;
    gap: 0.3125rem;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.78125rem;
    font-weight: 600;
}

.rv-kind .icon {
    width: 1.0625rem;
    height: 1.0625rem;
    color: var(--muted-foreground);
}

.rv-kind-resubmitted,
.rv-kind-resubmitted .icon {
    color: var(--accent-ink);
}

.rv-head h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.rv-by {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.rv > .alert {
    margin-bottom: 1rem;
}

.rv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 21.5rem);
    gap: 1.25rem;
    align-items: start;
}

.rv-main,
.rv-side {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.rv-main > section,
.rv-side > section {
    min-width: 0;
}

.rv h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.rv h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Resubmission and replacement notices */

.rv-resub,
.rv-note {
    display: grid;
    gap: 0.625rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #f8f9fb;
}

.rv-resub {
    border-color: var(--my-warm-line);
    background: #fffaf3;
}

.rv-resub h2,
.rv-note h2,
.rv-alert h2 {
    display: flex;
    gap: 0.4375rem;
    align-items: center;
}

.rv-resub h2 {
    color: var(--my-warm-ink);
}

.rv-resub h2 .icon,
.rv-note h2 .icon,
.rv-alert h2 .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.rv-note p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.rv-eyebrow {
    margin: 0;
    color: var(--my-warm-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.rv-quote {
    margin: 0;
    padding: 0.125rem 0 0.125rem 0.875rem;
    border-left: 3px solid var(--my-warm-line);
    font-size: 0.9375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.rv-changes {
    display: grid;
    gap: 0.375rem;
    margin: 0;
}

.rv-changes > div {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.75rem;
    font-size: 0.875rem;
}

.rv-changes dt {
    color: var(--muted-foreground);
    font-weight: 600;
}

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

.rv-fine {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* File and viewer */

.rv-file {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.rv-filebar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 0.875rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}

.rv-filename {
    min-width: 0;
    flex: 1 1 10rem;
    font: 500 0.875rem var(--font-mono);
    overflow-wrap: anywhere;
}

.rv-download {
    min-height: 2.25rem;
    margin-left: auto;
    font-size: 0.84375rem;
    font-weight: 600;
}

.rv-download .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.rv-viewer {
    display: grid;
    min-height: 22rem;
    align-content: center;
    justify-items: center;
    gap: 0.5rem;
    background: #eef0f4;
    text-align: center;
}

.rv-viewer[data-state="ready"] {
    display: block;
    min-height: 0;
    text-align: left;
}

.rv-frame {
    display: block;
    width: 100%;
    height: min(70vh, 44rem);
    min-height: 26rem;
    border: 0;
    background: #fff;
}

.rv-frame-text {
    height: min(50vh, 28rem);
    min-height: 14rem;
}

.rv-image {
    display: block;
    max-width: 100%;
    max-height: 44rem;
    margin: 0 auto;
}

.rv-viewer-loading {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.rv-viewer-state,
.rv-viewer-fail,
.rv-viewer-none {
    display: grid;
    max-width: 30rem;
    gap: 0.5rem;
    justify-items: center;
    padding: 2rem 1.25rem;
}

.rv-viewer-fail,
.rv-viewer-none {
    max-width: none;
    width: 100%;
}

.rv-viewer-fail > *,
.rv-viewer-none > * {
    max-width: 32rem;
}

.rv-viewer p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.rv-viewer .rv-viewer-title {
    color: var(--foreground);
    font-size: 0.9375rem;
    font-weight: 600;
}

.rv-viewer-fail {
    background: var(--destructive-surface);
}

.rv-viewer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.rv-viewer-actions .button-link,
.rv-viewer-actions .button-secondary,
.rv-viewer-actions button {
    min-height: 2.375rem;
    font-size: 0.84375rem;
    font-weight: 600;
}

.rv-viewer-note {
    margin: 0;
    padding: 0.875rem 1rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

/* Details */

.rv-details {
    display: grid;
    gap: 0.875rem;
}

.rv-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem 1.5rem;
    margin: 0;
}

.rv-dl > div {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.rv-dl .rv-wide {
    grid-column: 1 / -1;
}

.rv-dl dt {
    color: var(--muted-foreground);
    font-size: 0.78125rem;
    font-weight: 600;
}

.rv-dl dd {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rv-prose {
    white-space: pre-wrap;
}

/* Decision */

.rv-decision {
    display: grid;
    gap: 0.875rem;
}

.rv-decision form {
    display: grid;
    gap: 0.875rem;
}

.rv-options {
    gap: 0.5rem;
    padding: 0;
    border: 0;
}

.rv-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--card);
    cursor: pointer;
}

.rv-option:hover {
    background: #f8f9fb;
}

.rv-option:has(input:checked) {
    border-color: var(--primary);
    background: #f4f7fe;
}

.rv-option:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
}

.rv-option.is-blocked {
    background: #f8f9fb;
    cursor: not-allowed;
}

.rv-option input {
    margin-top: 0.1875rem;
}

.rv-option-body {
    display: grid;
    min-width: 0;
    gap: 0.1875rem;
}

.rv-option-label {
    font-size: 0.9375rem;
    font-weight: 600;
}

.rv-option-text {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.rv-option.is-blocked .rv-option-label,
.rv-option.is-blocked .rv-option-text {
    color: var(--muted-foreground);
}

.rv-note-field {
    display: grid;
    gap: 0.375rem;
}

.rv-note-field label {
    font-size: 0.875rem;
    font-weight: 600;
}

.rv-note-field textarea {
    min-height: 6.5rem;
}

.rv-confirm {
    min-height: 2.75rem;
    width: 100%;
    font-size: 0.9375rem;
    font-weight: 600;
}

.rv-confirm:disabled {
    cursor: progress;
    opacity: 0.7;
}

.rv-confirm-inline {
    width: auto;
    padding: 0 1.125rem;
    text-decoration: none;
}

a.rv-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--primary-foreground);
}

a.rv-confirm:hover {
    background: var(--primary-hover);
}

/* Uploader and history */

.rv-uploader {
    display: grid;
    gap: 0.25rem;
}

.rv-uploader p {
    margin: 0;
    font-size: 0.8125rem;
}

.rv-uploader .rv-uploader-name {
    font-size: 0.9375rem;
    font-weight: 600;
}

.rv-history {
    display: grid;
    gap: 0.625rem;
}

/* Unconfirmed and already-reviewed explanations */

.rv-alert {
    display: grid;
    gap: 0.625rem;
    padding: 1rem 1.125rem;
    border: 1px solid #c9d7f3;
    border-radius: var(--radius-md);
    background: #f4f7fe;
    font-size: 0.875rem;
    line-height: 1.55;
}

.rv-alert:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.rv-alert p {
    margin: 0;
    overflow-wrap: anywhere;
}

.rv-alert h2 {
    color: var(--accent-ink);
}

.rv-alert-warn {
    border-color: var(--my-warm-line);
    background: #fffaf3;
}

.rv-alert-warn h2 {
    color: var(--my-warm-ink);
}

.rv-kept {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--card);
    white-space: pre-wrap;
}

.rv-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    margin-top: 0.125rem;
}

@media (max-width: 63.99rem) {
    .rv-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The side cards join the page's own order: file and details first,
       the decision last. */
    .rv-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .rv-side {
        display: contents;
    }

    .rv-main {
        order: 1;
    }

    .rv-uploader {
        order: 2;
    }

    .rv-history {
        order: 3;
    }

    .rv-decision,
    .rv-alert {
        order: 4;
    }
}

@media (max-width: 47.99rem) {
    .mq-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .mq-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem 0.875rem;
        align-items: start;
        padding: 0.875rem 1rem;
    }

    .mq-main {
        grid-column: 1 / -1;
    }

    .mq-who {
        grid-column: 1;
    }

    .mq-since {
        grid-column: 1;
        grid-row: 3;
    }

    .mq-review {
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: center;
        min-height: 2.75rem;
    }

    .rv-dl,
    .rv-changes > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .rv-head h1 {
        font-size: 1.25rem;
    }

    .rv-frame {
        height: 60vh;
        min-height: 20rem;
    }

    .rv-download {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------
   Admin, credential, and status utilities
   --------------------------------------------------------------------- */

.credential-once {
    margin: 1.25rem 0;
    padding: 1rem;
    border: 1px solid oklch(52% 0.16 255 / 25%);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.credential-once p {
    margin-bottom: 0.5rem;
    color: var(--surface-foreground);
    font-size: 0.8125rem;
    font-weight: 600;
}

.credential-once code {
    color: var(--foreground);
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.dashboard-card {
    display: grid;
    gap: 1.5rem;
}

.account-summary,
.checks {
    display: grid;
    gap: 0.625rem;
    margin: 0 0 1rem;
}

.account-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-summary div,
.check {
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-sm);
    background: var(--muted);
}

.account-summary dt,
.account-summary dd,
.check dt,
.check dd {
    margin: 0;
}

.account-summary dt,
.check dt {
    margin-bottom: 0.125rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.account-summary dd,
.check dd {
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

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

.prototype-note,
.note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.ready {
    color: var(--success);
}

.unavailable {
    color: var(--destructive);
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.dashboard-actions form {
    display: block;
}

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

@media (max-width: 63.99rem) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-aside {
        position: static;
        grid-row: 1;
    }

    .download-button-stage {
        display: none;
    }

    .file-stage {
        min-height: 0;
        padding-block: 2rem;
    }

    .app-content .auth-shell {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 59.99rem) {
    .upload-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 47.99rem) {
    .form-grid,
    .upload-metadata-grid,
    .account-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Phone shell (V9): a bottom tab bar of four quick links plus More. With
       JavaScript, More opens the grouped navigation as a sheet above the bar;
       without it the whole link list stays as one scrolling bar. The header
       keeps only the product name and the account menu. */
    .app-sidebar {
        position: fixed;
        z-index: 45;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        flex: 0 0 auto;
        flex-direction: row;
        padding: 0.375rem 0.25rem calc(0.375rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        border-right: 0;
        overflow: visible;
    }

    .app-brand,
    .app-sidebar-foot,
    .app-nav-label,
    .app-crumbs,
    .app-search,
    .app-account-text,
    .app-account-trigger > .ms {
        display: none;
    }

    .app-navigation {
        margin-inline: 0;
        padding-inline: 0;
        overflow-y: visible;
    }

    /* No JavaScript: one bar of every link. */
    html:not(.has-js) .app-navigation {
        display: grid;
        width: 100%;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    html:not(.has-js) .app-nav-group,
    html:not(.has-js) .app-nav-group + .app-nav-group,
    html:not(.has-js) .app-nav-menu {
        display: contents;
        margin: 0;
        padding: 0;
        border: 0;
    }

    html:not(.has-js) .app-nav-link {
        min-height: 3rem;
        gap: 0.125rem;
        padding: 0.375rem 0;
        border-radius: 0.625rem;
    }

    html:not(.has-js) .app-nav-link .ms {
        font-size: 1.4375rem;
    }

    html:not(.has-js) .app-nav-link.is-active {
        background: transparent;
    }

    /* JavaScript: the tab bar carries the bar's look, so the sidebar box
       itself is transparent and only the bar (and the sheet) are drawn. */
    html.has-js .app-sidebar {
        padding: 0;
        border-top: 0;
        background: transparent;
    }

    html.has-js .app-tabbar {
        position: relative;
        z-index: 2;
        display: grid;
        width: 100%;
        height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
        box-sizing: border-box;
        align-content: start;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 0.375rem 0.25rem env(safe-area-inset-bottom);
        border-top: 1px solid var(--border);
        background: var(--card);
    }

    .app-tab {
        display: flex;
        min-width: 0;
        min-height: 3rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        padding: 0.375rem 0;
        border: 0;
        border-radius: 0.625rem;
        background: transparent;
        color: var(--muted-foreground);
        font-size: 0.71875rem;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: none;
    }

    .app-tab .ms {
        font-size: 1.4375rem;
    }

    .app-tab:hover {
        border: 0;
        background: var(--hover-surface);
        color: var(--foreground);
    }

    .app-tab.is-active,
    .app-tab[aria-expanded="true"] {
        background: transparent;
        color: var(--accent-ink);
        font-weight: 600;
    }

    /* While the More sheet is open it owns the highlight; the current
       page is still marked inside the sheet and by aria-current. */
    html.nav-sheet-open .app-tab.is-active:not(.app-tab-more) {
        color: var(--muted-foreground);
        font-weight: 500;
    }

    html.nav-sheet-open .app-tab.is-active:not(.app-tab-more) .ms {
        font-variation-settings: "FILL" 0;
    }

    html.has-js .app-nav-scrim {
        position: fixed;
        z-index: 0;
        inset: 0;
        background: oklch(23% 0.02 255 / 40%);
    }

    html.nav-sheet-open .app-nav-scrim {
        display: block;
    }

    html.nav-sheet-open {
        overflow: hidden;
    }

    html.has-js .app-nav-sheet {
        position: fixed;
        z-index: 1;
        right: 0;
        bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
        left: 0;
        display: none;
        max-height: calc(100vh - var(--header-height) - var(--tabbar-height) - env(safe-area-inset-bottom) - 1rem);
        max-height: calc(100dvh - var(--header-height) - var(--tabbar-height) - env(safe-area-inset-bottom) - 1rem);
        padding: 0.5rem 0.75rem 0.75rem;
        border: 1px solid var(--border);
        border-bottom: 0;
        border-radius: 1rem 1rem 0 0;
        background: var(--card);
        box-shadow: 0 -12px 32px oklch(23% 0.02 255 / 16%);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html.nav-sheet-open .app-nav-sheet {
        display: block;
    }

    html.has-js .app-nav-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0 0 0.25rem 0.625rem;
    }

    .app-nav-sheet-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5rem;
    }

    .app-nav-sheet-title:focus {
        outline: none;
    }

    .app-nav-sheet-close {
        width: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--text-secondary);
        box-shadow: none;
    }

    .app-nav-sheet-close:hover {
        border: 0;
        background: var(--hover-surface);
        color: var(--foreground);
    }

    /* The sheet lists what the tab bar does not: group headings and page
       rows (touch-sized), with the tab-bar pages and any group left empty
       by that left out. */
    html.has-js .app-nav-group {
        gap: 0.125rem;
    }

    html.has-js .app-nav-group-home::after,
    html.has-js .app-nav-tile,
    html.has-js .app-nav-link[data-tab],
    html.has-js .app-nav-group-sheet-empty {
        display: none;
    }

    html.has-js .app-nav-label {
        display: block;
        margin: 0;
        padding: 0.75rem 0.625rem 0.25rem;
        color: var(--muted-foreground);
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1rem;
    }

    html.has-js .app-nav-menu {
        display: flex;
    }

    html.has-js .app-nav-menu .app-nav-link {
        min-height: 2.75rem;
    }

    :where(html.has-js) .app-nav-link-direct {
        min-height: 2.75rem;
        flex-direction: row;
        gap: 0.75rem;
        padding: 0 0.625rem;
        border-radius: 0.5rem;
        color: var(--text-secondary);
        font-size: 0.875rem;
        text-align: left;
    }

    :where(html.has-js) .app-nav-link-direct .app-nav-text-full {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }

    :where(html.has-js) .app-nav-link-direct .app-nav-text-short {
        display: none;
    }

    .app-header {
        height: 3.25rem;
        padding-inline: 1rem;
    }

    .app-header-brand {
        font-size: 1.0625rem;
    }

    .app-account,
    .app-search + .app-account {
        margin-left: auto;
    }

    /* The bell leads on the phone (the search field is hidden), then the
       account button, at the 2.75 rem touch size. */
    .app-bell,
    .app-search + .app-bell {
        width: 2.75rem;
        height: 2.75rem;
        margin-left: auto;
    }

    .app-bell + .app-account {
        margin-left: 0;
    }

    .app-account-trigger {
        width: 2.75rem;
        justify-content: center;
        padding: 0;
        border-radius: 999px;
    }

    .app-content {
        padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    }

    /* Library: the title row stacks and the filters wait behind a button. */
    .library-toolbar {
        padding-top: 1rem;
    }

    .library-title-row {
        flex-wrap: wrap;
    }

    .library-title-row h1 {
        flex: 1 1 100%;
        margin: 0;
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .library-search-field {
        height: 2.75rem;
        flex: 1 1 100%;
    }

    .library-upload {
        display: none;
    }

    .segmented {
        display: grid;
        width: 100%;
        height: auto;
        min-height: 2.75rem;
        flex: 1 1 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .segmented-option span {
        width: 100%;
        min-height: 2.375rem;
        justify-content: center;
        padding: 0.25rem 0.5rem;
        line-height: 1.2;
        text-align: center;
    }

    .filter-disclosure-summary {
        display: flex;
        width: fit-content;
        height: 2.75rem;
        gap: 0.5rem;
        align-items: center;
        padding: 0 0.75rem;
        border: 1px solid var(--input);
        border-radius: 0.5rem;
        background: var(--card);
        font-size: 0.84375rem;
        font-weight: 500;
        list-style: none;
        cursor: pointer;
    }

    .filter-disclosure-summary::-webkit-details-marker {
        display: none;
    }

    .filter-disclosure-summary .icon:last-child {
        color: var(--muted-foreground);
        transition: transform 0.15s ease;
    }

    .filter-disclosure[open] .filter-disclosure-summary .icon:last-child {
        transform: rotate(180deg);
    }

    .filter-chips {
        flex-direction: column;
        align-items: stretch;
        padding-top: 0.625rem;
    }

    .filter-chip {
        width: 100%;
        height: 2.75rem;
    }

    .filter-chip select {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
        field-sizing: fixed;
    }

    .filter-count {
        margin-left: 0;
    }

    .library-results {
        padding-top: 1rem;
    }

    html.has-js .library-hint {
        display: none;
    }

    /* Preview dialog: full screen, with the details under the preview in one
       scrolling column. */
    .preview-dialog {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }

    .preview-body {
        display: block;
        overflow: auto;
    }

    .preview-stage {
        height: 62vh;
        min-height: 18rem;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .preview-side {
        display: block;
    }

    .preview-side-scroll {
        overflow: visible;
    }

    /* Keep Download reachable while the details scroll. */
    .preview-side-foot {
        position: sticky;
        z-index: 1;
        bottom: 0;
        background: var(--card);
    }

    .preview-full-link {
        padding: 0 0.5rem;
    }
}

@media (max-width: 39.99rem) {
    /* Import preview: one labelled card per row, so row problems stay
       visible without sideways scrolling. */
    .import-table {
        min-width: 0;
    }

    .import-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .import-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem 0.75rem;
        padding: 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .import-table tbody tr:last-child {
        border-bottom: 0;
    }

    .import-table tbody tr.row-invalid {
        background: var(--destructive-surface);
    }

    .import-table td {
        display: grid;
        gap: 0.125rem;
        min-width: 0;
        padding: 0;
        border-bottom: 0;
        background: transparent;
    }

    .import-table td > * {
        place-self: start;
        max-width: 100%;
    }

    /* Show the complete username inside the card; it may break anywhere
       because usernames contain no spaces. */
    .import-table .cell-code {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .import-table td::before {
        content: attr(data-label);
        color: var(--muted-foreground);
        font-size: 0.6875rem;
        font-weight: 500;
    }

    .import-table td[data-label="Status"] {
        grid-column: 1 / -1;
    }

    .import-table .row-invalid td {
        background: transparent;
    }

    .dropzone-compact {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dropzone-compact .dropzone-button {
        display: none;
    }

    .page,
    .app-content .single-card-shell,
    .app-content .repository-shell,
    .app-content .auth-shell {
        padding: 1.5rem 1rem 2.5rem;
    }

    .detail-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-facts {
        gap: 0.125rem;
    }

    .detail-facts dd {
        margin-bottom: 0.5rem;
    }

    .detail-header h1 {
        font-size: 1.375rem;
    }

    .stepper-item + .stepper-item::before {
        display: none;
    }

    .stepper {
        gap: 0.25rem 0.5rem;
    }

    .stepper .stepper-button {
        padding-right: 0.5rem;
    }

    .review-list > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .file-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .file-card-actions {
        grid-column: 1 / -1;
    }

    .upload-step-card {
        padding: 1rem;
    }

    .upload-done {
        padding: 1.25rem 1rem;
    }

    .upload-done-outcomes li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .upload-done-actions > a,
    .upload-step-actions > .upload-progress {
        flex: 1 1 100%;
    }

    .upload-step-actions > button,
    .upload-step-actions > a {
        flex: 1 1 auto;
    }

    .upload-actions-spacer {
        display: none;
    }

    .related-resource-link {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

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

    .signed-out .auth-shell {
        padding-top: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------
   My Uploads (read-only list and submission details)
   --------------------------------------------------------------------- */

.dash-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.dash-share-count {
    margin-left: 0.375rem;
    color: var(--muted-foreground);
    font: 500 0.75rem var(--font-mono);
}

.my-uploads {
    --my-warm-ink: #8a4510;
    --my-warm-bg: #fdf1e4;
    --my-warm-line: #f1d2ae;
}

.my-header {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.125rem;
}

.my-header h1 {
    margin-bottom: 0.25rem;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.my-header .page-subtitle {
    font-size: 0.875rem;
}

.my-upload-action {
    min-height: 2.625rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.my-upload-action .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.my-failed {
    margin-bottom: 1rem;
}

.my-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
}

.my-filter {
    display: inline-flex;
    min-height: 2.375rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0 0.875rem;
    border: 1px solid var(--input);
    border-radius: 999px;
    background: var(--card);
    color: var(--text-secondary);
    font-size: 0.84375rem;
    font-weight: 500;
    text-decoration: none;
}

.my-filter:hover {
    background: #f5f7fa;
}

.my-filter.is-on {
    border-color: transparent;
    background: var(--accent-surface);
    color: var(--accent-ink);
    font-weight: 600;
}

.my-filter-count {
    color: var(--muted-foreground);
    font: 500 0.75rem var(--font-mono);
}

.my-filter.is-on .my-filter-count {
    color: inherit;
}

.my-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 1.25rem;
    align-items: start;
}

.my-list-col {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
}

.my-list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    list-style: none;
}

.my-list li + li {
    border-top: 1px solid var(--border-soft);
}

.my-row {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    padding: 0.875rem 1rem 0.9375rem;
    color: var(--foreground);
    text-decoration: none;
}

.my-row:hover {
    background: #f8f9fb;
}

.my-row.is-selected {
    background: var(--accent-surface);
    box-shadow: inset 0 0 0 1.5px var(--primary);
}

.my-row:focus-visible {
    outline-offset: -3px;
}

.my-row-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.my-row-date,
.my-mono {
    color: var(--muted-foreground);
    font: 0.78125rem var(--font-mono);
}

.my-row-title {
    font-size: 0.90625rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.my-row-meta {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.my-row-note {
    display: inline-flex;
    align-items: center;
    color: var(--my-warm-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.my-row-note .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.my-status {
    display: inline-flex;
    min-height: 1.625rem;
    gap: 0.3125rem;
    align-items: center;
    padding: 0 0.625rem 0 0.4375rem;
    border: 1px solid var(--input);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.78125rem;
    font-weight: 600;
    white-space: nowrap;
}

.my-status .icon {
    width: 1.0625rem;
    height: 1.0625rem;
}

.my-status-needs_correction {
    border-color: transparent;
    background: var(--my-warm-bg);
    color: var(--my-warm-ink);
}

.my-count {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.my-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.my-pager .button-link {
    min-height: 2.375rem;
    font-size: 0.84375rem;
    font-weight: 600;
}

.my-pager-where {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.my-nomatch,
.my-empty {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

.my-nomatch h2,
.my-empty h2 {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
}

.my-nomatch p,
.my-empty p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.90625rem;
    line-height: 1.55;
}

.my-empty {
    max-width: 45rem;
    gap: 0.875rem;
    padding: 1.75rem 1.875rem;
}

.my-empty-mark {
    color: var(--muted-foreground);
}

.my-empty-mark .icon {
    width: 2rem;
    height: 2rem;
    stroke-width: 1.5;
}

.my-empty-steps {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.45;
    list-style: none;
}

.my-empty-steps li {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

.my-detail {
    display: grid;
    min-width: 0;
    gap: 1rem;
    padding: 1.25rem 1.375rem 1.125rem;
}

.my-back {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    align-self: flex-start;
    margin-left: -0.375rem;
    padding: 0 0.625rem 0 0.25rem;
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.my-back .icon {
    width: 1.375rem;
    height: 1.375rem;
}

.my-detail-head {
    display: grid;
    gap: 0.5rem;
}

.my-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;
    align-items: center;
    margin: 0;
}

.my-tag {
    display: inline-flex;
    min-height: 1.5rem;
    gap: 0.25rem;
    align-items: center;
    padding: 0 0.5rem;
    border: 1px solid var(--input);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.my-tag .icon {
    width: 0.9375rem;
    height: 0.9375rem;
}

.my-detail h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.my-detail-meta {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
}

.my-meaning {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.my-feedback {
    display: grid;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f8f9fb;
}

.my-feedback.is-warm {
    border-color: var(--my-warm-line);
    background: #fffaf3;
}

.my-feedback-label {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.625rem;
    align-items: baseline;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    font-weight: 600;
}

.my-feedback.is-warm .my-feedback-label {
    color: var(--my-warm-ink);
}

.my-feedback-label .my-mono {
    font-weight: 400;
}

.my-feedback-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.my-muted {
    color: var(--muted-foreground);
}

.my-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.my-actions .button-link {
    min-height: 2.625rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.my-actions .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.my-section {
    display: grid;
    gap: 0.75rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-soft);
}

.my-section h3 {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 600;
}

.my-file {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.my-file-name {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.my-file-note {
    margin: -0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.my-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.my-dl {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.my-dl > div {
    display: grid;
    grid-template-columns: 9.375rem minmax(0, 1fr);
    gap: 1rem;
}

.my-dl dt {
    color: var(--muted-foreground);
}

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

.my-history {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.my-history li {
    display: grid;
    grid-template-columns: 0.875rem minmax(0, 1fr) auto;
    gap: 0.625rem;
    align-items: start;
    padding: 0.25rem 0;
}

.my-dot {
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.375rem;
    border-radius: 50%;
    background: #c3c9d2;
}

.my-dot.is-last {
    background: var(--primary);
}

.my-history-body {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.my-history-note {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.my-history .my-mono {
    line-height: 1.7;
    white-space: nowrap;
}

/* The back link only matters where list and details are separate pages. */
@media (min-width: 64rem) {
    .my-back {
        display: none;
    }
}

@media (max-width: 63.99rem) {
    .my-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .my-layout[data-view="list"] .my-detail,
    .my-layout[data-view="detail"] .my-list-col {
        display: none;
    }

    /* On a narrow screen the details are their own page. */
    .my-uploads[data-view="detail"] .my-filters,
    .my-uploads[data-view="detail"] .my-upload-action {
        display: none;
    }

    /* No detail is showing, so no row should look opened. */
    .my-layout[data-view="list"] .my-row.is-selected {
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 47.99rem) {
    .my-header {
        align-items: stretch;
        flex-direction: column;
    }

    .my-upload-action {
        width: 100%;
    }

    .my-detail {
        padding: 1rem;
    }

    .my-dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .my-empty {
        padding: 1.25rem 1rem;
    }

    .my-actions .button-link {
        flex: 1 1 100%;
    }
}

.my-dot.is-gap {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px #c3c9d2;
}

.my-history-gap {
    font-size: 0.8125rem;
    font-style: italic;
}

/* ---------------------------------------------------------------------
   Correct and resubmit (Needs Correction -> Pending, same resource)
   --------------------------------------------------------------------- */

.my-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 1.125rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid #c9d7f3;
    border-radius: var(--radius-md);
    background: var(--card);
}

.my-banner-mark {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-surface);
    color: var(--accent-ink);
}

.my-banner-mark .icon {
    width: 1.375rem;
    height: 1.375rem;
}

.my-banner > div {
    display: grid;
    gap: 0.1875rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.my-banner strong {
    font-size: 0.9375rem;
    font-weight: 600;
}

.my-banner span {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.fix-page {
    --my-warm-ink: #8a4510;
    --my-warm-bg: #fdf1e4;
    --my-warm-line: #f1d2ae;
}

.fix-back {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    margin: 0 0 0.375rem -0.375rem;
    padding: 0 0.625rem 0 0.25rem;
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.fix-back:hover {
    background: #f4f7fe;
}

.fix-back .icon {
    width: 1.375rem;
    height: 1.375rem;
}

.fix-header {
    display: grid;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.fix-header h1 {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.fix-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.fix-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;
    align-items: center;
    margin: 0;
}

.fix-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22.5rem;
    gap: 1.5rem;
    align-items: start;
}

.fix-main {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.fix-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.fix-section-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.fix-file {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.fix-file-new {
    border-color: #c9d7f3;
    background: #f7f9fe;
}

.fix-file-text {
    display: grid;
    min-width: 0;
    flex: 1 1 12rem;
    gap: 0.125rem;
}

.fix-file-name {
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.fix-file-replaces {
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.fix-file-actions {
    display: flex;
    gap: 0.375rem;
}

.fix-file-button {
    min-height: 2.375rem;
    padding: 0 0.75rem;
    font-size: 0.84375rem;
    font-weight: 600;
}

.fix-file-button .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--primary);
}

.fix-file-native {
    display: grid;
    gap: 0.375rem;
}

.fix-page .is-enhanced .fix-file-native {
    display: none;
}

.fix-summary {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.fix-summary > div {
    display: grid;
    grid-template-columns: 9.375rem minmax(0, 1fr);
    gap: 1rem;
}

.fix-summary dt {
    color: var(--muted-foreground);
}

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

.fix-summary [data-summary-value] {
    white-space: pre-wrap;
}

.fix-summary [data-summary-value].is-empty {
    color: var(--muted-foreground);
}

.fix-changed {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--accent-surface);
    color: var(--accent-ink);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.fix-fields {
    display: grid;
    gap: 1.125rem;
}

.fix-review {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.fix-review > div {
    display: grid;
    grid-template-columns: 6.875rem minmax(0, 1fr);
    gap: 0.875rem;
}

.fix-review dt {
    color: var(--muted-foreground);
}

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

.fix-nochange {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--background);
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.5;
}

.fix-nochange .icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
    color: var(--muted-foreground);
}

.fix-explain {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.55;
}

.fix-page .upload-step-actions > .button-link {
    min-height: 2.625rem;
}

.fix-page .upload-step-actions .is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.fix-aside {
    min-width: 0;
}

.fix-feedback {
    gap: 0.5rem;
    padding: 1rem 1.125rem 1.125rem;
    border-radius: var(--radius-md);
}

.fix-feedback .my-mono,
.fix-feedback .my-feedback-text {
    margin: 0;
}

.fix-feedback-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    color: var(--my-warm-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.fix-feedback-title .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.fix-feedback-foot {
    margin: 0.25rem 0 0;
    padding-top: 0.625rem;
    border-top: 1px solid var(--my-warm-line);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

@media (max-width: 63.99rem) {
    .fix-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The feedback is the first thing to read on a narrow screen. */
    .fix-aside {
        order: -1;
    }
}

@media (max-width: 47.99rem) {
    .fix-summary > div,
    .fix-review > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .fix-file-actions {
        width: 100%;
    }

    .fix-page .upload-step-actions > .button-link {
        flex: 1 1 auto;
    }
}

/* ---------------------------------------------------------------------
   Bookmarks and Helpful (Selected Design v9: card bookmark, Save and
   Helpful beside the file; the Bookmarks page extends that language)
   --------------------------------------------------------------------- */

.reaction-form {
    margin: 0;
}

.reaction-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.reaction-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.reaction-button.is-busy {
    cursor: progress;
    opacity: 0.6;
}

/* Marked: the glyph fills, as in v9. */
.reaction-button[data-state="on"] .icon {
    fill: currentColor;
}

/* Card bookmark: a quiet 36 px icon target at the end of the header. It sits
   above the card-wide title link. */
.reaction-form-icon {
    position: relative;
    z-index: 1;
    margin: 0 -0.25rem 0 auto;
}

.reaction-button.reaction-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    border-radius: 0.5rem;
    color: var(--muted-foreground);
}

.reaction-button.reaction-icon:hover {
    background: #f2f4f7;
    color: var(--foreground);
}

.reaction-button.reaction-icon[data-state="on"] {
    color: var(--primary);
}

.reaction-button.reaction-icon[data-state="on"]:hover {
    background: var(--accent-surface);
}

.reaction-button.reaction-icon .icon {
    width: 1.375rem;
    height: 1.375rem;
}

/* Preview and details: Save and Helpful as 40 px buttons (v9). */
.reaction-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.preview-side-foot .reaction-row {
    margin-top: 0.5rem;
}

.reaction-button.reaction-solid {
    min-height: 2.5rem;
    width: 100%;
    gap: 0.375rem;
    padding: 0 0.75rem;
    border-color: var(--input);
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--foreground);
    font-size: 0.84375rem;
    font-weight: 500;
}

.reaction-button.reaction-solid:hover {
    background: #f5f7fa;
}

.reaction-button.reaction-solid[data-state="on"] {
    border-color: #c9d7f3;
    background: #f4f7fe;
    color: var(--primary-hover);
}

.reaction-button.reaction-solid[data-state="on"]:hover {
    background: var(--accent-surface);
}

.reaction-button.reaction-solid .icon {
    width: 1.1875rem;
    height: 1.1875rem;
}

.reaction-count {
    color: var(--muted-foreground);
    font: 500 0.75rem var(--font-mono);
}

.reaction-button[data-state="on"] .reaction-count {
    color: inherit;
}

.action-panel .reaction-row {
    margin-top: 0.125rem;
}

/* Announcements: success and honest failure text. It lives inside an open
   dialog when there is one, because a modal dialog covers the page. */
.reaction-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    max-width: min(26rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm);
    background: var(--foreground);
    color: #fff;
    box-shadow: 0 6px 22px oklch(23% 0.02 255 / 25%);
    font-size: 0.84375rem;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.reaction-toast.is-visible {
    opacity: 1;
    transform: none;
}

.reaction-toast.is-error {
    background: oklch(42% 0.15 25);
}

@media (prefers-reduced-motion: reduce) {
    .reaction-toast,
    .reaction-button {
        transition: none;
    }
}

/* Bookmarks page */
.bookmarks-header {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.125rem;
}

.bookmarks-header h1 {
    margin-bottom: 0.25rem;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.bookmarks-header .button-link .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.bookmarks-page > .alert {
    margin-bottom: 1rem;
}

.resource-card.is-removed {
    opacity: 0.6;
}

.bookmarks-gone {
    display: grid;
    gap: 0.625rem;
    margin-top: 1.75rem;
}

.bookmarks-gone h2 {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.bookmarks-gone h2:focus {
    outline: none;
}

.bookmarks-gone-lead {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.bookmarks-gone-list {
    display: grid;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    list-style: none;
}

.bookmarks-gone-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-soft);
}

.bookmarks-gone-list li:first-child {
    border-top: 0;
}

.bookmarks-gone-mark {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 0.4375rem;
    background: var(--muted);
    color: var(--muted-foreground);
}

.bookmarks-gone-mark .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.bookmarks-gone-text {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
    font-size: 0.84375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.bookmarks-gone-text strong {
    font-size: 0.875rem;
    font-weight: 600;
}

.bookmarks-remove {
    min-height: 2.25rem;
    font-size: 0.84375rem;
    font-weight: 600;
}

@media (max-width: 47.99rem) {
    .bookmarks-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .bookmarks-gone-list li {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bookmarks-gone-list li form {
        grid-column: 2;
    }

    .reaction-toast {
        right: 0.75rem;
        bottom: calc(var(--tabbar-height) + 0.75rem);
        left: 0.75rem;
        max-width: none;
    }
}

/* ---------------------------------------------------------------------
   Reports: Report control, reporter page, Report Queue and report review
   Layout and hierarchy follow Selected Design v9 (Reports, screens 8.1-8.14).
   Warm tones reuse the --my-warm-* tokens of the Pending Queue and review.
   --------------------------------------------------------------------- */

.rp,
.rq,
.rr {
    --my-warm-ink: #8a4510;
    --my-warm-bg: #fdf1e4;
    --my-warm-line: #f1d2ae;
}

/* The Report control: a quiet secondary action under Download, Save and
   Helpful, on the Details page and inside the preview dialog. */
.report-link {
    display: inline-flex;
    min-height: 2.5rem;
    width: 100%;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--text-secondary);
    font: 500 0.84375rem var(--font-sans);
    text-decoration: none;
    cursor: pointer;
}

.report-link:hover {
    background: #f5f7fa;
    color: var(--foreground);
}

.report-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.report-link .icon {
    width: 1.1875rem;
    height: 1.1875rem;
}

.report-link.is-reported {
    border-color: #c9d7f3;
    background: #f4f7fe;
    color: var(--primary-hover);
}

.report-link[hidden],
.report-row[hidden] {
    display: none;
}

.action-panel .report-link {
    margin-top: 0.125rem;
}

.report-row {
    display: grid;
    margin-top: 0.5rem;
}

/* Report panel inside the preview dialog's side column. */
.preview-side-scroll[hidden],
.preview-side-foot[hidden] {
    display: none;
}

.preview-report {
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
}

.preview-report[hidden] {
    display: none;
}

.preview-report-head {
    flex: 0 0 auto;
    padding: 0.625rem 1rem 0;
}

.report-back {
    display: inline-flex;
    min-height: 2.25rem;
    gap: 0.25rem;
    align-items: center;
    padding: 0 0.5rem 0 0.25rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: 500 0.84375rem var(--font-sans);
    cursor: pointer;
}

.report-back:hover {
    background: var(--hover-surface);
    color: var(--foreground);
}

.report-back:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.report-back:disabled {
    cursor: progress;
    opacity: 0.6;
}

.report-back .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.preview-report-scroll {
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0.375rem 1.5rem 1.25rem;
    overflow: auto;
}

.report-heading {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.report-heading:focus {
    outline: none;
}

.report-form,
.report-result {
    display: grid;
    gap: 0.875rem;
}

.report-form[hidden],
.report-result[hidden] {
    display: none;
}

.report-intro {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.report-reasons {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.report-reasons legend {
    margin-bottom: 0.375rem;
    padding: 0;
    font-size: 0.875rem;
}

.report-result > p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Reporter page ------------------------------------------------------- */

.rp-head {
    margin-bottom: 1.125rem;
}

.rp-head h1 {
    margin-bottom: 0.25rem;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.rp-head .page-subtitle {
    max-width: 40rem;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.rp > .alert {
    margin-bottom: 1.125rem;
}

.rp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: 1.25rem;
    align-items: start;
}

.rp-main,
.rp-side {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.rp-main:only-child {
    grid-column: 1 / -1;
    max-width: 44rem;
}

.rp-panel form {
    display: grid;
    gap: 1rem;
}

.rp-reasons {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.rp-reasons legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.9375rem;
}

.rp-option {
    align-items: center;
    padding: 0.625rem 0.875rem;
}

.rp-option input {
    margin-top: 0;
}

.rp-optional {
    color: var(--muted-foreground);
    font-weight: 400;
}

.rp-comment textarea {
    min-height: 7rem;
}

.rp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.rp-send {
    width: auto;
    padding: 0 1.25rem;
}

.rp-fine {
    margin: 0;
}

.rp-card {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-card);
    font-size: 0.875rem;
    line-height: 1.55;
}

.rp-card:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.rp-card p {
    margin: 0;
    overflow-wrap: anywhere;
}

.rp-card h2 {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.rp-card h2 .icon {
    width: 1.375rem;
    height: 1.375rem;
    color: var(--primary);
}

.rp-card-sent h2 .icon {
    color: var(--success);
}

.rp-card-warn {
    border-color: var(--my-warm-line);
    background: #fffaf3;
}

.rp-card-warn h2 .icon {
    color: var(--my-warm-ink);
}

.rp-facts {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-sm);
    background: #f8f9fb;
}

.rp-facts > div {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.75rem;
}

.rp-facts dt {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.rp-facts dd {
    margin: 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.rp-resource {
    display: grid;
    gap: 0.5rem;
}

.rp-resource p {
    margin: 0;
}

.rp-resource-type {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.rp-resource-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Secondary lines in the resource card match the dialog's detail text. */
.rp-resource .my-muted {
    font-size: 0.8125rem;
}

.rp-resource-file {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Report Queue --------------------------------------------------------- */

.rq-tabs {
    margin-bottom: 1rem;
}

.rq-row {
    grid-template-columns: minmax(0, 1fr) 13rem auto;
}

.rq-reason {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    color: var(--my-warm-ink);
    font-size: 0.875rem;
    font-weight: 600;
}

.rq-reason .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.rq-dates {
    margin: 0;
    overflow-wrap: anywhere;
}

.rq-multi {
    color: var(--my-warm-ink);
    font-size: 0.78125rem;
    font-weight: 600;
}

.rq-resource {
    display: grid;
    justify-items: start;
    gap: 0.25rem;
}

.rq-resource-note {
    color: var(--muted-foreground);
    font-size: 0.78125rem;
}

/* Report review -------------------------------------------------------- */

.rr-status {
    display: inline-flex;
    min-height: 1.625rem;
    gap: 0.3125rem;
    align-items: center;
    padding: 0 0.625rem 0 0.4375rem;
    border: 1px solid #c9d7f3;
    border-radius: 999px;
    background: #f4f7fe;
    color: var(--accent-ink);
    font-size: 0.78125rem;
    font-weight: 600;
    white-space: nowrap;
}

.rr-status .icon {
    width: 1.0625rem;
    height: 1.0625rem;
}

.rr-status-escalated {
    border-color: var(--my-warm-line);
    background: var(--my-warm-bg);
    color: var(--my-warm-ink);
}

.rr-status-dismissed,
.rr-status-actioned {
    border-color: var(--input);
    background: var(--card);
    color: var(--text-secondary);
}

.rr-both-status {
    display: grid;
    grid-template-columns: 4.5rem auto;
    gap: 0.5rem 0.5rem;
    align-items: center;
    justify-content: start;
    margin: 0;
}

.rr-both-status > .rr-status,
.rr-both-status > .my-status {
    justify-self: start;
}

.rr-both-label {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.rr-report h2,
.rr-resource h2 {
    margin-bottom: 0.25rem;
}

.rr-resource .my-muted {
    font-size: 0.8125rem;
}

.rr-resource-facts {
    align-items: start;
}

.rq-resource .mq-since-label {
    font-size: 0.78125rem;
}

.rr-escalated {
    display: grid;
    gap: 0.375rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--my-warm-line);
    border-radius: var(--radius-md);
    background: #fffaf3;
    font-size: 0.875rem;
    line-height: 1.55;
}

.rr-escalated h2 {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--my-warm-ink);
}

.rr-escalated h2 .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.rr-escalated p {
    margin: 0;
}

.rr-resolution p {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
}

.rr-resource {
    display: grid;
    gap: 0.5rem;
}

.rr-resource p {
    margin: 0;
}

.rr-resource-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.rr-resource-type {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.rr-resource-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.rr-resource-facts {
    margin-top: 0.25rem;
}

.rr-status-note {
    display: block;
    margin-top: 0.3125rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.rr-resource-actions {
    margin-top: 0.25rem;
}

.rr-limits {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0.625rem 0.875rem 0.625rem 1.5rem;
    border: 1px dashed var(--input);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.dash-queue-icon-xs .icon {
    width: 1.0625rem;
    height: 1.0625rem;
}

@media (max-width: 63.99rem) {
    .rp-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 47.99rem) {
    /* Queue row: details across the top, resource status and Review below. */
    .rq-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.625rem 0.875rem;
    }

    .rq-resource {
        grid-column: 1;
        grid-row: 2;
    }

    .rq-row .mq-review {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }

    /* The preview dialog is one scrolling column on a phone, so the report
       panel joins it instead of filling a side column. */
    .preview-report {
        display: block;
    }

    .preview-report[hidden] {
        display: none;
    }

    .preview-report-scroll {
        overflow: visible;
    }

    .rp-facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .rp-actions .rv-confirm,
    .rp-actions .button-link,
    .rp-actions .button-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Report panel: what is happening to this resource's report (sending, or an
   attempt that is not confirmed yet). */
.report-status {
    display: grid;
    justify-items: start;
    gap: 0.5rem;
}

.report-status[hidden] {
    display: none;
}

.report-status .field-help {
    margin: 0;
}

/* Resource status page (staff): Hide, Restrict and Return to Approved. */
.rs-report-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-report-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
    justify-content: space-between;
}

.rs-hold .rv-eyebrow a,
.rs-report-list a,
.my-history-body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.rs-aside {
    margin: 0;
}

.rs-approved p {
    margin: 0;
}

.rs-approved {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

/* Remove (Admin only): the irreversible-action warning, its confirmation,
   and the Removed status. Uses the existing destructive tokens. */
.my-status-removed {
    border-color: transparent;
    background: var(--destructive-surface);
    color: var(--destructive);
}

.rv-option:has(input[value="remove"]) .rv-option-label {
    color: var(--destructive);
}

.rv-option:has(input[value="remove"]:checked) {
    border-color: var(--destructive);
    background: var(--destructive-surface);
}

.rv-removal {
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--destructive);
    border-radius: var(--radius-md);
    background: var(--destructive-surface);
    font-size: 0.84375rem;
    line-height: 1.55;
}

.rv-removal[hidden] {
    display: none;
}

.rv-removal-title {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin: 0;
    color: var(--destructive);
    font-size: 0.9375rem;
    font-weight: 600;
}

.rv-removal ul {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding-left: 1.125rem;
    color: var(--text-secondary);
}

.rv-removal-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.625rem;
    align-items: start;
    font-weight: 600;
    cursor: pointer;
}

.rv-removal-check input {
    margin-top: 0.1875rem;
}

.rv-removal-check:has(input:focus-visible) {
    border-radius: var(--radius-sm);
    box-shadow: var(--focus-ring);
}

.rv-confirm.is-danger {
    border-color: oklch(48% 0.2 25);
    background: oklch(48% 0.2 25);
    color: oklch(99% 0.005 25);
}

.rv-confirm.is-danger:hover:not(:disabled) {
    border-color: oklch(42% 0.2 25);
    background: oklch(42% 0.2 25);
}

.rv-warn {
    color: var(--destructive);
}

/* Corrections (linked replacements) of Approved resources */

.my-relation {
    display: grid;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f8f9fb;
}

.my-relation h3 {
    display: flex;
    gap: 0.4375rem;
    align-items: center;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

.my-relation h3 .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.my-relation p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.my-withdraw {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.my-withdraw summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
}

.my-withdraw .button-secondary {
    min-height: 2.75rem;
}

.my-withdraw form {
    display: grid;
    gap: 0.625rem;
    justify-items: start;
    margin-top: 0.625rem;
}

.my-withdraw p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.55;
}

.rv-original-facts {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.rv-original-facts > div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
}

.rv-original-facts dt {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.rv-original-facts dd {
    margin: 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.rv-ack {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.625rem;
    align-items: start;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--my-warm-line);
    border-radius: var(--radius-md);
    background: #fffaf3;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.rv-ack input {
    margin-top: 0.1875rem;
}

@media (max-width: 40rem) {
    .rv-original-facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }
}

/* Report-driven correction requests (staff form and uploader view) */

.rv-correction {
    display: grid;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--my-warm-line);
    border-radius: var(--radius-md);
    background: #fffaf3;
}

.rv-correction[hidden] {
    display: none;
}

.rv-outcomes {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rv-outcomes legend {
    padding: 0;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.rv-visible-tag {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--my-warm-line);
    border-radius: 999px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.my-request {
    display: grid;
    gap: 0.625rem;
}

.my-request h3 {
    display: flex;
    gap: 0.4375rem;
    align-items: center;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.my-request h3 .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.my-request-status {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Admin lists: Account Management and Activity Records
   One quiet composition for both: a title row, a single filter bar that
   sits on the table's card, then the rows. Identity (who, what) leads each
   row; status and meta follow in badges and muted text. Under 48rem each
   row becomes a short card so nothing needs sideways scrolling.
   --------------------------------------------------------------------- */

.admin-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.admin-head-text {
    min-width: 0;
    flex: 1 1 20rem;
}

.admin-head h1 {
    margin-bottom: 0.25rem;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 2rem;
    overflow-wrap: anywhere;
}

.admin-head-action {
    flex: 0 0 auto;
}

.admin-flash,
.admin-scope-note {
    margin: 0 0 1rem;
}

.admin-panel {
    padding: 0;
    overflow: hidden;
}

.admin-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem 11rem auto;
    gap: 0.75rem 1rem;
    align-items: end;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: oklch(98.6% 0.004 250);
}

.admin-filters-activity {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

.admin-filters label {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.admin-search-box {
    position: relative;
}

.admin-search-box .icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    color: var(--muted-foreground);
    pointer-events: none;
    transform: translateY(-50%);
}

.admin-search-box input {
    padding-left: 2.25rem;
}

.admin-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-filter-actions > * {
    min-height: 2.5rem;
}

.admin-filter-errors {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.25rem;
}

.admin-count {
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.admin-count strong {
    color: var(--foreground);
    font-weight: 600;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.375rem;
}

.admin-table th[scope="col"] {
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #fafbfc;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: nowrap;
}

.admin-table td,
.admin-table tbody th {
    padding: 0.8125rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}

.admin-table tbody tr:hover > * {
    background: var(--hover-surface);
}

.admin-table tbody tr:last-child > * {
    border-bottom: 0;
}

.admin-table .username {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.admin-table .username-link {
    color: var(--accent-ink);
    text-decoration: none;
}

.admin-table .username-link:hover {
    text-decoration: underline;
}

.admin-table .person-name {
    display: block;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.cell-name {
    min-width: 10rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.admin-accounts .cell-name,
.admin-activity .cell-action {
    font-weight: 600;
}

.admin-accounts .cell-username {
    max-width: 16rem;
}

.admin-accounts .cell-created,
.admin-activity .cell-when {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-accounts .cell-actions {
    white-space: nowrap;
}

.admin-accounts .cell-actions .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.admin-accounts .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Between the phone cards and a roomy desktop the table is tight: the row
   control keeps its icon and accessible name, and gives up its visible text
   and some cell padding so Created and Action stay in view. */
@media (min-width: 48rem) and (max-width: 67.99rem) {
    .admin-accounts th[scope="col"],
    .admin-accounts td,
    .admin-accounts tbody th {
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }

    .admin-accounts .cell-name {
        min-width: 6.5rem;
    }

    .admin-accounts .cell-username {
        max-width: 9.5rem;
    }

    .admin-accounts tr > :first-child {
        padding-left: 1.25rem;
    }

    .admin-accounts tr > :last-child {
        padding-right: 1.25rem;
    }

    /* The longest badge may wrap here instead of widening the Status column. */
    .admin-accounts .cell-status .admin-badge-pending {
        white-space: normal;
    }

    .admin-accounts .cell-actions .action-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.admin-activity .cell-action {
    min-width: 8.5rem;
}

.admin-activity .cell-target {
    min-width: 11rem;
}

.admin-activity .cell-note {
    max-width: 22rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.when-date {
    display: block;
    color: var(--foreground);
    font-weight: 500;
}

.when-time {
    display: block;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.target-ref {
    display: block;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.admin-badge {
    display: inline-flex;
    gap: 0.3125rem;
    align-items: center;
    padding: 0.0625rem 0.5625rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.125rem;
    white-space: nowrap;
}

.admin-badge .icon {
    width: 0.8125rem;
    height: 0.8125rem;
}

.admin-badge-role {
    border-color: oklch(52% 0.16 255 / 20%);
    background: var(--surface);
    color: var(--surface-foreground);
}

.admin-badge-active {
    border-color: oklch(48% 0.12 155 / 25%);
    background: var(--success-surface);
    color: var(--success);
}

.admin-badge-active::before,
.admin-badge-disabled::before {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: currentcolor;
    content: "";
}

.admin-badge-disabled {
    border-color: var(--border);
    background: var(--neutral-surface);
    color: var(--muted-foreground);
}

.admin-badge-pending {
    border-color: oklch(52% 0.12 70 / 25%);
    background: var(--warning-surface);
    color: oklch(42% 0.1 70);
}

.admin-badge-you {
    margin-left: 0.375rem;
    border-color: oklch(52% 0.16 255 / 20%);
    background: var(--accent-surface);
    color: var(--accent-ink);
    vertical-align: 0.0625rem;
}

.cell-status .admin-badge + .admin-badge {
    margin-left: 0.25rem;
}

.admin-state {
    padding: 1.25rem;
}

.admin-state .alert {
    margin: 0;
}

.admin-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.admin-empty h3,
.admin-empty p {
    margin: 0;
}

.admin-empty p {
    max-width: 30rem;
    margin-bottom: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.admin-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
}

.admin-pager-where {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.admin-pager-links {
    display: flex;
    gap: 0.5rem;
}

.admin-footnote {
    max-width: 44rem;
    margin: 1rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.5;
}

@media (max-width: 47.99rem) {
    .admin-head-action {
        width: 100%;
    }

    .admin-filters,
    .admin-filters-activity {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 0.875rem 1rem;
    }

    .admin-filter-search,
    .admin-filter-actions,
    .admin-filters-activity > .field:first-child {
        grid-column: 1 / -1;
    }

    .admin-filter-actions > * {
        flex: 1 1 0;
    }

    .admin-count {
        padding: 0.625rem 1rem;
    }

    /* Rows become cards. The header row stays for assistive technology. */
    .admin-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .admin-table,
    .admin-table tbody {
        display: block;
    }

    .admin-table tbody tr {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--border-soft);
    }

    .admin-table tbody tr:last-child {
        border-bottom: 0;
    }

    .admin-table td,
    .admin-table tbody th {
        display: block;
        min-width: 0;
        max-width: none;
        padding: 0;
        border: 0;
    }

    .admin-table tbody tr:hover > * {
        background: transparent;
    }

    .admin-accounts tbody tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem 0.5rem;
        align-items: center;
    }

    .admin-accounts .cell-name,
    .admin-accounts .cell-username {
        flex: 0 0 100%;
    }

    .admin-accounts .cell-name {
        font-size: 0.9375rem;
    }

    .admin-accounts .cell-username {
        margin-top: -0.25rem;
    }

    .admin-accounts .cell-created {
        flex: 0 0 100%;
        margin-top: 0.125rem;
        color: var(--muted-foreground);
        font-size: 0.8125rem;
    }

    .admin-accounts .cell-created::before {
        content: attr(data-label) " ";
    }

    .admin-accounts .cell-actions {
        flex: 0 0 100%;
        margin-top: 0.375rem;
    }

    .admin-activity tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "action when"
            "actor actor"
            "target target"
            "note note";
        gap: 0.5rem 0.75rem;
    }

    .admin-activity .cell-action {
        grid-area: action;
        font-size: 0.9375rem;
    }

    .admin-activity .cell-when {
        grid-area: when;
        text-align: right;
    }

    .admin-activity .cell-actor {
        grid-area: actor;
    }

    .admin-activity .cell-target {
        grid-area: target;
    }

    .admin-activity .cell-note {
        grid-area: note;
    }

    .admin-activity .cell-note.is-empty {
        display: none;
    }

    .admin-activity .when-date,
    .admin-activity .when-time {
        display: inline;
    }

    .admin-activity .when-time::before {
        content: " · ";
    }

    .admin-activity .cell-actor::before,
    .admin-activity .cell-target::before,
    .admin-activity .cell-note::before {
        display: block;
        margin-bottom: 0.0625rem;
        color: var(--muted-foreground);
        content: attr(data-label);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .admin-activity .cell-actor .person-name,
    .admin-activity .cell-target .person-name {
        display: inline;
        margin-right: 0.5rem;
    }

    .admin-pager {
        padding: 0.75rem 1rem;
    }

    /* No JavaScript: more tab-bar links than fit as equal slices keep each
       readable and let the bar scroll sideways. */
    html:not(.has-js) .app-navigation-scroll {
        grid-auto-columns: minmax(4.5rem, 1fr);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    html:not(.has-js) .app-navigation-scroll::-webkit-scrollbar {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   My Profile (read-only account summary)
   Every rule is scoped by a .profile class, so no other screen changes.
   The grids use one shrinkable column, so a long unbroken name wraps
   inside the panel instead of widening the page.
   --------------------------------------------------------------------- */

.profile-page {
    display: grid;
    max-width: 48rem;
    gap: 1rem;
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
}

.profile-page .page-header {
    margin-bottom: 0.5rem;
}

.profile-panel {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.profile-card {
    display: grid;
    gap: 1.25rem;
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
}

.profile-avatar {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: 999px;
    background: var(--foreground);
    color: var(--primary-foreground);
    font-size: 1.25rem;
    font-weight: 600;
}

.profile-body {
    min-width: 0;
}

.profile-details {
    display: grid;
    gap: 0.625rem;
    margin: 0;
}

.profile-detail {
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-sm);
    background: var(--muted);
}

.profile-detail dt {
    margin: 0 0 0.125rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.profile-detail dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.profile-detail-name dd {
    font-size: 1.125rem;
}

.profile-note {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.5;
}

.profile-note .icon {
    margin-top: 0.1875rem;
}

.profile-note span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-actions {
    margin: 0;
}

@media (max-width: 47.99rem) {
    .profile-page {
        padding-top: 1.25rem;
    }

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

    .profile-actions .button-link {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   Moderation History (read-only list of recorded resource actions)
   Reuses the Admin list composition (.admin-head, .admin-filters,
   .admin-table, .admin-pager); every rule here is scoped by
   .admin-history or .history-*, so no other screen changes. Long titles and
   names wrap; under 48rem each row becomes a short card.
   --------------------------------------------------------------------- */

.history-scope-copy {
    min-width: 0;
}

.history-scope-copy p {
    margin: 0;
    overflow-wrap: anywhere;
}

.history-scope-copy p + p {
    margin-top: 0.5rem;
}

.admin-history .cell-when {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-history .cell-action {
    min-width: 8rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.admin-history .cell-action .target-ref {
    font-weight: 400;
}

.admin-history .cell-resource {
    min-width: 11rem;
    max-width: 22rem;
    overflow-wrap: anywhere;
}

.admin-history .resource-link {
    display: block;
    color: var(--accent-ink);
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.admin-history .resource-link:hover {
    text-decoration: underline;
}

.admin-history .cell-resource .target-ref {
    margin-top: 0.1875rem;
}

.admin-history .cell-change {
    min-width: 11rem;
}

/* With room to spare, keep "before → after" on one line. */
@media (min-width: 68rem) {
    .admin-history .cell-change {
        min-width: 14rem;
        white-space: nowrap;
    }
}

.admin-history .cell-change .admin-badge {
    margin: 0.125rem 0;
}

.admin-history .change-arrow {
    margin: 0 0.25rem;
    color: var(--muted-foreground);
}

.admin-history .cell-actor {
    min-width: 7rem;
}

/* The filter bar's last column holds Apply and, once a filter is set, Clear.
   Beside the date fields that squeezed them and made the date inputs spill
   out of their fields on a mid-width screen, so here the controls may shrink
   and, below 68rem, the buttons take their own row. */
.admin-filters-history .field,
.admin-filters-history input,
.admin-filters-history select {
    min-width: 0;
}

@media (min-width: 48rem) and (max-width: 67.99rem) {
    .admin-filters-history {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .admin-filters-history .admin-filter-actions {
        grid-column: 1 / -1;
    }
}

/* Between the phone cards and a roomy desktop the table is tight: let the
   wide cells shrink so the last column stays in view. */
@media (min-width: 48rem) and (max-width: 67.99rem) {
    .admin-history th[scope="col"],
    .admin-history td,
    .admin-history tbody th {
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }

    .admin-history tr > :first-child {
        padding-left: 1.25rem;
    }

    .admin-history tr > :last-child {
        padding-right: 1.25rem;
    }

    .admin-history .cell-resource {
        min-width: 8rem;
    }

    .admin-history .cell-change {
        min-width: 8.5rem;
    }
}

@media (max-width: 47.99rem) {
    .admin-history tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "action when"
            "resource resource"
            "change change"
            "actor actor";
        gap: 0.5rem 0.75rem;
    }

    .admin-history .cell-action {
        grid-area: action;
        min-width: 0;
        font-size: 0.9375rem;
    }

    .admin-history .cell-when {
        grid-area: when;
        text-align: right;
    }

    .admin-history .cell-resource {
        grid-area: resource;
        min-width: 0;
        max-width: none;
    }

    .admin-history .cell-change {
        grid-area: change;
        min-width: 0;
    }

    .admin-history .cell-actor {
        grid-area: actor;
        min-width: 0;
    }

    .admin-history .when-date,
    .admin-history .when-time {
        display: inline;
    }

    .admin-history .when-time::before {
        content: " · ";
    }

    .admin-history .cell-change::before,
    .admin-history .cell-actor::before {
        display: block;
        margin-bottom: 0.0625rem;
        color: var(--muted-foreground);
        content: attr(data-label);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .admin-history .cell-actor .person-name {
        display: inline;
        margin-right: 0.5rem;
    }
}


/* ---------------------------------------------------------------------
   Notifications (uploader notifications for recorded decisions)
   Adapted from V9's header notification panel: a 28 px round icon, a bold
   outcome, one line of text, a mono date and a blue dot for unread. V9 does
   not draw the "All notifications" page, so the panel's rows are laid out as
   a full-width list. Every rule is scoped by .notif-, so no other screen
   changes. Rows wrap inside the panel; nothing needs sideways scrolling.
   --------------------------------------------------------------------- */

.notif-page {
    display: grid;
    max-width: 48rem;
    gap: 1rem;
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
}

.notif-page .page-header {
    margin-bottom: 0.5rem;
}

.notif-page .alert {
    margin: 0;
}

.notif-panel {
    padding: 0;
    overflow: hidden;
}

.notif-summary {
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.notif-state {
    padding: 1.25rem;
}

.notif-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.notif-empty h3,
.notif-empty p {
    margin: 0;
}

.notif-empty p {
    max-width: 30rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.notif-empty-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
}

.notif-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notif-item {
    display: grid;
    gap: 0.25rem 0.75rem;
    align-items: start;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    padding: 0.875rem 1.25rem 0.875rem 1.125rem;
    border-top: 1px solid var(--border-soft);
    background: var(--card);
}

.notif-item:first-child {
    border-top: 0;
}

.notif-item.is-unread {
    background: #f5f8fe;
}

.notif-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 999px;
    background: var(--muted);
    color: var(--text-secondary);
}

.notif-icon .ms {
    font-size: 1.0625rem;
}

.notif-body {
    display: grid;
    min-width: 0;
    gap: 0.3125rem;
}

.notif-body p {
    margin: 0;
}

.notif-text {
    color: var(--foreground);
    font-size: 0.84375rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.notif-text strong {
    font-weight: 600;
}

.notif-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.notif-when {
    font-family: var(--font-mono);
}

.notif-state-unread {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    color: var(--primary-hover);
    font-weight: 600;
}

.notif-state-unread::before {
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 999px;
    background: var(--primary);
    content: "";
}

.notif-target {
    font-size: 0.8125rem;
}

.notif-link {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    padding-right: 0.25rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

.notif-link .ms {
    font-size: 1.125rem;
}

.notif-unavailable {
    color: var(--muted-foreground);
}

.notif-action {
    margin: 0;
}

@media (max-width: 47.99rem) {
    .notif-page {
        padding-top: 1.25rem;
    }

    .notif-item {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        padding-inline: 1rem;
    }

    .notif-action {
        grid-column: 2;
        margin-top: 0.25rem;
    }

    .notif-action .button-small {
        min-height: 2.75rem;
    }
}

/* ---------------------------------------------------------------------
   Academic Taxonomy (Admin)
   The Admin list composition (Account Management, Activity Records) with a
   category picker above it. V9 draws only this screen's menu entry, so the
   picker is an adaptation: five link cards, the current one marked.
   --------------------------------------------------------------------- */

.taxonomy-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.taxonomy-tab {
    display: flex;
    min-width: 0;
    min-height: 3.5rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--foreground);
    text-decoration: none;
}

.taxonomy-tab:hover {
    background: var(--hover-surface);
}

.taxonomy-tab.is-current {
    border-color: oklch(52% 0.16 255 / 45%);
    background: var(--accent-surface);
}

.taxonomy-tab-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    overflow-wrap: anywhere;
}

.taxonomy-tab.is-current .taxonomy-tab-name {
    color: var(--accent-ink);
}

.taxonomy-tab-count {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.admin-filters-taxonomy {
    grid-template-columns: minmax(0, 1fr) 11rem auto;
}

.admin-taxonomy-table .cell-name {
    min-width: 11rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.admin-taxonomy-table .cell-usage,
.admin-taxonomy-table .cell-created {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-taxonomy-table .cell-actions {
    white-space: nowrap;
}

.admin-taxonomy-table .cell-actions .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.admin-taxonomy-table .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.taxonomy-name-form {
    display: grid;
    gap: 1rem;
    max-width: 32rem;
}

.taxonomy-workspace .confirm-panel .alert {
    margin: 0 0 1rem;
}

.taxonomy-workspace .confirm-panel .alert a {
    font-weight: 600;
}

@media (max-width: 63.99rem) {
    .taxonomy-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The same tablet compaction as Account Management: the row controls keep
   their icon and accessible name and give up visible text, so Added and
   Action stay in view without sideways scrolling. */
@media (min-width: 48rem) and (max-width: 67.99rem) {
    .admin-taxonomy-table th[scope="col"],
    .admin-taxonomy-table td,
    .admin-taxonomy-table tbody th {
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }

    .admin-taxonomy-table .cell-name {
        min-width: 7rem;
    }

    .admin-taxonomy-table tr > :first-child {
        padding-left: 1.25rem;
    }

    .admin-taxonomy-table tr > :last-child {
        padding-right: 1.25rem;
    }

    .admin-taxonomy-table .cell-actions .action-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 47.99rem) {
    .taxonomy-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .taxonomy-tab:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .admin-filters-taxonomy {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .admin-taxonomy-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem 0.75rem;
        align-items: center;
    }

    .admin-taxonomy-table .cell-name {
        flex: 1 1 8rem;
        min-width: 0;
        font-size: 0.9375rem;
    }

    .admin-taxonomy-table .cell-status {
        flex: 0 0 auto;
    }

    .admin-taxonomy-table .cell-usage,
    .admin-taxonomy-table .cell-created {
        flex: 0 0 auto;
        color: var(--muted-foreground);
        font-size: 0.8125rem;
    }

    .admin-taxonomy-table .cell-created::before {
        content: attr(data-label) " ";
    }

    .admin-taxonomy-table .cell-actions {
        flex: 0 0 100%;
        margin-top: 0.375rem;
    }

    .admin-taxonomy-table .row-actions .button-small {
        min-height: 2.75rem;
    }
}

/* With room to spare the two row controls sit on one line. */
@media (min-width: 80rem) {
    .admin-taxonomy-table .row-actions {
        flex-wrap: nowrap;
    }
}

/* A tag the resource already carries that is no longer Active (correction and
   replacement forms): shown selected, with a plain "Inactive" label. */
.tag-inactive-label {
    padding: 0 0.375rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--neutral-surface);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.125rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   System settings (D053): three section cards, each its own form. Built from
   the Account Management / Academic Taxonomy pattern (title row, quiet cards,
   labelled fields, status badges); V9 draws only the menu entry, not a page.
   --------------------------------------------------------------------- */

.admin-settings .settings-card {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.settings-card-head .panel-title {
    margin-bottom: 0.125rem;
    font-size: 1.0625rem;
}

.settings-lead {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.settings-form {
    display: grid;
    gap: 1.25rem;
    max-width: 42rem;
}

.settings-select {
    max-width: 14rem;
}

.settings-readonly,
.settings-server {
    display: grid;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: oklch(98.6% 0.004 250);
}

.settings-server .alert {
    margin: 0.25rem 0;
}

.settings-readonly-label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.settings-readonly-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
}

.settings-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.settings-facts dt {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.settings-facts dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.settings-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-option {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-sm);
    background: var(--card);
    cursor: pointer;
}

.settings-option:hover {
    background: var(--hover-surface);
}

.settings-option:has(input:checked) {
    border-color: var(--primary);
    background: var(--accent-surface);
}

.settings-option:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
}

.settings-consequences {
    margin: 0;
}

.settings-meta {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

/* AI Capability Settings: the same card pattern as System settings. V9 draws
   only this page's menu entry ("tune", "Which AI assistance features are
   available."), not the page, so it is adapted from the settings cards: one
   quiet bordered group per capability, a plain condition list and a
   definition list for the capabilities that are not built. */
.ai-capability {
    display: grid;
    gap: 0.625rem;
    min-width: 0;
    margin: 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.ai-capability legend {
    padding: 0 0.375rem;
    font-weight: 600;
}

.ai-conditions {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.ai-conditions li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.ai-conditions .admin-badge {
    flex: none;
}

.ai-unavailable-list {
    display: grid;
    gap: 0.875rem;
    max-width: 44rem;
    margin: 0;
}

.ai-unavailable-list dt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-weight: 600;
}

.ai-unavailable-list dd {
    margin: 0.25rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

@media (max-width: 47.99rem) {
    .settings-option {
        flex: 1 1 8rem;
        min-height: 2.75rem;
    }

    .settings-select {
        max-width: none;
    }
}

/* The application display name is configurable (D053, up to 40 characters, one
   unbroken word included). It is clipped to one line with an ellipsis wherever
   the shell shows it, so no name can push the header or the sidebar wider than
   its box. The full name stays in the page title and the link's text. */
.app-brand {
    min-width: 0;
}

.app-header-brand {
    min-width: 0;
    max-width: min(20rem, 55vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-rail="expanded"] .app-brand-name,
.app-brand-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Same clipping for the signed-out header (sign-in, first-password change). */
.brand {
    max-width: 100%;
}

.brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}