/* Core foundation.
   Loaded first on every page, public and staff alike. It holds the resets, the
   design tokens, and the handful of primitives neither surface may own: the
   accessibility idioms (.sr-only, .skip-link), the protective notices
   (.read-only-banner, .test-payment-warning), the staff return tab that renders
   inside a public document, and the reduced-motion and print rules that apply
   to the document itself.

   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. */

:root {
    --ink: #080b08;
    --ink-2: #11170f;
    --ink-3: #1c2519;
    --paper: #d8d1bf;
    --paper-2: #c8bea5;
    --paper-3: #a99f83;
    --muted: #5e6257;
    --olive: #364a32;
    --olive-light: #82906a;
    --signal: #aa9a6b;
    --signal-dark: #7f724e;
    --tan: #b29e72;
    --line: rgb(8 11 8 / 20%);
    --shell: min(1240px, calc(100vw - 48px));
    --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
    --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

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

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    padding: 10px 16px;
    color: white;
    background: var(--signal);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: none;
}

.read-only-banner {
    position: relative;
    z-index: 46;
    padding: 12px 0;
    color: #fff4d1;
    background: #6b3d16;
}

.span-full {
    grid-column: 1 / -1;
}

.staff-return-tab {
    position: fixed;
    z-index: 55;
    top: 50%;
    left: 0;
    display: inline-flex;
    width: 46px;
    min-height: 156px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 12px 8px;
    color: white;
    border: 1px solid rgb(255 255 255 / 18%);
    border-left: 0;
    background: var(--ink);
    box-shadow: 0 14px 30px rgb(8 11 8 / 28%);
    transform: translateY(-50%);
    transition: width 160ms ease, background-color 160ms ease;
}

.staff-return-tab:hover,
.staff-return-tab:focus-visible {
    width: 50px;
    background: var(--olive);
}

