/* =============================================================
   DFCI.OncPro — Shared UI components
   Buttons, fields, selects, detail grids, card actions and the
   modal dialog. Consumes tokens.css; no raw colour values here.
   Loaded by any screen that uses these blocks.
   ============================================================= */

/* =============================================================
   Buttons
   ============================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}

.btn--primary {
    background: var(--color-action-primary);
    border-color: var(--color-action-primary);
    color: var(--color-text-on-brand);
}
.btn--primary:hover {
    background: var(--color-action-primary-h);
    border-color: var(--color-action-primary-h);
}

.btn--outline {
    background: var(--color-surface);
    border-color: var(--color-action-primary);
    color: var(--color-action-primary);
}
.btn--outline:hover { background: var(--color-surface-active); }

/* Reads as .btn--outline until the user interacts with it, then fills red on
   hover, keyboard focus and press, for both primary and secondary actions.
   Used throughout the ODQ document screens (Documents, Document
   Customization, Publish actions, Log Sheet) so every button on those
   screens gives the same hover feedback; .btn--outline elsewhere in the app
   keeps its quieter tint. */
.btn--outline-fill {
    background: var(--color-surface);
    border-color: var(--color-action-primary);
    color: var(--color-action-primary);
}
.btn--outline-fill:hover,
.btn--outline-fill:focus-visible,
.btn--outline-fill:active {
    background: var(--color-action-primary);
    border-color: var(--color-action-primary);
    color: var(--color-text-on-brand);
}
.btn--outline-fill:disabled,
.btn--outline-fill:disabled:hover,
.btn--outline-fill[aria-disabled="true"],
.btn--outline-fill[aria-disabled="true"]:hover,
.btn--outline-fill[aria-disabled="true"]:focus-visible,
.btn--outline-fill[aria-disabled="true"]:active {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

/* Neutral action inside a picker popup, where red would read as destructive. */
.btn--quiet {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
    min-width: 96px;
}
.btn--quiet:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* =============================================================
   Fields — a label and its control
   ============================================================= */

.field {
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

/* Label stacked above its control, as on the "Select ... to Edit" rows. */
.field--stacked {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
    justify-items: start;
}

.field__label {
    color: var(--color-text);
    font-size: var(--text-base);
}

/* Server-owned value shown as text rather than an editable control. */
.field__value {
    min-height: 40px;
    display: flex;
    align-items: center;
    color: var(--color-text);
}

.field__error {
    grid-column: 2;
    color: var(--color-action-primary);
    font-size: var(--text-sm);
}
.field--stacked .field__error { grid-column: 1; }

/* =============================================================
   Text inputs and selects
   ============================================================= */

.input,
.select {
    width: 100%;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-field-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-base);
}

.input--narrow { max-width: 130px; }

/* A native date input's own mm/dd/yyyy segments and calendar glyph do not
   grow to fill extra space the way text does; stretched by the shared
   .input width: 100%, the leftover room shows up as a blank gap before the
   glyph. Sizing to content instead, with a floor so it never pinches. */
.input--date {
    width: auto;
    min-width: 150px;
    max-width: 170px;
}

/* The Log Sheet's Revised Sections cell: long text wraps rather than
   truncating, so this needs height and wrapping a single-line input has not. */
.input--textarea {
    min-height: 88px;
    resize: vertical;
    font-family: inherit;
}

.select {
    max-width: 260px;
    appearance: none;
    cursor: pointer;
    padding-right: var(--space-8);
    /* Chevron drawn with a gradient pair so no image asset is required. */
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% + 2px),
        calc(100% - 12px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.select--block { max-width: none; }

.input:disabled,
.select:disabled {
    color: var(--color-text-disabled);
    background: var(--color-surface-alt);
}

/* =============================================================
   Detail grids — paired columns of label/field rows
   ============================================================= */

.details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5) var(--space-10);
}

.details-grid__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

/* =============================================================
   Card header row and footer actions
   ============================================================= */

.card__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

/* Used where a table follows the header row, so it needs to clear the table. */
.card__header--center {
    align-items: center;
    margin-bottom: var(--space-5);
}

/* A button row with content directly below it (a table, a validation
   summary), rather than the last thing in the card. */
.card__header--gap-below { margin-bottom: var(--space-5); }

.card__title--flush { margin-bottom: 0; }

