:root {
    --color-ink: #17212b;
    --color-muted: #5c6874;
    --color-surface: #ffffff;
    --color-soft: #f2f5f7;
    --color-border: #d7dee4;
    --color-primary: #174f5f;
    --color-primary-strong: #0f3d4a;
    --color-accent: #c58a25;
    --color-header-bg: rgba(255, 255, 255, 0.96);
    --color-on-primary: #ffffff;
    --color-field-bg: #ffffff;
    --color-pill-bg: #f8fafb;
    --color-danger: #8d2020;
    --color-danger-strong: #681717;
    --color-danger-border: #9b2525;
    --color-danger-bg: #fff2f2;
    --color-on-danger: #ffffff;
    --color-status-neutral-fg: #384653;
    --color-status-neutral-bg: #e8edf1;
    --color-status-info-fg: #175566;
    --color-status-info-bg: #e1eff2;
    --color-status-success-fg: #174f35;
    --color-status-success-bg: #e1f3e9;
    --color-status-warning-fg: #694916;
    --color-status-warning-bg: #fff3d2;
    --shadow: 0 16px 40px rgba(23, 33, 43, 0.1);
    --radius: 0.75rem;
    --content-width: 72rem;
}

/* Dark palette: covers "auto" mode following the OS (prefers-color-scheme)
   and the explicit toggle (html[data-theme]), which is wired up by Django
   admin's own admin/js/theme.js + admin/color_theme_toggle.html (reused for
   the operations chrome in templates/events/operations_base.html). The
   :not([data-theme="light"]) guard lets an explicit light override win over
   the OS preference; the explicit html[data-theme="dark"] block covers a
   forced-dark choice regardless of the OS setting. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-ink: #e7edf1;
        --color-muted: #9aa7b2;
        --color-surface: #14181d;
        --color-soft: #1c2228;
        --color-border: #333c44;
        --color-primary: #5fb8cc;
        --color-primary-strong: #3f96aa;
        --color-accent: #d9a441;
        --color-header-bg: rgba(20, 24, 29, 0.96);
        --color-on-primary: #0a2429;
        --color-field-bg: #1c2228;
        --color-pill-bg: #1c2228;
        --color-danger: #d3574f;
        --color-danger-strong: #f08276;
        --color-danger-border: #a8483f;
        --color-danger-bg: #2a1512;
        --color-on-danger: #180705;
        --color-status-neutral-fg: #d3dbe2;
        --color-status-neutral-bg: #2a3138;
        --color-status-info-fg: #7ecbdb;
        --color-status-info-bg: #122c33;
        --color-status-success-fg: #8fd9ac;
        --color-status-success-bg: #163524;
        --color-status-warning-fg: #f0cd7e;
        --color-status-warning-bg: #3a2c0d;
        --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        color-scheme: dark;
    }
}

html[data-theme="dark"] {
    --color-ink: #e7edf1;
    --color-muted: #9aa7b2;
    --color-surface: #14181d;
    --color-soft: #1c2228;
    --color-border: #333c44;
    --color-primary: #5fb8cc;
    --color-primary-strong: #3f96aa;
    --color-accent: #d9a441;
    --color-header-bg: rgba(20, 24, 29, 0.96);
    --color-on-primary: #0a2429;
    --color-field-bg: #1c2228;
    --color-pill-bg: #1c2228;
    --color-danger: #d3574f;
    --color-danger-strong: #f08276;
    --color-danger-border: #a8483f;
    --color-danger-bg: #2a1512;
    --color-on-danger: #180705;
    --color-status-neutral-fg: #d3dbe2;
    --color-status-neutral-bg: #2a3138;
    --color-status-info-fg: #7ecbdb;
    --color-status-info-bg: #122c33;
    --color-status-success-fg: #8fd9ac;
    --color-status-success-bg: #163524;
    --color-status-warning-fg: #f0cd7e;
    --color-status-warning-bg: #3a2c0d;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}

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

html {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    color: var(--color-ink);
    background: var(--color-surface);
}

.base-svgs {
    /* Holds only <symbol> definitions referenced via <use> elsewhere on the
       page - <symbol> children never render on their own, but the wrapping
       <svg> itself still has default intrinsic sizing and, left unstyled,
       participates as an extra flex item after the footer in body's
       flex-direction:column layout, breaking the sticky-footer effect. */
    display: none;
}

