:root {
    color-scheme: light;
    --color-text: #1a1a1a;
    --color-text-muted: #5a5a5a;
    --color-text-faint: #8a8a8a;
    --color-bg: #ffffff;
    --color-bg-subtle: #f4f4f5;
    --color-border: #c7c7c7;
    --color-focus: #0b5fff;
    /* Constant across themes: always paired with white button text or drawn as a
       ring/dot, so it does not need a brighter dark-mode variant like the *-text
       colors below do. */
    --color-error: #b3261e;
    --color-error-text: #b3261e;
    --color-error-bg: #fbeaea;
    --color-success: #1d6f42;
    --color-success-text: #1d6f42;
    --color-success-bg: #e9f5ee;
    --color-warning-text: #7a5200;
    --color-warning-bg: #fdf3e0;
    --color-warning-border: #b6842a;
    --color-neutral-bg: #ececec;
    --color-neutral-text: #444444;
    --color-accent-bg: #eef2ff;
}

/* Dark palette, applied two ways: automatically when the OS prefers dark and the
   user hasn't manually overridden to light, or unconditionally when the user has
   manually chosen dark. Backgrounds stop short of pure black and body text stops
   short of pure white, and the *-text colors are brightened relative to their
   light-theme values so they stay readable directly on --color-bg (verified
   against WCAG contrast, not just eyeballed). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-text: #e6e6e6;
        --color-text-muted: #9aa0a6;
        --color-text-faint: #7d838a;
        --color-bg: #15171a;
        --color-bg-subtle: #1e2126;
        --color-border: #65686d;
        --color-error-text: #ff8a80;
        --color-error-bg: #3a1f1f;
        --color-success-text: #6fcf97;
        --color-success-bg: #14301f;
        --color-warning-text: #f5c76b;
        --color-warning-bg: #3a2f14;
        --color-warning-border: #f5c76b;
        --color-neutral-bg: #26282c;
        --color-neutral-text: #c7c7c7;
        --color-accent-bg: #1c2a44;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-text: #e6e6e6;
    --color-text-muted: #9aa0a6;
    --color-text-faint: #7d838a;
    --color-bg: #15171a;
    --color-bg-subtle: #1e2126;
    --color-border: #65686d;
    --color-error-text: #ff8a80;
    --color-error-bg: #3a1f1f;
    --color-success-text: #6fcf97;
    --color-success-bg: #14301f;
    --color-warning-text: #f5c76b;
    --color-warning-bg: #3a2f14;
    --color-warning-border: #f5c76b;
    --color-neutral-bg: #26282c;
    --color-neutral-text: #c7c7c7;
    --color-accent-bg: #1c2a44;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-bg);
    color: var(--color-text);
    padding: 0.5rem 1rem;
}

.skip-link:focus {
    left: 0;
    z-index: 10;
}

.site-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.site-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.site-nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-nav a {
    color: var(--color-text);
    text-decoration: none;
    padding: 0.25rem 0;
}

.site-nav a:hover,
.site-nav a:focus {
    text-decoration: underline;
}

.header-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logout-form button {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.theme-toggle {
    display: inline-flex;
    gap: 0.25rem;
}

.theme-toggle button {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
}

.theme-toggle button[aria-pressed="true"] {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-weight: 600;
    border-color: var(--color-text-muted);
}

body.guest {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, var(--color-accent-bg), transparent 55%),
        radial-gradient(circle at 85% 0%, var(--color-accent-bg), transparent 50%),
        var(--color-bg);
}

body.guest main {
    max-width: 28rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 2rem 2rem 1.75rem;
    margin-top: 4rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.app main {
    max-width: 48rem;
}

main {
    margin: 2rem auto;
    padding: 0 1.5rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

form.inline-edit {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

form.inline-edit input {
    width: auto;
    min-width: 20rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.field-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.field-row > div {
    flex: 1 1 12rem;
}

fieldset {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1rem;
}

.hint {
    font-weight: normal;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.card {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

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

.empty-state {
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--color-text-muted);
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--color-accent-bg);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-draft {
    background: var(--color-neutral-bg);
    color: var(--color-neutral-text);
}

.badge-needs_roster_review {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.badge-ready_to_download {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.page-subtitle {
    color: var(--color-text-muted);
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.form-section {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.form-section h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
}

.detail-list dt {
    font-weight: 600;
    color: var(--color-text-muted);
}

.detail-list dd {
    margin: 0;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="date"],
input[type="time"],
select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
    background: var(--color-bg);
    color: var(--color-text);
}

input:focus,
a:focus,
button:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 1px;
}

button {
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 4px;
    background: var(--color-focus);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
}

.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-text);
}

.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-text);
}

.alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.preview-box {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-style: italic;
}

.keyword-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.keyword-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--color-accent-bg);
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
}

.keyword-chip button {
    background: transparent;
    color: var(--color-text);
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
}

.keyword-add-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.keyword-add-row input {
    flex: 1;
}

.field-error {
    color: var(--color-error-text);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.auxiliary-links {
    margin-top: 1rem;
    font-size: 0.95rem;
}

.table-scroll {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.roster-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 60rem;
}

.roster-table th,
.roster-table td {
    border: 1px solid var(--color-border);
    padding: 0.35rem 0.5rem;
    text-align: left;
    vertical-align: middle;
}

.roster-table th {
    background: var(--color-bg-subtle);
    position: sticky;
    top: 0;
}

.roster-table input[type="text"] {
    min-width: 5rem;
    padding: 0.3rem;
}

.full-name-cell {
    min-width: 10rem;
}

.full-name-cell .override-label {
    display: block;
    font-weight: normal;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    margin-top: 0.15rem;
}

.full-name-cell .reset-button {
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    margin-top: 0.15rem;
}

/* A neutral note on an expanded multi-number row (e.g. Bound's "4/5"), kept visually
   quiet -- it must not compete with .flag-list's red validation warnings. */