.card__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    flex-wrap: wrap;
}

/* A button group sitting beside another element in the same header row,
   rather than below a form, so it carries no top margin of its own. */
.card__actions--inline { margin-top: 0; }

/* =============================================================
   Modal dialog — native <dialog>, so focus containment, Esc and
   the dimmed backdrop come from the browser.
   ============================================================= */

.modal {
    width: min(620px, calc(100vw - var(--space-8)));
    padding: 0;
    border: none;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raise);
    background: var(--color-surface);
    color: var(--color-text);
}

.modal::backdrop { background: color-mix(in srgb, var(--color-text) 55%, transparent); }

.modal__body { padding: var(--space-6); }

.modal__title {
    margin: 0 0 var(--space-5);
    color: var(--color-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

.modal__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.modal .field {
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
}

/* =============================================================
   Page-level validation summary
   ============================================================= */

.validation-summary {
    margin: 0 0 var(--space-4);
    color: var(--color-action-primary);
    font-size: var(--text-base);
}

.validation-summary ul {
    margin: 0;
    padding-left: var(--space-5);
}

.validation-summary:empty { display: none; }

/* =============================================================
   Responsive — collapse paired columns at the shell breakpoint
   ============================================================= */

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

    .field,
    .modal .field,
    .radio-group {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        justify-items: start;
    }

    .field__error { grid-column: 1; }

    .radio-group__legend,
    .radio-group__options { grid-column: 1; }

    .select { max-width: none; }

    .card__header { align-items: flex-start; }
}

/* =============================================================
   Data tables
   The card clips horizontal overflow so a wide table scrolls
   inside it rather than pushing the page sideways.
   ============================================================= */

.table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.data-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.data-table__head-cell {
    background: var(--color-surface-active);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    text-align: left;
    white-space: nowrap;
    padding: var(--space-3) var(--space-4);
}

.data-table__cell {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    vertical-align: top;
}

.data-table__cell--center { text-align: center; }

.data-table__link {
    color: var(--color-heading);
    font-weight: var(--weight-medium);
    text-decoration: none;
}
.data-table__link:hover { text-decoration: underline; }

/* Decorative: column filtering is not implemented yet. */
.data-table__filter {
    width: 11px;
    height: 11px;
    margin-right: var(--space-1);
    vertical-align: -1px;
}

.data-table__checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-header-blue);
    cursor: pointer;
}

/* =============================================================
   Status pill — always carries its meaning as text
   ============================================================= */

.status-pill {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.status-pill--active {
    background: color-mix(in srgb, var(--color-status-ok) 25%, var(--color-surface));
    color: var(--color-text);
}

.status-pill--inactive {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

/* =============================================================
   Pagination
   ============================================================= */

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    text-decoration: none;
}

.pagination__link:hover { background: var(--color-surface-alt); }

.pagination__link[aria-current="page"] {
    background: var(--color-surface-active);
    font-weight: var(--weight-medium);
}

.pagination__spacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    color: var(--color-text-disabled);
}

.pagination__size {
    margin-left: var(--space-3);
    min-height: 28px;
    padding: 0 var(--space-2);
    max-width: 8rem;
}

/* =============================================================
   Empty state
   ============================================================= */

.empty-state {
    margin: 0;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .data-table { min-width: 42rem; }
}

/* =============================================================
   Picker — a select-styled button that opens a panel of
   checkboxes, which a native select cannot hold.
   Shared by Role Admin and the CT App User Portal; each screen
   supplies its own column layout.
   ============================================================= */

.picker { min-width: 0; }

.picker__title {
    margin: 0 0 var(--space-5);
    color: var(--color-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

/* Positioning context for the popup, which must not add to the card height. */
.picker__anchor { position: relative; }

.picker__toggle {
    text-align: left;
    font-weight: var(--weight-regular);
}

/* A toggle that names its choices stays one line tall however many are ticked. */
.picker__toggle--summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker__popup[hidden] { display: none; }

.picker__popup {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: 2;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raise);
}

.picker__group {
    margin: 0;
    padding: 0;
    border: none;
}

.picker__list {
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
}

/* Long lists scroll; short ones sit at their natural height. */
.picker__scroll {
    max-height: 18rem;
    overflow-y: auto;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.picker__option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-1) var(--space-5);
    color: var(--color-text-muted);
    cursor: pointer;
}