a {
    color: var(--color-primary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.container {
    width: min(calc(100% - 2rem), var(--content-width));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 10;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.65rem 0.9rem;
    color: var(--color-on-primary);
    background: var(--color-primary-strong);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-header-bg);
}

.header-inner {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--color-ink);
    font-size: 1.2rem;
    font-weight: 750;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border-radius: 0.5rem;
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.brand-logo {
    display: block;
    height: 2.2rem;
    max-width: 8rem;
    object-fit: contain;
}

.header-navigation,
.primary-navigation,
.account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.header-navigation {
    justify-content: flex-end;
    gap: 1rem;
}

.primary-navigation {
    gap: 1rem;
}

.primary-navigation a,
.header-navigation > a {
    padding-block: 0.2rem;
    border-bottom: 2px solid transparent;
    color: var(--color-primary);
    font-weight: 650;
    text-decoration: none;
}

.primary-navigation a:hover {
    border-bottom-color: var(--color-border);
}

.primary-navigation a.active {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
}

.account-actions {
    gap: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--color-border);
}

.account-form {
    margin: 0;
}

.account-action {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    color: var(--color-primary);
    background: var(--color-surface);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.account-action:hover {
    border-color: var(--color-primary);
    background: var(--color-soft);
}

.account-action-primary {
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.account-action-primary:hover {
    color: var(--color-on-primary);
    background: var(--color-primary-strong);
}

.account-action-logout {
    color: var(--color-danger-strong);
}

.account-action-logout:hover {
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
}

/* Theme toggle: markup and JS (admin/js/theme.js) are Django admin's own,
   reused so the theme choice is stored under the same localStorage key and
   stays unified with the operations pages' toggle. The visual style here is
   ours, not Django's, since admin/css/dark_mode.css isn't loaded on this
   page.

   Deliberately a DIFFERENT class name than Django's own `.theme-toggle`
   (`.site-theme-toggle`), even though the markup otherwise mirrors
   admin/color_theme_toggle.html - this file (app.css) is loaded on both
   this page and the operations pages, and a shared class name meant these
   rules leaked onto Django's own toggle there too, fighting its CSS for
   specificity (most visibly on :hover, where a same-specificity rule here
   could still win by source order over Django's non-hover base rule). A
   distinct class name makes the two toggles' styling fully independent. */
.site-theme-toggle {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    color: var(--color-primary);
    background: var(--color-surface);
    cursor: pointer;
}

.site-theme-toggle:hover {
    border-color: var(--color-primary);
    background: var(--color-soft);
}

.site-theme-toggle:hover svg {
    /* Keep the invisible bounding square (see the comment below) matching
       the button's background on hover too, not just its resting state. */
    color: var(--color-soft);
}

.site-theme-toggle svg {
    /* Each icon's first <path> is a full-bounds square with an explicit
       fill="currentColor" (an SVG presentation attribute, which reads the
       CSS `color` property, not `fill`) - it's meant to stay invisible by
       matching the button's own background. The real glyph is the second
       <path>, which has no fill attribute of its own and so takes its color
       from the CSS `fill` property instead. Setting both `color` and `fill`
       to the same value (e.g. via `fill: currentColor`) makes the bounding
       square paint solid and mask the glyph entirely - that was the "just a
       solid square" bug. They must stay two different values. */
    display: none;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--color-surface);
    fill: var(--color-primary);
}

html[data-theme="auto"] .site-theme-toggle svg.theme-icon-when-auto,
html[data-theme="dark"] .site-theme-toggle svg.theme-icon-when-dark,
html[data-theme="light"] .site-theme-toggle svg.theme-icon-when-light {
    display: block;
}

/* Fully hide all three screen-reader labels by default, then restore only
   the one matching the current theme into the accessibility tree (it stays
   visually clipped via .visually-hidden's other, still-active properties)
   so assistive tech announces just one, not all three redundantly. */
.site-theme-toggle .visually-hidden {
    display: none;
}

html[data-theme="auto"] .site-theme-toggle .theme-label-when-auto,
html[data-theme="dark"] .site-theme-toggle .theme-label-when-dark,
html[data-theme="light"] .site-theme-toggle .theme-label-when-light {
    display: block;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.eyebrow {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

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

h1 {
    max-width: 13ch;
    margin-bottom: 1.25rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.7rem, 7vw, 5.4rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.section {
    padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.section > .container > h2 {
    margin-bottom: 2rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3rem);
}

.portal-home {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 5rem;
}

.portal-header {
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--color-border);
}

.portal-header h1 {
    max-width: none;
    margin-bottom: 0.45rem;
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.1;
}

.portal-summary {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 1.1rem;
}

.portal-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(15rem, 0.8fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.content-section {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    background: var(--color-surface);
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section > h2:first-child {
    margin: -1.25rem -1.25rem 1rem;
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-soft);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
}

.content-section > .panel {
    box-shadow: none;
}

.account-summary h2 {
    margin-bottom: 0.8rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
}

.content-section p {
    max-width: 48rem;
    color: var(--color-muted);
}

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

.account-summary p:last-child {
    margin-bottom: 0;
}

.link-list {
    margin: 0;
    padding-left: 1.2rem;
}

.link-list li + li {
    margin-top: 0.45rem;
}

.account-summary h2 {
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--color-border);
}

main {
    flex: 1 0 auto;
}

.record-list,
.compact-list,
.summary-counts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.summary-counts-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-counts-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.record-list > li {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
}

.record-list > li:first-child {
    padding-top: 0;
}

.record-list > li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.record-list a,
.record-list strong {
    font-size: 1.05rem;
}

.record-list span:not(.status),
.record-list small {
    color: var(--color-muted);
}

.record-list p {
    margin: 0.25rem 0 0;
}

.record-list-large > li {
    padding: 1.25rem 0;
}

.compact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.25rem;
}

.compact-list li {
    /* See .tag-list li: a direct <li> declaration is needed to beat Django
       admin's base.css `ul > li { list-style-type: square }`. */
    list-style: none;
    position: relative;
    padding-left: 0.9rem;
}

.compact-list li::before {
    position: absolute;
    left: 0;
    content: "•";
    color: var(--color-accent);
}

/* One row per rubric criterion, not a flex-wrap pill list like
   .compact-list - built to stay legible regardless of how many criteria a
   rubric has or how long a label/comment runs, since .compact-list's
   pills only work for short, few items. */
.criterion-list {
    display: grid;
    gap: 0.6rem;
    margin: 0.75rem 0;
    padding: 0;
    list-style: none;
}

.criterion-list li {
    /* See .compact-list li: a direct <li> declaration is needed to beat
       Django admin's base.css `ul > li { list-style-type: square }`. */
    list-style: none;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
}

.criterion-score-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
}

.criterion-comment {
    margin: 0.4rem 0 0;
    color: var(--color-muted);
}

.metadata-list {
    margin: 0 0 1.25rem;
}

.metadata-list > div {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border);
}