.number-source-note {
    display: block;
    font-weight: normal;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    margin-top: 0.15rem;
}

.roster-table .readonly-cell {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.roster-table tr.flagged-row {
    background: var(--color-error-bg);
}

.flag-list {
    color: var(--color-error-text);
    font-size: 0.85rem;
}

.hidden-form {
    display: none;
}

.inline-form {
    display: inline;
}

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

.excluded-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

/* -- Import-method option cards (roster select-method screen) -------------- */

/* The whole card is a single <label>, so clicking anywhere in it -- not just the
   radio itself -- selects that method (native label-click behavior, no JS). The
   revealed fields are a plain sibling of the radio, shown via :checked, so this
   works with JavaScript off too. */
.import-option {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.import-option input[type="radio"] {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0.2rem;
}

.import-option-title {
    grid-column: 2;
    font-weight: 600;
}

.import-option .hint {
    grid-column: 2;
    margin: 0;
}

.import-option-fields {
    display: none;
    grid-column: 1 / -1;
}

.import-option input:checked ~ .import-option-fields {
    display: block;
    margin-top: 0.75rem;
}

.import-option-fields .field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.roster-paste-textarea {
    width: 100%;
    min-height: 22rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    box-sizing: border-box;
}

.import-option.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* A link-style import option (navigates to its own multi-step flow, e.g. "Paste from
   anywhere else") instead of a radio choice within this form -- same card look, but a
   single-column layout since there's no radio input to reserve column 1 for. */
.import-option-link {
    grid-template-columns: 1fr;
    text-decoration: none;
    color: inherit;
}

.import-option-link .import-option-title,
.import-option-link .hint {
    grid-column: 1;
}

.roster-map-table th {
    padding: 0.5rem;
}

.roster-map-table select {
    width: 100%;
}

.roster-map-first-row {
    outline: 2px solid var(--color-warning, #b58900);
}

body.app main {
    max-width: 64rem;
}

/* Roster-specific wide layout (opt-in via the "wide" body class -- see
   RosterController::renderEditor) -- ordinary form pages stay at the width above.
   No upper cap: the roster table's own columns are fixed/narrow-width inputs, so an
   unbounded container doesn't stretch them, it just stops squeezing an 11-column
   table into the same width as a login form. table-scroll's overflow-x remains the
   fallback on screens too narrow to fit the widened table anyway. */
body.app.wide main {
    max-width: 100%;
}

/* -- Workflow stepper ------------------------------------------------------ */

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

.stepper-nav {
    margin-bottom: 1.5rem;
}

.stepper-summary {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.stepper {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stepper-step {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.stepper-step:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1px;
    background: var(--color-border);
    margin: 0 0.35rem;
}

.stepper-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
}

.stepper-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.75rem;
    background: var(--color-border);
    color: var(--color-text);
    flex-shrink: 0;
}

.stepper-completed .stepper-label {
    color: var(--color-text);
    background: transparent;
    border-color: var(--color-border);
}

.stepper-completed .stepper-label:hover,
.stepper-completed .stepper-label:focus {
    background: var(--color-accent-bg);
}

.stepper-completed .stepper-index {
    background: var(--color-success);
    color: #fff;
}

.stepper-current .stepper-label {
    background: var(--color-focus);
    color: #fff;
    font-weight: 600;
}

.stepper-current .stepper-index {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.stepper-upcoming .stepper-label {
    color: var(--color-text-faint);
    background: transparent;
}

@media (max-width: 40rem) {
    .stepper {
        flex-wrap: nowrap;
    }
}

/* -- Buttons and action bar ------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}

.btn-primary {
    background: var(--color-focus);
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
    font-weight: 500;
}

.btn-secondary:hover {
    background: var(--color-bg-subtle);
}

.btn-utility {
    background: transparent;
    color: var(--color-focus);
    border-color: var(--color-border);
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

.btn-destructive {
    background: var(--color-error);
    color: #fff;
}

.btn-destructive:hover {
    filter: brightness(1.08);
}

.btn-destructive.btn-compact {
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
    filter: none;
    background: initial;
}

.disabled-reason {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.35rem;
    font-weight: normal;
}

.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.action-bar-secondary {
    display: flex;
    gap: 0.75rem;
}

.action-bar-primary {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

/* When the primary action also needs a short explanatory line (roster editor: why
   the single Save/Continue button won't advance to Confirm yet), stack it above the
   button instead of squeezing it into the row alongside it. */
.action-bar-primary-stacked {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.action-bar-primary-stacked .disabled-reason {
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}