.picker__option:hover { background: var(--color-surface-alt); }

.picker__checkbox {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-header-blue);
    cursor: pointer;
}

.picker__footer {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
}

/* Narrow viewports and high zoom: absolutely positioned popups would overlap
   once the columns stack, so let them flow instead. */
@media (max-width: 900px) {
    .picker__popup {
        position: static;
        margin-top: var(--space-2);
        box-shadow: none;
    }
}

/* =============================================================
   Mode switch — mutually exclusive views of one screen, each its
   own URL. The active mode is bold and underlined as well as
   coloured, so it never relies on colour alone.
   ============================================================= */

.mode-switch__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mode-switch__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mode-switch__link:not(.is-active):hover {
    background: var(--color-surface-active);
    color: var(--color-heading);
}

.mode-switch__link.is-active {
    color: var(--color-heading);
    font-weight: var(--weight-bold);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* =============================================================
   Select inside a table header cell — compact enough to sit in
   the heading row beside the plain column titles.
   ============================================================= */

.select--head-cell {
    width: auto;
    min-width: 12rem;
    min-height: 32px;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
}

/* =============================================================
   Portal grid — three equal columns of equal height that fill
   the content area, as on CT Portal and CT Portal 2.0.
   ============================================================= */

/* Lets the grid take the height left under the header and tab strip. */

.app-content:has(> .portal-grid) {
    display: flex;
    flex-direction: column;
}

.portal-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: stretch;
}

/* The cards are grid siblings, so the shared stacking margin does not apply. */
.portal-grid .card + .card { margin-top: 0; }

/* =============================================================
   Link card — centred heading over a centred list of links
   ============================================================= */

.link-card {
    min-width: 0;
    text-align: center;
}

.link-card__title {
    margin: 0 0 var(--space-5);
    color: var(--color-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

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

.link-card__link {
    display: inline-block;
    /* A comfortable pointer target without spreading the list. */
    padding: var(--space-1) var(--space-2);
    color: var(--color-heading);
    text-decoration: none;
}

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

/* Temporary development link, set apart from the real links above it. Removed
   before production with the link itself. */
.link-card__temporary { margin-top: var(--space-6); }

.link-card__note {
    margin: 0;
    color: var(--color-text-muted);
}

/* =============================================================
   Quick links — application headings, bold and underlined, with
   their screens nested beneath. The nesting is the structure; the
   bold text only echoes it.
   ============================================================= */

.quick-links,
.quick-links__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quick-links__heading {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    color: var(--color-heading);
    font-weight: var(--weight-bold);
    text-decoration: underline;
}

/* =============================================================
   Message card — a result heading, a line or two of body text and
   one action, left-aligned.
   ============================================================= */

.message-card__title {
    margin: 0 0 var(--space-4);
    color: var(--color-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

.message-card__body,
.message-card__action { padding-left: var(--space-6); }

.message-card__body p { margin: 0 0 var(--space-4); }

/* Focus is moved here by script so the result is announced; the card is not a
   control and never takes keyboard focus, so it draws no ring. */
.message-card:focus { outline: none; }

/* A short notice rather than a form. */
.modal--small { width: min(440px, calc(100vw - var(--space-8))); }

.modal__message { margin: 0; }

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

    .message-card__body,
    .message-card__action { padding-left: 0; }
}

/* =============================================================
   ODQ document workflow — Documents, Document Customization,
   Publish actions and the Log Sheet.
   ============================================================= */

/* Fixed-header scrolling table body. The card header, its button row and the
   column headings stay in place; only the rows scroll, so the row actions are
   always reachable however long the list gets. */
.table-scroll--fixed-body {
    max-height: 26rem;
    overflow-y: auto;
}

.table-scroll--fixed-body .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* A small read-only table of labelled facts, such as Selected Protocol
   Details, that should not force the card into horizontal scroll the way a
   wide action table does. */
.data-table--details { min-width: 0; }

/* =============================================================
   Radio group — a fieldset/legend pair laid out like .field: the
   legend to the left, its options to the right, matching the
   wireframe's Select Footers / Select Headers rows.
   ============================================================= */

.radio-group {
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3) var(--space-4);
    margin: 0;
    padding: 0;
    border: none;
}

.radio-group__legend {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    color: var(--color-text);
    font-size: var(--text-base);
}

.radio-group__options {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
}

.radio-group__option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    cursor: pointer;
}

.radio-group__input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-header-blue);
    cursor: pointer;
}