.metadata-list dt {
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.metadata-list dd {
    margin: 0.15rem 0 0;
}

.summary-counts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
    border-block: 1px solid var(--color-border);
}

.summary-counts li {
    display: grid;
    gap: 0.2rem;
    padding: 1.2rem;
    border-right: 1px solid var(--color-border);
}

.summary-counts li:last-child {
    border-right: 0;
}

.summary-counts strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
}

.summary-counts span {
    color: var(--color-muted);
    font-size: 0.88rem;
}

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

.event-heading h1 {
    max-width: 22ch;
}

.event-logo {
    display: block;
    max-height: 4.5rem;
    max-width: 100%;
    margin-bottom: 1rem;
}

.account-summary {
    margin-top: 2rem;
    padding: 1.4rem 1.5rem;
    border-left: 0.25rem solid var(--color-primary);
    background: var(--color-soft);
}

.account-summary form {
    margin-top: 1rem;
}

.account-email {
    overflow-wrap: anywhere;
    font-weight: 700;
}

.messages {
    padding-top: 1rem;
}

.verification-banner {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--color-status-warning-fg);
    background: var(--color-status-warning-bg);
}

.verification-banner p {
    margin: 0;
}

.narrow-container {
    max-width: 42rem;
}

.page-heading {
    margin-bottom: 2rem;
}

.page-heading h1,
.prose-panel h1 {
    max-width: none;
    font-size: clamp(2.2rem, 6vw, 4rem);
}

