/* The staff application.
   Loaded after core-foundation.css on staff pages only. A theme never replaces
   this file: the staff interface is product, not presentation.

   Split out of public/assets/site.css. Placement is recorded in
   docs/theme-contract/stylesheet-ownership.json; source order within this file
   is the order those rules had in site.css. Rules whose class the attribution
   marks `duplicated` also appear in theme.css, so that each surface owns its
   own copy and neither is held hostage by the other. */

/* The staff application's palette.
   The `:root` in core-foundation.css is the core default for the public site:
   an installation configures against it, and the first customer's warm sand and
   deep forest are what it still says. The staff application is product, not
   presentation, so it cannot inherit that — it reads fourteen of the sixteen
   tokens across 604 of its rule blocks, which is how one customer's brand came
   to paint every installation's staff screens.

   The values, not the six hundred rules, are what is wrong, so the values are
   what this redeclares. `#0a0a0a`, `#fcfcfc` and `#7c8152` are the product's
   own artwork; the rest of the ramp is derived from them and held to WCAG AA by
   tests/run.php.

   The brand accent is in `--olive-light`, not in `--olive`, and that placement
   is the measurement's doing. `--olive` is a text-bearing surface here — 21
   rules put a literal white on it and 12 more use it as link text on paper — so
   `#7c8152` in that slot computes 4.00:1 against both, under the 4.5:1 AA floor
   for body text. `--olive-light` is the accent the artwork describes, so the
   brand hex goes there unmodified and `--olive` is derived from it at the same
   hue and chroma, dark enough to carry white. The alternative was to
   approximate the brand to satisfy a constraint the slot imposes; this way the
   exact hex ships.

   `--shell` and `--display` are deliberately absent. One is a layout width and
   the other a typeface; neither is a brand colour, and the staff typeface is
   not changing, so both go on inheriting from core-foundation.css.

   `@entry-point` is read by bin/split-stylesheet.php and dropped by every
   browser. A bare second `:root` here would be placed by the same rule that
   places every other class-free selector — into core-foundation.css, which the
   public site loads — and would repaint the site this block exists to leave
   alone. See the at-rule's own note in the generator. */

:root {
    --ink: #0a0a0a;
    --ink-2: #141414;
    --ink-3: #1f1f1f;
    --paper: #fcfcfc;
    --paper-2: #f1f1ef;
    --muted: #6b6d68;
    --olive: #6f7349;
    --olive-light: #7c8152;
    --signal: #8f9560;
    --signal-dark: #5f6440;
    --tan: #b0b48f;
    --line: rgb(10 10 10 / 20%);
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.section {
    padding-block: clamp(76px, 9vw, 140px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: var(--display);
    font-size: 16px;
    font-stretch: condensed;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.brand-logo {
    display: block;
    width: 210px;
    line-height: 0;
}

.brand-logo-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Both headers are a fixed height, so a logo must be clamped by height rather
   than by the container's width. Applies to every configured logo, not only a
   bundled one: an uploaded square image would otherwise render 210px tall in an
   84px header. Footer, ticket and kiosk contexts are deliberately unclamped —
   they size to the container. */

.staff-app-header .brand-logo-image {
    width: auto;
    max-width: 100%;
}

.staff-app-header .brand-logo-image {
    max-height: 48px;
}

/* Shown when an installation has configured no logo. One line, clipped at the
   width its container gives it, so a long public name cannot grow the header. */

/* A wordmark is text, so it sizes to what it says rather than to the width an
   image logo was given. The cap stops a long public name or a wide display face
   crowding out the navigation beside it, and the ellipsis below still handles
   anything past that. */

.brand-wordmark {
    display: block;
    width: max-content;
    max-width: min(340px, 42vw);
}

.brand-logo-wordmark {
    display: block;
    overflow: hidden;
    font-family: var(--display);
    font-size: 20px;
    font-stretch: condensed;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.flash {
    position: relative;
    z-index: 45;
    padding: 12px 0;
    color: white;
    background: var(--olive);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.flash-success {
    background: #52613c;
}

.read-only-banner .shell {
    display: flex;
    gap: 12px 24px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.location-compliance-flags {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.eyebrow,
.section-index {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eyebrow i {
    width: 22px;
    height: 1px;
    background: currentColor;
}

.button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.09em;
    line-height: 1.1;
    text-transform: uppercase;
    transition: color 160ms ease, background 160ms ease, border 160ms ease, transform 160ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0) scale(0.98);
}

.button-primary {
    color: var(--ink);
    background: var(--signal);
}

.button-primary:hover {
    background: var(--signal-dark);
}

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

.button-danger {
    color: white;
    border-color: #7b281b;
    background: #7b281b;
}

.button-danger:hover {
    background: #5f1e14;
}

.button-disabled {
    color: rgb(255 255 255 / 55%);
    border-color: rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 8%);
}

.button-full {
    width: 100%;
}

.button[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.text-link span {
    color: var(--signal);
    font-size: 18px;
    transition: transform 160ms ease;
}

.text-link:hover span {
    transform: translateX(4px);
}

.section-index.light {
    color: rgb(255 255 255 / 46%);
}

.back-link {
    align-self: flex-start;
    color: rgb(255 255 255 / 72%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.back-link.dark {
    color: var(--muted);
}

.team-table i {
    width: 7px;
    height: 7px;
    background: currentColor;
}

.team-olive {
    color: var(--olive-light);
}

.team-tan {
    color: var(--tan);
}

.team-black {
    color: #afb0aa;
}

.team-blue {
    color: #8ba5b0;
}

/* The fifth team identifier, and the only one measured against every ground it
   lands on. `team_class()` puts these on the dark event and ticket panels, on
   the light booking option, event dress-code card and dress-code dialog, and on
   the near-white staff tables, and the four above it were only ever chosen for
   the dark ones: on a light ground olive is 2.8:1 and tan, black and blue are
   between 1.7:1 and 2.2:1, all of them under the 3:1 a 7px square carrying
   meaning has to meet. #d2322d is 3.26:1 or better on all seven of those grounds
   and 3.62:1 on the dark panel, so it is the one identifier that passes
   everywhere rather than the one that matches the others' arithmetic.
   tests/checks/neutral-content-defaults.php computes it from this declaration. */

.team-red {
    color: #d2322d;
}

/* Teams six to nine of the nine identifiers (core 0.27.0, theme API 0.17), so
   the eight teams an event can have can always differ. Orange and purple clear
   3:1 on the light and dark grounds alike: the design's #c96200 was 2.64:1 on
   `--paper`, so orange is the darker #b35600 (3.25:1 there, 3.68:1 on the dark
   panel). No yellow that still reads as yellow
   reaches 3:1 on a light ground, and white can't, so their marks carry a 1px
   #4b4e44 keyline (below) that gives the square or bar its edge; the team's
   name beside it carries the meaning. tests/checks/neutral-content-defaults.php
   computes every figure from these declarations. */

.team-yellow {
    color: #b38f00;
}

.team-orange {
    color: #b35600;
}

.team-purple {
    color: #8e5bc4;
}

.team-white {
    color: #ffffff;
}

.team-yellow i,
.team-white i {
    box-shadow: 0 0 0 1px #4b4e44;
}

.staff-toolbar h1 {
    margin: 12px 0 16px;
    font-family: var(--display);
    font-size: clamp(54px, 7vw, 90px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-transform: uppercase;
}

.form-errors {
    margin: 0 0 28px;
    padding: 16px 18px;
    border-left: 3px solid #a64028;
    color: #772a1d;
    background: #eddbd3;
}

.login-error {
    margin: 0 0 28px;
    padding: 16px 18px;
    border-left: 3px solid #a64028;
    color: #772a1d;
    background: #eddbd3;
}

.form-errors strong {
    display: block;
    font-size: 13px;
}

.form-errors p {
    margin: 2px 0 0;
    font-size: 12px;
}

.event-form fieldset {
    margin: 0 0 46px;
    padding: 0;
    border: 0;
}

.event-form legend {
    width: 100%;
    margin-bottom: 22px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 850;
    text-transform: uppercase;
}

/* A visually hidden legend keeps .sr-only's size: the rule above would
   otherwise stretch it to its positioned ancestor's width and scroll the
   page sideways. */

.event-form legend.sr-only {
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.event-form legend span {
    margin-right: 14px;
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
}

/* The staff baseline (staff forms audit D2, 2026-10-16): a safety net, never
   the pattern. A staff control is styled by the wrapper it sits in
   (.staff-field, .staff-settings-form, .form-grid, .staff-form-controls, a
   filter field), and one written outside every wrapper used to get the
   browser's own select, textarea or date box. This gives such a control the
   staff field's look. Both parts are :where(), so the rule has no
   specificity and every wrapper rule outranks it: no styled control changes.
   A filter bar's controls are left out, because their wrappers size them to
   the bar and set no padding of their own. The staff page names the sheet:
   it is the leftmost class, and the bar is named by its class attribute so
   that it decides nothing. */

:where(.staff-page) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):where(:not([class~="filter-bar"] *)) {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #aaa69b;
    border-radius: 0;
    background: white;
    font: inherit;
    font-size: 14px;
}

:where(.staff-page) :where(textarea) {
    width: 100%;
    resize: vertical;
}

:where(.staff-page) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):where(:not([class~="filter-bar"] *)):where(:focus-visible) {
    border-color: var(--olive);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-grid .form-span-two {
    grid-column: 1 / -1;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.login-panel label,
.team-builder-card label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-grid label > span {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-panel label > span,
.team-builder-card label > span,
.file-field > span,
.event-when-inputs label > span,
.timing-rule label > span,
.timing-rule-heading > span {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-grid label > span em {
    margin-left: 6px;
    color: #96998f;
    font-style: normal;
    font-weight: 600;
}

.file-field > span em {
    margin-left: 6px;
    color: #96998f;
    font-style: normal;
    font-weight: 600;
}

.field-requirement,
.event-form .field-requirement {
    margin-left: 6px;
    color: #40503b;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.form-grid input,
.form-grid textarea,
.form-grid select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.login-panel input,
.team-builder-card input,
.team-builder-card textarea,
.team-builder-card select,
.status-form select,
.event-when-inputs input,
.event-when-inputs select,
.timing-rule input,
.timing-rule select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.form-grid textarea {
    min-height: 110px;
    resize: vertical;
}

.form-grid .has-error input,
.form-grid .has-error textarea,
.has-error input {
    border-color: #a64028;
}

.event-when-inputs .has-error select,
.timing-rule [aria-invalid="true"] {
    border-color: #a64028;
}

.form-grid label small {
    color: var(--muted);
    font-size: 10px;
}

.team-builder-card label small {
    color: var(--muted);
    font-size: 10px;
}

.input-suffix {
    display: flex;
    align-items: stretch;
}

.input-suffix input {
    flex: 1;
    min-width: 0;
}

.input-suffix > span {
    display: grid;
    min-width: 48px;
    padding: 0 12px;
    place-items: center;
    border: 1px solid #cbc8bf;
    border-left: 0;
    color: var(--ink);
    background: #ebe7dc;
    font-weight: 800;
}

.form-grid label.has-error > small:last-child {
    color: #9b3424;
}

.team-builder-card label.has-error small:last-child,
.navigation-setting-card label.has-error small:last-child,
.event-when-inputs label.has-error small:last-child,
.timing-rule > small {
    color: #9b3424;
}

.field-error {
    margin: 9px 0 0;
    color: #9b3424;
    font-size: 11px;
}

.terms-check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 9px;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
}

.terms-check input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--signal);
}

.terms-check > span {
    min-width: 0;
}

.terms-check > span > small {
    display: block;
    margin-top: 6px;
    line-height: 1.45;
}

/* The staff sign-in box's hint for the passkey default (core 0.26.0) is
   hidden until passkeys.mjs finds WebAuthn; the rule above would show it. */

.login-panel .terms-check > span > small[hidden] {
    display: none;
}

/* A help or error note written as a direct child of .terms-check rather than
   inside its <span>. The grid is `20px 1fr`, so auto-placement put such a note in
   the checkbox gutter -- twenty pixels wide -- where it wrapped one or two
   characters per line. That is what "Set up at least one operational day before
   enabling automatic checkout." was doing under the automatic-checkout box. It is
   the rule above's sibling and not a replacement for it: both spellings of the
   note appear across the staff forms, and this puts them in the same column. */

.terms-check > small {
    grid-column: 2;
    margin-top: 6px;
    line-height: 1.45;
}

/* A tick box written straight into a staff .form-grid, such as "Remove the
   current event image". .form-grid label makes every label a column, and
   .form-grid label > span sets its text in small capitals, so the box sat
   above its words in capitals. The words take the .terms-check label's own
   text style, so a form that restyles .terms-check keeps it. Direct children
   only: a box nested deeper (the check-in timings toggle, a ticket card's
   boxes) has its own layout. Staff pages only: the public site never
   reported it. Beside a taller field in the same grid row, the label's rows
   start at its top, so an error note stays under the box's words rather
   than drifting down the stretched label. */

.staff-page .form-grid > label.terms-check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-content: start;
    align-items: start;
}

.staff-page .form-grid > label.terms-check > span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.staff-page .form-grid > label.terms-check input {
    min-height: 0;
    padding: 0;
}

/* The same check line on the staff sign-in panel ("Keep me signed in…"),
   whose .login-panel label and input rules made it a column: the box sat far
   above its words, in small capitals, in a 48-pixel-tall input box. */

.login-panel label.terms-check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.login-panel label.terms-check > span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.login-panel label.terms-check input {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
}

/* Tickets and messages */

.message-section {
    min-height: 75vh;
    padding-top: 150px;
}

.status-card h1 {
    margin: 10px 0 12px;
    font-family: var(--display);
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-transform: uppercase;
}

.status-card p {
    max-width: 610px;
    margin: 0;
    color: var(--muted);
}

.status-card {
    max-width: 780px;
    padding: clamp(38px, 7vw, 86px);
    border-left: 4px solid var(--signal);
    background: var(--paper-2);
}

@media (max-width: 620px) {
    .add-on-checkout .button {
        width: 100%;
    }
}

.status-card .button {
    margin-top: 30px;
}

.error-code {
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Staff */

.staff-page {
    --staff-app-header-height: 72px;
    --staff-sidebar-width: 252px;
    --staff-content-max-width: 1240px;
    --staff-content-gutter: 32px;
    padding-top: var(--staff-app-header-height);
}

.staff-page .shell {
    width: min(
        var(--staff-content-max-width),
        calc(100% - var(--staff-content-gutter) - var(--staff-content-gutter))
    );
}

.staff-app-header {
    position: fixed;
    z-index: 60;
    top: 0;
    right: 0;
    left: 0;
    height: var(--staff-app-header-height);
    color: white;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    background: var(--ink);
}

.staff-app-header-inner {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 28px;
}

/* `flex: 0 1 auto` and `min-width: 0`, where this was `flex: 0 0 auto`, because
   the group now holds the installation's name as well as the product mark, and
   that name is customer-supplied and unbounded. A group that cannot shrink has
   nowhere to put an over-long one: it grows instead, and pushes the navigation
   off the compact header. Shrinking lands entirely on the name — the mark's own
   box stays `flex: 0 0 auto` below — which is what makes its ellipsis fire. */

.staff-app-brand-group {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    gap: 16px;
    align-items: center;
}

.staff-app-brand {
    width: 190px;
    flex: 0 0 auto;
}

/* The product mark. Unlike a customer logo it is one known file at one known
   ratio, so it fills the width its link is given and takes its height from
   that: 190px wide is 38.7px tall, inside a 72px header. */

.product-lockup {
    display: block;
    width: 100%;
    height: auto;
}

/* The installation's public name, beside the product mark rather than inside
   its link. It is customer-supplied and unbounded, so it is bounded twice: the
   cap stops a long name dominating a wide header, and `min-width: 0` lets it
   give way below that on a narrow one, since a flex item refuses to shrink
   past its content otherwise. Either bound is a box the ellipsis can overflow,
   which is the whole reason the name is clipped rather than pushing the
   navigation across the header. */

.staff-app-installation {
    overflow: hidden;
    min-width: 0;
    max-width: 220px;
    color: rgb(255 255 255 / 70%);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-app-public-site {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 14px;
    color: white;
    border: 1px solid rgb(255 255 255 / 24%);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.staff-app-public-site:hover,
.staff-app-public-site:focus-visible {
    border-color: var(--signal);
    background: rgb(255 255 255 / 8%);
}

.staff-app-menu-toggle {
    display: none;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    color: white;
    border: 1px solid rgb(255 255 255 / 18%);
    cursor: pointer;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.staff-app-menu-icon {
    position: relative;
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}

.staff-app-menu-icon span {
    position: absolute;
    width: 12px;
    height: 2px;
    background: var(--signal);
    transition: transform 180ms ease;
}

.staff-app-menu-icon span:last-child {
    transform: rotate(90deg);
}

.staff-app-menu-toggle[aria-expanded="true"] .staff-app-menu-icon span:first-child {
    transform: rotate(45deg);
}

.staff-app-menu-toggle[aria-expanded="true"] .staff-app-menu-icon span:last-child {
    transform: rotate(-45deg);
}

.staff-nav {
    position: fixed;
    z-index: 50;
    top: var(--staff-app-header-height);
    bottom: 0;
    left: 0;
    width: var(--staff-sidebar-width);
    padding: 22px 16px 30px;
    overflow-y: auto;
    color: white;
    border-right: 1px solid rgb(255 255 255 / 10%);
    background: var(--ink-2);
}

.staff-nav nav {
    display: grid;
    gap: 24px;
}

.staff-nav-public-site {
    display: none;
}

.staff-nav-group {
    display: grid;
    gap: 8px;
}

.staff-nav-group + .staff-nav-group {
    padding-top: 22px;
    border-top: 1px solid rgb(255 255 255 / 10%);
}

.staff-nav-group h2 {
    margin: 0;
    padding: 0 10px;
    color: rgb(255 255 255 / 42%);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.staff-nav-group > div {
    display: grid;
    gap: 3px;
}

.staff-nav-group a {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0 10px;
    color: rgb(255 255 255 / 70%);
    border-left: 3px solid transparent;
    font-size: 13px;
    font-weight: 700;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.staff-nav-group a:hover,
.staff-nav-group a.is-active {
    color: white;
    border-left-color: var(--signal);
    background: rgb(255 255 255 / 7%);
}

.staff-nav-group a.staff-nav-restricted {
    color: #ff6d5c;
    font-weight: 900;
}

.staff-nav-group a.staff-nav-restricted:hover,
.staff-nav-group a.staff-nav-restricted.is-active {
    color: #ff8d80;
    border-left-color: #ff5c4d;
    background: rgb(255 92 77 / 8%);
}

.staff-nav-version {
    display: block;
    margin: 28px 10px 0;
    color: rgb(255 255 255 / 34%);
    font-size: 11px;
}

.staff-nav-mobile-session {
    display: none;
}

.staff-nav-session {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.staff-nav-session > a {
    max-width: 180px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-nav-session button {
    min-height: 36px;
    padding: 0 10px;
    color: white;
    border: 1px solid rgb(255 255 255 / 18%);
    cursor: pointer;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
}

.staff-page #main-content,
.staff-page > .read-only-banner,
.staff-page > .staff-alert-stack {
    margin-left: var(--staff-sidebar-width);
}

@media (max-width: 1280px) {
    .staff-page {
        --staff-content-gutter: 24px;
        padding-top: 0;
    }

    .staff-app-header {
        position: relative;
        height: 68px;
    }

    .staff-app-header-inner {
        gap: 12px;
        padding: 0 18px;
    }

    .staff-app-brand-group {
        gap: 12px;
    }

    .staff-app-brand {
        width: 140px;
    }

    .staff-app-public-site {
        display: none;
    }

    /* The brand group beside it can now shrink, and flex would otherwise take
       the same liberty here: the toggle is the only way into the navigation on
       a compact header, so it keeps its size and the installation's name gives
       way instead. */

    .staff-app-menu-toggle {
        display: inline-flex;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .staff-app-header .staff-nav-session {
        display: none;
    }

    .staff-nav {
        position: relative;
        top: auto;
        bottom: auto;
        display: block;
        width: auto;
        max-height: none;
        padding: 20px 18px 24px;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid rgb(255 255 255 / 10%);
    }

    .has-js .staff-nav:not(.is-open) {
        display: none;
    }

    .staff-nav.is-open {
        animation: staff-menu-open 180ms ease-out both;
    }

    .staff-nav nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .staff-nav-public-site {
        display: flex;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        color: white;
        border: 1px solid rgb(255 255 255 / 22%);
        font-size: 11px;
        font-weight: 850;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .staff-nav-mobile-session {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 22px;
        padding: 18px 10px 0;
        border-top: 1px solid rgb(255 255 255 / 10%);
    }

    .staff-nav-mobile-session > a {
        min-width: 0;
        overflow: hidden;
        color: white;
        font-size: 13px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .staff-nav-mobile-session button {
        min-height: 36px;
        padding: 0 10px;
        color: white;
        border: 1px solid rgb(255 255 255 / 18%);
        cursor: pointer;
        background: transparent;
        font-size: 12px;
        font-weight: 800;
    }

    .staff-nav-group + .staff-nav-group {
        padding-top: 0;
        padding-left: 18px;
        border-top: 0;
        border-left: 1px solid rgb(255 255 255 / 10%);
    }

    .staff-page #main-content,
    .staff-page > .read-only-banner,
    .staff-page > .staff-alert-stack {
        margin-left: 0;
    }
}

@media (max-width: 620px) {
    .staff-page {
        --staff-content-gutter: 16px;
    }

    .staff-app-header-inner {
        gap: 10px;
        padding: 0 14px;
    }

    .staff-app-menu-toggle {
        padding: 0 9px;
        font-size: 12px;
    }

    .staff-nav nav {
        grid-template-columns: 1fr;
    }

    .staff-nav-group + .staff-nav-group {
        padding-top: 18px;
        padding-left: 0;
        border-top: 1px solid rgb(255 255 255 / 10%);
        border-left: 0;
    }
}

.staff-login-page .site-header,
.staff-page .site-header {
    position: absolute;
    color: white;
    background: var(--ink);
}

.staff-login {
    min-height: 100vh;
    padding-top: 150px;
    color: white;
    background:
        linear-gradient(90deg, var(--ink) 0%, var(--ink) 55%, var(--paper) 55%, var(--paper) 100%);
}

.staff-login-grid {
    display: grid;
    grid-template-columns: 1fr 0.82fr;
    gap: clamp(80px, 12vw, 190px);
    align-items: center;
}

.staff-login-intro h1 {
    margin: 10px 0 18px;
    font-family: var(--display);
    font-size: clamp(62px, 8vw, 112px);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.84;
    text-transform: uppercase;
}

.staff-restricted-label {
    color: #ff5c4d;
    font-weight: 900;
}

.staff-login-intro > p {
    max-width: 480px;
    color: rgb(255 255 255 / 55%);
}

.security-note {
    display: flex;
    max-width: 430px;
    gap: 13px;
    align-items: flex-start;
    margin-top: 55px;
    padding-top: 20px;
    border-top: 1px solid rgb(255 255 255 / 13%);
    color: rgb(255 255 255 / 38%);
    font-size: 10px;
}

.security-note i {
    color: var(--signal);
    font-style: normal;
}

.login-panel {
    padding: 42px;
    color: var(--ink);
    background: white;
    box-shadow: 0 24px 80px rgb(0 0 0 / 20%);
}

.login-panel h2 {
    margin: 7px 0 28px;
    font-family: var(--display);
    font-size: 34px;
    font-weight: 900;
    text-transform: uppercase;
}

.login-panel form {
    display: grid;
    gap: 18px;
}

.login-panel .button {
    margin-top: 5px;
}

.login-panel > .text-link {
    margin-top: 26px;
}

.passkey-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}

.passkey-divider::before,
.passkey-divider::after {
    width: 100%;
    height: 1px;
    background: var(--line);
    content: "";
}

.passkey-status {
    margin-top: 14px;
}

/* Passkey first (core 0.18.0): the staff sign-in and "Confirm it's you"
   pages lead with the passkey on a device that used one last
   (docs/design-language.md, "Passkey first"). passkeys.mjs drives the states
   through data-passkey-state on .passkey-first. */

.passkey-first[hidden],
.passkey-first [hidden] {
    display: none;
}

.passkey-first .passkey-divider span {
    flex: none;
    white-space: nowrap;
}

.passkey-first-confirm {
    max-width: 40rem;
    margin: 4px 0 0;
}

.passkey-first-confirm .passkey-divider {
    margin: 28px 0 8px;
}

.passkey-first-sign-in[data-passkey-placement="first"] {
    margin-bottom: 20px;
}

.button.passkey-first-button {
    gap: 14px;
}

.passkey-first-confirm .button.passkey-first-button {
    width: 100%;
    min-height: 64px;
    font-size: 13px;
}

/* The ink ring: the signal ring is too faint on the signal fill, as on the
   stale-session banner's button. */

.button-primary.passkey-first-button:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

/* A key, drawn here rather than as inline vector art: a ring and its shaft. */

.passkey-first-key {
    position: relative;
    display: inline-block;
    flex: none;
    width: 22px;
    height: 12px;
}

.passkey-first-key::before {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 2.5px solid currentColor;
    border-radius: 50%;
    content: "";
}

.passkey-first-key::after {
    position: absolute;
    top: 5px;
    left: 11px;
    width: 11px;
    height: 2.5px;
    background: currentColor;
    box-shadow: 7px 2px 0 -0.25px currentColor;
    content: "";
}

.passkey-first[data-passkey-state="waiting"] .passkey-first-button[disabled],
.passkey-first[data-passkey-state="auto-starting"] .passkey-first-button[disabled] {
    cursor: progress;
    opacity: 1;
}

.passkey-first[data-passkey-state="waiting"] .passkey-first-key,
.passkey-first[data-passkey-state="auto-starting"] .passkey-first-key {
    animation: passkey-first-waiting 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .passkey-first[data-passkey-state] .passkey-first-key {
        animation: none;
    }
}

.passkey-first-status {
    margin: 12px 0 0;
    color: var(--ink);
    font-size: 0.95rem;
}

/* A failure reads as the sign-in page's own errors do. */

.passkey-first[data-passkey-state="failed"] .passkey-first-status {
    padding: 16px 18px;
    border-left: 3px solid #a64028;
    color: #772a1d;
    background: #eddbd3;
    font-size: 12px;
    font-weight: 700;
}

.passkey-first-cancelled {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 14px 16px;
    border-left: 4px solid var(--signal);
    background: var(--paper-2);
}

.passkey-first-cancelled p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.passkey-first-confirm .passkey-first-cancelled {
    margin-bottom: 28px;
}

.passkey-first-sign-in .passkey-first-cancelled {
    margin: 0 0 4px;
}

.button.passkey-first-retry {
    min-height: 44px;
    margin-top: 0;
    padding: 10px 16px;
    font-size: 11px;
}

.confirm-identity .staff-toolbar,
.confirm-identity > .form-errors,
.confirm-identity-form {
    max-width: 40rem;
}

.confirm-identity-form .staff-field-help {
    margin: 10px 0 0;
}

.two-factor-panel {
    max-width: 560px;
}

.setup-steps {
    display: grid;
    gap: 16px;
    margin: 0 0 26px;
    padding-left: 22px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

.setup-steps .text-link {
    display: inline;
}

.two-factor-qr {
    display: grid;
    width: fit-content;
    max-width: 100%;
    margin: 14px auto 18px;
    padding: 12px;
    place-items: center;
    border: 1px solid var(--line);
    background: white;
}

.two-factor-qr img {
    width: 240px;
    height: auto;
}

.two-factor-manual {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    background: rgb(8 11 8 / 4%);
}

.two-factor-manual summary {
    cursor: pointer;
    color: var(--olive);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.two-factor-manual > p {
    margin: 12px 0;
    color: var(--muted);
    font-size: 11px;
}

.two-factor-secret {
    display: block;
    margin-top: 10px;
    padding: 12px;
    overflow-wrap: anywhere;
    color: white;
    background: var(--ink);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-align: center;
}

.two-factor-help {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
}

.login-error {
    font-size: 12px;
}

.preview-notice {
    padding: 12px 14px;
    color: #625b3e;
    background: #eee9d1;
    font-size: 11px;
}

.staff-shell {
    min-height: 100vh;
    padding: 48px 0 96px;
}

.staff-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.staff-toolbar .back-link {
    display: block;
    margin-bottom: 18px;
}

.staff-toolbar h1 {
    font-size: clamp(38px, 4vw, 52px);
}

/* A long name (a template, an event) in a staff toolbar heading wraps inside
   its section instead of running past it, as at 1440 pixels on the template
   delete page. The text column may shrink beside the toolbar's actions, which
   keep their own width, whether in .staff-toolbar-actions or, on the waiver
   register and audit trail, .event-form-actions. */

.staff-page .staff-toolbar > div:not(.staff-toolbar-actions):not(.event-form-actions) {
    min-width: 0;
}

.staff-page .staff-toolbar h1 {
    overflow-wrap: anywhere;
}

.staff-page-intro {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.staff-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.staff-section {
    margin-top: 42px;
}

.staff-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.staff-section-heading h2 {
    margin: 4px 0 0;
    font-family: var(--display);
    font-size: 27px;
    font-weight: 900;
    text-transform: uppercase;
}

.staff-section-heading > span:not(.status-pill) {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.passkey-list {
    display: grid;
    gap: 12px;
    margin: 20px 0;
}

.passkey-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--line);
    background: white;
}

.passkey-card > div:first-child,
.passkey-card small {
    display: grid;
    gap: 6px;
}

.passkey-card small {
    color: var(--muted);
}

.passkey-actions,
.passkey-actions form,
.passkey-enrolment {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

.passkey-actions input {
    max-width: 190px;
}

.passkey-enrolment {
    margin-top: 20px;
}

.passkey-enrolment .staff-field {
    min-width: min(100%, 260px);
}

@media (max-width: 760px) {
    .passkey-card,
    .passkey-actions,
    .passkey-actions form,
    .passkey-enrolment {
        align-items: stretch;
        flex-direction: column;
    }

    .passkey-actions input,
    .passkey-actions .button,
    .passkey-enrolment .button {
        width: 100%;
        max-width: none;
    }
}

.dashboard-revenue {
    display: grid;
    grid-template-columns: minmax(230px, 1.4fr) repeat(2, minmax(180px, 1fr)) auto;
    gap: 18px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--line);
    background: #161c14;
    color: white;
}

.dashboard-revenue h2 {
    margin: 5px 0 6px;
    font-family: var(--display);
    font-size: 25px;
    text-transform: uppercase;
}

.dashboard-revenue p,
.dashboard-revenue small {
    margin: 0;
    color: rgb(255 255 255 / 53%);
    font-size: 10px;
    line-height: 1.5;
}

.dashboard-revenue article {
    padding: 4px 18px;
    border-left: 1px solid rgb(255 255 255 / 15%);
}

.dashboard-revenue article > span {
    display: block;
    color: var(--signal);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.report-metrics article > span {
    display: block;
    color: var(--signal);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dashboard-revenue article > strong {
    display: block;
    margin: 4px 0;
    font-family: var(--display);
    font-size: 30px;
}

.dashboard-revenue > .button-outline {
    color: white;
    border-color: rgb(255 255 255 / 48%);
    background: rgb(255 255 255 / 8%);
}

.dashboard-revenue > .button-outline:hover {
    color: #10140e;
    border-color: var(--signal);
    background: var(--signal);
}

.report-toolbar {
    margin-bottom: 34px;
}

.report-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.report-tabs a {
    display: grid;
    gap: 4px;
    min-height: 88px;
    align-content: center;
    padding: 18px 20px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: white;
    text-decoration: none;
}

.report-tabs a.is-active {
    border-color: var(--olive);
    box-shadow: inset 0 -4px 0 var(--signal);
    color: white;
    background: var(--olive);
}

.report-tabs strong {
    font-family: var(--display);
    font-size: 20px;
    text-transform: uppercase;
}

.report-tabs span {
    color: var(--muted);
    font-size: 10px;
}

.report-tabs a.is-active span {
    color: rgb(255 255 255 / 68%);
}

.report-gateway-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-gateway-options label {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    cursor: pointer;
    background: var(--paper-2);
}

.report-gateway-options label:has(input:checked) {
    border-color: var(--olive);
    background: #e2e6da;
}

.report-gateway-options label.is-test-gateway {
    border-color: #d6aaa0;
}

.report-gateway-options input {
    width: 17px;
    height: 17px;
    accent-color: var(--signal);
}

.report-gateway-options strong,
.report-gateway-options small {
    display: block;
}

.report-gateway-options strong {
    font-size: 11px;
}

.report-gateway-options small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.report-scope {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 17px 20px;
    border-left: 4px solid var(--signal);
    background: #e5e4d8;
}

.report-scope span,
.report-scope strong {
    display: block;
}

.report-scope span {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.report-scope strong {
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.report-scope a {
    color: var(--olive);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.report-empty-filter {
    margin-top: 18px;
}

.report-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.report-gift-card-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.report-metrics article {
    min-height: 130px;
    padding: 22px;
    border: 1px solid var(--line);
    background: white;
}

.report-metrics article > strong {
    display: block;
    margin: 12px 0 7px;
    font-family: var(--display);
    font-size: clamp(27px, 3vw, 42px);
}

.report-metrics article > small {
    color: var(--muted);
    font-size: 9px;
}

.report-metrics .report-net {
    color: white;
    background: var(--olive);
}

.report-metrics .report-contribution {
    color: white;
    background: var(--olive);
}

.report-metrics .report-net small {
    color: rgb(255 255 255 / 60%);
}

.report-metrics .report-contribution small {
    color: rgb(255 255 255 / 60%);
}

.report-integrity-note {
    margin: 12px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--signal);
    color: var(--muted);
    background: rgb(255 255 255 / 70%);
    font-size: 11px;
    line-height: 1.6;
}

.report-integrity-note strong {
    color: var(--ink);
}

.report-chart-section {
    padding: 26px;
    border: 1px solid var(--line);
    background: white;
}

.report-chart-legend {
    display: flex;
    gap: 18px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.report-chart-legend span::before {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    content: "";
}

.report-chart-legend .is-gross::before {
    background: var(--olive);
}

.report-chart-legend .is-refund::before {
    background: #b45a49;
}

.report-chart-legend .is-booked::before {
    background: #8d937b;
}

.report-chart-legend .is-attended::before {
    background: var(--olive);
}

.report-chart-legend .is-no-show::before {
    background: #b45a49;
}

.report-chart-legend .is-purchase::before {
    background: var(--olive);
}

.report-chart-legend .is-redemption::before {
    background: #a89c72;
}

.report-chart-scroll {
    overflow-x: auto;
}

.report-chart {
    display: block;
    min-width: 900px;
    width: 100%;
    height: auto;
    background: linear-gradient(#f7f5ee, #fff);
}

.report-chart-months-12 {
    min-width: 1200px;
}

.report-chart-months-18 {
    min-width: 1800px;
}

.report-chart-months-24 {
    min-width: 2400px;
}

.report-chart-axis {
    stroke: #bbbcb3;
    stroke-width: 1;
}

.report-chart-gridline {
    stroke: #dedfd8;
    stroke-width: 1;
}

.report-chart-gross {
    fill: var(--olive);
}

.report-chart-refund {
    fill: #b45a49;
}

.report-chart-booked {
    fill: #8d937b;
}

.report-chart-attended {
    fill: var(--olive);
}

.report-chart-no-show {
    fill: #b45a49;
}

.report-chart-purchase {
    fill: var(--olive);
}

.report-chart-redemption {
    fill: #a89c72;
}

.report-chart text {
    fill: #6c7067;
    font-size: 10px;
    text-transform: uppercase;
}

.report-chart .report-chart-axis-title,
.report-chart .report-chart-axis-value {
    fill: #4f544b;
    font-size: 9px;
    font-weight: 750;
    text-transform: none;
}

.report-month-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 12px;
    background: var(--line);
}

.report-month-values div {
    padding: 12px;
    background: var(--paper-2);
}

.report-month-values span,
.report-month-values strong,
.report-month-values small {
    display: block;
}

.report-month-values span {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.report-month-values strong {
    margin-top: 4px;
    font-size: 12px;
}

.report-month-values small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
}

.report-table {
    min-width: 980px;
}

.report-pie-section {
    padding: 26px;
    border: 1px solid var(--line);
    background: white;
}

.report-pie-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1.3fr);
    gap: clamp(24px, 5vw, 64px);
    align-items: center;
}

.report-pie {
    display: block;
    width: min(100%, 360px);
    margin: auto;
    transform: rotate(-90deg);
}

.report-pie-base,
.report-pie-segment {
    fill: none;
    stroke-width: 22;
}

.report-pie-base {
    stroke: var(--paper-2);
}

.report-pie-segment-0 { stroke: #3d5139; }

.report-pie-segment-1 { stroke: #a89c72; }

.report-pie-segment-2 { stroke: #73816a; }

.report-pie-segment-3 { stroke: #8d5c45; }

.report-pie-segment-4 { stroke: #b8aa83; }

.report-pie-segment-5 { stroke: #53615b; }

.report-pie-legend {
    display: grid;
    gap: 1px;
    background: var(--line);
}

.report-pie-legend > div {
    display: grid;
    grid-template-columns: 13px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--paper-2);
}

.report-pie-key {
    width: 13px;
    height: 13px;
}

.report-pie-key-0 { background: #3d5139; }

.report-pie-key-1 { background: #a89c72; }

.report-pie-key-2 { background: #73816a; }

.report-pie-key-3 { background: #8d5c45; }

.report-pie-key-4 { background: #b8aa83; }

.report-pie-key-5 { background: #53615b; }

.report-pie-legend strong,
.report-pie-legend small {
    display: block;
}

.report-pie-legend strong {
    font-size: 11px;
}

.report-pie-legend small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

@media (max-width: 1000px) {
    .dashboard-revenue {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-revenue > div,
    .dashboard-revenue > a {
        grid-column: 1 / -1;
    }

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

    .report-month-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 620px) {
    .dashboard-revenue,
    .report-tabs,
    .report-month-values {
        grid-template-columns: 1fr;
    }

    .report-metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-revenue article {
        padding: 12px 0;
        border-top: 1px solid rgb(255 255 255 / 15%);
        border-left: 0;
    }

    .filter-bar > p {
        grid-column: 1;
    }

    .dashboard-revenue > div,
    .dashboard-revenue > a {
        grid-column: 1;
    }

    .report-scope {
        align-items: flex-start;
        flex-direction: column;
    }
}

.staff-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    background: white;
}

.staff-table {
    width: 100%;
    min-width: 830px;
    border-collapse: collapse;
    font-size: 12px;
}

.staff-table th,
.staff-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.staff-table th {
    color: var(--muted);
    background: var(--paper-2);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

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

.staff-table td > strong,
.staff-table td > small {
    display: block;
}

.staff-table td > small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.status-pill {
    display: inline-flex;
    padding: 4px 8px;
    color: #3f4935;
    background: #e0e7d8;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-draft {
    color: #625b3e;
    background: #eee9d1;
}

.status-pending_payment {
    color: #625b3e;
    background: #eee9d1;
}

.status-withdrawn {
    color: #714b0a;
    background: #f5dfac;
}

.status-cancelled {
    color: #782f25;
    background: #f0ddd8;
}

.status-payment_failed {
    color: #782f25;
    background: #f0ddd8;
}

/* Scheduled publishing (core 0.4.0): a scheduled event's pill uses the
   reserved warning pair, so it is not the green of Published, and always
   carries its word. Its go-live line and, when it didn't go live, the
   overview's notice with a link to fix it. */

.status-scheduled {
    color: #56380f;
    background: #fff4d8;
}

.event-go-live-line {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.event-go-live-notice {
    max-width: 680px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #a97831;
    color: #56380f;
    background: #fff4d8;
    font-size: 14px;
    line-height: 1.5;
}

.event-go-live-notice > p {
    margin: 4px 0 0;
}

.event-go-live-notice a {
    color: inherit;
    text-decoration: underline;
}

.event-go-live-notice a:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.status-form {
    display: flex;
    gap: 6px;
}

.event-list-controls {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.filter-bar {
    --filter-label-height: 16px;
    --filter-control-height: 44px;
    --filter-label-gap: 8px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    background: white;
}

.filter-bar--events {
    grid-template-columns: minmax(170px, 0.8fr) minmax(230px, 1.2fr);
    margin-bottom: 0;
}

.filter-bar--event-bookings {
    grid-template-columns: minmax(150px, 0.8fr) minmax(170px, 1fr) minmax(220px, 1.4fr) minmax(150px, 0.8fr) auto;
    margin-bottom: 0;
}

.filter-bar--event-bookings .filter-options > legend span {
    margin-left: 4px;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.event-booking-export-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    margin: 12px 0 16px;
}

.event-booking-export-actions > span {
    margin-right: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-booking-export-actions .button {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 10px;
}

.event-booking-group-row th {
    padding: 10px 14px;
    border-top: 2px solid var(--olive);
    color: #34382f;
    background: var(--paper-2);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.filter-bar--visibility {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0;
}

.filter-bar--authentication {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
}

.filter-bar--game-day {
    grid-template-columns: minmax(150px, 0.65fr) minmax(0, 2.35fr) auto;
}

.game-day-search-submit {
    width: 44px;
    min-width: 44px;
    padding: 0;
}

.game-day-search-submit svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.filter-bar--tokens {
    grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1fr) minmax(150px, 0.8fr) auto;
}

.filter-bar--transactions {
    grid-template-columns: minmax(360px, 1.6fr) minmax(190px, 0.85fr) minmax(150px, 0.7fr) auto;
    gap: 16px;
    margin-bottom: 34px;
    padding: 24px;
}

.filter-bar--gift-cards {
    grid-template-columns: minmax(240px, 2fr) repeat(2, minmax(180px, 1fr)) auto;
    margin-bottom: 34px;
}

.filter-bar--refunds {
    grid-template-columns: minmax(220px, 320px) auto;
    margin-bottom: 34px;
}

.filter-bar--affiliates {
    grid-template-columns: minmax(220px, 320px) auto;
}

.filter-bar--promotions {
    grid-template-columns: minmax(240px, 2fr) repeat(2, minmax(160px, 1fr)) auto;
    margin-bottom: 24px;
}

.filter-bar--promotions .filter-actions {
    align-self: end;
}

.filter-bar--reports {
    grid-template-columns: minmax(0, 1fr) 190px auto;
}

.filter-bar--reports .filter-options > legend {
    margin-bottom: 9px;
}

.filter-bar--attendance {
    grid-template-columns: 190px auto;
}

.filter-field {
    display: grid;
    grid-template-rows: var(--filter-label-height) var(--filter-control-height);
    gap: var(--filter-label-gap);
    min-width: 0;
    align-self: start;
}

.filter-date-range {
    display: grid;
    grid-template-rows: var(--filter-label-height) var(--filter-control-height);
    gap: var(--filter-label-gap);
    min-width: 0;
    align-self: start;
}

.filter-field > span:first-child {
    display: flex;
    min-height: var(--filter-label-height);
    align-items: flex-end;
    margin: 0;
    color: #34382f;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.filter-options > legend,
.filter-group-label {
    display: flex;
    min-height: var(--filter-label-height);
    align-items: flex-end;
    margin: 0;
    color: #34382f;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.filter-field > input,
.filter-field > select {
    display: block;
    width: 100%;
    height: var(--filter-control-height);
    min-height: var(--filter-control-height);
    margin: 0;
    padding: 0 12px;
    border: 1px solid #918e85;
    border-radius: 0;
    color: var(--ink);
    background: #f8f7f2;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
}

.filter-date-time-input {
    color: var(--ink);
    color-scheme: light;
}

.filter-date-time-input::-webkit-date-and-time-value,
.filter-date-time-input::-webkit-datetime-edit {
    color: var(--ink);
    opacity: 1;
    text-align: left;
}

.filter-date-time-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.78;
}

.filter-date-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    height: var(--filter-control-height);
}

.filter-date-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    height: var(--filter-control-height);
    overflow: hidden;
    border: 1px solid #918e85;
    background: white;
}

.filter-date-control:focus-within {
    border-color: var(--olive);
    outline: 3px solid rgb(85 102 58 / 18%);
    outline-offset: 1px;
}

.filter-date-control.has-error {
    border-color: #a13a2b;
}

.filter-date-control > span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid #b8b4a9;
    color: #34382f;
    background: #ece9df;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.filter-date-control > input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    color: var(--ink);
    background: white;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
}

.filter-date-control > input:focus-visible {
    outline: 0;
}

.filter-date-errors {
    display: flex;
    grid-row: 3;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.filter-date-errors .field-error {
    margin: 0;
}

.filter-field > .field-error {
    grid-row: 3;
    margin-top: 0;
}

.filter-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
    align-self: start;
    padding-top: calc(var(--filter-label-height) + var(--filter-label-gap));
}

.filter-actions .button {
    height: var(--filter-control-height);
    min-height: var(--filter-control-height);
    margin: 0;
    padding: 10px 16px;
    font-size: 10px;
}

.filter-options {
    display: grid;
    grid-template-rows: var(--filter-label-height) minmax(var(--filter-control-height), auto);
    gap: var(--filter-label-gap);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.filter-options > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: var(--filter-control-height);
    align-items: center;
}

/* Each tick box in a filter bar's options is a 44-pixel target (staff forms
   audit batches 4 and 5: the event page's teams and the dashboard's statuses
   had 19-pixel rows). */

.filter-options > div > label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 44px;
    font-size: 10px;
}

.filter-bar > p {
    grid-column: 1 / -1;
    margin: -6px 0 0;
    color: var(--muted);
    font-size: 10px;
}

.staff-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.staff-tag-list span {
    display: inline-flex;
    padding: 5px 7px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper-2);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Find known player (core 0.14.0), shared by the complimentary and walk-on
   pages: one card per player record, the whole card one link, its lines
   enough to tell two people with one name apart. */

.known-player-hint {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.known-player-count {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
}

.known-player-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.known-player-results li {
    min-width: 0;
}

.known-player-results a {
    display: grid;
    gap: 4px;
    min-height: 44px;
    align-content: start;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: white;
    overflow-wrap: anywhere;
}

.known-player-results a:hover,
.known-player-results a:focus-visible,
.known-player-results a[aria-current] {
    border-color: var(--olive);
    background: var(--paper-2);
}

.known-player-results a[aria-current] {
    box-shadow: inset 4px 0 0 var(--olive);
}

.known-player-name,
.known-player-notice-title {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

.known-player-results a > span:not(.known-player-name),
.known-player-results small {
    color: var(--muted);
    font-size: 13px;
}

.known-player-results .known-player-picked {
    color: var(--olive);
    font-weight: 800;
}

.known-player-notice p + p {
    margin-top: 6px;
}

.walk-on-payment-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.walk-on-payment-option {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    padding: 18px;
    border: 2px solid var(--line);
    cursor: pointer;
    background: white;
}

.walk-on-payment-option:has(input:checked) {
    border-color: var(--olive);
    box-shadow: inset 0 0 0 1px var(--olive);
}

.walk-on-payment-option input {
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--olive);
}

.walk-on-payment-option span {
    display: grid;
    gap: 5px;
}

.walk-on-payment-option strong {
    font-family: var(--display);
    font-size: 16px;
    text-transform: uppercase;
}

.walk-on-payment-option small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.walk-on-payment-complete .self-check-in-ready-mark {
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    border-color: var(--olive);
    color: var(--olive);
}

.staff-account-shell {
    max-width: 860px;
}

.dashboard-attention {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin-bottom: 20px;
    padding: 24px;
    border-left: 5px solid #a33e32;
    background: #f3e9e4;
}

.dashboard-attention h2 {
    margin: 5px 0 7px;
    font-family: var(--display);
    font-size: 28px;
    text-transform: uppercase;
}

.dashboard-attention p {
    color: var(--muted);
    line-height: 1.6;
}

.staff-section > p {
    color: var(--muted);
    line-height: 1.6;
}

.dashboard-attention-actions {
    display: grid;
    gap: 12px;
}

.calendar-secret {
    display: grid;
    gap: 12px;
}

.calendar-secret {
    margin: 20px 0;
    padding: 20px;
    border-left: 4px solid var(--signal);
    color: white;
    background: var(--ink);
}

.calendar-secret input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgb(255 255 255 / 25%);
    color: white;
    background: rgb(255 255 255 / 8%);
}

.calendar-secret p {
    margin: 0;
    color: rgb(255 255 255 / 65%);
    font-size: 13px;
    line-height: 1.55;
}

.calendar-setup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.calendar-setup-actions .button {
    margin: 0;
}

.calendar-secret .calendar-setup-help {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.calendar-secret .calendar-setup-help p {
    padding: 12px;
    border: 1px solid rgb(255 255 255 / 14%);
    background: rgb(255 255 255 / 5%);
}

.calendar-secret .calendar-setup-help strong {
    display: block;
    margin-bottom: 4px;
    color: white;
}

.calendar-secret .calendar-private-warning {
    color: rgb(255 255 255 / 78%);
}

.player-email-identity > summary > * {
    min-width: 0;
}

@media (max-width: 760px) {
    .dashboard-attention {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* Chronograph operator */

.chrono-operator-shell {
    padding-top: 32px;
}

.chrono-toolbar {
    align-items: center;
    margin-bottom: 28px;
}

.chrono-toolbar h1 {
    max-width: 760px;
    margin-bottom: 8px;
}

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

.chrono-response-errors {
    margin-bottom: 20px;
}

.chrono-response-errors p {
    margin: 4px 0 0;
}

.chrono-context-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
}

.chrono-event-selector,
.chrono-search-panel,
.chrono-player-workspace,
.chrono-add-weapon[open] {
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 23%);
}

.chrono-event-selector {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 18px;
}

.chrono-day-switch {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chrono-event-selector label,
.chrono-operator-form label {
    min-width: 0;
}

.chrono-event-selector label > span,
.chrono-operator-form label > span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.chrono-event-selector select,
.chrono-event-selector input,
.chrono-operator-form select,
.chrono-operator-form input,
.chrono-operator-form textarea {
    width: 100%;
    min-width: 0;
}

.staff-form-controls input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.staff-form-controls select,
.staff-form-controls textarea {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #aaa69b;
    border-radius: 0;
    color: var(--ink);
    background: white;
    font: inherit;
    font-size: 14px;
}

.staff-form-controls textarea {
    resize: vertical;
}

.staff-form-controls input:focus-visible,
.staff-form-controls input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus-visible,
.staff-form-controls select:focus-visible,
.staff-form-controls textarea:focus-visible {
    border-color: var(--olive);
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.staff-form-controls .has-error input,
.staff-form-controls .has-error select,
.staff-form-controls .has-error textarea,
.staff-form-controls [aria-invalid="true"] {
    border-color: #a13a2b;
}

.chrono-event-selector .button {
    white-space: nowrap;
}

.chrono-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(78px, 1fr));
    margin: 0;
    border: 1px solid var(--line);
    background: var(--ink-2);
    color: white;
}

.chrono-metrics div {
    display: flex;
    min-height: 96px;
    padding: 14px;
    border-right: 1px solid rgb(255 255 255 / 13%);
    flex-direction: column-reverse;
    justify-content: space-between;
}

.chrono-metrics div:last-child {
    border-right: 0;
}

.chrono-metrics dt {
    color: rgb(255 255 255 / 62%);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
}

.chrono-metrics dd {
    margin: 0;
    font-family: var(--display);
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.chrono-search-panel {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
    gap: 18px 30px;
    margin-top: 18px;
    padding: 24px;
}

.chrono-search-panel h2,
.chrono-player-heading h2,
.chrono-status-body h2 {
    margin: 3px 0 0;
    font-family: var(--display);
    font-size: 28px;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
}

.chrono-search-panel > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.chrono-search-panel input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 48px;
}

.chrono-search-results {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
}

.chrono-not-checked-in-results {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.chrono-not-checked-in-results > p,
.chrono-status-sticky p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.chrono-player-row {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.chrono-player-row > div {
    display: grid;
    min-width: 0;
}

.chrono-player-row strong,
.chrono-player-row span {
    overflow-wrap: anywhere;
}

.chrono-player-row span {
    color: var(--muted);
    font-size: 12px;
}

.chrono-player-workspace {
    margin-top: 22px;
    padding: clamp(20px, 3vw, 34px);
}

.chrono-player-heading {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.chrono-player-heading p {
    margin: 6px 0 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.chrono-state,
.chrono-result {
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid currentColor;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.chrono-state[data-status="cleared"],
.chrono-result.is-pass {
    color: #385122;
}

.chrono-state[data-status="no_passing_weapons"],
.chrono-result.is-fail,
.chrono-result.is-invalidated {
    color: #7b281b;
}

.chrono-weapon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.chrono-weapon-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.chrono-weapon-card.is-incomplete {
    border: 2px solid #7b281b;
}

.chrono-weapon-card > header {
    display: flex;
    gap: 16px;
    align-items: start;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.chrono-weapon-card > header span,
.chrono-weapon-card > header > strong {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.chrono-weapon-card h3 {
    margin: 3px 0 0;
    font-family: var(--display);
    font-size: 25px;
    line-height: 1;
    text-transform: uppercase;
}

.chrono-evidence {
    min-height: 118px;
    padding: 18px 0;
}

.chrono-evidence p,
.chrono-guidance {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.chrono-measurements {
    display: flex;
    gap: 8px 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-family: var(--display);
    font-size: 20px;
}

.chrono-guidance {
    padding: 10px 12px;
    border-left: 3px solid var(--signal-dark);
    background: rgb(255 255 255 / 25%);
    overflow-wrap: anywhere;
}

.chrono-card-form {
    margin-top: 16px;
    border-top: 1px solid var(--line);
}

.chrono-card-form > summary,
.chrono-add-weapon > summary {
    padding: 12px 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.chrono-card-form > summary::marker,
.chrono-add-weapon > summary::marker,
.chrono-status-panel > summary::marker {
    content: "";
}

.chrono-operator-form {
    min-width: 0;
}

.chrono-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.chrono-operator-form small {
    display: block;
    margin-top: 4px;
    color: #7b281b;
    font-size: 11px;
}

.chrono-test-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.chrono-conflict {
    margin-top: 16px;
    padding: 14px;
    border: 2px solid #7b281b;
    background: #eee0d2;
}

.chrono-conflict p {
    margin: 5px 0 0;
    font-size: 12px;
}

.chrono-add-weapon {
    width: 100%;
    margin-top: 20px;
}

.chrono-add-weapon[open] {
    padding: 18px;
}

.chrono-player-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.chrono-completion-warning,
.chrono-finish-confirmation {
    padding: 12px 14px;
    border-left: 4px solid #7b281b;
    background: #eee0d2;
    color: #5e2118;
}

.chrono-completion-warning {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 800;
}

.chrono-finish-confirmation {
    margin-bottom: 12px;
}

.chrono-start-form {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border: 1px dashed var(--line);
}

.chrono-start-form p {
    margin: 0;
}

.chrono-operator-main {
    min-width: 0;
}

.chrono-status-panel {
    position: relative;
}

.chrono-status-panel > summary {
    list-style: none;
    cursor: pointer;
}

.chrono-status-close-label,
.chrono-status-panel[open] .chrono-status-open-label {
    display: none;
}

.chrono-status-panel[open] .chrono-status-close-label {
    display: inline;
}

@media (min-width: 1281px) {
    .staff-page .chrono-operator-shell > .shell {
        width: calc(100% - 64px);
    }
}

@media (min-width: 1181px) {
    .chrono-operator-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(380px, 32vw, 480px);
        gap: 24px;
        align-items: start;
    }

    .chrono-operator-main {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .chrono-status-panel {
        min-width: 0;
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: calc(var(--staff-app-header-height) + 16px);
        height: calc(100dvh - var(--staff-app-header-height) - 32px);
    }

    .chrono-status-panel > summary,
    .chrono-status-close {
        display: none;
    }

    .chrono-status-panel:not([open]) > .chrono-status-body,
    .chrono-status-panel[open] > .chrono-status-body {
        display: flex;
    }

    .chrono-status-body {
        height: 100%;
        padding: 24px;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--line);
        background: var(--paper);
        box-shadow: 0 12px 32px rgb(8 11 8 / 12%);
    }

    .chrono-weapon-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1181px) and (max-width: 1280px) {
    .chrono-status-panel {
        top: 16px;
        height: calc(100dvh - 32px);
    }
}

.chrono-status-sticky {
    position: sticky;
    z-index: 1;
    top: 0;
    flex: 0 0 auto;
    background: var(--paper);
}

.chrono-status-sticky > header {
    display: flex;
    gap: 16px;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.chrono-status-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.chrono-status-heading-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chrono-status-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    font-size: 25px;
}

.chrono-status-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    margin-bottom: 18px;
    border-top: 1px solid var(--line);
}

.chrono-status-filters a {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 750;
}

.chrono-status-filters a.is-current {
    padding-left: 10px;
    border-left: 4px solid var(--signal-dark);
    font-weight: 900;
}

/* Chronograph history and print */

.chrono-history-shell {
    padding-top: 32px;
}

.chrono-history-toolbar {
    margin-bottom: 24px;
}

.chrono-history-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.chrono-history-filters label {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.chrono-history-filters label > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chrono-history-filters input,
.chrono-history-filters select {
    width: 100%;
    min-width: 0;
}

.chrono-history-search {
    grid-column: span 2;
}

.chrono-history-filters .filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chrono-history-list {
    display: grid;
    gap: 14px;
}

.chrono-history-weapon-heading {
    display: flex;
    gap: 20px;
    align-items: end;
    justify-content: space-between;
    margin-top: 18px;
    padding: 20px;
    color: white;
    background: var(--ink-2);
}

.chrono-history-weapon-heading:first-child {
    margin-top: 0;
}

.chrono-history-weapon-heading span,
.chrono-history-weapon-heading p {
    color: rgb(255 255 255 / 65%);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
}

.chrono-history-weapon-heading h3,
.chrono-history-weapon-heading p {
    margin: 0;
}

.chrono-history-weapon-heading h3 {
    margin-top: 5px;
    font-family: var(--display);
    font-size: 23px;
    text-transform: uppercase;
}

.chrono-history-entry {
    padding: 20px;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 23%);
}

.chrono-history-entry > header {
    display: flex;
    gap: 16px;
    align-items: start;
    justify-content: space-between;
}

.chrono-history-entry > header span:first-child {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chrono-history-entry h4 {
    margin: 5px 0 0;
    font-family: var(--display);
    font-size: 22px;
    text-transform: uppercase;
}

.chrono-history-evidence {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 18px 0 0;
    background: var(--line);
}

.chrono-history-evidence div {
    min-width: 0;
    padding: 13px;
    background: var(--paper);
}

.chrono-history-evidence dt,
.chrono-history-evidence dd {
    margin: 0;
}

.chrono-history-evidence dt {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chrono-history-evidence dd {
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.chrono-history-conflict {
    margin: 14px 0 0;
    padding: 10px 12px;
    color: #7b281b;
    border-left: 3px solid currentColor;
    background: #eee0d2;
    font-size: 11px;
    font-weight: 850;
}

.chrono-status-print-shell {
    width: min(900px, calc(100% - 48px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 52px 0 72px;
}

.chrono-status-print-heading {
    padding-bottom: 22px;
    border-bottom: 3px solid var(--ink);
}

.chrono-status-print-heading > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.chrono-status-print-heading h1 {
    margin: 8px 0 5px;
    font-family: var(--display);
    font-size: clamp(34px, 6vw, 58px);
    line-height: 1;
    text-transform: uppercase;
}

.chrono-status-print-heading p,
.chrono-status-print-empty,
.chrono-status-print-error {
    margin: 0;
    color: var(--muted);
}

.chrono-status-print-list {
    margin: 24px 0 0;
    padding: 0;
    list-style-position: inside;
}

.chrono-status-print-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
}

.chrono-status-print-list li > div {
    display: inline-flex;
    gap: 10px;
    align-items: baseline;
}

.chrono-status-print-list strong {
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.chrono-status-print-list span {
    color: var(--muted);
    font-size: 11px;
}

.chrono-status-print-empty,
.chrono-status-print-error {
    padding: 24px 0;
}

/* Printed site QR code (core 0.8.0): the site page's section. Print returns a PDF (core 0.8.1). */

.staff-printed-site-code-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.staff-printed-site-code-actions form {
    margin: 0;
}

/* The printed sheet's heading (core 0.8.3): one column of choice cards, the
   fields the choice uses, a preview drawn to the PDF's proportions, and Save.
   The preview is a container as wide as its paper, so the type is sized as a
   share of the page's 595 pt width; the server and the script break the lines, never the
   browser (nowrap), so the preview shows the PDF's lines. The "at {site}"
   line is never under 12 px (user ruling, 2026-10-12), so on a phone it is
   larger than the sheet's scale and may wrap a line rather than spill. */

.printed-sheet-heading {
    display: grid;
    gap: 18px;
    max-width: 720px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.printed-sheet-heading [hidden] {
    display: none;
}

/* "Heading saved." where the save lands, in the error summary's place and
   shape, in the checked card's olive (core 0.8.3). */

.printed-sheet-heading-saved {
    margin: 0;
    padding: 14px 18px;
    border-left: 3px solid var(--olive);
    color: var(--ink);
    background: #f4f6ed;
    font-size: 13px;
    font-weight: 700;
}

.printed-sheet-heading .printed-sheet-heading-choices {
    grid-template-columns: minmax(0, 1fr);
}

.printed-sheet-heading-choices .staff-choice > span {
    min-height: 44px;
    overflow-wrap: anywhere;
}

.printed-sheet-heading-at {
    font-size: 12px;
}

.printed-sheet-heading-fields input {
    min-height: 44px;
}

/* A refusal is red wherever it sits under its field, not only as the label's
   last line (the live message follows the save's). */

.printed-sheet-heading-fields .field-error {
    color: #9b3424;
    font-size: 11px;
}

.printed-sheet-heading-preview {
    container-type: inline-size;
    display: grid;
    gap: 8px;
    max-width: 420px;
    margin: 0;
}

.printed-sheet-heading-preview figcaption {
    color: var(--muted);
    font-size: 13px;
}

.printed-sheet-heading-paper {
    display: grid;
    gap: 0.67cqw;
    padding: 4cqw 9.66cqw;
    border: 1px solid var(--line);
    background: white;
    color: black;
    font-family: Helvetica, Arial, "Liberation Sans", sans-serif;
    text-align: center;
}

.printed-sheet-heading-lines,
.printed-sheet-heading-at-lines {
    display: grid;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.printed-sheet-heading-lines {
    font-weight: 700;
}

.printed-sheet-heading-at-lines {
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
}

.printed-sheet-heading-lines[data-size="30"] { font-size: 5.04cqw; }

.printed-sheet-heading-lines[data-size="26"] { font-size: 4.37cqw; }

.printed-sheet-heading-lines[data-size="22"] { font-size: 3.7cqw; }

.printed-sheet-heading-lines[data-size="18"] { font-size: 3.03cqw; }

.printed-sheet-heading-at-lines[data-size="16"] { font-size: max(12px, 2.69cqw); }

.printed-sheet-heading-at-lines[data-size="14"] { font-size: max(12px, 2.35cqw); }

.printed-sheet-heading-at-lines[data-size="12"] { font-size: max(12px, 2.02cqw); }

.printed-sheet-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.printed-sheet-heading-actions .button {
    min-height: 44px;
}

@media (max-width: 1180px) {
    html.chrono-status-modal-open {
        overflow: hidden;
    }

    .chrono-operator-layout {
        display: flex;
        flex-direction: column;
    }

    .chrono-status-panel {
        order: -1;
        margin-bottom: 20px;
    }

    .chrono-status-panel > summary {
        width: 100%;
        list-style: none;
    }

    .chrono-status-panel[open] .chrono-status-body {
        position: fixed;
        z-index: 70;
        inset: 0;
        width: 100%;
        height: 100dvh;
        display: flex;
        padding: 76px 18px 18px;
        flex-direction: column;
        overflow: hidden;
        border: 0;
        background: var(--paper);
    }

    .chrono-status-panel[open] > summary {
        position: fixed;
        z-index: 72;
        top: 12px;
        left: 12px;
        width: auto;
        max-width: calc(100vw - 80px);
        background: var(--paper);
    }
}

@media (max-width: 1080px) {
    .chrono-context-grid,
    .chrono-search-panel {
        grid-template-columns: 1fr;
    }

    .chrono-search-results {
        grid-column: 1;
    }

    .chrono-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .chrono-metrics div:nth-child(3) {
        border-right: 0;
    }

    .chrono-metrics div:nth-child(-n + 3) {
        border-bottom: 1px solid rgb(255 255 255 / 13%);
    }

}

@media (max-width: 760px) {
    .chrono-weapon-grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .chrono-weapon-card {
        scroll-snap-align: start;
    }

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

@media (max-width: 620px) {
    .chrono-operator-shell {
        padding-top: 22px;
        padding-bottom: 130px;
    }

    .chrono-toolbar,
    .chrono-player-heading,
    .chrono-start-form {
        align-items: stretch;
        flex-direction: column;
    }

    .chrono-toolbar-actions,
    .chrono-toolbar-actions > .button {
        width: 100%;
    }

    .chrono-event-selector,
    .chrono-search-panel > form,
    .chrono-form-grid,
    .chrono-weapon-grid {
        grid-template-columns: 1fr;
    }

    .chrono-weapon-grid {
        max-width: 100%;
        overflow: visible;
    }

    .chrono-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .chrono-metrics div,
    .chrono-metrics div:nth-child(3) {
        border-right: 1px solid rgb(255 255 255 / 13%);
        border-bottom: 1px solid rgb(255 255 255 / 13%);
    }

    .chrono-metrics div:nth-child(2n) {
        border-right: 0;
    }

    .chrono-metrics div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .chrono-search-panel,
    .chrono-player-workspace {
        padding: 18px;
    }

    .chrono-player-row {
        align-items: stretch;
        flex-direction: column;
    }

    .chrono-player-row .button,
    .chrono-test-form .button,
    .chrono-player-actions,
    .chrono-player-actions form,
    .chrono-player-actions .button {
        width: 100%;
    }

    .chrono-player-actions {
        position: sticky;
        z-index: 15;
        bottom: 0;
        padding: 14px 0;
        background: var(--paper);
    }

    .chrono-history-filters,
    .chrono-history-evidence {
        grid-template-columns: 1fr;
    }

    .chrono-history-search {
        grid-column: auto;
    }

    .chrono-history-weapon-heading,
    .chrono-history-entry > header,
    .chrono-status-print-list li {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

/* The rental-desk list. Screen styles first; the print block that matters is
   further down beside the other print rules. The page carries no interactive
   chrome at all, so there is nothing here to hide on paper except the staff
   application's own header and navigation. */

.add-on-print-shell {
    display: grid;
    gap: 24px;
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 24px;
}

.add-on-print-heading {
    display: grid;
    gap: 4px;
}

.add-on-print-heading span {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6754;
}

.add-on-print-heading h1 {
    margin: 0;
    font-size: 26px;
}

.add-on-print-heading p {
    margin: 0;
    color: #4a4738;
}

.add-on-print-capacity {
    font-weight: 600;
}

.add-on-print-error,
.add-on-print-empty {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #d6d3c5;
    border-radius: 6px;
    background: #fbfaf5;
}

.add-on-print-day {
    display: grid;
    gap: 12px;
    break-inside: avoid;
}

.add-on-print-day h2 {
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #2f2d24;
    font-size: 19px;
}

.add-on-print-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.add-on-print-totals li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 6px 10px;
    border: 1px solid #d6d3c5;
    border-radius: 6px;
}

.add-on-print-totals em {
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.add-on-print-list {
    width: 100%;
    border-collapse: collapse;
}

.add-on-print-list th,
.add-on-print-list td {
    padding: 7px 8px;
    border-bottom: 1px solid #d6d3c5;
    text-align: left;
    vertical-align: top;
    font-size: 13px;
}

.add-on-print-list th {
    border-bottom-width: 2px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.add-on-print-list td span {
    display: block;
    color: #6b6754;
    font-size: 12px;
}

.add-on-print-tick {
    width: 90px;
    border-left: 1px solid #d6d3c5;
}

/* The staff event form's Extras, inside the tickets step: one compact row per
   extra (Name, Price, Charged, Per day limit), its description folded into
   the same disclosure as a ticket card's (.ticket-more), and the slots added
   and removed as ticket cards are. See docs/design-language.md, Ticket and
   extra slots. */

.add-on-builder {
    display: grid;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line, #d6d3c5);
}

.add-on-builder-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid var(--line, #d6d3c5);
    background: #fbfaf5;
}

.add-on-builder-card[hidden],
.add-on-builder-card .add-on-builder-enable[hidden] {
    display: none;
}

.add-on-builder-card .add-on-builder-enable {
    grid-column: 1 / -1;
    margin: 0;
}

.add-on-builder-card > label:not(.terms-check) {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

/* Field captions, as on a ticket card. The tick boxes keep sentence case. */

.add-on-builder-card label:not(.terms-check) > span:first-child {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Each caption takes two lines, its requirement on the second, so the
   row's inputs start level. */

.add-on-builder-card > label:not(.terms-check) > span:first-child {
    min-height: 3.4em;
}

.add-on-builder-card > label:not(.terms-check) > span:first-child > .field-requirement {
    display: block;
    margin: 3px 0 0;
}

.add-on-builder-card input:not([type="checkbox"]),
.add-on-builder-card select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    background: #f9f7f1;
}

.add-on-builder-card label small {
    color: var(--muted);
    font-size: 10px;
}

.add-on-builder-card label.has-error small:last-child {
    color: #9b3424;
}

/* Core 0.33 (AO70, AO71): "Players can add it after booking", then "until
   [24] hours before Game on on their first day" as one sentence with the
   number in it, not a field caption, and its help beneath. */

.add-on-after-booking {
    display: grid;
    grid-column: 1 / -1;
    gap: 8px;
}

.add-on-builder-card .add-on-after-booking-hours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.add-on-builder-card .add-on-after-booking-hours label {
    display: inline;
}

.add-on-builder-card .add-on-after-booking-hours input {
    width: 7em;
    min-height: 44px;
}

.add-on-after-booking small {
    color: var(--muted);
    font-size: 12px;
}

.add-on-after-booking.has-error small:last-child {
    color: #9b3424;
}

/* An extra bookings hold, switched back on by a refused save (fix 2). */

.add-on-builder-card .add-on-builder-enable.has-error + small {
    color: #9b3424;
    font-size: 12px;
    font-weight: 600;
}

.add-on-builder-card .terms-check > span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* "+ Add a ticket (up to 4)" and "+ Add an extra" (event-format.mjs), as
   "+ Add a game day" is drawn. */

.ticket-builder-add,
.add-on-builder-add {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px dashed #aaa69b;
    color: #40503b;
    background: var(--paper);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.ticket-builder-add {
    margin-top: 14px;
}

.ticket-builder-add:hover,
.add-on-builder-add:hover {
    border-color: var(--ink);
}

/* Remove on a ticket card or an extra: it switches the slot off, keeping
   what it holds, so it is a quiet text button rather than a danger action.
   An Itinerary row's Edit and Remove, in their own actions cell, are the
   same quiet buttons (core 0.4.1). */

.ticket-builder-remove,
.add-on-builder-remove,
.players-day-table .staff-table-actions button {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    color: #40503b;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ticket-builder-add:focus-visible,
.add-on-builder-add:focus-visible,
.ticket-builder-remove:focus-visible,
.add-on-builder-remove:focus-visible,
.players-day-table .staff-table-actions button:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.ticket-builder-add[hidden],
.add-on-builder-add[hidden],
.ticket-builder-remove[hidden],
.add-on-builder-remove[hidden] {
    display: none;
}

/* Name, price, Charged, Per day limit and Remove on one line where the form
   has the room, as a ticket card's top row. */

@media (min-width: 1440px) {
    .add-on-builder-card {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 8rem) minmax(0, 11rem) minmax(0, 8rem) auto;
    }

    .add-on-builder-remove {
        grid-column: auto;
        align-self: end;
    }
}

@media (max-width: 600px) {
    .add-on-builder-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    .chrono-toolbar-actions,
    .chrono-event-selector,
    .chrono-search-panel,
    .chrono-status-panel,
    .chrono-operator-form,
    .chrono-card-form,
    .chrono-add-weapon,
    .chrono-player-actions {
        display: none !important;
    }

    .chrono-operator-shell,
    .chrono-player-workspace,
    .chrono-weapon-card {
        min-height: 0;
        padding: 0;
        border-color: #888;
        background: white;
        box-shadow: none;
    }

    .chrono-status-print-page {
        padding: 0;
    }

    .chrono-status-print-page .skip-link,
    .chrono-status-print-page .staff-app-header,
    .chrono-status-print-page .staff-nav,
    .chrono-status-print-page .staff-alert-stack {
        display: none !important;
    }

    .chrono-status-print-page #main-content {
        margin: 0;
    }

    .chrono-status-print-shell {
        width: 100%;
        min-height: 0;
        padding: 0;
    }

    .chrono-status-print-list li {
        break-inside: avoid;
    }

    .game-day-add-ons-print-page {
        padding: 0;
    }

    .game-day-add-ons-print-page .skip-link,
    .game-day-add-ons-print-page .staff-app-header,
    .game-day-add-ons-print-page .staff-nav,
    .game-day-add-ons-print-page .staff-alert-stack,
    .game-day-add-ons-print-page .add-on-print-filter {
        display: none !important;
    }

    .game-day-add-ons-print-page #main-content {
        margin: 0;
    }

    .add-on-print-shell {
        width: 100%;
        padding: 0;
    }

    .add-on-print-list tr,
    .add-on-print-totals li {
        break-inside: avoid;
    }
}

.booking-import-intro ul {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    padding-left: 22px;
}

.booking-import-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.booking-import-mode-options label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    min-height: 104px;
    padding: 20px;
    border: 1px solid var(--line, #d6d3c5);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.booking-import-mode-options label:has(input:checked) {
    border-color: var(--accent, #a78335);
    box-shadow: 0 0 0 2px rgb(167 131 53 / 18%);
}

.booking-import-mode-options small,
.booking-import-player-heading span,
.booking-import-review-row small {
    display: block;
    margin-top: 5px;
    color: var(--muted, #68685e);
}

.booking-import-players,
.booking-import-review-list {
    display: grid;
    gap: 18px;
}

.booking-import-player,
.booking-import-review-row {
    padding: 22px;
    border: 1px solid var(--line, #d6d3c5);
    border-radius: 8px;
    background: #faf9f4;
}

.booking-import-player-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.booking-import-player-heading > div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.booking-import-mapping {
    margin: 24px 0;
}

.booking-import-form .form-grid.three-column,
.booking-import-mapping {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booking-import-review-row .form-grid.four-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.booking-import-sample {
    margin: 24px 0;
}

.booking-import-sample .staff-table {
    min-width: max-content;
}

.booking-import-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 24px;
}

.booking-import-review-row.status-error {
    border-color: #b94b45;
    box-shadow: inset 4px 0 #b94b45;
}

.booking-import-review-row.status-excluded {
    opacity: .72;
}

.booking-import-row-error {
    margin: -4px 0 18px;
    padding: 12px 14px;
    border-radius: 6px;
    background: #fff0ee;
}

.booking-import-row-decisions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.booking-import-commit,
.booking-import-actions {
    margin-top: 24px;
}

.booking-import-reverse {
    max-width: 680px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line, #d6d3c5);
}

.booking-import-reverse > label {
    display: grid;
    gap: 7px;
    margin-top: 16px;
}

@media (max-width: 980px) {
    .booking-import-mode-options,
    .booking-import-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .booking-import-form .form-grid.three-column,
    .booking-import-mapping,
    .booking-import-review-row .form-grid.four-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .booking-import-mode-options,
    .booking-import-metrics,
    .booking-import-form .form-grid.three-column,
    .booking-import-mapping,
    .booking-import-review-row .form-grid.four-column {
        grid-template-columns: 1fr;
    }

    .booking-import-player,
    .booking-import-review-row {
        padding: 16px;
    }

    .booking-import-player-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.table-action-link {
    display: inline-flex;
    margin: 0 8px 8px 0;
    padding: 7px 9px;
    color: white;
    background: var(--olive);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* A table action written as a button (the staff list's Disable and Enable)
   is a 44-pixel target, as the table's danger buttons are (staff forms audit
   batch 7). Its words stay small and its padding tight. */

button.table-action-link {
    min-height: 44px;
    align-items: center;
    border: 0;
    cursor: pointer;
}

.staff-role-label,
.staff-page-lead {
    max-width: 680px;
    color: var(--muted);
    font-size: 12px;
}

.conduct-panel label {
    display: grid;
    gap: 7px;
}

.conduct-panel label > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.conduct-panel textarea,
.conduct-panel select {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper-2);
}

.ticket-scan-notice {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding: 22px 24px;
    border-left: 4px solid var(--signal);
    color: white;
    background: var(--ink);
}

.ticket-scan-notice div {
    display: grid;
    gap: 6px;
}

.ticket-scan-notice .eyebrow {
    color: var(--signal);
}

.ticket-scan-notice strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 18px;
}

.ticket-scan-notice .button-outline {
    border-color: rgb(255 255 255 / 45%);
    color: white;
}

.balance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.balance-grid article {
    padding: 24px;
    border: 1px solid var(--line);
    background: white;
}

.balance-grid article > strong {
    display: block;
    margin: 18px 0;
    font-family: var(--display);
    font-size: 42px;
    line-height: 1;
}

.balance-grid dl {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin: 0;
}

.balance-grid dl div {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.balance-grid dt,
.balance-grid dd {
    margin: 0;
}

.balance-grid dt {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.balance-grid dd {
    margin-top: 4px;
    font-weight: 800;
}

.attendance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.game-day-orbat-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-day-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.game-day-mode-link {
    display: grid;
    min-width: 44px;
    min-height: 44px;
    gap: 3px;
    align-content: center;
    padding: 14px 16px;
    border: 2px solid #686c61;
    color: #273021;
    background: #ffffff;
}

.game-day-mode-link:hover {
    border-color: #364a32;
    color: #273021;
    background: #f3f1e9;
}

.game-day-mode-link.is-active,
.game-day-mode-link.is-active:hover {
    border-color: #364a32;
    color: #244325;
    background: #d8e8d4;
}

.game-day-mode-link strong {
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.1;
    text-transform: uppercase;
}

.game-day-mode-link span {
    font-size: 12px;
    line-height: 1.35;
}

/* Game day event choice (core 0.6.1): the event list's filters, its cards,
   and the open event's name beside Change event. */

.filter-bar--game-day-events {
    grid-template-columns: minmax(160px, 0.8fr) minmax(0, 2fr) minmax(0, 1fr) auto;
}

.game-day-day-filter {
    /* A fieldset's legend sits outside its grid, so the shared label row
       would hold the controls and clip them once they wrap. */
    grid-template-rows: auto;
}

.game-day-day-filter > legend {
    margin-bottom: var(--filter-label-gap);
}

.game-day-day-filter > div > .button {
    min-height: 44px;
}

/* The filter-bar date (staff forms audit batch 5): the day filter's own date
   takes the filter bar's control look, as .filter-field's controls have,
   rather than the browser's box, at the 44-pixel height of the day buttons
   beside it. */

.game-day-day-filter input[type="date"] {
    width: auto;
    min-width: 150px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #918e85;
    border-radius: 0;
    color: var(--ink);
    background: #f8f7f2;
    font-size: 13px;
    font-weight: 650;
}

.game-day-day-filter input[type="date"]:focus-visible {
    border-color: var(--olive);
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.game-day-event-toggles {
    display: grid;
    gap: 4px;
    align-self: end;
}

.game-day-event-toggles label {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
}

/* "Show drafts and cancelled" is a check line: an 18-pixel box beside its
   words on the 44-pixel row above. */

.game-day-event-toggles input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--signal);
}

/* Core 0.9.5: All events' Upcoming events and Past events, and the
   pagination under its cards, as 44-pixel targets. */

.game-day-all-events-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.game-day-all-events-switch .button,
.game-day-event-cards + .pagination a,
.game-day-event-cards + .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.game-day-event-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.game-day-event-card {
    display: grid;
    align-content: start;
    gap: 6px;
    height: 100%;
    min-height: 44px;
    padding: 16px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: #ffffff;
    text-decoration: none;
}

.game-day-event-card:hover {
    border-color: var(--olive);
    background: #f3f1e9;
}

.game-day-event-card:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.game-day-event-card-title {
    margin: 0;
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.game-day-event-card .status-pill {
    width: fit-content;
}

.game-day-event-card-meta,
.game-day-event-card-times {
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.game-day-event-card-counts {
    font-size: 13px;
    font-weight: 700;
}

/* The empty state's All sites and This weekend read as links. */

.game-day-shell .staff-empty a {
    color: var(--ink);
    text-decoration: underline;
}

/* Core 0.7.1: the top of Game day. The live status sits level with
   "← Staff portal", outside every polled region; its dot follows the state
   staff-interactions.mjs sets, and the words stay the accessible text. */

.game-day-frame {
    position: relative;
}

.game-day-update-status {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    display: flex;
    max-width: calc(100% - 10rem);
    min-height: 44px;
    margin: 0;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

.game-day-update-status::before {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #4f7a36;
    box-shadow: 0 0 0 3px rgb(79 122 54 / 22%);
    content: "";
}

.game-day-update-status[data-staff-update-state="paused"]::before {
    background: #a97831;
    box-shadow: 0 0 0 3px rgb(169 120 49 / 22%);
}

.game-day-update-status[data-staff-update-state="lost"] {
    color: #8a1f11;
    font-weight: 750;
}

.game-day-update-status[data-staff-update-state="lost"]::before {
    background: #a5231a;
    box-shadow: 0 0 0 3px rgb(165 35 26 / 22%);
}

.game-day-toolbar--event {
    min-height: 44px;
    margin-bottom: 14px;
}

.game-day-toolbar--event .back-link {
    margin-bottom: 0;
}

.game-day-event-bar {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 6px solid var(--olive);
    background: #ffffff;
}

.game-day-event-bar-main {
    min-width: 0;
}

.game-day-event-bar h2 {
    margin: 2px 0;
    font-family: var(--display);
    font-size: 24px;
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.game-day-event-bar-meta {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.game-day-event-bar-side,
.game-day-event-bar .game-day-day-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.game-day-event-bar .button {
    min-width: 44px;
    min-height: 44px;
}

.game-day-mode-actions {
    display: flex;
    justify-content: flex-end;
    margin: -6px 0 22px;
}

.game-day-mode-actions .staff-toolbar-actions {
    margin: 0;
}

@media (max-width: 620px) {
    .game-day-update-status {
        max-width: calc(100% - 9rem);
    }

    .game-day-event-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .game-day-event-bar-side,
    .game-day-event-bar .game-day-day-switch {
        width: 100%;
        justify-content: flex-start;
    }

    .game-day-event-bar .button {
        flex: 1 1 0;
    }

    .game-day-mode-actions,
    .game-day-mode-actions .staff-toolbar-actions {
        justify-content: stretch;
        width: 100%;
    }

    .game-day-mode-actions .staff-toolbar-actions > * {
        flex: 1 1 auto;
    }
}

@media (max-width: 1000px) {
    .filter-bar--game-day-events {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .filter-bar--game-day-events .game-day-day-filter {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .filter-bar--game-day-events {
        grid-template-columns: minmax(0, 1fr);
    }

    .filter-bar--game-day-events .filter-actions .button {
        width: 100%;
    }

    .game-day-all-events-switch .button {
        flex: 1 1 0;
    }
}

.game-day-safety-summary {
    position: sticky;
    z-index: 12;
    top: 16px;
    display: grid;
    min-height: 44px;
    grid-template-columns: auto auto;
    gap: 2px 18px;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.game-day-safety-summary > .eyebrow {
    color: var(--olive);
    font-size: 9px;
}

.game-day-safety-summary > strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: var(--ink);
    font-family: var(--display);
    font-size: 16px;
    font-weight: 900;
    text-align: right;
}

.game-day-orbat-summary > span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.game-day-safety-summary > span:not(.eyebrow) {
    color: var(--ink);
    font-size: 10px;
}

.game-day-register-pages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.game-day-register-pages .button {
    min-width: 44px;
    min-height: 44px;
}

.game-day-attendance-counts > a {
    display: block;
    min-width: 44px;
    min-height: 44px;
    padding: 18px;
    border: 1px solid #686c61;
    color: #273021;
    background: #ffffff;
}

.game-day-attendance-counts > a:hover,
.game-day-attendance-counts > a[aria-current="page"] {
    border-color: #364a32;
    color: #244325;
    background: #d8e8d4;
}

.game-day-attendance-counts > a:focus-visible {
    outline: 3px solid #364a32;
    outline-offset: 3px;
}

.game-day-attendance-counts dl {
    grid-template-columns: 1fr;
}

.game-day-orbat-summary .button {
    min-width: 44px;
    min-height: 44px;
    padding: 9px 13px;
    font-size: 9px;
}

.game-day-back-link {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.game-day-pagination .pagination a {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.game-day-toolbar .button {
    min-width: 44px;
    min-height: 44px;
}

.game-day-primary-actions { align-items: flex-start; }

.game-day-more-actions { position: relative; }

.game-day-more-actions > summary,
.game-day-team-balance > summary {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid #686c61;
    color: #273021;
    background: #ffffff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-day-more-actions-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    min-width: 220px;
    gap: 8px;
    padding: 10px;
    border: 1px solid #686c61;
    background: #ffffff;
    box-shadow: 0 12px 30px rgb(8 11 8 / 18%);
}

.game-day-more-actions-panel .button,
.game-day-more-actions-panel form,
.game-day-more-actions-panel form .button { width: 100%; }

.game-day-workspace:has(.game-day-check-in-presentation) {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: 18px;
    align-items: start;
}

/* Core 0.9.5: on a wide screen the selected player follows the list. The
   region (the polled wrapper, never redrawn itself) sticks below the staff
   header and scrolls on its own when the panel is taller than the screen,
   as the editor rail does. Off at 760 pixels and below, where the panel is
   the phone sheet, and on a screen 500 pixels tall or less. */

.game-day-workspace:has(.game-day-check-in-presentation) > .game-day-player-region {
    position: sticky;
    top: calc(var(--staff-app-header-height) + 16px);
    max-height: calc(100dvh - var(--staff-app-header-height) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The staff header scrolls away at 1280 pixels and below. */

@media (max-width: 1280px) {
    .game-day-workspace:has(.game-day-check-in-presentation) > .game-day-player-region {
        top: 16px;
        max-height: calc(100dvh - 32px);
    }
}

/* After both rules above, so the off state wins. */

@media (max-width: 760px), (max-height: 500px) {
    .game-day-workspace:has(.game-day-check-in-presentation) > .game-day-player-region {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.game-day-check-in-queue {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-day-queue-link {
    position: relative;
    display: grid;
    min-width: 44px;
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid #686c61;
    color: #273021;
    background: #ffffff;
}

.game-day-queue-link:hover { color: #273021; background: #f3f1e9; }

.game-day-queue-link.is-selected {
    padding-left: 18px;
    border: 2px solid #364a32;
    border-left-width: 7px;
    background: #d8e8d4;
}

.game-day-queue-link.is-selected::after {
    position: absolute;
    top: 5px;
    right: 7px;
    color: #244325;
    content: "Selected";
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-day-queue-link:focus-visible,
.game-day-player-panel a:focus-visible,
.game-day-player-panel button:focus-visible,
.game-day-player-panel input:focus-visible,
.game-day-player-panel select:focus-visible,
.game-day-other-settle > summary:focus-visible,
.game-day-player-history > summary:focus-visible,
.game-day-more-actions > summary:focus-visible,
.game-day-team-balance > summary:focus-visible {
    outline: 3px solid #364a32;
    outline-offset: 3px;
}

.game-day-queue-identity { display: grid; gap: 2px; }

.game-day-queue-identity strong { font-family: var(--display); font-size: 17px; text-transform: uppercase; }

.game-day-queue-link .status-pill,
.game-day-attention-reason { width: fit-content; }

.game-day-attention-reason {
    grid-column: 1 / -1;
    padding: 5px 7px;
    border: 1px solid #a97831;
    color: #56380f;
    background: #fff4d8;
    font-weight: 800;
}

/* Core 0.7.1: the check-in desk. Search first, the count tabs, rows with
   every reason as a chip and one tap for a ready player, and the panel as a
   checklist with one action. */

.filter-bar--game-day-desk {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 0;
    border: 0;
    background: none;
}

/* "Find player" is visually hidden, so the button needs no label's room. */

.filter-bar--game-day-desk .filter-actions {
    padding-top: 0;
}

.filter-bar--game-day-desk input[type="search"] {
    min-height: 60px;
    border: 2px solid var(--olive);
    font-size: 18px;
}

.filter-bar--game-day-desk .game-day-search-submit {
    width: auto;
    min-height: 60px;
    gap: 8px;
    padding: 0 22px;
}

.game-day-desk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.game-day-desk-tabs > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0 14px;
    border: 1px solid #686c61;
    color: #273021;
    background: #ffffff;
}

.game-day-desk-tabs dl,
.game-day-desk-tabs dl > div {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 8px;
    border: 0;
}

.game-day-desk-tabs dt {
    color: #273021;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.game-day-desk-tabs dd {
    display: inline-grid;
    min-width: 26px;
    height: 26px;
    margin: 0;
    padding: 0 6px;
    place-items: center;
    border-radius: 13px;
    background: #ece8dc;
    font-size: 13px;
    font-weight: 850;
}

.game-day-desk-tabs > a[aria-current="page"] {
    border-color: var(--olive);
    color: #ffffff;
    background: var(--olive);
}

.game-day-desk-tabs > a[aria-current="page"] dt {
    color: #ffffff;
}

.game-day-desk-tabs > a[aria-current="page"] dd {
    color: var(--olive);
    background: #ffffff;
}

.game-day-queue-row {
    position: relative;
}

/* Core 0.9.5: "Go to {name}’s details" after the selected row. Off screen
   until focused, as the skip link is, then a 44-pixel link under the row. */

.game-day-player-skip {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.game-day-player-skip:focus {
    position: static;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 12px;
    overflow: visible;
    clip-path: none;
    color: #273021;
    background: #ffffff;
    font-weight: 750;
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.game-day-queue-row.has-one-tap .game-day-queue-link {
    padding-right: 156px;
}

.game-day-queue-row.is-banned .game-day-queue-link {
    border-left: 7px solid #a5231a;
    background: #fbeceb;
}

.game-day-queue-identity small {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
}

.game-day-queue-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    grid-column: 1;
}

.game-day-chip {
    display: inline-flex;
    padding: 4px 9px;
    align-items: center;
    border: 1px solid #cbc8bf;
    color: #3f4935;
    background: #f6f4ee;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
}

.game-day-chip--ok {
    border-color: #8fae7c;
    color: #244325;
    background: #e9f1e3;
}

.game-day-chip--warn {
    border-color: #a97831;
    color: #56380f;
    background: #fff4d8;
}

.game-day-chip--stop {
    border-color: #a5231a;
    color: #ffffff;
    background: #a5231a;
}

.game-day-queue-open {
    grid-column: 2;
    grid-row: 1;
    color: #273021;
    font-weight: 750;
    text-decoration: underline;
}

.game-day-one-tap {
    position: absolute;
    top: 50%;
    right: 14px;
    margin: 0;
    transform: translateY(-50%);
}

.game-day-one-tap .button {
    min-width: 128px;
    min-height: 48px;
}

.game-day-checklist {
    margin: 0;
    padding: 0;
    border-top: 1px solid #cbc8bf;
    list-style: none;
}

.game-day-checklist-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 12px 0;
    align-items: start;
    border-bottom: 1px solid #cbc8bf;
}

.game-day-checklist-item > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.game-day-checklist-item strong {
    font-size: 16px;
}

.game-day-checklist .table-action-link {
    width: fit-content;
    align-items: center;
}

.game-day-checklist-detail {
    color: #4f5448;
    font-size: 14px;
}

.game-day-checklist-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #4f7a36;
    font-size: 15px;
    font-weight: 900;
}

.game-day-checklist-item--warn .game-day-checklist-icon {
    background: #8a5f1c;
}

.game-day-checklist-item--stop .game-day-checklist-icon {
    background: #a5231a;
}

.game-day-checklist-item--info .game-day-checklist-icon {
    background: #5e6257;
}

.game-day-tick {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid #a97831;
    background: #fff4d8;
    font-size: 15px;
    font-weight: 650;
}

.game-day-tick input {
    width: 24px;
    height: 24px;
    margin: 0;
    flex: none;
}

.game-day-check-in-actions {
    display: grid;
    gap: 10px;
}

.game-day-player-panel .game-day-check-in-actions .button {
    width: 100%;
    min-height: 56px;
}

.game-day-player-panel .game-day-check-in-actions .game-day-check-in-submit {
    min-height: 64px;
    font-size: 15px;
}

.game-day-check-in-actions .button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.game-day-other-settle > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 750;
    text-decoration: underline;
}

.game-day-other-settle > div {
    display: grid;
    gap: 10px;
    padding-top: 6px;
}

.game-day-check-in-note {
    margin: 0;
    font-weight: 750;
}

.game-day-player-panel.is-banned {
    border: 2px solid #a5231a;
}

.game-day-player-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    font-size: 14px;
}

.game-day-player-links > a,
.game-day-player-history > summary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: #273021;
    cursor: pointer;
    font-weight: 750;
    text-decoration: underline;
}

.game-day-player-history[open] {
    flex-basis: 100%;
}

@media (max-width: 760px) {
    .game-day-shell .game-day-player-empty {
        display: none;
    }

    .game-day-desk-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-day-desk-tabs > a {
        justify-content: space-between;
        padding: 6px 12px;
    }

    .game-day-desk-tabs dl,
    .game-day-desk-tabs dl > div {
        width: 100%;
        justify-content: space-between;
    }

    .has-js .game-day-player-panel .game-day-check-in-actions {
        position: sticky;
        z-index: 1;
        bottom: -16px;
        margin: 0 -16px -16px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 2px solid var(--ink);
        background: #ffffff;
    }
}

@media (max-width: 620px) {
    .filter-bar--game-day-desk {
        grid-template-columns: minmax(0, 1fr);
    }

    .filter-bar--game-day-desk .game-day-search-submit {
        width: 100%;
    }

    .game-day-queue-row.has-one-tap .game-day-queue-link {
        padding-right: 14px;
        padding-bottom: 72px;
    }

    .game-day-one-tap {
        top: auto;
        right: 14px;
        bottom: 12px;
        left: 14px;
        transform: none;
    }

    .game-day-one-tap .button {
        width: 100%;
    }
}

.game-day-player-panel,
.game-day-player-empty { padding: 18px; border: 1px solid #686c61; background: #ffffff; }

.game-day-player-panel { display: grid; gap: 12px; }

.game-day-player-heading { display: grid; gap: 5px; }

.game-day-player-heading h2,
.game-day-player-heading p { margin: 0; }

.game-day-player-heading h2 { font-family: var(--display); font-size: 26px; text-transform: uppercase; }

.game-day-player-close { display: none; min-width: 44px; min-height: 44px; }

.game-day-player-section { border: 1px solid #cbc8bf; background: #f9f7f1; }

.game-day-player-section > summary {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    padding: 10px 12px;
    color: #273021;
    cursor: pointer;
    font-weight: 850;
    text-transform: uppercase;
}

.game-day-player-section[data-game-day-section-state="blocker"],
.game-day-player-section[data-game-day-section-state="validation"] { border-left: 5px solid #a97831; }

.game-day-player-section-body { display: grid; gap: 10px; padding: 0 12px 12px; }

.game-day-player-section-body p,
.game-day-player-section-body form { margin: 0; }

.game-day-shell .game-day-player-panel button,
.game-day-player-panel .button,
.game-day-player-panel .table-action-link,
.game-day-player-panel .waiver-check,
.game-day-shell .game-day-player-panel select { min-width: 44px; min-height: 44px; }

.game-day-check-in-form { display: grid; gap: 12px; }

.game-day-check-in-submit { width: 100%; }

.game-day-team-balance { margin-top: 16px; }

.game-day-team-balance > summary { width: 100%; justify-content: flex-start; }

.game-day-team-balance > .balance-grid {
    grid-template-columns: 1fr;
    margin-top: 14px;
}

.game-day-team-balance .balance-grid dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Three or more teams (core 0.27.0): compact cards, a smaller total and the
   figures in four columns, so eight teams stay a short list. */

.game-day-team-balance .balance-grid.is-compact article {
    padding: 14px 16px;
}

.game-day-team-balance .balance-grid.is-compact article > strong {
    margin: 8px 0 10px;
    font-size: 26px;
}

.game-day-team-balance .balance-grid.is-compact dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 10px;
}

.game-day-team-balance .balance-grid.is-compact dl div {
    padding-top: 6px;
}

.game-day-live { display: block; }

.game-day-live > [data-staff-region="game-day-summary"]:has(.game-day-safety-summary) {
    display: contents;
}

.game-day-list-region {
    display: grid;
    gap: 10px;
}

.game-day-fire-item {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(150px, 0.7fr) minmax(170px, 0.8fr) minmax(210px, 1fr) minmax(120px, 0.5fr);
    grid-template-areas:
        "group group group group group"
        "identity team presence overnight checkout"
        "details details details details details";
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid #686c61;
    color: #273021;
    background: #ffffff;
}

.game-day-fire-group-heading {
    grid-area: group;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #686c61;
}

.game-day-fire-group-heading strong,
.game-day-fire-label {
    color: #41483d;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-day-fire-identity {
    grid-area: identity;
    display: grid;
    gap: 4px;
}

.game-day-fire-identity > strong:first-of-type {
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

/* The "Stayed overnight" marker: a pill, not a full-width bar in the grid. */

.game-day-fire-identity > .status-pill { width: fit-content; }

.game-day-fire-team { grid-area: team; }

.game-day-fire-presence {
    grid-area: presence;
    display: grid;
    gap: 7px;
}

.game-day-fire-presence small { font-weight: 750; }

.game-day-fire-overnight {
    grid-area: overnight;
    display: grid;
    gap: 7px;
}

.game-day-fire-overnight .waiver-recorded { width: fit-content; }

.game-day-fire-overnight .attendance-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.game-day-fire-overnight .attendance-actions label {
    display: grid;
    gap: 4px;
}

.game-day-fire-checkout {
    grid-area: checkout;
    display: grid;
}

.game-day-fire-checkout button { width: 100%; }

.game-day-player-details {
    grid-area: details;
    border-top: 1px solid #cbc8bf;
}

.game-day-fire-item summary,
.game-day-site-closure > summary {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    padding: 10px 12px;
    color: #273021;
    cursor: pointer;
    font-weight: 850;
    text-transform: uppercase;
}

.game-day-player-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px 16px;
    margin: 0;
    padding: 0 12px 12px;
}

.game-day-player-details-grid div { min-width: 0; }

.game-day-player-details-grid dt {
    color: #41483d;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-day-player-details-grid dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
}

.game-day-player-details .game-day-player-actions { padding: 0 12px 12px; }

.game-day-site-closure {
    margin-top: 16px;
    border: 1px solid #686c61;
    background: #ffffff;
}

.game-day-site-closure-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 12px 12px;
}

.game-day-site-closure-action {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 12px;
    border: 1px solid #cbc8bf;
    background: #f9f7f1;
}

.game-day-site-closure-action p,
.game-day-site-closure-action form { margin: 0; }

.game-day-site-closure-action--danger {
    border-color: #9c554a;
    color: #5d231b;
    background: #f8e8e4;
}

.game-day-shell .game-day-fire-item button,
.game-day-shell .game-day-fire-item select,
.game-day-shell .game-day-fire-item summary {
    min-width: 44px;
    min-height: 44px;
}

.game-day-shell .game-day-fire-item summary:focus-visible,
.game-day-site-closure > summary:focus-visible {
    outline: 3px solid #364a32;
    outline-offset: 3px;
}

.game-day-shell .button-primary {
    color: var(--ink);
    background: var(--signal);
}

.game-day-shell .button-primary:hover {
    color: var(--ink);
    background: var(--signal);
}

.game-day-shell .button-primary:focus-visible {
    color: var(--ink);
    background: var(--signal);
}

.game-day-shell .button-disabled {
    color: #ffffff;
    border-color: var(--olive);
    background: var(--olive);
    opacity: 1;
}

.game-day-shell .button-disabled:disabled {
    color: #ffffff;
    background: var(--olive);
    opacity: 1;
}

.game-day-shell a:focus-visible,
.game-day-shell button:focus-visible,
.game-day-shell input:focus-visible,
.game-day-shell select:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 3px;
}

.game-day-group-heading th {
    padding: 10px 12px;
    border-top: 2px solid var(--olive);
    background: var(--paper-2);
    text-align: left;
}

.game-day-group-heading th > * {
    margin: 0 14px 0 0;
}

.game-day-group-heading strong {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-day-register button,
.game-day-records button,
.game-day-register .table-action-link,
.game-day-records .table-action-link,
.game-day-register .waiver-check,
.game-day-records .waiver-check,
.game-day-register select,
.game-day-records select {
    min-width: 44px;
    min-height: 44px;
}

.game-day-register a:focus-visible,
.game-day-records a:focus-visible,
.game-day-register button:focus-visible,
.game-day-records button:focus-visible,
.game-day-register input:focus-visible,
.game-day-records input:focus-visible,
.game-day-register select:focus-visible,
.game-day-records select:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.attendance-overdue {
    border-left: 5px double var(--ink);
}

.attendance-status-overdue {
    border: 2px solid currentColor;
    text-decoration: underline double;
    text-underline-offset: 3px;
}

.waiver-email-action {
    margin-bottom: 7px;
}

.waiver-email-action button {
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid #a97831;
    cursor: pointer;
    background: #fff4d8;
    color: #56380f;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.waiver-check {
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr;
    gap: 7px;
    align-items: center;
    padding: 7px 8px;
    border: 1px solid #a97831;
    background: #fff4d8;
    color: #56380f;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.waiver-check input {
    width: 15px;
    height: 15px;
    min-height: 0;
    margin: 0;
    accent-color: var(--olive);
}

.waiver-recorded {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #66805b;
    background: #e4eee0;
    color: #294322;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.waiver-recorded-manual {
    border-color: #a97831;
    color: #56380f;
    background: #fff4d8;
}

.waiver-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.waiver-status-rescinded {
    border-color: #9d442e;
    color: #783521;
    background: #f7dfd7;
}

.staff-local-nav {
    display: flex;
    gap: 6px;
    width: fit-content;
    padding: 5px;
    border: 1px solid var(--line);
    background: #e9e6dc;
}

.staff-local-nav a {
    min-height: 44px;
    padding: 12px 15px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.staff-local-nav a:hover,
.staff-local-nav a.is-active {
    color: var(--ink);
    background: white;
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.staff-context-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.32fr);
    gap: 26px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    background: #f3f0e7;
}

.staff-context-card > div {
    display: grid;
    align-content: start;
    gap: 5px;
}

.staff-context-card > div + div {
    padding-left: 24px;
    border-left: 1px solid var(--line);
}

.staff-context-card strong {
    font-size: 15px;
}

.staff-context-card p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.staff-context-card span {
    color: var(--muted);
    font-size: 12px;
}

.staff-context-card a {
    width: fit-content;
    color: var(--olive);
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.staff-context-card-warning {
    grid-template-columns: 1fr;
    border-color: #a97831;
    color: #56380f;
    background: #fff8e8;
}

.staff-form {
    display: grid;
    width: 100%;
    max-width: 980px;
    gap: 22px;
    margin-top: 24px;
}

.staff-form-section {
    display: grid;
    gap: 24px;
    padding: 28px;
    border: 1px solid var(--line);
    background: white;
}

.staff-form-section-heading {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.staff-form-section-heading > div {
    display: grid;
    gap: 4px;
}

.staff-form-section-heading h2,
.staff-form-section-heading h3 {
    margin: 0;
    font-size: 20px;
}

.staff-form-section-heading p,
.staff-section-intro {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.staff-section-intro a {
    color: var(--olive);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.staff-field {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.staff-conditional-panel {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.staff-conditional-panel {
    gap: 20px;
    padding: 22px;
    border: 1px solid var(--line);
    background: #f8f7f2;
}

.has-js .staff-conditional-panel.is-condition-disabled {
    display: none;
}

.staff-field-label,
.staff-field > legend {
    padding: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.staff-field input:not([type="checkbox"]):not([type="radio"]),
.staff-field select,
.staff-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #aaa69b;
    border-radius: 0;
    color: var(--ink);
    background: white;
    font: inherit;
    font-size: 14px;
}

.staff-field textarea {
    min-height: 180px;
    resize: vertical;
}

.staff-field input:focus-visible,
.staff-field select:focus-visible,
.staff-field textarea:focus-visible {
    border-color: var(--olive);
    outline: 3px solid rgb(85 102 58 / 18%);
    outline-offset: 1px;
}

.staff-field.has-error input,
.staff-field.has-error select,
.staff-field.has-error textarea,
.staff-field [aria-invalid="true"] {
    border-color: #a13a2b;
}

.staff-field-help {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}

.staff-field-error {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}

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

.staff-field-error {
    color: #8f2f22;
    font-weight: 800;
}

.staff-compact-control {
    max-width: 620px;
}

.staff-input-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
}

.staff-input-action .button {
    min-height: 48px;
    white-space: nowrap;
}

.staff-field .input-suffix {
    display: flex;
    min-width: 0;
}

/* The number keeps room for three figures and the unit's words wrap beside
   it, so a long unit ("hours before the start time") never squeezes the
   number on a narrow screen. */

.staff-field .input-suffix input {
    flex: 1 0 5.5rem;
    min-width: 0;
    border-right: 0;
}

.staff-field .input-suffix span {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    padding: 0 14px;
    color: var(--muted);
    border: 1px solid #aaa69b;
    background: #ece9df;
    font-size: 12px;
    font-weight: 800;
}

/* The staff field's focus on the staff surface (staff forms audit S2,
   2026-10-16). The control rule's :not() pair out-ranked the plain
   :focus-visible rule above, so the border stayed grey and an 18 % olive ring
   was all that showed, well under 3:1. This outranks both and draws a solid
   olive ring, offset 2 pixels, about 5:1 on white. .staff-settings-form and
   .staff-form-controls name the same :not() pair in their focus rules. The
   public account, which reuses .staff-field, keeps its own ring. */

.staff-page .staff-field input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.staff-page .staff-field input:focus-visible,
.staff-page .staff-field select:focus-visible,
.staff-page .staff-field textarea:focus-visible {
    border-color: var(--olive);
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

/* A staff field's rows start at its top. Beside a taller field in the same
   grid row (one with a counter or help), the grid would otherwise stretch its
   rows and the control with them. */

.staff-page .staff-field {
    align-content: start;
}

/* "Optional" in a staff field's label is the field requirement however it
   was written: a label still holding a bare em reads as the marked ones do
   (staff forms audit S6). */

.staff-page .staff-field-label > em {
    margin-left: 6px;
    color: #40503b;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* A unit before the number, such as £ (staff forms audit, 2026-10-16): the
   mirror of .input-suffix, written `<span class="input-suffix input-prefix">`
   with the unit's span first. The unit's id leads the input's
   aria-describedby, as a suffix's does. It replaces .currency-input on staff
   pages; the public site keeps .currency-input, which a theme styles. */

.input-suffix.input-prefix > span {
    border-right: 0;
    border-left: 1px solid #cbc8bf;
}

/* A prefix group written straight into an editor-dialect label is a direct
   child span, which `.form-grid label > span` would set as a 10-pixel
   small-capitals caption, shrinking the £ and the amount with it. */

.form-grid label > .input-suffix.input-prefix {
    color: var(--ink);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.staff-field .input-suffix.input-prefix input {
    border-right: 1px solid #aaa69b;
}

.staff-field .input-suffix.input-prefix span {
    flex: 0 0 auto;
    border-right: 0;
    color: var(--ink);
    font-size: 14px;
}

/* A staff field that is a group (a fieldset of radios or tick boxes) is
   frameless, as the date of birth's fieldset is: no browser frame, inset
   legend or padding, and its legend is the field's 13-pixel caption even
   inside .event-form, whose legend is a display heading (S8). */

.staff-page fieldset.staff-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.staff-page fieldset.staff-field > legend.staff-field-label {
    width: auto;
    margin: 0 0 9px;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

/* The check line at any depth (S4): a tick box or radio inside a staff
   field, a fieldset.staff-field, a conduct panel or a profile disclosure sits
   beside its words, in sentence case, on a row at least 44 pixels tall, as a
   box written straight into a form grid does. Before, .form-grid label and
   .conduct-panel label made such a label a column and set its words as a
   small-capitals caption. Nested layouts that differ on purpose are left
   alone: the removal confirmation row (.player-data-removal-confirm) is
   named here; the check-in timings toggle and a ticket card's boxes are
   never inside these containers. A settings form's bordered check line
   (.staff-settings-form .terms-check) keeps its card. */

.staff-page :is(.staff-field, .conduct-panel, .player-profile-disclosure) label.terms-check:not(.player-data-removal-confirm) {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-content: start;
    align-items: start;
    min-height: 44px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.staff-page :is(.staff-field, .conduct-panel, .player-profile-disclosure) label.terms-check:not(.player-data-removal-confirm) > span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.staff-page :is(.staff-field, .conduct-panel, .player-profile-disclosure) label.terms-check:not(.player-data-removal-confirm) > span > small {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.staff-page :is(.staff-field, .conduct-panel, .player-profile-disclosure) label.terms-check:not(.player-data-removal-confirm) input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
}

/* A team commander's "Remove this portrait" is the same check line, beside
   the current portrait (staff forms audit batch 6; it sat above its words in
   small capitals). */

.staff-page .commander-current-image label.terms-check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 44px;
    margin: 8px 0 0;
}

.staff-page .commander-current-image label.terms-check > span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.staff-page .commander-current-image label.terms-check input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
}

.staff-switch {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    /* The whole label is the target: at least 44 pixels tall (core 0.9.2, D5;
       a one-line switch measured 43 at 1280). */
    min-height: 44px;
    cursor: pointer;
}

.staff-switch > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.staff-switch-control {
    position: relative;
    width: 44px;
    height: 24px;
    margin-top: 1px;
    border: 1px solid #918e85;
    border-radius: 999px;
    background: #d8d5cc;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.staff-switch-control::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgb(0 0 0 / 26%);
    content: '';
    transition: transform 160ms ease;
}

.staff-switch input:checked + .staff-switch-control {
    border-color: var(--olive);
    background: var(--olive);
}

.staff-switch input:checked + .staff-switch-control::after {
    transform: translateX(20px);
}

/* --ink, not the translucent olive it was: the ring must reach 3:1 against
   the ground beside it on the staff and the public surfaces alike, and stay
   distinct from the olive track it surrounds. */

.staff-switch input:focus-visible + .staff-switch-control {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.staff-switch-copy {
    display: grid;
    gap: 3px;
}

.staff-switch-copy strong {
    font-size: 14px;
}

.staff-switch-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

/* Help under a switch starts where the switch's own text starts: past the
   44-pixel track and the 14-pixel gap of .staff-switch. Its lines keep
   .staff-field's 9-pixel rhythm. */

.staff-switch-help {
    display: grid;
    gap: 9px;
    padding-left: 58px;
}

.staff-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.staff-choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.staff-choice input {
    position: absolute;
    top: 16px;
    left: 15px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--olive);
}

.staff-choice > span {
    display: grid;
    min-height: 86px;
    gap: 5px;
    align-content: start;
    padding: 14px 14px 14px 44px;
    border: 1px solid #aaa69b;
    background: white;
}

.staff-choice input:checked + span {
    border-color: var(--olive);
    box-shadow: inset 3px 0 0 var(--olive);
    background: #f4f6ed;
}

.staff-choice input:focus-visible + span {
    outline: 3px solid rgb(85 102 58 / 20%);
    outline-offset: 2px;
}

.staff-choice strong {
    font-size: 13px;
}

.staff-choice small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

/* Scheduled publishing (core 0.4.0), the event editor's Publish section. */

/* Equal-size choice cards: every card in the grid as tall as the tallest,
   for peers whose uneven boxes would suggest a ranking. */

.staff-choice-grid--equal {
    grid-auto-rows: 1fr;
}

.staff-choice-grid--equal .staff-choice {
    display: flex;
}

.staff-choice-grid--equal .staff-choice > span {
    flex: 1 1 auto;
}

/* Settings › Home page announcement (core 0.10.0): the status line under the
   toolbar (one modifier per state), the three kind cards in a row, and the
   fields for one kind only, hidden with :has() on the checked kind so the
   form works without JavaScript. */

.announcement-status {
    display: flex;
    max-width: 980px;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid #b9c3a8;
    border-left-width: 6px;
    border-left-color: var(--olive);
    color: #2f3a24;
    background: #eef2e6;
}

.announcement-status--live .announcement-status-dot {
    background: var(--olive);
}

.announcement-status p {
    display: flex;
    flex: 1 1 260px;
    flex-wrap: wrap;
    gap: 2px 12px;
    align-items: baseline;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.announcement-status strong {
    font-size: 15px;
}

.announcement-status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--olive);
    box-shadow: 0 0 0 4px rgb(85 102 58 / 18%);
}

.announcement-status-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: underline;
}

.announcement-status-link:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.announcement-status--scheduled {
    border-color: #a97831;
    color: #56380f;
    background: #fff4d8;
}

.announcement-status--scheduled .announcement-status-dot {
    background: #a97831;
    box-shadow: 0 0 0 4px rgb(169 120 49 / 20%);
}

.announcement-status--stopped {
    border-color: #b9542f;
    color: #6b2814;
    background: #fbe9e1;
}

.announcement-status--stopped .announcement-status-dot {
    background: #b9542f;
    box-shadow: 0 0 0 4px rgb(185 84 47 / 18%);
}

.announcement-status--ended,
.announcement-status--off {
    border-color: #c4c0b5;
    border-left-color: #8a867b;
    color: #3d3a33;
    background: #f1efe9;
}

.announcement-status--ended .announcement-status-dot,
.announcement-status--off .announcement-status-dot {
    border: 2px solid #8a867b;
    background: transparent;
    box-shadow: none;
}

.announcement-kind-choices {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.announcement-kind-choices .staff-choice > span {
    min-height: 0;
    height: 100%;
}

.announcement-pick {
    margin-top: 18px;
}

.announcement-form:has(input[name="kind"][value="custom"]:checked) .announcement-pick {
    display: none;
}

.form-grid label > span .announcement-optional {
    margin-left: 0;
    color: inherit;
    font-style: normal;
    font-weight: inherit;
}

.announcement-form:has(input[name="kind"][value="game"]:checked) [data-announcement-for]:not([data-announcement-for~="game"]),
.announcement-form:has(input[name="kind"][value="site"]:checked) [data-announcement-for]:not([data-announcement-for~="site"]),
.announcement-form:has(input[name="kind"][value="custom"]:checked) [data-announcement-for]:not([data-announcement-for~="custom"]) {
    display: none;
}

.announcement-photo-current {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid var(--line);
    background: white;
}

.announcement-photo-current img {
    display: block;
    width: 192px;
    height: 108px;
    flex: 0 0 auto;
    object-fit: cover;
}

.announcement-photo-current > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    font-size: 14px;
}

.announcement-photo-current .terms-check {
    min-height: 44px;
    align-items: center;
}

@media (max-width: 760px) {
    .announcement-kind-choices {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .announcement-photo-current {
        flex-direction: column;
    }

    .announcement-photo-current img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Booking form questions (core 0.9.4, Settings › Player & booking settings):
   the address and the date of birth side by side, each a one-column stack
   of Don't ask, Optional and Required cards; one column on a phone. */

.form-questions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 28px;
}

.form-question-choices {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

.form-question-whatsapp {
    min-height: 44px;
}

.form-question-choices .staff-choice > span {
    min-height: 0;
}

.form-question.has-error .staff-choice > span {
    border-color: #a64028;
}

.form-questions > .fieldset-note {
    margin: -8px 0 0;
}

@media (max-width: 760px) {
    .form-questions-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

/* Moving a booking to another profile (core 0.9.0, views/staff/booking-move.php):
   the booking card, the two ways as link cards (no JavaScript needed), the
   search results, and the preview. Staff only. */

.booking-move-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 28px;
    border: 1px solid var(--line);
    background: white;
}

.booking-move-card > div {
    min-width: 0;
    padding: 14px 16px;
    border-left: 1px solid var(--line);
}

.booking-move-card > div:first-child {
    border-left: 0;
}

.booking-move-card dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.booking-move-card dd {
    display: flex;
    min-height: 44px;
    align-items: center;
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.booking-move-card dd a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: inherit;
}

.booking-move-section h2,
.booking-move-preview h2 {
    margin: 0 0 12px;
}

.booking-move-choice {
    position: relative;
    display: grid;
    min-height: 86px;
    gap: 5px;
    align-content: start;
    padding: 14px 14px 14px 44px;
    border: 1px solid #aaa69b;
    background: white;
    color: var(--ink);
    text-decoration: none;
}

.booking-move-choice::before {
    position: absolute;
    top: 16px;
    left: 15px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid #767268;
    border-radius: 50%;
    background: white;
    content: "";
}

.booking-move-choice[aria-current="true"] {
    border-color: var(--olive);
    box-shadow: inset 3px 0 0 var(--olive);
    background: #f4f6ed;
}

.booking-move-choice[aria-current="true"]::before {
    border-color: var(--olive);
    background: radial-gradient(circle, var(--olive) 0 4px, white 4.5px);
}

.booking-move-choice:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.booking-move-choice strong {
    font-size: 14px;
}

.booking-move-choice small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.booking-move-search {
    margin-top: 20px;
}

.booking-move-search small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.booking-move-results {
    margin: 16px 0 0;
    padding: 0;
    border: 1px solid var(--line);
    background: white;
    list-style: none;
}

.booking-move-results li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

.booking-move-results li:first-child {
    border-top: 0;
}

.booking-move-results li.booking-move-chosen {
    box-shadow: inset 3px 0 0 var(--olive);
    background: #f4f6ed;
}

.booking-move-results li > span {
    display: grid;
    min-width: 0;
    gap: 2px;
    overflow-wrap: anywhere;
}

.booking-move-results small {
    color: var(--muted);
    font-size: 13px;
}

.booking-move-results .button {
    flex: 0 0 auto;
    min-height: 44px;
}

.booking-move-form {
    margin-top: 32px;
}

/* The note follows the fields here, not the legend, so it takes none of
   .fieldset-note's pull upwards (which laid it over the last inputs). */

.booking-move-form .fieldset-note {
    margin: 12px 0 0;
}

.booking-move-preview {
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    background: white;
}

.booking-move-preview p {
    margin: 0 0 12px;
}

.booking-move-preview p:last-child {
    margin-bottom: 0;
}

.booking-move-warning {
    padding: 10px 12px;
    border-left: 3px solid #56380f;
    background: #fff4d8;
    color: #56380f;
}

.booking-move-note {
    color: var(--muted);
}

@media (max-width: 900px) {
    .booking-move-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-move-card > div:nth-child(3) {
        border-left: 0;
    }

    .booking-move-card > div:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 620px) {
    .booking-move-card {
        grid-template-columns: 1fr;
    }

    .booking-move-card > div {
        border-left: 0;
    }

    .booking-move-card > div + div {
        border-top: 1px solid var(--line);
    }

    .booking-move-results li {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .booking-move-form .event-form-actions {
        flex-direction: column-reverse;
    }

    .booking-move-form .event-form-actions .button {
        width: 100%;
        min-height: 44px;
    }
}

/* The Scheduled panel: Goes live, Before it goes live and the teaser
   summary. The editor's conditions hide it with the hidden attribute, which
   its own display would otherwise outrank. */

.event-schedule-panel {
    display: grid;
    gap: 16px;
    min-width: 0;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.event-schedule-panel[hidden],
.event-teaser-summary[hidden] {
    display: none;
}

.event-schedule-note {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
}

/* The new event's no-JavaScript sentence reads as its sibling paragraphs. */

.event-publish-help p.timing-rule-for {
    font-weight: 400;
}

.staff-confirmation {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid var(--line);
    background: #f8f7f2;
    font-size: 13px;
    line-height: 1.5;
}

.staff-confirmation input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin: 1px 0 0;
    accent-color: var(--olive);
}

.staff-confirmation.has-error {
    border-color: #a13a2b;
}

.staff-divider {
    border-top: 1px solid var(--line);
}

.staff-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.event-form.staff-settings-form {
    display: grid;
    width: 100%;
    max-width: 980px;
    gap: 22px;
}

.staff-settings-form .form-grid {
    gap: 18px;
}

/* A branding slot with nothing configured has no preview to show, so the panel
   states that in words instead of rendering an image. */

.staff-settings-form .branding-preview-empty {
    color: var(--muted);
    font-style: italic;
}

.staff-settings-form label:not(.terms-check) {
    display: grid;
    min-width: 0;
    gap: 8px;
    align-content: start;
}

.staff-settings-form label:not(.terms-check) > span:first-child {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.staff-settings-form input:not([type="checkbox"]):not([type="radio"]),
.staff-settings-form select,
.staff-settings-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #aaa69b;
    border-radius: 0;
    color: var(--ink);
    background: white;
    font: inherit;
    font-size: 14px;
}

.staff-settings-form textarea {
    min-height: 120px;
    resize: vertical;
}

.staff-settings-form input:focus-visible,
.staff-settings-form input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.staff-settings-form select:focus-visible,
.staff-settings-form textarea:focus-visible {
    border-color: var(--olive);
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.staff-settings-form .has-error input,
.staff-settings-form .has-error select,
.staff-settings-form .has-error textarea,
.staff-settings-form [aria-invalid="true"] {
    border-color: #a13a2b;
}

.staff-settings-form label > small,
.staff-settings-form .field-help,
.staff-settings-form .fieldset-note,
.staff-settings-form .conditional-reason {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.staff-settings-form label.has-error > small:last-child,
.staff-settings-form .field-error {
    color: #8f2f22;
    font-size: 12px;
    font-weight: 800;
}

.staff-settings-form .terms-check {
    min-height: 50px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: #f8f7f2;
    font-size: 13px;
    line-height: 1.5;
}

.staff-settings-form .terms-check input {
    accent-color: var(--olive);
}

.staff-settings-form .terms-check small {
    color: var(--muted);
    font-size: 12px;
}

.staff-settings-form .ticket-policy-notice {
    margin: 0;
}

.staff-settings-form fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    align-items: center;
}

.staff-settings-form fieldset legend {
    flex-basis: 100%;
}

.staff-settings-form fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
}

/* The design token editor.
   Every colour and typeface on this screen is one the public site is drawn in,
   so no rule here may read one. A control coloured by `var(--ink)` would change
   as the administrator edited ink, and would report the change as applied
   before it was saved; a legend set in `var(--display)` would put the public
   site's headline face on a staff screen. The staff application is
   product-owned and looks the same on every installation, so these rules carry
   literals. They are the values `site.css` declares for the core design, which
   is what an unconfigured installation renders in and what every staff page
   keeps once an installation configures something. */

.staff-settings-form .design-token {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgb(8 11 8 / 20%);
    background: #f8f7f2;
}

.staff-settings-form .design-token.has-error {
    border-color: #a13a2b;
}

/* The public form's legend is a section rule — uppercase, underlined, set in
   the display face. A token here is a field label, and it names the custom
   property beside it, so it reads as one. `inherit` rather than a second font
   stack: the staff application's type is whatever the document is set in, which
   on a staff page is the core value and not the installation's. */

.staff-settings-form .design-token legend {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    color: #080b08;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.staff-settings-form .design-token legend code,
.staff-settings-form label.design-token-reset code {
    color: #5e6257;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* A colour picker is a swatch, not a text field, and the form's inputs are full
   width. One stretched to 980px reads as a banner rather than as the colour it
   is holding. The font select keeps a readable width for the same reason: the
   stacks it lists are long, and the choice is a short one. */

.staff-settings-form .design-token > label {
    max-width: 420px;
}

.staff-settings-form .design-token input[type="color"] {
    width: 96px;
    min-height: 44px;
    padding: 4px;
    cursor: pointer;
}

/* The reset box is a decision about the field above it, so it sits under that
   field as one line rather than as another stacked control. */

.staff-settings-form label.design-token-reset {
    display: flex;
    max-width: none;
    align-items: baseline;
    gap: 8px;
    color: #5e6257;
    font-size: 12px;
    line-height: 1.5;
}

.staff-settings-form label.design-token-reset input {
    flex: none;
    accent-color: #364a32;
}

.staff-settings-form .design-token > small {
    max-width: 640px;
    margin: 0;
    color: #5e6257;
    font-size: 12px;
    line-height: 1.55;
}

.branding-identity-toggle {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.branding-identity-toggle small {
    grid-column: 2;
}

.staff-settings-form > .event-form-actions {
    margin-top: 2px;
    padding-top: 22px;
}

.has-js .staff-settings-form [data-condition-target].is-condition-disabled {
    display: none;
}

.staff-settings-form .navigation-setting-card,
.staff-settings-form .payment-setting-card {
    border-color: var(--line);
    background: #f8f7f2;
}

.staff-settings-form .navigation-setting-card select {
    min-height: 48px;
    font-size: 14px;
}

.staff-settings-form .payment-setting-card label > small,
.staff-settings-form .navigation-setting-card > div small,
.staff-settings-form .payment-report-defaults small {
    font-size: 12px;
    line-height: 1.5;
}

.staff-settings-form .rule-section-editor {
    margin: 0 0 16px;
    background: white;
}

.staff-settings-form .rule-section-header {
    font-size: 20px;
}

.staff-settings-form .rule-section-header > span {
    font-size: 11px;
}

.staff-settings-related {
    margin-top: 64px;
    padding-top: 42px;
    border-top: 2px solid var(--line);
}

.settings-hub .staff-settings-nav {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.settings-hub .staff-settings-nav a {
    display: grid;
    min-height: 108px;
    gap: 6px;
    align-content: start;
    padding: 20px;
    border-color: var(--line);
    background: white;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.settings-hub .staff-settings-nav a:hover,
.settings-hub .staff-settings-nav a:focus-visible {
    border-color: var(--olive);
    box-shadow: 0 8px 20px rgb(22 29 20 / 8%);
    transform: translateY(-2px);
}

.settings-hub .staff-settings-nav strong {
    font-size: 14px;
}

.settings-hub .staff-settings-nav span {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.agreement-active-card {
    display: grid;
    gap: 18px;
    padding: 24px;
    border: 1px solid var(--line);
    background: white;
}

.agreement-active-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

.agreement-active-card dl div {
    min-width: 0;
}

.agreement-active-card dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.agreement-active-card dd {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.agreement-active-card code,
.waiver-version-history code,
.waiver-hash {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.staff-table td > .waiver-hash {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.45;
}

.staff-disclosure {
    border-top: 1px solid var(--line);
}

.staff-disclosure > summary {
    padding: 15px 0;
    color: var(--olive);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.agreement-version-editor > summary {
    width: fit-content;
    list-style: none;
    cursor: pointer;
}

.agreement-version-editor > summary::-webkit-details-marker {
    display: none;
}

.agreement-version-editor[open] > summary {
    display: none;
}

.waiver-agreement-form {
    min-width: 0;
    margin-top: 20px;
}

.waiver-agreement-form textarea {
    width: 100%;
    line-height: 1.55;
}

.legal-drafting-guidance {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid #a97831;
    background: #fff8e8;
    color: #56380f;
}

.legal-drafting-guidance > strong,
.legal-editor-heading span,
.legal-editor-preview > span {
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.legal-drafting-guidance p {
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
}

.legal-drafting-guidance > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.legal-drafting-guidance a {
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-document-editor {
    display: grid;
    gap: 0;
    min-width: 0;
    border: 1px solid var(--line);
    background: #f7f5ef;
}

.legal-document-editor.has-error {
    border-color: #a13a2b;
}

.legal-editor-heading {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    border-bottom: 1px solid var(--line);
    background: white;
}

.legal-editor-heading div {
    display: grid;
    gap: 4px;
}

.legal-editor-heading small {
    max-width: 680px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.legal-editor-heading .button {
    flex: 0 0 auto;
}

.legal-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
    background: #e8e5dc;
}

.legal-editor-toolbar button {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #aaa69b;
    color: var(--ink);
    background: white;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
}

.legal-editor-toolbar button:hover,
.legal-editor-toolbar button:focus-visible {
    border-color: var(--olive);
    background: #f7f8f1;
}

.legal-editor-toolbar > span {
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
}

.legal-editor-workspace {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.legal-editor-workspace > label,
.legal-editor-preview {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.legal-editor-workspace textarea {
    min-height: 560px;
    padding: 18px;
    resize: vertical;
    border-color: #aaa69b;
    background: white;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    tab-size: 4;
}

.legal-editor-preview {
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.legal-editor-preview .waiver-agreement {
    max-height: 640px;
    margin: 0;
    padding: clamp(20px, 4vw, 42px);
    background: white;
}

.legal-document-editor > .field-error {
    padding: 0 18px 18px;
}

.waiver-version-history {
    margin-top: 18px;
    border: 1px solid var(--line);
    background: white;
}

.waiver-version-history summary {
    padding: 16px 18px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.filter-bar--waivers {
    grid-template-columns: minmax(220px, 1.5fr) minmax(220px, 1fr) minmax(170px, 0.8fr) auto;
    margin-bottom: 24px;
}

.waiver-status-signed {
    color: #294322;
    background: #e4eee0;
}

.waiver-status-manual {
    color: #56380f;
    background: #fff4d8;
}

.waiver-status-outstanding {
    color: #782f25;
    background: #f0ddd8;
}

.waiver-no-document {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.waiver-event-use + .waiver-event-use {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.waiver-event-use > strong,
.waiver-event-use > small {
    display: block;
}

.waiver-event-use > small {
    margin-top: 3px;
    color: var(--muted);
}

.waiver-records-table {
    min-width: 1200px;
}

.waiver-record-actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.attendance-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.offline-settlement {
    display: grid;
    flex: 1 0 130px;
    gap: 4px;
}

.offline-settlement span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.offline-settlement select {
    min-height: 30px;
    padding: 5px 7px;
    border: 1px solid var(--line);
    background: white;
    font-size: 9px;
}

.attendance-actions .attendance-settle {
    border-color: #4d6540;
    color: white;
    background: var(--olive);
}

.attendance-actions button,
/* A table's own action button is a 44-pixel target (staff forms audit
   batches 3 and 7: Deactivate and Delete note and Reset 2FA and Revoke). The
   row stays dense through tight horizontal padding rather than a shorter
   target. */
.table-danger-button {
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    cursor: pointer;
    background: var(--paper-2);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.attendance-actions button:first-of-type {
    color: white;
    background: var(--olive);
}

.attendance-actions button:nth-of-type(2),
.table-danger-button {
    color: #782f25;
    background: #f0ddd8;
}

.game-day-shell .game-day-register .waiver-email-action button,
.game-day-shell .game-day-records .waiver-email-action button,
.game-day-shell .game-day-register .attendance-actions button,
.game-day-shell .game-day-records .attendance-actions button,
.game-day-shell .game-day-register .offline-settlement select,
.game-day-shell .game-day-records .offline-settlement select {
    min-width: 44px;
    min-height: 44px;
}

.game-day-shell .game-day-fire-item button,
.game-day-shell .game-day-fire-item select {
    min-width: 44px;
    min-height: 44px;
}

.staff-toolbar .game-day-back-link,
.staff-toolbar .game-day-back-link:hover,
.staff-toolbar .game-day-back-link:focus-visible {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}

.game-day-shell .game-day-pagination .pagination span[aria-disabled="true"] {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    background: var(--paper);
    opacity: 1;
}

.attendance-status-attended {
    color: #244325;
    background: #d8e8d4;
}

.attendance-status-not_attended {
    color: #782f25;
    background: #f0ddd8;
}

.status-form select {
    min-width: 112px;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 10px;
}

.status-form button {
    border: 0;
    color: white;
    cursor: pointer;
    background: var(--ink);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.team-table {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.staff-empty {
    padding: 42px;
    border: 1px solid var(--line);
    color: var(--muted);
    background: white;
}

.staff-empty h3 {
    margin: 0 0 8px;
    font-family: var(--display);
    font-size: 26px;
    text-transform: uppercase;
}

.recovery-shell {
    max-width: 900px;
}

.recovery-code-panel {
    padding: 30px;
    border: 2px solid var(--olive);
    background: white;
}

.recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.recovery-code-grid code {
    padding: 12px;
    color: white;
    background: var(--ink);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-align: center;
}

.recovery-code-panel > p {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.recovery-code-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.recovery-code-actions span {
    max-width: 410px;
    color: var(--muted);
    font-size: 10px;
}

.recovery-confirmation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--line);
    background: white;
}

.staff-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.staff-action-card {
    display: flex;
    min-height: 300px;
    padding: 28px;
    border: 1px solid var(--line);
    flex-direction: column;
    justify-content: space-between;
    background: white;
}

.staff-action-card h3 {
    margin: 22px 0 10px;
    font-family: var(--display);
    font-size: 28px;
    text-transform: uppercase;
}

.staff-action-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.staff-action-card small {
    color: var(--muted);
}

.staff-action-card-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.empty-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.event-form {
    max-width: 980px;
}

.captured-mail-list {
    display: grid;
    gap: 18px;
}

.captured-mail-list article {
    padding: 24px;
    color: white;
    background: var(--ink);
}

.captured-mail-list pre {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.captured-mail-action {
    margin-bottom: 20px;
}

.fieldset-note {
    margin: -10px 0 22px;
    color: var(--muted);
    font-size: 12px;
}

.event-form fieldset {
    margin-bottom: 60px;
}

.file-field input {
    padding: 14px;
    border: 1px dashed #b6b3a9;
    background: var(--paper-2);
}

.team-builder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.team-builder-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.event-form fieldset.team-builder-card {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--line);
}

/* Add a team and Remove {team} (core 0.27.0; docs/design-language.md, Add
   and remove team). Remove sits at a card's foot under a rule, so it is never
   the first thing in the card; Add a team and the count follow the cards on a
   dashed bar, as "+ Add a game day" does. */

.team-builder-card-remove {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.team-builder-card-remove[hidden],
.team-builder-card[hidden],
.team-builder-add [hidden] {
    display: none;
}

.team-builder-remove {
    min-height: 44px;
    padding-inline: 16px;
    font-size: 11px;
}

.team-builder-card-kept {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.team-builder-add {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding: 18px;
    border: 1px dashed #b6b3a9;
}

/* Booking roles (core 0.30.0): the Roles block of the event editor, the
   template editor and Event defaults (views/staff/_event-roles.php), and a
   team card's places by role (views/staff/_team-role-places.php). See
   docs/design-language.md, Roles and Places by role. */

.event-roles {
    display: grid;
    gap: 14px;
    margin: 24px 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.event-roles h3 {
    margin: 0;
    font-size: 16px;
}

.event-roles .staff-switch-copy strong,
.event-roles .staff-switch-copy small {
    letter-spacing: normal;
    text-transform: none;
}

.event-roles .staff-switch-copy strong {
    color: var(--ink);
    font-size: 14px;
}

.event-roles .staff-switch-copy small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.event-roles-list {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.event-role-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 14rem) minmax(0, 1fr) minmax(0, 13rem);
    grid-template-areas:
        "kind name line actions"
        ". places places actions";
    gap: 10px 14px;
    align-items: end;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.event-role-row--defaults {
    grid-template-columns: 8rem minmax(0, 12rem) minmax(0, 1fr) 9rem minmax(0, 13rem);
    grid-template-areas:
        "kind name line new actions"
        ". places places places actions";
}

.event-role-row > .event-role-kind {
    grid-area: kind;
}

.event-role-row > .staff-field:nth-of-type(1) {
    grid-area: name;
}

.event-role-row > .staff-field:nth-of-type(2) {
    grid-area: line;
}

.event-role-row > .staff-field:nth-of-type(3) {
    grid-area: new;
}

.event-role-row > .event-role-places-choice {
    grid-area: places;
}

.event-role-row > .event-role-actions {
    grid-area: actions;
    align-self: center;
}

.event-form .event-roles-list,
.event-form .event-role-places-choice,
.event-form .team-role-places {
    margin: 0;
}

.event-form .event-role-places-choice > legend,
.event-roles .event-role-places-choice > legend {
    width: auto;
    margin: 0 14px 0 0;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    text-transform: none;
}

.event-role-kind {
    display: grid;
    gap: 3px;
    align-self: center;
    margin: 0;
}

.event-role-kind small,
.event-role-remainder-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.event-role-places-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.event-role-places-choice > legend {
    float: left;
}

.event-role-places-choice .terms-check {
    margin-bottom: 0;
    min-height: 44px;
    align-items: center;
}

.event-role-places-choice .event-role-remainder-note {
    flex-basis: 100%;
}

.event-role-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.event-role-actions .button {
    min-height: 44px;
    gap: 0.4em;
}

.event-role-actions .team-builder-card-kept {
    max-width: 16rem;
    margin: 0;
    font-size: 12px;
}

.event-role-add {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.event-roles-confirm {
    display: grid;
    gap: 8px;
    padding: 16px 20px;
    border-left: 4px solid #7b281b;
    background: #eee0d2;
    color: #5e2118;
}

.event-roles-confirm p {
    margin: 0;
}

.event-roles-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.event-roles-confirm-actions .button {
    min-height: 44px;
}

.team-role-places {
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    min-width: 0;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
}

.team-role-places legend {
    padding: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* A table with day columns scrolls inside its card, never the page. */

.team-role-places-scroll {
    overflow-x: auto;
}

.team-role-places-table {
    width: 100%;
    border-collapse: collapse;
}

.team-role-places-table th,
.team-role-places-table td {
    padding: 6px 8px 6px 0;
    text-align: left;
    vertical-align: middle;
}

.team-role-places-table thead th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.team-role-places-table tbody th {
    font-size: 14px;
    font-weight: 600;
}

.team-role-places-table input {
    width: 100%;
    min-width: 4.5rem;
    min-height: 44px;
}

.team-role-places-table td.is-unbalanced input {
    border-color: #9b3424;
}

.team-role-remainder {
    display: block;
    min-width: 4.5rem;
    color: var(--muted);
    font-size: 13px;
}

.team-role-places-table tfoot th,
.team-role-places-table tfoot td {
    border-top: 2px solid var(--ink);
    padding-top: 10px;
}

.team-role-total strong,
.team-role-total small {
    display: block;
}

.team-role-total strong {
    font-size: 14px;
}

.team-role-total small {
    color: var(--muted);
    font-size: 12px;
}

.team-role-total.is-unbalanced strong,
.team-role-total.is-unbalanced small,
.team-role-places .field-error {
    color: #9b3424;
}

.team-role-places .field-error p {
    margin: 0;
}

@media (max-width: 960px) {
    .event-role-row,
    .event-role-row--defaults {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "kind kind"
            "name line"
            "places places"
            "new new"
            "actions actions";
    }

    .event-role-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .event-role-row,
    .event-role-row--defaults {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "kind"
            "name"
            "line"
            "places"
            "new"
            "actions";
        gap: 10px;
    }

    .event-roles-confirm {
        padding: 14px 16px;
    }

    .event-roles-confirm-actions .button {
        width: 100%;
    }
}

.team-builder-add:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.team-builder-add-button {
    min-height: 44px;
}

.team-builder-add .field-error {
    flex-basis: 100%;
    margin: 0;
}

.team-builder-count,
.team-builder-presets-used {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.team-builder-presets-used a {
    color: var(--ink);
}

/* The two branches of the capacity step. Both are a <fieldset> rather than a
   <div> so that `disabled` cascades natively to every control inside: the generic
   data-condition machinery disables a target's controls one at a time, and the
   nested targets these two contain -- a team's dress-code replacement, the
   capacity number beside its mode -- would otherwise re-enable their own contents
   inside a branch the club has switched off, and submit them. The margin is
   removed because `.event-form fieldset` carries the 60px gap that separates the
   numbered steps, and these are inside a step rather than one of them. */

/* `.event-capacity-field` joined these when it stopped being a div. `disabled`
   on a div is inert, so that wrapper hid the capacity number without barring
   it and a hidden-but-enabled input still submits -- but a fieldset inherits
   `.event-form fieldset`'s 60px bottom margin, which a div never had. Resetting
   it here keeps the conversion invisible, which is the point: the element
   changed to make the attribute work, not to move anything. */

.event-form fieldset.event-capacity-settings,
.event-form fieldset.event-team-settings,
.event-form fieldset.event-capacity-field {
    margin: 0;
    padding: 0;
    border: 0;
}

/* The card's heading, inside its border. A fieldset draws its legend across
   its top border, which cut a gap in the card's frame, and `.event-form legend`
   gave it a numbered section's rule and spacing. Floated, as `.event-choice >
   legend` is, it is a grid item like the fields under it (core 0.25.3). */

.team-builder-card > legend {
    float: left;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.team-builder-card label:first-of-type {
    grid-column: 1 / -1;
}

.team-builder-card .team-camo-field {
    grid-column: 1 / -1;
}

.team-capacity-note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.team-builder-card textarea {
    min-height: 100px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
    resize: vertical;
}

.commander-editor-list {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.commander-editor-card {
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.commander-editor-card > header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.commander-editor-card > header > strong {
    font-family: var(--display);
    font-size: 17px;
    text-transform: uppercase;
}

.commander-editor-card > header > div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.commander-current-image {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    background: white;
}

.commander-current-image img {
    width: 88px;
    height: 88px;
    object-fit: cover;
}

.commander-current-image > div > strong {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    text-transform: uppercase;
}

.commander-remove {
    margin-top: 4px;
    color: #721a12;
}

.event-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.api-token-reveal {
    margin-bottom: 40px;
    padding: 22px;
    border: 2px solid var(--signal-dark);
    background: #eee9d1;
}

.api-token-reveal code {
    display: block;
    margin: 12px 0;
    padding: 13px;
    overflow-wrap: anywhere;
    color: white;
    background: var(--ink);
}

.staff-user-form,
.bulk-email-form {
    padding: 28px;
    border: 1px solid var(--line);
    background: white;
}

.ban-review-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.ban-review-card {
    border: 1px solid var(--line);
    background: white;
}

.ban-review-card > summary {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
}

.ban-review-card > summary::-webkit-details-marker {
    display: none;
}

.ban-review-card > summary:hover {
    background: var(--paper-2);
}

.ban-review-card > summary:focus-visible {
    outline: 3px solid var(--signal-dark);
    outline-offset: 2px;
}

.ban-review-summary-event,
.ban-review-summary-link,
.ban-review-summary-score {
    display: grid;
    gap: 4px;
}

.ban-review-summary-event strong,
.ban-review-summary-link strong {
    font-size: 13px;
}

.ban-review-summary-event small,
.ban-review-summary-link span,
.ban-review-summary-score span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ban-review-summary-score strong {
    font-size: 16px;
}

.ban-review-expand {
    color: var(--olive);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ban-review-expand::after {
    content: " +";
}

.ban-review-card[open] .ban-review-expand::after {
    content: " −";
}

.ban-review-body {
    padding: 24px;
    border-top: 1px solid var(--line);
    background: var(--paper-2);
}

.ban-review-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ban-review-context-grid article {
    padding: 20px;
    border: 1px solid var(--line);
    background: white;
}

.ban-review-context-grid h3,
.ban-review-form-heading h3 {
    margin: 5px 0 16px;
    font-family: var(--display);
    font-size: 22px;
    text-transform: uppercase;
}

.ban-review-context-grid dl {
    margin: 0 0 14px;
}

.ban-review-context-grid dl > div {
    padding: 9px 0;
    border-top: 1px solid var(--line);
}

.ban-review-context-grid dt,
.ban-review-context-grid dd {
    margin: 0;
}

.ban-review-context-grid dt {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ban-review-context-grid dd {
    margin-top: 3px;
    overflow-wrap: anywhere;
    font-size: 11px;
    font-weight: 750;
}

.ban-review-context-grid article > p {
    font-size: 11px;
    line-height: 1.55;
}

.ban-review-provenance {
    color: var(--muted);
}

.ban-review-form {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(280px, 1.3fr) auto;
    gap: 16px;
    align-items: end;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    background: white;
}

.ban-review-form-heading {
    grid-column: 1 / -1;
}

.ban-review-form-heading h3 {
    margin-bottom: 0;
}

.ban-review-form label {
    display: grid;
    gap: 7px;
}

.ban-review-form label > span {
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ban-review-form label > small {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.4;
}

.ban-review-form .button {
    min-height: 44px;
}

@media (max-width: 900px) {
    .event-form.staff-settings-form > .staff-form-section {
        padding: 24px;
    }

    .staff-settings-form .form-grid.three-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ban-review-card > summary {
        grid-template-columns: 1fr 1fr;
    }

    .ban-review-expand {
        justify-self: end;
    }

    .ban-review-context-grid,
    .ban-review-form {
        grid-template-columns: 1fr;
    }

    .ban-review-form-heading {
        grid-column: 1;
    }
}

@media (max-width: 620px) {
    .staff-input-action {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .event-form.staff-settings-form > .staff-form-section {
        padding: 20px;
    }

    .staff-settings-form .form-grid,
    .staff-settings-form .form-grid.three-column {
        grid-template-columns: 1fr;
    }

    .staff-settings-form .span-full {
        grid-column: auto;
    }

    .staff-settings-form > .event-form-actions {
        flex-direction: column;
    }

    .staff-settings-form > .event-form-actions .button {
        width: 100%;
    }

    .filter-date-range {
        grid-template-rows: var(--filter-label-height) auto;
    }

    .filter-date-controls {
        grid-template-columns: 1fr;
        height: auto;
    }

    .ban-review-card > summary {
        grid-template-columns: 1fr;
    }

    .ban-review-expand {
        justify-self: start;
    }

    .ban-review-body {
        padding: 16px;
    }
}

.conduct-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.conduct-ban-panel {
    grid-column: 1 / -1;
}

.player-booking-workspace-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
    gap: 18px;
}

.player-booking-workspace-layout--single {
    grid-template-columns: minmax(0, 1fr);
}

.player-booking-rail {
    display: grid;
    align-content: start;
    border-right: 1px solid var(--line);
}

.player-booking-rail-link {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}

.player-booking-rail-link.is-selected {
    border-left: 4px solid var(--signal);
    background: var(--paper);
}

.player-booking-compact-selector {
    display: none;
}

.player-booking-detail {
    display: grid;
    gap: 18px;
}

.player-booking-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.booking-history-current {
    box-shadow: inset 4px 0 0 var(--signal);
    background: var(--paper);
}

.player-information-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.player-information-grid article,
.player-booking-detail-grid article {
    padding: 24px;
    border: 1px solid var(--line);
    background: white;
}

.player-information-grid h3,
.player-booking-detail-grid h3 {
    margin: 5px 0 18px;
    font-family: var(--display);
    font-size: 24px;
    text-transform: uppercase;
}

.player-information-grid dl,
.player-booking-detail-grid dl {
    margin: 0;
}

.player-information-grid dl > div,
.player-booking-detail-grid dl > div {
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.player-information-grid dt,
.player-information-grid dd,
.player-booking-detail-grid dt,
.player-booking-detail-grid dd {
    margin: 0;
}

.player-information-grid dt,
.player-booking-detail-grid dt {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.player-information-grid dd,
.player-booking-detail-grid dd {
    margin-top: 3px;
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: 750;
}

.player-information-empty {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

/* Profile header with fact tiles (core 0.9.0, the staff player profile).
   Left, the pills and the three things staff reach for, each a 44-pixel
   mailto: or tel: link; right, four fact tiles, each a link to its section
   whose text reads in full. Status is always in words; a tile that needs
   attention adds the danger colour beside its words. One column below 760
   pixels, the tiles then a 2 × 2 grid. */

.player-profile-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 24px;
    border: 1px solid var(--line);
    background: white;
}

.player-profile-who {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
    padding: 20px 24px;
}

.player-profile-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.player-profile-contact {
    display: grid;
    gap: 0;
    margin: 0;
}

.player-profile-contact > div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 44px;
}

.player-profile-contact dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.player-profile-contact dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 750;
}

.player-profile-contact dd a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.player-profile-more {
    color: var(--muted);
    font-weight: 700;
}

.player-profile-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

.player-profile-fact {
    display: grid;
    gap: 4px;
    align-content: start;
    min-width: 0;
    min-height: 44px;
    padding: 16px 20px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
}

.player-profile-fact:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.player-profile-fact:nth-child(n + 3) {
    border-bottom: 0;
}

.player-profile-fact > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.player-profile-fact > strong {
    font-family: var(--display);
    font-size: 26px;
    line-height: 1.05;
    text-transform: uppercase;
}

.player-profile-fact > small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.player-profile-fact.is-danger > strong,
.player-profile-fact.is-danger > small {
    color: #8f3024;
}

.player-profile-fact:hover {
    background: #f4f2ec;
}

.player-profile-fact:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: -3px;
}

@media (min-width: 760px) {
    .player-profile-head {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    /* Staff who see the person but not the record (check-in staff, 2026-10-13): no tiles beside them. */
    .player-profile-head.player-profile-head--contact-only {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-profile-facts {
        border-top: 0;
        border-left: 1px solid var(--line);
    }
}

/* The profile toolbar: Edit details beside the More actions menu, whose
   summary is a button rather than the table rows' icon. Without JavaScript
   the menu opens in place and lists its links. */

.player-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: start;
}

.player-profile-actions .button {
    min-height: 44px;
}

.staff-action-menu.player-profile-menu,
.staff-action-menu.player-profile-menu[open],
.staff-action-menu.player-profile-menu.is-portalled[open] {
    width: auto;
    flex-basis: auto;
}

.staff-action-menu.player-profile-menu > summary {
    width: auto;
    min-height: 44px;
    padding: 13px 20px;
    color: var(--ink);
    border-color: var(--ink);
    background: white;
    font-size: 12px;
    letter-spacing: 0.09em;
}

.staff-action-menu.player-profile-menu > summary:hover,
.staff-action-menu.player-profile-menu > summary:focus-visible,
.staff-action-menu.player-profile-menu[open] > summary {
    margin-left: 0;
    color: white;
    background: var(--ink);
}

.player-profile-menu-panel > a {
    display: flex;
    min-height: 44px;
    align-items: center;
    font-size: 12px;
}

.player-profile-menu-panel > a.staff-action-menu-danger {
    color: #8f3024;
}

.player-profile-menu-panel > a.staff-action-menu-danger:hover,
.player-profile-menu-panel > a.staff-action-menu-danger:focus-visible {
    color: white;
    background: #8f3024;
}

.player-profile-nav {
    margin-bottom: 8px;
}

.player-profile-emails-note {
    margin: 16px 0;
}

/* A profile's email addresses (core 0.9.0): the staff side of the Email
   address list. Status in words, every action its own POST form at 44
   pixels; a profile without an address shows where its emails go and two
   cards, side by side and stacked on a phone. */

.staff-email-count {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.staff-email-list {
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    list-style: none;
    background: white;
}

.staff-email-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.staff-email-list > li:last-child {
    border-bottom: 0;
}

.staff-email-list > li > div {
    min-width: 0;
}

.staff-email-address {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.staff-email-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

.staff-email-meta .status-pill.staff-email-main {
    color: white;
    background: var(--ink);
}

.staff-email-meta .status-pill.staff-email-waiting {
    color: #56380f;
    background: #fff4d8;
}

.staff-email-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.staff-email-actions form {
    margin: 0;
}

.staff-email-actions .button,
.staff-email-add .button {
    min-height: 48px;
}

/* The field and its button share a row, the button level with the input
   whatever the label and hint above and below it (a grid, the field's
   wrapper laid out by its children). */

.staff-email-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 10px;
    align-items: end;
    margin-top: 14px;
}

.staff-email-add .staff-field {
    display: contents;
}

.staff-email-add .staff-field-label,
.staff-email-add .staff-field-help {
    grid-column: 1 / -1;
}

.staff-email-add input {
    grid-column: 1;
    grid-row: 2;
}

.staff-email-add .button {
    grid-column: 2;
    grid-row: 2;
}

.staff-email-empty {
    padding: 18px 20px;
}

.staff-email-empty p {
    margin: 0;
}

.staff-email-empty p + p {
    margin-top: 6px;
}

.staff-email-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.staff-email-cards > article {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    background: white;
}

.staff-email-cards h3 {
    margin: 4px 0 8px;
    font-size: 17px;
}

.staff-email-cards p {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 760px) {
    .staff-email-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-email-list > li {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-email-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staff-email-actions .button,
    .staff-email-add .button {
        width: 100%;
    }

    .staff-email-add {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-email-add .button {
        grid-column: 1;
        grid-row: auto;
    }
}

.player-profile-form > .staff-form-section + .staff-form-section {
    margin-top: 16px;
}

/* An occasional form on the profile is a closed disclosure with a 44-pixel
   summary; removing information and banning carry the danger colour. */

.player-profile-disclosure {
    margin-top: 16px;
    border: 1px solid var(--line);
    background: white;
}

.player-profile-disclosure > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    list-style: none;
}

.player-profile-disclosure > summary::-webkit-details-marker {
    display: none;
}

.player-profile-disclosure > summary::after {
    content: "+" / "";
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.player-profile-disclosure[open] > summary::after {
    content: "−" / "";
}

.player-profile-page .player-information-grid dd small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-weight: 650;
}

.player-profile-details dd a,
.player-profile-emails-note a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.player-profile-page .staff-table .table-action-link {
    min-height: 44px;
    align-items: center;
    padding: 7px 12px;
}

.player-profile-bookings td small a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.player-profile-bookings td:first-child strong a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.player-profile-disclosure > div {
    padding: 20px 18px 22px;
    border: 0;
    border-top: 1px solid var(--line);
}

/* Removing a player's information (core 0.9.1, views/staff/conduct-record.php
   #remove): two unmistakable choice cards, a plain legend, a 44-pixel
   confirmation row and a danger button. Staff only. */

.player-data-removal > p,
.player-data-removal > h3 {
    max-width: 68ch;
}

.player-data-removal > h3 {
    margin: 18px 0 6px;
    font-size: 14px;
    font-weight: 800;
}

.player-data-removal-effects {
    max-width: 68ch;
    margin: 0;
    padding-left: 20px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}

.player-data-removal-effects li + li {
    margin-top: 4px;
}

.player-data-removal-form {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.player-data-removal-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.player-data-removal-choice > legend {
    float: left;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
}

.player-data-removal-choice > legend + * {
    clear: both;
}

.player-data-removal-choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

/* The radio is 22 pixels and the whole card is the target. */

.player-data-removal-choices .staff-choice input {
    top: 18px;
    left: 18px;
    width: 22px;
    height: 22px;
}

.player-data-removal-choices .staff-choice > span {
    min-height: 44px;
    gap: 6px;
    padding: 16px 18px 16px 56px;
    border: 2px solid #aaa69b;
}

.player-data-removal-choices .staff-choice input:checked + span {
    border-color: var(--olive);
    box-shadow: inset 6px 0 0 var(--olive);
    background: #f4f6ed;
}

.player-data-removal-choices .staff-choice input:focus-visible + span {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.player-data-removal-option-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.player-data-removal-choices .staff-choice strong {
    font-size: 15px;
}

.player-data-removal-choices .staff-choice small {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
}

.player-data-removal-tag {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--olive);
    color: var(--olive);
    background: white;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The confirmation: a 44-pixel row in body text, the box 22 pixels. */

.player-data-removal-confirm {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    min-height: 44px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #aaa69b;
    color: var(--ink);
    background: white;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
}

.player-data-removal-confirm input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #7b281b;
}

.player-data-removal-confirm:has(input:checked) {
    border-color: #7b281b;
    background: #fff6f4;
}

.player-data-removal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 620px) {
    .player-data-removal-actions .button {
        width: 100%;
    }
}

.player-profile-disclosure-body dl,
.player-profile-disclosure-body dd {
    margin: 0;
}

.player-profile-disclosure-body dl > div {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.player-profile-disclosure-body small {
    display: block;
    color: var(--muted);
}

.staff-danger-disclosure > summary {
    border-left: 4px solid #8f3024;
    color: #8f3024;
}

/* A field caption in a profile disclosure or conduct panel. A staff field's
   own label is left alone (staff forms audit S3): it keeps its 13-pixel
   sentence case rather than turning into small capitals. */

.player-profile-disclosure label[for]:not(.staff-field-label),
.player-profile-page .conduct-panel label[for]:not(.staff-field-label) {
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.player-profile-disclosure label[for]:not(.staff-field-label) + select {
    margin-top: -10px;
    min-height: 44px;
}

.player-profile-page .conduct-note-editor > summary,
.player-profile-page .player-balance-adjustment > summary,
.player-profile-page .loyalty-adjustment-history > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
}

.player-profile-subsection {
    margin-top: 32px;
}

.player-profile-page #conduct > h3,
.player-profile-page #bookings > h3 {
    margin: 28px 0 10px;
    font-family: var(--display);
    font-size: 22px;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .player-profile-bookings .staff-table-actions .table-action-link,
    .player-profile-page #waivers .staff-table-actions .button {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    .player-profile-page #waivers .waiver-record-actions {
        display: grid;
        gap: 8px;
    }

    .player-profile-page .staff-table--stacked .table-action-link {
        min-height: 44px;
        align-items: center;
    }

    .player-profile-page .staff-table--stacked td[data-label] > .table-action-link {
        justify-self: start;
        margin: 8px 0 0;
    }
}

@media (max-width: 620px) {
    .player-profile-who {
        padding: 16px;
    }

    .player-profile-contact > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 4px 0;
    }

    .player-profile-fact {
        padding: 14px 16px;
    }

    .player-profile-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .player-profile-actions > .button,
    .staff-action-menu.player-profile-menu > summary {
        justify-content: center;
        width: 100%;
        padding: 12px 10px;
    }

    .player-profile-menu[open]:not(.is-portalled) {
        grid-column: 1 / -1;
    }

    .player-profile-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .player-profile-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 6px;
    }
}

/* Each booking on the player profile folds its own attendance timeline
   (user ruling 2026-10-13): a closed 44-pixel "Attendance" disclosure in a
   row under the booking, drawn as part of the same card on a phone. */

.player-profile-attendance-row > td {
    padding-top: 0;
}

.player-profile-bookings tbody tr:has(+ .player-profile-attendance-row) > td {
    border-bottom: 0;
}

.player-profile-attendance > summary {
    display: inline-flex;
    gap: 10px;
    min-height: 44px;
    align-items: center;
    color: var(--olive);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    list-style: none;
}

.player-profile-attendance > summary::-webkit-details-marker {
    display: none;
}

.player-profile-attendance > summary::after {
    content: "+" / "";
    font-size: 18px;
    line-height: 1;
}

.player-profile-attendance[open] > summary::after {
    content: "−" / "";
}

.player-profile-attendance h3 {
    margin: 14px 0 8px;
    font-size: 14px;
}

.player-profile-attendance .staff-empty {
    padding: 12px 16px;
}

@media (max-width: 760px) {
    .player-profile-bookings tbody tr:has(+ .player-profile-attendance-row) {
        padding-bottom: 4px;
        border-bottom: 0;
    }

    .player-profile-bookings .player-profile-attendance-row {
        padding-top: 0;
    }
}

/* Notice with an action (core 0.9.0): a bordered row on a staff page, the
   sentence first, then its one action as a button; they stack at 620
   pixels. Its words say what it is; the olive edge only marks it out. */

.staff-action-notice {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--olive);
    background: #f3f0e6;
}

.staff-action-notice p {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.staff-action-notice .button {
    flex: 0 0 auto;
    min-height: 44px;
}

@media (max-width: 620px) {
    .staff-action-notice {
        display: grid;
        gap: 12px;
        padding: 14px 16px;
    }

    .staff-action-notice .button {
        justify-self: start;
    }
}

/* An action's confirmation at the top of the profile section it returned to
   (core 0.9.0, Task 26): the flash's words and colours, where the staff
   member lands. A refusal there is its error notice. Scoped by the section,
   so it outranks `.staff-section > p`'s muted ink. */

.staff-section .staff-section-feedback {
    margin: 0 0 20px;
    padding: 12px 16px;
    color: white;
    background: #52613c;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Likely duplicate pairs (core 0.9.0): the administrators' review of
   profiles that may be one person. Filter links by reason, then one row per
   pair: both people side by side, Compare and "Not the same person" on the
   right, the reasons and notes under the people. At 760 pixels the two
   people stack, the actions sit side by side and the reasons come last. */

.player-duplicate-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.player-duplicate-filters a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: white;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.player-duplicate-filters a[aria-current] {
    border-color: var(--ink);
    background: var(--ink);
    color: white;
}

.player-duplicate-pairs {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.player-duplicate-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 14px 18px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--line);
    background: white;
}

.player-duplicate-person {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.player-duplicate-person a {
    display: flex;
    align-items: center;
    justify-self: start;
    min-height: 44px;
    color: var(--ink);
}

.player-duplicate-person span {
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.player-duplicate-and {
    color: var(--muted);
    font-size: 22px;
}

.player-duplicate-actions {
    display: grid;
    grid-column: -2 / -1;
    grid-row: 1 / span 2;
    gap: 8px;
}

.player-duplicate-actions form {
    display: grid;
    margin: 0;
}

.player-duplicate-actions .button {
    min-height: 44px;
}

.player-duplicate-reason {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -2;
    gap: 6px 10px;
    align-items: center;
    font-size: 13px;
}

.player-duplicate-reason p {
    margin: 0;
}

.player-duplicate-reason small {
    color: var(--muted);
}

@media (max-width: 760px) {
    .player-duplicate-pair {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px 16px;
    }

    .player-duplicate-and {
        display: none;
    }

    .player-duplicate-person ~ .player-duplicate-person {
        padding-top: 10px;
        border-top: 1px dashed var(--line);
    }

    .player-duplicate-actions {
        grid-template-columns: 1fr 1fr;
        grid-column: 1;
        grid-row: auto;
    }

    .player-duplicate-reason {
        grid-column: 1;
    }
}

/* Sticky phone action bar for the staff profile editor (core 0.9.0): the
   documented pattern, with the rules of .schedule-confirm. One button,
   "Save player profile"; above 760 pixels an ordinary block at the foot of
   the form. */

.staff-phone-action-bar {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin-top: -1px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-top-color: var(--ink);
    background: var(--paper-2);
}

.staff-phone-action-bar .button {
    justify-content: center;
    justify-self: end;
}

@media (max-width: 760px) {
    html:has(.staff-phone-action-bar) {
        scroll-padding-bottom: 120px;
    }

    .staff-phone-action-bar {
        position: sticky;
        z-index: 15;
        bottom: 0;
        gap: 8px;
        padding: 12px 16px;
        background: var(--paper);
    }

    .staff-phone-action-bar .button {
        justify-self: stretch;
        width: 100%;
    }
}

/* Profile comparison (core 0.9.0): merging two player profiles on one page.
   A dark head names the two columns and stays in view while the rows scroll;
   each row whose values differ is a fieldset of two radio cards, the whole
   card the target; a row that is the same on both collapses to one muted
   line. Below 760 pixels every row is a card: its name, then the two
   choices stacked, each labelled "Keep · This profile" or "Keep · Profile
   being merged". The chosen card is marked by its radio and a bar, never
   colour alone. */

.profile-comparison {
    min-width: 0;
    border: 1px solid var(--line);
    background: white;
}

.profile-comparison-head,
.profile-comparison-row,
.profile-comparison-same {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
}

.profile-comparison-head {
    position: sticky;
    z-index: 3;
    top: var(--staff-app-header-height, 0);
    color: white;
    background: var(--ink);
}

.profile-comparison-head > span {
    min-width: 0;
    padding: 12px 16px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.profile-comparison-head strong {
    display: block;
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.profile-comparison-row {
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.profile-comparison-row > legend,
.profile-comparison-same > strong {
    float: left;
    padding: 16px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-comparison-choice {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    min-height: 52px;
    padding: 14px 16px;
    border-left: 1px solid var(--line);
    cursor: pointer;
}

.profile-comparison-choice input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--olive);
}

.profile-comparison-choice:has(input:checked) {
    background: #eef0e2;
    box-shadow: inset 4px 0 0 var(--olive);
}

.profile-comparison-choice:has(input:focus-visible) {
    outline: 3px solid var(--ink);
    outline-offset: -3px;
}

.profile-comparison-value {
    display: block;
    overflow-wrap: anywhere;
}

.profile-comparison-value em,
.profile-comparison-same > span {
    color: var(--muted);
}

.profile-comparison-same {
    border-top: 1px solid var(--line);
    background: #f7f6f0;
}

.profile-comparison-same > span {
    grid-column: 2 / -1;
    min-width: 0;
    padding: 16px;
    border-left: 1px solid var(--line);
    overflow-wrap: anywhere;
}

.profile-comparison-same b {
    color: var(--ink);
}

.profile-search-results {
    margin: 18px 0 0;
    padding: 0;
    border: 1px solid var(--line);
    background: white;
    list-style: none;
}

.profile-search-results li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.profile-search-results li:last-child {
    border-bottom: 0;
}

.profile-search-results li > span > span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.profile-search-results .button {
    min-height: 44px;
}

/* What will move: three boxes in a row from 960 pixels, stacked below. */

.merge-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.merge-summary-box {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    background: white;
    overflow-wrap: anywhere;
}

.merge-summary-box h3 {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 20px;
    text-transform: uppercase;
}

.merge-summary-box ul {
    margin: 0;
    padding-left: 18px;
}

.merge-summary-box li + li {
    margin-top: 6px;
}

/* The irreversible step: a red-bordered box with the typed confirmation,
   Cancel, then Merge profiles. */

.merge-danger {
    padding: 20px;
    border: 2px solid #7b281b;
    background: #fff6f4;
}

.merge-danger > p {
    margin: 0 0 14px;
    color: #7b281b;
}

.merge-danger .merge-confirmation {
    max-width: 32rem;
}

/* Above `.staff-field input:not(…)`, which sets every staff input's face. */

.staff-section.merge-danger .staff-field input.merge-confirmation {
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.merge-danger .event-form-actions {
    margin-top: 18px;
}

@media (max-width: 1280px) {
    .profile-comparison-head {
        top: 0;
    }
}

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

@media (min-width: 761px) {
    .profile-comparison-side {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    .profile-comparison-head {
        position: static;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .profile-comparison-head > span:first-child {
        display: none;
    }

    .profile-comparison-row,
    .profile-comparison-same {
        display: block;
    }

    .profile-comparison-row > legend,
    .profile-comparison-same > strong {
        display: block;
        float: none;
        padding: 14px 16px 6px;
    }

    .profile-comparison-choice {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .profile-comparison-side {
        display: block;
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .profile-comparison-same > span {
        display: block;
        padding: 0 16px 14px;
        border-left: 0;
    }

    .profile-search-results li {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-search-results .button,
    .merge-danger .event-form-actions .button {
        width: 100%;
    }

    .merge-danger {
        padding: 16px;
    }

    .merge-danger .event-form-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .merge-danger .event-form-actions .button-danger {
        grid-row: 1;
    }
}

.player-loyalty-card progress {
    width: 100%;
    height: 12px;
    margin-bottom: 10px;
    accent-color: var(--olive);
}

.loyalty-adjustment-history {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 11px;
}

.loyalty-adjustment-history summary {
    cursor: pointer;
    font-weight: 800;
}

.loyalty-adjustment-history ul {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.loyalty-adjustment-history li span,
.loyalty-adjustment-history li p {
    display: block;
    margin: 2px 0 0;
    color: var(--muted);
}

.loyalty-point-form {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.loyalty-point-form label {
    display: grid;
    gap: 6px;
}

.loyalty-point-form label > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.loyalty-point-form select,
.loyalty-point-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.player-balance-adjustment {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.player-balance-adjustment summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
}

.player-balance-adjustment > p {
    margin: 14px 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.player-balance-adjustment > p strong {
    color: var(--ink);
}

.player-balance-adjustment form,
.player-balance-adjustment label:not(.terms-check) {
    display: grid;
    gap: 8px;
}

.player-balance-adjustment form {
    gap: 14px;
}

.player-balance-adjustment label:not(.terms-check) > span:first-child {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.player-balance-adjustment textarea,
.player-balance-adjustment .currency-input {
    width: 100%;
}

.player-balance-adjustment textarea {
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.player-balance-adjustment label > small {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

.player-balance-adjustment .button {
    justify-self: start;
}

.conduct-panel {
    padding: 26px;
    border: 1px solid var(--line);
    background: white;
}

.conduct-panel h2 {
    margin: 5px 0 22px;
    font-family: var(--display);
    font-size: 30px;
    text-transform: uppercase;
}

.conduct-retention-help {
    margin: -10px 0 20px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
}

.conduct-panel form {
    display: grid;
    gap: 16px;
}

/* The conduct forms' own tick boxes are check lines (staff forms audit,
   batch 1): the box beside 13-pixel words on a row at least 44 pixels tall. */

.conduct-panel .conduct-retention-option,
.conduct-note-editor .conduct-retention-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 44px;
}

.conduct-panel .conduct-retention-option input,
.conduct-note-editor .conduct-retention-option input {
    margin-top: 2px;
    accent-color: var(--olive);
}

.conduct-panel .conduct-retention-option > span,
.conduct-note-editor .conduct-retention-option > span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
}

.conduct-ban-panel {
    color: white;
    background: var(--ink);
}

.conduct-ban-panel .eyebrow,
.conduct-ban-panel label > span {
    color: var(--signal);
}

.conduct-ban-panel textarea {
    color: var(--ink);
}

.conduct-ban-panel .button-outline {
    color: white;
    border-color: rgb(255 255 255 / 48%);
    background: rgb(255 255 255 / 8%);
}

.conduct-ban-panel .button-outline:hover {
    color: var(--ink);
    border-color: var(--signal);
    background: var(--signal);
}

.conduct-lift-ban-form {
    margin-top: 18px;
}

.conduct-admin-override-notice {
    padding: 14px 16px;
    border-left: 4px solid var(--signal-dark);
    background: var(--sand);
}

.conduct-admin-override-notice p {
    margin: 4px 0 0;
}

.conduct-notes {
    display: grid;
    gap: 12px;
}

.conduct-note {
    padding: 22px;
    border-left: 4px solid var(--olive);
    background: white;
}

.conduct-note-warning {
    border-left-color: var(--signal-dark);
}

.conduct-note-infraction {
    border-left-color: #782f25;
}

.conduct-note > div {
    display: flex;
    justify-content: space-between;
}

.conduct-note time,
.conduct-note small {
    color: var(--muted);
    font-size: 9px;
}

.conduct-note > small {
    display: block;
    margin-top: 5px;
}

.conduct-note-editor {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.conduct-note-editor summary {
    cursor: pointer;
    color: var(--olive);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.conduct-note-editor form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.conduct-note-editor label {
    display: grid;
    gap: 7px;
}

.conduct-note-editor label > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.conduct-note-editor select,
.conduct-note-editor textarea {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper-2);
}

.conduct-note-editor .table-danger-button {
    justify-self: start;
}

/* Staff fields in the player's conduct, ban, balance and loyalty forms and
   the ban-decision review (staff forms audit, batch 1). The panels' own
   label rules made every label a grid, which put "Optional" on a line of its
   own, and their control rules drew a grey field; a staff field's label is a
   line of text and its control is the white staff field. */

.conduct-panel label.staff-field-label,
.conduct-note-editor label.staff-field-label,
.player-balance-adjustment label.staff-field-label,
.ban-review-form label.staff-field-label {
    display: block;
}

.conduct-panel .staff-field :is(select, textarea),
.conduct-note-editor .staff-field :is(select, textarea),
.player-balance-adjustment .staff-field textarea {
    padding: 12px 14px;
    border-color: #aaa69b;
    background: white;
    font-size: 14px;
}

.staff-page .staff-field > .field-requirements {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.has-js .staff-toolbar,
.has-js .message-section > .shell > * {
    animation: interface-enter 420ms cubic-bezier(.2, .7, .2, 1) both;
}

.has-js .staff-shell > .shell > .staff-section,
.has-js .staff-shell > .shell > .dashboard-revenue,
.has-js .staff-shell > .shell > .filter-bar {
    animation: interface-enter 420ms cubic-bezier(.2, .7, .2, 1) both;
}

.has-js .staff-shell > .shell > :nth-child(2) {
    animation-delay: 45ms;
}

.has-js .staff-shell > .shell > :nth-child(3) {
    animation-delay: 90ms;
}

.waiver-agreement {
    max-height: 320px;
    margin: 18px 0;
    padding: 18px;
    overflow: auto;
    border: 1px solid var(--line);
    background: #f4f1e8;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.65;
}

.legal-document {
    display: grid;
    gap: 12px;
}

.legal-document h3,
.legal-document h4,
.legal-document h5,
.legal-document p,
.legal-document ul,
.legal-document ol {
    margin: 0;
}

.legal-document h3,
.legal-document h4,
.legal-document h5 {
    color: var(--ink);
    font-family: var(--display);
    line-height: 1.18;
}

.legal-document h3 {
    margin-top: 8px;
    font-size: clamp(22px, 3vw, 34px);
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.legal-document h4 {
    margin-top: 12px;
    font-size: 18px;
}

.legal-document h5 {
    font-size: 14px;
}

.legal-document p,
.legal-document li {
    font-size: 13px;
    line-height: 1.72;
}

.legal-document ul,
.legal-document ol {
    display: grid;
    gap: 7px;
    padding-left: 24px;
}

.legal-document hr {
    width: 100%;
    margin: 10px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
    .game-day-mode-switch {
        grid-template-columns: 1fr;
    }

    .legal-editor-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .legal-editor-heading .button {
        width: 100%;
    }

    .legal-editor-toolbar > span {
        width: 100%;
        margin: 4px 0 0;
    }

    .legal-editor-workspace {
        padding: 12px;
    }

    .legal-editor-workspace textarea {
        min-height: 440px;
        padding: 13px;
    }
}

/* Date of birth (core 0.9.4, views/partials/date-of-birth-field.php): Day,
   Month and Year as three short numeric fields in a row, under a legend set
   like the form's own field labels and a hint. The row fits 320 pixels. */

/* Named with the form, or .booking-form fieldset's 46-pixel margin wins. */

.event-form .date-of-birth-field,
.date-of-birth-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.event-form .date-of-birth-field > legend,
.date-of-birth-field > legend {
    float: left;
    width: 100%;
    margin: 0 0 7px;
    padding: 0;
    border: 0;
    color: #575a52;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.date-of-birth-field > legend em {
    margin-left: 6px;
    color: #96998f;
    font-style: normal;
    font-weight: 600;
}

.date-of-birth-hint {
    clear: both;
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
}

.date-of-birth-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.date-of-birth-inputs > label {
    width: 4.75rem;
    min-width: 0;
}

.date-of-birth-inputs > .date-of-birth-year {
    width: 6.5rem;
}

.date-of-birth-field.has-error input {
    border-color: #a64028;
}

.date-of-birth-field > .field-error {
    margin-top: 8px;
}

.terms-check a {
    color: var(--olive);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ticket-policy-notice {
    margin-bottom: 22px;
    padding: 18px;
    border-left: 3px solid var(--signal);
    background: #eee9d1;
}

.template-notice {
    margin-bottom: 22px;
    padding: 18px;
    border-left: 3px solid var(--signal);
    background: #eee9d1;
}

.ticket-policy-notice strong {
    display: block;
    color: var(--ink);
    font-family: var(--display);
    font-size: 17px;
    text-transform: uppercase;
}

.template-notice strong {
    display: block;
    color: var(--ink);
    font-family: var(--display);
    font-size: 17px;
    text-transform: uppercase;
}

.ticket-policy-notice p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.template-notice p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

/* One card per row: each card is a row of name, price, Covers and Limit. */

.ticket-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.ticket-builder-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    transition: opacity 160ms ease;
}

.ticket-builder-card.is-disabled {
    opacity: 0.55;
}

.ticket-builder-card[hidden],
.ticket-builder-card .ticket-enable[hidden] {
    display: none;
}

/* Error text in a faded card fails contrast, so a card holding one is not faded. */

.ticket-builder-card.is-disabled.has-error {
    opacity: 1;
}

.ticket-builder-card .ticket-enable,
.ticket-builder-card .span-full {
    grid-column: 1 / -1;
}

.ticket-builder-card > label:not(.terms-check) {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ticket-builder-card label > span {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The top row's labels take two lines, the label and then its requirement,
   so name, price, Covers and Limit start their inputs level whatever each
   label says. */

.ticket-builder-card > label:not(.terms-check) > span:first-child,
.event-form .ticket-builder-card .ticket-covers > legend {
    min-height: 3.4em;
}

.ticket-builder-card > label:not(.terms-check) > span:first-child > .field-requirement {
    display: block;
    margin: 3px 0 0;
}

.ticket-builder-card input,
.ticket-builder-card select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    background: #f9f7f1;
}

.ticket-builder-card label small {
    color: var(--muted);
    font-size: 10px;
}

.ticket-builder-card label.has-error small:last-child {
    color: #9b3424;
}

/* .ticket-builder-card input, above, has the same specificity as .has-error
   input and comes later, so it put the ordinary border back on a ticket field
   holding an error. This names the card, so it outranks both. A control that
   carries aria-invalid already has the editor's stronger invalid treatment
   (.event-form [aria-invalid="true"]), which this must not recolour. */

.ticket-builder-card .has-error input:not([aria-invalid="true"]),
.ticket-builder-card .has-error select:not([aria-invalid="true"]),
.ticket-builder-card .has-error textarea:not([aria-invalid="true"]) {
    border-color: #a64028;
}

/* Covers and "Price on the day, sale times and more" in a ticket card, with
   the own-window box above Arrives and Leaves. Staff only; see
   docs/design-language.md, Ticket coverage. */

.ticket-builder-card .ticket-covers {
    grid-column: 1 / -1;
}

.event-form fieldset.ticket-covers {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.event-form .ticket-covers > legend {
    width: auto;
    margin: 0 0 7px;
    padding: 0;
    border: 0;
    color: #575a52;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ticket-covers > [data-ticket-covers-single] {
    margin: 0;
    color: var(--ink);
    font-size: 12px;
}

.ticket-covers-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* With one game day the script keeps the day's box, ticked, out of sight. */

.ticket-covers-boxes[hidden] {
    display: none;
}

.ticket-covers-boxes label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #aaa69b;
    background: white;
    cursor: pointer;
}

.ticket-covers-boxes label:has(input:checked) {
    border-color: var(--olive);
    background: #f4f6ed;
}

.ticket-covers-boxes input {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--olive);
}

.ticket-covers-boxes label > span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.ticket-covers-span {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.ticket-covers-span:empty {
    display: none;
}

.timing-rule-list > .ticket-own-window {
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
}

.ticket-builder-card .ticket-enable input,
.ticket-builder-card .ticket-own-window input {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
}

.ticket-builder-card .ticket-enable > span,
.ticket-builder-card .ticket-own-window > span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.ticket-more {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
}

.ticket-more > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    color: #40503b;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

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

/* The same chevron as More options: down while closed, up while open. */

.ticket-more > summary::after {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    content: "";
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 150ms ease;
}

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

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

.ticket-more > summary:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.ticket-more > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 8px 0 4px;
}

.ticket-more label:not(.terms-check) {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.ticket-more .span-full,
.ticket-more .timing-rule-heading,
.ticket-more .timing-rule-list {
    grid-column: 1 / -1;
}

/* Arrives and Leaves sit in their own wrapper inside the timing list, so the
   wrapper draws the line the first of them would have drawn. */

.timing-rule-list > [data-condition-target] {
    border-top: 1px solid var(--line);
}

/* Without JavaScript, which kinds read the parts that follow. */

.timing-rule-for {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.has-js .timing-rule-for {
    display: none;
}

/* Name, price, Covers and Limit side by side once the form column has the
   room for them, at 1440 pixels and wider. The limit's track holds a
   four-digit number beside its "of this ticket" suffix on one line
   (per-game-day capacity): at 8rem the suffix wrapped and left the number
   no room at all. */

@media (min-width: 1440px) {
    .ticket-builder-card {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 10rem) minmax(0, 1.6fr) minmax(0, 13rem);
    }

    .ticket-builder-card .ticket-covers {
        grid-column: auto;
    }
}

@media (max-width: 1000px) {
    .ticket-more > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .ticket-more > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* On the day › Check-in days: one row per day, "Same as play" or its own hours.
   Staff only; see docs/design-language.md. */

.check-in-days {
    display: grid;
    min-width: 0;
    margin-top: 14px;
    border: 1px solid var(--line);
    background: white;
}

/* Said once the game days change before a save (event-format.mjs). */

.check-in-days > [data-check-in-days-stale],
.check-in-days > [data-attendance-days-empty] {
    margin: 0;
    padding: 10px 14px;
    color: var(--ink);
}

.check-in-days > [data-check-in-days-stale][hidden] {
    display: none;
}

.check-in-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 8px 14px;
    align-items: center;
    min-width: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
}

.check-in-day:first-child {
    border-top: 0;
}

.check-in-day--exception {
    background: #f4f6ed;
}

.check-in-day > p {
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.check-in-day > p small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.check-in-day > .terms-check,
.check-in-day > small,
.check-in-day > .field-error {
    grid-column: 1 / -1;
    margin: 0;
}

.check-in-day > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 10rem));
    gap: 8px 12px;
    grid-column: 1 / -1;
    align-items: end;
}

.check-in-day > div > .terms-check,
.check-in-day > div > small {
    grid-column: 1 / -1;
    margin: 0;
}

.check-in-day label:not(.terms-check) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.check-in-day label:not(.terms-check) > span {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.check-in-day input[type="time"] {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.check-in-day .has-error input[type="time"],
.check-in-day input[aria-invalid="true"] {
    border-color: #a64028;
}

.check-in-day small[id$="-error"] {
    color: #9b3424;
    font-size: 12px;
}

/* On the day › Itinerary (Players’ day): one table per game day, the game
   day's own times shaded and read-only, staff rows with their fields in a row
   of their own. Staff only; see docs/design-language.md, Itinerary table. */

.players-day-table {
    width: 100%;
    margin: 0 0 8px;
    border-collapse: collapse;
    /* Every day's table shares its columns, so the days line up. */
    table-layout: fixed;
}

.players-day-table th:first-child {
    width: 5.5rem;
}

.players-day-table th:nth-child(2) {
    width: 38%;
}

/* Edit and Remove side by side, clear of Set by (core 0.4.1). */

.players-day-table th:nth-child(4) {
    width: 9rem;
}

/* Their 44-pixel targets fill the cell's height, so their words sit level
   with the row's first line. */

.players-day-table td.staff-table-actions {
    padding-top: 0;
    padding-bottom: 0;
}

.players-day-table caption {
    padding: 8px 0;
    font-weight: 700;
    text-align: left;
}

.players-day-table th,
.players-day-table td {
    padding: 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    /* A long word stays inside its fixed column. */
    overflow-wrap: anywhere;
}

.players-day-table td small {
    display: block;
    color: var(--muted);
}

.players-day-game td {
    background: var(--paper-2);
}

/* Hide default itinerary rows (core 0.7.0): a game-day row the event hides
   from players is greyed, every word in the muted colour, and says "Hidden
   from players" under Set by, so the greying only repeats the words. */

.players-day-game-hidden td {
    color: var(--muted);
}

/* Its "Hide from the itinerary" box, in the row's actions cell: sentence
   case like every .terms-check, the label a 44-pixel target whose words sit
   level with the row's first line, as Edit and Remove do. */

.players-day-table .staff-table-actions .terms-check {
    min-height: 44px;
    margin: 0;
    padding-top: 10px;
}

.players-day-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

/* A row's fields and the After check-in message keep the staff field layout
   they had inside "Check-in times and instructions" before 0.3.0. */

.players-day-fields > label:not(.terms-check),
.players-day > label.span-full {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.players-day-fields > label > span,
.players-day > label.span-full > span {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* An entry's tick boxes ("Show on the event page", core 0.6.0; "Remove this
   time" without JavaScript) read as tick boxes, in sentence case like the
   section's own box, not in the fields' caption style. */

.players-day-fields > .terms-check > span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.players-day-fields input:not([type="checkbox"]),
.players-day-fields select,
.players-day > label.span-full textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.players-day > label.span-full textarea {
    min-height: 110px;
    resize: vertical;
}

.players-day .has-error input,
.players-day .has-error select,
.players-day .has-error textarea {
    border-color: #a64028;
}

.players-day-fields label small,
.players-day > label.span-full small {
    color: var(--muted);
    font-size: 10px;
}

.players-day-fields label.has-error small[id$="-error"],
.players-day > label.span-full.has-error small[id$="-error"] {
    color: #9b3424;
    /* As a check-in day's error. */
    font-size: 12px;
}

/* Copy without JavaScript comes back at #players-day; like a section, it
   starts below the fixed staff header. */

.staff-page .players-day {
    scroll-margin-top: calc(var(--staff-app-header-height, 72px) + 16px);
}

.players-day-actions {
    display: grid;
    gap: 6px;
    margin: 0 0 20px;
}

.players-day-actions small,
.players-day small.check-in-help {
    color: var(--muted);
}

.players-day small.check-in-help {
    display: block;
    margin: 4px 0 16px;
    font-size: 12px;
}

@media (max-width: 620px) {
    .players-day-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .players-day-table tr,
    .players-day-table td {
        display: block;
    }

    /* One rule per row, not per cell, so a stacked row reads as one. */
    .players-day-table td {
        padding: 4px 8px;
        border-bottom: 0;
    }

    .players-day-table tbody tr {
        padding: 4px 0;
        border-bottom: 1px solid var(--line);
    }

    .players-day-game {
        background: var(--paper-2);
    }

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

/* The four switches name what they do in bold, then why it matters. */

.attendance-config-panel .terms-check strong {
    display: block;
    color: var(--ink);
    font-size: 13px;
}

/* A choice of radio cards above the fields it governs. */

.event-form .event-choice + .payment-gateway-choice,
.event-form .event-choice + .event-capacity-field {
    margin-top: 14px;
}

/* Per-day limits: "Different limit on some days" in section 6, and the rows
   it shows, a number for each game day, for the event or for one team.
   Staff only; see docs/design-language.md, Per-day limits. Inside a team
   card the box keeps the own-window box's sentence-case look. */

.event-day-limits-toggle {
    grid-column: 1 / -1;
}

.team-builder-card .event-day-limits-toggle {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.team-builder-card .event-day-limits-toggle input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
}

.team-builder-card .event-day-limits-toggle > span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.event-form fieldset.event-day-limits {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--line);
    background: white;
}

.event-form fieldset.event-day-limits[hidden] {
    display: none;
}

.event-form .event-day-limits > legend {
    width: auto;
    margin: 0;
    padding: 0 4px;
    border: 0;
    color: #575a52;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-day-limits > .fieldset-note {
    margin: 0;
}

.event-day-limit {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) repeat(2, minmax(0, 11rem));
    gap: 8px 14px;
    align-items: end;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.event-day-limit > strong {
    align-self: center;
    min-width: 0;
    color: var(--ink);
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* A team row's Places is the first label in its row, which a team card
   otherwise spans across the card; here it keeps its own column, beside
   Snipers. A team card is narrower than the section, so above 620 pixels
   its rows put the day's name over its places and snipers rather than
   three to a line. */

.team-builder-card .event-day-limit > label:first-of-type {
    grid-column: auto;
}

@media (min-width: 621px) {
    .team-builder-card .event-day-limit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-builder-card .event-day-limit > strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .event-day-limit {
        grid-template-columns: minmax(0, 1fr);
    }
}

.event-publish-help {
    display: grid;
    gap: 8px;
    max-width: 640px;
}

.event-publish-help p {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 620px) {
    .check-in-day {
        grid-template-columns: minmax(0, 1fr);
    }

    .check-in-day > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.promotion-form {
    max-width: none;
    padding: 28px;
    border: 1px solid var(--line);
    background: white;
}

.promotion-scope {
    margin-top: 28px !important;
}

.promotion-event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
    margin-top: 16px;
}

[data-condition-target].is-condition-disabled {
    opacity: 0.58;
}

[data-condition-target].is-condition-disabled input,
[data-condition-target].is-condition-disabled select,
[data-condition-target].is-condition-disabled textarea {
    cursor: not-allowed;
}

.conditional-reason {
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
}

.promotion-event-grid > .conditional-reason {
    grid-column: 1 / -1;
}

.promotion-list {
    display: grid;
    gap: 16px;
}

.promotion-list article {
    padding: 24px;
    border: 1px solid var(--line);
    background: white;
}

.promotion-list article > header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.promotion-list code,
.promotion-list header strong,
.promotion-list header small {
    display: block;
}

.promotion-list code {
    color: var(--signal-dark);
    font-size: 19px;
    font-weight: 900;
}

.promotion-list header small,
.promotion-list article > p {
    color: var(--muted);
    font-size: 10px;
}

.promotion-list dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.promotion-list dl div {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.promotion-list dt,
.promotion-list dd {
    margin: 0;
}

.promotion-list dt {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.promotion-list dd {
    margin-top: 4px;
    font-weight: 800;
}

.promotion-management-details {
    margin-top: 18px;
    border-top: 1px solid var(--line);
}

.promotion-management-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 0;
    color: var(--signal-dark);
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    list-style: none;
    text-transform: uppercase;
}

.promotion-management-details > summary::-webkit-details-marker {
    display: none;
}

.promotion-management-details > summary::after {
    content: "+";
    font-size: 18px;
    line-height: 1;
}

.promotion-management-details[open] > summary::after {
    content: "−";
}

.promotion-management-body {
    display: grid;
    gap: 16px;
    padding-top: 18px;
}

.promotion-usage {
    display: grid;
    gap: 5px;
    margin: 12px 0 18px;
    color: var(--muted);
    font-size: 10px;
}

.player-search-field {
    position: relative;
}

.filter-bar--player-search {
    position: relative;
    z-index: 30;
}

/* Player records' search, Show filter and button share a row above 900
   pixels; at 900 and below .filter-bar stacks them (core 0.13.0). */

@media (min-width: 901px) {
    .filter-bar--search.filter-bar--player-search {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
    }
}

.player-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 20;
    box-shadow: 0 16px 34px rgb(8 11 8 / 18%);
}

.player-suggestion-list {
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    list-style: none;
    background: white;
}

.player-suggestion-list button {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    text-align: left;
    background: white;
}

.player-suggestion-list button:hover,
.player-suggestion-list button:focus-visible {
    background: var(--paper-2);
}

.player-suggestion-list strong,
.player-suggestion-list span {
    display: block;
}

.player-suggestion-list span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.pagination {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 22px;
    font-size: 10px;
    text-transform: uppercase;
}

.pagination a,
.pagination span {
    padding: 9px 11px;
    border: 1px solid currentColor;
}

.pagination span {
    opacity: 0.35;
}

@media (max-width: 1000px) {
    .filter-bar--tokens {
        grid-template-columns: 1fr 1fr;
    }

    .filter-bar--transactions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar--transactions .filter-date-range {
        grid-column: 1 / -1;
    }

    .filter-bar--transactions .filter-actions {
        grid-column: 1 / -1;
        padding-top: 0;
    }

    .player-information-grid {
        grid-template-columns: 1fr 1fr;
    }

    .player-information-grid article:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .staff-login-security-warning .shell {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-login {
        background: var(--ink);
    }

    .staff-login-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .staff-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-nav-session > span {
        display: none;
    }

    .conduct-grid,
    .player-information-grid,
    .staff-card-grid {
        grid-template-columns: 1fr;
    }

    .player-booking-workspace-layout,
    .player-booking-detail-grid {
        grid-template-columns: 1fr;
    }

    .player-booking-rail {
        display: none;
    }

    .player-booking-compact-selector {
        display: grid;
        gap: 12px;
    }

    .player-booking-compact-selector select,
    .player-booking-compact-selector .button {
        width: 100%;
    }

    .recovery-code-grid {
        grid-template-columns: 1fr;
    }

    .player-information-grid article:last-child {
        grid-column: auto;
    }

    .filter-bar--game-day {
        grid-template-columns: 1fr;
    }

    /* The fire register's and walk-on's buttons are worded, so on their
       own row they take the bar's width (the desk's icon Search is
       .filter-bar--game-day-desk's). */

    .filter-bar--game-day .filter-actions .button {
        width: 100%;
    }

    .filter-bar--game-day .game-day-search-submit {
        flex: 0 0 44px;
        width: 44px;
    }
}

@media (max-width: 600px) {
    .section {
        padding-block: 78px;
    }

    .brand-logo {
        width: 170px;
    }

    /* The header gives the brand around 210px here once the navigation has
       taken its share, and a wordmark cannot be scaled down the way an image
       is. Set it in type instead, so a normal public name fits rather than
       arriving ellipsised on every phone. */

    .brand-logo-wordmark {
        font-size: 16px;
        letter-spacing: 0.04em;
    }

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

    .team-builder,
    .ticket-builder {
        grid-template-columns: 1fr;
    }

    .ticket-scan-notice,
    .staff-toolbar-actions,
    .recovery-code-actions,
    .recovery-confirmation {
        align-items: stretch;
        flex-direction: column;
    }

    .login-panel {
        padding: 28px 22px;
    }

    .team-builder-card {
        grid-template-columns: 1fr;
    }

    .ticket-builder-card,
    .promotion-event-grid,
    .promotion-list dl {
        grid-template-columns: 1fr;
    }

    .team-builder-card > legend,
    .team-builder-card label:first-of-type {
        grid-column: auto;
    }

    .balance-grid,
    .filter-bar--tokens,
    .filter-bar--search {
        grid-template-columns: 1fr;
    }

    .balance-grid dl {
        grid-template-columns: repeat(3, 1fr);
    }

    .pagination {
        justify-content: space-between;
    }
}

.field-requirements {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.75rem;
}

.staff-settings-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}

.rule-section-editor {
    position: relative;
    padding: 24px !important;
    border: 1px solid var(--line) !important;
    background: var(--paper-2);
}

.rule-section-editor > .rule-section-accessible-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

.rule-section-header {
    display: flex;
    gap: 14px;
    align-items: baseline;
    width: 100%;
    margin-bottom: 22px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 850;
    text-transform: uppercase;
}

.rule-section-header > span {
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
}

.rule-section-controls {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: -10px 0 20px;
}

.rule-section-controls button,
.two-factor-skip button {
    border: 0;
    cursor: pointer;
    color: var(--olive);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: underline;
}

/* Move up and Move down and Remove section are 44-pixel targets (staff forms
   audit batch 6; they were 20 pixels tall). They stay text-weight links in
   look and keep their tight row. */

.rule-section-controls button {
    min-height: 44px;
    padding: 0 6px;
}

.rule-section-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.rule-section-controls [data-remove-rule-section] {
    color: #782f25;
}

.rule-section-add {
    margin-bottom: 24px;
}

.two-factor-skip {
    margin-top: 14px;
    text-align: center;
}

.staff-alert-stack {
    position: relative;
    z-index: 45;
    margin-top: 0;
}

@media (max-width: 1280px) {
    .staff-alert-stack {
        margin-top: 0;
    }

    .staff-shell,
    .has-staff-alerts .staff-shell {
        padding-top: 40px;
    }
}

.two-factor-grace-warning {
    border-bottom: 1px solid #9a7041;
    color: #2f281e;
    background: #ead9b9;
}

.two-factor-grace-warning .shell {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 0.82rem;
}

.two-factor-grace-warning a {
    margin-left: auto;
    color: inherit;
    font-weight: 850;
}

/* "Some settings are hidden." (core 0.8.5): the two-factor reminder's colours,
   taller, with a button rather than a text link. Its ring is its own ink,
   because the global --signal ring is too faint on this tan. */

.staff-confirm-identity-warning {
    border-bottom: 2px solid #9a7041;
    color: #2f281e;
    background: #ead9b9;
}

.staff-confirm-identity-warning .shell {
    display: flex;
    gap: 12px 16px;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* A small padlock in CSS: the shackle, then the body, in the banner's ink. */

.staff-confirm-identity-icon {
    position: relative;
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
}

.staff-confirm-identity-icon::before {
    position: absolute;
    top: 1px;
    left: 5px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    content: "";
}

.staff-confirm-identity-icon::after {
    position: absolute;
    bottom: 1px;
    left: 3px;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.staff-confirm-identity-warning p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.staff-confirm-identity-warning strong {
    font-weight: 850;
}

.staff-confirm-identity-action {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-left: auto;
    padding: 10px 18px;
    border: 2px solid #2f281e;
    color: #fff8ec;
    background: #2f281e;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.staff-confirm-identity-action:hover {
    color: #2f281e;
    background: #fff8ec;
}

.staff-confirm-identity-action:focus-visible {
    outline: 3px solid #2f281e;
    outline-offset: 3px;
}

@media (max-width: 620px) {
    .staff-confirm-identity-warning .shell {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .staff-confirm-identity-warning p {
        flex-basis: 0;
    }

    .staff-confirm-identity-action {
        width: 100%;
        margin-left: 0;
    }
}

.staff-login-security-warning {
    border-bottom: 1px solid #8f382e;
    color: #fff5ed;
    background: #742f29;
}

.staff-login-security-warning .shell {
    display: flex;
    gap: 12px 24px;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 0.82rem;
}

.staff-login-security-warning strong,
.staff-login-security-warning span {
    display: block;
}

.staff-login-security-warning span {
    margin-top: 3px;
    color: #f0cfc8;
}

.staff-login-security-warning a {
    color: inherit;
    font-weight: 850;
    white-space: nowrap;
}

.staff-settings-nav a,
.payment-setting-card {
    border: 1px solid rgba(64, 79, 55, 0.18);
    background: var(--paper);
    color: var(--ink);
    padding: 18px;
}

.staff-settings-nav a {
    text-decoration: none;
}

.staff-settings-nav span,
.payment-setting-card small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.78rem;
}

.settings-group + .settings-group {
    margin-top: 54px;
}

.settings-group .staff-settings-nav {
    margin-bottom: 0;
}

.documentation-library {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.documentation-library a {
    min-height: 150px;
    padding: 28px;
}

.documentation-library strong {
    font-family: var(--display);
    font-size: 25px;
    text-transform: uppercase;
}

.staff-documentation {
    max-width: 980px;
}

.documentation-section {
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid var(--line);
    background: white;
}

.documentation-section h2 {
    margin: 6px 0 20px;
    font-family: var(--display);
    font-size: clamp(29px, 4vw, 42px);
    text-transform: uppercase;
}

.documentation-section li {
    margin: 9px 0;
    color: var(--ink-soft);
    line-height: 1.65;
}

.technical-document-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 24px;
    border: 1px solid var(--line);
    background: var(--line);
}

.technical-document-index a {
    padding: 13px 15px;
    color: var(--muted);
    background: var(--paper-2);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.technical-document-index a:hover {
    color: var(--ink);
    background: white;
}

.documentation-section h3 {
    margin: 24px 0 8px;
    font-family: var(--display);
    font-size: 21px;
    text-transform: uppercase;
}

.documentation-section code {
    padding: 2px 5px;
    color: #eceddc;
    background: var(--ink-2);
    font-size: 0.88em;
    overflow-wrap: anywhere;
}

.technical-flow {
    counter-reset: technical-step;
    padding-left: 0;
    list-style: none;
}

.technical-flow li {
    position: relative;
    min-height: 44px;
    padding-left: 52px;
}

.technical-flow li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: white;
    background: var(--olive);
    content: counter(technical-step, decimal-leading-zero);
    counter-increment: technical-step;
    font-size: 9px;
    font-weight: 850;
}

.technical-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.technical-reference-grid article {
    padding: 18px;
    border-left: 3px solid var(--olive);
    background: var(--paper);
}

.technical-reference-grid h3 {
    margin-top: 0;
}

.technical-reference-grid p {
    margin-bottom: 0;
}

.technical-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
}

.technical-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 11px;
}

.technical-table th,
.technical-table td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.technical-table th {
    color: var(--muted);
    background: var(--paper-2);
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

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

@media (max-width: 760px) {
    .technical-document-index,
    .technical-reference-grid {
        grid-template-columns: 1fr;
    }
}

.military-term {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(184, 169, 126, 0.72);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-transform: inherit;
    cursor: help;
}

.military-term:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--khaki);
    outline-offset: 3px;
}

.military-term-tooltip {
    position: fixed;
    z-index: 120;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid rgba(184, 169, 126, 0.5);
    background: #0d120e;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
    color: #eef0e8;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.military-term-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.seo-page-editor {
    padding: 20px 0;
    border-top: 1px solid rgba(15, 20, 16, 0.14);
}

.seo-page-editor:first-of-type {
    margin-top: 20px;
}

.seo-page-editor h3 {
    margin: 0 0 14px;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.payment-settings-list {
    display: grid;
    gap: 14px;
}

.payment-report-defaults {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.payment-report-defaults > label {
    padding: 16px;
    border: 1px solid var(--line);
    background: white;
}

.payment-report-defaults small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.refund-operations {
    margin-top: 56px;
}

.gateway-refund-capability {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.gateway-refund-capability strong,
.gateway-refund-capability small {
    display: block;
}

.gateway-refund-manual {
    border-color: #b98579;
    background: #fff8f5;
}

.refund-manual-flag {
    display: block;
    width: fit-content;
    margin-top: 7px;
    padding: 5px 7px;
    border: 1px solid #9a3d31;
    background: #fff0ed;
    color: #6e241b;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.refund-resolution {
    min-width: 250px;
}

.refund-resolution summary {
    color: var(--signal);
    font-weight: 850;
    cursor: pointer;
}

.refund-resolution form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    background: white;
}

.refund-resolution form > label:not(.terms-check) {
    display: grid;
    gap: 5px;
}

.refund-resolution input,
.refund-resolution select,
.refund-resolution textarea {
    width: 100%;
    padding: 9px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

/* Staff fields in the bookings and payments forms (staff forms audit, batch
   2): the refund resolutions, the balance requests and the cancel card's
   partial amount. Their panels' own control rules drew a grey 36-pixel field;
   a staff field's control is the white 48-pixel staff field and its label a
   line of text. The partial amount keeps the bordered card it had as a label. */

.refund-resolution .staff-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    padding: 12px 14px;
    border-color: #aaa69b;
    background: white;
}

.payment-customer-results label.staff-field-label {
    display: block;
}

.booking-cancellation-actions .staff-field.staff-partial-refund {
    padding: 13px;
    border: 1px solid var(--line);
}

.navigation-settings-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.navigation-setting-card {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr) 110px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(64, 79, 55, 0.18);
    background: var(--paper);
}

.navigation-setting-card > div small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.navigation-setting-card > label:not(.terms-check) {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navigation-setting-card select {
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid #cbc8bf;
    background: #f9f7f1;
}

.payment-setting-card {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr) auto auto;
    gap: 18px;
    align-items: center;
}

.payment-setting-card label > small {
    display: block;
    max-width: 180px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.4;
}

.test-booking-flag {
    display: block;
    width: fit-content;
    margin-top: 8px;
    padding: 5px 8px;
    border: 2px solid #b42d20;
    background: #ffe3de;
    color: #721a12;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.game-day-table tr.has-player-alert td:first-child {
    border-left: 5px solid #a5231a;
    background: #fff2ef;
}

.player-conduct-alert {
    display: flex;
    width: fit-content;
    max-width: 280px;
    margin-top: 8px;
    padding: 7px 9px;
    align-items: center;
    gap: 7px;
    border: 2px solid #a5231a;
    background: #ffe0da;
    color: #68150f;
    font-size: 0.72rem;
    line-height: 1.25;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.player-conduct-alert > span {
    display: grid;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    place-items: center;
    border-radius: 50%;
    background: #a5231a;
    color: white;
    font-size: 12px;
}

.player-conduct-alert-serious,
.player-conduct-alert-ban {
    background: #a5231a;
    color: white;
}

.player-conduct-alert-serious > span,
.player-conduct-alert-ban > span {
    background: #28100e;
}

.player-conduct-alert-ban {
    border-color: #28100e;
    box-shadow: 0 0 0 2px #a5231a;
}

.game-day-player-actions {
    display: flex;
    margin-top: 12px;
    align-items: center;
    gap: 8px;
}

.game-day-player-actions .table-action-link {
    min-height: 44px;
    margin-bottom: 0;
    align-items: center;
}

.payment-methods {
    display: grid;
    gap: 16px;
    margin: 22px 0;
}

.event-form .payment-methods-label {
    margin: 0;
}

.payment-standalone-section {
    margin-bottom: 64px;
}

.payment-balance-section {
    margin-top: 0;
    padding-top: 34px;
    border-top: 3px solid rgba(64, 79, 55, 0.2);
}

.payment-customer-lookup {
    margin-bottom: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

.standalone-customer-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.standalone-customer-results > a {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid var(--line);
    background: white;
    color: var(--ink);
    text-decoration: none;
}

.standalone-customer-results > a:hover,
.standalone-customer-results > a:focus-visible {
    border-color: var(--signal);
}

.standalone-customer-results span,
.standalone-customer-results small,
.standalone-customer-results > p {
    color: var(--muted);
    font-size: 11px;
}

.payment-customer-selected {
    display: grid;
    gap: 4px;
    margin-top: 14px;
    padding: 14px;
    border-left: 4px solid var(--signal);
    background: #eef3ea;
}

.payment-customer-selected span,
[data-payment-send-reason],
.payment-request-email-unavailable {
    color: var(--muted);
    font-size: 11px;
}

.payment-standalone-form .event-form-actions {
    margin-bottom: 0;
    padding-bottom: 6px;
}

.gift-card-action-form {
    margin-bottom: 30px;
    padding: 22px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.gift-card-action-form fieldset {
    margin-bottom: 0;
}

.gift-card-action-form > label,
.gift-card-action-form fieldset > label:not(.terms-check) {
    display: grid;
    gap: 7px;
    margin-bottom: 18px;
}

.gift-card-action-form > label > span,
.gift-card-action-form fieldset > label > span:first-child {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gift-card-action-form textarea,
.gift-card-action-form input,
.gift-card-action-form select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: white;
}

.gift-card-action-form small {
    color: var(--muted);
    font-size: 10px;
}

.gift-card-admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.gift-card-admin-actions form {
    padding: 20px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.gift-card-secret-panel {
    margin-top: 18px;
    padding: clamp(24px, 4vw, 38px);
    border: 2px solid var(--signal);
    background: #eef0e5;
}

.gift-card-secret-panel h3 {
    margin: 8px 0 22px;
    font-family: var(--display);
    font-size: 32px;
    text-transform: uppercase;
}

.gift-card-secret-panel dl {
    display: grid;
    gap: 1px;
    margin: 0 0 22px;
    background: var(--line);
}

.gift-card-secret-panel dl div {
    display: grid;
    grid-template-columns: minmax(150px, 0.35fr) 1fr;
    gap: 16px;
    padding: 14px;
    background: white;
}

.gift-card-secret-panel dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gift-card-secret-panel dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.gift-card-secret-panel code {
    font-size: 15px;
    font-weight: 800;
}

.danger-panel {
    padding-left: clamp(18px, 2vw, 28px);
    border-left: 4px solid #7b281b;
}

.payment-customer-results label {
    display: grid;
    gap: 7px;
}

.payment-customer-results label > span:first-child {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.payment-customer-results input {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.payment-customer-results {
    display: grid;
    gap: 14px;
}

.payment-customer-results article {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.7fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: center;
    padding: 22px;
    border: 1px solid var(--line);
    background: white;
}

.payment-customer-results article > div > span,
.payment-customer-results article > div > small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.payment-customer-results dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
}

.payment-customer-results dt,
.payment-customer-results dd {
    margin: 0;
}

.payment-customer-results dt {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.payment-customer-results dd {
    margin-top: 4px;
    font-weight: 850;
}

.payment-customer-results form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: end;
}

.currency-input {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.currency-input b {
    padding-left: 12px;
}

.currency-input input {
    border: 0;
}

.payment-request-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    gap: 1px;
    padding: 0;
    overflow: hidden;
    background: var(--line);
}

.payment-request-summary,
.payment-request-share {
    padding: 30px;
    background: white;
}

.payment-request-summary h2 {
    margin: 18px 0 26px;
    font-family: var(--display);
    font-size: 52px;
}

.payment-request-summary dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0;
}

.payment-request-summary dl div {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.payment-request-summary dt,
.payment-request-summary dd {
    margin: 0;
}

.payment-request-summary dt {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.payment-request-summary dd {
    margin-top: 5px;
    font-weight: 750;
}

/* A link in the booking summary, such as "Booked by" (core 0.9.0), is a
   44-pixel target on a phone rather than one line of text, and is
   underlined, because the values around it are the same bold ink. */

.payment-request-summary dd > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.payment-request-share {
    text-align: center;
}

.payment-request-share img {
    display: block;
    width: min(240px, 100%);
    height: auto;
    margin: 0 auto 20px;
}

.payment-request-share h3 {
    font-family: var(--display);
    font-size: 24px;
    text-transform: uppercase;
}

.payment-request-share p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.payment-request-share form {
    margin-top: 12px;
}

.payment-request-share form .button {
    width: 100%;
}

.booking-management-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.booking-management-actions > form {
    display: flex;
    min-height: 420px;
    padding: 26px;
    border: 1px solid var(--line);
    flex-direction: column;
    gap: 22px;
    background: white;
}

.booking-management-actions h3 {
    margin: 20px 0 10px;
    font-family: var(--display);
    font-size: 28px;
    text-transform: uppercase;
}

.booking-management-actions p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.booking-management-actions .button {
    width: 100%;
    margin-top: auto;
}

.booking-management-actions .ticket-policy-notice {
    margin-top: auto;
}

.booking-management-actions .booking-cancel-action {
    border-color: #dfc4bf;
}

.booking-refund-workspace .staff-section-intro {
    margin: 0 0 24px;
}

.booking-refund-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 18px;
    padding: 1px;
    background: var(--line);
}

.booking-refund-summary > div {
    min-width: 0;
    padding: 20px;
    background: white;
}

.booking-refund-summary > div[data-refund-finance-metric="remaining"] {
    box-shadow: inset 0 3px 0 var(--signal);
    background: #fffaf4;
}

.booking-refund-summary dt,
.booking-refund-summary dd {
    margin: 0;
}

.booking-refund-summary dt,
.booking-refund-summary small {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

.booking-refund-summary dt {
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.booking-refund-summary dd {
    margin: 8px 0 6px;
    font-family: var(--display);
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 900;
    line-height: 1;
}

.booking-refund-summary small {
    display: block;
}

.booking-refund-action {
    display: grid;
    max-width: none;
    gap: 28px;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid var(--line);
    background: white;
}

.booking-refund-action-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
    gap: 28px;
    align-items: center;
}

.booking-refund-action h3,
.booking-cancellation-heading h3 {
    margin: 8px 0;
    font-family: var(--display);
    font-size: clamp(25px, 3vw, 34px);
    text-transform: uppercase;
}

.booking-refund-action p,
.booking-cancellation-heading p,
.booking-cancellation-actions p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.booking-refund-outcome {
    padding: 18px;
    border-left: 3px solid var(--signal);
    color: white;
    background: var(--olive);
}

.booking-refund-outcome span,
.booking-refund-outcome strong {
    display: block;
}

.booking-refund-outcome span {
    margin-bottom: 7px;
    color: rgb(255 255 255 / 62%);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.booking-refund-outcome strong {
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.booking-refund-form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.booking-refund-form-grid > label {
    display: grid;
    gap: 8px;
}

.booking-refund-form-grid > label > span:first-child,
.booking-refund-action legend,
.booking-cancellation-actions legend {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.booking-refund-form-grid > label > small {
    color: var(--muted);
    font-size: 11px;
}

.booking-refund-action fieldset,
.booking-cancellation-actions fieldset {
    display: grid;
    gap: 9px;
    margin: 0;
}

.booking-refund-action fieldset > label,
.booking-cancellation-actions fieldset > label,
.booking-refund-action label[data-another-refund],
.booking-cancellation-actions label[data-another-refund] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 13px;
    border: 1px solid var(--line);
    cursor: pointer;
    background: var(--paper-2);
}

.booking-refund-action fieldset input[type="radio"],
.booking-cancellation-actions fieldset input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 1px 0 0;
    accent-color: var(--signal);
}

.booking-refund-action fieldset strong,
.booking-refund-action fieldset small,
.booking-cancellation-actions fieldset strong,
.booking-cancellation-actions fieldset small {
    display: block;
}

.booking-refund-action fieldset small,
.booking-cancellation-actions fieldset small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

.booking-refund-submit-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.booking-refund-submit-row .terms-check {
    max-width: 460px;
    margin: 0;
}

.booking-cancellation-panel {
    margin-top: 30px;
    padding: clamp(24px, 3vw, 34px);
    background: #fff8f5;
}

.booking-cancellation-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.6fr);
    gap: 30px;
    align-items: end;
    margin-bottom: 24px;
}

.booking-cancellation-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.booking-cancellation-actions > form {
    display: flex;
    max-width: none;
    min-width: 0;
    padding: 22px;
    border: 1px solid #dfc4bf;
    flex-direction: column;
    gap: 20px;
    background: white;
}

.booking-cancellation-actions h4 {
    margin: 8px 0;
    font-family: var(--display);
    font-size: 22px;
    text-transform: uppercase;
}

.booking-cancellation-actions .staff-partial-refund {
    grid-template-columns: 1fr;
    margin-left: 31px;
    cursor: default;
    background: white;
}

.booking-cancellation-actions .button {
    width: 100%;
    margin-top: auto;
}

.booking-cancel-without-refund {
    border-color: #b98579 !important;
}

.refund-history-list {
    display: grid;
    gap: 12px;
}

.refund-history-list > article {
    max-width: none;
    padding: 22px 24px;
    border: 1px solid var(--line);
    background: white;
}

.refund-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.refund-history-header > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.refund-history-header .section-index {
    margin: 0;
}

.refund-history-amount {
    flex: 0 0 auto;
    font-family: var(--display);
    font-size: 30px;
}

.refund-history-status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 5px 8px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.refund-history-status-complete {
    color: #31502a;
    background: #dcebd6;
}

.refund-history-status-attention {
    color: #782f25;
    background: #f0ddd8;
}

.refund-history-status-pending {
    color: #625b3e;
    background: #eee9d1;
}

.refund-history-status-neutral {
    color: var(--muted);
    background: var(--paper-2);
}

.refund-history-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 18px 0 0;
}

.refund-history-details > div {
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.refund-history-details dt,
.refund-history-details dd {
    margin: 0;
}

.refund-history-details dt {
    color: var(--muted);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.refund-history-details dd {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;
}

.staff-table-actions {
    min-width: 130px;
}

.staff-table-actions .table-action-link {
    display: block;
    width: max-content;
    margin-bottom: 5px;
}

.staff-table-actions > form {
    width: max-content;
    margin-top: 8px;
}

.staff-table-actions > form + form {
    margin-top: 10px;
}

.event-control-actions {
    min-width: 230px;
    vertical-align: top;
}

.staff-action-cluster {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: max-content;
    max-width: 260px;
}

.staff-action-cluster > form {
    margin: 0;
}

.staff-action-button,
.staff-action-menu > summary {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid var(--olive);
    color: var(--olive);
    background: white;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.staff-action-button-primary {
    color: white;
    background: var(--olive);
}

.staff-action-button:hover,
.staff-action-button:focus-visible,
.staff-action-menu > summary:hover,
.staff-action-menu > summary:focus-visible {
    color: white;
    background: var(--ink);
}

.staff-action-menu {
    width: 36px;
}

.staff-action-menu[open] {
    width: 100%;
    flex-basis: 100%;
}

.staff-action-menu > summary {
    width: 36px;
    padding: 0;
    color: white;
    border-color: var(--ink);
    background: var(--ink);
    cursor: pointer;
    font-size: 17px;
    letter-spacing: 0;
    list-style: none;
}

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

.staff-action-menu[open] > summary {
    margin-left: auto;
}

.staff-action-menu-panel {
    display: grid;
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--line);
    background: white;
}

.staff-action-menu.is-portalled[open] {
    width: 36px;
    flex-basis: auto;
}

.staff-action-menu.is-portalled[open] > summary {
    margin-left: 0;
}

.staff-action-menu-panel.is-floating {
    position: fixed;
    z-index: 120;
    top: var(--staff-action-menu-top);
    left: var(--staff-action-menu-left);
    display: grid;
    width: var(--staff-action-menu-width);
    max-height: var(--staff-action-menu-max-height);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 18px 44px rgb(8 11 8 / 22%);
    transform: translateY(-3px) scale(0.98);
    transform-origin: top right;
    transition:
        opacity 160ms ease-out,
        transform 160ms ease-out,
        visibility 0s linear 160ms;
}

.staff-action-menu-panel.is-floating[data-placement="above"] {
    transform: translateY(3px) scale(0.98);
    transform-origin: bottom right;
}

.staff-action-menu-panel.is-floating.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.staff-action-menu-panel.is-floating.is-closing {
    transition-duration: 120ms, 120ms, 0s;
    transition-delay: 0s, 0s, 120ms;
}

.staff-action-menu-backdrop {
    display: none;
}

.staff-action-menu-panel > a,
.staff-action-menu-button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: var(--ink);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: white;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
}

.staff-action-menu-panel > a:hover,
.staff-action-menu-panel > a:focus-visible,
.staff-action-menu-button:hover,
.staff-action-menu-button:focus-visible {
    color: white;
    background: var(--olive);
}

/* Duplicating an event needs one value from the operator, so the action carries
   its own field rather than sending them to a page to supply it. The label stays
   visible above the control, and the submit reuses the menu's own button. */

.staff-action-menu-date {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: white;
}

.staff-action-menu-date label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* The entry's field is a 44-pixel target with 14-pixel text (staff forms
   audit batch 4; it was 32 to 34 pixels with 11-pixel text) and the staff
   field's border and focus. */

.staff-action-menu-date input[type="date"],
.staff-action-menu-date input[type="text"] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #aaa69b;
    background: white;
    font: inherit;
    font-size: 14px;
}

.staff-action-menu-date input[type="date"]:focus-visible,
.staff-action-menu-date input[type="text"]:focus-visible {
    border-color: var(--olive);
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.staff-action-menu-date .staff-action-menu-button {
    min-height: 44px;
    margin: 4px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    text-align: center;
}

.staff-action-menu-state {
    border-top: 4px solid var(--paper-2);
}

.staff-action-menu-state form {
    margin: 0;
}

.staff-action-menu-danger {
    color: #8f3024;
}

.staff-action-menu-danger:hover,
.staff-action-menu-danger:focus-visible {
    color: white;
    background: #8f3024;
}

.staff-event-toolbar .staff-action-cluster {
    justify-content: flex-end;
}

.event-management-nav {
    margin-bottom: 18px;
}

.event-management-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    background: var(--line);
}

.event-management-metrics article {
    padding: 20px;
    background: white;
}

.event-management-metrics span,
.event-management-metrics strong,
.event-management-metrics small {
    display: block;
}

.event-management-metrics span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-management-metrics strong {
    margin-top: 8px;
    color: var(--ink);
    font-family: var(--display);
    font-size: 32px;
}

.event-management-metrics small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.event-management-metrics .needs-attention {
    box-shadow: inset 4px 0 0 var(--signal);
}

.event-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.7fr);
    gap: 18px;
}

.event-management-panel {
    margin: 0 0 18px;
}

.team-booking-balance-intro {
    max-width: 760px;
    color: var(--muted);
}

.team-booking-balance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.team-booking-balance-card {
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.team-booking-balance-card.is-paused {
    box-shadow: inset 4px 0 0 var(--signal);
}

.team-booking-balance-card > header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.team-booking-balance-card h3 {
    margin: 0 0 6px;
}

.team-booking-colour {
    width: 12px;
    height: 42px;
    flex: 0 0 auto;
    background: currentColor;
}

/* A staff mark carrying the colour class itself, the balance sheet's square
   and this bar (core 0.25.3), is edged as a yellow or white square is. */

.team-table i.team-yellow,
.team-table i.team-white,
.team-booking-colour.team-yellow,
.team-booking-colour.team-white {
    box-shadow: 0 0 0 1px #4b4e44;
}

.team-booking-balance-card dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 16px 0;
    background: var(--line);
}

.team-booking-balance-card dl div {
    padding: 10px;
    background: white;
}

.team-booking-balance-card dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.team-booking-balance-card dd {
    margin: 4px 0 0;
    font-family: var(--display);
    font-size: 20px;
}

.team-booking-balance-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.team-booking-balance-form > fieldset,
.team-booking-balance-form > .staff-switch,
.team-booking-balance-form > .staff-field-error,
.team-booking-balance-form > .staff-form-actions {
    grid-column: 1 / -1;
}

.team-booking-reopen-form {
    margin-top: 8px;
}

/* Three or more teams (core 0.27.0): each pause form folds under the
   button label it already had, a native <details>, open when it came back
   with an error. */

.team-booking-pause-details > summary {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ink);
    background: white;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.team-booking-pause-details > summary::-webkit-details-marker {
    display: none;
}

.team-booking-pause-details > summary::after {
    margin-left: 10px;
    content: "+";
    font-size: 15px;
}

.team-booking-pause-details[open] > summary::after {
    content: "\2212";
}

.team-booking-pause-details[open] > summary {
    margin-bottom: 16px;
}

.team-booking-pause-details > summary:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.team-booking-balance-grid.is-compact .team-booking-balance-card dl {
    margin: 12px 0;
}

@media (max-width: 620px) {
    .team-booking-balance-grid.is-compact .team-booking-balance-card dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.event-management-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.event-management-details div {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.event-management-details dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.event-management-details dd {
    margin: 5px 0 0;
    color: var(--ink);
    font-weight: 800;
}

.event-management-details dd small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

.event-management-workflows {
    display: grid;
    gap: 8px;
}

.event-management-workflows a {
    display: grid;
    gap: 3px;
    padding: 14px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper-2);
}

.event-management-workflows a:hover,
.event-management-workflows a:focus-visible {
    border-color: var(--olive);
    background: white;
}

/* The panels' summary lines. The Printed QR code section (core 0.8.4) is
   the site's section and its heading form on this page, so its sentences and
   its preview keep the site section's look. */

.event-management-workflows span,
.event-management-panel:not(.printed-event-code) p {
    color: var(--muted);
    font-size: 11px;
}

.event-management-capacity {
    display: block;
    margin-bottom: 10px;
    font-family: var(--display);
    font-size: 28px;
}

.event-management-panel meter {
    width: 100%;
    height: 12px;
    accent-color: var(--olive);
}

.event-management-attention p {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 12px;
    border-left: 3px solid var(--signal);
    color: var(--ink);
    background: #f5eadd;
}

.event-management-attention p + p {
    margin-top: 8px;
}

@media (max-width: 900px) {
    .event-management-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-management-grid {
        grid-template-columns: 1fr;
    }

    .team-booking-balance-grid {
        grid-template-columns: 1fr;
    }

    .staff-event-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-event-toolbar .staff-action-cluster {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .event-management-metrics,
    .event-management-details,
    .team-booking-balance-card dl,
    .team-booking-balance-form {
        grid-template-columns: 1fr;
    }

    .event-management-nav {
        width: 100%;
        overflow-x: auto;
    }

    .staff-local-nav.event-management-nav a {
        flex: 0 0 auto;
    }

    .staff-event-toolbar .staff-action-cluster,
    .staff-event-toolbar .staff-action-button {
        width: 100%;
        max-width: none;
    }

    .staff-event-toolbar .staff-action-cluster > form {
        width: 100%;
    }

    .staff-event-toolbar .staff-action-menu {
        width: 100%;
    }

    .staff-action-menu-panel.is-floating.is-sheet {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - 24px);
        transform: translateY(12px);
        transform-origin: bottom center;
        border-color: var(--ink);
        box-shadow: 0 20px 60px rgb(8 11 8 / 36%);
    }

    .staff-action-menu-panel.is-floating.is-sheet.is-visible {
        transform: translateY(0);
    }

    .staff-action-menu-backdrop.is-visible {
        position: fixed;
        z-index: 119;
        inset: 0;
        display: block;
        border: 0;
        background: rgb(8 11 8 / 42%);
        animation: staff-action-menu-backdrop-in 160ms ease-out both;
    }
}

.payment-request-finished {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    background: var(--olive);
}

.payment-request-finished .eyebrow {
    color: var(--signal);
}

.payment-request-finished p {
    color: #e3e6dc;
}

.payment-request-status-completed {
    color: #31502a;
    background: #dcebd6;
}

.payment-request-status-expired {
    color: #782f25;
    background: #f0ddd8;
}

.payment-request-status-starting,
.payment-request-status-checkout_created,
.payment-request-status-capturing {
    color: #625b3e;
    background: #eee9d1;
}

.player-booking-default-note {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 11px;
}

.refund-attention-row td {
    background: #fff8f5;
}

.refund-attention-row td:first-child {
    border-left: 4px solid #9a3d31;
}

.transaction-table td small,
.transaction-table td .table-action-link {
    display: block;
    margin-top: 5px;
}

.staff-booking-release {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(360px, 1.3fr);
    gap: 28px;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #b98579;
    background: #fff8f5;
}

.staff-booking-release h3 {
    margin: 8px 0;
    font-family: var(--display);
    font-size: 25px;
    text-transform: uppercase;
}

.staff-booking-release p,
.staff-booking-release small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.staff-booking-release fieldset {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.staff-booking-release legend {
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.staff-booking-release fieldset > label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--line);
    background: white;
}

.staff-booking-release fieldset > label small,
.staff-booking-release fieldset > label strong {
    display: block;
}

.staff-booking-release .staff-partial-refund {
    display: grid;
    grid-template-columns: 110px minmax(130px, 1fr);
    align-items: center;
    margin-left: 34px;
}

.staff-booking-release .staff-partial-refund > small {
    grid-column: 2;
}

.staff-booking-release .is-condition-disabled {
    opacity: 0.52;
}

.payment-gateway-option {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 64px;
    padding: 14px;
    border: 1px solid var(--line);
    cursor: pointer;
    background: var(--paper-2);
}

.payment-gateway-option input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--signal);
}

.form-grid .payment-gateway-option-copy {
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

.payment-gateway-option-copy strong {
    display: block;
}

.payment-gateway-option-copy small {
    display: inline-block;
    margin-top: 7px;
    padding: 4px 7px;
    border: 1px solid #a13b2e;
    color: #721a12 !important;
    background: #ffe3de;
    font-size: 9px !important;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.check-in-schedule-editor {
    margin-top: 28px;
    padding: 0 24px 24px;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 24%);
}

.check-in-schedule-editor summary {
    margin: 0 -24px;
    padding: 18px 24px;
    cursor: pointer;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.check-in-schedule-editor[open] summary {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.check-in-schedule-editor > label,
.check-in-schedule-item label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.check-in-schedule-editor label > span {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.check-in-schedule-editor label > span em {
    margin-left: 6px;
    color: #96998f;
    font-style: normal;
    font-weight: 600;
}

.check-in-schedule-editor input,
.check-in-schedule-editor textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.check-in-schedule-editor textarea {
    min-height: 110px;
    resize: vertical;
}

.check-in-schedule-editor .has-error input,
.check-in-schedule-editor .has-error textarea {
    border-color: #a64028;
}

.check-in-schedule-editor label small {
    color: #9b3424;
    font-size: 10px;
}

/* The one small in the panel that is help rather than an error. It follows
   its label, which names the field without it. */

.check-in-schedule-editor small.check-in-help {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 10px;
}

.check-in-schedule-builder {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.check-in-timings-toggle,
.check-in-schedule-item .check-in-timing-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    flex-direction: initial;
    gap: 10px;
    align-items: center;
}

.check-in-timings-toggle input,
.check-in-timing-toggle input {
    width: 18px;
    min-height: 18px;
    padding: 0;
    accent-color: var(--olive);
}

.check-in-schedule-builder > .fieldset-note {
    margin: 10px 0 0;
}

.check-in-schedule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.check-in-schedule-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    transition: opacity 180ms ease, background-color 180ms ease;
}

.check-in-schedule-item[hidden] {
    display: none;
}

.check-in-schedule-item.is-disabled {
    opacity: 0.62;
    background: #e8e5dd;
}

.check-in-schedule-item > strong,
.check-in-schedule-item > .check-in-timing-toggle,
.check-in-schedule-item .span-full {
    grid-column: 1 / -1;
}

.check-in-schedule-item > strong {
    font-family: var(--display);
    font-size: 14px;
    text-transform: uppercase;
}

.check-in-add-timing {
    margin-top: 14px;
}

.self-check-in-ready-mark {
    display: grid;
    width: 82px;
    height: 82px;
    margin: 0 auto 14px;
    place-items: center;
    border: 3px solid #d9f0c7;
    border-radius: 50%;
    color: #d9f0c7;
    font-size: 48px;
    font-weight: 850;
    line-height: 1;
}

@media (max-width: 900px) {
    .staff-settings-nav,
    .payment-setting-card,
    .navigation-setting-card {
        grid-template-columns: 1fr 1fr;
    }

    .payment-customer-results article,
    .payment-request-detail,
    .booking-management-actions,
    .staff-booking-release {
        grid-template-columns: 1fr;
    }

    .booking-refund-summary,
    .booking-cancellation-actions,
    .refund-history-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-refund-action-heading,
    .booking-refund-form-grid,
    .booking-cancellation-heading {
        grid-template-columns: 1fr;
    }

    .event-list-controls {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        width: 100%;
        flex-wrap: wrap;
        padding-top: 0;
    }

    .filter-actions .button {
        width: auto;
        flex: 1 1 140px;
    }

    .staff-context-card {
        grid-template-columns: 1fr;
    }

    .staff-context-card > div + div {
        padding-top: 18px;
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .agreement-active-card dl {
        grid-template-columns: 1fr;
    }

    .check-in-schedule-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .staff-local-nav {
        width: 100%;
    }

    .staff-local-nav a {
        flex: 1 1 0;
        text-align: center;
    }

    .staff-form-section,
    .agreement-active-card {
        padding: 20px;
    }

    .staff-conditional-panel {
        padding: 18px;
    }

    .staff-choice-grid {
        grid-template-columns: 1fr;
    }

    .staff-choice-grid--equal {
        grid-auto-rows: auto;
    }

    .event-schedule-panel {
        padding: 12px;
    }

    .event-booking-export-actions {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .event-booking-export-actions > span {
        width: 100%;
    }

    .event-booking-export-actions .button {
        flex: 1 1 120px;
    }

    .staff-form-actions .button {
        width: 100%;
    }

    .staff-settings-nav,
    .payment-setting-card,
    .navigation-setting-card {
        grid-template-columns: 1fr;
    }

    .payment-customer-results form,
    .payment-request-summary dl {
        grid-template-columns: 1fr;
    }

    .booking-refund-summary,
    .booking-cancellation-actions,
    .refund-history-details {
        grid-template-columns: 1fr;
    }

    .booking-refund-submit-row,
    .refund-history-header {
        align-items: stretch;
        flex-direction: column;
    }

    .booking-refund-submit-row .button {
        width: 100%;
    }

    .refund-history-amount {
        font-size: 26px;
    }

    .check-in-schedule-item,
    .walk-on-payment-options {
        grid-template-columns: 1fr;
    }

    .waiver-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .game-day-safety-summary {
        width: 100%;
    }

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

    .game-day-fire-item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "group"
            "identity"
            "presence"
            "team"
            "overnight"
            "checkout"
            "details";
    }

    .game-day-fire-identity { grid-area: identity; }
    .game-day-fire-presence { grid-area: presence; }
    .game-day-fire-checkout { grid-area: checkout; }

    .game-day-fire-overnight .attendance-actions,
    .game-day-player-details-grid,
    .game-day-site-closure-body {
        grid-template-columns: 1fr;
    }

    .game-day-register,
    .game-day-records {
        min-width: 0;
    }

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

    .game-day-register tbody,
    .game-day-register tr,
    .game-day-register td,
    .game-day-register th,
    .game-day-records tbody,
    .game-day-records tr,
    .game-day-records td,
    .game-day-records th {
        display: block;
        width: 100%;
    }

    .game-day-register tr,
    .game-day-records tr {
        display: grid;
        margin-bottom: 14px;
        border: 1px solid var(--line);
        background: white;
    }

    .game-day-register td,
    .game-day-records td {
        display: grid;
        grid-template-columns: minmax(104px, 0.38fr) minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 14px;
        overflow-wrap: anywhere;
    }

    .game-day-register td::before,
    .game-day-records td::before {
        color: #41483d;
        content: attr(data-label);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .game-day-register td > *,
    .game-day-records td > * {
        grid-column: 2;
    }

    .game-day-register .game-day-group-heading,
    .game-day-records .game-day-group-heading {
        border: 0;
    }

    .game-day-register .game-day-group-heading th,
    .game-day-records .game-day-group-heading th {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .game-day-register .attendance-actions,
    .game-day-register .attendance-actions form,
    .game-day-register .attendance-actions button,
    .game-day-register .attendance-actions label,
    .game-day-register .attendance-actions select,
    .game-day-records .attendance-actions,
    .game-day-records .attendance-actions form,
    .game-day-records .attendance-actions button,
    .game-day-records .attendance-actions label,
    .game-day-records .attendance-actions select {
        width: 100%;
    }

    .game-day-page .game-day-workspace:has(.game-day-check-in-presentation) { display: block; }
    /* Core 0.9.5: the panel is the phone sheet here, so no skip link (and
       :focus outranks the plain class, so it is named too). */
    .game-day-player-skip,
    .game-day-player-skip:focus { display: none; }
    .has-js .game-day-player-panel {
        position: fixed;
        z-index: 80;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        padding: 16px;
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
        align-content: start;
    }
    .has-js .game-day-player-panel.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        /* Visible at once, so focus can move into it; it still fades out on close. */
        transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
    }
    .has-js .game-day-player-panel[aria-hidden="true"] { pointer-events: none; }
    .has-js .game-day-player-close {
        display: inline-flex;
        position: sticky;
        z-index: 1;
        top: 0;
        align-items: center;
        justify-content: center;
        justify-self: end;
    }
    .game-day-more-actions-panel {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-day-player-panel,
    .game-day-player-panel.is-open { transition: none; }

    .staff-action-menu-panel.is-floating,
    .staff-action-menu-panel.is-floating.is-closing,
    .staff-action-menu-backdrop.is-visible {
        animation: none;
        transition: none;
    }
}

@media print {
    .flash {
        display: none !important;
    }

    .game-day-page .staff-toolbar,
    .game-day-page .filter-bar,
    .game-day-page .site-header,
    .game-day-page .site-footer,
    .game-day-page .game-day-player-details,
    .game-day-page .game-day-site-closure,
    .game-day-page .game-day-fire-actions {
        display: none !important;
    }

    .game-day-page .staff-shell {
        min-height: auto;
        padding: 0;
    }

    .game-day-page .staff-section {
        margin-top: 20px;
    }

    .game-day-page .staff-table-wrap {
        overflow: visible;
        border: 0;
    }

    .game-day-page .staff-table {
        min-width: 0;
        font-size: 9px;
    }

    .game-day-page .attendance-actions {
        display: none;
    }

    .game-day-page .balance-grid {
        grid-template-columns: 1fr 1fr;
    }

    .print-gift-card-secret .site-header,
    .print-gift-card-secret .site-footer,
    .print-gift-card-secret .staff-shell > .shell > *:not(#manage),
    .print-gift-card-secret #manage > *:not(.gift-card-secret-panel),
    .print-gift-card-secret .gift-card-secret-panel .button {
        display: none !important;
    }

    .print-gift-card-secret .staff-shell,
    .print-gift-card-secret #manage,
    .print-gift-card-secret .gift-card-secret-panel {
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: white;
        box-shadow: none;
    }
}

@media (max-width: 760px) {
    .gift-card-admin-actions {
        grid-template-columns: 1fr;
    }

    .gift-card-secret-panel dl div {
        grid-template-columns: 1fr;
    }
}

.rich-text-editor { grid-column: 1 / -1; margin-top: 1.25rem; }

.rich-text-editor-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .65rem; }

.rich-text-editor-heading label span { color: var(--ink); font-weight: 700; }

.rich-text-editor-heading small { color: var(--muted); max-width: 42rem; }

.rich-text-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .45rem; border: 1px solid var(--line); background: rgb(255 255 255 / 28%); }

.rich-text-toolbar button, .rich-text-style select { min-height: 2.25rem; border: 1px solid transparent; border-radius: .2rem; background: transparent; color: var(--ink); font: inherit; font-size: .82rem; padding: .35rem .55rem; }

.rich-text-toolbar button { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }

.rich-text-toolbar button:hover, .rich-text-toolbar button:focus-visible, .rich-text-style select:focus-visible { border-color: var(--olive); background: var(--paper); outline: none; }

.rich-text-toolbar button strong, .rich-text-toolbar button em { font-size: 1rem; }

.rich-text-toolbar-divider { width: 1px; height: 1.5rem; background: var(--line); margin: 0 .2rem; }

.rich-text-toolbar-spacer { flex: 1 1 auto; }

.rich-text-toolbar .rich-text-toolbar-quiet { color: var(--muted); font-size: .75rem; }

.rich-text-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; margin-top: .75rem; }

.rich-text-source-pane, .rich-text-preview { min-width: 0; border: 1px solid var(--line); background: rgb(255 255 255 / 24%); }

.rich-text-source-pane { display: flex; flex-direction: column; }

.rich-text-pane-label { display: block; padding: .75rem .9rem .55rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.rich-text-workspace textarea { display: block; width: 100%; flex: 1 1 auto; height: 100%; min-height: 15rem; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: .9rem; resize: none; line-height: 1.55; }

.rich-text-workspace textarea:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; }

.rich-text-preview { min-height: 15rem; }

.rich-text-preview > div { min-height: calc(15rem - 2.4rem); border-top: 1px solid var(--line); padding: .9rem; }

.rich-text-preview .rich-text-empty { color: var(--muted); font-style: italic; }

[data-waiver-agreement-editor] .rich-text-editor { margin-top: 0; padding: 0 18px 18px; }

[data-waiver-agreement-editor] .rich-text-preview > div { padding: 0; overflow: auto; }

[data-waiver-agreement-editor] .rich-text-preview > div > .waiver-agreement { max-height: none; min-height: 100%; margin: 0; padding: clamp(20px, 4vw, 42px); overflow: visible; border: 0; }

.rule-editor-note { align-self: end; margin: 0; color: var(--muted); font-size: .82rem; }

@media (max-width: 760px) { .rich-text-workspace { grid-template-columns: 1fr; } .rich-text-toolbar-spacer { display: none; } .rich-text-editor-heading { display: block; } .rich-text-editor-heading small { display: block; margin-top: .25rem; } [data-waiver-agreement-editor] .rich-text-editor { padding: 0 12px 12px; } }

.event-uniform-visibility { margin-bottom: 24px; }

.event-team-uniforms { grid-column: 1 / -1; display: grid; gap: 12px; }

.event-team-uniform-card { padding: 18px; border: 1px solid var(--line); background: rgb(255 255 255 / 32%); }

.event-team-uniform-card h3 { margin: 0 0 8px; font-family: var(--display); font-size: 17px; text-transform: uppercase; }

.event-team-uniform-inherited { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.6; }

.event-team-uniform-recommended { margin: 7px 0 12px; color: var(--muted); font-size: 11px; }

.event-team-uniform-replacement { margin-top: 12px; }

.promotion-code-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 13px; }

.affiliate-admin { display: grid; gap: 28px; }

.affiliate-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

.affiliate-rule-grid > div { display: grid; gap: 14px; align-content: start; }

.affiliate-member-list { display: grid; gap: 10px; }

.affiliate-rewards { display: grid; gap: 10px; }

.affiliate-member-list > a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: 14px; align-items: center; padding: 15px 17px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }

.affiliate-rewards > article { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: 14px; align-items: center; padding: 15px 17px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }

.affiliate-member-list strong { display: grid; gap: 4px; }

.affiliate-member-list strong small { color: #8a4c14; font-size: 11px; text-transform: uppercase; }

.affiliate-member-list > a.affiliate-member-attention { border-color: #c88a3d; background: #fff8e8; }

.affiliate-identity-card { align-items: center; }

.affiliate-identity-card > div:last-child { align-content: center; justify-items: end; }

.affiliate-identity-card .status-pill { width: fit-content; margin-bottom: 5px; }

.affiliate-evidence dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.affiliate-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.affiliate-evidence dl > div { padding: 14px; background: rgb(255 255 255 / 45%); }

.affiliate-metrics > div { padding: 14px; background: rgb(255 255 255 / 45%); }

.affiliate-evidence dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.affiliate-metrics dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.affiliate-evidence dd { margin: 5px 0 0; overflow-wrap: anywhere; }

.affiliate-metrics dd { margin: 5px 0 0; overflow-wrap: anywhere; }

.affiliate-actions { display: grid; gap: 18px; }

.affiliate-actions form { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); }

.affiliate-offer-custom-controls { display: grid; gap: 18px; }

@media (max-width: 760px) {
    .affiliate-rule-grid,
    .affiliate-evidence dl { grid-template-columns: 1fr; }

    .affiliate-metrics { grid-template-columns: 1fr; }

    .affiliate-member-list > a { grid-template-columns: 1fr; }

    .affiliate-rewards > article { grid-template-columns: 1fr; }

    .affiliate-identity-card { grid-template-columns: 1fr; }

    .affiliate-identity-card > div + div { padding: 16px 0 0; border-top: 1px solid var(--line); border-left: 0; }

    .affiliate-identity-card > div:last-child { justify-items: start; }
}

.promotion-recipient-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
}

.promotion-recipient-options > legend,
.promotion-recipient-options > .staff-field-error {
    grid-column: 1 / -1;
}

.promotion-recipient-options > .terms-check {
    width: 100% !important;
}

.promotion-player-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.promotion-player-search > .staff-field,
.promotion-player-search > .promotion-player-selection,
.promotion-player-search > .promotion-player-results {
    grid-column: 1 / -1;
}

.promotion-player-results {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promotion-player-results button,
.promotion-player-results .terms-check {
    display: grid;
    width: 100%;
    gap: 3px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: white;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.promotion-player-results button:focus-visible {
    border-color: var(--olive);
    outline: 3px solid rgb(85 102 58 / 24%);
    outline-offset: 1px;
}

.promotion-player-results span,
.promotion-player-results small {
    overflow-wrap: anywhere;
}

.promotion-player-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: #f8f7f2;
}

.promotion-player-selection > span {
    display: grid;
    min-width: 0;
    gap: 3px;
    overflow-wrap: anywhere;
}

.promotion-immutable-summary { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-top: 4px solid var(--olive); background: rgb(255 255 255 / 38%); }

.promotion-immutable-code { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; color: #fff; background: var(--ink); }

.promotion-immutable-code > span { color: rgb(255 255 255 / 68%); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.promotion-immutable-code code { color: #fff; font-size: clamp(20px, 3vw, 28px); font-weight: 900; letter-spacing: .05em; overflow-wrap: anywhere; }

.promotion-immutable-identity { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 1px; margin: 1px 0 0; background: var(--line); }

.promotion-immutable-identity > div { min-width: 0; padding: 16px 18px; background: var(--paper); }

.promotion-immutable-identity dt,
.promotion-immutable-metrics dt { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

.promotion-immutable-identity dd { display: grid; gap: 3px; margin: 6px 0 0; overflow-wrap: anywhere; }

.promotion-immutable-identity dd strong { font-size: 14px; }

.promotion-immutable-identity dd span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.promotion-immutable-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; }

.promotion-immutable-metrics > div { padding: 16px 18px; border: 1px solid var(--line); background: rgb(255 255 255 / 55%); }

.promotion-immutable-metrics dd { margin: 6px 0 0; font-family: var(--display); font-size: 25px; font-weight: 900; overflow-wrap: anywhere; }

.promotion-immutable-note { display: grid; gap: 4px; margin: 20px 0 0; padding: 14px 16px; border-left: 4px solid var(--olive); color: var(--muted); background: rgb(80 84 67 / 8%); font-size: 13px; line-height: 1.5; }

.promotion-immutable-note strong { color: var(--ink); font-size: 12px; text-transform: uppercase; }

@media (max-width: 620px) {
    .promotion-recipient-options,
    .promotion-player-search {
        grid-template-columns: 1fr;
    }

    .promotion-recipient-options > legend,
    .promotion-recipient-options > .staff-field-error,
    .promotion-player-search > .staff-field,
    .promotion-player-search > .promotion-player-selection,
    .promotion-player-search > .promotion-player-results {
        grid-column: auto;
    }

    .promotion-player-selection .button {
        width: 100%;
    }

    .promotion-immutable-summary .staff-section-heading { align-items: start; }
    .promotion-immutable-code { display: grid; }
    .promotion-immutable-identity,
    .promotion-immutable-metrics { grid-template-columns: 1fr; }
}

/* Event editor progressive disclosure */

.event-section-navigation {
    display: grid;
    gap: 10px;
    margin: 0 0 28px;
    padding: 18px;
    border: 1px solid #807d73;
    background: #e8e4d8;
}

.event-section-navigation h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: 14px;
    text-transform: uppercase;
}

.event-section-navigation ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-section-navigation a {
    display: flex;
    min-height: 44px;
    padding: 9px 11px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #969287;
    color: var(--ink);
    background: #f8f5ed;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.event-section-navigation a:hover {
    border-color: var(--ink);
    background: #d7d1c2;
}

.event-section-navigation a:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.event-section-navigation [data-event-section-status] {
    color: #334d2f;
    font-size: 9px;
    letter-spacing: .05em;
    text-align: right;
    text-transform: uppercase;
}

.event-section-navigation [data-event-section-state="attention"] {
    border-color: #8d2d20;
    background: #f0d9d2;
}

.event-section-navigation [data-event-section-state="attention"] [data-event-section-status] {
    color: #6f2117;
}

.event-section-navigation [data-event-section-state="optional"] [data-event-section-status] {
    color: #575a52;
}

.form-errors ul {
    display: grid;
    gap: 7px;
    margin: 12px 0 0;
    padding-left: 20px;
}

.form-errors li,
.form-errors a {
    color: #6f2117;
    font-size: 12px;
    line-height: 1.45;
}

.form-errors a {
    display: flex;
    min-height: 44px;
    align-items: center;
}

.form-errors a:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.event-form > fieldset:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 8px;
}

.event-form [aria-invalid="true"] {
    border: 2px solid #8d2d20;
    background: #fff0eb;
    box-shadow: inset 4px 0 0 #8d2d20;
}

.event-form .field-error::before,
.event-form .staff-field-error::before,
.event-form .has-error > small:last-child::before {
    content: "!";
    display: inline-grid;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #812719;
    font-size: 10px;
    font-weight: 900;
}

.field-with-help,
.field-with-help-heading,
.attendance-config-heading {
    display: flex;
}

.field-with-help {
    flex-direction: column;
    gap: 7px;
}

.event-form [hidden] {
    display: none !important;
}

.field-with-help-heading,
.attendance-config-heading {
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.field-with-help label > span {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.field-with-help input,
.field-with-help textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #8c897f;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.field-with-help textarea {
    min-height: 110px;
    resize: vertical;
}

.field-with-help > small {
    color: var(--muted);
    font-size: 10px;
}

.field-with-help.has-error input,
.field-with-help.has-error textarea {
    border-color: #8d2d20;
}

.field-with-help.has-error > small {
    color: #812719;
}

.rich-text-with-help {
    position: relative;
}

.rich-text-with-help > .field-help {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 0;
}

.rich-text-with-help .rich-text-editor-heading {
    display: grid;
    padding-right: 60px;
    justify-items: start;
}

.rich-text-with-help .rich-text-editor-heading small {
    margin-top: 4px;
}

.field-help {
    position: relative;
    width: fit-content;
}

.field-help[open] {
    flex-basis: 100%;
    width: 100%;
}

.field-help[open] > summary {
    margin-left: auto;
}

.field-help > summary {
    display: inline-grid;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid #68745e;
    border-radius: 50%;
    color: #1f3020;
    background: #e8e4d8;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.field-help > summary::-webkit-details-marker {
    display: none;
}

.field-help > summary:hover {
    background: #c3cbb9;
}

.field-help > summary:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 3px;
}

.field-help[open] > summary {
    border-color: var(--ink);
    color: #fff;
    background: var(--ink-2);
}

.field-help > p {
    position: static;
    width: 100%;
    margin: 8px 0 0;
    padding: 14px 16px;
    border: 1px solid #70756b;
    color: var(--ink);
    background: #f4f0e5;
    font-size: 12px;
    line-height: 1.55;
}

.rich-text-with-help > .field-help[open] {
    position: relative;
    top: auto;
    right: auto;
    margin-left: auto;
}

.field-with-help-heading,
.attendance-config-heading {
    flex-wrap: wrap;
}

.event-form-control-group {
    margin-bottom: 24px;
}

/* More options: settings most events never change, at the foot of an editor
   section. It opens on an error inside or a value other than its default,
   and an error link opens it too (openFieldAncestors()). Staff only; see
   docs/design-language.md. */

.event-more-options {
    margin-top: 24px;
    border-top: 1px solid var(--line);
}

.event-more-options > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    color: #40503b;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

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

/* The chevron points down while closed and up while open. display: flex
   drops the browser's own marker, so this is the only sign that the summary
   opens anything. */

.event-more-options > summary::after {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    content: "";
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 150ms ease;
}

.event-more-options > summary:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.event-more-options[open] > summary {
    margin-bottom: 14px;
}

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

@media (prefers-reduced-motion: reduce) {
    .event-more-options > summary::after {
        transition: none;
    }
}

/* Section 1 of the event editor: the format cards, the "Which one should I
   choose?" explainer, "Use this set-up", and "Do players pick a team?" as a
   segmented choice. Staff only; see docs/design-language.md. */

.event-format-picker {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.event-format-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.event-format-card {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

/* The radio stays in the page for the keyboard and screen readers; the card
   shows its state. */

.event-format-card input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.event-format-card > span {
    display: grid;
    height: 100%;
    gap: 6px;
    align-content: start;
    padding: 14px 14px 12px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.event-format-card:hover > span {
    border-color: var(--ink);
}

.event-format-card input:checked + span {
    padding: 13px 13px 11px;
    border: 2px solid var(--olive);
    background: #f6f7ef;
}

.event-format-card input:checked + span::after {
    content: "✓";
    content: "✓" / "";
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--olive);
    font-weight: 700;
}

/* :focus, not :focus-visible, for the same reason as the team choice: an
   error summary link focuses the hidden radio from script. */

.event-format-card input:focus + span {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.event-format-card strong {
    padding-right: 18px;
    color: var(--ink);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.event-format-card small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.event-format-card--manual > span,
.event-format-card--manual input:checked + span {
    border-style: dashed;
}

/* The shape of each format: a block per game day, a dotted gap between days,
   and one long block for play through the night. Decoration only. */

.event-format-shape {
    display: flex;
    gap: 3px;
    height: 18px;
    margin: 4px 0 2px;
}

.event-format-shape i {
    flex: 1;
    background: var(--tan);
}

.event-format-shape [data-gap] {
    flex: 0.35;
    border-bottom: 2px dotted var(--line);
    background: transparent;
}

.event-format-shape [data-long] {
    flex: 3;
    background: var(--olive-light);
}

.event-format-explainer {
    border: 1px solid var(--line);
    background: var(--paper);
}

.event-format-explainer > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.event-format-explainer > summary::-webkit-details-marker {
    display: none;
}

/* The same chevron as More options: display: flex drops the browser's own
   marker, so this shows that the summary opens. */

.event-format-explainer > summary::after {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    content: "";
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 150ms ease;
}

.event-format-explainer > summary:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.event-format-explainer[open] > summary {
    border-bottom: 1px solid var(--line);
}

.event-format-explainer[open] > summary::after {
    transform: translateY(2px) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
    .event-format-explainer > summary::after {
        transition: none;
    }
}

.event-format-explainer > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-format-explainer article {
    min-width: 0;
    padding: 14px;
    border-right: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.5;
}

.event-format-explainer article:last-child {
    border-right: 0;
}

.event-format-explainer h3 {
    margin: 0 0 6px;
    font-family: inherit;
    font-size: 14px;
    text-transform: none;
}

.event-format-explainer article p {
    margin: 6px 0 0;
}

.event-format-explainer article h3 + p {
    margin-top: 0;
}

.event-format-explainer ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.event-format-explainer > p {
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

/* "Use this set-up" without JavaScript comes back at #event-format (section
   1); a section reached by its address starts below the fixed staff header. */

.staff-page .event-form > fieldset {
    scroll-margin-top: calc(var(--staff-app-header-height, 72px) + 16px);
}

/* So does a field an error summary link reaches without JavaScript. */

.staff-page .event-form :is(input, select, textarea) {
    scroll-margin-top: calc(var(--staff-app-header-height, 72px) + 16px);
}

.event-format-apply {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
}

.event-format-apply small {
    color: var(--muted);
    font-size: 12px;
}

/* A group of radio cards inside an editor section. The section legends are
   display headings, so a group's own legend is reset to a plain question.
   The printed sheet's heading form (core 0.8.3) is not an .event-form, so it
   is named too; without it the browser draws a framed group. */

.event-form fieldset.event-choice,
.printed-sheet-heading fieldset.event-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Floated, so the legend sits inside the fieldset's box like any heading and
   the divider above the group is not broken by it. */

.event-form .event-choice > legend,
.printed-sheet-heading .event-choice > legend {
    float: left;
    width: 100%;
}

.event-choice > legend + * {
    clear: both;
}

.event-form .event-choice > legend,
.printed-sheet-heading .event-choice > legend,
.event-team-choice-question {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
}

.event-choice > .fieldset-note {
    margin: -4px 0 12px;
    font-size: 13px;
}

/* A note under the cards rather than after the legend, such as why a
   status card is missing (core 0.4.1). */

.event-choice > .staff-choice-grid + .fieldset-note {
    margin: 10px 0 0;
}

.event-form fieldset.event-team-choice,
.event-form div.event-team-choice {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.event-team-choice > .fieldset-note {
    margin: 0;
}

/* "Do players pick a team?" is a segmented choice: the two .staff-choice
   cards sit joined in one ink-bordered bar, and the chosen one is filled. */

.event-team-choice .staff-choice-grid {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(220px, auto));
    gap: 0;
    max-width: 100%;
    border: 1px solid var(--ink);
}

.event-team-choice .staff-choice input {
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.event-team-choice .staff-choice > span {
    min-height: 0;
    height: 100%;
    gap: 2px;
    padding: 10px 34px 10px 16px;
    border: 0;
    background: white;
    color: var(--ink);
}

.event-team-choice .staff-choice + .staff-choice > span {
    border-left: 1px solid var(--ink);
}

.event-team-choice .staff-choice input:checked + span {
    box-shadow: none;
    background: var(--ink);
    color: white;
}

/* The fill is not the only sign of the chosen side: it carries a ✓ too, as
   a format card does, and forced colours, which drop the fill, outline it. */

.event-team-choice .staff-choice input:checked + span::after {
    content: "✓";
    content: "✓" / "";
    position: absolute;
    top: 10px;
    right: 14px;
    font-weight: 700;
}

@media (forced-colors: active) {
    .event-team-choice .staff-choice input:checked + span {
        outline: 3px solid CanvasText;
        outline-offset: -4px;
    }
}

/* :focus, not :focus-visible: an error summary link focuses the radio from
   script, which :focus-visible may not match after a click, and the radio
   itself can't be seen. */

.event-team-choice .staff-choice input:focus + span {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.event-team-choice .staff-choice strong {
    font-size: 14px;
}

.event-team-choice .staff-choice input:checked + span small {
    color: rgb(255 255 255 / 80%);
}

.event-team-choice.has-error .staff-choice-grid {
    border-color: #9b3424;
}

.event-team-choice-default {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.event-team-choice-default a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.event-team-choice-default a:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

@media (max-width: 1180px) {
    .event-format-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .event-format-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .event-format-explainer > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .event-format-explainer article {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .event-format-explainer article:last-child {
        border-bottom: 0;
    }

    .event-team-choice .staff-choice-grid {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .event-team-choice .staff-choice + .staff-choice > span {
        border-top: 1px solid var(--ink);
        border-left: 0;
    }
}

/* The When panel: the date and times an event hangs from, beside a dark
   timeline of everything they move. Staff only; see docs/design-language.md. */

.event-when-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    border: 1px solid var(--ink);
    background: var(--paper);
}

.event-when-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    align-content: start;
    min-width: 0;
    padding: 20px;
}

.event-when-inputs label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

/* A note under an input (the kept finish date's reason) stays muted; an error,
   the last small in a has-error label, takes the staff error colour from the
   shared rule above. Both at a readable 12px. */

.event-when-inputs label small {
    color: var(--muted);
    font-size: 12px;
}

.event-when-inputs > p {
    grid-column: 1 / -1;
    margin: 0;
}

.event-when-summary {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
    padding: 20px;
    color: var(--paper);
    background: var(--ink);
}

.event-when-summary h2 {
    margin: 0;
    color: var(--tan);
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.event-when-timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-when-timeline li {
    display: grid;
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    gap: 4px 12px;
    padding: 8px 0;
    border-top: 1px solid rgb(252 252 252 / 14%);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.event-when-timeline li:first-child {
    border-top: 0;
}

.event-when-timeline li > time,
.event-when-timeline li > strong {
    color: var(--paper);
    font-weight: 700;
}

/* A quieter paper on the dark surface. No token holds a muted tone for ink, so
   the paper token is dimmed; on --ink it still reads well above 7:1. */

.event-when-timeline li > span {
    color: var(--paper);
    opacity: 0.78;
}

.event-when-timeline li > span:only-child {
    grid-column: 1 / -1;
}

/* The reserved warning pair (see .staff-evidence-review__finding--warning):
   there is no warning token, and a fixed date is the one timing that will
   not follow the event. */

.event-when-fixed > em {
    grid-column: 2;
    justify-self: start;
    padding: 1px 6px;
    color: #56380f;
    background: #fff4d8;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The timing-rule control: a kind, the inputs that kind reads, and the date it
   resolves to. */

.timing-rule-heading {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 4px 12px;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 6px;
}

.timing-rule-heading > small {
    color: var(--muted);
    font-size: 12px;
}

.timing-rule-list {
    display: grid;
    grid-column: 1 / -1;
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--paper);
}

.timing-rule {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: start;
    min-width: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
}

.timing-rule:first-child {
    border-top: 0;
}

.timing-rule > .field-with-help-heading {
    grid-column: 1 / -1;
}

.timing-rule > .field-with-help-heading > strong {
    font-size: 13px;
}

.timing-rule > [data-timing-part] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.timing-rule > [data-timing-part][hidden] {
    display: none;
}

.timing-rule > [data-timing-part="kind"],
.timing-rule > [data-timing-part="at"] {
    grid-column: 1 / -1;
}

.timing-rule-result {
    display: block;
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 13px;
}

.timing-rule-result b {
    color: var(--ink);
}

.timing-rule > small {
    grid-column: 1 / -1;
    font-size: 12px;
}

.timing-rule--fixed {
    background: #fff4d8;
}

.timing-rule--fixed .timing-rule-result,
.timing-rule--fixed .timing-rule-result b {
    color: #56380f;
}

/* The staff focus ring (--signal) is too faint on the warning surface. */

.timing-rule--fixed :focus-visible {
    outline-color: var(--ink);
}

/* Times that would move: a booked event's save refused until staff keep or
   move each time it would move by itself (EventSaveDrift). The reserved
   warning pair, as a fixed timing has it, because Keep makes one. */

/* "On this page" links to the panel as it does to a section, so it too
   starts below the fixed staff header. */

.drift-times {
    display: grid;
    gap: 14px;
    min-width: 0;
    margin: 0 0 46px;
    padding: 18px 20px;
    border: 2px solid #56380f;
    color: #56380f;
    background: #fff4d8;
    scroll-margin-top: calc(var(--staff-app-header-height, 72px) + 16px);
}

.drift-times > h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: 20px;
    text-transform: uppercase;
}

.drift-times > p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.event-form .drift-time {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid #56380f;
}

.event-form .drift-time > legend {
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    overflow-wrap: anywhere;
}

.drift-time-change {
    margin: 0;
    font-size: 13px;
}

.drift-time-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.drift-time-choices > label {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #56380f;
    color: var(--ink);
    background: var(--paper);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.drift-time-choices input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--olive);
}

.drift-time > small {
    color: #9b3424;
    font-size: 12px;
}

/* The staff focus ring (--signal) is too faint on the warning surface. */

.drift-times :focus-visible {
    outline-color: var(--ink);
}

@media (max-width: 620px) {
    .drift-times {
        padding: 14px;
    }

    .drift-time-choices > label {
        flex: 1 1 100%;
    }
}

/* The game days list in the When panel: one row per game day, its label and
   date, its hours, Remove, then its date, Game on, End of play and the day
   play finishes; then a spare row and "+ Add a game day". The labels, inputs
   and error text are the When panel's own. Staff only; see the Game days list
   in docs/design-language.md. */

.event-game-days {
    display: grid;
    grid-column: 1 / -1;
    min-width: 0;
    border: 1px solid var(--line);
    background: white;
}

.event-game-day {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    align-items: start;
    min-width: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
}

.event-game-day:first-child {
    border-top: 0;
}

.event-game-day[data-game-day-spare] {
    border-top-style: dashed;
}

.event-game-day-name {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    grid-column: 1;
    align-items: baseline;
    align-self: center;
    min-width: 0;
    margin: 0;
}

.event-game-day-name strong {
    color: var(--ink);
    font-size: 14px;
}

.event-game-day-name small {
    color: var(--muted);
    font-size: 12px;
}

.event-when-inputs .event-game-day-remove {
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    grid-row: 1;
    grid-column: 2;
    align-items: center;
    justify-self: end;
    min-height: 44px;
    margin: 0;
}

.event-when-inputs .event-game-day-remove input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/* Remove is a tick box in a sentence-case label, not a field caption. */

.event-when-inputs .event-game-day-remove > span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* With JavaScript the Remove tick box becomes a × button (event-format.mjs). */

button.event-game-day-remove {
    min-width: 44px;
    padding: 0;
    border: 1px solid transparent;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

button.event-game-day-remove:hover {
    border-color: var(--line);
    color: var(--ink);
}

button.event-game-day-remove:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

/* A later game day's date starts its line of fields at every width, including
   the spare row's, which has no Remove beside its label. */

.event-game-day > label[for$="-offset-days"]:not([for$="-ends-offset-days"]) {
    grid-column: 1;
}

/* Arrival (core 0.3.0) sits beside a later day's Date and, on the first
   game day, which has no Date, still in the second column. */

.event-game-day > label[for$="-arrival-time"] {
    grid-column: 2;
}

.event-game-day-hours {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.event-game-day-hours:empty {
    display: none;
}

.event-game-day-add {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-top: 1px dashed var(--line);
    color: #40503b;
    background: var(--paper);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.event-game-day-add[hidden] {
    display: none;
}

.event-game-day-add:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: -3px;
}

/* In two columns, a row with no Remove (the only game day, the spare row)
   gives its label the whole first line, so its fields start on the next one
   as every other row's do. */

@media (max-width: 760px), (min-width: 1001px) {
    .event-game-day:not(:has(.event-game-day-remove)) .event-game-day-name {
        grid-column: 1 / -1;
    }
}

/* Four columns where a row has the room: between 761 and 1000 pixels the
   When panel's inputs span the page. Above 1000 pixels they share it with
   the timeline, about 500 pixels, where four columns would cut off the
   selects' dates, so a row keeps two. The label, hours and Remove share the
   first line; then Date · Arrival · Game on · End of play, with Finishes
   under End of play, keep their columns from row to row, so the first game
   day, which has no date to choose, leaves the first column empty. */

@media (min-width: 761px) and (max-width: 1000px) {
    .event-game-day {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .event-game-day-name {
        grid-column: 1 / 3;
    }

    .event-game-day-hours {
        grid-row: 1;
        grid-column: 3;
        align-self: center;
        justify-self: end;
    }

    .event-when-inputs .event-game-day-remove {
        grid-column: 4;
    }

    .event-game-day > label[for$="-arrival-time"] {
        grid-column: 2;
    }

    .event-game-day > label[for$="-starts-time"] {
        grid-column: 3;
    }

    .event-game-day > label[for$="-ends-time"] {
        grid-column: 4;
    }

    /* Finishes flows to the next line, under End of play. */
    .event-game-day > label[for$="-ends-offset-days"] {
        grid-column: 4;
    }
}

@media (max-width: 1000px) {
    .event-when-panel {
        grid-template-columns: 1fr;
    }
}

/* A timing rule keeps its two short inputs (days or minutes, and a time) side
   by side at every width; only the When inputs stack. */

@media (max-width: 620px) {
    .event-when-inputs {
        grid-template-columns: 1fr;
    }

    .event-when-timeline li {
        grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    }
}

/* The event editor's layout: the form, and beside it at 1180px and wider the
   right-hand column, which event-editor.mjs fills with "On this page" and the
   timeline (decision D15). Without JavaScript the column stays hidden and the
   form keeps the full width. Staff only; see the Editor rail in
   docs/design-language.md. */

.event-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.event-editor-rail {
    display: grid;
    gap: 18px;
    align-content: start;
    min-width: 0;
    padding: 20px;
    color: var(--paper);
    background: var(--ink);
}

.event-editor-rail[hidden] {
    display: none;
}

.event-editor-rail .event-section-navigation {
    margin: 0;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid rgb(252 252 252 / 18%);
    background: transparent;
}

.event-editor-rail .event-section-navigation h2 {
    color: var(--tan);
    font-size: 13px;
    letter-spacing: 0.1em;
}

.event-editor-rail .event-section-navigation ol {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
}

.event-editor-rail .event-section-navigation a {
    min-height: 44px;
    border-color: transparent;
    color: var(--paper);
    background: transparent;
    font-size: 12px;
}

.event-editor-rail .event-section-navigation a:hover {
    border-color: rgb(252 252 252 / 30%);
    background: rgb(252 252 252 / 8%);
}

.event-editor-rail .event-section-navigation a:focus-visible {
    outline-color: var(--signal);
}

.event-editor-rail .event-section-navigation [data-event-section-status] {
    color: var(--tan);
}

.event-editor-rail .event-section-navigation [data-event-section-state="attention"] {
    border-color: #f0b35a;
    background: rgb(240 179 90 / 14%);
}

.event-editor-rail .event-section-navigation [data-event-section-state="attention"] [data-event-section-status] {
    color: #f0b35a;
}

.event-editor-rail .event-section-navigation [data-event-section-state="optional"] [data-event-section-status] {
    color: var(--paper);
    opacity: 0.78;
}

.event-editor-rail .event-when-summary {
    padding: 0;
    background: transparent;
}

/* Under a date heading the date repeats, so the time column can be narrower. */

.event-editor-rail .event-when-timeline li {
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
}

/* The When panel's inputs take the whole panel once the timeline has moved
   to the right-hand column. */

.event-when-panel > .event-when-inputs:only-child {
    grid-column: 1 / -1;
}

/* A date heading in the timeline: "Before the event", then each game day's date. */

.event-when-timeline li.event-timeline-day {
    display: block;
    padding: 12px 0 4px;
    border-top: 1px solid rgb(252 252 252 / 18%);
}

.event-when-timeline li.event-timeline-day:first-child {
    padding-top: 0;
    border-top: 0;
}

.event-when-timeline li.event-timeline-day + li {
    border-top: 0;
}

.event-timeline-day h3 {
    margin: 0;
    color: var(--tan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* The sticky save bar: the form's last child, so it sticks at the foot of the
   screen at every width (decision D16). The page keeps a focused field clear
   of it; event-editor.mjs measures its height. On a phone it also clears the
   home indicator. Staff only; see the Sticky save bar in
   docs/design-language.md. */

html:has(.event-save-bar) {
    scroll-padding-bottom: calc(var(--event-save-bar-height, 96px) + 16px);
}

.event-save-bar {
    position: sticky;
    z-index: 15;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-top: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 0 -6px 16px rgb(0 0 0 / 6%);
}

.event-save-bar-problems {
    display: flex;
    flex: 1 1 12rem;
    flex-wrap: wrap;
    gap: 0 8px;
    align-items: center;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.event-save-bar-problems strong {
    color: #6f2117;
}

.event-save-bar-problems a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: #6f2117;
    font-weight: 800;
}

.event-save-bar-problems a:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

@media (min-width: 1180px) {
    .event-editor-layout {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    /* First in document order, so the keyboard reaches it before the form;
       placed in the second column. */
    .event-editor-rail {
        position: sticky;
        top: calc(var(--staff-app-header-height) + 24px);
        grid-column: 2;
        grid-row: 1;
        width: 340px;
        max-height: calc(100vh - var(--staff-app-header-height) - 48px);
        margin-left: 32px;
        overflow-y: auto;
    }

    /* With the timeline in the rail, a game day row has the panel's width
       and takes the four columns it has from 761 to 1000 pixels: Date ·
       Arrival · Game on · End of play, with Finishes under End of play. */
    .event-when-inputs:only-child .event-game-day {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .event-when-inputs:only-child .event-game-day-name,
    .event-when-inputs:only-child .event-game-day:not(:has(.event-game-day-remove)) .event-game-day-name {
        grid-column: 1 / 3;
    }

    .event-when-inputs:only-child .event-game-day-hours {
        grid-row: 1;
        grid-column: 3;
        align-self: center;
        justify-self: end;
    }

    .event-when-inputs:only-child .event-game-day-remove {
        grid-column: 4;
    }

    .event-when-inputs:only-child .event-game-day > label[for$="-arrival-time"] {
        grid-column: 2;
    }

    .event-when-inputs:only-child .event-game-day > label[for$="-starts-time"] {
        grid-column: 3;
    }

    .event-when-inputs:only-child .event-game-day > label[for$="-ends-time"] {
        grid-column: 4;
    }

    .event-when-inputs:only-child .event-game-day > label[for$="-ends-offset-days"] {
        grid-column: 4;
    }
}

/* A phone keeps the bar to two short lines: Cancel goes, as the page's back
   link is at the top, so the two saves share a row (down to 360 pixels; at
   320 they stack), and the count keeps to one line, its first problem's name
   cut short with an ellipsis. "Show me" keeps a 44-pixel target that
   overlaps the bar's padding and gap. */

@media (max-width: 620px) {
    .event-save-bar {
        gap: 10px 8px;
    }

    .event-save-bar .button {
        flex: 1 1 auto;
        justify-content: center;
        padding-right: 12px;
        padding-left: 12px;
    }

    .event-save-bar-cancel {
        display: none;
    }

    .event-save-bar-problems {
        flex-basis: 100%;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .event-save-bar-problems span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .event-save-bar-problems a {
        min-height: 32px;
        margin: -6px 0;
        padding: 6px 0;
        box-sizing: content-box;
    }
}

/* On a short screen (a phone on its side, or a page zoomed to 400 per cent)
   a stuck bar would take most of it, so the bar comes to rest at the foot of
   the form and nothing needs to be kept clear of it. */

@media (max-height: 500px) {
    html:has(.event-save-bar) {
        scroll-padding-bottom: 0;
    }

    .event-save-bar {
        position: static;
    }
}

/* A section's one-line summary under its heading in the event editor,
   such as "Multi game day · No teams". */

.event-section-summary {
    margin: -14px 0 18px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

/* The event template library: a staff table whose cells read at the size of
   the values staff compare, with the template's name above its details. A
   template that needs attention says why in the reserved warning pair, in
   words, under its name. It stacks on a phone with .staff-table--stacked. */

.template-library-table {
    font-size: 14px;
}

.template-library-table td > strong {
    font-size: 16px;
}

.template-library-table td > span {
    display: block;
}

.template-library-table td > small {
    margin-top: 2px;
    font-size: 13px;
}

.template-library-attention {
    max-width: 52ch;
    margin: 8px 0 0;
    padding-left: 8px;
    border-left: 3px solid #a97831;
    color: #56380f;
    font-size: 13px;
}

.template-library-actions {
    display: flex;
    width: max-content;
    margin-left: auto;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.template-library-actions .button {
    min-height: 40px;
    padding: 8px 14px;
    white-space: nowrap;
}

.template-library-actions .staff-action-menu:not([open]),
.template-library-actions .staff-action-menu.is-portalled[open] {
    width: 40px;
}

.template-library-actions .staff-action-menu > summary {
    width: 40px;
    min-height: 40px;
    color: var(--ink);
    border-color: var(--line);
    background: white;
}

/* The menu sits beside the row's main action, so it stays quiet until used. */

.template-library-actions .staff-action-menu > summary:hover,
.template-library-actions .staff-action-menu > summary:focus-visible,
.template-library-actions .staff-action-menu[open] > summary {
    color: white;
    border-color: var(--ink);
    background: var(--ink);
}

/* The empty state's two actions keep their labels on one line and wrap as
   whole buttons instead. */

.template-library-empty .empty-actions {
    flex-wrap: wrap;
}

.template-library-empty .button {
    white-space: nowrap;
}

/* Stacked staff table on phones (see docs/design-language.md). Each row
   becomes a card: the name first, then one label and value line per column,
   then the actions on their own row. Only display changes. The markup
   restates the table roles, because a browser that changes a table's display
   can drop its semantics, and the header row is hidden visually rather than
   removed, so every cell keeps its column header for a screen reader. The
   visible labels come from data-label, with empty alternative text so a
   screen reader does not read each header twice. A page adds the class to its
   own prefixed table and lays out its own actions cell.

   The table is the containing block for its visually hidden labels at every
   width. They are absolutely positioned, and without a positioned ancestor
   inside the scrolling .staff-table-wrap they escape its overflow and widen
   the page on a phone. */

.staff-table--stacked {
    position: relative;
}

@media (max-width: 760px) {
    .staff-table--stacked {
        min-width: 0;
    }

    .staff-table--stacked,
    .staff-table--stacked tbody,
    .staff-table--stacked tr,
    .staff-table--stacked td {
        display: block;
    }

    .staff-table--stacked thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* A header that holds a control, such as a term with its definition,
       is shown while that control has focus, so the control is on screen.
       Only the focused header is shown, as one compact line across the
       table; the others stay visually hidden, as the whole row is otherwise,
       so the row can't come back at its full width and scroll the wrap
       sideways. */
    .staff-table--stacked thead:focus-within {
        display: block;
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .staff-table--stacked thead:focus-within tr {
        padding: 0;
    }

    .staff-table--stacked thead:focus-within th {
        display: block;
        padding: 8px 16px;
        border-bottom: 0;
    }

    .staff-table--stacked thead:focus-within th:not(:focus-within) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .staff-table--stacked tr {
        padding: 16px;
        border-bottom: 1px solid var(--line);
    }

    .staff-table--stacked tbody tr:last-child {
        border-bottom: 0;
    }

    .staff-table--stacked td,
    .staff-table--stacked tbody tr:last-child td {
        padding: 0;
        border-bottom: 0;
    }

    .staff-table--stacked td[data-label] {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        column-gap: 12px;
        margin-top: 10px;
        overflow-wrap: anywhere;
    }

    .staff-table--stacked td[data-label] > * {
        grid-column: 2;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* A status pill keeps its own width rather than filling the column. */
    .staff-table--stacked td[data-label] > .status-pill {
        justify-self: start;
    }

    .staff-table--stacked td[data-label]::before {
        grid-row: 1 / span 4;
        grid-column: 1;
        content: attr(data-label);
        content: attr(data-label) / "";
        padding-top: 3px;
        color: var(--muted);
        font-size: 9px;
        font-weight: 850;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    /* The first cell is the record's name, and the actions cell holds
       controls that name themselves, so neither shows its label. */
    .staff-table--stacked td:first-child,
    .staff-table--stacked td.staff-table-actions {
        display: block;
    }

    .staff-table--stacked td:first-child {
        margin-top: 0;
    }

    .staff-table--stacked td:first-child::before,
    .staff-table--stacked td.staff-table-actions::before {
        content: none;
    }

    .staff-table--stacked td.staff-table-actions {
        min-width: 0;
        margin-top: 16px;
    }

    .template-library-actions {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .template-library-actions .button {
        flex: 1 1 auto;
    }
}

/* The staff dashboard's events list and recent bookings stack on a phone
   with .staff-table--stacked, and each lays out its own actions there. An
   event's Manage fills the row beside its quick action and its menu; a
   booking's links keep their order and wrap as whole buttons. */

@media (max-width: 760px) {
    .event-list-table .staff-action-cluster {
        width: 100%;
        max-width: none;
    }

    .event-list-table .staff-action-button-primary {
        flex: 1 1 auto;
    }

    .event-list-table .staff-action-button,
    .event-list-table .staff-action-menu > summary {
        min-height: 40px;
    }

    .event-list-table .staff-action-menu:not([open]),
    .event-list-table .staff-action-menu.is-portalled[open],
    .event-list-table .staff-action-menu > summary {
        width: 40px;
    }

    .recent-bookings-table .staff-table-actions .table-action-link {
        display: inline-flex;
        width: auto;
        min-height: 40px;
        align-items: center;
        margin: 0 8px 8px 0;
    }
}

/* The event editor in template mode says so above the form, in the dark of
   the When timeline it previews, so it is never mistaken for an event. It
   holds words only. */

.template-mode-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
    margin: 0 0 22px;
    padding: 12px 16px;
    color: var(--paper);
    background: var(--ink);
    font-size: 14px;
}

.template-mode-banner b {
    color: var(--tan);
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The event overview's "Created from" line reads as part of the date line
   above it. The template's name, while it exists, and the linked events on a
   template's delete page are underlined so they read as links. */

.event-origin {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.event-origin a,
.template-delete-events a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.event-origin a:hover,
.event-origin a:focus-visible,
.template-delete-events a:hover,
.template-delete-events a:focus-visible {
    color: var(--olive);
    text-decoration-thickness: 2px;
}

/* An event opened from a template says so above the form. */

.event-from-template-note {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 22px;
    padding: 12px 16px;
    border-left: 4px solid var(--olive-light);
    background: var(--paper-2);
    font-size: 14px;
}

/* The events list filtered to one template, as scheduling lands it, says so
   above the filters, in the same note style as an event opened from a
   template. A long template name breaks inside the note rather than widening
   the page, and Clear is an underlined link. */

.template-library-filter {
    margin: 0 0 16px;
    padding: 10px 16px;
    border-left: 4px solid var(--olive-light);
    background: var(--paper-2);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.template-library-filter a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.template-library-filter a:hover,
.template-library-filter a:focus-visible {
    color: var(--olive);
    text-decoration-thickness: 2px;
}

/* Start from: the first step of New event when templates are saved. Each card
   is a real radio input, so the page works without JavaScript; its label
   stretches over the whole card, so the card is the target. The chosen card
   carries a "Selected" tag, and the Blank event card is dashed. */

.start-from-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 14px;
    min-width: 0;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
}

.start-from-card {
    position: relative;
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
    padding: 18px 18px 16px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.start-from-card:hover {
    border-color: var(--ink);
}

.start-from-card:has(input:checked) {
    padding: 17px 17px 15px;
    border: 2px solid var(--olive-light);
}

.start-from-card:has(input:checked)::before {
    content: "Selected";
    content: "Selected" / "";
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    color: white;
    background: var(--olive-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.start-from-card:has(input:focus-visible) {
    outline: 3px solid var(--olive);
    outline-offset: 3px;
}

.start-from-card h3 {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding-right: 78px;
    font-family: var(--display);
    font-size: 22px;
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.start-from-card input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--olive);
}

.start-from-card label {
    cursor: pointer;
}

.start-from-card label::after {
    content: "";
    position: absolute;
    inset: 0;
}

.start-from-card dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 12px;
    margin: 0;
    font-size: 13px;
}

.start-from-card dt {
    color: var(--muted);
}

.start-from-card dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.start-from-card--blank {
    border-style: dashed;
    background: transparent;
}

.start-from-card--blank p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* Continue leads, as the form's default button, and the pair wraps as whole
   buttons on a phone. */

.start-from-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

/* Blank has no dates to schedule, so its scheduling button goes while it is
   chosen. Without :has() the button stays, and the server ignores it. */

.start-from-grid:has(#start-from-blank:checked) ~ .start-from-actions [name="next"] {
    display: none;
}

/* Scheduling dates: a two-month calendar beside the list of events it will
   create. Without JavaScript the calendar stays hidden and .schedule-fallback
   is the form. A chosen day that clashes with another event at the chosen
   site, and the note that says so, use the reserved warning pair of
   .staff-evidence-review__finding--warning (#56380f on #fff4d8). */

.schedule-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    gap: 0 24px;
    align-items: start;
}

/* The calendar spans both rows, so the review card and the action bar below
   it share the second column and the bar sits on the card's foot. The bar is
   the form's own child, not the card's, so on a phone it can stay in view
   while staff scroll the calendar above. */

.schedule-layout > .schedule-card:first-of-type {
    grid-row: 1 / span 2;
}

/* The review card's row takes only its own height and the bar's row the
   rest, so a calendar taller than both never opens a gap between them. */

@media (min-width: 761px) {
    .schedule-layout {
        grid-template-rows: auto 1fr;
    }
}

.schedule-card {
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--paper);
}

.schedule-card > header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.schedule-card > header h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 20px;
    text-transform: uppercase;
}

.schedule-calendar {
    padding: 18px;
}

.schedule-calendar[hidden],
.schedule-fallback[hidden],
.schedule-calendar-picks[hidden],
.schedule-calendar-picks [hidden] {
    display: none;
}

.schedule-calendar-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.schedule-calendar > .schedule-calendar-picks {
    margin-bottom: 18px;
}

.schedule-calendar-picks > span:first-child {
    margin-right: 4px;
    color: var(--muted);
    font-size: 13px;
}

.schedule-calendar-picks > span:not(:first-child, [hidden]) {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.schedule-calendar-picks label {
    font-size: 13px;
}

.schedule-calendar-picks input[type="date"] {
    min-height: 36px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    background: var(--paper);
    font: inherit;
    font-size: 13px;
}

.schedule-calendar-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.schedule-calendar-pick:hover {
    border-color: var(--ink);
}

.schedule-calendar-pick:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.schedule-calendar-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.schedule-calendar-month {
    min-width: 0;
}

.schedule-calendar-month h3 {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 17px;
    text-transform: uppercase;
}

.schedule-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.schedule-calendar-dow {
    padding-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
}

.schedule-calendar-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: 0;
    border: 1px solid transparent;
    color: var(--ink);
    background: var(--paper-2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.schedule-calendar-day:hover {
    border-color: var(--ink);
}

.schedule-calendar-day:focus-visible {
    z-index: 1;
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.schedule-calendar-day.is-past,
.schedule-calendar-day:disabled {
    border-color: transparent;
    color: var(--muted);
    background: transparent;
    text-decoration: line-through;
    cursor: not-allowed;
}

.schedule-calendar-day.is-selected {
    color: white;
    background: var(--olive-light);
}

.schedule-calendar-day.is-selected::after {
    content: "✓" / "";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
}

.schedule-calendar-day.has-event::before {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ink);
    transform: translateX(-50%);
}

.schedule-calendar-day.is-selected.has-event::before {
    background: white;
}

.schedule-calendar-day.is-clash {
    color: white;
    background: #56380f;
}

.schedule-calendar-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 16px 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 12px;
    list-style: none;
}

.schedule-calendar-key li::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -2px;
}

.schedule-calendar-key [data-key="chosen"]::before {
    background: var(--olive-light);
}

.schedule-calendar-key [data-key="event"]::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
    vertical-align: 1px;
}

.schedule-calendar-key [data-key="clash"]::before {
    background: #56380f;
}

/* Multi-day events (core 0.14.0). The line under Choose days says how a
   template's days fall. A chosen event's other days are ghosts, a dashed olive
   border on a light olive tint; pointing at or focusing an unchosen day
   previews the days it would cover with a dashed ink border. A day two chosen
   events share is hatched in the reserved warning pair with a brown border and
   a ⚠ in place of the tick, so none of these relies on colour alone. */

.schedule-span-note {
    margin: 18px 18px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--olive);
    background: var(--paper-2);
    font-size: 14px;
    line-height: 1.45;
}

.schedule-calendar-day.is-ghost {
    border: 2px dashed var(--olive);
    color: var(--ink);
    background: color-mix(in srgb, var(--olive-light) 35%, var(--paper));
}

.schedule-calendar-day.is-preview {
    border: 2px dashed var(--ink);
    background: color-mix(in srgb, var(--olive-light) 20%, var(--paper));
}

.schedule-calendar-day.is-ghost.is-clash {
    border-color: #56380f;
    color: #56380f;
    background: #fff4d8;
}

.schedule-calendar-day.is-overlap {
    border: 2px solid #56380f;
    color: #56380f;
    background: repeating-linear-gradient(135deg, #fff4d8 0 6px, #f0dca8 6px 12px);
}

.schedule-calendar-day.is-overlap::after {
    content: "⚠" / "";
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 10px;
}

.schedule-calendar-day.is-overlap.has-event::before {
    background: #56380f;
}

.schedule-calendar-key [data-key="ghost"]::before {
    box-sizing: border-box;
    border: 2px dashed var(--olive);
    background: color-mix(in srgb, var(--olive-light) 35%, var(--paper));
}

.schedule-calendar-key [data-key="overlap"]::before {
    box-sizing: border-box;
    border: 2px solid #56380f;
    background: repeating-linear-gradient(135deg, #fff4d8 0 3px, #f0dca8 3px 6px);
}

/* Chosen days outside the two months shown: a count and links to the months
   that hold them, styled as the quick picks. */

.schedule-calendar-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin: 16px 0 0;
    font-size: 13px;
}

.schedule-calendar-jump[hidden],
.schedule-patterns[hidden],
.schedule-patterns-weeks[hidden] {
    display: none;
}

.schedule-calendar-jump > span {
    color: var(--muted);
}

/* More patterns: a labelled group under the quick picks, one column at 620
   pixels. */

.schedule-patterns {
    display: grid;
    gap: 14px;
    margin: -6px 0 18px;
    padding: 16px;
    border: 1px solid var(--ink);
    background: var(--paper);
    font-size: 14px;
}

.schedule-patterns h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 17px;
    text-transform: uppercase;
}

.schedule-patterns-saved,
.schedule-patterns-help {
    margin: -6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.schedule-patterns fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.schedule-patterns legend,
.schedule-patterns-fields label > span {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.schedule-patterns-repeat {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.schedule-patterns-repeat > legend {
    width: 100%;
}

.schedule-patterns label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 36px;
}

.schedule-patterns input[type="radio"],
.schedule-patterns input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--olive);
}

.schedule-patterns .schedule-patterns-weeks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    width: 100%;
    padding: 8px 10px;
    border-left: 3px solid var(--olive-light);
    background: var(--paper-2);
}

.schedule-patterns-weeks label {
    padding: 0 8px;
}

.schedule-patterns-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.schedule-patterns .schedule-patterns-fields label {
    display: block;
    min-width: 0;
}

.schedule-patterns select,
.schedule-patterns input[type="date"],
.schedule-patterns input[type="number"] {
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
    font: inherit;
    font-size: 14px;
}

.schedule-patterns-fields select,
.schedule-patterns-fields input {
    width: 100%;
}

.schedule-patterns input[type="number"] {
    width: 5em;
}

.schedule-patterns-end {
    display: grid;
    gap: 8px;
}

.schedule-patterns-end > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.schedule-patterns-end > div > label:first-child {
    min-width: 72px;
}

.schedule-patterns-unit {
    color: var(--ink);
    font-weight: 600;
}

.schedule-patterns input:focus-visible,
.schedule-patterns select:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.schedule-patterns-remember {
    font-weight: 600;
}

.schedule-patterns-preview {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--ink);
    background: var(--paper-2);
    line-height: 1.45;
}

.schedule-patterns-preview:empty {
    display: none;
}

.schedule-patterns > .button {
    justify-self: start;
}

.schedule-fallback {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 0;
}

.schedule-fallback legend {
    float: left;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.schedule-fallback p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.schedule-fallback label {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.schedule-fallback input[type="date"] {
    width: 100%;
    max-width: 16rem;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    font: inherit;
}

.schedule-fallback .button {
    justify-self: start;
}

.schedule-settings {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

.schedule-settings fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.schedule-settings label > span,
.schedule-settings legend {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.schedule-settings select {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    font: inherit;
}

.schedule-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--ink);
}

.schedule-segmented label {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    cursor: pointer;
}

.schedule-segmented label + label {
    border-left: 1px solid var(--ink);
}

/* With Scheduled offered there are three choices: Scheduled takes the first
   row, with a rule under it, and Drafts starts the second row against the
   bar's own left border, so it draws no second one. */

.schedule-segmented:has(> label:nth-child(3)) > label:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--ink);
}

.schedule-segmented:has(> label:nth-child(3)) > label:nth-child(2) {
    border-left: 0;
}

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

.schedule-segmented label:has(input:checked) {
    color: var(--paper);
    background: var(--ink);
}

.schedule-segmented label:has(input:focus-visible) {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.schedule-segmented small {
    font-size: 12px;
    opacity: 0.75;
}

.schedule-review {
    margin: 0;
    padding: 0 18px;
    list-style: none;
}

.schedule-review-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.schedule-review-item:first-child {
    border-top: 0;
}

.schedule-review-item strong {
    display: block;
    font-size: 14px;
}

.schedule-review-item small:not(.staff-field-error) {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.schedule-review-item .staff-field-error {
    display: block;
    margin-top: 4px;
}

.schedule-review-item > button {
    padding: 2px;
    border: 0;
    color: var(--muted);
    background: none;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.schedule-review-item > button:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.schedule-review-date {
    border: 1px solid var(--ink);
    text-align: center;
}

.schedule-review-date b {
    display: block;
    font-family: var(--display);
    font-size: 22px;
    line-height: 1.1;
}

.schedule-review-item .schedule-review-date small {
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.schedule-review-item .schedule-review-date small:first-child {
    color: var(--paper);
    background: var(--ink);
}

.schedule-review-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.schedule-review-note--warning {
    padding: 2px 6px;
    color: #56380f;
    background: #fff4d8;
    font-weight: 600;
}

.schedule-review-note--warning::before {
    content: "⚠ " / "";
}

/* A row whose event shares a day with another chosen event (core 0.14.0):
   the error under it, and an inset rule in the error red. */

.schedule-review-item--overlap {
    box-shadow: inset 3px 0 0 #a3221b;
    padding-left: 10px;
}

.schedule-confirm {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin-top: -1px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-top-color: var(--ink);
    background: var(--paper-2);
}

.schedule-confirm .button {
    justify-content: center;
    width: 100%;
}

.schedule-confirm p {
    margin: 0;
    color: var(--ink);
    font-size: 12px;
}

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

    .schedule-layout > .schedule-card:first-of-type {
        grid-row: auto;
        margin-bottom: 24px;
    }
}

/* Sticky phone action bar: on a phone the Create button and its count stay
   at the foot of the screen while staff choose days, as .chrono-player-actions
   does on the chrono desk. The page keeps focused controls clear of it. */

@media (max-width: 760px) {
    html:has(.schedule-confirm) {
        scroll-padding-bottom: var(--schedule-bar-height, 200px);
    }

    .schedule-confirm {
        position: sticky;
        z-index: 15;
        bottom: 0;
        gap: 8px;
        padding: 12px 16px;
        background: var(--paper);
    }

    .schedule-confirm p {
        display: none;
    }
}

@media (max-width: 620px) {
    .schedule-calendar-months {
        grid-template-columns: minmax(0, 1fr);
    }

    .schedule-patterns-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .schedule-patterns-repeat {
        display: grid;
    }

    .schedule-patterns > .button {
        justify-self: stretch;
    }

    .schedule-review-item {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .schedule-review-item > button {
        grid-column: 2;
        justify-self: start;
    }
}

.inherited-terrain-panel {
    padding: 16px 18px;
    border-left: 4px solid var(--olive);
    color: var(--ink);
    background: #e8e4d8;
}

.inherited-terrain-panel strong {
    display: block;
    font-family: var(--display);
    font-size: 14px;
    text-transform: uppercase;
}

.inherited-terrain-panel p {
    margin: 5px 0 0;
    color: #444a40;
    font-size: 12px;
}

.event-advanced-panel {
    border: 1px solid #827f73;
    background: rgb(255 255 255 / 28%);
}

.event-advanced-panel > summary {
    display: flex;
    min-height: 44px;
    padding: 12px 16px;
    align-items: center;
    color: var(--ink);
    background: #d2cab7;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

.event-advanced-panel > summary:hover {
    background: #bdb49e;
}

.event-advanced-panel > summary:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.event-advanced-panel[open] > summary {
    color: #fff;
    background: var(--ink-3);
}

.event-advanced-panel.has-error {
    border: 2px solid #8d2d20;
}

.event-advanced-panel.has-error > summary {
    color: #fff;
    background: #812719;
}

.event-uniform-visibility {
    margin: 0 0 24px;
}

.event-uniform-visibility > .staff-form-section {
    padding: 20px;
}

.team-advanced-settings {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.team-advanced-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.team-advanced-settings > .event-team-uniforms,
.team-advanced-settings > .team-capacity-note {
    margin: 0 18px 18px;
}

.event-form .event-team-uniform-replacement {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}

.attendance-config-panel {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 28%);
}

.attendance-config-panel h2 {
    margin: 0 0 14px;
    color: var(--ink);
    font-family: var(--display);
    font-size: 17px;
    text-transform: uppercase;
}

.attendance-config-heading h2 {
    margin-bottom: 0;
}

.attendance-readiness {
    margin: 16px 0;
    padding: 13px 15px;
    border-left: 4px solid #8d2d20;
    color: #6f2117;
    background: #f0d9d2;
}

.attendance-readiness.is-ready {
    border-left-color: #365d35;
    color: #193819;
    background: #dce8d7;
}

.attendance-config-panel > p {
    margin: 0 0 16px;
    color: #444a40;
    font-size: 12px;
}

.attendance-config-panel .terms-check {
    min-height: 44px;
    align-items: center;
}

/* Early arrival (spec 2026-10-16) under On the day › Arrival and leaving:
   its fields start where the switch's words start on a wide screen, with no
   rule beside them, and use the whole width on a phone (user ruling
   2026-10-16). From and On read as one sentence, the time narrow and the day
   choice wide, and stack at 600 pixels. See docs/design-language.md,
   Early arrival block. */

.early-arrival-fields {
    display: grid;
    gap: 18px;
    margin: 0 0 18px 32px;
}

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

/* .event-form's own fieldset margin (a section's) would leave a gap. */

.event-form .early-arrival-rule {
    display: grid;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.event-form .early-arrival-rule legend {
    width: auto;
    margin: 0 0 9px;
    padding: 0;
    border: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

.form-grid.early-arrival-sentence {
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
    gap: 14px;
}

.form-grid.early-arrival-note {
    row-gap: 9px;
}

.early-arrival-help,
.early-arrival-example {
    max-width: 44rem;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.early-arrival-preview {
    padding: 14px 16px;
    border: 1px solid #cbc8bf;
    background: #f3f1ea;
}

.early-arrival-preview h3 {
    margin: 0 0 9px;
    color: var(--ink);
    font-size: 13px;
}

.early-arrival-preview ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.early-arrival-preview li {
    display: grid;
    gap: 2px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.45;
}

.early-arrival-theme-note {
    margin: 0;
}

.ticket-early-arrival {
    display: grid;
    gap: 4px;
}

.ticket-early-arrival[hidden] {
    display: none;
}

.ticket-early-arrival .terms-check {
    min-height: 44px;
    align-items: center;
    margin: 0;
}

.ticket-early-arrival > small {
    padding-left: 32px;
    color: var(--muted);
    font-size: 12px;
}

/* Settings › Event defaults' early arrival: the same sentence in staff
   fields, under the switch's words. */

.early-arrival-defaults-fields {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
    gap: 14px;
    margin: 6px 0 0 32px;
}

.early-arrival-defaults-wide {
    grid-column: 1 / -1;
}

.early-arrival-defaults-fields > .staff-field-help {
    margin: 0;
}

@media (max-width: 600px) {
    .early-arrival-fields,
    .early-arrival-defaults-fields {
        margin-left: 0;
    }

    .early-arrival-defaults-fields {
        grid-template-columns: 1fr;
    }

    .form-grid.early-arrival-sentence {
        grid-template-columns: 1fr;
    }
}

.attendance-day-status {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 11px;
    text-transform: uppercase;
}

.attendance-config-panel th:last-child {
    min-width: 230px;
}

.attendance-config-panel th:last-child > .field-help {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

.event-form [disabled] {
    color: #555950;
    background: #ded9cd;
    cursor: not-allowed;
    opacity: 1;
}

@media (max-width: 760px) {
    .event-section-navigation ol {
        grid-template-columns: 1fr;
    }

    .team-advanced-settings-grid {
        grid-template-columns: 1fr;
    }

    .rich-text-with-help > .field-help {
        position: relative;
        top: auto;
        right: auto;
        margin-left: auto;
    }

    .rich-text-with-help .rich-text-editor-heading {
        padding-right: 0;
    }
}

.staff-evidence-review {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
    gap: 22px;
    align-items: start;
}

.staff-evidence-review > *,
.staff-evidence-review__main,
.staff-evidence-review__aside,
.staff-evidence-review__panel,
.staff-evidence-review__record,
.staff-evidence-review__identity > div,
.staff-evidence-review__delivery > div {
    min-width: 0;
}

.staff-evidence-review__aside {
    display: grid;
    gap: 18px;
}

.staff-evidence-review__panel {
    border: 1px solid var(--line);
    background: white;
}

.staff-evidence-review__heading,
.staff-evidence-review__side-heading {
    margin: 0;
    padding: 19px 22px;
    border-bottom: 1px solid var(--line);
}

.staff-evidence-review__heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.staff-evidence-review__side-heading h2,
.staff-evidence-review__record h2,
.staff-evidence-review__resolved h2,
.staff-evidence-review__email h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
}

.staff-evidence-review__body {
    padding: 22px;
}

.staff-evidence-review__danger {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid #a64028;
    border-left-width: 5px;
    color: #772a1d;
    background: #eddbd3;
}

.staff-evidence-review__danger strong,
.staff-evidence-review__delivery strong {
    display: block;
}

.staff-evidence-review__danger p,
.staff-evidence-review__email p {
    margin: 3px 0 0;
}

.staff-evidence-review__identity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 18px;
    border: 1px solid var(--line);
}

.staff-evidence-review__comparison,
.staff-evidence-review__source {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 18px;
    border: 1px solid var(--line);
}

.staff-evidence-review__comparison > div,
.staff-evidence-review__source > div {
    min-width: 0;
    padding: 15px 17px;
    border-right: 1px solid var(--line);
}

.staff-evidence-review__comparison dd,
.staff-evidence-review__source dd {
    min-width: 0;
    overflow-wrap: anywhere;
}

.staff-evidence-review__comparison dt,
.staff-evidence-review__source dt {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.staff-evidence-review__comparison dd,
.staff-evidence-review__source dd {
    color: var(--ink);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.4;
}

.staff-evidence-review__comparison > div:last-child,
.staff-evidence-review__source > div:nth-child(3n) {
    border-right: 0;
}

.staff-evidence-review__source > div:nth-child(-n + 3) {
    border-bottom: 1px solid var(--line);
}

.staff-evidence-review__comparison small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.staff-evidence-review__readiness {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 18px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.staff-evidence-review__readiness > div {
    min-width: 0;
    padding: 12px 14px;
}

.staff-evidence-review__readiness > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.staff-evidence-review__readiness span,
.staff-evidence-review__readiness strong {
    display: block;
    color: inherit;
}

.staff-evidence-review__findings {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.staff-evidence-review__finding,
.staff-evidence-review__instruction {
    padding: 15px 17px;
    border-left: 5px solid #976824;
    color: #56380f;
    background: #fff4d8;
}

.staff-evidence-review__finding--warning {
    color: #56380f;
    background: #fff4d8;
}

.staff-evidence-review__finding--danger,
.staff-evidence-review__resolved--rejected {
    border-left-color: #a64028;
    color: #772a1d;
    background: #eddbd3;
}

.staff-evidence-review__finding strong,
.staff-evidence-review__finding span,
.staff-evidence-review__instruction strong,
.staff-evidence-review__instruction p {
    display: block;
    overflow-wrap: anywhere;
}

.staff-evidence-review__finding span,
.staff-evidence-review__instruction p {
    margin: 3px 0 0;
}

.staff-evidence-review__identity > div {
    padding: 15px 17px;
    border-bottom: 1px solid var(--line);
}

.staff-evidence-review__identity > div:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.staff-evidence-review__identity > div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.staff-evidence-review dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.staff-evidence-review dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    font-weight: 750;
}

.staff-evidence-review .report-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 24px;
}

.staff-evidence-review form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.staff-evidence-review form legend {
    margin-bottom: 16px;
    font-family: var(--display);
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
}

.staff-evidence-review .field {
    display: grid;
    gap: 7px;
    margin-bottom: 20px;
}

.staff-evidence-review .field > label {
    color: var(--ink);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.staff-evidence-review .field > label strong {
    color: #772a1d;
}

.staff-evidence-review .field > label em {
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}

.staff-evidence-review .field select,
.staff-evidence-review .field textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #8c897f;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.staff-evidence-review .field textarea {
    min-height: 120px;
    resize: vertical;
}

.staff-evidence-review .field > small {
    color: var(--muted);
    font-size: 10px;
}

.staff-evidence-review .field [aria-invalid="true"],
.staff-evidence-review__confirmation [aria-invalid="true"] {
    border: 2px solid #8d2d20;
    background: #fff0eb;
}

.staff-evidence-review .field .field-error,
.staff-evidence-review__confirmation .field-error {
    color: #812719;
}

.staff-evidence-review__confirmation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 15px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
    font-weight: 750;
}

.staff-evidence-review__confirmation .field-error {
    grid-column: 2;
}

.staff-evidence-review__confirmation input {
    accent-color: #7b281b;
}

.staff-evidence-review__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 22px;
}

.staff-evidence-review__decision-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    justify-content: flex-end;
    margin-top: 22px;
}

.staff-evidence-review__decision-actions form {
    margin: 0;
}

.staff-evidence-review__decision-actions .button {
    background: #f9f7f1;
}

.staff-evidence-review__decision-actions .button-primary {
    background: var(--olive);
}

.staff-evidence-review__decision-actions .button-danger {
    background: #8d2d20;
}

.staff-evidence-review__record {
    padding: 19px;
    border: 1px solid var(--ink);
    color: white;
    background: var(--ink);
}

.staff-evidence-review__record .status-pill {
    margin-bottom: 14px;
}

.staff-evidence-review__record dl {
    margin: 12px 0 0;
}

.staff-evidence-review__record dl > div + div {
    margin-top: 11px;
}

.staff-evidence-review__record dt {
    color: rgb(255 255 255 / 62%);
}

.staff-evidence-review__record dd {
    color: white;
}

.staff-evidence-review__record a {
    display: inline-block;
    margin-top: 16px;
    color: var(--signal);
    font-weight: 800;
}

.staff-evidence-review__impact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.staff-evidence-review__impact li {
    position: relative;
    padding: 11px 0 11px 26px;
    border-bottom: 1px solid var(--line);
}

.staff-evidence-review__impact li:last-child {
    border-bottom: 0;
}

.staff-evidence-review__impact li::before {
    position: absolute;
    left: 0;
    color: var(--signal-dark);
    content: "→";
    font-weight: 900;
}

.staff-evidence-review__email {
    border: 1px solid var(--line);
    background: white;
}

.staff-evidence-review__email h2 {
    padding: 13px 15px;
    color: white;
    background: var(--olive);
}

.staff-evidence-review__email > div {
    padding: 16px;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.staff-evidence-review__resolved {
    padding: 28px;
    border-top: 5px solid var(--signal);
    color: white;
    background: var(--olive);
}

.staff-evidence-review__resolved .status-pill {
    margin-bottom: 15px;
}

.staff-evidence-review__resolved h2 {
    font-size: 30px;
}

.staff-evidence-review__resolved p {
    max-width: 600px;
    margin: 7px 0 0;
    color: rgb(255 255 255 / 75%);
}

.staff-evidence-review__resolved--rejected h2,
.staff-evidence-review__resolved--rejected p {
    color: #772a1d;
}

.staff-evidence-review__permanent-record {
    margin: 22px 0;
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.staff-evidence-review__permanent-record h3 {
    margin: 4px 0 14px;
}

.staff-evidence-review__permanent-record dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.staff-evidence-review__permanent-record dl > div {
    min-width: 0;
}

.staff-evidence-review__result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.staff-evidence-review__delivery {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-left: 4px solid var(--olive);
    background: #e4eee0;
}

.staff-evidence-review__delivery--failed,
.staff-evidence-review__delivery--unavailable {
    border-left-color: #a64028;
    background: #eddbd3;
}

.staff-evidence-review__delivery span:not(.status-pill) {
    display: block;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 11px;
}

.staff-evidence-review__delivery form {
    flex: 0 0 auto;
}

.staff-evidence-review__timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.staff-evidence-review__timeline li {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.staff-evidence-review__timeline time {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.staff-evidence-review__timeline strong,
.staff-evidence-review__timeline span {
    display: block;
    overflow-wrap: anywhere;
}

.staff-evidence-review a:focus-visible,
.staff-evidence-review button:focus-visible,
.staff-evidence-review input:focus-visible,
.staff-evidence-review select:focus-visible,
.staff-evidence-review textarea:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}

.staff-evidence-review__record a:focus-visible {
    outline-color: var(--signal);
}

.staff-evidence-review__decision-actions .button:focus-visible {
    outline: 3px solid #273021;
    outline-offset: 2px;
}

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

    .staff-evidence-review__aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staff-evidence-review__aside > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .staff-evidence-review__aside,
    .staff-evidence-review__identity,
    .staff-evidence-review__comparison,
    .staff-evidence-review__source,
    .staff-evidence-review__readiness,
    .staff-evidence-review .report-metrics {
        grid-template-columns: 1fr;
    }

    .staff-evidence-review__readiness > div + div {
        border-top: 1px solid rgba(255, 255, 255, 0.45);
        border-left: 0;
    }

    .staff-evidence-review__permanent-record dl {
        grid-template-columns: 1fr;
    }

    .staff-evidence-review__result-actions {
        flex-direction: column;
    }

    .staff-evidence-review__result-actions .button {
        width: 100%;
    }

    .staff-evidence-review__aside > :last-child:nth-child(odd) {
        grid-column: auto;
    }

    .staff-evidence-review__heading,
    .staff-evidence-review__side-heading,
    .staff-evidence-review__body,
    .staff-evidence-review__resolved {
        padding: 17px;
    }

    .staff-evidence-review__identity > div,
    .staff-evidence-review__identity > div:nth-child(odd),
    .staff-evidence-review__identity > div:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .staff-evidence-review__identity > div:last-child {
        border-bottom: 0;
    }

    .staff-evidence-review__comparison > div,
    .staff-evidence-review__source > div,
    .staff-evidence-review__source > div:nth-child(-n + 3) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .staff-evidence-review__comparison > div:last-child,
    .staff-evidence-review__source > div:last-child {
        border-bottom: 0;
    }

    .staff-evidence-review__delivery,
    .staff-evidence-review__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-evidence-review__decision-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .staff-evidence-review__decision-actions form,
    .staff-evidence-review__decision-actions .button {
        width: 100%;
    }

    .staff-evidence-review__delivery .button,
    .staff-evidence-review__actions .button {
        width: 100%;
    }

    .staff-evidence-review__timeline li {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }
}

/* Player profile editing and Game Day waiver delivery */

.player-profile-form fieldset {
    display: block;
}

.player-profile-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.player-profile-form > .event-form-actions {
    justify-content: flex-end;
}

.player-profile-form .player-profile-field--full,
.player-profile-form .player-profile-field--phone,
.player-profile-form .player-profile-field--postcode {
    grid-column: 1 / -1;
}

.player-profile-form .player-profile-field--phone {
    max-width: 28rem;
}

.player-profile-form .player-profile-field--postcode {
    max-width: 14rem;
}

.player-profile-summary {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    background: white;
}

.player-profile-summary dl {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    margin: 0;
}

.player-profile-summary dt,
.player-profile-summary dd {
    margin: 0;
}

.player-profile-summary dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.player-profile-summary dd {
    margin-top: 4px;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 750;
}

.player-profile-editor-section {
    margin-top: 18px;
    border: 1px solid var(--line);
    background: white;
}

.player-profile-editor-section > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 850;
    text-transform: uppercase;
}

.player-profile-editor-section > summary span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.player-profile-editor-section > summary .player-profile-editor-section__summary-copy {
    display: grid;
    gap: 3px;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.player-profile-editor-section__summary-copy small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.player-profile-editor-section > fieldset {
    margin: 0;
    padding: 20px;
    border: 0;
    border-top: 1px solid var(--line);
}

.player-profile-editor-section > .player-email-change {
    margin: 0;
    padding: 20px;
    border: 0;
    border-top: 1px solid var(--line);
}

.player-profile-email-section {
    margin: 0 0 22px;
}

.player-account-card {
    margin: 0 0 22px;
    border: 1px solid var(--line);
    background: white;
}

.player-account-card__header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.player-account-card__header h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.player-account-card__header p {
    margin: 3px 0 0;
    color: var(--muted);
}

.player-email-identity > summary {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    cursor: pointer;
}

.player-account-feedback {
    margin: 0 18px 16px;
    padding: 10px 12px;
    font-weight: 800;
}

.player-email-change-form .player-email-change-new-email {
    display: grid;
    max-width: 32.5rem;
    gap: 6px;
}

.player-email-change-form .player-email-change-new-email > span {
    font-weight: 800;
}

.player-email-change-form .player-email-change-new-email small {
    color: #8c3020;
}

/* The address field matches the account's other fields: 48 px tall, a
   comfortable target on a phone (core 0.9.0). */

.player-email-change-form .player-email-change-new-email input {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.player-email-identity-summary {
    margin-bottom: 20px;
}

.player-email-change-new-email {
    max-width: 32.5rem;
}

.player-email-change-mode {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.player-email-change-mode legend {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.player-email-change-mode .terms-check small {
    display: block;
    margin-top: 3px;
}

.player-email-change-override {
    display: grid;
    gap: 14px;
}

.has-js .player-email-change-form > [data-condition-target].is-condition-disabled {
    display: none;
}

.game-day-action-feedback:empty {
    display: none;
}

.game-day-action-feedback:not(:empty) {
    position: sticky;
    z-index: 4;
    top: 12px;
    margin: 14px 0;
    padding: 13px 15px;
    border: 1px solid #527048;
    border-left: 5px solid var(--signal);
    color: #273021;
    background: #e4eee0;
    box-shadow: 0 6px 18px rgb(39 48 33 / 14%);
    font-size: 13px;
    font-weight: 800;
}

.waiver-email-actions {
    display: grid;
    gap: 9px;
}

.waiver-email-actions .waiver-email-action {
    margin: 0;
}

.waiver-alternate-email {
    border: 0;
    background: transparent;
}

.waiver-email-actions .waiver-email-action button,
.waiver-alternate-email > summary {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid #a97831;
    cursor: pointer;
    color: #56380f;
    background: #fff4d8;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.waiver-alternate-email > summary {
    list-style: none;
}

.waiver-alternate-email > summary::-webkit-details-marker {
    display: none;
}

.waiver-alternate-email > summary:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 3px;
}

.waiver-alternate-email > form {
    padding: 12px;
    border: 1px solid var(--line);
    border-top: 0;
    background: white;
}

.waiver-alternate-email .event-form-actions {
    padding-top: 12px;
}

.waiver-email-feedback:empty {
    display: none;
}

.waiver-email-feedback:not(:empty) {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #527048;
    color: #273021;
    background: #e4eee0;
    font-size: 12px;
    font-weight: 800;
}

.waiver-email-feedback[data-message-kind="error"] {
    border-color: #a84937;
    color: #6b2116;
    background: #f8e8e3;
}

/* The desk's message region never shows an error in green (core 0.8.2). With
   the server's error notice in it, the notice is the panel; with only words
   (a lost connection), the words sit on the red kind's tint. */

.game-day-action-feedback[data-message-kind="error"]:not(:empty) {
    z-index: 31;
    border-color: #a3221b;
    border-left-color: #a3221b;
    color: #5c1410;
    background: #fbeceb;
}

.game-day-action-feedback[data-message-kind="error"]:has(> .error-notice) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-weight: 400;
}

.game-day-action-feedback > .error-notice {
    margin: 0;
    box-shadow: 0 6px 18px rgb(39 48 33 / 14%);
}

/* One compact row on the desk (user ruling, 2026-10-12): the tag, the
   message with its hint beneath it, the reference with Copy, and Dismiss,
   about 60 pixels tall on a wide desk, so the pinned notice no longer covers
   the queue or the chosen player. The heading stays for screen readers; the
   tag already says the kind. On a narrower desk the row wraps: the tag and
   Dismiss, then the message, the hint and the reference. */

.game-day-action-feedback > .error-notice.error-notice--fragment {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 2px 16px;
    padding: 8px 8px 8px 14px;
    border-left-width: 6px;
}

.game-day-action-feedback > .error-notice .error-notice-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.game-day-action-feedback > .error-notice .error-notice-tag {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.game-day-action-feedback > .error-notice .error-notice-message {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.game-day-action-feedback > .error-notice .error-notice-hint {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.35;
}

.game-day-action-feedback > .error-notice .error-notice-reference {
    grid-column: 3;
    grid-row: 1 / span 2;
    grid-template-columns: auto auto auto;
    gap: 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.game-day-action-feedback > .error-notice .error-notice-reference-label {
    grid-column: auto;
    font-size: 12px;
}

.game-day-action-feedback > .error-notice .error-notice-reference-code {
    padding: 2px 8px;
    font-size: 16px;
}

.game-day-action-feedback > .error-notice .error-notice-dismiss {
    grid-column: 4;
    grid-row: 1 / span 2;
}

.has-js .game-day-action-feedback > .error-notice .error-notice-dismiss {
    display: inline-flex;
}

@media (max-width: 1100px) {
    .game-day-action-feedback > .error-notice.error-notice--fragment {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 8px 8px 10px 12px;
    }

    .game-day-action-feedback > .error-notice .error-notice-tag {
        grid-column: 1;
        grid-row: 1;
    }

    .game-day-action-feedback > .error-notice .error-notice-dismiss {
        grid-column: 2;
        grid-row: 1;
    }

    .game-day-action-feedback > .error-notice .error-notice-message,
    .game-day-action-feedback > .error-notice .error-notice-hint,
    .game-day-action-feedback > .error-notice .error-notice-reference {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

/* Above 1280 pixels the staff header is fixed, so a pinned error stops below
   it rather than under it. */

@media (min-width: 1281px) {
    .game-day-action-feedback[data-message-kind="error"]:not(:empty) {
        top: calc(var(--staff-app-header-height, 72px) + 12px);
    }
}

/* The refusal moved into the phone sheet: it scrolls clear of the sticky
   Close, and words without a notice sit on the red kind's tint. */

.game-day-sheet-message {
    scroll-margin-top: 64px;
}

.game-day-sheet-message > .error-notice {
    margin: 0;
}

.game-day-sheet-message:not(:has(> .error-notice)) {
    padding: 13px 15px;
    border: 1px solid #a3221b;
    border-left: 5px solid #a3221b;
    color: #5c1410;
    background: #fbeceb;
    font-size: 14px;
    font-weight: 800;
}

/* Settings > Records & audit > Error log (core 0.8.2). */

.error-log-search .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.error-log-results {
    margin-top: 28px;
}

.error-log-results h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.error-log-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.error-log-entry {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 8px solid var(--error-kind);
    background: #fff;
    overflow-wrap: anywhere;
}

.error-log-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.error-log-tag {
    padding: 5px 14px;
}

.error-log-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 12px 0 0;
    font-size: 14px;
}

.error-log-facts div {
    display: contents;
}

.error-log-facts dt {
    color: #4a4744;
    font-weight: 800;
}

.error-log-facts dd {
    margin: 0;
    min-width: 0;
}

.error-log-facts code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.error-log-server {
    margin: 12px 0 0;
    padding: 10px 12px;
    color: #1f1d1a;
    background: var(--error-tint);
    font-size: 14px;
}

@media (max-width: 620px) {
    .error-log-search .form-grid,
    .error-log-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .error-log-facts dd {
        margin-bottom: 6px;
    }
}

/* Booking transfer.

   This screen is read aloud to a player standing at the desk, so the type scale
   is inverted from what the page used to do. The refusals the service writes are
   whole sentences carrying the constraint, the day and the numbers -- "Sunday 4
   October: Rental is full, 20 of 20 taken" -- and they were being set in the
   11px muted footnote of `.ticket-policy-notice` underneath a shouted uppercase
   rendering of the machine code. The code was the loudest thing on the screen
   and the sentence was the quietest. Here the sentence is the content and the
   code is not shown at all; it rides in `data-refusal` for the suite.

   The three refusal groups are coloured apart because their difference is the
   whole point of the triage: red is "this booking is going nowhere today",
   amber is "somebody has to finish something first", and the signal colour --
   the product's ordinary "read this" -- is "only THIS destination refuses, and
   the controls above change it". Colour is never the only carrier; each group
   states its heading and its remedy in words. */

.transfer-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 24px;
    margin: 0 0 22px;
}

.transfer-facts > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    border-top: 1px solid var(--line);
    padding-top: 9px;
}

.transfer-facts dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transfer-facts dd {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    overflow-wrap: anywhere;
}

.transfer-plain {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
}

.transfer-holds {
    margin: 0 0 22px;
    border-left: 3px solid var(--olive);
    padding: 16px 18px;
    background: #eef1e7;
}

.transfer-holds h3 {
    margin: 0 0 8px;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
}

.transfer-holds p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.transfer-holds ul {
    margin: 0;
    padding-left: 18px;
}

.transfer-holds li {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}

.transfer-holds li strong {
    font-weight: 800;
}

.transfer-refusal-group {
    margin: 0 0 18px;
    border-left: 3px solid var(--signal);
    padding: 16px 18px;
    background: var(--shell);
}

.transfer-refusal-group h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
}

.transfer-refusal-remedy {
    margin: 5px 0 12px;
    color: var(--muted);
    font-size: 13px;
}

.transfer-refusal-group ul {
    margin: 0;
    padding-left: 18px;
}

.transfer-refusal {
    margin: 0 0 9px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
}

.transfer-refusal-booking {
    border-left-color: #a84937;
    background: #f8e8e3;
}

.transfer-refusal-unsettled {
    border-left-color: #9a6b18;
    background: #f7efdd;
}

.transfer-refusal-destination {
    border-left-color: var(--signal);
    background: #eee9d1;
}

.transfer-outcome-line {
    margin: 0 0 20px;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.45;
}

.transfer-outcome-line strong {
    font-family: var(--display);
    font-weight: 900;
    text-transform: uppercase;
}

.transfer-money {
    margin: 0 0 22px;
    border: 1px solid var(--line);
    padding: 18px;
    background: var(--paper);
}

.transfer-money h3 {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transfer-money p {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}

/* Two classes deep on purpose. `.transfer-money p` above is (0,1,1) and would
   otherwise win the font-size against a single class, which is how the figure a
   marshal reads aloud first came out set in body copy. */

.transfer-money .transfer-money-figure {
    margin: 2px 0 10px;
    font-family: var(--display);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
}

.transfer-money-handoff {
    color: var(--muted);
}

.transfer-consequences {
    margin: 0;
}

.transfer-consequences h3 {
    margin: 0 0 8px;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
}

.transfer-consequences ul {
    margin: 0;
    padding-left: 18px;
}

.transfer-consequences li {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Settings › Theme (core 0.17.0). Placed here, before the staff allowance
   block, for the reason that block gives: the player account's tests read the
   last "@media (max-width: 620px)" in this file. A settings column, and at 1180 pixels and
   wider a sticky preview rail as the event editor's; one column below that,
   with "Preview on your site" in place of the frame. Colour rows stack on a
   phone; the history table stacks below 620. The page's fields take a
   3-pixel ink focus ring: the settings forms' translucent olive one measured
   under 3:1 on the white panel. */

.theme-control {
    display: grid;
    gap: 24px;
}

.theme-control-main,
.theme-settings-form {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.theme-control-main > *,
.theme-settings-form > *,
.theme-custom-css > *,
.theme-css-form > * {
    min-width: 0;
}

.theme-choice .staff-choice > span {
    min-height: 0;
    gap: 6px;
}

.theme-choice-card.is-disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.theme-card-refusal {
    color: #56380f;
}

.theme-card-swatches {
    display: block;
    margin-bottom: 4px;
    border: 1px solid rgb(0 0 0 / 18%);
}

.theme-choice strong .status-pill,
.theme-card-copy .status-pill,
.theme-colour-name .status-pill,
.theme-font .status-pill {
    margin-left: 6px;
    padding: 2px 6px;
    vertical-align: 1px;
    font-size: 10px;
}

.theme-changed-pill {
    color: #4f4931;
    background: #eee9d1;
}

.theme-previewing-pill {
    color: white;
    background: #7c4a21;
}

.theme-locked {
    display: grid;
    gap: 14px;
}

.theme-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--olive);
    box-shadow: inset 3px 0 0 var(--olive);
    background: #f4f6ed;
}

.theme-card .theme-card-swatches {
    margin: 0;
}

.theme-card-copy {
    display: grid;
    gap: 3px;
}

.theme-card-copy strong {
    font-size: 14px;
}

.theme-card-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.theme-locked-note,
.theme-contrast-warning,
.theme-safe-mode {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    color: #2f281e;
    border-left: 3px solid #9a7041;
    background: #ead9b9;
    font-size: 13px;
    line-height: 1.5;
}

.theme-contrast-warning[hidden] {
    display: none;
}

.theme-safe-mode {
    display: block;
}

.theme-lock-icon {
    position: relative;
    flex: 0 0 auto;
    width: 12px;
    height: 10px;
    margin-top: 6px;
    background: currentColor;
}

.theme-lock-icon::before {
    position: absolute;
    bottom: 100%;
    left: 2px;
    width: 8px;
    height: 6px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    content: '';
}

.theme-warning-icon {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-top: 2px;
    border-right: 8px solid transparent;
    border-bottom: 14px solid #2f281e;
    border-left: 8px solid transparent;
}

.theme-control-list {
    display: grid;
}

.theme-control-list--fonts,
.theme-control-list--sections,
.theme-control-list--layout,
.theme-control-list--effects {
    gap: 22px;
}

.theme-control-list--fonts {
    max-width: 560px;
}

.theme-colour {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 18px;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.theme-colour:first-child {
    padding-top: 0;
    border-top: 0;
}

.theme-colour-name {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.staff-settings-form .theme-colour-name label {
    display: inline;
    font-size: 14px;
    font-weight: 800;
}

.theme-colour-name > label + .status-pill {
    justify-self: start;
    margin: 2px 0 0;
}

.theme-colour-name code,
.theme-font code {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.theme-colour-name small,
.theme-colour-default small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.theme-colour-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
}

.staff-settings-form .theme-colour-picker {
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 3px;
    border: 1px solid #77736a;
    background: white;
    cursor: pointer;
}

.theme-colour-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.theme-colour-picker::-webkit-color-swatch {
    border: 1px solid rgb(0 0 0 / 20%);
}

.theme-colour-picker::-moz-color-swatch {
    border: 1px solid rgb(0 0 0 / 20%);
}

.staff-settings-form .theme-colour-picker--none {
    display: block;
    background: repeating-linear-gradient(45deg, #ece9df 0 6px, white 6px 12px);
    cursor: default;
}

.staff-settings-form .theme-colour-text {
    width: 9.5em;
    min-height: 44px;
    padding: 0 12px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
}

.theme-colour-default {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    justify-content: space-between;
}

.theme-colour .field-error,
.theme-colour .theme-contrast-warning {
    grid-column: 1 / -1;
}

.theme-reset {
    min-height: 36px;
    padding: 0 12px;
    color: var(--olive);
    border: 1px solid var(--olive);
    background: white;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.theme-reset:hover {
    color: white;
    background: var(--olive);
}

.theme-reset:focus-visible,
.theme-inline-link:focus-visible,
.staff-settings-form .theme-colour-text:focus-visible,
.staff-settings-form .theme-font select:focus-visible,
.theme-focus-field select:focus-visible,
.theme-effect-options select:focus-visible,
.theme-custom-css textarea.theme-css-text:focus-visible,
.theme-device-toggle input:focus-visible + span {
    border-color: var(--ink);
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.staff-settings-form .theme-font label,
.staff-settings-form .theme-focus-field label,
.staff-settings-form .theme-effect-style label {
    font-size: 13px;
    font-weight: 800;
}

/* Google Fonts on Settings › Theme: a font control's downloaded fonts, the
   download disclosure and the Downloaded fonts list. */

.theme-font {
    display: grid;
    gap: 8px;
}

.staff-settings-form .theme-font > label {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
}

.staff-settings-form .theme-font > label .status-pill {
    margin-left: 0;
}

.theme-font-sample {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    margin: 0;
    padding: 10px 12px;
    color: var(--ink);
    border: 1px solid var(--line);
    background: #fbfaf6;
    font-size: 22px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.theme-font-sample span {
    font-weight: 700;
}

.theme-font-downloaded {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 12px;
    color: #1f3a1d;
    border-left: 3px solid var(--olive);
    background: #e7eddf;
    font-size: 13px;
    line-height: 1.5;
}

.theme-font-downloaded-icon {
    flex: 0 0 auto;
    width: 6px;
    height: 11px;
    margin: 2px 4px 0 3px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
}

.theme-google-font {
    border: 1px solid var(--line);
    background: white;
}

.theme-google-font > summary {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--olive);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.theme-google-font > summary::-webkit-details-marker {
    display: none;
}

.theme-google-font > summary::before {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    content: "";
    transform: rotate(-45deg);
    transition: transform 120ms ease;
}

.theme-google-font[open] > summary::before {
    transform: rotate(45deg) translate(-2px, -2px);
}

.theme-google-font > summary:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.theme-google-font-body {
    display: grid;
    gap: 6px;
    padding: 4px 12px 14px;
}

.staff-settings-form .theme-google-font-body label {
    font-size: 13px;
    font-weight: 800;
}

.theme-google-font-body small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.theme-google-font-body .theme-google-font-parsed {
    color: var(--ink);
}

.theme-google-font-row {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.staff-settings-form .theme-google-font-row input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
}

.staff-settings-form .theme-google-font-row input:focus-visible {
    border-color: var(--ink);
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.staff-settings-form .theme-google-font-row input[readonly] {
    color: var(--muted);
    background: #f4f2ec;
}

.theme-google-font-button {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 44px;
}

.theme-google-font-button[disabled] {
    opacity: 1;
    color: var(--muted);
    border-color: #b9b4a6;
    cursor: progress;
}

.theme-google-font-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #c9c4b6;
    border-top-color: var(--olive);
    border-radius: 50%;
    animation: theme-google-font-spin 900ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .theme-google-font-spinner {
        animation: none;
        border-right-color: var(--olive);
        border-top-color: #c9c4b6;
    }
}

.theme-google-font-status {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 13px;
}

.theme-google-font-status:empty {
    display: none;
}

.theme-font .field-error {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
}

.staff-settings-form .theme-google-font.has-error .theme-google-font-row input {
    border-color: #9b3424;
}

.theme-font-library {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.theme-font-library h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

.theme-font-library > p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.theme-font-library ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.theme-font-library-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 18px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.theme-font-library-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.theme-font-library-copy strong {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.theme-font-library-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.theme-font-library-copy .theme-font-library-warning {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    padding: 10px 12px;
    color: #2f281e;
    border-left: 3px solid #9a7041;
    background: #ead9b9;
    font-size: 13px;
}

.theme-font-library-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: flex-end;
}

.theme-font-used {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.theme-font-used--none {
    color: var(--muted);
    font-weight: 400;
}

@media (max-width: 620px) {
    .theme-google-font-row {
        flex-direction: column;
    }

    .theme-google-font-button {
        justify-content: center;
        width: 100%;
    }

    .theme-font-library-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .theme-font-library-actions {
        justify-content: space-between;
    }
}

.theme-layout-choice {
    margin: 0;
    padding: 0;
    border: 0;
}

.theme-layout-choice legend {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 800;
}

.theme-option-card > span {
    min-height: 0;
}

.theme-option-thumbnail {
    display: block;
    width: 96px;
    height: auto;
    margin-bottom: 6px;
    border: 1px solid #aaa69b;
}

.theme-image-note {
    margin: 10px 0 12px;
}

.theme-focus-field,
.theme-effect-style {
    max-width: 260px;
}

.theme-image-choice + .theme-image-choice {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.theme-effect-options {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}

.theme-effect-dates {
    display: grid;
    gap: 12px;
}

.event-form fieldset.theme-effect-date {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: end;
    margin: 0;
    padding: 0;
    border: 0;
}

.event-form fieldset.theme-effect-date legend {
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.staff-settings-form .theme-effect-date select {
    width: auto;
    min-width: 5.5em;
    min-height: 44px;
}

.theme-effect-note {
    color: var(--muted);
    font-size: 12px;
}

.theme-inline-link {
    color: var(--olive);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.theme-empty-note {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
}

.theme-save-bar-status {
    flex: 1 1 100%;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.theme-save-bar-status:empty {
    display: none;
}

.theme-css-errors ul {
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
}

.theme-css-form {
    display: grid;
    gap: 14px;
}

.theme-custom-css textarea.theme-css-text {
    width: 100%;
    min-height: 260px;
    padding: 14px;
    border: 1px solid #77736a;
    background: #fbfaf6;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    tab-size: 4;
    resize: vertical;
}

.theme-custom-css textarea.theme-css-text[readonly] {
    color: #4a4d44;
    background: #ece9df;
}

.theme-css-field.has-error textarea.theme-css-text {
    border: 2px solid #a64028;
}

.theme-custom-css .staff-field small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.theme-css-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.theme-css-history h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.staff-table.theme-history-table {
    width: 100%;
    min-width: 0;
}

.theme-history-table th,
.theme-history-table td {
    padding: 12px 10px;
    white-space: normal;
}

.theme-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    justify-content: flex-end;
}

.theme-history-actions .button {
    min-height: 44px;
    padding: 0 14px;
}

.theme-history-css summary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--olive);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.theme-history-css pre {
    max-width: 420px;
    margin: 8px 0 0;
    padding: 10px;
    overflow: auto;
    background: #f3f0e6;
    font-size: 12px;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.theme-preview-panel {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    background: white;
}

.theme-preview-rail {
    display: grid;
    gap: 12px;
}

.theme-preview-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.theme-preview-head h2 {
    margin: 0;
    font-size: 20px;
}

.theme-device-toggle {
    display: flex;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ink);
}

.theme-device-toggle label {
    position: relative;
    cursor: pointer;
}

.theme-device-toggle input {
    position: absolute;
    opacity: 0;
}

.theme-device-toggle span {
    display: inline-flex;
    min-width: 88px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.theme-device-toggle input:checked + span {
    color: white;
    background: var(--ink);
}

.theme-preview-stage {
    display: grid;
    justify-items: center;
    padding: 14px;
    background: #d9d6cc;
}

.theme-preview-frame {
    width: 496px;
    height: 380px;
    overflow: hidden;
    border: 1px solid #918e85;
    background: white;
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

.theme-preview-frame iframe {
    display: block;
    width: 1280px;
    height: 980px;
    border: 0;
    transform: scale(0.3875);
    transform-origin: 0 0;
}

.theme-preview-panel:has(input[value="phone"]:checked) .theme-preview-frame {
    width: 293px;
    height: 600px;
    border: 8px solid #14180f;
    border-radius: 22px;
}

.theme-preview-panel:has(input[value="phone"]:checked) .theme-preview-frame iframe {
    width: 390px;
    height: 820px;
    transform: scale(0.71);
}

.theme-preview-caption {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.theme-preview-caption .text-link {
    color: var(--olive);
    font-weight: 800;
    text-decoration: underline;
}

.theme-preview-compact {
    display: none;
}

@media (min-width: 1180px) {
    .theme-control {
        grid-template-columns: minmax(0, 1fr) 562px;
        align-items: start;
    }

    .theme-preview-panel {
        position: sticky;
        top: calc(var(--staff-app-header-height) + 24px);
    }
}

@media (max-width: 1179px) {
    .theme-preview-rail {
        display: none;
    }

    .theme-preview-compact {
        display: grid;
        gap: 12px;
        justify-items: start;
    }

    .theme-preview-compact p {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
    }

    .theme-preview-panel {
        order: -1;
    }
}

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

    .staff-settings-form .theme-colour-text {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .theme-css-actions .button,
    .theme-preview-compact .button {
        flex: 1 1 0;
        width: 100%;
    }

    .theme-history-table thead {
        display: none;
    }

    .theme-history-table tr {
        display: grid;
        gap: 4px;
        padding: 12px 0;
        border-top: 1px solid var(--line);
    }

    .theme-history-table td {
        display: block;
        padding: 0;
        border: 0;
    }

    .theme-history-actions {
        justify-content: flex-start;
    }
}

/* -- Staff members and staff allowance (core 0.9.2) ----------------------------
   Placed here, not at the end, on purpose: tests/player-account-ui.test.mjs and
   player-profile-ui.test.mjs read the last "@media (max-width: 620px)" in this
   file as the player account's phone block, which follows.
   docs/design-language.md "Staff name tag" and "Staff allowance panel"; the
   rest reuses documented patterns. Every target here is at least 44 pixels. */

/* The Staff name tag: beside a name, inside the element that holds it, so it
   is part of the name's accessible name. Never a desk chip. */

.staff-name-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid #5f6b2c;
    background: #eef0e2;
    color: #2f3810;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: 0.2em;
    white-space: nowrap;
}

h1 .staff-name-tag,
h2 .staff-name-tag {
    font-size: 12px;
    vertical-align: 0.3em;
}

/* Settings › Staff allowance */

/* The refill choice is the last thing in its card: no .event-form fieldset gap. */

.staff-allowance-settings .staff-form-section > fieldset.staff-field {
    margin-bottom: 0;
}

/* Two fields side by side in .form-grid: the row is as tall as the taller
   (a help line or an error under it), and .staff-field's grid would spread
   that height into the shorter one's label and box, setting them lower. */

.staff-allowance-settings .staff-field {
    align-content: start;
}

.staff-allowance-unit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.staff-allowance-unit-word {
    color: var(--muted);
    font-weight: 700;
}

.staff-allowance-unit .currency-input,
.staff-allowance-unit .input-suffix {
    max-width: 12rem;
}

.staff-allowance-unit input {
    min-height: 44px;
}

/* Out-ranks .staff-field's full-width input (same specificity, later), so the
   free games box sits beside its unit on a desk. */

.staff-field .staff-allowance-unit input.staff-allowance-count {
    width: 7rem;
}

.staff-allowance-how {
    max-width: 62ch;
    margin: 0;
}

.staff-allowance-summary {
    max-width: 62ch;
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 6px solid var(--olive);
    background: white;
    font-weight: 700;
    line-height: 1.5;
}

.staff-allowance-summary--off {
    border-left-color: var(--muted);
    color: var(--muted);
}

/* The Staff list and adding someone */

.staff-member-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin: 0 0 16px;
}

.staff-member-search .staff-field {
    flex: 1 1 280px;
    margin: 0;
}

.staff-member-search input,
.staff-member-search .button {
    min-height: 44px;
}

.staff-member-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.staff-member-filter a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.staff-member-filter a[aria-current="page"] {
    border-color: var(--ink);
    box-shadow: inset 0 -4px 0 var(--olive);
}

.staff-member-name a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-weight: 800;
}

.staff-member-name small,
.staff-member-results small {
    display: block;
    color: var(--muted);
}

.staff-member-results {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.staff-member-results li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    background: white;
}

.staff-member-results .button {
    min-height: 44px;
}

/* The profile: the fourth Details card, Money's staff allowance */

.player-information-grid.player-information-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-membership-status {
    margin: 4px 0 12px;
}

.staff-membership-added {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.staff-membership-actions {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.staff-membership-actions form {
    margin: 0;
}

.staff-membership-card .button,
.staff-membership-card .staff-field input,
.staff-membership-card .staff-disclosure > summary {
    width: 100%;
    min-height: 44px;
}

.staff-allowance-uses {
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    background: white;
}

.staff-allowance-uses h3 {
    margin: 0 0 6px;
}

.staff-allowance-uses > p {
    margin: 0 0 14px;
    font-weight: 700;
}

.staff-allowance-uses .table-action-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.staff-allowance-given-back {
    color: var(--muted);
    font-style: normal;
}

/* SA31 under a booking's price: the staff booking page, the profile, the account */

.staff-allowance-line {
    display: block;
    margin-top: 2px;
    color: #2f3810;
    font-size: 12px;
    font-weight: 700;
}

/* The event editor's switch */

.event-staff-allowance {
    margin: 26px 0 22px;
}

.event-staff-allowance .fieldset-note {
    margin: 0;
    font-weight: 700;
}

@media (min-width: 1100px) {
    .player-information-grid.player-information-grid--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .player-information-grid.player-information-grid--four {
        grid-template-columns: 1fr;
    }
}

/* Reviewing a UKARA request (core 0.25.0): who is reviewing it, the summary,
   the checks (a card each, its state in words and its edge), the decision's
   four cards, a decided request and a refund that needs attention. */

.ukara-claim.is-you {
    border-left-color: var(--olive);
    background: #f4f6ed;
}

.ukara-claim.is-other {
    border-left-color: #a97831;
    background: #fff4d8;
}

.ukara-claim small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.ukara-summary-facts {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

.ukara-summary-facts > div {
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid var(--line);
}

.ukara-summary-facts > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.ukara-summary-facts dt,
.ukara-compare dt,
.ukara-decided-facts dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ukara-summary-facts dd {
    display: grid;
    gap: 3px;
    justify-items: start;
    margin: 0;
    overflow-wrap: anywhere;
}

.ukara-summary-facts dd strong {
    font-size: 16px;
}

.ukara-summary-facts dd span:not(.status-pill) {
    color: var(--muted);
    font-size: 13px;
}

.ukara-summary-facts .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
}

.ukara-checks-progress {
    font-weight: 800;
}

.ukara-check-list {
    display: grid;
    gap: 12px;
    max-width: 1040px;
    margin-top: 18px;
}

.ukara-check {
    min-width: 0;
    border: 1px solid #aaa69b;
    border-left: 5px solid #a97831;
    background: white;
}

.ukara-check.is-done {
    border-left-color: var(--olive);
}

.ukara-check.is-not-needed {
    border-left-color: #aaa69b;
}

.ukara-check-head {
    display: flex;
    gap: 16px;
    align-items: start;
    justify-content: space-between;
    padding: 14px 16px 0;
}

.ukara-check-head h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.ukara-check-head p {
    max-width: 70ch;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.ukara-check-head .status-pill,
.ukara-check-pills {
    flex: 0 0 auto;
}

.ukara-check-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: end;
}

.ukara-check-body {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 12px 16px 16px;
}

.ukara-check-line {
    margin: 0;
}

.ukara-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 10px 12px;
    background: #f6f4ee;
}

.ukara-compare .ukara-compare-field {
    grid-column: 1 / -1;
}

.ukara-compare .ukara-compare-field dt {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.ukara-compare dd {
    display: grid;
    gap: 2px;
    margin: 0;
    overflow-wrap: anywhere;
}

.ukara-compare small {
    color: var(--muted);
    font-size: 12px;
}

.ukara-compare-result {
    font-weight: 800;
}

.ukara-compare-result.is-match span {
    color: var(--olive);
}

.ukara-compare-result.is-differs {
    color: #8f3024;
}

.ukara-compare-result.is-unknown {
    color: var(--muted);
    font-weight: 600;
}

.ukara-check-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    gap: 12px;
}

.staff-settings-form .ukara-check-tick {
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 11px 14px;
    color: var(--ink);
    font-weight: 700;
}

.ukara-check.is-done .ukara-check-tick {
    border-color: var(--olive);
    background: #f4f6ed;
}

.ukara-check-saved {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.ukara-checks-actions {
    display: flex;
    justify-content: end;
    max-width: 1040px;
    margin-top: 14px;
}

.ukara-games-table td,
.ukara-games-table th {
    white-space: nowrap;
}

form.ukara-review-form.staff-settings-form {
    max-width: none;
}

.ukara-review-lock,
.ukara-decision-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ukara-review-lock[disabled] .ukara-check,
.ukara-review-lock[disabled] .ukara-decision {
    opacity: 0.62;
}

.ukara-decision .staff-form-section {
    max-width: 1040px;
}

.ukara-decision-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ukara-decision-panel {
    display: grid;
    gap: 16px;
}

.ukara-blocked {
    margin: 0;
    padding: 12px 14px;
    border-left: 4px solid #a97831;
    color: #56380f;
    background: #fff4d8;
}

.ukara-issue-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ukara-fixed-number {
    display: grid;
    gap: 4px;
    align-content: start;
}

.ukara-fixed-number strong {
    font-size: 20px;
    letter-spacing: 0.04em;
}

.ukara-fixed-number small {
    color: var(--muted);
    font-size: 12px;
}

.ukara-number-warning {
    margin: 0;
    padding: 8px 10px;
    border-left: 4px solid #a97831;
    color: #56380f;
    background: #fff4d8;
    font-size: 12px;
}

.ukara-site {
    max-width: 360px;
}

.ukara-needs,
.ukara-reasons {
    display: grid;
    gap: 8px;
}

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

.ukara-reasons legend,
.ukara-reasons .staff-field-error {
    grid-column: 1 / -1;
}

.ukara-reasons .ukara-check-tick {
    width: auto;
}

.ukara-fee .staff-choice-grid {
    margin-top: 10px;
}

.ukara-refund-reference {
    max-width: 360px;
    margin-top: 12px;
}

.ukara-reply-asked,
.ukara-reply-when {
    margin: 0 0 12px;
    color: var(--muted);
}

.ukara-reply-text {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-left: 4px solid var(--olive);
    background: white;
}

.ukara-reply-text p {
    margin: 0;
}

.ukara-reply-changed {
    margin: 0;
    padding: 10px 14px;
    color: #56380f;
    background: #fff4d8;
}

.ukara-decided-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0 0 18px;
}

.ukara-decided-facts .ukara-decided-wide {
    grid-column: 1 / -1;
}

.ukara-decided-facts dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ukara-decided-subhead {
    margin: 0 0 8px;
    font-size: 15px;
}

.ukara-decided-checks {
    display: grid;
    margin: 0 0 18px;
    padding: 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.ukara-decided-checks li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.ukara-decided-checks small {
    color: var(--muted);
}

.ukara-reopen form {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
}

.ukara-reopen p {
    margin: 0;
}

.ukara-reopen .button {
    width: fit-content;
}

.ukara-refund-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
}

.ukara-refund-record {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
}

.staff-nav-count {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 1px 6px;
    color: #56380f;
    background: #fff4d8;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 760px) {
    .ukara-summary-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ukara-summary-facts > div:first-child {
        grid-column: 1 / -1;
    }

    .ukara-summary-facts > div:nth-child(2) {
        padding-left: 0;
        border-left: 0;
    }

    .ukara-decision-choices,
    .ukara-reasons,
    .ukara-issue-fields {
        grid-template-columns: 1fr;
    }

    .ukara-decided-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ukara-decided-checks li {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .ukara-games-table td,
    .ukara-games-table th {
        white-space: normal;
    }
}

@media (max-width: 620px) {
    .ukara-check-head {
        display: grid;
    }

    .ukara-check-pills {
        justify-content: start;
    }

    .ukara-check-fields,
    .ukara-compare {
        grid-template-columns: 1fr;
    }

    .staff-settings-form .ukara-check-tick,
    .ukara-checks-actions .button,
    .ukara-reopen .button,
    .ukara-refund-actions .button {
        width: 100%;
    }
}

/* Staff invitations (core 0.20.0), kept above the player account's phone
   rules, which tests/player-account-ui.test.mjs reads as the sheet's last
   620-pixel block. Add staff's "How do they get their
   password?", the invitation's fields and "Send the invitation to", Edit
   staff's Invitation panel, and the invitee's page in the sign-in shell. */

.staff-user-form .staff-setup-choice {
    margin: 26px 0 0;
}

.staff-invitation-fields,
.staff-setup-password {
    margin-top: 18px;
}

.staff-invitation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}

.staff-invitation-grid .staff-field-label {
    display: block;
}

.staff-invitation-grid .staff-field-label em {
    margin-left: 6px;
    color: var(--muted);
    font-style: normal;
    font-weight: 600;
}

.staff-invitation-days {
    max-width: 14rem;
}

.staff-invitation-nudge {
    margin: 0;
    padding: 10px 12px;
    border-left: 4px solid #9a7041;
    color: #2f281e;
    background: #f6ecd8;
    font-size: 13px;
    line-height: 1.5;
}

.staff-invitation-nudge[hidden] {
    display: none;
}

/* The resend form's single-column groups: the days, then the challenge
   and its nudge, either side of the challenge cards. */

.staff-invitation-stack {
    display: grid;
    gap: 14px;
    max-width: 34rem;
    margin: 0 0 18px;
}

/* The form's fieldset and legend rules make a section heading; this group
   is one field, captioned like the fields beside it. */

.staff-invitation-send-to,
.event-form .staff-invitation-send-to {
    min-width: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.staff-invitation-send-to > legend,
.event-form .staff-invitation-send-to > legend {
    width: auto;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
}

.staff-invitation-send-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
}

.staff-invitation-send-option {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
}

.staff-invitation-send-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--olive);
}

.staff-invitation-send-address {
    max-width: 34rem;
}

.has-js .staff-invitation-send-address.is-condition-disabled,
.has-js .staff-invitation-stack > [data-condition-target].is-condition-disabled {
    display: none;
}

.staff-invitation-status p {
    margin: 0 0 8px;
}

.staff-invitation-refusal {
    margin: 12px 0 0;
}

.staff-invitation-resend {
    margin-top: 18px;
}

.staff-invitation-resend .event-choice {
    margin-bottom: 14px;
}

.staff-invitation-replaces {
    margin: 16px 0 0;
}

.login-panel .staff-invitation-help {
    color: #575a52;
    font-size: 0.82rem;
    line-height: 1.45;
}

.login-panel .staff-invitation-account {
    margin: 0 0 18px;
    overflow-wrap: anywhere;
}

.login-panel .staff-invitation-signed-in {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-left: 4px solid #9a7041;
    color: #2f281e;
    background: #ead9b9;
}

.login-panel .has-error input {
    border-color: #a3221b;
}

@media (max-width: 620px) {
    .staff-invitation-grid {
        grid-template-columns: 1fr;
    }

    .staff-invitation-send-options {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 620px) {
    .staff-member-filter {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .staff-member-search .button,
    .staff-field .staff-allowance-unit input.staff-allowance-count,
    .staff-allowance-unit .currency-input,
    .staff-allowance-unit .input-suffix {
        width: 100%;
        max-width: none;
    }
}

/* The UKARA number card on a phone (core 0.24.0): its head stacks, Change
   full width, the facts in two columns. Scoped to the section, because these
   come before the card's own rules (the account's 620-pixel block stays last). */

@media (max-width: 620px) {
    .player-ukara .player-ukara-record {
        padding: 16px 16px 4px;
    }

    .player-ukara .player-ukara-record-head {
        flex-direction: column;
    }

    .player-ukara .player-ukara-change {
        width: 100%;
    }

    .player-ukara .player-ukara-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
    }
}

@media (max-width: 620px) {
    .player-profile-form .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-profile-form .player-profile-field {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
    }

    .player-profile-form > .event-form-actions,
    .player-profile-personal-card > .event-form-actions {
        flex-direction: column;
    }

    .player-profile-form > .event-form-actions .button,
    .player-profile-personal-card > .event-form-actions .button {
        width: 100%;
    }

    .player-email-change-new-email {
        width: 100%;
        max-width: none;
    }

    .player-email-identity > summary {
        align-items: stretch;
        flex-direction: column;
    }

    .player-email-identity > summary .button {
        width: 100%;
    }

    .player-profile-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .player-profile-summary .button,
    .waiver-alternate-email .button {
        width: 100%;
    }

    .player-profile-editor-section > summary {
        align-items: start;
        flex-direction: column;
        gap: 4px;
    }
}

/* The site form's map (core 0.11.0): the current map as the announcement
   photo is shown (a thumbnail, or a PDF file tile), then the file field,
   then the three places as staff switches. */

.site-map-current {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid var(--line);
    background: white;
}

.site-map-current-preview {
    display: block;
    flex: 0 0 auto;
    border: 1px solid var(--line);
}

.site-map-current-preview img {
    display: block;
    width: 240px;
    height: 160px;
    object-fit: cover;
}

.site-map-current-file {
    display: grid;
    flex: 0 0 auto;
    place-content: center;
    justify-items: center;
    gap: 6px;
    width: 120px;
    height: 120px;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--paper-2);
    text-decoration: none;
}

.site-map-current-file span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.site-map-current > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-size: 14px;
    justify-items: start;
}

.site-map-current-meta {
    color: var(--muted);
    font-size: 13px;
}

.site-map-current .text-link {
    min-height: 44px;
}

.site-map-current .terms-check {
    min-height: 44px;
    align-items: center;
    margin: 0;
}

.event-form .site-map-places {
    display: grid;
    gap: 14px;
    margin: 26px 0 0;
}

.event-form .site-map-places legend {
    width: auto;
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #575a52;
}

.site-map-places > .fieldset-note {
    margin: 0;
}

@media (max-width: 520px) {
    .site-map-current {
        flex-direction: column;
    }

    .site-map-current-preview,
    .site-map-current-preview img {
        width: 100%;
        height: auto;
    }

    .site-map-current-preview img {
        aspect-ratio: 3 / 2;
    }
}

/* Staff access › API tokens (core 0.12.0): the list of tokens (stacked on a
   phone), the create and edit form with one row per area, and the sensitive
   details switch with its warning. */

.api-token-reveal--new {
    display: grid;
    gap: 6px;
    margin-bottom: 28px;
}

.api-token-reveal--new code {
    margin: 6px 0;
    font-size: 15px;
    user-select: all;
}

.api-token-reveal--new p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}

.api-token-reveal-for {
    color: var(--muted);
}

.api-token-count {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.api-token-table td {
    vertical-align: top;
}

.api-token-name code {
    font-size: 12px;
}

.api-token-access {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.api-token-access li {
    font-size: 13px;
}

.api-token-access span {
    color: var(--muted);
}

.api-token-legacy {
    display: block;
    max-width: 30ch;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.api-token-beyond {
    max-width: 34ch;
    margin: 8px 0 0;
    padding: 8px 10px;
    border-left: 3px solid #a97831;
    color: #56380f;
    background: #fff4d8;
    font-size: 12px;
    line-height: 1.45;
}

.api-token-sensitive-on {
    color: #56380f;
    background: #f5dfac;
}

.api-token-actions {
    white-space: nowrap;
}

.api-token-actions .button {
    min-height: 44px;
    padding: 10px 14px;
}

.api-token-actions form {
    display: inline-block;
    margin: 0 0 0 6px;
}

.api-token-revoke {
    border: 1px solid #8c2d21;
    color: #8c2d21;
    background: white;
}

.api-token-revoke:hover {
    color: white;
    background: #8c2d21;
}

.api-token-revoked {
    margin-top: 22px;
    border: 1px solid var(--line);
    background: white;
}

.api-token-revoked summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.api-token-revoked ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 4px 16px 16px;
    list-style: none;
    font-size: 13px;
}

.api-token-revoked li span {
    color: var(--muted);
}

.api-token-settings {
    display: grid;
    gap: 24px;
}

.api-token-settings .event-form-actions {
    margin-top: 4px;
}

.api-token-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
}

.api-token-fields .staff-field-label em {
    margin-left: 6px;
    color: var(--muted);
    font-style: normal;
    font-weight: 600;
}

.api-token-areas {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    list-style: none;
}

.api-token-area + .api-token-area {
    border-top: 1px solid var(--line);
}

.api-token-area fieldset {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 24px;
    align-items: center;
    margin: 0;
    padding: 16px 18px;
    border: 0;
}

.api-token-area legend {
    float: left;
    grid-column: 1;
    padding: 0;
    font-size: 15px;
    font-weight: 850;
}

.api-token-area-line {
    grid-column: 1;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.api-token-area-roles {
    color: var(--ink);
    font-weight: 700;
}

.api-token-area-ticks {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: 8px;
    justify-content: flex-end;
    max-width: 260px;
}

.api-token-tick {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-width: 108px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #aaa69b;
    cursor: pointer;
    background: white;
    font-size: 14px;
    font-weight: 800;
}

.api-token-tick input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--olive);
}

.api-token-tick:has(input:checked) {
    border-color: var(--olive);
    box-shadow: inset 0 0 0 1px var(--olive);
    background: #eef1e6;
}

.api-token-tick:has(input:focus-visible) {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.api-token-area-write {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    text-align: right;
}

.api-token-area--beyond {
    background: #fffaf0;
}

.api-token-area-note {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    padding: 8px 10px;
    border-left: 3px solid #a97831;
    color: #56380f;
    background: #fff4d8;
    font-size: 13px;
    line-height: 1.45;
}

.api-token-sensitive-warning {
    padding: 14px 16px;
    border: 1px solid #a97831;
    border-left-width: 5px;
    color: #56380f;
    background: #fff4d8;
}

.api-token-sensitive-warning p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}

.api-token-sensitive-scope {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.api-token-summary {
    margin: 0;
}

@media (max-width: 760px) {
    .api-token-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .api-token-area fieldset {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }

    .api-token-area-ticks {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
        max-width: none;
        margin-top: 6px;
    }

    .api-token-tick {
        flex: 1 1 0;
    }

    .api-token-area-write {
        text-align: left;
    }

    .api-token-table td.api-token-actions {
        display: flex;
        gap: 8px;
        white-space: normal;
    }

    .api-token-table .api-token-actions > .button,
    .api-token-table .api-token-actions form {
        flex: 1 1 0;
        margin: 0;
    }

    .api-token-table .api-token-actions form .button {
        width: 100%;
    }

    .api-token-beyond,
    .api-token-legacy {
        max-width: none;
    }
}

/* Emails sent to a player (spec 2026-10-16): the profile's Emails section, a
   stacked staff table whose rows that aren't "Sent" carry an amber edge
   (their status words carry the meaning); the email envelope (a definition
   list) and the preview drawn in a staff frame on the write and check steps
   and a message in full; and Settings › Staff emails to players. */

.player-sent-emails-note {
    margin: 0 0 12px;
}

.player-sent-emails-table td[data-label="Sent"] {
    white-space: nowrap;
}

.player-sent-emails-table td > a {
    font-weight: 700;
}

.player-sent-emails-none {
    color: var(--muted);
}

.player-sent-emails-table tr.is-attention td:first-child {
    box-shadow: inset 4px 0 0 #a97831;
}

.player-sent-emails-table .status-pill.status-confirmed {
    color: #3f4935;
    background: #e0e7d8;
}

.player-sent-emails .pagination {
    margin-top: 14px;
}

.player-email-envelope {
    display: grid;
    gap: 0;
    margin: 0 0 18px;
    border: 1px solid var(--line);
    background: white;
}

.player-email-envelope > div {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 4px 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}

.player-email-envelope > div:last-child {
    border-bottom: 0;
}

.player-email-envelope dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.player-email-envelope dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.player-email-envelope dd small {
    color: var(--muted);
}

.player-email-from,
.player-email-reply {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.player-email-from legend,
.player-email-reply legend {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.player-email-address {
    display: block;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.player-email-from-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.player-email-reply-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.player-email-check {
    max-width: 760px;
}

.player-email-preview {
    margin: 0 0 18px;
    border: 1px solid var(--line);
    background: #f3f1ea;
}

.player-email-preview-band {
    padding: 14px 22px;
    color: #f4f1e8;
    background: #24291f;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.player-email-preview-body {
    margin: 18px;
    padding: 22px;
    background: white;
}

.player-email-preview-body h2 {
    margin: 0 0 14px;
    font-size: 1.35rem;
}

.player-email-preview-body p {
    margin: 0 0 14px;
    line-height: 1.65;
}

.player-email-preview-foot {
    color: var(--muted);
    font-size: 13px;
}

.player-email-preview-legal {
    padding: 0 22px 16px;
    color: var(--muted);
    font-size: 12px;
}

.player-email-check-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.player-email-kept {
    margin: 0 0 14px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-left-width: 5px;
    background: white;
}

.player-email-kept p {
    margin: 0 0 14px;
    line-height: 1.65;
}

.player-email-kept p:last-child {
    margin-bottom: 0;
}

/* Sections 01 and 02 sit outside the settings form (forms can't nest), so
   they take the form's width to keep the page one column. */

.email-settings-page > .shell > .email-settings-section {
    max-width: 980px;
}

.email-sender-domain-note {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border-left: 4px solid #a97831;
    color: #56380f;
    background: #fff4d8;
    font-size: 13px;
}

.email-sender-add {
    margin-top: 14px;
}

.email-sender-add form {
    padding: 14px 16px 16px;
}

.email-sender-add .form-grid {
    margin-bottom: 14px;
}

.email-sender-caution {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}

.email-sender-domains {
    margin: 14px 0 10px;
}

.email-sender-list > li > .staff-email-actions {
    margin: 0;
}

@media (max-width: 760px) {
    .player-email-from-choices {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-email-envelope > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-email-check-actions .button {
        flex: 1 1 100%;
    }

    .player-email-preview-body {
        margin: 10px;
        padding: 16px;
    }

    .player-sent-emails-table td[data-label="Sent"] {
        white-space: normal;
    }

    .player-sent-emails-table tr.is-attention td:first-child {
        box-shadow: none;
    }

    .player-sent-emails-table tr.is-attention {
        box-shadow: inset 5px 0 0 #a97831;
    }
}

/* Operator-defined UKARA rules (core 0.23.0). Settings › UKARA: three equal
   cards a row for the renewal, unrecorded-number and display choices (one
   column at 760 pixels and below), the space between a group and the panel it
   opens, and the caution under "At any of our sites" in the reserved warning
   pair. */

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

.ukara-rule-choice + .staff-conditional-panel {
    margin-top: 14px;
}

.ukara-game-sites,
.ukara-unrecorded {
    margin-top: 26px;
}

.ukara-caution {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid #a97831;
    background: #fff4d8;
    color: #56380f;
    font-size: 13px;
    line-height: 1.5;
}

/* The review page: the lines above "Games with us", and the site a record is
   kept at. */

.ukara-attendance-facts .staff-section-intro {
    margin-bottom: 12px;
}

.ukara-attendance-facts .fieldset-note {
    margin-top: 12px;
}

.ukara-renewing-site {
    max-width: 28rem;
}

/* A number someone else holds (UR41): the holder's profile, under the error. */

.ukara-number-taken {
    margin: 12px 0 0;
}

@media (max-width: 760px) {
    .ukara-choice-three {
        grid-template-columns: 1fr;
    }
}

/* The UKARA staff area (core 0.24.0): a cancelled request's or an unknown
   expiry's grey pill, the lists' amber edge (a 4-pixel inset on the first
   cell, the whole card at 760 pixels and below), the profile's number card
   with its two-column facts, and the add and change form's duplicate notice
   in the error colours. Three "Who issued it" cards reuse .ukara-choice-three. */

.status-ukara-unknown {
    color: #4c4a44;
    background: #e7e5df;
}

.ukara-number {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.ukara-muted {
    color: var(--muted);
}

.ukara-list-search .staff-field-help {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.ukara-requests-table tr.is-attention td:first-child,
.ukara-numbers-table tr.is-attention td:first-child,
.player-ukara-requests-table tr.is-attention td:first-child {
    box-shadow: inset 4px 0 0 #a97831;
}

.ukara-requests-table td > a,
.ukara-numbers-table td > a,
.player-ukara-requests-table td > a,
.player-ukara-facts dd small a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.player-ukara-record {
    margin: 0 0 14px;
    padding: 18px 20px 6px;
    border: 1px solid var(--line);
    background: white;
}

.player-ukara-record.is-attention {
    box-shadow: inset 5px 0 0 #a97831;
}

.player-ukara-record-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.player-ukara-record-head > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
}

.player-ukara-record-head h3 {
    margin: 0;
    font-size: 26px;
    line-height: 1.1;
}

.player-ukara-change {
    min-height: 44px;
}

.player-ukara-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0 24px;
    margin: 0;
}

.player-ukara-facts > div {
    padding: 10px 0 12px;
    border-top: 1px solid var(--line);
}

.player-ukara-facts dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;

}

.player-ukara-facts dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.player-ukara-facts dd small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.player-ukara-facts .player-ukara-note {
    grid-column: 1 / -1;
}

.player-ukara-facts .player-ukara-note dd {
    font-weight: 400;
}

.player-ukara-merged {
    margin: 0 0 14px;
}

.player-ukara-requests {
    margin-top: 26px;
}

.player-ukara-requests h3 {
    margin: 0 0 10px;
}

.ukara-duplicate-notice {
    border-left-color: #9a3d31;
    background: #fbefec;
}

.ukara-number-locked {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
}

.player-ukara-remove {
    margin-top: 28px;
}

@media (max-width: 760px) {
    .ukara-requests-table tr.is-attention td:first-child,
    .ukara-numbers-table tr.is-attention td:first-child,
    .player-ukara-requests-table tr.is-attention td:first-child {
        box-shadow: none;
    }

    .ukara-requests-table tr.is-attention,
    .ukara-numbers-table tr.is-attention,
    .player-ukara-requests-table tr.is-attention {
        box-shadow: inset 5px 0 0 #a97831;
    }
}

.ukara-area-nav {
    margin-bottom: 22px;
}

.ukara-requests-table .table-action-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.player-ukara-more {
    margin: 12px 0 0;
}

.ukara-requests-player {
    margin-bottom: 14px;
}

.ukara-error-summary ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

/* Booking age checks on staff pages: the settings section, the warning with
   "Book them anyway" (AG19–AG23), the booking page's line (AG26) and the
   identity review's evidence (AG82). The amber pair is .ukara-caution's. */

.staff-settings-form .age-check-leeway {
    max-width: 18rem;
}

.staff-age-warning {
    padding: 14px 16px;
    border: 1px solid #a97831;
    border-left-width: 4px;
    color: #56380f;
    background: #fff4d8;
}

.staff-age-warning > strong {
    display: block;
    font-size: 15px;
}

.staff-age-warning > p {
    margin: 6px 0 10px;
    font-size: 14px;
    line-height: 1.5;
}

.staff-age-warning .terms-check {
    background: white;
}

.staff-age-override-line {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #a97831;
    border-left-width: 4px;
    color: #56380f;
    background: #fff4d8;
    font-size: 14px;
    line-height: 1.5;
}

.staff-evidence-review__guardian {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-left: 4px solid var(--olive);
    background: rgb(90 100 60 / 8%);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* The staff booking page's Add-ons panel and its history (core 0.32,
   shots 12 to 14), and an event's Add-on stock page (shots 15 and 16). */

.booking-add-ons-table small,
.booking-add-on-history-table small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.booking-add-ons .booking-refund-action {
    margin-top: 18px;
}

.booking-add-ons-feedback {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-left: 4px solid var(--olive);
    background: rgb(90 100 60 / 8%);
    font-size: 14px;
    line-height: 1.5;
}

.booking-add-ons-error {
    border-left-color: #a13a2b;
    color: #5f1d14;
    background: #fbeceb;
}

.booking-add-on-history {
    margin-top: 18px;
}

.booking-add-on-history summary {
    display: flex;
    gap: 6px;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    cursor: pointer;
}

.booking-add-on-history summary span {
    color: var(--muted);
    font-weight: 400;
}

.add-on-stock-check {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 4px solid var(--olive);
    background: white;
    font-size: 14px;
    line-height: 1.5;
}

.add-on-stock-mismatch {
    border-left-color: #a97831;
    color: #56380f;
    background: #fff4d8;
}

.add-on-stock-full td,
.add-on-stock-full th {
    background: #f6efe2;
}

.add-on-stock-over {
    color: #8c2d21;
    font-weight: 700;
}

/* Reports › Add-ons (core 0.34): a fourth report tab, two a row on a
   tablet and one on a phone; the CSV beside its table's heading. */

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

.add-on-report-heading .button {
    flex: 0 0 auto;
}

@media (max-width: 1080px) {
    .report-tabs--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .report-tabs--four {
        grid-template-columns: minmax(0, 1fr);
    }
}

@keyframes staff-menu-open {
    from {
        opacity: 0;
        transform: translateY(-8px);
        transform-origin: top;
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes passkey-first-waiting {
    50% {
        opacity: 0.25;
    }
}

@keyframes interface-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes staff-action-menu-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes theme-google-font-spin {
    to {
        transform: rotate(360deg);
    }
}