/* =============================================================
   Toggle row — a real checkbox with a visible label, styled as a
   switch. The input stays in place and focusable; only its own box
   is made transparent, so it is never an unlabelled decorative
   control.
   ============================================================= */

.toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.toggle-row__label {
    color: var(--color-text);
    font-size: var(--text-base);
}

.toggle {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
}

.toggle__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.toggle__track {
    position: absolute;
    inset: 0;
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    pointer-events: none;
    transition: background var(--transition-fast);
}

.toggle__track::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-surface);
    border-radius: 50%;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-fast);
}

.toggle__input:checked + .toggle__track { background: var(--color-action-primary); }
.toggle__input:checked + .toggle__track::before { transform: translateX(20px); }

.toggle__input:focus-visible + .toggle__track {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* =============================================================
   Document action block — Publish screen's one-row-table-plus-
   controls, repeated once per document.
   ============================================================= */

.document-action {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}

.document-action:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.document-action__table { margin: 0; }

.document-action__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4) var(--space-6);
}

.document-action__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 220px;
}

/* display: flex above outranks the browser's own [hidden] rule, so the
   attribute needs its own to actually hide the field. */
.document-action__field[hidden] { display: none; }

/* =============================================================
   Help glyph — a small "?" toggle beside a card heading, opening
   an instructional popover. Vertical centering comes from being a
   flex item in .card__title-row, not from a baseline hack, so it
   lines up with the heading text regardless of font metrics.
   ============================================================= */

.card__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.help-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    background: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
    cursor: pointer;
}

.help-glyph:hover,
.help-glyph:focus-visible,
.help-glyph[aria-expanded="true"] {
    border-color: var(--color-action-primary);
    color: var(--color-action-primary);
}

/* The instructional popover itself: solid blue, matching the reference
   notice, distinct from .picker__popup's white checkbox-list styling. */
.help-popover-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 2;
    width: max-content;
    max-width: 420px;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--color-subnav-blue);
    color: var(--color-text-on-brand);
    box-shadow: var(--shadow-raise);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    text-align: left;
}

.help-popover-panel p { margin: 0 0 var(--space-2); }
.help-popover-panel p:last-child { margin-bottom: 0; }

.help-popover-panel[hidden] { display: none; }

/* Hover or keyboard focus reveals it immediately, in CSS alone; a click also
   toggles it via site.js's existing picker logic, for touch input and for
   pinning it open once the pointer moves away. */
.picker:hover .help-popover-panel[hidden],
.picker:focus-within .help-popover-panel[hidden] {
    display: block;
}

/* =============================================================
   ApGen — protocol search row and Protocol Details heading.
   ============================================================= */

/* Label, input and button on one line. */
.protocol-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

.protocol-search__label {
    color: var(--color-text);
    font-size: var(--text-base);
}

/* The Protocol Details card title with its Post Date value beside it,
   sharing the header row with the right-aligned action buttons. */
.protocol-details-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-6);
}

.protocol-details-heading__meta {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-base);
}

@media (max-width: 900px) {
    .protocol-search,
    .protocol-details-heading {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =============================================================
   Protocol Lookup — label and control rows, wrapping on narrow
   screens and at high zoom.
   ============================================================= */

.protocol-lookup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4) var(--space-5);
}

.protocol-lookup__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
}

.protocol-lookup__label {
    padding-top: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-base);
    white-space: nowrap;
}

.protocol-lookup__control {
    display: grid;
    gap: var(--space-1);
    width: 150px;
    min-width: 0;
}

/* Subject and Year sit side by side after their shared label. */
.protocol-lookup__selects {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-3);
    width: auto;
}

.protocol-lookup__select {
    display: grid;
    gap: var(--space-1);
    width: 150px;
    min-width: 0;
}

.protocol-lookup .select { max-width: none; }

/* The shared .field__error targets grid column 2, which would squeeze the input; keep it in column 1. */
.protocol-lookup .field__error { grid-column: 1; }

.protocol-lookup__note {
    flex-basis: 100%;
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-sm);
}