.panel {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.app-dialog {
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-ink);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.app-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.app-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.app-dialog-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.app-dialog-close {
    display: inline-flex;
    width: 2.2rem;
    height: 2.2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: var(--color-muted);
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.app-dialog-close:hover {
    color: var(--color-ink);
    background: var(--color-soft);
}

.app-dialog-body {
    max-height: 60vh;
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
}

.app-dialog-body .metadata-list {
    margin: 0.75rem 0 0;
}

.app-dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border);
}

.form-stack,
.form-field {
    display: grid;
    gap: 0.55rem;
}

.form-stack {
    gap: 1.25rem;
}

.form-field label {
    font-weight: 700;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    color: var(--color-ink);
    background: var(--color-field-bg);
    font: inherit;
}

.form-field-error input,
.form-field-error select,
.form-field-error textarea {
    border-color: var(--color-danger-border);
}

.field-help,
.field-errors,
.form-errors,
.auth-alternate {
    color: var(--color-muted);
    font-size: 0.94rem;
}

.field-help,
.field-errors p,
.form-errors p,
.auth-alternate p {
    margin: 0;
}

.field-help ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.topic-picker-enhanced {
    display: none;
}

.topic-picker-active .topic-picker-enhanced {
    display: grid;
    gap: 0.5rem;
}

.topic-picker-search {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    color: var(--color-ink);
    background: var(--color-field-bg);
    font: inherit;
}

.topic-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topic-picker-chips:empty {
    display: none;
}

.topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.35rem 0.3rem 0.7rem;
    border-radius: 999px;
    color: var(--color-on-primary);
    background: var(--color-primary);
    font-size: 0.88rem;
}

.topic-chip-mismatched {
    color: var(--color-status-warning-fg);
    background: var(--color-status-warning-bg);
}

.topic-chip-remove {
    display: inline-grid;
    width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: inherit;
    background: rgba(255, 255, 255, 0.2);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.topic-chip-mismatched .topic-chip-remove {
    background: rgba(0, 0, 0, 0.08);
}

.topic-picker-suggestions[hidden] {
    display: none;
}

.topic-picker-suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0.35rem;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    background: var(--color-soft);
    list-style: none;
}

.topic-suggestion {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 0.3rem;
    text-align: left;
    color: var(--color-ink);
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}

.topic-suggestion:hover,
.topic-suggestion:focus-visible {
    background: var(--color-surface);
    color: var(--color-primary);
}

.topic-suggestion-hint {
    padding: 0.4rem 0.6rem;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-style: italic;
}

.field-errors,
.form-errors {
    color: var(--color-danger);
    font-weight: 650;
}

.error-summary {
    padding: 1.15rem 1.25rem;
    border: 2px solid var(--color-danger-border);
    border-radius: 0.5rem;
    color: var(--color-danger-strong);
    background: var(--color-danger-bg);
}

.error-summary h2,
.error-summary p {
    margin: 0 0 0.55rem;
}

.error-summary ul {
    margin: 0;
    padding-left: 1.25rem;
}

.error-summary a {
    color: var(--color-danger-strong);
    font-weight: 750;
}

.section-has-errors {
    border-width: 2px;
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
}

