/* =====================================================================
   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;
}

/* Filter bars with more than three fields (Activity Records, Moderation History):
   three equal columns; the buttons follow the last field. */
.admin-filters-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four fields (the Moderator's history filters): one row of four. */
.admin-filters-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.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;
}

/* Full note: a native disclosure under the excerpt. While it is open the
   excerpt is hidden (:has), because the full text starts the same way. */
.admin-activity .note-more {
    margin-top: 0.25rem;
}

.admin-activity .note-more > summary {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    color: var(--accent-ink);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
}

.admin-activity .note-more > summary:hover {
    text-decoration: underline;
}

.admin-activity .note-more .note-more-open,
.admin-activity .note-more[open] .note-more-closed {
    display: none;
}

.admin-activity .note-more[open] .note-more-open {
    display: inline;
}

.admin-activity .cell-note:has(.note-more[open]) .note-excerpt {
    display: none;
}

.admin-activity .note-full {
    margin: 0.25rem 0 0;
    color: var(--foreground);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.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;
}

/* ---------------------------------------------------------------------
   Academic structure (D055): the Admin "Programs, years and subjects" page and
   the dependent course -> year -> track -> subject fields of the upload,
   correction and replacement forms. Built from the Academic Taxonomy pattern
   (program cards, quiet panels, status badges); V9 draws neither screen.
   --------------------------------------------------------------------- */

.structure-link-note {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.structure-link-note a {
    font-weight: 600;
}

.structure-program-name {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
    overflow-wrap: anywhere;
}

.structure-panel {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
}

.structure-optional {
    color: var(--muted-foreground);
    font-weight: 400;
}

.structure-help,
.structure-empty {
    margin: 0.25rem 1.25rem 0.75rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.375rem;
}

.structure-empty {
    padding: 0.75rem 0.875rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--neutral-surface);
}

.structure-panel > .panel-title {
    margin: 1rem 1.25rem 0;
}

.structure-year-group {
    margin: 0 0 1rem;
}

.structure-group-title,
.structure-track-title {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 1rem 1.25rem 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.375rem;
}

.structure-track-title {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.structure-year-group .structure-empty,
.structure-panel .admin-table-wrap {
    margin-right: 1.25rem;
    margin-left: 1.25rem;
}

.structure-year-group .structure-empty {
    margin-top: 0;
}

.structure-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin: 1rem 1.25rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.structure-add .field {
    flex: 1 1 14rem;
    min-width: 0;
}

.structure-add button .icon {
    width: 1rem;
    height: 1rem;
}

.structure-table .cell-name .admin-badge {
    margin-left: 0.5rem;
    vertical-align: middle;
}

@media (min-width: 64rem) {
    .structure-programs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 47.99rem) {
    .structure-help,
    .structure-empty,
    .structure-add,
    .structure-group-title,
    .structure-track-title,
    .structure-year-group .structure-empty,
    .structure-panel .admin-table-wrap {
        margin-right: 0.875rem;
        margin-left: 0.875rem;
    }

    .structure-panel > .panel-title {
        margin-right: 0.875rem;
        margin-left: 0.875rem;
    }

    .structure-add .field,
    .structure-add button {
        flex: 1 1 100%;
    }

    .structure-add button {
        min-height: 2.75rem;
    }
}

.academic-fields {
    display: grid;
    gap: 0.5rem;
}

/* A field with help text (the track) must not stretch its neighbour's control. */
.academic-fields .upload-metadata-grid {
    align-items: start;
}

.academic-empty,
.academic-kept,
.academic-notice {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--neutral-surface);
}

.academic-empty {
    border: 1px solid var(--border);
    color: var(--foreground);
}

.academic-notice {
    border: 1px solid oklch(52% 0.16 255 / 35%);
    background: var(--accent-surface);
    color: var(--accent-ink);
}

.academic-fields [hidden] {
    display: none;
}

.academic-refresh {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.academic-fields select:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------
   AI Resource Inquiry
   A conversation-first page: one centred reading column, a compact bar
   (scope, About this inquiry, Sources, New inquiry), a compact composer, and
   two things that open on demand: the sources the latest answer cites (a side
   panel on a wide screen, a sheet on a phone) and the Privacy and AI use
   dialog. Borders stay light, the AI accent (--ai) marks only what the AI
   produced, and nothing here is decoration: every label states something the
   page knows. Without JavaScript the disclosure still opens, the Sources
   panel stays in the page and Privacy and AI use is a section at the end.
   --------------------------------------------------------------------- */

.app-content .inquiry {
    --inquiry-read: 42rem;
    --inquiry-panel: 20rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-content: start;
    width: 100%;
    max-width: 84rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.inquiry-main {
    display: flex;
    min-width: 0;
    min-height: calc(100dvh - var(--header-height));
    flex-direction: column;
}

/* ---- Bar: title, scope with its information icon, and quiet controls --- */

.inquiry-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0 0.25rem;
}

.inquiry-bar-title {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.375rem 0.625rem;
    align-items: center;
}

.inquiry-bar h1 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: -0.005em;
}

.inquiry-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
    margin-left: auto;
}

.inquiry-bar-actions form {
    display: block;
}