.protocol-lookup__actions { display: flex; }

@media (max-width: 900px) {
    .protocol-lookup__label { padding-top: 0; white-space: normal; }
    .protocol-lookup__row { flex-direction: column; width: 100%; }
    .protocol-lookup__control,
    .protocol-lookup__selects { width: 100%; flex-wrap: wrap; }
    .protocol-lookup__select { width: auto; flex: 1 1 160px; }
}

/* =============================================================
   Multi-select — a select-styled box over a panel of checkboxes,
   with a removable capsule for each ticked option. The checkboxes
   are the source of truth and post themselves; with no script the
   panel is just a visible checkbox list. site.js adds .is-enhanced,
   hides the panel behind the box and draws the capsules.
   ============================================================= */

.multi-select {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    min-width: 0;
}

/* Positioning context for the panel, which must not add to the card height. */
.multi-select__anchor { position: relative; }

.multi-select__box {
    text-align: left;
    font-weight: var(--weight-regular);
}

.multi-select__box[hidden],
.multi-select__panel[hidden] { display: none; }

.multi-select__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}

/* Enhanced: the panel overlays what is below the box instead of pushing it
   down. It sits above the page content but under the sticky header. */
.multi-select.is-enhanced .multi-select__panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: 2;
    max-height: 18rem;
    overflow-y: auto;
    box-shadow: var(--shadow-raise);
}

.multi-select__options {
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
}

.multi-select__option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 40px;
    padding: var(--space-1) var(--space-4);
    color: var(--color-text);
    cursor: pointer;
}

.multi-select__option:hover { background: var(--color-surface-alt); }

.multi-select__checkbox {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-header-blue);
    cursor: pointer;
}

.multi-select__capsules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.multi-select__capsules:empty { display: none; }

.multi-select__capsule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
    background: var(--color-surface-active);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.multi-select__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.multi-select__remove:hover { color: var(--color-action-primary); }

/* The circled cross is drawn with a border so it needs no icon asset. */
.multi-select__remove-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: var(--text-xs);
    line-height: 1;
}

/* =============================================================
   Sortable, filterable grid — opt in with data-grid on a
   .data-table. site.js turns each data-grid-col heading into a sort
   button plus a funnel button that reveals a filter box directly
   beneath that heading. Without the script the table is unchanged.
   ============================================================= */

.data-grid__head {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.data-grid__sort,
.data-grid__funnel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 24px;
    padding: 0 var(--space-1);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.data-grid__sort:hover,
.data-grid__funnel:hover { background: var(--color-border); }

.data-grid__funnel[aria-expanded="true"] { color: var(--color-action-primary); }

.data-grid__funnel .data-table__filter { margin-right: 0; }

/* Direction marker; the heading's aria-sort says the same in words. */
.data-grid__sort::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0;
}

.data-table__head-cell[aria-sort="ascending"] .data-grid__sort::after {
    border-bottom: 5px solid currentColor;
    opacity: 1;
}

.data-table__head-cell[aria-sort="descending"] .data-grid__sort::after {
    border-top: 5px solid currentColor;
    opacity: 1;
}

.data-grid__filter-row .data-table__head-cell {
    padding-top: 0;
    padding-bottom: var(--space-3);
    font-weight: var(--weight-regular);
}

.data-grid__filter-input { min-height: 32px; }

.data-table tr[hidden],
.data-grid__filter-row[hidden] { display: none; }
.empty-state[hidden] { display: none; }

/* Inside a scrolling body the heading is sticky, so the filter row sticks
   directly beneath it. */
.table-scroll--fixed-body .data-grid__filter-row th {
    top: var(--grid-head-height, 0);
    background: var(--color-surface-active);
}

/* Radio pair that switches which set a list shows; the page script submits
   its form when one is chosen. */
.mode-radios {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    border: none;
    min-inline-size: 0;
}

.mode-radios .radio-group__option { min-height: 24px; }

/* A table cell's buttons and checkbox, kept on one line so the column
   sizes to them instead of stacking them. */
.row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    white-space: nowrap;
}

/* =============================================================
   IDP Administration — additions for the IDP Admin screens
   ============================================================= */

/* The red asterisk in a required field's label. Decorative: the control
   itself carries required / aria-required. */
.field__required {
    color: var(--color-action-primary);
    margin-left: var(--space-1);
}