.button {
    display: inline-flex;
    width: fit-content;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: 2px solid var(--color-primary);
    border-radius: 0.45rem;
    color: var(--color-on-primary);
    background: var(--color-primary);
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.button .action-icon {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.button-secondary {
    color: var(--color-primary);
    background: transparent;
}

.button-secondary:hover {
    color: var(--color-on-primary);
}

.button-danger {
    border-color: var(--color-danger);
    color: var(--color-on-danger);
    background: var(--color-danger);
}

.button-danger:hover {
    background: var(--color-danger-strong);
}

.button-compact {
    min-height: 2.15rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.9rem;
}

.button-danger-outline {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: transparent;
}

.button-danger-outline:hover {
    color: var(--color-on-danger);
    background: var(--color-danger);
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.submission-form-container {
    max-width: 58rem;
}

.submission-form-container .panel {
    box-shadow: none;
}

.submission-form-container .form-section {
    padding: 1.25rem;
    overflow: hidden;
}

.form-section-heading {
    margin: -1.25rem -1.25rem 0;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-soft);
}

.form-section-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
}

.form-section-heading p {
    margin: 0.35rem 0 0;
    color: var(--color-muted);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

details summary {
    cursor: pointer;
    font-weight: 600;
}

.conflict-disclosure {
    margin-top: 0.9rem;
}

.conflict-disclosure summary {
    color: var(--color-danger);
}

.conflict-disclosure[open] summary {
    margin-bottom: 0.75rem;
}

.conflict-disclosure form {
    margin-top: 0.75rem;
}

.history-disclosure {
    margin-top: 1.25rem;
}

.history-disclosure summary {
    width: fit-content;
    color: var(--color-muted);
    font-weight: 700;
    cursor: pointer;
}

.history-disclosure[open] summary {
    margin-bottom: 0.75rem;
}

.history-count {
    display: inline-flex;
    min-width: 1.4rem;
    height: 1.4rem;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    color: var(--color-status-neutral-fg);
    background: var(--color-status-neutral-bg);
    font-size: 0.78rem;
    font-weight: 700;
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: auto;
    min-height: auto;
}

.form-field > div > div {
    margin-top: 0.4rem;
}

.form-field > div label {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-weight: 500;
}

.form-field .score-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.form-field .score-picker > div {
    display: contents;
}

.form-field .score-picker label {
    display: inline-flex;
    min-width: 2.8rem;
    height: 2.8rem;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-border);
    border-radius: 0.5rem;
    color: var(--color-ink);
    background: var(--color-surface);
    font-weight: 700;
    cursor: pointer;
}

.form-field .score-picker input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-field .score-picker label:has(input:checked) {
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.form-field .score-picker label:has(input:focus-visible) {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.author-form {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
}

.author-form-error {
    border-width: 2px;
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
}

.author-form legend {
    padding: 0 0.4rem;
    font-weight: 800;
}

.author-toolbar,
.author-order-actions,
.author-removed-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.author-toolbar {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.author-removed-notice {
    justify-content: space-between;
    color: var(--color-status-warning-fg);
}

.author-form-removed {
    border-style: dashed;
    background: var(--color-status-warning-bg);
}

.author-form-removed .author-toolbar,
.author-form-removed .author-fields {
    display: none;
}

.js .author-delete-fallback,
.js .author-position-field {
    display: none;
}

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

.author-contact-field {
    grid-column: 1 / -1;
}

.author-contact-field > label {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.submission-detail-sections {
    display: grid;
    gap: 1rem;
}

.detail-section {
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    background: var(--color-surface);
}

.detail-section > form {
    margin: 1rem 0;
}

.detail-section > h2:first-child {
    margin: -1.25rem -1.25rem 1rem;
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-soft);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
}

.detail-section > :last-child {
    margin-bottom: 0;
}

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

.detail-section .tag-list + h3,
.detail-section p + h3,
.content-section .tag-list + h3 {
    margin-top: 1.25rem;
}

.tag-list li {
    /* Django admin's base.css declares `ul > li { list-style-type: square }`,
       which targets <li> directly and beats the list-style:none inherited
       from the .tag-list ancestor, so it must be overridden here too. */
    list-style: none;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    background: var(--color-pill-bg);
}

.working-document {
    display: grid;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border-left: 4px solid var(--color-primary);
    background: var(--color-pill-bg);
}

.working-document span {
    color: var(--color-muted);
}

.document-upload {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.author-list {
    display: grid;
    gap: 1rem;
    padding-left: 1.5rem;
}

.author-list li {
    padding-left: 0.4rem;
}

.author-list span {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-muted);
}

.author-list .status {
    display: inline-block;
    margin-left: 0.5rem;
}

.submission-heading h1 {
    max-width: 24ch;
}

.submission-notice {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
}

.participation-banner {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-color: var(--color-status-warning-fg);
    color: var(--color-status-warning-fg);
    background: var(--color-status-warning-bg);
}

.participation-banner p,
.participation-banner form {
    margin: 0;
}

.participation-panel {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
}

.participation-panel h2 {
    margin-bottom: 0.5rem;
}

.submission-steps {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
}

.submission-steps p {
    margin: 0 0 0.6rem;
    font-weight: 700;
}

.submission-steps ol {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-left: 1.4rem;
}

.submission-steps li {
    color: var(--color-muted);
}

.submission-steps li strong {
    color: var(--color-ink);
}

.operational-section {
    padding-top: clamp(2.25rem, 5vw, 4rem);
}

.operational-heading h1 {
    max-width: none;
    margin-bottom: 0.5rem;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.operational-heading p:last-child,
.table-secondary,
.record-count {
    color: var(--color-muted);
}

.scope-notice {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    border-left: 0.25rem solid var(--color-primary);
    background: var(--color-soft);
}

.scope-notice p {
    margin: 0;
}

.operational-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(10rem, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    background: var(--color-pill-bg);
}

.filter-field {
    display: grid;
    gap: 0.35rem;
}

.filter-field label {
    font-size: 0.88rem;
    font-weight: 750;
}

.filter-field input,
.filter-field select {
    width: 100%;
    min-height: 2.55rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    color: var(--color-ink);
    background: var(--color-field-bg);
    font: inherit;
}

.filter-search {
    grid-column: span 2;
}

.filter-field-checkbox {
    display: flex;
    align-items: end;
}

.filter-field-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
}

.filter-field-checkbox input {
    width: auto;
    min-height: 0;
}

.filter-actions {
    display: flex;
    gap: 0.8rem;
    align-items: end;
}

.filter-actions > a {
    min-height: 2.55rem;
    padding: 0.55rem 0;
    font-weight: 700;
}

.record-count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 1rem 0 0.65rem;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
}

.pagination-size select {
    padding: 0.2rem 0.4rem;
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
}

.operational-table {
    width: 100%;
    min-width: 58rem;
    border-collapse: collapse;
    font-size: 0.94rem;
}

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

.operational-table thead th {
    color: var(--color-muted);
    background: var(--color-soft);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.operational-table tbody tr:last-child > * {
    border-bottom: 0;
}

.table-secondary {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.86rem;
}

.row-actions,
.detail-actions,
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
}

.row-actions a,
.detail-actions a {
    font-weight: 700;
    white-space: nowrap;
}

.detail-actions {
    margin-bottom: 1.25rem;
    padding: 0.8rem 0;
    border-block: 1px solid var(--color-border);
}

.pagination {
    justify-content: center;
    margin-top: 1rem;
    padding: 0.8rem;
}

.pagination a {
    font-weight: 700;
}

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

.status-neutral {
    color: var(--color-status-neutral-fg);
    background: var(--color-status-neutral-bg);
}

.status-info {
    color: var(--color-status-info-fg);
    background: var(--color-status-info-bg);
}

.auth-alternate {
    margin-top: 1.25rem;
}

.prose-panel > :last-child {
    margin-bottom: 0;
}

.status {
    width: fit-content;
    padding: 0.35rem 0.55rem;
    border-radius: 0.35rem;
    font-weight: 700;
}

.status-success {
    color: var(--color-status-success-fg);
    background: var(--color-status-success-bg);
}

.status-warning {
    color: var(--color-status-warning-fg);
    background: var(--color-status-warning-bg);
}

.status-danger {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

.message {
    padding: 0.8rem 1rem;
    border-left: 0.3rem solid var(--color-primary);
    background: var(--color-soft);
}

.message-error {
    border-left-color: var(--color-danger-border);
    color: var(--color-danger-strong);
    background: var(--color-danger-bg);
    font-weight: 700;
}

.message-success {
    border-left-color: var(--color-status-success-fg);
    color: var(--color-status-success-fg);
    background: var(--color-status-success-bg);
}

.site-footer {
    padding: 2rem 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    background: var(--color-soft);
}

.site-footer p {
    margin-bottom: 0;
}

@media (max-width: 48rem) {
    .header-inner {
        align-items: flex-start;
    }

    .header-inner {
        padding-block: 1rem;
        flex-direction: column;
    }

    .header-navigation {
        width: 100%;
        justify-content: space-between;
    }

    .account-actions {
        padding-left: 0.75rem;
    }

    .portal-layout {
        grid-template-columns: 1fr;
    }

    .summary-counts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-counts li:nth-child(2) {
        border-right: 0;
    }

    .summary-counts li:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border);
    }

    .definition-columns {
        grid-template-columns: 1fr;
    }

    .author-fields {
        grid-template-columns: 1fr;
    }

    .operational-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metadata-grid {
        grid-template-columns: 1fr;
    }

    .account-summary {
        margin-top: 0;
    }
}

@media (max-width: 34rem) {
    .operational-filters {
        grid-template-columns: 1fr;
    }

    .filter-search {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}