.inquiry-btn {
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.inquiry-btn .icon {
    width: 0.9375rem;
    height: 0.9375rem;
    color: var(--muted-foreground);
}

.inquiry-btn[aria-expanded="true"] {
    border-color: oklch(52% 0.16 255 / 35%);
    background: var(--surface);
}

/* New inquiry: a quiet text button. It keeps its label and a 36px target (40px on a phone). */
.inquiry-new {
    min-height: 2.25rem;
    padding: 0.25rem 0.625rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.inquiry-new:hover {
    color: var(--foreground);
}

.inquiry-new .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.inquiry-badge {
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background: var(--accent-surface);
    color: var(--accent-ink);
    font: 500 0.6875rem/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
}

/* The scope pill and the information icon wrap together, so the icon always sits right beside the pill. */
.inquiry-scope {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.125rem;
    align-items: center;
}

.inquiry-scope-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.inquiry-scope-pill[data-scope="library"] {
    border-color: oklch(52% 0.16 255 / 25%);
    background: var(--accent-surface);
    color: var(--accent-ink);
}

/* About this inquiry: a <details> opened by an information icon, so it works without JavaScript.
   The card is placed against the bar (not the icon), so it never runs off a narrow screen. */
.inquiry-about-button {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--muted-foreground);
    cursor: pointer;
    list-style: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.inquiry-about-button::-webkit-details-marker {
    display: none;
}

.inquiry-about-button:hover {
    background: var(--muted);
    color: var(--foreground);
}

.inquiry-about[open] > .inquiry-about-button {
    background: var(--accent-surface);
    color: var(--accent-ink);
}

.inquiry-about-button .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.inquiry-about-card {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    left: 0;
    display: grid;
    width: min(24rem, 100%);
    gap: 0.875rem;
    padding: 1rem 1.125rem 1.125rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-raised);
    font-size: 0.8125rem;
    line-height: 1.3125rem;
}

.inquiry-about-card h2 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.inquiry-about-card h3 {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.inquiry-about-card p,
.inquiry-about-card ul {
    margin: 0;
    color: var(--text-secondary);
}

.inquiry-about-card p + p,
.inquiry-about-card p + form {
    margin-top: 0.5rem;
}

.inquiry-about-card ul {
    display: grid;
    gap: 0.25rem;
    padding-left: 1.125rem;
}

.inquiry-about-card strong {
    color: var(--foreground);
    font-weight: 600;
}

.inquiry-about-resource {
    display: grid;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
}

.inquiry-widen {
    display: grid;
    gap: 0.375rem;
    justify-items: start;
}

/* ---- Marks, alerts ---------------------------------------------------- */

.inquiry-mark {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--ai);
}

.inquiry-mark .icon {
    width: 1rem;
    height: 1rem;
}

.inquiry-mark .ms {
    font-size: 1.125rem;
}

.inquiry-mark-large .ms {
    font-size: 1.5rem;
}

.inquiry-ask-link .ms,
.inquiry-ask-unavailable .ms {
    color: var(--ai);
    font-size: 1.125rem;
}

.inquiry-mark-large {
    width: 2.5rem;
    height: 2.5rem;
}

.inquiry-mark-large .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.inquiry-alert {
    width: 100%;
    max-width: var(--inquiry-read);
    margin: 0.5rem auto 0;
}

/* ---- Thread ----------------------------------------------------------- */

.inquiry-thread {
    display: flex;
    width: 100%;
    max-width: var(--inquiry-read);
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1.75rem;
    margin: 0 auto;
    padding: 1.25rem 0 1.5rem;
}

.inquiry-thread:focus {
    outline: none;
}

.inquiry-thread.is-empty {
    justify-content: center;
    padding-bottom: 3rem;
}

.inquiry-empty,
.inquiry-state {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    max-width: 30rem;
    margin: 0 auto;
    text-align: center;
}

.inquiry-empty h2,
.inquiry-state h2 {
    margin: 0.25rem 0 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.75rem;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.inquiry-empty > p,
.inquiry-state p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5rem;
}

.inquiry-examples {
    display: grid;
    width: 100%;
    gap: 0.5rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.inquiry-example {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 0.875rem 0.625rem 0.75rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.inquiry-example .inquiry-mark {
    width: 2rem;
    height: 2rem;
}

.inquiry-example p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.inquiry-example p + p {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.inquiry-state-icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted-foreground);
}

.inquiry-state .inquiry-state-admin {
    padding: 0.5rem 0.75rem;
    border: 1px solid oklch(52% 0.12 70 / 25%);
    border-radius: var(--radius-sm);
    background: var(--warning-surface);
    color: oklch(42% 0.1 70);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.inquiry-turn {
    display: grid;
    gap: 1.125rem;
}

.inquiry-question {
    width: fit-content;
    max-width: min(30rem, 88%);
    margin: 0 0 0 auto;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: 0 1px 2px oklch(23% 0.03 255 / 4%);
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.inquiry-answer {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.inquiry-answer-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.625rem;
}

.inquiry-answer-body > p {
    margin: 0;
}

.inquiry-answer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    align-items: center;
    min-height: 1.75rem;
}

.inquiry-tag,
.inquiry-status {
    display: inline-flex;
    padding: 0.125rem 0.4375rem;
    border-radius: 0.25rem;
    font: 500 0.6875rem/1.125rem var(--font-mono);
    letter-spacing: 0.02em;
}

.inquiry-tag {
    background: var(--ai-surface);
    color: var(--ai);
}

.inquiry-status {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-secondary);
}

.inquiry-status-partially_answered,
.inquiry-status-conflicting_evidence,
.inquiry-status-insufficient_evidence,
.inquiry-status-sources_unavailable {
    border-color: oklch(52% 0.12 70 / 30%);
    background: var(--warning-surface);
    color: oklch(42% 0.1 70);
}

.inquiry-lead {
    font-weight: 600;
}

.inquiry-points {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inquiry-points > li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
    padding-left: 1.125rem;
}

.inquiry-points > li::before {
    position: absolute;
    top: 0.6875rem;
    left: 0.125rem;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 999px;
    background: var(--muted-foreground);
    content: "";
}

.inquiry-cites {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.inquiry-cite {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    gap: 0.375rem;
    align-items: center;
    padding: 0.0625rem 0.25rem 0.0625rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.25rem;
    text-decoration: none;
}

.inquiry-cite:hover {
    border-color: oklch(52% 0.16 255 / 35%);
    background: var(--surface);
    color: var(--foreground);
}

.inquiry-cite-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inquiry-cite-locator {
    flex: none;
    padding: 0 0.4375rem;
    border-radius: 999px;
    background: var(--accent-surface);
    color: var(--accent-ink);
    font: 500 0.6875rem/1.25rem var(--font-mono);
}

.inquiry-cite:not(:has(.inquiry-cite-locator)) {
    padding-right: 0.625rem;
}

.inquiry-message {
    color: var(--text-secondary);
}

.inquiry-note {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--neutral-surface);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.375rem;
}

.inquiry-note-not_covered,
.inquiry-note-unresolved_conflict {
    border-color: oklch(52% 0.12 70 / 25%);
    background: var(--warning-surface);
    color: oklch(42% 0.1 70);
}

.inquiry-coverage {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.25rem;
}

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

.inquiry-actions form {
    display: block;
}

.inquiry-answer-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    align-items: center;
}

.inquiry-linkbtn {
    display: inline-flex;
    min-height: 1.75rem;
    padding: 0 0.625rem;
    gap: 0.375rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
}

.inquiry-linkbtn:hover {
    border-color: oklch(52% 0.16 255 / 35%);
    background: var(--surface);
    color: var(--foreground);
}

.inquiry-linkbtn .inquiry-badge {
    min-width: 1.125rem;
    height: 1.125rem;
}

/* The small print that used to follow every result waits behind one quiet disclosure. */
.inquiry-more {
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.inquiry-more > summary {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    color: var(--muted-foreground);
    cursor: pointer;
    list-style: none;
}

.inquiry-more > summary::-webkit-details-marker {
    display: none;
}

.inquiry-more > summary::after {
    width: 0.4375rem;
    height: 0.4375rem;
    margin-left: 0.125rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateY(-1px) rotate(45deg);
    transition: transform var(--motion-fast) var(--ease-out);
}

.inquiry-more[open] > summary::after {
    transform: translateY(1px) rotate(225deg);
}

.inquiry-more > summary:hover {
    color: var(--foreground);
}

.inquiry-more > p {
    margin: 0.375rem 0 0;
    color: var(--muted-foreground);
}

/* ---- Composer: one compact card, one quiet line under it --------------- */

.inquiry-composer-wrap {
    position: sticky;
    z-index: 5;
    bottom: 0;
    width: 100%;
    max-width: var(--inquiry-read);
    margin: 0 auto;
    padding: 0.5rem 0 0.75rem;
    background: var(--background);
}

/* A short fade above the opaque wrapper, so scrolled text eases out. */
.inquiry-composer-wrap::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 1rem;
    background: linear-gradient(to top, var(--background), transparent);
    content: "";
    pointer-events: none;
}

.inquiry-composer {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.inquiry-composer textarea {
    display: block;
    flex: 1 1 auto;
    height: 2.25rem;
    min-height: 2.25rem;
    max-height: 10rem;
    padding: 0.375rem 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    resize: none;
}

.inquiry-composer textarea:focus {
    box-shadow: none;
}

.inquiry-composer textarea:disabled {
    cursor: not-allowed;
}

.inquiry-count {
    align-self: center;
    color: var(--muted-foreground);
    font: 400 0.6875rem/1rem var(--font-mono);
}

.inquiry-count[hidden] {
    display: none;
}

.inquiry-send {
    width: 2.25rem;
    min-height: 2.25rem;
    height: 2.25rem;
    flex: none;
    padding: 0;
    border-color: var(--foreground);
    border-radius: 999px;
    background: var(--foreground);
    color: var(--card);
}

.inquiry-send:hover {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
}

.inquiry-send .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.inquiry-composer-note {
    margin: 0.375rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.125rem;
    text-align: center;
}

.inquiry-privacy-link {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    white-space: nowrap;
}

.inquiry-privacy-link:hover {
    color: var(--foreground);
}

.inquiry-pending,
.inquiry-block {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.inquiry-pending[hidden] {
    display: none;
}

.inquiry-block {
    align-items: flex-start;
    border-color: oklch(52% 0.12 70 / 25%);
    background: var(--warning-surface);
    color: oklch(42% 0.1 70);
}

.inquiry-block .icon {
    margin-top: 0.125rem;
    flex: none;
}

/* The question limit: the reason and the way on take the composer's place. */
.inquiry-limit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border: 1px solid oklch(52% 0.12 70 / 28%);
    border-radius: var(--radius-xl);
    background: var(--warning-surface);
    color: oklch(40% 0.1 70);
    font-size: 0.875rem;
    line-height: 1.375rem;
}

.inquiry-limit p {
    flex: 1 1 15rem;
    margin: 0;
}

.inquiry-limit form {
    flex: none;
}

.inquiry-limit .button-small {
    min-height: 2.25rem;
    padding: 0.4rem 0.875rem;
    font-size: 0.8125rem;
}

.inquiry-spinner {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    border: 2px solid var(--border);
    border-top-color: var(--ai);
    border-radius: 999px;
    animation: inquiry-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .inquiry-spinner {
        animation: none;
    }
}

/* ---- Sources: optional, on demand ------------------------------------- */

.inquiry-panel {
    display: none;
    min-width: 0;
}

.inquiry-panel:focus {
    outline: none;
}

.inquiry-panel-head {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.inquiry-panel-head h2 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.inquiry-panel-sub {
    margin: 0.125rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.inquiry-icon-button {
    width: 2rem;
    min-height: 2rem;
    height: 2rem;
    flex: none;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--muted-foreground);
}

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

.inquiry-icon-button .icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* Closing needs the script; without it the panel is simply part of the page. */
html:not(.has-js) .inquiry-panel .inquiry-icon-button {
    display: none;
}

.inquiry-source-list {
    display: grid;
    gap: 0.625rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
}

.inquiry-source {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.inquiry-source-title {
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.inquiry-source-title:hover {
    color: var(--primary);
    text-decoration: underline;
}

.inquiry-source-meta {
    display: flex;
    margin: 0;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.inquiry-source-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    align-items: center;
}

.inquiry-source-pages-label {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

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

.inquiry-locators li {
    padding: 0 0.4375rem;
    border-radius: 999px;
    background: var(--accent-surface);
    color: var(--accent-ink);
    font: 500 0.6875rem/1.25rem var(--font-mono);
}

.inquiry-help {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.inquiry-ready {
    font-size: 0.75rem;
    font-weight: 500;
}

.inquiry-ready-ready {
    color: var(--success);
}

.inquiry-ready:not(.inquiry-ready-ready) {
    color: oklch(42% 0.1 70);
}

.inquiry-panel-empty {
    margin: 0.875rem 0 0;
    padding: 0.875rem;
    border: 1px dashed var(--input);
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.inquiry-panel-note {
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.inquiry-ask-link {
    width: 100%;
}

/* "Ask about this resource" in the library preview dialog. The elements keep
   their own display values, so the hidden attribute is restated here. */
.preview-inquiry {
    display: grid;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.preview-inquiry[hidden],
.preview-inquiry [hidden] {
    display: none;
}

.inquiry-ask-link .icon {
    color: var(--ai);
}

.inquiry-ask-unavailable .icon {
    color: var(--ai);
}

/* ---- Privacy and AI use: a modal dialog, a section without JavaScript -- */

.inquiry-privacy {
    padding: 0;
    border: 0;
    color: var(--foreground);
}

.inquiry-privacy-inner {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.375rem;
}

.inquiry-privacy-head {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
}

.inquiry-privacy-head h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: -0.005em;
}

/* The heading takes focus when the dialog opens (for screen readers); it is not a control, so it shows no ring. */
.inquiry-privacy h2:focus {
    outline: none;
}

.inquiry-privacy h3 {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.inquiry-privacy p,
.inquiry-privacy ul {
    margin: 0;
    color: var(--text-secondary);
}

.inquiry-privacy ul {
    display: grid;
    gap: 0.125rem;
    padding-left: 1.125rem;
}

.inquiry-privacy-section {
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-soft);
}

.inquiry-privacy-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.inquiry-privacy-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.inquiry-privacy-back {
    display: none;
}

/* Without JavaScript (or before it is ready) the same content is an ordinary
   section at the end of the page, reached from the "Privacy and AI use" link.
   The Provision accounts dialog uses the same pattern. */
.inquiry-privacy:not([open]) {
    position: static;
    display: block;
    width: 100%;
    max-width: var(--inquiry-read);
    height: auto;
    max-height: none;
    margin: 0.5rem auto 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    scroll-margin-top: 4.5rem;
    grid-column: 1 / -1;
}

.inquiry-privacy:not([open]) .inquiry-privacy-inner {
    padding: 1rem 1.125rem 1.25rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.inquiry-privacy:not([open]) [data-inquiry-close] {
    display: none;
}

.inquiry-privacy:not([open]) .inquiry-privacy-back {
    display: inline-flex;
}

/* While the script starts, keep the section out of sight; if it never starts, show it after two seconds. */
html.has-js:not(.inquiry-enhanced) .inquiry-privacy:not([open]) {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    animation: inquiry-privacy-failsafe 0s linear 2s forwards;
}

@keyframes inquiry-privacy-failsafe {
    to {
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
}

html.inquiry-enhanced .inquiry-privacy:not([open]) {
    display: none;
}

.inquiry-privacy[open] {
    display: block;
    width: min(32rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    overflow: auto;
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: 0 24px 70px oklch(23% 0.02 255 / 30%), 0 2px 6px oklch(23% 0.02 255 / 12%);
}

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

.inquiry-scrim {
    display: none;
}

/* ---- Wide screens: Sources is a permanent column ------------------------
   The column is always there, with its own empty state, so there is nothing to open or close; the
   Sources button, the panel's close button and the "Sources and pages" shortcut are for narrower
   widths only. 72rem leaves a comfortable reading column even beside the expanded sidebar. */

@media (min-width: 72rem) {
    .app-content .inquiry {
        grid-template-columns: minmax(0, 1fr) var(--inquiry-panel);
        padding: 0 1.5rem;
    }

    .inquiry-main {
        padding-right: 1.25rem;
    }

    .inquiry-panel {
        position: sticky;
        top: var(--header-height);
        display: block;
        align-self: start;
        max-height: calc(100dvh - var(--header-height));
        padding: 1.25rem 0 2rem 1.25rem;
        border-left: 1px solid var(--border-soft);
        overflow-y: auto;
    }

    .inquiry-sources-link,
    .inquiry-panel .inquiry-icon-button,
    .inquiry-answer-foot {
        display: none;
    }
}

/* ---- Phones and tablets: Sources is a sheet that opens on demand ------ */

@media (max-width: 71.99rem) {
    html.has-js .inquiry-panel {
        position: fixed;
        z-index: 90;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        max-height: min(78dvh, 40rem);
        padding: 0.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        background: var(--background);
        box-shadow: 0 -12px 40px oklch(23% 0.02 255 / 22%);
        overflow-y: auto;
        transform: translateY(105%);
        visibility: hidden;
        transition: transform var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base);
    }

    html.has-js .inquiry-panel.is-open {
        transform: none;
        visibility: visible;
        transition: transform var(--motion-base) var(--ease-out), visibility 0s;
    }

    html.has-js .inquiry-panel::before {
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        margin: 0 auto 0.625rem;
        border-radius: 999px;
        background: var(--input);
        content: "";
    }

    .inquiry-scrim {
        position: fixed;
        z-index: 85;
        inset: 0;
        display: block;
        background: oklch(23% 0.02 255 / 42%);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--motion-base) var(--ease-out);
    }

    .inquiry-scrim.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    html:not(.has-js) .inquiry-panel {
        display: block;
        max-width: var(--inquiry-read);
        margin: 0 auto;
        padding: 0.5rem 0 1rem;
    }
}

@media (max-width: 47.99rem) {
    .inquiry-bar {
        padding-top: 0.75rem;
    }

    .inquiry-bar-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .inquiry-new {
        min-height: 2.5rem;
    }

    /* About opens as a full-width card under the bar. */
    .inquiry-about-card {
        right: 0;
        width: auto;
        max-height: calc(100dvh - 14rem);
        overflow-y: auto;
    }

    .inquiry-thread {
        gap: 1.5rem;
        padding-top: 0.75rem;
    }

    .inquiry-question {
        max-width: 92%;
    }

    /* The whole wrapper (composer and note) is opaque on a phone, so
       conversation text scrolling underneath never shows through it. */
    .inquiry-composer-wrap {
        bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
        padding-bottom: 0.5rem;
    }

    .inquiry-composer-note {
        font-size: 0.6875rem;
    }

    .inquiry-privacy[open] {
        width: 100vw;
        max-width: 100vw;
        max-height: 88dvh;
        margin: auto 0 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .inquiry-privacy-foot .button-secondary {
        width: 100%;
    }

    .inquiry-limit {
        padding: 0.75rem;
    }

    .inquiry-limit form,
    .inquiry-limit .button-small {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inquiry-panel,
    .inquiry-scrim,
    .inquiry-more > summary::after {
        transition: none;
    }
}

@media (forced-colors: active) {
    .inquiry-composer,
    .inquiry-question,
    .inquiry-cite,
    .inquiry-mark,
    .inquiry-source,
    .inquiry-example,
    .inquiry-about-card,
    .inquiry-linkbtn {
        border-color: CanvasText;
    }

    .inquiry-send {
        border-color: ButtonText;
    }
}

/* =====================================================================
   POLISH LAYER (2026-10-18)
   A presentation-only layer on top of the V9 base system: softer
   surfaces, larger radii, a semantic color system for labels, calmer
   metadata and short motion. It changes no layout contract, markup
   meaning or behavior; removing this block restores the previous look.
   ===================================================================== */

:root {
    --background: #f3f4f7;
    --border: #e4e7ed;
    --border-soft: #eceef3;
    --radius-sm: 0.75rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.5rem;
    --shadow-card: 0 1px 2px rgb(20 23 28 / 4%), 0 4px 14px rgb(20 23 28 / 4%);
    --shadow-raised: 0 2px 4px rgb(20 23 28 / 5%), 0 12px 28px rgb(20 23 28 / 9%);
    --motion-fast: 140ms;
    --motion-base: 200ms;
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Semantic label palette: each hue always means the same thing. */
    --c-blue-bg: oklch(95.5% 0.03 255);   --c-blue-fg: oklch(47% 0.15 258);
    --c-teal-bg: oklch(95.5% 0.035 190);  --c-teal-fg: oklch(46% 0.09 192);
    --c-amber-bg: oklch(95.8% 0.05 82);   --c-amber-fg: oklch(49% 0.12 62);
    --c-rose-bg: oklch(95.8% 0.03 12);    --c-rose-fg: oklch(51% 0.16 14);
    --c-violet-bg: oklch(95.8% 0.03 300); --c-violet-fg: oklch(49% 0.16 300);
    --c-green-bg: oklch(95.8% 0.04 152);  --c-green-fg: oklch(45% 0.11 152);
    --c-orange-bg: oklch(95.8% 0.045 55); --c-orange-fg: oklch(52% 0.14 48);
    --c-slate-bg: oklch(95.5% 0.008 255); --c-slate-fg: oklch(45% 0.02 255);
    --c-red-bg: oklch(96% 0.03 25);       --c-red-fg: oklch(52% 0.18 26);
}

/* Surfaces: white cards on a light gray canvas, soft edges. */
.panel, .dash-card, .dashboard-card, .resource-card, .form-card, .file-card,
.status-card, .rp-card, .auth-card, .rv-file, .my-list, .mq-list, .inquiry-block {
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.table-scroll { border-color: var(--border-soft); border-radius: var(--radius-md); }

/* Cards that open something lift slightly under the pointer. */
.resource-card {
    padding: 1rem 1rem 0.875rem 1.125rem;
    transition: transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}
.resource-card:hover, .resource-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-raised);
    border-color: var(--border);
}

/* Resource type: one hue per type, same everywhere (cards, lists, preview). */
.type-tile { border-radius: 0.5rem; background: var(--tt-bg, var(--c-slate-bg)); color: var(--tt-fg, var(--c-slate-fg)); }
[data-type="type-handout"]      { --tt-bg: var(--c-blue-bg);   --tt-fg: var(--c-blue-fg); }
[data-type="type-study-guide"]  { --tt-bg: var(--c-teal-bg);   --tt-fg: var(--c-teal-fg); }
[data-type="type-reviewer"]     { --tt-bg: var(--c-amber-bg);  --tt-fg: var(--c-amber-fg); }
[data-type="type-presentation"] { --tt-bg: var(--c-rose-bg);   --tt-fg: var(--c-rose-fg); }
[data-type="type-notes"]        { --tt-bg: var(--c-violet-bg); --tt-fg: var(--c-violet-fg); }
[data-type="type-module"]       { --tt-bg: var(--c-green-bg);  --tt-fg: var(--c-green-fg); }
[data-type="type-summary"]      { --tt-bg: var(--c-orange-bg); --tt-fg: var(--c-orange-fg); }
.resource-card-type { font-weight: 600; }

/* File type chips: quiet pills, colored by format. */
.file-chip {
    border: 0;
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    background: var(--fc-bg, var(--c-slate-bg));
    color: var(--fc-fg, var(--c-slate-fg));
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.03em;
}
[data-file="pdf"]  { --fc-bg: var(--c-red-bg);    --fc-fg: var(--c-red-fg); }
[data-file="docx"] { --fc-bg: var(--c-blue-bg);   --fc-fg: var(--c-blue-fg); }
[data-file="pptx"] { --fc-bg: var(--c-orange-bg); --fc-fg: var(--c-orange-fg); }
[data-file="jpg"], [data-file="png"] { --fc-bg: var(--c-teal-bg); --fc-fg: var(--c-teal-fg); }
.file-size { font-family: var(--font-sans); color: var(--muted-foreground); }

/* Roles: one hue per role. */
.admin-badge-role { border-color: transparent; background: var(--rl-bg, var(--surface)); color: var(--rl-fg, var(--surface-foreground)); font-weight: 600; }
[data-role="student"]            { --rl-bg: var(--c-blue-bg);   --rl-fg: var(--c-blue-fg); }
[data-role="teacher_instructor"] { --rl-bg: var(--c-teal-bg);   --rl-fg: var(--c-teal-fg); }
[data-role="moderator"]          { --rl-bg: var(--c-violet-bg); --rl-fg: var(--c-violet-fg); }
[data-role="admin"]              { --rl-bg: var(--c-rose-bg);   --rl-fg: var(--c-rose-fg); }

/* Status pills: tinted, borderless. */
.badge, .status-pill, .admin-badge { border-color: transparent; font-weight: 600; }

/* Metadata reads as calm text, not typewriter text. */
.resource-card-byline, .target-ref { color: var(--muted-foreground); }

/* Buttons: rounder, with press feedback. */
button, .button-link, .button-secondary, .button-ghost, .button-block {
    border-radius: 0.75rem;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease,
                color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
                transform var(--motion-fast) var(--ease-out);
}
button:active:not(:disabled), .button-link:active, .button-secondary:active, .button-block:active {
    transform: scale(0.98);
}
.button-secondary, .button-secondary.button-link { border-color: var(--border); box-shadow: 0 1px 2px rgb(20 23 28 / 4%); }

/* Page entrance: content settles in instead of snapping. */
.app-main > * { animation: ls-enter var(--motion-base) var(--ease-out) both; }
@keyframes ls-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Dialogs open with a short scale-and-fade. */
dialog[open] { animation: ls-dialog var(--motion-base) var(--ease-out) both; }
dialog::backdrop { background: rgb(15 18 25 / 38%); backdrop-filter: blur(2px); }
@keyframes ls-dialog { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .app-main > *, dialog[open] { animation: none; }
    .resource-card, button, .button-link, .button-secondary, .button-ghost, .button-block { transition: none; }
    .resource-card:hover, .resource-card:focus-within { transform: none; }
}

/* Dates, counts and sizes read in the interface font with even-width digits.
   Codes, usernames, credentials and file names keep the monospace font. */
.app-nav-menu-count, .dash-date, .dash-count-note, .dash-queue-since, .library-hint,
.preview-position, .preview-facts dd[data-fact="submitted"], .download-button-size,
.file-card-meta, .upload-file-strip-meta, .review-file-size, .mq-count, .mq-since-date,
.dash-share-count, .my-filter-count, .my-row-date, .reaction-count, .notif-when,
.inquiry-count, .inquiry-tag, .inquiry-status {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.dash-date, .dash-queue-since, .mq-since-date, .my-row-date, .notif-when { color: var(--muted-foreground); }

/* Progressive disclosure: explanations stay one click away instead of
   filling the screen. Native <details>, keyboard and screen-reader ready. */
.info-disclosure { margin: 0 0 1rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.info-disclosure > summary {
    display: inline-flex; gap: 0.375rem; align-items: center;
    padding: 0.25rem 0.625rem 0.25rem 0.5rem; border-radius: 999px;
    color: var(--muted-foreground); cursor: pointer; list-style: none;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.info-disclosure > summary::-webkit-details-marker { display: none; }
.info-disclosure > summary:hover { background: var(--muted); color: var(--foreground); }
.info-disclosure > summary .icon { width: 1rem; height: 1rem; }
.info-disclosure[open] > summary { background: var(--muted); color: var(--foreground); }
.info-disclosure ul {
    margin: 0.5rem 0 0; padding: 0.75rem 1rem 0.75rem 1.75rem;
    border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-card);
    line-height: 1.5;
}
.info-disclosure li + li { margin-top: 0.375rem; }
/* The same disclosure with a prose body (staff screens: scope and how-to text kept verbatim, closed by default). */
.info-disclosure .info-disclosure-body {
    margin: 0.5rem 0 0; padding: 0.75rem 1rem;
    border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-card);
    line-height: 1.5;
}
.info-disclosure .info-disclosure-body p { margin: 0; }
.info-disclosure .info-disclosure-body p + p { margin-top: 0.5rem; }
/* Directly under a page header the pill tucks into the header's own gap instead of adding a second one. */
.admin-head + .info-disclosure,
.mq-header + .info-disclosure {
    margin: -0.625rem 0 0.75rem;
}

/* On a phone the staff disclosures get a finger-sized target (the pill is 28 px tall elsewhere). */
@media (max-width: 47.99rem) {
    .info-disclosure:has(> .info-disclosure-body) > summary { min-height: 2.5rem; }
}

.dash-eyebrow { margin: 0 0 0.125rem; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; }

/* The AI call to action: the one place on the page that is AI-colored. */
.ai-cta-card {
    display: grid; gap: 0.5rem; margin: 0 0 0.25rem; padding: 1rem;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, var(--ai-surface), oklch(97.5% 0.015 255));
    border: 1px solid oklch(52% 0.17 295 / 14%);
}
.ai-cta-title { display: flex; gap: 0.375rem; align-items: center; margin: 0; color: var(--foreground); font-weight: 600; }
.ai-cta-title .ms { color: var(--ai); font-size: 1.125rem; }
.ai-cta-copy { margin: 0; color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.45; }
.ai-cta-note { margin: 0; color: var(--muted-foreground); font-size: 0.75rem; }
.ai-cta-button, .ai-cta-button.button-link {
    width: 100%; min-height: 2.5rem;
    border-color: var(--ai); background: var(--ai); color: #fff;
    box-shadow: 0 6px 16px oklch(52% 0.17 295 / 22%);
}
.ai-cta-button:hover, .ai-cta-button.button-link:hover { border-color: oklch(45% 0.17 295); background: oklch(45% 0.17 295); color: #fff; }
.ai-cta-button .ms { font-size: 1.125rem; }
.ai-cta-button .ms, .inquiry-ask-link.ai-cta-button .ms { color: #fff; }
.download-aside { width: 100%; min-height: 2.5rem; }
.download-aside .download-button-size { color: var(--muted-foreground); font-size: 0.75rem; }

/* Folded capability details on Admin settings pages. */
.cap-details { margin-top: 0.5rem; }
.cap-details > summary {
    display: inline-flex; gap: 0.25rem; align-items: center; cursor: pointer; list-style: none;
    color: var(--primary); font-size: 0.8125rem; font-weight: 500;
}
.cap-details > summary::-webkit-details-marker { display: none; }
.cap-details > summary::after { content: "▾"; font-size: 0.75rem; transition: transform var(--motion-fast) ease; }
.cap-details[open] > summary::after { transform: rotate(180deg); }
.cap-details[open] { padding-top: 0.25rem; }


/* =====================================================================
   DASHBOARD FIGURES (2026-10-18). Real counts only. Charts are inline SVG
   whose exact geometry sits in presentation attributes, because the Content
   Security Policy forbids inline styles.
   ===================================================================== */

/* Tones: background for chips and icons, ink for icons, numbers and chart marks. */
.tone-blue   { --tone-bg: var(--c-blue-bg);   --tone-fg: var(--c-blue-fg); }
.tone-teal   { --tone-bg: var(--c-teal-bg);   --tone-fg: var(--c-teal-fg); }
.tone-amber  { --tone-bg: var(--c-amber-bg);  --tone-fg: var(--c-amber-fg); }
.tone-rose   { --tone-bg: var(--c-rose-bg);   --tone-fg: var(--c-rose-fg); }
.tone-violet { --tone-bg: var(--c-violet-bg); --tone-fg: var(--c-violet-fg); }
.tone-green  { --tone-bg: var(--c-green-bg);  --tone-fg: var(--c-green-fg); }
.tone-orange { --tone-bg: var(--c-orange-bg); --tone-fg: var(--c-orange-fg); }
.tone-slate  { --tone-bg: var(--c-slate-bg);  --tone-fg: var(--c-slate-fg); }
.tone-red    { --tone-bg: var(--c-red-bg);    --tone-fg: var(--c-red-fg); }

.metric-tiles {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem;
    margin: 0 0 1rem;
}
.metric-tile {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon label" "value value" "note note";
    gap: 0.25rem 0.625rem; align-items: center; padding: 1rem 1.125rem;
    border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--card);
    box-shadow: var(--shadow-card); color: var(--foreground); text-decoration: none;
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
a.metric-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
a.metric-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.metric-icon {
    grid-area: icon; display: grid; width: 2rem; height: 2rem; place-items: center;
    border-radius: 0.625rem; background: var(--tone-bg); color: var(--tone-fg);
}
.metric-icon .icon { width: 1.125rem; height: 1.125rem; }
.metric-label { grid-area: label; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; }
.metric-value { grid-area: value; margin-top: 0.375rem; font-size: 1.875rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric-note { grid-area: note; color: var(--muted-foreground); font-size: 0.75rem; }
/* Hidden and Restricted stay two separate figures, never one total. */
.metric-split { display: flex; flex-wrap: wrap; gap: 0.125rem 0.875rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--muted-foreground); }
.metric-split strong { color: var(--foreground); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; margin: 0; }
.metric-card { padding: 1rem 1.125rem 1.125rem; }
.metric-card-wide { grid-column: 1 / -1; }
.metric-card-head { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; justify-content: space-between; margin: 0 0 0.875rem; }
.metric-card-head h2 { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.metric-card-note { color: var(--muted-foreground); font-size: 0.75rem; }
.metric-foot { margin: 0.875rem 0 0; }
.metric-unavailable, .metric-empty { display: flex; gap: 0.5rem; align-items: center; margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }

/* Doughnut: ring segments are circles with exact dash lengths (circumference 100). */
.donut-layout { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.donut { position: relative; width: 11rem; height: 11rem; }
.donut svg { display: block; width: 100%; height: 100%; }
.donut-ring { stroke: var(--muted); }
.donut-seg { stroke: var(--tone-fg, var(--primary)); }
.seg-blue   { stroke: var(--c-blue-fg); }
.seg-teal   { stroke: var(--c-teal-fg); }
.seg-amber  { stroke: var(--c-amber-fg); }
.seg-rose   { stroke: var(--c-rose-fg); }
.seg-violet { stroke: var(--c-violet-fg); }
.seg-green  { stroke: var(--c-green-fg); }
.seg-orange { stroke: var(--c-orange-fg); }
.seg-red    { stroke: var(--c-red-fg); }
.seg-slate  { stroke: var(--c-slate-fg); }
.donut-centre {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--muted-foreground); font-size: 0.75rem; pointer-events: none;
}
.donut-centre strong { color: var(--foreground); font-size: 1.75rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }

.donut-legend { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; }
.donut-legend > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 3.5rem; gap: 0.5rem; align-items: center; }
.legend-swatch { width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; background: var(--c-slate-fg); }
.swatch-blue   { background: var(--c-blue-fg); }
.swatch-teal   { background: var(--c-teal-fg); }
.swatch-amber  { background: var(--c-amber-fg); }
.swatch-rose   { background: var(--c-rose-fg); }
.swatch-violet { background: var(--c-violet-fg); }
.swatch-green  { background: var(--c-green-fg); }
.swatch-orange { background: var(--c-orange-fg); }
.swatch-red    { background: var(--c-red-fg); }
.swatch-slate  { background: var(--c-slate-fg); }
.legend-name { min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
.legend-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.legend-percent { color: var(--muted-foreground); text-align: right; font-variant-numeric: tabular-nums; }
.legend-members { grid-column: 2 / -1; font-size: 0.75rem; color: var(--muted-foreground); }
.legend-members > summary { cursor: pointer; color: var(--primary); }
.legend-members ul { margin: 0.25rem 0 0; padding-left: 1rem; }
.legend-members li { display: list-item; }

/* Accounts by role */
.role-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; }
.role-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: baseline; }
.role-dot { width: 0.5rem; height: 0.5rem; align-self: center; border-radius: 999px; background: var(--rl-fg); }
.role-name { color: var(--text-secondary); }
.role-active strong { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.role-disabled { min-width: 5rem; color: var(--muted-foreground); text-align: right; font-variant-numeric: tabular-nums; }

/* Horizontal bars, drawn from zero; the SVG rect width is the exact share of the largest bar. */
.bar-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.bar-row { display: grid; grid-template-columns: minmax(8rem, 28%) 1fr 2.5rem; gap: 0.75rem; align-items: center; font-size: 0.8125rem; }
.bar-label { min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
.bar-flag { margin-left: 0.375rem; padding: 0.0625rem 0.375rem; border-radius: 999px; background: var(--c-slate-bg); color: var(--c-slate-fg); font-size: 0.6875rem; font-weight: 500; }
.bar-track { display: block; height: 0.625rem; overflow: hidden; border-radius: 999px; background: var(--muted); }
.bar-svg { display: block; width: 100%; height: 100%; }
.bar-rect { fill: var(--c-violet-fg); }
.bar-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Review queues sit in a two-column grid under the figures on wide screens. */
.dash-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; align-items: start; }
.dash-review-grid > * { margin: 0; }

/* Student: own uploads at a glance */
.my-glance { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.glance-chip {
    display: inline-flex; gap: 0.25rem; align-items: center; padding: 0.375rem 0.75rem;
    border-radius: 999px; background: var(--tone-bg); color: var(--tone-fg);
    font-size: 0.8125rem; font-weight: 500; text-decoration: none;
    transition: transform var(--motion-fast) var(--ease-out);
}
.glance-chip:hover { transform: translateY(-1px); }

@media (max-width: 64rem) {
    .metric-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-grid, .dash-review-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
    .donut-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .donut-legend { width: 100%; }
    /* Phone: bar labels sit above their bar so long labels are never cut. */
    .bar-row { grid-template-columns: 1fr auto; row-gap: 0.3rem; }
    .bar-label { grid-column: 1; grid-row: 1; }
    .bar-value { grid-column: 2; grid-row: 1; }
    .bar-track { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 30rem) {
    .metric-tiles { gap: 0.625rem; }
    .metric-tile { padding: 0.875rem; }
    .metric-value { font-size: 1.5rem; }
    .role-list > li { grid-template-columns: auto minmax(0, 1fr) auto; }
    .role-disabled { grid-column: 2 / -1; min-width: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .metric-tile, .glance-chip { transition: none; }
}

/* =====================================================================
   NOTIFICATION POPOVER (2026-10-18)
   The header bell's preview of the five latest notifications (V9's compact
   panel, about 400 px wide). Every rule is scoped by .app-notif or
   .app-notif-*, so nothing else moves. The full list rows reuse the
   .notif-item family above. Without script the bell stays a plain link and
   this panel stays hidden.
   ===================================================================== */

/* The wrapper takes over the bell's place in the header row. */
.app-notif {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

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

.app-notif > .app-bell {
    margin-left: 0;
}

/* The enhanced bell is a real button: undo the global button look. */
.app-notif button.app-bell {
    min-height: 0;
    padding: 0;
    gap: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.app-notif button.app-bell:hover,
.app-notif button.app-bell.is-open {
    border: 0;
    background: var(--accent-surface);
    color: var(--text-secondary);
}

.app-notif button.app-bell:hover:not(.is-open) {
    background: var(--hover-surface);
}

.app-notif-panel {
    position: fixed;
    z-index: 40;
    top: calc(var(--header-height) + 0.1875rem);
    right: clamp(1rem, 3vw, 1.5rem);
    display: flex;
    width: min(25rem, calc(100vw - 2rem));
    max-height: calc(100vh - var(--header-height) - 1.25rem);
    max-height: calc(100dvh - var(--header-height) - 1.25rem);
    flex-direction: column;
    overflow: hidden;
    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-notif-panel[hidden] {
    display: none;
}

.app-notif-head {
    display: flex;
    min-height: 3.25rem;
    flex: 0 0 auto;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.125rem;
    border-bottom: 1px solid var(--border-soft);
}

.app-notif-head h2 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.app-notif-summary {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

/* The only part that scrolls: the heading and the footer link stay in reach. */
.app-notif-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-notif-status {
    margin: 0;
    padding: 1.25rem 1.125rem;
    color: var(--muted-foreground);
    font-size: 0.84375rem;
}

.app-notif-status[hidden] {
    display: none;
}

.app-notif-list .notif-item {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    padding: 0.75rem 1rem 0.75rem 1.125rem;
}

.app-notif-list .notif-item:first-child {
    border-top: 0;
}

.app-notif-list .notif-link {
    min-height: 2.25rem;
}

.app-notif-note,
.app-notif-empty {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    padding: 1.25rem 1.125rem;
    list-style: none;
}

.app-notif-note p,
.app-notif-empty p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84375rem;
    line-height: 1.5;
}

.app-notif-empty strong {
    font-size: 0.875rem;
    font-weight: 600;
}

.app-notif-foot {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: 0.375rem 0.625rem;
    border-top: 1px solid var(--border-soft);
}

.app-notif-all {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    padding: 0 0.25rem 0 0.5rem;
    border-radius: 0.375rem;
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.app-notif-all:hover {
    background: #f4f7fe;
}

.app-notif-all:focus-visible,
.app-notif-list .notif-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.app-notif-all .ms {
    font-size: 1.125rem;
}

@media (max-width: 47.99rem) {
    .app-notif,
    .app-search + .app-notif {
        margin-left: auto;
    }

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

    /* The panel spans the screen's width, below the shorter phone header and
       above the bottom tab bar, so its footer link stays reachable. */
    .app-notif-panel {
        top: calc(3.25rem + 0.1875rem);
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: calc(100vh - 3.25rem - var(--tabbar-height) - 1rem);
        max-height: calc(100dvh - 3.25rem - var(--tabbar-height) - 1rem - env(safe-area-inset-bottom));
    }

    .app-notif-all {
        min-height: 2.75rem;
    }
}

/* =====================================================================
   PENDING QUEUE SEARCH (2026-10-18)
   The title search and the "showing only" line above the queue list. Scoped
   by .mq-search and .mq-filtered; the kind chips, rows and pager reuse the
   existing .my-filter, .mq-row and .admin-pager rules.
   ===================================================================== */

.mq-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.mq-search .field {
    flex: 1 1 18rem;
    min-width: 0;
}

.mq-search label {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.mq-search .admin-filter-actions {
    flex: 0 0 auto;
}

.mq-filtered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
    margin: 0 0 1rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.mq-filtered a {
    font-weight: 600;
}

.mq .admin-pager {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------
   My Uploads presentation (S1, 2026-10-19): each submission is its own
   card, and the status labels carry the existing semantic colours.
   Scoped to .my-uploads because .my-status is also used on the moderation,
   report and correction screens, which keep their current look.
   --------------------------------------------------------------------- */

.my-uploads .my-list {
    display: grid;
    gap: 0.625rem;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.my-uploads .my-list li + li {
    border-top: 0;
}

.my-uploads .my-row {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.my-uploads .my-row:hover {
    border-color: var(--border);
    background: #f8f9fb;
}

.my-uploads .my-row.is-selected {
    border-color: var(--primary);
    background: var(--accent-surface);
    box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-card);
}

.my-uploads .my-row:focus-visible {
    outline-offset: 2px;
}

@media (max-width: 63.99rem) {
    /* The list is its own page here, so no card should look opened. */
    .my-uploads .my-layout[data-view="list"] .my-row.is-selected {
        border-color: var(--border-soft);
        background: var(--card);
        box-shadow: var(--shadow-card);
    }
}

@media (prefers-reduced-motion: reduce) {
    .my-uploads .my-row {
        transition: none;
    }
}

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

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

.my-uploads .my-status-rejected {
    border-color: transparent;
    background: var(--destructive-surface);
    color: var(--destructive);
}

.my-uploads .my-status-hidden,
.my-uploads .my-status-restricted {
    border-color: oklch(52% 0.16 255 / 20%);
    background: var(--surface);
    color: var(--surface-foreground);
}

.my-update-hint {
    max-width: 40rem;
    margin: -0.25rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* ---------------------------------------------------------------------
   Shared shell (S2, 2026-10-19): canvas-coloured sidebar and header, the collapse
   button beside the brand, a bottom-pinned Admin Settings group, pill search,
   round bell and a pill account trigger, and restrained motion. Appended after the
   earlier shell rules, which it restyles; phone tab bar and More sheet are unchanged.
   --------------------------------------------------------------------- */

:root {
    --shell-bg: var(--background);
    --shell-edge: 0 1px 2px rgb(20 23 28 / 6%), 0 0 0 1px rgb(20 23 28 / 3%);
    --shell-control: 2.5rem;
    --shell-pill: 999px;
    --shell-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---- Canvas-coloured sidebar and header ------------------------------------------------------------------ */

.app-header {
    border-bottom: 0;
    background: var(--shell-bg);
}

@media (min-width: 48rem) {
    .app-sidebar {
        border-right: 0;
        background: var(--shell-bg);
    }

    /* Rail tiles and expanded rows: softer corners; the current page is a white pill on the canvas. */
    .app-nav-link,
    .app-nav-tile {
        border-radius: 0.875rem;
    }

    .app-nav-link:hover,
    .app-nav-tile:hover {
        background: rgb(20 23 28 / 5%);
    }

    .app-nav-link.is-active,
    .app-nav-tile.is-active {
        background: var(--card);
        box-shadow: var(--shell-edge);
        color: var(--foreground);
    }

    .app-nav-link.is-active .ms,
    .app-nav-tile.is-active > .ms {
        color: var(--accent-ink);
    }

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

    .app-nav-tile-current {
        background: var(--accent-surface);
        color: var(--accent-ink);
    }

    /* The flyout is a white card, so inside it the current page keeps the accent tint. */
    html.has-js .app-nav-group[data-open] .app-nav-menu .app-nav-link.is-active {
        background: var(--accent-surface);
        box-shadow: none;
        color: var(--accent-ink);
    }
}

/* ---- Collapse/expand button beside the brand ------------------------------------------------------------- */

.app-brand-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.app-brand-row .app-brand {
    margin-bottom: 0;
}

.app-rail-toggle,
html[data-rail="expanded"] .app-rail-toggle {
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0.75rem;
}

.app-rail-toggle-expand,
.app-rail-toggle-collapse,
html[data-rail="expanded"] .app-rail-toggle-collapse {
    flex-direction: row;
    gap: 0;
}

.app-rail-toggle:hover {
    background: rgb(20 23 28 / 6%);
}

@media (min-width: 64rem) {
    html[data-rail="expanded"] .app-brand-row {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 0.25rem 0.5rem 0;
        margin-bottom: 0;
    }

    html[data-rail="expanded"] .app-brand-row .app-brand {
        min-width: 0;
        flex: 1 1 auto;
    }
}

@media (max-width: 47.99rem) {
    .app-brand-row {
        display: none;
    }
}

/* ---- Admin Settings group, pinned to the bottom of the rail and the sidebar -------------------------------- */

@media (min-width: 48rem) {
    .app-navigation {
        flex: 1 1 auto;
    }

    .app-nav-group[data-nav-group="settings"] {
        margin-top: auto;
        padding-top: 0.5rem;
    }

    .app-nav-group[data-nav-group="settings"]::before {
        height: 1px;
        margin: 0 0.75rem 0.375rem;
        background: var(--border);
        content: "";
    }

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

/* ---- Pill search, round bell, refined account trigger ------------------------------------------------------ */

.app-search {
    width: min(100%, 22rem);
}

.app-search .ms {
    left: 1rem;
}

.app-search input {
    min-height: var(--shell-control);
    padding-left: 2.75rem;
    border: 1px solid var(--border);
    border-radius: var(--shell-pill);
    background: var(--card);
    box-shadow: var(--shell-edge);
}

.app-bell,
.app-notif button.app-bell {
    width: var(--shell-control);
    height: var(--shell-control);
    border: 0;
    border-radius: 50%;
    background: var(--card);
    box-shadow: var(--shell-edge);
}

.app-bell:hover,
.app-notif button.app-bell:hover:not(.is-open) {
    background: var(--hover-surface);
}

.app-bell.is-active,
.app-notif button.app-bell.is-open {
    background: var(--accent-surface);
}

.app-bell-count {
    top: -0.1875rem;
    right: -0.1875rem;
    box-shadow: 0 0 0 2px var(--shell-bg);
}

.app-account-trigger {
    height: var(--shell-control);
    padding: 0 0.75rem 0 0.25rem;
    border-radius: var(--shell-pill);
    background: var(--card);
    box-shadow: var(--shell-edge);
}

@media (max-width: 47.99rem) {
    /* Phone: touch-size round controls, as today, now white on the canvas. */
    .app-bell,
    .app-search + .app-bell,
    .app-notif button.app-bell {
        width: 2.75rem;
        height: 2.75rem;
    }

    .app-account-trigger {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
    }
}

/* ---- Motion (restrained; off under prefers-reduced-motion) ---------------------------------------------- */

@keyframes shell-pop {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes shell-pop-side {
    from {
        opacity: 0;
        transform: translateX(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes shell-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Bell panel: fades and settles in, and out (display is part of the transition where the browser supports it;
   elsewhere the panel simply appears and disappears as it does today). */
.app-notif-panel {
    transform-origin: top right;
    transition:
        opacity 0.16s var(--shell-ease),
        transform 0.16s var(--shell-ease),
        display 0.16s allow-discrete;
}

.app-notif-panel[hidden] {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
}

@starting-style {
    .app-notif-panel:not([hidden]) {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
}

.app-account[open] .app-account-panel {
    transform-origin: top right;
    animation: shell-pop 0.16s var(--shell-ease) both;
}

html.has-js .app-nav-group[data-open] .app-nav-menu {
    transform-origin: left top;
    animation: shell-pop-side 0.16s var(--shell-ease) both;
}

/* Sidebar collapse/expand: the width eases and the list fades in. Only while .rail-animating, which the script sets
   for a moment after a person changes the sidebar, so a page load never animates. */
@media (min-width: 64rem) {
    html.rail-animating .app-sidebar {
        transition:
            width 0.22s var(--shell-ease),
            flex-basis 0.22s var(--shell-ease);
    }

    html.rail-animating .app-navigation {
        animation: shell-fade 0.2s ease-out both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar,
    .app-navigation,
    .app-notif-panel,
    .app-account-panel,
    .app-nav-menu {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------
   Provision accounts and Account Management (S3, 2026-10-19): the CSV
   import leads the page, the single-account form opens in a native dialog
   (and stays an ordinary form on the page without JavaScript), and the
   account directory is denser and easier to scan.
   --------------------------------------------------------------------- */

.workspace-stack {
    display: grid;
    max-width: 52rem;
    gap: 1rem;
}

.workspace-stack .import-form > .form-actions {
    margin-top: 0.25rem;
}

.import-essentials {
    margin-top: -0.125rem;
}

.import-format {
    margin: 0;
}

.import-format .table-scroll {
    margin-top: 0.625rem;
}

.workspace-single-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.workspace-single-head .muted-copy {
    margin: 0.125rem 0 0;
}

.workspace-single-head [data-provision-open] .icon {
    width: 1rem;
    height: 1rem;
}

/* Without JavaScript (or before the script is ready) the form is an ordinary part of the page. */
.provision-dialog:not([open]) {
    position: static;
    display: block;
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.provision-dialog:not([open]) .provision-dialog-head,
.provision-dialog:not([open]) [data-dialog-close] {
    display: none;
}

/* While the script starts, keep the inline form out of sight; if it never starts, show it after two seconds. */
html.has-js:not(.provision-dialog-ready) .provision-dialog:not([open]) {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    animation: provision-dialog-failsafe 0s linear 2s forwards;
}

@keyframes provision-dialog-failsafe {
    to {
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
}

html.provision-dialog-ready .provision-dialog:not([open]) {
    display: none;
}

.provision-dialog[open] {
    display: block;
    width: min(30rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow: auto;
    border: 0;
    border-radius: var(--radius-xl);
    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%);
}

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

.provision-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.provision-dialog-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.provision-dialog-close {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted-foreground);
    box-shadow: none;
}

.provision-dialog-close:hover {
    border: 0;
    background: var(--hover-surface);
    color: var(--foreground);
}

.provision-dialog-close .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.provision-dialog .manual-form {
    display: grid;
    gap: 0.875rem;
}

.provision-dialog .alert {
    margin-bottom: 0.875rem;
}

[data-username-hint][hidden] {
    display: none;
}

[data-username-hint]:not([hidden])::after {
    content: " ";
}

/* Account Management: one-line rows on wide screens (the username never wraps, the three row actions sit on one line),
   a calmer header and alternate-row tint for scanning, and compact cards on the phone. Search, filters, counts and
   the 25-row pager are untouched. */
@media (min-width: 68rem) {
    .admin-accounts th[scope="col"] {
        padding: 0.5rem 0.625rem;
    }

    .admin-accounts td,
    .admin-accounts tbody th {
        padding: 0.4375rem 0.625rem;
        vertical-align: middle;
    }

    .admin-accounts tr > :first-child {
        padding-left: 1.25rem;
    }

    .admin-accounts tr > :last-child {
        padding-right: 1.25rem;
    }

    .admin-accounts tbody tr:nth-child(even) > * {
        background: #fafbfc;
    }

    .admin-accounts tbody tr:hover > * {
        background: var(--hover-surface);
    }

    .admin-accounts .cell-name {
        min-width: 7.5rem;
    }

    /* With room to spare ("Bulk Person 60"-sized names) a display name stays on one line; a long one still wraps. */
    html:not([data-rail="expanded"]) .admin-accounts .cell-name {
        min-width: 8.5rem;
    }

    /* A normal username stays on one line; a very long one still wraps inside its column rather than being cut off. */
    .admin-accounts .cell-username {
        min-width: 7.5rem;
        max-width: 16rem;
    }

    .admin-accounts .row-actions {
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    .admin-accounts .row-actions .button-small {
        min-height: 1.75rem;
        padding: 0 0.5rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* The longest badge wraps unless the page area is wide. */
    .admin-accounts .cell-status .admin-badge-pending {
        white-space: normal;
    }
}

/* Up to a 1279 px screen the three row actions keep their icon and accessible name (and a tooltip) but give up the visible text,
   so every column stays in view without sideways scrolling. */
@media (min-width: 68rem) and (max-width: 79.99rem) {
    .admin-accounts .cell-actions .action-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .admin-accounts .row-actions .button-small {
        width: 1.75rem;
        justify-content: center;
        padding: 0;
    }
}

/* Wide screen with the sidebar collapsed: the longest badge fits on one line. With the sidebar expanded the page area is
   narrower, so the row-action icons are dropped instead and the badge keeps wrapping. */
@media (min-width: 90rem) {
    html[data-rail="expanded"] .admin-accounts .cell-name {
        min-width: 8.5rem;
    }
}

@media (min-width: 80rem) {
    html:not([data-rail="expanded"]) .admin-accounts .cell-status .admin-badge-pending {
        white-space: nowrap;
    }

    html[data-rail="expanded"] .admin-accounts .row-actions .button-small .icon {
        display: none;
    }
}

@media (max-width: 47.99rem) {
    /* Phone cards keep their existing flow (name, username, chips) with a tighter rhythm: the date sits beside the chips and
       the row actions share one line. */
    .admin-accounts tbody tr {
        padding: 0.75rem 1rem;
    }

    .admin-accounts .cell-created {
        flex: 1 1 auto;
        margin-top: 0;
        font-size: 0.75rem;
        text-align: right;
    }

    .admin-accounts .cell-actions {
        margin-top: 0.25rem;
    }

    .admin-accounts .row-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 0.375rem;
    }

    .admin-accounts .row-actions .button-small {
        min-height: 2.25rem;
        justify-content: center;
        padding: 0 0.25rem;
        font-size: 0.75rem;
        line-height: 1.15;
        text-align: center;
    }

    .admin-accounts .row-actions .button-small .icon {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   Academic Taxonomy (S4, 2026-10-19): the category links become pills, and
   Edit name opens in a native dialog. Everything is scoped to the taxonomy
   list (.taxonomy-pills, .taxonomy-dialog); the Programs, years and subjects
   pages share .taxonomy-tab and are not touched.
   --------------------------------------------------------------------- */

.taxonomy-tabs.taxonomy-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.taxonomy-pills .taxonomy-tab {
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.375rem 1rem;
    border-radius: 999px;
    transition: background-color var(--motion-base, 0.15s) ease, border-color var(--motion-base, 0.15s) ease;
}

.taxonomy-pills .taxonomy-tab-name {
    white-space: nowrap;
}

.taxonomy-pills .taxonomy-tab-count {
    white-space: nowrap;
}

.taxonomy-pills .taxonomy-tab.is-current .taxonomy-tab-count {
    color: var(--accent-ink);
}

.taxonomy-pills .taxonomy-tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* On a phone the pills wrap two to a row, name above its counts, so five categories stay compact. */
@media (max-width: 47.99rem) {
    .taxonomy-pills .taxonomy-tab {
        flex: 1 1 calc(50% - 0.25rem);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.0625rem;
        min-height: 2.75rem;
        padding: 0.375rem 1rem;
        border-radius: 1.375rem;
    }

    .taxonomy-pills .taxonomy-tab-name {
        white-space: normal;
    }

    .taxonomy-pills .taxonomy-tab:last-child:nth-child(odd) {
        flex-basis: 100%;
    }
}

/* Edit name dialog. A closed dialog is hidden by the browser; without the script it is never opened. */
.taxonomy-dialog[open] {
    display: block;
    width: min(28rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow: auto;
    border: 0;
    border-radius: var(--radius-xl);
    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%);
}

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

.taxonomy-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.taxonomy-dialog-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.taxonomy-dialog-close {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted-foreground);
    box-shadow: none;
}

.taxonomy-dialog-close:hover {
    border: 0;
    background: var(--hover-surface);
    color: var(--foreground);
}

.taxonomy-dialog-close .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.taxonomy-dialog-context {
    margin: 0 0 0.25rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.taxonomy-dialog-note {
    margin: 0 0 1rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.taxonomy-dialog-context[hidden],
.taxonomy-dialog-note[hidden] {
    display: none;
}

.taxonomy-dialog .taxonomy-name-form {
    max-width: none;
}

.taxonomy-dialog .form-actions {
    flex-wrap: wrap;
}

@media (max-width: 47.99rem) {
    .taxonomy-dialog[open] {
        padding: 1rem 1.125rem 1.25rem;
    }

    .taxonomy-dialog .form-actions > * {
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .taxonomy-pills .taxonomy-tab {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
   Sign-in, mandatory password change and My Profile (S5, 2026-10-19).
   Everything is scoped to .password-field, .password-rules, .auth-hint or
   .profile-*. Without JavaScript the Show buttons stay hidden, the rules are
   plain text and the forms behave as before.
   --------------------------------------------------------------------- */

.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field.is-ready input {
    padding-right: 4.75rem;
}

.password-field .password-toggle {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    bottom: 0.25rem;
    display: inline-flex;
    width: auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 0 0.875rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--accent-ink);
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 600;
}

.password-field .password-toggle[hidden] {
    display: none;
}

.password-field .password-toggle:hover {
    background: var(--hover-surface);
}

.password-field .password-toggle:active:not(:disabled) {
    transform: none;
}

.password-field .password-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.auth-hint {
    margin: 0;
}

.auth-hint:empty {
    display: none;
}

.auth-form .field > .auth-hint {
    color: var(--foreground);
    font-weight: 600;
}

.auth-form > .auth-hint {
    text-align: center;
}

.password-rules {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--muted);
}

.password-rules-title,
.password-rules-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.password-rules-title {
    font-weight: 600;
}

.password-rules-note {
    color: var(--muted-foreground);
}

.password-rules ul {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.password-rules li {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    align-items: flex-start;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.password-rules .rule-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.password-rules .rule-count {
    color: var(--muted-foreground);
}

.password-rules .rule-note {
    flex: 1 0 100%;
    padding-left: 1.5rem;
    color: var(--muted-foreground);
}

.password-rules .rule-mark {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 0.375rem;
    height: 0.375rem;
    margin: 0.4375rem 0.3125rem 0;
    border-radius: 50%;
    background: var(--muted-foreground);
}

/* Live: an empty ring when not met yet, a filled check when met (shape as well as colour). */
.password-rules.is-live .rule-mark {
    width: 1rem;
    height: 1rem;
    margin: 0.125rem 0 0;
    border: 1.5px solid var(--muted-foreground);
    background: transparent;
}

.password-rules.is-live [data-rule="temporary"] .rule-mark {
    border-style: dashed;
}

/* The check is drawn with borders, not an image: the site's Content-Security-Policy allows images only from this origin (img-src 'self'), so a data: URI would be blocked. */
.password-rules .rule-mark {
    position: relative;
}

.password-rules.is-live [data-state="met"] .rule-mark {
    border-color: var(--success);
    background: var(--success);
}

.password-rules.is-live [data-state="met"] .rule-mark::after {
    position: absolute;
    top: 0.0625rem;
    left: 0.28125rem;
    width: 0.25rem;
    height: 0.5rem;
    border: solid #fff;
    border-width: 0 0.125rem 0.125rem 0;
    content: "";
    transform: rotate(45deg);
}

.password-rules.is-live [data-state="met"] .rule-text {
    color: var(--success);
}

@media (max-width: 47.99rem) {
    /* A finger-sized field, so the Show button inside it is at least 36 px tall. */
    .auth-form input {
        min-height: 2.75rem;
    }

    .password-field .password-toggle {
        padding: 0 1rem;
    }

    .password-field.is-ready input {
        padding-right: 5rem;
    }
}

/* My Profile: the three details sit in a two-column grid on wider screens (the name across both), long values still wrap. */
@media (min-width: 40rem) {
    .profile-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-details .profile-detail-name {
        grid-column: 1 / -1;
    }
}

.profile-detail dt {
    letter-spacing: 0.01em;
}

.profile-detail-username dd {
    font-variant-ligatures: none;
}

/* =====================================================================
   AI CAPABILITY SETTINGS presentation (S6a), 2026-10-19. Everything is scoped
   under .admin-ai-settings. It reuses the settings-card pattern, the badge and
   the info-disclosure; it adds the row layout (explanation left, switch and
   status right), the group headings, the "Read-only" configuration card and
   the wrapping rules that keep long server values inside the screen.
   ===================================================================== */
.admin-ai-settings .settings-form {
    max-width: 60rem;
}

/* Long values never push the page wider than the screen (a model name, a person's display name). */
.admin-ai-settings .settings-card,
.admin-ai-settings .ai-cap,
.admin-ai-settings .settings-facts > div,
.admin-ai-settings .ai-last-saved {
    min-width: 0;
}

.admin-ai-settings .settings-facts dd,
.admin-ai-settings .settings-facts .my-mono,
.admin-ai-settings .ai-last-saved,
.admin-ai-settings .admin-badge,
.admin-ai-settings .ai-config-alert {
    overflow-wrap: anywhere;
}

.admin-ai-settings .admin-badge {
    max-width: 100%;
    white-space: normal;
}

/* The four short rules that matter before anything is changed. */
.admin-ai-settings .ai-essentials {
    gap: 0.75rem;
}

.admin-ai-settings .ai-essentials .panel-title {
    margin: 0;
    font-size: 1.0625rem;
}

.admin-ai-settings .ai-essentials-list {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding-left: 1.125rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.admin-ai-settings .ai-essentials .info-disclosure {
    margin: 0;
}

.admin-ai-settings .ai-config-alert p {
    margin: 0.25rem 0 0;
}

/* Capability groups: what each one uses (local model, stored tags, external provider). */
.admin-ai-settings .ai-group {
    display: grid;
    gap: 0.625rem;
}

.admin-ai-settings .ai-group-title {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.admin-ai-settings .ai-group[data-ai-group="external"] .ai-cap {
    border-color: oklch(52% 0.17 295 / 25%);
}

.admin-ai-settings .ai-group-lead {
    margin: -0.375rem 0 0;
}

/* A row: the explanation on the left, the switch and its current status on the right (stacked on a phone). */
.admin-ai-settings .ai-cap {
    gap: 0.5rem;
}

.admin-ai-settings .ai-cap-summary {
    margin: 0;
    max-width: 38rem;
}

.admin-ai-settings .ai-cap-controls {
    display: grid;
    gap: 0.625rem;
    align-content: start;
}

.admin-ai-settings .ai-ctl,
.admin-ai-settings .ai-cap-status {
    display: grid;
    gap: 0.25rem;
    margin: 0;
}

.admin-ai-settings .ai-cap-status {
    justify-items: start;
}

.admin-ai-settings .ai-ctl-label {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.admin-ai-settings .ai-master {
    border-color: oklch(52% 0.16 255 / 28%);
    background: var(--accent-surface);
}

.admin-ai-settings .ai-cap-limit {
    max-width: 38rem;
}

.admin-ai-settings .ai-cap-warning {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid oklch(52% 0.12 70 / 25%);
    border-radius: var(--radius-sm);
    background: var(--warning-surface);
    color: oklch(42% 0.1 70);
    font-size: 0.8125rem;
}

.admin-ai-settings .ai-cap-details {
    margin-top: 0;
}

.admin-ai-settings .ai-cap-details > summary,
.admin-ai-settings .ai-cap-details > p,
.admin-ai-settings .ai-cap-details > ul {
    max-width: 44rem;
}

.admin-ai-settings .ai-cap-details > p,
.admin-ai-settings .ai-cap-details > ul {
    margin: 0.5rem 0 0;
}

.admin-ai-settings .cap-details > summary:focus-visible,
.admin-ai-settings .info-disclosure > summary:focus-visible {
    border-radius: var(--radius-sm);
    outline: none;
    box-shadow: var(--focus-ring);
}

.admin-ai-settings .ai-limit-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.admin-ai-settings .ai-limit-details {
    margin: 0;
}

/* The read-only model configuration is visibly not a form. */
.admin-ai-settings .ai-readonly {
    border-style: dashed;
    background: oklch(98.6% 0.004 250);
}

.admin-ai-settings .ai-readonly-tag {
    margin-left: 0.5rem;
    vertical-align: middle;
}

.admin-ai-settings .ai-readonly .info-disclosure {
    margin: 0;
}

.admin-ai-settings .ai-unavailable-list dd .cap-details {
    margin-top: 0.25rem;
}

@media (min-width: 48rem) {
    .admin-ai-settings .ai-cap {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1.5rem;
    }

    .admin-ai-settings .ai-cap > * {
        grid-column: 1;
    }

    .admin-ai-settings .ai-cap > .ai-cap-controls {
        grid-column: 2;
        grid-row: 1 / span 5;
        min-width: 13rem;
    }

    .admin-ai-settings .ai-limit {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 47.99rem) {
    .admin-ai-settings .ai-cap-controls .settings-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-ai-settings .ai-limit .settings-options {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-ai-settings .cap-details > summary,
    .admin-ai-settings .info-disclosure > summary {
        min-height: 2.5rem;
    }
}

/* S6b: on System Settings, a long display name in "Last saved by ..." wraps inside the card instead of widening the page
   (found by the S6b capture on the checkpoint too; the AI page has its own rule under .admin-ai-settings). */
.admin-settings .settings-card > * {
    min-width: 0;
}

.admin-settings .settings-meta {
    overflow-wrap: anywhere;
}

/* AI Resource Inquiry: resource-finding results (no AI used). Same card,
   chip and readiness styles as the Inquiry sources panel. */
.inquiry-mark-search {
    background: var(--accent-surface);
    color: var(--accent-ink);
}

.inquiry-tag-search {
    background: var(--accent-surface);
    color: var(--accent-ink);
}

.inquiry-found {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inquiry-found-item {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
}

.inquiry-found-title {
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.inquiry-found-title:hover {
    color: var(--primary);
    text-decoration: underline;
}

.inquiry-found-meta {
    display: flex;
    margin: 0;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.inquiry-ready.inquiry-ready-searchable {
    color: var(--text-secondary);
}

.inquiry-found-reason {
    color: var(--muted-foreground);
}

/* ---------------------------------------------------------------------
   Library live search (S7): quiet refresh line, "not refreshed" notice and
   the literal search-word highlight. Driven by resource-live-search.js and
   search-highlight.js; without them none of this is drawn.
   --------------------------------------------------------------------- */

.library-toolbar {
    position: relative;
}

.library-live-progress {
    position: absolute;
    inset: auto 0 -1px 0;
    height: 2px;
    overflow: hidden;
    background: var(--accent-surface);
}

.library-live-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 28%;
    background: var(--primary);
    animation: library-live-slide 1.2s ease-in-out infinite;
}

@keyframes library-live-slide {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(360%);
    }
}

[data-library-results][data-loading] .resource-grid {
    opacity: 0.72;
    transition: opacity var(--motion-fast, 140ms) ease;
}

.library-live-error {
    font-size: 0.875rem;
}

mark.search-highlight {
    padding: 0 0.1em;
    border-radius: 0.2em;
    background: oklch(91% 0.1 92);
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .library-live-progress::after {
        width: 100%;
        animation: none;
        opacity: 0.45;
    }

    [data-library-results][data-loading] .resource-grid {
        transition: none;
    }
}

@media (forced-colors: active) {
    mark.search-highlight {
        background: Highlight;
        color: HighlightText;
    }
}

/* ---------------------------------------------------------------------
   Sign-in landing (owner-approved mockup, 2026-10-20; revision 3 plus
   three refinements). Everything is scoped to .ls-* classes used only by
   src/Views/auth/login.php; the form keeps the app's own .field, input,
   .password-field and .button-block rules and only adjusts their size here.
   The artwork is inline SVG with presentation attributes (no inline style),
   so the page stays within style-src 'self' / img-src 'self'.
   --------------------------------------------------------------------- */

.ls-landing {
    --ls-ink: #141414;
    --ls-page: #ffffff;
    --ls-panel: #f4f4f0;
    --ls-paper-shadow: #ecebe6;
    --ls-share: #5b9be6;
    --ls-find: #f0c35e;
    --ls-ask: #bb8de3;
    --ls-blush: #f4a391;
    --ls-trail: #f0b92e;
    --ls-trail-tip: #c98f12;
    --ls-warning-ink: #7a4a00;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 29rem;
    grid-template-areas: "show signin";
    min-height: 100vh;
    overflow-x: clip; /* the stamp's one-time landing scale must never widen the page */
    background: var(--ls-page);
    color: var(--foreground);
}

.ls-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ls-showcase { grid-area: show; }
.ls-signin { grid-area: signin; }
.ls-masthead { display: none; }

.ls-wordmark { display: block; color: var(--ls-ink); text-decoration: none; }
.ls-wordmark:hover { color: var(--ls-ink); }
.ls-wordmark-name { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.ls-wordmark-sub { display: block; margin-top: 0.1875rem; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; }
.ls-wordmark:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 0.25rem; }

/* ---- sign-in panel: full height on wide screens, rounded left corners -- */
.ls-signin {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 2.25rem clamp(2rem, 3.5vw, 3rem);
    border-radius: 1.75rem 0 0 1.75rem;
    background: var(--ls-panel);
}

.ls-signin-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 22.5rem;
    margin: 0 auto;
    padding: 2.5rem 0;
}

.ls-signin h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ls-signin .ls-signin-intro {
    margin: 0 0 1.75rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
}

.ls-signin .alert {
    margin: 0 0 1rem;
}

.ls-signin .auth-form {
    gap: 1.125rem;
}

.ls-signin .field label {
    font-size: 0.9375rem;
    font-weight: 600;
}

.ls-signin .field input {
    min-height: 3rem;
    padding: 0.5rem 0.9375rem;
    border-width: 1.5px;
    border-radius: 0.75rem;
    font-size: 1rem;
}

.ls-signin .password-field.is-ready input {
    padding-right: 4.75rem;
}

.ls-signin .password-field .password-toggle {
    font-size: 0.875rem;
}

.ls-signin .button-block {
    min-height: 3rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.ls-signin .button-block:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ls-panel), 0 0 0 6px var(--primary);
}

.ls-signin .ls-issued {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1.5px solid #e2e2dc;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ls-issued svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; color: var(--ls-ink); }
.ls-issued p { margin: 0; }
.ls-issued strong { color: var(--foreground); font-weight: 600; }

/* ---- showcase -------------------------------------------------------- */
.ls-showcase {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 2.25rem clamp(2rem, 4vw, 3.75rem) 1.75rem;
}

.ls-showcase-inner { width: 100%; max-width: 60rem; margin: 0 auto; }

.ls-showcase h2 {
    max-width: 15em;
    margin: 0 0 1rem;
    color: var(--foreground);
    font-size: clamp(2.375rem, 3.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.ls-showcase-lede { max-width: 33rem; margin: 0; color: var(--text-secondary); font-size: 1.125rem; line-height: 1.5; }

/* The illustrations are examples, said once and quietly. */
.ls-example-note {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: right;
}

/* Refinement 3: "Optional AI assistance" sits beside the Ask heading and wraps below it when narrow. */
.ls-caption-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    align-items: center;
    margin: 0 0 0.3125rem;
}

.ls-caption-head h3 { margin: 0; }

/* ---- scenes: a staggered triangle on wide screens ----------------- */
.ls-scenes {
    position: relative;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3.5rem;
    row-gap: 2rem;
}
.ls-scene-list { display: contents; list-style: none; margin: 0; padding: 0; }
.ls-scene { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; }
.ls-scene-share { --c: var(--ls-share); grid-column: 1; grid-row: 1; }
.ls-scene-find  { --c: var(--ls-find);  grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; width: 100%; max-width: 19.5rem; margin-top: var(--ls-find-offset, 2.75rem); }
.ls-scene-ask   { --c: var(--ls-ask);   grid-column: 1; grid-row: 2; }
.ls-scene-art { position: relative; display: flex; }
.ls-station-cell { display: none; }

.ls-scene-caption h3 { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .3125rem; }
.ls-scene-caption p  { font-size: .9375rem; line-height: 1.5; color: var(--text-secondary); margin: 0; max-width: 21rem; }
.ls-optional {
    display: inline-flex; align-items: center; gap: .3125rem;
    padding: .25rem .625rem .25rem .5rem;
    border: 1px solid oklch(52% 0.17 295 / 32%); border-radius: 999px;
    background: var(--ai-surface); color: var(--ai);
    font-size: .8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.ls-optional svg { width: .8125rem; height: .8125rem; flex: none; }

/* the yellow paper trail, drawn around the cards by the script below */
.ls-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ls-trail-path { fill: none; stroke: var(--ls-trail); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 10; marker-end: url(#ls-trail-tip); }
.ls-trail-path:not([d]) { display: none; }
.ls-trail-reveal { fill: none; stroke: #ffffff; stroke-width: 18; stroke-linecap: round; }

/* ---- characters ---------------------------------------------------- */
.ls-disc { position: absolute; border-radius: 50%; background: var(--c); }
.ls-person { position: absolute; overflow: visible; }

/* Share and Ask stand on a shared desk line, beside their sheet */
.ls-on-desk { align-items: flex-end; padding-bottom: 2px; }
.ls-on-desk::after {
    content: ""; position: absolute; left: -.5rem; right: -.75rem; bottom: 0;
    height: 2.5px; border-radius: 2px; background: var(--ls-ink); z-index: 4;
}
.ls-cast-side { position: relative; flex: none; }

.ls-scene-share .ls-scene-art { max-width: 25rem; }
.ls-scene-share .ls-cast-side { width: 9.25rem; height: 8.6rem; }
.ls-scene-share .ls-disc { width: 7.75rem; height: 7.75rem; left: .75rem; top: -.75rem; }
.ls-scene-share .ls-person { left: 0; bottom: 0; width: 9.25rem; z-index: 1; }
/* only the right hand is layered over the sheet; face and body stay beside it */
.ls-scene-share .ls-person-hand { z-index: 3; }
.ls-frag-share { flex: 1; min-width: 0; margin-left: -2.4rem; margin-bottom: 0; align-self: flex-end; }

/* Find: the reader looks through a magnifier above the results */
.ls-scene-find .ls-scene-art { flex-direction: column; }
.ls-scene-find .ls-cast-top { position: relative; height: 10.25rem; }
.ls-scene-find .ls-disc { width: 9.25rem; height: 9.25rem; top: 0; left: 50%; transform: translateX(-50%); }
.ls-scene-find .ls-person { width: 10.5rem; bottom: -1rem; left: 50%; transform: translateX(-50%); z-index: 1; }

/* Ask: the student beside the question and the answer */
.ls-scene-ask .ls-scene-art { max-width: 25rem; }
.ls-scene-ask .ls-cast-side { width: 7.25rem; height: 8.5rem; margin-right: .75rem; }
.ls-scene-ask .ls-disc { width: 6.75rem; height: 6.75rem; left: .25rem; top: -.25rem; }
.ls-scene-ask .ls-person { left: 0; bottom: 0; width: 7.25rem; z-index: 1; }
.ls-ask-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }

/* ---- paper fragments --------------------------------------------- */
.ls-frag {
    position: relative; z-index: 2;
    background: #ffffff;
    border: 1.75px solid var(--ls-ink);
    border-radius: .875rem;
    box-shadow: 5px 6px 0 var(--ls-paper-shadow);
    font-size: .8125rem; line-height: 1.35;
    padding: .875rem;
}
.ls-on-desk .ls-frag { box-shadow: 5px -5px 0 var(--ls-paper-shadow); }
.ls-doc { display: flex; gap: .625rem; align-items: center; }
.ls-doc b { display: block; font-size: .8438rem; font-weight: 600; }
.ls-doc span.ls-meta { display: block; color: var(--muted-foreground); font-size: .75rem; margin-top: .125rem; }
.ls-filetype {
    flex: none; display: grid; place-items: center;
    width: 2rem; height: 2.375rem; border-radius: .3125rem;
    font-size: .5625rem; font-weight: 700; letter-spacing: .02em;
    color: #b42318; background: #fdecea;
    clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%);
}
.ls-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .6875rem; font-weight: 600; line-height: 1;
    padding: .3125rem .5rem; border-radius: 999px; white-space: nowrap;
}
.ls-pill svg { width: .75rem; height: .75rem; flex: none; }
.ls-pill-approved { color: var(--success); background: var(--success-surface); }
.ls-pill-pending  { color: var(--ls-warning-ink); background: var(--warning-surface); }
.ls-pill-ai       { color: var(--ai); background: var(--ai-surface); }

/* Share sheet */
.ls-frag-share { padding: 1rem 2.5rem 1.125rem 1.25rem; }
.ls-flow { display: flex; align-items: center; gap: .25rem; margin-top: .75rem; padding-top: .625rem; border-top: 1.5px dashed #dfe2e7; }
.ls-flow .ls-arrow { width: .875rem; height: .625rem; color: #8d97a6; flex: none; }
.ls-stamp { position: absolute; right: -1.375rem; top: -1.625rem; width: 3.75rem; height: 3.75rem; transform: rotate(12deg); color: var(--success); z-index: 3; }

/* Find sheet */
.ls-search {
    display: flex; align-items: center; gap: .375rem;
    height: 2.125rem; padding: 0 .625rem;
    border: 1.5px solid var(--primary); border-radius: .5625rem;
    box-shadow: 0 0 0 3px rgb(43 99 209 / 13%);
    font-size: .8125rem;
}
.ls-search svg { width: .875rem; height: .875rem; color: var(--muted-foreground); flex: none; }
.ls-caret { display: inline-block; width: 1.5px; height: .875rem; background: var(--foreground); margin-left: 1px; vertical-align: -2px; }
.ls-filters { display: flex; gap: .3125rem; flex-wrap: wrap; margin: .5rem 0 .625rem; }
.ls-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .6875rem; font-weight: 500; color: var(--text-secondary);
    padding: .25rem .5rem; border-radius: 999px; background: #eef0f4;
}
.ls-chip svg { width: .6875rem; height: .6875rem; }
.ls-result { padding-top: .625rem; border-top: 1px solid #eef0f3; }
.ls-result mark { background: #fff1b8; color: inherit; border-radius: 3px; padding: 0 1px; }
.ls-result .ls-pill { margin-top: .4375rem; }

/* Ask sheet */
.ls-bubble {
    position: relative; z-index: 2;
    max-width: 11.5rem;
    background: #ffffff; border: 1.75px solid var(--ls-ink);
    border-radius: .875rem .875rem .875rem .25rem;
    padding: .5rem .625rem;
    font-size: .8125rem; line-height: 1.35; font-weight: 500;
}
.ls-bubble::before {
    content: ""; position: absolute; left: -9px; bottom: 6px;
    width: 14px; height: 14px; background: #ffffff;
    border-left: 1.75px solid var(--ls-ink); border-bottom: 1.75px solid var(--ls-ink);
    transform: skewY(-35deg) rotate(10deg);
}
.ls-frag-ask { width: 100%; }
.ls-bot { position: absolute; right: .75rem; top: -3.4rem; width: 4.25rem; z-index: 3; overflow: visible; }
.ls-frag-ask p { margin: .5rem 0 .5rem; color: var(--text-secondary); }
.ls-cite {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.0625rem; height: 1.0625rem; border-radius: .25rem;
    background: var(--accent-surface); color: var(--primary-hover);
    font-size: .625rem; font-weight: 700; vertical-align: 1px;
}
.ls-sources { display: flex; flex-direction: column; gap: .25rem; }
.ls-source { display: flex; align-items: center; gap: .375rem; font-size: .71875rem; padding: .25rem .375rem; border-radius: .375rem; background: #f4f6fa; color: var(--text-secondary); }
.ls-source b { color: var(--foreground); font-weight: 600; }

/* ================================================================== */
/* Load moment: the trail draws itself once and the stamp lands once  */
/* ================================================================== */
.ls-trail.ls-is-drawing .ls-trail-reveal { transition: stroke-dashoffset 1.1s cubic-bezier(.5,0,.25,1); }
.ls-trail.ls-is-drawing mask:nth-of-type(2) .ls-trail-reveal { transition-delay: .9s; }
@media (prefers-reduced-motion: no-preference) {
    .ls-stamp { animation: ls-stamp-land .45s cubic-bezier(.2,1.6,.4,1) .6s both; }
}
@keyframes ls-stamp-land { from { opacity: 0; transform: rotate(2deg) scale(1.6); } to { opacity: 1; transform: rotate(12deg) scale(1); } }

/* ================================================================== */
/* Smaller laptops                                                     */
/* ================================================================== */
@media (max-width: 1439px) {
    .ls-landing { grid-template-columns: minmax(0, 1fr) 25.5rem; }
    .ls-scenes { column-gap: 2.5rem; }
    .ls-scene-share .ls-cast-side { width: 8.25rem; height: 7.65rem; }
    .ls-scene-share .ls-person { width: 8.25rem; }
    .ls-scene-share .ls-disc { width: 7rem; height: 7rem; }
    .ls-frag-share { margin-left: -2.25rem; padding-right: 3rem; }
    .ls-bubble { max-width: 10rem; }
    .ls-bot { right: -1rem; }
}

/* ================================================================== */
/* Tablet and phone: sign-in first; scenes stacked on a yellow trail   */
/* ================================================================== */
@media (max-width: 1200px) {
    .ls-landing { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mast" "signin" "show"; align-content: start; }

    .ls-masthead { grid-area: mast; display: block; width: calc(100% - 1.5rem); max-width: 34.5rem; margin: 0 auto; padding: 1.125rem .25rem .875rem; }
    .ls-masthead .ls-wordmark-name { font-size: 1.375rem; }
    .ls-signin .ls-wordmark { display: none; }

    .ls-signin {
        width: calc(100% - 1.5rem); max-width: 34.5rem; margin: 0 auto;
        padding: 1.25rem 1.125rem 1.125rem;
        border-radius: 1.25rem; min-height: 0;
    }
    .ls-signin-body { padding: 0; max-width: none; }
    .ls-signin h1 { font-size: 1.5rem; margin-bottom: .25rem; }
    .ls-signin .ls-signin-intro { font-size: .9375rem; margin-bottom: 1rem; }
    .ls-signin .auth-form { gap: .875rem; }
    .ls-signin .field input { min-height: 2.875rem; }
    .ls-signin .ls-issued { margin-top: 1rem; padding-top: .875rem; gap: .5rem; }
    .ls-example-note { margin-top: 2.25rem; text-align: left; }

    .ls-showcase { padding: 2.5rem 1rem 3rem; }
    .ls-showcase-inner { max-width: 36rem; }
    .ls-showcase h2 { font-size: 2rem; }
    .ls-showcase-lede { font-size: 1rem; }

    .ls-trail { display: none; }
    .ls-scenes { display: flex; flex-direction: column; gap: 2.75rem; margin-top: 2.25rem; }
    .ls-scene, .ls-scene-find {
        display: grid; grid-column: auto; grid-row: auto;
        grid-template-columns: 1.75rem minmax(0, 1fr);
        grid-template-areas: "station caption" "station art";
        row-gap: 1.125rem; column-gap: .75rem;
        max-width: none; margin-top: 0; justify-self: auto; align-self: auto;
    }
    .ls-station-cell { display: grid; grid-area: station; place-items: start center; padding-top: .1875rem; position: relative; }
    .ls-station {
        width: 1.125rem; height: 1.125rem; border-radius: 50%;
        border: 2.5px solid var(--ls-ink); background: var(--c);
        box-shadow: 0 0 0 4px var(--ls-page); position: relative; z-index: 1;
    }
    .ls-scene-caption { grid-area: caption; }
    .ls-scene-art { grid-area: art; width: 100%; }
    .ls-scene-share .ls-scene-art, .ls-scene-ask .ls-scene-art { max-width: 23rem; }
    .ls-scene-find .ls-scene-art { max-width: 19rem; }
    .ls-scene-caption p { max-width: none; }

    /* yellow dotted trail from this station down to the next one */
    .ls-scene:not(:last-child) .ls-station-cell::after {
        content: ""; position: absolute;
        top: 1.75rem; bottom: calc(-2.75rem - .5rem);
        left: 50%; width: 0; margin-left: -1.75px;
        border-left: 3.5px dotted var(--ls-trail);
    }
    .ls-scene:not(:last-child) .ls-station-cell::before {
        content: ""; position: absolute; left: 50%; bottom: -2rem;
        width: 9px; height: 9px; margin-left: -4.5px;
        border-right: 2.5px solid var(--ls-trail-tip); border-bottom: 2.5px solid var(--ls-trail-tip);
        transform: rotate(45deg); background: var(--ls-page); z-index: 1;
    }

    .ls-scene-share .ls-cast-side { width: 7.5rem; height: 6.95rem; }
    .ls-scene-share .ls-person { width: 7.5rem; }
    .ls-scene-share .ls-disc { width: 6.25rem; height: 6.25rem; left: .625rem; top: -.625rem; }
    .ls-frag-share { margin-left: -2rem; }
    .ls-scene-ask .ls-cast-side { width: 6.25rem; height: 7.35rem; margin-right: .5rem; }
    .ls-scene-ask .ls-person { width: 6.25rem; }
    .ls-scene-ask .ls-disc { width: 5.75rem; height: 5.75rem; }
    .ls-stamp { top: auto; bottom: .375rem; right: -.875rem; width: 3.25rem; height: 3.25rem; }
    .ls-frag-share { padding-right: 1rem; }
    .ls-frag-share .ls-doc b { text-wrap: balance; }
    .ls-scene-share .ls-scene-caption { margin-bottom: .375rem; }
}

/* roomier tablets: caption beside its scene */
@media (min-width: 680px) and (max-width: 1200px) {
    .ls-showcase-inner { max-width: 46rem; }
    .ls-scene, .ls-scene-find {
        grid-template-columns: 1.75rem minmax(0, 1fr) 21rem;
        grid-template-areas: "station caption art";
        column-gap: 1.25rem;
    }
    .ls-station-cell { align-self: stretch; }
    .ls-scene-caption { padding-top: .125rem; }
}

/* phones: question beside the student, the answer full width below */
@media (max-width: 520px) {
    .ls-scene-ask .ls-scene-art {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "bubble cast" "card card"; column-gap: .75rem;
        max-width: none;
    }
    .ls-scene-ask .ls-ask-stack { display: contents; }
    .ls-scene-ask .ls-bubble {
        grid-area: bubble; align-self: start; justify-self: end; max-width: 13rem; margin-top: .75rem;
        border-radius: .875rem .875rem .25rem .875rem;
    }
    .ls-scene-ask .ls-bubble::before {
        left: auto; right: -9px; border-left: 0; border-right: 1.75px solid var(--ls-ink);
        transform: skewY(35deg) rotate(-10deg);
    }
    .ls-scene-ask .ls-cast-side { grid-area: cast; margin-right: .5rem; }
    .ls-scene-ask .ls-frag-ask { grid-area: card; }
    .ls-scene-ask .ls-bot { right: auto; left: .75rem; }
}

@media (max-width: 400px) {
    .ls-scene, .ls-scene-find { column-gap: .5rem; grid-template-columns: 1.5rem minmax(0, 1fr); }
    .ls-scene-share .ls-cast-side { width: 6.5rem; height: 6.05rem; }
    .ls-scene-share .ls-person { width: 6.5rem; }
    .ls-scene-share .ls-disc { width: 5.5rem; height: 5.5rem; }
    .ls-frag-share { margin-left: -1.75rem; padding-left: 1.125rem; }
    .ls-stamp { right: -.75rem; width: 2.875rem; height: 2.875rem; }
    .ls-flow .ls-pill svg { display: none; }
}
/* S9 / D056: moderator "Possible matches" aid on the submission review page */

.rv-matches {
    display: grid;
    gap: 0.75rem;
}

.rv-matches > p {
    margin: 0;
}

.rv-matches-state {
    font-size: 0.875rem;
    line-height: 1.5;
}

.rv-matches-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.rv-matches-list > li {
    display: grid;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
}

.rv-matches-list > li + li {
    border-top: 1px solid var(--border);
}

.rv-matches-list p {
    margin: 0;
}

.rv-match-title {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: baseline;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.rv-match-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    align-items: center;
}

.rv-chip {
    display: inline-flex;
    min-height: 1.625rem;
    align-items: center;
    padding: 0 0.625rem;
    border: 1px solid var(--input);
    border-radius: 999px;
    color: var(--accent-ink);
    font-size: 0.78125rem;
    font-weight: 600;
    white-space: nowrap;
}

.rv-chip-detail {
    margin-left: 0.25rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.rv-match-meta {
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.rv-matches-notes {
    margin: 0;
    padding-left: 1.125rem;
}

.rv-matches-notes li + li {
    margin-top: 0.25rem;
}

@media (max-width: 520px) {
    .rv-chip {
        white-space: normal;
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
    }
}

/* =====================================================================
   Account email invitations (D057): list, progress, state notes.
   Reuses the import table (labelled cards on a phone) and existing tokens.
   ===================================================================== */
.invitations-page .invite-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.invite-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-left: auto;
}

.invite-selected {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.invitation-table {
    min-width: 46rem;
}

.invitation-table .check-cell {
    width: 2rem;
    padding-right: 0;
}

.invitation-table td[data-label="Person"] > *,
.invitation-table td[data-label="State"] > .badge {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.25rem;
}

.invitation-table td[data-label="State"] > .badge {
    display: inline-block;
    margin-right: 0.25rem;
}

.invitation-table .cell-note {
    display: block;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.125rem;
    overflow-wrap: anywhere;
}

.invitation-table td[data-label="Email"] {
    min-width: 12rem;
    overflow-wrap: break-word;
}

.invitation-table .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.invite-continue .form-actions {
    margin-top: 0.25rem;
}

@media (max-width: 39.99rem) {
    .invitation-table {
        min-width: 0;
    }

    .invitation-table td[data-label="Email"] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .invitation-table td[data-label="State"],
    .invitation-table td[data-label="Actions"],
    .invitation-table td[data-label="Result"] {
        grid-column: 1 / -1;
    }

    .invitation-table .check-cell {
        width: auto;
        padding-right: 0;
    }

    .invite-bulk {
        width: 100%;
        margin-left: 0;
    }
}

/* =====================================================================
   Student grouping filters, setup progress and row Actions menus (D058).
   ===================================================================== */
.admin-filters-group {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.invite-group-filter {
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 0 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.invite-group-filter .admin-filters-group {
    grid-column: 1;
}

.invite-group-filter .admin-filter-actions {
    grid-column: 2;
}

.setup-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.admin-panel > .setup-progress {
    margin: 0;
    padding: 0.75rem 1.25rem 0;
}

.setup-progress-item {
    display: inline-flex;
    gap: 0.375rem;
    align-items: baseline;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--neutral-surface);
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.setup-progress-item strong {
    color: var(--surface-foreground);
    font-variant-numeric: tabular-nums;
}

.setup-progress-item[data-state="completed"] {
    border-color: oklch(48% 0.12 155 / 25%);
    background: var(--success-surface);
}

.setup-progress-item[data-state="uncertain"],
.setup-progress-item[data-state="failed"] {
    border-color: oklch(52% 0.12 70 / 25%);
    background: var(--warning-surface);
}

.group-program {
    display: block;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.group-detail {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.admin-accounts .cell-group,
.invitation-table td[data-label="Group"] {
    min-width: 9rem;
}

.group-reference {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
}

/* The row Actions menu: a native <details>. Without JavaScript the list opens
   in place under the button; with it (html.js-row-menu) the list is a popover
   placed by row-menu.js, so a scrolling table never clips it. */
.row-menu {
    position: relative;
    display: inline-block;
}

.row-menu > summary {
    display: inline-flex;
    min-width: 2.25rem;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    list-style: none;
}

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

.row-menu > summary:hover,
.row-menu[open] > summary {
    background: var(--hover-surface);
    color: var(--surface-foreground);
}

.row-menu > summary:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

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

.row-menu-list {
    display: grid;
    gap: 0.125rem;
    min-width: 12rem;
    margin: 0.375rem 0 0;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    background: #fff;
    box-shadow: 0 8px 24px rgb(20 23 28 / 12%);
    list-style: none;
}

html.js-row-menu .row-menu-list {
    position: fixed;
    z-index: 60;
    margin: 0;
}

/* The page-entrance animation (fill: both) leaves a transform on the content
   wrapper, which would make it the containing block of the fixed popover. On
   pages that use these menus the entrance is skipped. */
html.js-row-menu .app-main > * {
    animation: none;
}

.row-menu-list a,
.row-menu-list button {
    display: flex;
    width: 100%;
    min-height: 2.375rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    box-shadow: none;
    color: var(--surface-foreground);
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    white-space: normal;
}

.row-menu-list a:hover,
.row-menu-list button:hover:not([disabled]) {
    background: var(--hover-surface);
}

.row-menu-list a:focus-visible,
.row-menu-list button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.row-menu-list button[disabled] {
    color: var(--muted-foreground);
    cursor: not-allowed;
}

.row-menu-list .icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
}

.admin-accounts .cell-actions,
.invitation-table .cell-actions {
    white-space: normal;
}

@media (max-width: 47.99rem) {
    .admin-filters-group {
        grid-template-columns: minmax(0, 1fr);
        order: 1;
    }

    /* On a phone the group choices come before the Apply / Clear buttons. */
    .admin-filters > .admin-filter-actions {
        order: 2;
    }

    .invite-group-filter {
        grid-template-columns: minmax(0, 1fr);
    }

    .invite-group-filter .admin-filter-actions {
        grid-column: 1;
    }

    .admin-accounts .cell-group {
        flex: 0 0 100%;
    }

    .admin-panel > .setup-progress {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .row-menu > summary {
        min-height: 2.5rem;
        padding: 0 0.75rem;
    }

    .row-menu-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }
}