/* A field whose control is taller than one line (a textarea): the label
   aligns with the control's top edge instead of its middle. */
.field--top { align-items: start; }

/* The certificate: monospace so the PEM text reads as it will be pasted.
   Resizes vertically only. */
.input--mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: var(--text-sm);
    resize: vertical;
}

/* A select with a button beside it (the no-script "Show" button). */
.inline-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Radios with a 24px-tall hit area, so each choice is an adequate target. */
.radio-group--target .radio-group__option { min-height: 24px; }

/* The Yes / No words either side of a switch. */
.toggle-with-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    color: var(--color-text);
}

@media (max-width: 900px) {
    .toggle-with-text { justify-self: start; }
}

/* The IDP selector is wider than the default select so names are not cramped. */
.select--wide {
    min-width: 280px;
    max-width: 420px;
}

@media (max-width: 900px) {
    .select--wide { min-width: 0; }
}

/* Typeahead popup under a Protocol Lookup text box (ARIA combobox listbox). */
.protocol-lookup__control--suggest { position: relative; }

.protocol-lookup__suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    padding: var(--space-1) 0;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-raise);
}

.protocol-lookup__suggestions[hidden] { display: none; }

.protocol-lookup__suggestions li {
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
}

.protocol-lookup__suggestions li:hover,
.protocol-lookup__suggestions li[aria-selected="true"] { background: var(--color-surface-active); }

.protocol-lookup__suggestions li[aria-selected="true"] { outline: 2px solid var(--color-action-primary); outline-offset: -2px; }

/* Protocol Lookup grid: filter chips, the favorite star states and the Protocol Page details. */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.filter-chips__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    font-size: var(--text-sm);
}

.filter-chips__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    color: inherit;
    text-decoration: none;
}

.filter-chips__clear:hover { background: var(--color-border); }


/* One shape shows per state: outline when not a favorite, filled when it is. */
.favorite-toggle[aria-pressed="false"] .favorite-toggle__icon--filled,
.favorite-toggle[aria-pressed="true"] .favorite-toggle__icon--outline { display: none; }

.favorite-toggle[aria-busy="true"] { cursor: progress; opacity: 0.6; }

.favorite-toggle:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .favorite-toggle { color: ButtonText; }
    .favorite-toggle[aria-pressed="true"] { color: Highlight; forced-color-adjust: none; }
    .favorite-toggle:disabled { color: GrayText; }
}

.protocol-page__details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-5);
    margin: 0 0 var(--space-4);
}

.protocol-page__details dt { font-weight: var(--weight-medium); }
.protocol-page__details dd { margin: 0; }

/* Result grid look: funnel before the heading, plain (not underlined) sort links, Favorite as the last column,
   and a bare gold star instead of a bordered button. */
.data-table__head-cell--end,
.data-table__cell--end { text-align: right; }

.data-table__head-cell .data-grid__sort {
    text-decoration: none;
    font-weight: inherit;
}

.data-table__head-cell .data-grid__sort:hover { text-decoration: underline; }

.favorite-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.favorite-toggle:hover:not(:disabled) { background: var(--color-surface-active); }
.favorite-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.favorite-toggle .favorite-toggle__icon { width: 30px; height: 30px; }

/* The filled icon already fills with currentColor, so one token colours both outline and fill. */
.favorite-toggle[aria-pressed="true"] { color: var(--color-favorite); }

/* =============================================================
   Protocol Lookup search card — wireframe order on one line, no scrollbar:
   PI Name, Protocol Number, Subject & Year, then Search at the far right.
   Compact inputs, selects take the spare width so "Select Subject" and
   "Select Year" stay readable, labels and the button keep their size.
   Only when the card is too narrow for that does it wrap (never scrolls);
   phones (900px and under, handled above) stack.
   ============================================================= */

.card:has(> .protocol-lookup) { container-type: inline-size; }