.staff-return-tab-icon {
    color: var(--signal);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.staff-return-tab-label {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

@media (max-width: 620px) {
    .staff-return-tab {
        width: 38px;
        min-height: 118px;
        gap: 7px;
        padding: 10px 6px;
    }

    .staff-return-tab:hover,
    .staff-return-tab:focus-visible {
        width: 42px;
    }

    .staff-return-tab-label {
        font-size: 9px;
    }
}

[data-condition-target] {
    transition: opacity 160ms ease;
}

@media (max-width: 820px) {
    :root {
        --shell: min(100% - 32px, 680px);
    }
}

/* "This payment is not real" is a safety notice, and every element that carries
   it also carries .form-errors — see views/booking-payment.php and eight others.
   The two rules set the same background and colour, so while both lived in one
   file the later one won and the notice was red. This rule belongs to the
   foundation so that no theme can suppress it, and the foundation loads first,
   which would hand the tie to .form-errors and render the warning as an ordinary
   form error. The class is repeated to raise this rule to (0,2,0): it then wins
   against any single-class rule whichever sheet that rule arrives in, including
   a theme's own .form-errors. Not !important, which would also outrank rules
   that legitimately need to win later, such as the print sheet. */

.test-payment-warning.test-payment-warning {
    border-color: #9a3d31;
    background: #fff0ed;
    color: #601e17;
}

/* Three kinds of error (core 0.8.2, docs/design-language.md "Error notice").
   Foundation, so it renders the same on the public site under any theme and on
   the staff application: every installation means the same thing by red,
   orange and purple. The kind's colours are custom properties set at (0,2,0)
   on the notice itself, never on :root, so neither a theme's sheet nor an
   installation's appearance colours can reach them. Every text the notice
   owns sits on a surface it also owns (white or the kind's tint), so contrast
   never depends on the theme: kind colour on white 6.3-8.3:1, white on kind
   colour the same, text on tint 14.5:1 or more. The heading and message on
   the full page inherit the theme's status card, as they always have. */

.error-notice--server.error-notice--server,
.error-status-card--server.error-status-card--server {
    --error-kind: #a3221b;
    --error-tint: #fbeceb;
}

.error-notice--operator.error-notice--operator,
.error-status-card--operator.error-status-card--operator {
    --error-kind: #9a4a00;
    --error-tint: #fdf0e1;
}

.error-notice--player.error-notice--player,
.error-status-card--player.error-status-card--player {
    --error-kind: #5b3a9e;
    --error-tint: #f1ecfa;
}

.error-notice {
    display: grid;
    gap: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.error-status-card.error-status-card {
    border-left: 8px solid var(--error-kind);
}

.error-notice-tag {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    max-width: 100%;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    color: #fff;
    background: var(--error-kind);
    font-family: var(--body);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: none;
}

.error-notice-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--error-kind);
    background: #fff;
}

.error-notice-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.error-notice .error-notice-heading {
    margin: 0;
}

.error-notice .error-notice-message {
    margin: 0;
}

/* On the error page the message is read at arm's length on a phone: the
   theme's ink, not its muted supporting colour (3.4:1 on core's card). */

.error-notice--page .error-notice-message {
    color: var(--ink);
}

.error-notice .error-notice-hint {
    max-width: 680px;
    margin: 0;
    padding: 12px 14px;
    border-left: 4px solid var(--error-kind);
    color: #1f1d1a;
    background: var(--error-tint);
    font-size: 16px;
    line-height: 1.5;
}

.error-notice-reference {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 6px 10px;
    justify-self: start;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid rgb(31 29 26 / 22%);
    color: #1f1d1a;
    background: #fff;
}

.error-notice-reference-label {
    grid-column: 1 / -1;
    font-family: var(--body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4a4744;
}

.error-notice-reference-code {
    display: inline-block;
    padding: 4px 10px;
    border: 2px dashed var(--error-kind);
    color: #1f1d1a;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 20px;
    font-variant-numeric: slashed-zero tabular-nums;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    white-space: nowrap;
    user-select: all;
}

/* The two groups are spaced by a margin, not a character, so the reference is
   read aloud in fours and still selects and copies as one word. */

.error-notice-reference-code > span + span {
    margin-left: 0.55em;
}

.error-notice-copy {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 16px;
    border: 2px solid var(--error-kind);
    border-radius: 0;
    color: var(--error-kind);
    background: #fff;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.has-js .error-notice-copy {
    display: inline-flex;
}

.error-notice-copy:hover {
    color: #fff;
    background: var(--error-kind);
}

/* (0,4,0): above every surface's own ring, such as the desk's olive
   `.game-day-shell button:focus-visible` (0,2,1). */

.error-notice .error-notice-copy.error-notice-copy:focus-visible {
    outline: 3px solid var(--error-kind);
    outline-offset: 3px;
}

/* Dismiss (user ruling, 2026-10-12): a staff action's notice carries it, and
   only the desk's message region shows it, with JavaScript (admin rules). */

.error-notice-dismiss {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid #4a4744;
    border-radius: 0;
    color: #1f1d1a;
    background: #fff;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.error-notice-dismiss-icon {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
}

.error-notice-dismiss:hover {
    color: #fff;
    background: #4a4744;
}

.error-notice .error-notice-dismiss.error-notice-dismiss:focus-visible {
    outline: 3px solid var(--error-kind);
    outline-offset: 3px;
}

.error-notice-reference-caption {
    grid-column: 1 / -1;
    color: #4a4744;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 600;
}

/* Inside a form, a page's content, a staff action's answer or the staff flash
   bar: the notice is its own panel, the kind's stripe and tint, with fixed
   text colours and a plain heading, whatever the surrounding surface. */

.error-notice.error-notice--inline,
.error-notice.error-notice--fragment,
.error-notice.error-notice--flash {
    gap: 10px;
    margin: 0 0 20px;
    padding: 16px 18px;
    border-left: 8px solid var(--error-kind);
    color: #1f1d1a;
    background: var(--error-tint);
    text-align: left;
}

.error-notice--inline .error-notice-heading,
.error-notice--fragment .error-notice-heading,
.error-notice--flash .error-notice-heading {
    color: #1f1d1a;
    font-family: var(--body);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.error-notice--inline .error-notice-message,
.error-notice--fragment .error-notice-message,
.error-notice--flash .error-notice-message {
    color: #1f1d1a;
    font-size: 16px;
    font-weight: 400;
}

.error-notice--inline .error-notice-hint,
.error-notice--fragment .error-notice-hint,
.error-notice--flash .error-notice-hint {
    background: #fff;
}

/* The staff flash bar is the alert; the notice inside it keeps its own look. */

.flash-error-notice.flash-error-notice {
    padding: 14px 0;
    color: #1f1d1a;
    background: transparent;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}

.flash-error-notice .error-notice {
    margin: 0;
}

@media (max-width: 620px) {
    .error-notice.error-notice--inline,
    .error-notice.error-notice--fragment,
    .error-notice.error-notice--flash {
        padding: 14px 14px 14px 12px;
        border-left-width: 6px;
    }

    .error-notice-reference-code {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body {
        background: white;
    }
}