@container (min-width: 1000px) {
    .protocol-lookup {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-3) var(--space-2);
    }
    .protocol-lookup__row { align-items: center; flex: 0 1 auto; gap: var(--space-2); }
    .protocol-lookup__label { padding-top: 0; font-size: var(--text-sm); }
    .protocol-lookup__control { width: 120px; flex: 0 1 120px; min-width: 70px; }
    .protocol-lookup__group { flex: 1 1 auto; }
    .protocol-lookup__selects { width: auto; flex: 1 1 auto; gap: var(--space-3); }
    .protocol-lookup__select { width: auto; flex: 1 1 160px; min-width: 125px; }
    .protocol-lookup .select { padding-left: var(--space-3); padding-right: var(--space-6); text-overflow: ellipsis; }
    .protocol-lookup__actions { flex: 0 0 auto; }

    /* One-line layout: float the error under its box so the box keeps its size and position. */
    .protocol-lookup__control,
    .protocol-lookup__select { position: relative; }
    /* The floated error takes no space, so make room for up to two lines inside the card. */
    .protocol-lookup:has(.field__error) { padding-bottom: calc(var(--space-3) + 3rem); }
    .protocol-lookup .field__error {
        position: absolute;
        top: 100%;
        left: 0;
        width: max-content;
        max-width: 360px;
        margin-top: var(--space-1);
    }
}

/* =============================================================
   Priority List (Protocols tab)
   The five-step hierarchy browser, the
   results table and its admin controls. Tokens only.
   ============================================================= */

.priority-icon { width: 20px; height: 20px; flex: none; }

.priority-list__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.priority-list__clear {
    min-height: 28px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

.priority-list__current { margin-top: var(--space-4); }
.priority-list__current-line { margin: 0 0 var(--space-1); }
.priority-list__path-item { color: var(--color-heading); }

/* ---------- The five steps ---------- */

.priority-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
}

.priority-steps__column {
    align-self: stretch;
    min-width: 0;
    border: 1px solid var(--color-heading);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}
.priority-steps__column[aria-disabled="true"] { border-color: var(--color-border); }

.priority-steps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 36px;
    padding: var(--space-1) var(--space-2) 0 var(--space-3);
}

.priority-steps__title {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
}
.priority-steps__column[aria-disabled="true"] .priority-steps__title { color: var(--color-text-disabled); }

.priority-steps__tools { display: flex; align-items: center; gap: var(--space-1); }

.priority-steps__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    text-decoration: none;
}
.priority-steps__tool--add { color: var(--color-heading); }
.priority-steps__tool--delete { color: var(--color-action-primary); }
.priority-steps__tool:hover { background: var(--color-surface-active); }
.priority-steps__tool:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }
.priority-steps__tool:disabled,
.priority-steps__tool:disabled:hover {
    color: var(--color-text-disabled);
    background: none;
    cursor: not-allowed;
}

.priority-steps__filter { padding: var(--space-2) var(--space-2) var(--space-1); }
.priority-steps__search { min-height: 32px; font-size: var(--text-sm); }

.priority-steps__body {
    position: relative;
    min-height: 11.5rem;
}

.priority-steps__list {
    margin: 0;
    padding: 0;
    max-height: 11.5rem;
    overflow-y: auto;
    list-style: none;
}
.priority-steps__item[hidden] { display: none; }

.priority-steps__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 28px;
    padding: var(--space-1) var(--space-3);
    color: var(--color-text);
    text-decoration: none;
}
.priority-steps__option:hover { background: var(--color-surface-active); }
.priority-steps__option:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.priority-steps__option[aria-current="true"],
.priority-steps__option[aria-current="true"]:hover {
    background: var(--color-header-blue);
    color: var(--color-text-on-brand);
}

.priority-steps__empty {
    margin: 0;
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.priority-steps__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
}
.priority-steps__skeleton-row {
    display: block;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-active);
}

.priority-steps__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--space-2);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.priority-steps__arrow {
    display: block;
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--color-text);
    border-right: 3px solid var(--color-text);
    transform: rotate(45deg);
}

/* ---------- Results ---------- */

.priority-results__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.priority-results__status { margin-bottom: var(--space-3); color: var(--color-text); }
.priority-results__status:empty { display: none; }

.priority-add { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.priority-add__row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.priority-add__input { width: 14rem; }
.priority-add__hint { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.priority-add__error:empty { display: none; }

.priority-table__priority { white-space: nowrap; }
.priority-table__number { color: var(--color-action-primary); font-weight: var(--weight-medium); }

.priority-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    margin-right: var(--space-2);
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-heading);
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.priority-handle:hover { background: var(--color-surface-active); }
.priority-handle:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }

.priority-table tr.is-dragging { opacity: 0.5; }

.priority-table__remove {
    min-height: 28px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* Without script the plus or trash is a link back to this page with the dialog requested. The closed dialog then shows as a
   plain form in the page; with script, site.js opens it as a modal and this rule stops applying. */
.priority-dialog[data-dialog-open-on-load="true"]:not([open]) {
    display: block;
    position: static;
    margin: var(--space-4) 0;
    border: 1px solid var(--color-border);
}

@media (max-width: 900px) {
    .priority-steps {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }

    .priority-steps__arrow {
        justify-self: center;
        transform: rotate(135deg);
    }

    .priority-add { align-items: stretch; width: 100%; }
    .priority-add__row { justify-content: flex-start; }
}

/* ---------- Priority List: confirmations and alerts ---------- */

.priority-alert {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-action-primary);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-action-primary);
    font-weight: var(--weight-medium);
}

/* Subject marks its selection with a check; the four steps below use the filled highlight above. */
.priority-steps__option--checked[aria-current="true"],
.priority-steps__option--checked[aria-current="true"]:hover {
    background: none;
    color: var(--color-heading);
    font-weight: var(--weight-bold);
}

.priority-steps__nomatch {
    margin: 0;
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.priority-steps__nomatch[hidden] { display: none; }

.priority-load-failed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 0; }
.priority-load-failed__message { margin: 0; }

/* While a selection loads in place, the steps and results dim and show a spinner; the page stays where it is. */
[data-priority-root][aria-busy="true"] .priority-list,
[data-priority-root][aria-busy="true"] .priority-results {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}
[data-priority-root][aria-busy="true"] .priority-list::after,
[data-priority-root][aria-busy="true"] .priority-results::after {
    content: "";
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-border-strong);
    border-top-color: var(--color-action-primary);
    border-radius: 50%;
    animation: priority-spin 0.8s linear infinite;
}
@keyframes priority-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    [data-priority-root][aria-busy="true"] .priority-list::after,
    [data-priority-root][aria-busy="true"] .priority-results::after { animation: none; }
}

.priority-dialog__impact { margin: var(--space-3) 0; }
.priority-dialog__impact-title { margin: 0 0 var(--space-1); font-weight: var(--weight-medium); }
.priority-dialog__impact-list { margin: 0; padding-left: var(--space-5); }
.priority-dialog__details { margin-top: var(--space-2); font-size: var(--text-sm); }
.priority-dialog__textarea { width: 100%; resize: vertical; }
.priority-dialog__hint { color: var(--color-text-muted); font-size: var(--text-sm); }
.priority-dialog__remove { margin-right: auto; }

/* Active / Inactive segmented toggle (wireframe): selected side is blue for Active, red for Inactive. */
.status-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    white-space: nowrap;
}

.status-toggle__option {
    padding: 2px var(--space-3, 0.75rem);
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    border: 0;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

button.status-toggle__option { cursor: pointer; }
button.status-toggle__option:hover,
button.status-toggle__option:focus-visible { color: var(--color-text); text-decoration: underline; }

.status-toggle__option--active.is-selected { background: #1f5fbf; color: #fff; }
.status-toggle__option--inactive.is-selected { background: var(--color-action-primary); color: #fff; }

.status-toggle > form { display: flex; margin: 0; }
.status-toggle__option { text-decoration: none; }
a.status-toggle__option, label.status-toggle__option { cursor: pointer; }
.status-toggle__option.is-selected,
.status-toggle__option:has(input:checked) { background: #1f5fbf; color: #fff; }
.status-toggle__option--inactive.is-selected,
.status-toggle__option--inactive:has(input:checked) { background: var(--color-action-primary); color: #fff; }
.status-toggle__option:focus-visible,
.status-toggle__option:has(input:focus-visible) { outline: 2px solid var(--color-text); outline-offset: -2px; }
a.status-toggle__option:hover { text-decoration: underline; }
.status-toggle__option { position: relative; }
.status-toggle__option > input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.network-status > .status-toggle { display: inline-flex; margin-top: .45rem; }

button.pagination__link{font:inherit;border:0;background:transparent;cursor:pointer}button.pagination__link:disabled{opacity:.45;cursor:default}button.pagination__link[aria-current="page"]{background:var(--color-surface-alt);font-weight:700}