/*
|--------------------------------------------------------------------------
| P-EMTS Phase 1R.5.3.2 — Clean Institutional Theme
|--------------------------------------------------------------------------
| Direction:
|   Clean White + Institutional Red + Controlled Gold
|
| This replaces the "muted burgundy everywhere" treatment that made several
| screens feel cloudy/hazy. Large surfaces are now white/near-white. Red is
| concentrated in navigation, page banners, table headers and actions. Gold is
| a small accent only.
|--------------------------------------------------------------------------
*/

:root {
    --pems-clean-red-deep: #641515;
    --pems-clean-red: #741818;
    --pems-clean-red-action: #7a1717;
    --pems-clean-red-hover: #681313;
    --pems-clean-red-soft: #f9eeee;

    --pems-clean-gold: #d2ae3d;
    --pems-clean-gold-deep: #bd982e;
    --pems-clean-gold-soft: #fbf6e5;

    --pems-clean-bg: #fafafa;
    --pems-clean-surface: #ffffff;
    --pems-clean-surface-soft: #f8fafc;
    --pems-clean-border: #e5e7eb;

    --pems-clean-text: #1f2937;
    --pems-clean-muted: #64748b;
}

/* =====================================================================
   GLOBAL SURFACES — remove the cloudy warm-gray cast
   ===================================================================== */
html,
body.pems-public-body,
body.pems-soft-authenticated,
.pems-soft-authenticated {
    background: var(--pems-clean-bg) !important;
    color: var(--pems-clean-text);
}

.pems-panel,
.pems-stat,
.pems-public-card,
.pems-table-gradient-shell,
.pems-card {
    background: var(--pems-clean-surface) !important;
    border-color: var(--pems-clean-border) !important;
    box-shadow: 0 10px 26px -24px rgba(31, 41, 55, .35) !important;
}

/* Neutral secondary surfaces stay visibly separate without becoming beige. */
.pems-public-body [class*="bg-[#f6f3f0]"],
.pems-public-body [class*="bg-[#f2eeeb]"],
.pems-public-body [class*="bg-[#f8f6f4]"],
.pems-soft-authenticated [class*="bg-[#f5f2ef]"],
.pems-soft-authenticated [class*="bg-[#f8f6f4]"],
.pems-soft-authenticated [class*="bg-[#f3efec]"] {
    background-color: var(--pems-clean-bg) !important;
}

/* =====================================================================
   AUTHENTICATED P-EMTS
   ===================================================================== */

/* Sidebar: deliberately solid. No cloudy ramp. */
.pems-soft-sidebar {
    background: var(--pems-clean-red-deep) !important;
    border-right-color: rgba(65, 18, 18, .24) !important;
    box-shadow: 10px 0 28px -26px rgba(30, 10, 10, .55) !important;
}

.pems-soft-sidebar [class*="bg-white/["] {
    background: rgba(255, 255, 255, .045) !important;
    border-color: rgba(255, 255, 255, .085) !important;
}

.pems-soft-sidebar .pems-nav-link {
    transition:
        background-color 160ms ease,
        transform 160ms ease,
        color 160ms ease !important;
}

.pems-soft-sidebar .pems-nav-link:hover:not(:disabled) {
    background: rgba(255, 255, 255, .065) !important;
}

.pems-soft-sidebar .pems-nav-link-active {
    background: rgba(255, 255, 255, .085) !important;
    box-shadow: inset 3px 0 0 var(--pems-clean-gold) !important;
}

.pems-soft-sidebar .pems-nav-icon {
    background: rgba(255, 255, 255, .06) !important;
    color: #f0d979 !important;
}

/* Authenticated top bar remains white and crisp. */
.pems-soft-authenticated header,
.pems-shell-header {
    background: #ffffff !important;
}

/* Thin brand rule only. */
.pems-shell-header-accent {
    background:
        linear-gradient(90deg,
            var(--pems-clean-red-deep) 0%,
            var(--pems-clean-red-action) 78%,
            var(--pems-clean-gold) 100%) !important;
}

/* Page banners: only place where a very subtle two-tone red gradient remains. */
.pems-soft-authenticated .pems-page-banner,
.pems-page-banner {
    background:
        linear-gradient(120deg, #681515 0%, #761919 100%) !important;
    border-color: var(--pems-clean-gold) !important;
    box-shadow: 0 12px 24px -22px rgba(70, 18, 18, .42) !important;
}

.pems-soft-authenticated .pems-page-banner::after,
.pems-page-banner::after {
    height: 3px !important;
    background: var(--pems-clean-gold) !important;
}

.pems-soft-authenticated .pems-page-banner-geo,
.pems-page-banner-geo,
.pems-soft-authenticated .pems-geo-pattern {
    opacity: .10 !important;
}

/* Tables: SOLID institutional red. No gradient. */
.pems-soft-authenticated .pems-table thead,
.pems-soft-authenticated .pems-table thead tr,
.pems-soft-authenticated .pems-table-gradient thead,
.pems-soft-authenticated .pems-table-gradient thead tr {
    background: var(--pems-clean-red) !important;
}

.pems-soft-authenticated .pems-table thead th,
.pems-soft-authenticated .pems-table-gradient thead th {
    background: transparent !important;
    color: #ffffff !important;
}

/* Stat cards: white body, simple red accent. */
.pems-soft-authenticated .pems-stat-accent {
    background:
        linear-gradient(180deg,
            var(--pems-clean-red-action) 0%,
            var(--pems-clean-red-action) 78%,
            var(--pems-clean-gold) 78%,
            var(--pems-clean-gold) 100%) !important;
}

.pems-soft-authenticated .pems-stat-value,
.pems-soft-authenticated .pems-panel-title {
    color: var(--pems-clean-red-deep) !important;
}

/* Text overrides for legacy hard-coded reds. */
.pems-soft-authenticated [class*="text-[#5c0000]"],
.pems-soft-authenticated [class*="text-[#650000]"],
.pems-soft-authenticated [class*="text-[#660000]"],
.pems-soft-authenticated [class*="text-[#690000]"],
.pems-soft-authenticated [class*="text-[#6b0000]"],
.pems-soft-authenticated [class*="text-[#760000]"],
.pems-soft-authenticated [class*="text-[#860000]"] {
    color: var(--pems-clean-red-deep) !important;
}

/* Legacy red blocks are normalized to one clean institutional red. */
.pems-soft-authenticated [class*="bg-[#690000]"],
.pems-soft-authenticated [class*="bg-[#6e0000]"],
.pems-soft-authenticated [class*="bg-[#760000]"],
.pems-soft-authenticated [class*="bg-[#7b0000]"],
.pems-soft-authenticated [class*="bg-[#860000]"],
.pems-soft-authenticated [class*="bg-[#8c0404]"],
.pems-soft-authenticated [class*="bg-[#920000]"],
.pems-soft-authenticated [class*="bg-[#a40b0b]"] {
    background: var(--pems-clean-red) !important;
}

/* Legacy arbitrary red gradients are flattened. */
.pems-soft-authenticated [class*="bg-[linear-gradient"][class*="#4c0000"],
.pems-soft-authenticated [class*="bg-[linear-gradient"][class*="#5c0000"],
.pems-soft-authenticated [class*="bg-[linear-gradient"][class*="#760000"],
.pems-soft-authenticated [class*="bg-[linear-gradient"][class*="#8d1414"],
.pems-soft-authenticated [class*="bg-[linear-gradient"][class*="#a20808"] {
    background: var(--pems-clean-red) !important;
}

/* Primary actions: solid red. */
.pems-button-primary,
.pems-soft-authenticated .pems-button-primary {
    background: var(--pems-clean-red-action) !important;
    border-color: var(--pems-clean-red-action) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.pems-button-primary:hover,
.pems-soft-authenticated .pems-button-primary:hover {
    background: var(--pems-clean-red-hover) !important;
    border-color: var(--pems-clean-red-hover) !important;
}

/* Gold is an accent/action, not a background theme. */
.pems-button-gold,
.pems-soft-authenticated .pems-button-gold {
    background: var(--pems-clean-gold) !important;
    border-color: var(--pems-clean-gold-deep) !important;
    color: #3f1717 !important;
    box-shadow: none !important;
}

/* Inputs/selects: brighter and sharper. */
.pems-field,
.pems-select,
.pems-soft-authenticated input,
.pems-soft-authenticated select,
.pems-soft-authenticated textarea {
    background-color: #ffffff;
    border-color: #d7dce2;
}

.pems-field:focus,
.pems-select:focus,
.pems-soft-authenticated input:focus,
.pems-soft-authenticated select:focus,
.pems-soft-authenticated textarea:focus {
    border-color: #b98f2e !important;
    box-shadow: 0 0 0 3px rgba(210, 174, 61, .10) !important;
}

/* Modal header: clean red, no glossy gradient. */
.pems-soft-authenticated .pems-modal-panel > div:first-child {
    background: var(--pems-clean-red) !important;
}

/* Scrollbar stays subtle. */
#pems-sidebar-nav,
#pems-workspace {
    scrollbar-color: #b89532 rgba(100, 21, 21, .10) !important;
}

#pems-sidebar-nav::-webkit-scrollbar-thumb,
#pems-workspace::-webkit-scrollbar-thumb {
    background: #b89532 !important;
    background-clip: padding-box !important;
}

/* =====================================================================
   PUBLIC PORTAL
   ===================================================================== */

/* Header: solid deep institutional red. */
.pems-public-header {
    background: var(--pems-clean-red-deep) !important;
    border-bottom-color: var(--pems-clean-gold) !important;
    box-shadow: 0 7px 18px -17px rgba(40, 10, 10, .50) !important;
}

.pems-public-header .pems-public-nav-link.is-active {
    background: rgba(255, 255, 255, .07) !important;
}

.pems-public-header .pems-public-nav-link:hover {
    background: rgba(255, 255, 255, .055) !important;
}

/* Every public hero gets the same restrained two-tone treatment. */
.pems-public-hero,
.pems-public-body .pems-public-main > div > section:first-child,
.pems-public-body .pems-public-page > section:first-child {
    background:
        linear-gradient(120deg, #681515 0%, #761919 100%) !important;
    border-bottom-color: var(--pems-clean-gold) !important;
    box-shadow: none !important;
}

/* Decorative polygons/patterns become almost invisible. */
.pems-public-hero > .absolute.inset-0,
.pems-public-body .pems-public-page > section:first-child > .pems-geo-pattern,
.pems-public-body .pems-public-main > div > section:first-child > .pems-geo-pattern,
.pems-public-body .pems-public-main > div > section:first-child > .absolute.inset-0 {
    opacity: .025 !important;
}

/* Hero summary tiles use transparent white—not more red. */
.pems-public-body .pems-public-page > section:first-child [class*="bg-white/["],
.pems-public-body .pems-public-main > div > section:first-child [class*="bg-white/["] {
    background-color: rgba(255, 255, 255, .075) !important;
    border-color: rgba(255, 255, 255, .13) !important;
}

/* Public large neutral sections should be white/clean gray. */
.pems-public-body section:not(:first-child)[class*="bg-[#f2eeeb]"],
.pems-public-body section:not(:first-child)[class*="bg-[#f6f3f0]"] {
    background: var(--pems-clean-bg) !important;
}

/* Selected/active public cards use a solid red—not a saturated gradient. */
.pems-public-body .pems-public-hover-card[class*="bg-[#760000]"],
.pems-public-body [class*="bg-[#760000]"][class*="text-white"],
.pems-public-body [class*="bg-[#690000]"],
.pems-public-body [class*="bg-[#6b0000]"],
.pems-public-body [class*="bg-[#700000]"],
.pems-public-body [class*="bg-[#7a0000]"],
.pems-public-body [class*="bg-[#860000]"],
.pems-public-body [class*="bg-[#8d1414]"],
.pems-public-body [class*="bg-[#920000]"] {
    background: var(--pems-clean-red) !important;
}

/* Flatten old arbitrary hero gradients everywhere. */
.pems-public-body [class*="bg-[linear-gradient"][class*="#5c0000"],
.pems-public-body [class*="bg-[linear-gradient"][class*="#760000"],
.pems-public-body [class*="bg-[linear-gradient"][class*="#8d1414"] {
    background:
        linear-gradient(120deg, #681515 0%, #761919 100%) !important;
}

/* Public tables: solid red header. */
.pems-public-body table thead,
.pems-public-body table thead tr,
.pems-public-ranking-head {
    background: var(--pems-clean-red) !important;
}

.pems-public-body table thead th {
    background: transparent !important;
}

/* Public cards are clean white. */
.pems-public-hover-card,
.pems-public-card {
    background: #ffffff !important;
    border-color: var(--pems-clean-border) !important;
}

/* Hover stays animated, but sharper/lighter. */
@media (hover: hover) and (pointer: fine) {
    .pems-public-hover-card:hover {
        border-color: rgba(210, 174, 61, .72) !important;
        box-shadow:
            0 18px 28px -24px rgba(31, 41, 55, .34),
            0 0 0 1px rgba(210, 174, 61, .10) !important;
    }

    .pems-public-hover-row:hover {
        background: #fffdf7 !important;
        box-shadow: 0 10px 18px -20px rgba(31, 41, 55, .36) !important;
    }
}

.pems-public-body [class*="text-[#5c0000]"],
.pems-public-body [class*="text-[#690000]"],
.pems-public-body [class*="text-[#760000]"] {
    color: var(--pems-clean-red-deep) !important;
}

.pems-public-select {
    background: #ffffff !important;
    border-color: #d7dce2 !important;
    box-shadow: none !important;
}

.pems-public-button--gold,
.pems-public-body .pems-button-gold {
    background: var(--pems-clean-gold) !important;
    border-color: var(--pems-clean-gold-deep) !important;
    color: #3f1717 !important;
    box-shadow: none !important;
}

.pems-public-button--gold:hover {
    background: #c9a437 !important;
}

/* Auth/login brand area follows same crisp hierarchy. */
.pems-auth-brand-panel {
    background:
        linear-gradient(120deg, #641515 0%, #721818 100%) !important;
}

.pems-login-accent,
.pems-navigation-progress {
    background:
        linear-gradient(90deg,
            var(--pems-clean-red-deep) 0%,
            var(--pems-clean-red-action) 80%,
            var(--pems-clean-gold) 100%) !important;
}

/* =====================================================================
   LANDING ENTRANCE MOTION — retained, but remove blur to keep it crisp
   ===================================================================== */
@keyframes pems-home-clean-enter {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.pems-home-enter .pems-home-animate {
    opacity: 0;
    animation: pems-home-clean-enter 520ms cubic-bezier(.2,.72,.22,1) forwards;
    will-change: opacity, transform;
}

.pems-home-enter .pems-home-animate-1 { animation-delay: 20ms; }
.pems-home-enter .pems-home-animate-2 { animation-delay: 85ms; }
.pems-home-enter .pems-home-animate-3 { animation-delay: 150ms; }
.pems-home-enter .pems-home-animate-4 { animation-delay: 215ms; }
.pems-home-enter .pems-home-animate-5 { animation-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
    .pems-home-enter .pems-home-animate {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/*
|--------------------------------------------------------------------------
| Phase 1R.5.3.3 — UI Standardization
|--------------------------------------------------------------------------
| Covers the Login page, standardizes module title sizing, introduces proper
| sidebar SVG treatment, reduces button thickness, and adds semantic action
| colors for destructive / warning / success / locking actions.
|--------------------------------------------------------------------------
*/

/* LOGIN / GUEST — same clean institutional language as the app */
.pems-auth-body {
    background: #fafafa !important;
}

.pems-auth-brand-panel {
    background:
        linear-gradient(120deg, #641515 0%, #721818 100%) !important;
}

.pems-auth-brand-pattern {
    opacity: .035 !important;
}

.pems-auth-brand-glow {
    opacity: .08 !important;
}

.pems-auth-form-panel {
    background: #fafafa !important;
}

.pems-login-card {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 22px 48px -38px rgba(31, 41, 55, .40) !important;
}

.pems-login-accent {
    background:
        linear-gradient(90deg, #641515 0%, #7a1717 82%, #d2ae3d 100%) !important;
}

.pems-login-title {
    color: #641515 !important;
}

.pems-login-kicker {
    color: #a2781b !important;
}

.pems-login-copy,
.pems-auth-hero-copy {
    color: #64748b !important;
}

.pems-auth-brand-panel .pems-auth-hero-copy,
.pems-auth-brand-panel .pems-auth-brand-footer {
    color: rgba(255,255,255,.76) !important;
}

/* STANDARD MODULE TITLE SIZE
   Only H1 display titles inside page banners are affected. Metric counters that
   also use font-pems-display keep their own sizing. */
.pems-soft-authenticated .pems-page-banner h1.font-pems-display {
    font-size: clamp(1.85rem, 2.5vw, 2.25rem) !important;
    line-height: 1.02 !important;
    letter-spacing: .04em !important;
}

@media (max-width: 640px) {
    .pems-soft-authenticated .pems-page-banner h1.font-pems-display {
        font-size: 1.75rem !important;
    }
}

/* SIDEBAR SVG ICON SYSTEM */
.pems-nav-icon {
    display: inline-flex !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    flex: 0 0 1.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: .55rem !important;
}

.pems-nav-icon svg {
    width: 1rem !important;
    height: 1rem !important;
    stroke-width: 1.8 !important;
    vector-effect: non-scaling-stroke;
}

.pems-nav-link-active .pems-nav-icon svg {
    stroke-width: 2 !important;
}

/* COMPACT GLOBAL BUTTON SYSTEM */
.pems-button-primary,
.pems-button-secondary,
.pems-button-gold,
.pems-button-danger,
.pems-button-warning,
.pems-button-success,
.pems-button-lock,
.pems-public-button {
    min-height: 2.125rem !important;
    padding: .42rem .78rem !important;
    border-radius: .65rem !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    box-shadow: none !important;
}

.pems-button-secondary {
    background: #ffffff !important;
    border-color: #d9dee5 !important;
    color: #4b5563 !important;
}

.pems-button-secondary:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1f2937 !important;
}

/* Explicit semantic classes for new screens/actions. */
.pems-button-danger {
    background: #b42318 !important;
    border: 1px solid #a61b12 !important;
    color: #ffffff !important;
}

.pems-button-danger:hover {
    background: #981b13 !important;
}

.pems-button-warning {
    background: #fff7e6 !important;
    border: 1px solid #e1b953 !important;
    color: #8a5a08 !important;
}

.pems-button-warning:hover {
    background: #fdefc9 !important;
}

.pems-button-success {
    background: #18794e !important;
    border: 1px solid #146c45 !important;
    color: #ffffff !important;
}

.pems-button-success:hover {
    background: #12613d !important;
}

.pems-button-lock {
    background: #334155 !important;
    border: 1px solid #293647 !important;
    color: #ffffff !important;
}

.pems-button-lock:hover {
    background: #243244 !important;
}

/*
| Semantic compatibility for existing actions.
| This makes legacy buttons communicate intent without requiring every older
| Blade file to be rewritten immediately.
*/
button[class*="pems-button"][wire\:click*="deactivate" i],
button[class*="pems-button"][wire\:click*="delete" i],
button[class*="pems-button"][wire\:click*="remove" i],
button[class*="pems-button"][wire\:click*="reject" i],
button[class*="pems-button"][wire\:click*="disable" i] {
    background: #b42318 !important;
    border-color: #a61b12 !important;
    color: #ffffff !important;
}

button[class*="pems-button"][wire\:click*="activate" i],
button[class*="pems-button"][wire\:click*="restore" i],
button[class*="pems-button"][wire\:click*="approve" i],
button[class*="pems-button"][wire\:click*="verify" i],
button[class*="pems-button"][wire\:click*="publish" i] {
    background: #18794e !important;
    border-color: #146c45 !important;
    color: #ffffff !important;
}

button[class*="pems-button"][wire\:click*="return" i],
button[class*="pems-button"][wire\:click*="reopen" i] {
    background: #fff7e6 !important;
    border-color: #e1b953 !important;
    color: #8a5a08 !important;
}

button[class*="pems-button"][wire\:click*="lock" i] {
    background: #334155 !important;
    border-color: #293647 !important;
    color: #ffffff !important;
}

/* Compact controls in filter/tool bars, without shrinking form text fields. */
.pems-filter-panel .pems-button-primary,
.pems-filter-panel .pems-button-secondary,
.pems-filter-panel .pems-button-gold {
    min-height: 2.05rem !important;
}

/* Reports uses the standard banner now, but keep a direct safety override for
   any stale cached/legacy report hero. */
.pems-soft-authenticated [class*="bg-[linear-gradient"][class*="#690000"][class*="#a41414"] {
    background:
        linear-gradient(120deg, #681515 0%, #761919 100%) !important;
}



/*
|--------------------------------------------------------------------------
| Phase 1R.5.3.4 — Theme completion / button semantics / table alignment
|--------------------------------------------------------------------------
*/

/* Remaining legacy Event Workspace hero. */
.pems-event-result-hero {
    background:
        linear-gradient(120deg, #681515 0%, #761919 100%) !important;
    border-color: rgba(100,21,21,.16) !important;
    box-shadow: 0 12px 26px -24px rgba(70,18,18,.42) !important;
}

.pems-event-result-hero .pems-geo-pattern {
    opacity: .035 !important;
}

/* Constructive actions should read as constructive. */
.pems-button-create {
    background: #18794e !important;
    border: 1px solid #146c45 !important;
    color: #ffffff !important;
}

.pems-button-create:hover {
    background: #12613d !important;
}

/* IMPORTANT: danger comes AFTER success compatibility because "deactivate"
   contains the substring "activate". This prevents Deactivate from turning green. */
button[class*="pems-button"][wire\:click*="deactivate" i],
button[class*="pems-button"][wire\:click*="delete" i],
button[class*="pems-button"][wire\:click*="remove" i],
button[class*="pems-button"][wire\:click*="reject" i],
button[class*="pems-button"][wire\:click*="disable" i] {
    background: #b42318 !important;
    border-color: #a61b12 !important;
    color: #ffffff !important;
}

/* Add/Create/open-create actions are constructive. */
button[class*="pems-button"][wire\:click*="create" i],
button[class*="pems-button"][wire\:click*="add" i],
button[class*="pems-button"][wire\:click*="bulkAdd" i] {
    background: #18794e !important;
    border-color: #146c45 !important;
    color: #ffffff !important;
}

/* History table: keep THEAD/TBODY under the same table layout algorithm.
   This overrides the older width:100% row-group rule that could offset headers. */
.pems-history-standings-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

.pems-history-standings-table thead {
    display: table-header-group !important;
    width: auto !important;
    background: #741818 !important;
}

.pems-history-standings-table thead tr {
    display: table-row !important;
    width: auto !important;
    background: #741818 !important;
}

.pems-history-standings-table tbody {
    display: table-row-group !important;
}

.pems-history-standings-table th,
.pems-history-standings-table td {
    vertical-align: middle !important;
}

.pems-history-standings-table thead th {
    background: #741818 !important;
    color: #ffffff !important;
}

.pems-history-standings-table th:first-child,
.pems-history-standings-table td:first-child {
    width: 7.5rem;
}

.pems-history-standings-table th:nth-child(2),
.pems-history-standings-table td:nth-child(2) {
    width: 30%;
}

.pems-history-standings-table th:last-child,
.pems-history-standings-table td:last-child {
    width: 7rem;
}

/* Public Event Directory standard width. */
.pems-public-events-container {
    width: min(100%, 1240px) !important;
    margin-inline: auto !important;
}

/* Public release-control status pill. */
.pems-public-release-status {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    border-radius: .65rem;
    padding: .38rem .7rem;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pems-public-release-status.is-live {
    background: #eaf7ef;
    color: #146c45;
}

.pems-public-release-status.is-hidden {
    background: #f8fafc;
    color: #64748b;
}

/* Remaining public legacy red panels are deliberately flattened. */
.pems-public-body [class*="bg-[linear-gradient"][class*="#5a0000"],
.pems-public-body [class*="bg-[linear-gradient"][class*="#850000"],
.pems-public-body [class*="bg-[linear-gradient"][class*="#ae0808"],
.pems-soft-authenticated [class*="bg-[linear-gradient"][class*="#5a0000"],
.pems-soft-authenticated [class*="bg-[linear-gradient"][class*="#850000"],
.pems-soft-authenticated [class*="bg-[linear-gradient"][class*="#ae0808"] {
    background:
        linear-gradient(120deg, #681515 0%, #761919 100%) !important;
}


/*
|--------------------------------------------------------------------------
| Phase 1R.5.3.5 — Table, Banner Button & Accent Polish
|--------------------------------------------------------------------------
*/

/* Compact create buttons must inherit the same geometry as all other buttons. */
.pems-button-create {
    min-height: 2.125rem !important;
    padding: .42rem .78rem !important;
    border-radius: .65rem !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .35rem !important;
    white-space: nowrap !important;
}

/* Page-banner actions use ONLY the red-banner-compatible gold/white family.
   Semantic green/red/amber remains available outside the banner. */
.pems-page-banner .pems-button-primary,
.pems-page-banner .pems-button-success,
.pems-page-banner .pems-button-warning,
.pems-page-banner .pems-button-danger,
.pems-page-banner .pems-button-lock,
.pems-page-banner .pems-button-create {
    background: #d2ae3d !important;
    border: 1px solid #c09b31 !important;
    color: #3f1717 !important;
    box-shadow: none !important;
}

.pems-page-banner .pems-button-primary:hover,
.pems-page-banner .pems-button-success:hover,
.pems-page-banner .pems-button-warning:hover,
.pems-page-banner .pems-button-danger:hover,
.pems-page-banner .pems-button-lock:hover,
.pems-page-banner .pems-button-create:hover {
    background: #c6a133 !important;
    border-color: #b69029 !important;
}

.pems-page-banner .pems-button-secondary {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color: #ffffff !important;
}

.pems-page-banner .pems-button-secondary:hover {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.40) !important;
}

/* Release status inside a red page banner also stays in the gold/white family. */
.pems-page-banner .pems-public-release-status {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    color: #ffffff !important;
}

.pems-page-banner .pems-public-release-status.is-live {
    border-color: rgba(210,174,61,.88) !important;
    color: #f3d978 !important;
}

/* Stat/card side accent should be a true smooth gradient, not stacked red/gold. */
.pems-soft-authenticated .pems-stat-accent,
.pems-stat-accent {
    background:
        linear-gradient(
            180deg,
            #7a1717 0%,
            #8c2b1d 34%,
            #a94d21 64%,
            #c5842c 82%,
            #d2ae3d 100%
        ) !important;
}

/* Report preview readability. */
.pems-report-preview-table {
    font-size: .79rem !important;
}

.pems-report-preview-table thead th {
    font-size: .69rem !important;
    font-weight: 900 !important;
    letter-spacing: .025em !important;
}

.pems-report-preview-table tbody td {
    font-weight: 650 !important;
    color: #334155 !important;
}

.pems-report-preview-table tbody td:first-child {
    font-weight: 900 !important;
    color: #641515 !important;
}

.pems-report-division {
    display: flex;
    min-width: 220px;
    align-items: center;
    gap: .65rem;
}

.pems-report-division-logo {
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    background: #ffffff;
    object-fit: contain;
    padding: .22rem;
}

.pems-report-division-name {
    font-size: .78rem;
    font-weight: 900;
    line-height: 1.15;
    color: #1f2937;
}

.pems-report-division-meta {
    margin-top: .16rem;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* History desktop standings is rendered as one shared CSS grid now.
   Header and rows cannot drift into different column geometries. */
.pems-history-standings-grid {
    min-width: 900px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #ffffff;
}

.pems-history-standings-grid-row {
    display: grid;
    grid-template-columns:
        90px
        minmax(260px, 2.15fr)
        repeat(var(--history-category-count), minmax(105px, 1fr))
        110px;
    align-items: stretch;
}

.pems-history-standings-grid-head {
    background: #741818;
    color: #ffffff;
}

.pems-history-standings-grid-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: .78rem 1rem;
}

.pems-history-standings-grid-head .pems-history-standings-grid-cell {
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.pems-history-standings-grid-body .pems-history-standings-grid-row {
    border-bottom: 1px solid #eee7e2;
}

.pems-history-standings-grid-body .pems-history-standings-grid-row:last-child {
    border-bottom: 0;
}

.pems-history-standings-grid-cell.is-numeric {
    justify-content: flex-end;
    text-align: right;
}

.pems-history-standings-grid-rank {
    justify-content: center;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 1.45rem;
    font-weight: 900;
    color: #641515;
}

.pems-history-standings-grid-total {
    justify-content: flex-end;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: #641515;
}

/* Public archive cards: make four-column layout comfortable, not cramped. */
.pems-history-archive-card {
    min-height: 132px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

/* More reliable breakpoint for exactly four cards on common desktop widths. */
@media (min-width: 1180px) {
    .pems-history-archive-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}


/*
|--------------------------------------------------------------------------
| Phase 1R.5.3.6 — Banner Action Palette Specificity Fix
|--------------------------------------------------------------------------
| Generic wire:click semantic selectors (create/add/etc.) can outrank older
| banner rules. Inside a red page banner, the Operations Dashboard combination
| is authoritative:
|   - pems-button-gold = muted gold primary action
|   - pems-button-light / pems-button-secondary = translucent white secondary
|--------------------------------------------------------------------------
*/

.pems-page-banner button.pems-button-gold,
.pems-page-banner a.pems-button-gold,
.pems-page-banner button.pems-button-primary,
.pems-page-banner a.pems-button-primary,
.pems-page-banner button.pems-button-create,
.pems-page-banner a.pems-button-create,
.pems-page-banner button.pems-button-success,
.pems-page-banner a.pems-button-success,
.pems-page-banner button.pems-button-warning,
.pems-page-banner a.pems-button-warning,
.pems-page-banner button.pems-button-danger,
.pems-page-banner a.pems-button-danger,
.pems-page-banner button.pems-button-lock,
.pems-page-banner a.pems-button-lock {
    background: #d2ae3d !important;
    border: 1px solid #c09b31 !important;
    color: #3f1717 !important;
    box-shadow: none !important;
}

.pems-page-banner button.pems-button-gold:hover,
.pems-page-banner a.pems-button-gold:hover,
.pems-page-banner button.pems-button-primary:hover,
.pems-page-banner a.pems-button-primary:hover,
.pems-page-banner button.pems-button-create:hover,
.pems-page-banner a.pems-button-create:hover,
.pems-page-banner button.pems-button-success:hover,
.pems-page-banner a.pems-button-success:hover,
.pems-page-banner button.pems-button-warning:hover,
.pems-page-banner a.pems-button-warning:hover,
.pems-page-banner button.pems-button-danger:hover,
.pems-page-banner a.pems-button-danger:hover,
.pems-page-banner button.pems-button-lock:hover,
.pems-page-banner a.pems-button-lock:hover {
    background: #c6a133 !important;
    border-color: #b69029 !important;
    color: #351313 !important;
}

.pems-page-banner button.pems-button-light,
.pems-page-banner a.pems-button-light,
.pems-page-banner button.pems-button-secondary,
.pems-page-banner a.pems-button-secondary {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.pems-page-banner button.pems-button-light:hover,
.pems-page-banner a.pems-button-light:hover,
.pems-page-banner button.pems-button-secondary:hover,
.pems-page-banner a.pems-button-secondary:hover {
    background: rgba(255,255,255,.15) !important;
    border-color: rgba(255,255,255,.44) !important;
    color: #ffffff !important;
}

.pems-page-banner button[class*="pems-button"],
.pems-page-banner a[class*="pems-button"] {
    min-height: 2.125rem !important;
    padding: .42rem .78rem !important;
    border-radius: .65rem !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

/* All zero-medal Divisions remain visible but visually quiet. */
.pems-podium-zero-row {
    background: #fbfbfb;
}

.pems-podium-zero-row .pems-medal-grid-team-name {
    color: #475569 !important;
}

.pems-podium-zero-row .pems-podium-rank {
    color: #cbd5e1 !important;
}


/*
|--------------------------------------------------------------------------
| Phase 1R.5.4 — Global Notifications / Toasts / Back-to-top / Form Guard
|--------------------------------------------------------------------------
*/

/* Notification bell */
.pems-notification-trigger {
    position: relative;
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: .7rem;
    background: #ffffff;
    color: #641515;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.pems-notification-trigger:hover {
    border-color: #d6c3c3;
    background: #fffafa;
    transform: translateY(-1px);
}

.pems-notification-trigger svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pems-notification-count {
    position: absolute;
    top: -6px;
    right: -7px;
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #b42318;
    padding: 0 .25rem;
    color: #ffffff;
    font-size: .56rem;
    font-weight: 900;
    line-height: 1;
}

.pems-notification-dropdown {
    position: absolute;
    top: calc(100% + .65rem);
    right: 0;
    z-index: 90;
    width: min(23rem, calc(100vw - 1.5rem));
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #ffffff;
    box-shadow: 0 22px 50px -28px rgba(31, 41, 55, .45);
}

.pems-notification-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid #eef0f2;
    padding: .85rem .95rem;
}

.pems-notification-mark-all {
    color: #7a1717;
    font-size: .65rem;
    font-weight: 900;
}

.pems-notification-mark-all:hover {
    text-decoration: underline;
}

.pems-notification-list {
    max-height: min(26rem, 70vh);
    overflow-y: auto;
}

.pems-notification-item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: .7rem;
    border-bottom: 1px solid #f0f2f4;
    background: #ffffff;
    padding: .78rem .9rem;
    text-align: left;
    transition: background-color 130ms ease;
}

.pems-notification-item:hover {
    background: #fffdf7;
}

.pems-notification-item.is-unread {
    background: #fffaf1;
}

.pems-notification-dot {
    width: .55rem;
    height: .55rem;
    flex: 0 0 .55rem;
    margin-top: .25rem;
    border-radius: 999px;
    background: #64748b;
}

.pems-notification-dot.is-success { background: #18794e; }
.pems-notification-dot.is-warning { background: #c18418; }
.pems-notification-dot.is-danger { background: #b42318; }
.pems-notification-dot.is-info { background: #315d92; }

.pems-notification-empty {
    padding: 2.25rem 1rem;
    text-align: center;
}

/* Toast system */
.pems-toast-host {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    z-index: 150;
    display: flex;
    width: min(23rem, calc(100vw - 2rem));
    flex-direction: column;
    gap: .65rem;
    pointer-events: none;
}

.pems-toast {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) 2rem;
    align-items: start;
    gap: .75rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: rgba(255,255,255,.985);
    padding: .75rem .75rem .75rem 0;
    box-shadow: 0 20px 48px -30px rgba(31, 41, 55, .50);
    opacity: 0;
    pointer-events: auto;
    transform: translateY(10px) scale(.985);
    transition: opacity 180ms ease, transform 180ms ease;
}

.pems-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pems-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px) scale(.985);
}

.pems-toast.is-clickable {
    cursor: pointer;
}

.pems-toast-indicator {
    align-self: stretch;
    background: #315d92;
}

.pems-toast.is-success .pems-toast-indicator { background: #18794e; }
.pems-toast.is-warning .pems-toast-indicator { background: #c18418; }
.pems-toast.is-danger .pems-toast-indicator { background: #b42318; }

.pems-toast-title {
    color: #1f2937;
    font-size: .75rem;
    font-weight: 900;
}

.pems-toast-message {
    margin-top: .2rem;
    color: #64748b;
    font-size: .7rem;
    line-height: 1.35;
}

.pems-toast-close {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #94a3b8;
}

.pems-toast-close:hover {
    color: #475569;
}

.pems-toast-close svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* Back to top */
.pems-back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 120;
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9a947;
    border-radius: .85rem;
    background: #641515;
    color: #f4d975;
    box-shadow: 0 14px 30px -22px rgba(31, 41, 55, .55);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(.94);
    transition: opacity 180ms ease, transform 180ms ease, background-color 150ms ease;
}

.pems-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.pems-back-to-top:hover {
    background: #741818;
    transform: translateY(-2px) scale(1);
}

.pems-back-to-top svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Required / confirmation guard */
button.pems-guard-disabled,
input[type="submit"].pems-guard-disabled,
button:disabled.pems-guard-disabled,
input[type="submit"]:disabled.pems-guard-disabled {
    cursor: not-allowed !important;
    opacity: .46 !important;
    filter: saturate(.55) !important;
    transform: none !important;
    box-shadow: none !important;
}

button.pems-guard-disabled:hover,
input[type="submit"].pems-guard-disabled:hover {
    transform: none !important;
}

/* Mobile notification dropdown is viewport-safe. */
@media (max-width: 640px) {
    .pems-notification-dropdown {
        position: fixed;
        top: 4.5rem;
        right: .75rem;
        left: .75rem;
        width: auto;
    }

    .pems-toast-host {
        right: .75rem;
        bottom: 4.75rem;
        width: calc(100vw - 1.5rem);
    }

    .pems-back-to-top {
        right: .75rem;
        bottom: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pems-toast,
    .pems-back-to-top {
        transition-duration: 1ms !important;
    }
}


/*
|--------------------------------------------------------------------------
| Phase 1R.5.4.1 — Toast bridge / semantic actions / modal polish
|--------------------------------------------------------------------------
*/

.pems-notification-empty img {
    display: block;
    margin-inline: auto;
}

/* Semantic action classes added by the global UX script.
   These rules intentionally come last so old pems-button-secondary/primary
   classes cannot visually override the action meaning. */
button.pems-semantic-danger,
a.pems-semantic-danger,
.pems-button-secondary.pems-semantic-danger,
.pems-button-primary.pems-semantic-danger {
    background: #b42318 !important;
    border-color: #a61b12 !important;
    color: #ffffff !important;
}

button.pems-semantic-danger:hover,
a.pems-semantic-danger:hover {
    background: #951b14 !important;
    border-color: #86170f !important;
    color: #ffffff !important;
}

button.pems-semantic-warning,
a.pems-semantic-warning,
.pems-button-secondary.pems-semantic-warning,
.pems-button-primary.pems-semantic-warning {
    background: #fff4d6 !important;
    border-color: #d9ad42 !important;
    color: #80530a !important;
}

button.pems-semantic-warning:hover,
a.pems-semantic-warning:hover {
    background: #f9e7b5 !important;
    border-color: #c99d32 !important;
}

button.pems-semantic-success,
a.pems-semantic-success,
.pems-button-primary.pems-semantic-success,
.pems-button-secondary.pems-semantic-success {
    background: #18794e !important;
    border-color: #146c45 !important;
    color: #ffffff !important;
}

button.pems-semantic-success:hover,
a.pems-semantic-success:hover,
.pems-button-primary.pems-semantic-success:hover,
.pems-button-secondary.pems-semantic-success:hover {
    background: #0f613d !important;
    border-color: #0d5737 !important;
    color: #ffffff !important;
}

button.pems-semantic-lock,
a.pems-semantic-lock {
    background: #334155 !important;
    border-color: #293647 !important;
    color: #ffffff !important;
}

button.pems-semantic-lock:hover,
a.pems-semantic-lock:hover {
    background: #243244 !important;
    border-color: #1f2a39 !important;
}

/* Required-data guard */
button.pems-guard-disabled,
input[type="submit"].pems-guard-disabled {
    opacity: .42 !important;
    cursor: not-allowed !important;
}

/* Correction History modal */
.pems-correction-history-intro {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: .85rem;
    background: #f8fafc;
    padding: .9rem 1rem;
}

.pems-correction-history-badge {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff4d6;
    border: 1px solid #e3bd5d;
    padding: .25rem .65rem;
    color: #80530a;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pems-correction-history-table tbody tr.is-changed {
    background: #fffaf1;
    box-shadow: inset 3px 0 0 #d2ae3d;
}

.pems-correction-value-old {
    color: #64748b;
    font-weight: 700;
}

.pems-correction-value-new {
    color: #641515;
    font-weight: 900;
}

.pems-correction-arrow {
    padding-inline: .35rem;
    color: #cbd5e1;
    font-weight: 900;
}

/* Publish Official Result modal */
.pems-publish-summary {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pems-publish-summary-card {
    border: 1px solid #e5e7eb;
    border-radius: .85rem;
    background: #f8fafc;
    padding: .85rem 1rem;
}

.pems-publish-summary-label {
    color: #94a3b8;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pems-publish-summary-value {
    margin-top: .2rem;
    color: #641515;
    font-size: .85rem;
    font-weight: 900;
}

.pems-publish-confirmation {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border: 1px solid #b9dfca;
    border-radius: .85rem;
    background: #effaf4;
    padding: .9rem 1rem;
}

.pems-publish-required {
    display: inline-flex;
    margin-left: .35rem;
    border-radius: 999px;
    background: #d9f2e4;
    padding: .15rem .45rem;
    color: #146c45;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.pems-publish-points {
    display: inline-flex;
    min-width: 3.4rem;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    background: #fff4d6;
    border: 1px solid #e1b953;
    padding: .35rem .55rem;
    color: #641515;
    font-weight: 900;
}

@media (max-width: 640px) {
    .pems-correction-history-intro,
    .pems-publish-summary {
        grid-template-columns: 1fr;
    }
}


/*
|--------------------------------------------------------------------------
| Phase 1R.5.4.3 — Toast Visibility / Explicit Semantic Actions
|--------------------------------------------------------------------------
*/

/* Toasts should be immediately noticeable, not hidden at the bottom edge. */
.pems-toast-host {
    top: 5rem !important;
    right: 1rem !important;
    bottom: auto !important;
    width: min(26rem, calc(100vw - 2rem)) !important;
    z-index: 260 !important;
}

.pems-toast {
    min-height: 4.65rem;
    grid-template-columns: 5px minmax(0, 1fr) 2.25rem !important;
    border-color: #d9dee5 !important;
    padding: .85rem .85rem .85rem 0 !important;
    box-shadow:
        0 24px 60px -28px rgba(31, 41, 55, .58),
        0 0 0 1px rgba(100, 21, 21, .04) !important;
}

.pems-toast-title {
    color: #641515 !important;
    font-size: .79rem !important;
}

.pems-toast-message {
    margin-top: .28rem !important;
    color: #475569 !important;
    font-size: .73rem !important;
    line-height: 1.45 !important;
}

.pems-toast.is-success {
    border-color: #b9dfca !important;
}

.pems-toast.is-warning {
    border-color: #ead493 !important;
}

.pems-toast.is-danger {
    border-color: #efc1bc !important;
}

/* Explicit Blade semantic classes are authoritative after Livewire morphs. */
.pems-button-danger {
    background: #b42318 !important;
    border-color: #a61b12 !important;
    color: #ffffff !important;
}

.pems-button-danger:hover {
    background: #951b14 !important;
    border-color: #86170f !important;
    color: #ffffff !important;
}

.pems-button-success {
    background: #18794e !important;
    border-color: #146c45 !important;
    color: #ffffff !important;
}

.pems-button-success:hover {
    background: #0f613d !important;
    border-color: #0d5737 !important;
    color: #ffffff !important;
}

@media (max-width: 640px) {
    .pems-toast-host {
        top: 4.75rem !important;
        right: .75rem !important;
        bottom: auto !important;
        width: calc(100vw - 1.5rem) !important;
    }
}


/*
|--------------------------------------------------------------------------
| Phase 1R.5.4.4 — Global Toast / Public UI / Correction History Polish
|--------------------------------------------------------------------------
*/

/* Correction Version History — strong, consistent header and Division identity. */
.pems-correction-history-table thead,
.pems-correction-history-table thead tr,
.pems-correction-history-table thead th {
    background: #641515 !important;
    color: #ffffff !important;
    border-color: #641515 !important;
}

.pems-correction-history-table thead th {
    font-weight: 900 !important;
    letter-spacing: .035em !important;
}

.pems-correction-history-logo {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border: 1px solid #e5e7eb;
    border-radius: .65rem;
    background: #ffffff;
    object-fit: contain;
    padding: .2rem;
    box-shadow: 0 5px 16px -12px rgba(31, 41, 55, .42);
}

/* Corrected 1st / 2nd / 3rd are visually differentiated like podium positions. */
.pems-correction-history-table tbody tr.is-podium-gold {
    background: #fff9e8 !important;
    box-shadow: inset 3px 0 0 #d4a90f !important;
}

.pems-correction-history-table tbody tr.is-podium-silver {
    background: #f7f9fc !important;
    box-shadow: inset 3px 0 0 #9aa8b8 !important;
}

.pems-correction-history-table tbody tr.is-podium-bronze {
    background: #fff6ef !important;
    box-shadow: inset 3px 0 0 #b86c32 !important;
}

.pems-correction-place-badge {
    display: inline-flex;
    min-height: 1.45rem;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    padding: .2rem .5rem;
    color: #64748b;
    font-size: .63rem;
    font-weight: 900;
}

.pems-correction-place-badge.is-gold {
    border-color: #e7c451;
    background: #fff4bf;
    color: #735300;
}

.pems-correction-place-badge.is-silver {
    border-color: #cbd5e1;
    background: #eef2f7;
    color: #526173;
}

.pems-correction-place-badge.is-bronze {
    border-color: #d9a27c;
    background: #fbe8da;
    color: #84441d;
}

/* Result Draft placement dropdown should stay compact but readable. */
.pems-result-placement-select {
    min-width: 7.8rem;
}

/* Ensure Public empty states retain the shared dynamic P-EMTS mark. */
.pems-public-page .pems-empty-state img {
    display: block;
    margin-inline: auto;
}


/*
|--------------------------------------------------------------------------
| Phase 1R.5.4.5 — Immediate Form Guard + Team Tab Transitions
|--------------------------------------------------------------------------
*/

/* Guarded buttons react immediately without an abrupt visual snap. */
button.pems-guard-disabled,
input[type="submit"].pems-guard-disabled {
    transition:
        opacity 120ms ease,
        filter 120ms ease,
        background-color 120ms ease,
        border-color 120ms ease !important;
}

/* Public Team detail tab controls. */
.pems-public-team-tab {
    transition:
        color 150ms ease,
        background-color 150ms ease,
        opacity 150ms ease,
        transform 150ms ease;
}

.pems-public-team-tab:hover:not(:disabled) {
    transform: translateY(-1px);
}

.pems-public-team-tab:disabled {
    cursor: wait;
    opacity: .72;
}

.pems-public-team-tab-indicator {
    transform-origin: center;
    animation: pems-team-tab-indicator-in 200ms cubic-bezier(.22,.61,.36,1) both;
}

.pems-public-team-tab-panel {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 140ms ease,
        transform 140ms ease;
    animation: pems-team-tab-panel-in 260ms cubic-bezier(.22,.61,.36,1) both;
}

.pems-public-team-tab-panel.is-loading {
    opacity: .58;
    transform: translateY(3px);
}

@keyframes pems-team-tab-panel-in {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pems-team-tab-indicator-in {
    from {
        opacity: 0;
        transform: scaleX(.35);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pems-public-team-tab,
    .pems-public-team-tab-panel,
    .pems-public-team-tab-indicator {
        animation: none !important;
        transition-duration: 1ms !important;
        transform: none !important;
    }
}


/*
|--------------------------------------------------------------------------
| Phase 1S.3 — Global Table Overflow Standard
|--------------------------------------------------------------------------
*/

/*
   All standard P-EMTS tables receive a bounded vertical viewport. The parent
   shell keeps horizontal overflow for wide operational tables and adds
   vertical scrolling only when the table becomes long.
*/
.pems-table-overflow-shell {
    max-height: min(34rem, calc(100dvh - 15rem));
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
}

.pems-table-overflow-shell > table.pems-table thead,
.pems-table-overflow-shell > table.pems-table-gradient thead {
    position: sticky;
    top: 0;
    z-index: 8;
}

.pems-table-overflow-shell > table.pems-table thead th,
.pems-table-overflow-shell > table.pems-table-gradient thead th {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 2px 8px rgba(40, 15, 15, .08);
}

@media (max-width: 640px) {
    .pems-table-overflow-shell {
        max-height: min(26rem, calc(100dvh - 12rem));
    }
}


/*
|--------------------------------------------------------------------------
| Phase 1S.3.1 — Setup Form / Results-Day / Department Identity Standards
|--------------------------------------------------------------------------
*/

/* Standard setup/configuration form convention: one column on small screens,
   two balanced columns on desktop. Use this before introducing ad-hoc wide
   single-field rows in future setup modules. */
.pems-standard-setup-form {
    width: 100%;
    max-width: 1020px;
}

.pems-form-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 768px) {
    .pems-form-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

@media (min-width: 640px) {
    .pems-results-day-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pems-results-day-option {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .65rem;
    border: 1px solid #dfe3e8;
    border-radius: .7rem;
    background: #ffffff;
    padding: .65rem .75rem;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.pems-results-day-option:hover {
    border-color: #d8bd69;
    background: #fffdf7;
}

.pems-results-day-option:has(input:checked),
.pems-results-day-option.is-selected {
    border-color: #b99122;
    background: #fff9e8;
    box-shadow: inset 0 0 0 1px rgba(185, 145, 34, .10);
}

/* Empty states inside data tables need enough vertical room for the shared
   system mark to render visibly. */
.pems-table td > .pems-empty-state {
    min-height: 11rem;
}


/*
|--------------------------------------------------------------------------
| Phase 1T.1 — Auth Transition + Results Availability Layout Polish
|--------------------------------------------------------------------------
*/

/* Event Results Availability is a wide administrative control. Let its
   two-column grid use the complete Settings panel instead of inheriting the
   narrower generic setup-form cap. */
.pems-results-availability-form {
    width: 100%;
    max-width: none;
}

@media (min-width: 1024px) {
    .pems-results-availability-form .pems-form-grid-2 {
        grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
        gap: 1.25rem;
    }
}

/* Shared secure-session transition used for login and logout. */
.pems-auth-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 242, 239, .92);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.pems-auth-transition-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.pems-auth-transition-card {
    display: flex;
    min-width: min(290px, calc(100vw - 2rem));
    align-items: center;
    gap: .9rem;
    border: 1px solid rgba(104, 0, 0, .10);
    border-radius: 16px;
    background: rgba(255, 255, 255, .98);
    padding: .95rem 1.05rem;
    box-shadow: 0 22px 60px -34px rgba(76, 0, 0, .58);
    transform: translateY(5px) scale(.985);
    transition: transform 180ms ease;
}

.pems-auth-transition-overlay.is-active .pems-auth-transition-card {
    transform: translateY(0) scale(1);
}

.pems-auth-transition-mark {
    width: 44px;
    height: 44px;
    flex: none;
    object-fit: contain;
    filter: drop-shadow(0 5px 14px rgba(105, 0, 0, .22));
    animation: pems-auth-transition-pulse 850ms ease-in-out infinite alternate;
}

@keyframes pems-auth-transition-pulse {
    from { transform: scale(.94); opacity: .72; }
    to { transform: scale(1.05); opacity: 1; }
}

/* Full-page auth redirects are not Livewire Navigate transitions, so provide a
   restrained arrival animation on the destination shell. */
.pems-clean-guest .pems-auth-shell,
.pems-app-body #pems-workspace {
    animation: pems-auth-page-arrival 260ms ease-out both;
}

@keyframes pems-auth-page-arrival {
    from { opacity: .28; }
    to { opacity: 1; }
}

/* Sign-out is a normal POST, not wire:navigate. Expand the authenticated
   loader over the whole viewport and soften the outgoing shell immediately. */
html.pems-is-auth-leaving .pems-navigation-overlay {
    left: 0 !important;
    z-index: 110;
}

html.pems-is-auth-leaving .pems-shell-sidebar,
html.pems-is-auth-leaving #pems-workspace {
    opacity: .48;
    transition: opacity 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .pems-auth-transition-overlay,
    .pems-auth-transition-card,
    .pems-clean-guest .pems-auth-shell,
    .pems-app-body #pems-workspace,
    html.pems-is-auth-leaving .pems-shell-sidebar,
    html.pems-is-auth-leaving #pems-workspace {
        animation: none !important;
        transition-duration: 1ms !important;
        transform: none !important;
    }

    .pems-auth-transition-mark {
        animation: none !important;
    }
}

/* =====================================================================
   Phase 1T.3.1 — Global modal/content overflow containment
   =====================================================================
   The shared modal is the authority for long administrative content. The
   modal shell never owns a horizontal scrollbar; intentionally wide tables
   and grids must keep their horizontal scrolling inside their own wrappers.
   ===================================================================== */
html.pems-modal-open,
html.pems-modal-open body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.pems-modal-root,
.pems-modal-viewport,
.pems-modal-body {
    min-width: 0 !important;
    max-width: 100vw;
}

.pems-modal-panel {
    min-width: 0 !important;
    width: min(calc(100vw - 1.5rem), var(--pems-modal-max, 42rem)) !important;
    max-width: var(--pems-modal-max, 42rem) !important;
}

.pems-modal-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Prevent grid/flex/card children from widening the shared modal. */
.pems-modal-body > *,
.pems-modal-body .grid,
.pems-modal-body .flex,
.pems-modal-body .grid > *,
.pems-modal-body .flex > *,
.pems-modal-body .pems-panel,
.pems-modal-body input,
.pems-modal-body select,
.pems-modal-body textarea {
    min-width: 0;
    max-width: 100%;
}

/* Long audit JSON, URLs, filenames and metadata must wrap inside their card. */
.pems-modal-body pre,
.pems-modal-body code,
.pems-modal-body .pems-modal-wrap-text {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.pems-modal-body pre {
    overflow-x: hidden !important;
}

.pems-modal-body img,
.pems-modal-body video,
.pems-modal-body canvas,
.pems-modal-body svg {
    max-width: 100%;
}

/* Explicit horizontal-scroll wrappers remain allowed for genuinely wide data. */
.pems-modal-body .overflow-x-auto,
.pems-modal-body .pems-modal-horizontal-scroll {
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-inline: contain;
}

@media (min-width: 640px) {
    .pems-modal-panel {
        width: min(calc(100vw - 2.5rem), var(--pems-modal-max, 42rem)) !important;
    }
}



/* =====================================================================
   Phase 1T.3.2 — Global empty states, control geometry & modal viewport fix
   =====================================================================
   Future authenticated modules should reuse these semantic classes instead
   of page-specific width utilities or one-off no-data markup.
   ===================================================================== */

/* Standalone Season Context rows keep explanatory copy fluid while the
   selector stays compact and consistent on desktop. */
.pems-season-context-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: .85rem 1rem;
}

.pems-season-select,
.pems-season-control select.pems-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 20rem !important;
}

.pems-season-select {
    justify-self: stretch;
}

.pems-season-control {
    width: 100%;
    max-width: 20rem;
}

/* Filter panels are the standard home for search/status/role/season controls.
   Individual grid columns decide geometry; fields must never force the row
   wider than the panel. */
.pems-filter-panel .pems-field,
.pems-filter-panel .pems-filter-select,
.pems-filter-panel .pems-filter-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Shared branded empty states are authoritative for true no-data screens. */
.pems-empty-state {
    width: 100%;
    min-width: 0;
}

.pems-empty-state--table {
    min-height: 11rem;
}

/* A fixed-position modal must never live inside a transformed containing block.
   The authenticated arrival transition is intentionally opacity-only. */
#pems-workspace {
    transform: none !important;
}

@media (min-width: 640px) {
    .pems-season-context-row {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    }

    .pems-season-select {
        justify-self: end;
    }
}

@media (max-width: 639.98px) {
    .pems-season-select,
    .pems-season-control,
    .pems-season-control select.pems-field {
        max-width: none !important;
    }
}


/* =====================================================================
   Phase 1T.3.3 — Authoritative modal sizing & filter-grid standards
   ===================================================================== */
.pems-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    align-items: end;
}

@media (min-width: 768px) {
    .pems-filter-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .pems-filter-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .pems-filter-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .pems-filter-grid-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.pems-filter-grid > * {
    min-width: 0;
}

/* =====================================================================
   Phase 1T.4.2 — Compact tournament bracket board + public bracket view
   ===================================================================== */
.pems-bracket-scroll,
.pems-public-bracket-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: .5rem;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.pems-bracket-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 300px);
    gap: 1rem;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
}

.pems-bracket-round {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.pems-bracket-round-title {
    position: sticky;
    top: 0;
    z-index: 2;
    border-radius: .7rem;
    background: linear-gradient(135deg, #690000 0%, #821313 100%);
    padding: .62rem .8rem;
    text-align: center;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 8px 18px rgba(92, 0, 0, .08);
}

.pems-bracket-round-matches {
    display: flex;
    flex: 1 1 auto;
    min-height: calc(var(--pems-bracket-first-round, 1) * 12.5rem);
    flex-direction: column;
    justify-content: space-around;
    gap: .85rem;
    padding: .8rem .15rem .2rem;
}

.pems-bracket-match {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(92, 0, 0, .10);
    border-radius: .9rem;
    background: #fff;
    padding: .8rem;
    box-shadow: 0 8px 20px rgba(42, 21, 18, .045);
}

.pems-bracket-match.is-completed {
    border-color: rgba(5, 150, 105, .22);
}

.pems-bracket-slot {
    display: flex;
    min-width: 0;
    min-height: 2.7rem;
    align-items: center;
    gap: .6rem;
    border: 1px solid rgba(92, 0, 0, .07);
    border-radius: .65rem;
    background: #fbf8f6;
    padding: .42rem .55rem;
}

.pems-bracket-slot.is-winner {
    border-color: rgba(215, 170, 29, .55);
    background: #fffaf0;
}

.pems-match-schedule-summary {
    min-width: 0;
    border: 1px solid rgba(92, 0, 0, .08);
    border-radius: .65rem;
    background: #fffdfb;
    padding: .55rem .65rem;
}

.pems-bracket-ops {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(92, 0, 0, .10);
    border-radius: .7rem;
    background: #fff;
}

.pems-bracket-ops > summary {
    display: flex;
    cursor: pointer;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .7rem;
    color: #760000;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    user-select: none;
}

.pems-bracket-ops > summary::-webkit-details-marker {
    display: none;
}

.pems-bracket-ops[open] > summary {
    border-bottom: 1px solid rgba(92, 0, 0, .08);
    background: #fffaf7;
}

.pems-bracket-ops-body {
    min-width: 0;
    padding: .7rem;
}

.pems-public-bracket-match {
    box-shadow: 0 8px 22px rgba(42, 21, 18, .04);
}

@media (max-width: 767.98px) {
    .pems-bracket-board {
        grid-auto-columns: minmax(240px, 82vw);
        min-width: max-content;
    }

    .pems-bracket-round-matches {
        min-height: auto;
        justify-content: flex-start;
    }

    .pems-bracket-round-title {
        position: static;
    }
}

/* =====================================================================
   Phase 1T.5.1 — Tournament summary + connected bracket board
   ===================================================================== */
.pems-tournament-hero .pems-page-title {
    color: #fff !important;
}

.pems-tournament-hero .pems-page-subtitle {
    color: rgba(255, 255, 255, .78) !important;
}

.pems-tournament-hero-kicker {
    color: #f2cf6b !important;
}

.pems-tournament-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem;
}

.pems-tournament-summary-card {
    min-width: 0;
    border: 1px solid var(--pems-clean-border);
    border-radius: 1rem;
    background: #fff;
    padding: .9rem 1rem;
    box-shadow: 0 10px 26px -24px rgba(31, 41, 55, .35);
}

.pems-tournament-summary-label {
    color: #94a3b8;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.pems-tournament-summary-value {
    margin-top: .35rem;
    overflow-wrap: anywhere;
    color: #690000;
    font-family: var(--font-pems-display, inherit);
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.pems-tournament-summary-value.is-number {
    font-family: inherit;
    font-size: 1.45rem;
}

.pems-tournament-summary-value.is-complete {
    color: #047857;
}

.pems-tournament-summary-note {
    margin-top: .28rem;
    color: #64748b;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.35;
}

.pems-bracket-connectors-surface {
    position: relative;
    isolation: isolate;
}

.pems-bracket-connectors {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.pems-bracket-connectors .pems-bracket-path {
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.pems-bracket-connectors .pems-bracket-path.is-winner {
    stroke: #7a1717;
    opacity: .82;
}

.pems-bracket-connectors .pems-bracket-path.is-loser {
    stroke: #c6921f;
    stroke-dasharray: 6 5;
    opacity: .92;
}

.pems-bracket-round,
.pems-double-elim-lane,
.pems-bracket-match {
    position: relative;
    z-index: 2;
}

.pems-bracket-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

.pems-bracket-legend-item i {
    position: relative;
    display: inline-block;
    width: 1.65rem;
    height: .12rem;
    border-radius: 999px;
    background: #7a1717;
}

.pems-bracket-legend-item i::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -.06rem;
    width: .38rem;
    height: .38rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    color: #7a1717;
    transform: translateY(-50%) rotate(45deg);
}

.pems-bracket-legend-item i.is-loser {
    background: repeating-linear-gradient(90deg, #c6921f 0 6px, transparent 6px 10px);
}

.pems-bracket-legend-item i.is-loser::after {
    color: #c6921f;
}

.pems-double-elim-board {
    position: relative;
    width: max-content;
    min-width: 100%;
    border: 1px solid rgba(92, 0, 0, .08);
    border-radius: 1rem;
    background: linear-gradient(180deg, #fff 0%, #fbfaf9 100%);
    padding: 1rem;
}

.pems-double-elim-lane + .pems-double-elim-lane {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(92, 0, 0, .10);
}

.pems-double-elim-lane-label {
    position: sticky;
    left: 0;
    z-index: 4;
    width: fit-content;
    min-width: 10.5rem;
    border-radius: .65rem;
    background: #690000;
    padding: .48rem .72rem;
    color: #fff;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(92, 0, 0, .08);
}

.pems-double-elim-lane.is-losers .pems-double-elim-lane-label {
    background: #8a5a11;
}

.pems-double-elim-rounds {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 300px);
    align-items: stretch;
    gap: 3rem;
    margin-top: .8rem;
}

.pems-double-elim-board .pems-bracket-round-matches {
    min-height: calc(var(--pems-bracket-lane-first-round, 1) * 11.25rem);
}

.pems-double-elim-board .pems-bracket-round-title.is-loser-round {
    background: linear-gradient(135deg, #86540c 0%, #a66a13 100%);
}

.pems-double-elim-board .pems-bracket-round-title.is-final {
    background: linear-gradient(135deg, #5c0000 0%, #8d1414 72%, #b98513 100%);
}

.pems-double-elim-board .pems-bracket-round-matches.is-finals {
    justify-content: center;
}

.pems-bracket-match {
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pems-bracket-match:hover {
    border-color: rgba(122, 23, 23, .24);
    box-shadow: 0 12px 28px rgba(42, 21, 18, .075);
}

.pems-bracket-slot[data-pems-target-slot] {
    position: relative;
}

.pems-bracket-slot[data-pems-target-slot]::before {
    content: '';
    position: absolute;
    left: -.34rem;
    top: 50%;
    width: .42rem;
    height: .42rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #b98f2e;
    box-shadow: 0 0 0 1px rgba(92, 0, 0, .12);
    transform: translate(-50%, -50%);
}

.pems-bracket-match[data-pems-bracket-match].is-connector-source::after {
    content: '';
    position: absolute;
    right: -.42rem;
    top: 50%;
    width: .44rem;
    height: .44rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #7a1717;
    box-shadow: 0 0 0 1px rgba(92, 0, 0, .12);
    transform: translate(50%, -50%);
}

.pems-public-double-elim-board {
    background: #fbfaf9;
}

@media (max-width: 767.98px) {
    .pems-tournament-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pems-double-elim-rounds {
        grid-auto-columns: minmax(240px, 82vw);
        gap: 2.4rem;
    }

    .pems-double-elim-board .pems-bracket-round-matches {
        min-height: auto;
        justify-content: flex-start;
    }

    .pems-double-elim-lane-label {
        position: static;
    }
}

@media (max-width: 479.98px) {
    .pems-tournament-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pems-bracket-match {
        transition: none;
    }
}

/* =====================================================================
   Phase 1T.5.2 — Dark tournament canvas, full-width board, stage tabs + print
   ===================================================================== */
.pems-tournament-workspace {
    width: 100%;
    max-width: none !important;
}

.pems-public-tournament-wide {
    width: min(1680px, calc(100vw - 32px));
    max-width: none;
    margin-inline: 50%;
    transform: translateX(-50%);
}

.pems-stage-bracket-shell {
    overflow: hidden;
    border-color: rgba(255, 255, 255, .08) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(141, 20, 20, .20), transparent 34rem),
        linear-gradient(180deg, #1d1f2a 0%, #151720 100%) !important;
    box-shadow: 0 20px 46px -34px rgba(7, 8, 13, .9);
}

.pems-stage-bracket-shell .pems-panel-title,
.pems-stage-bracket-shell .font-pems-display {
    color: #fff !important;
}

.pems-stage-bracket-shell .pems-panel-subtitle {
    color: #b9c0cf !important;
}

.pems-stage-bracket-shell .pems-bracket-scroll,
.pems-stage-bracket-shell .pems-public-bracket-scroll {
    margin-inline: -.35rem;
    padding: .35rem .35rem .8rem;
}

.pems-stage-bracket-shell .pems-bracket-legend-item {
    color: #c8ceda;
}

.pems-bracket-board {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--pems-round-count, 1), minmax(300px, 1fr));
    width: 100%;
    min-width: 100%;
    gap: 2.25rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1rem;
    background: linear-gradient(180deg, #171923 0%, #11131a 100%);
    padding: 1rem;
}

.pems-double-elim-board {
    width: 100%;
    min-width: 100%;
    border-color: rgba(255, 255, 255, .08);
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(180deg, #171923 0%, #10121a 100%);
    background-size: 26px 26px, 26px 26px, auto;
    padding: 1.1rem;
}

.pems-double-elim-rounds {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--pems-double-round-count, 1), minmax(300px, 1fr));
    width: 100%;
    min-width: 100%;
}

.pems-double-elim-lane + .pems-double-elim-lane {
    border-top-color: rgba(255, 255, 255, .09);
}

.pems-double-elim-lane-label {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

.pems-bracket-round-title {
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.pems-stage-bracket-shell .pems-bracket-match,
.pems-double-elim-board .pems-bracket-match,
.pems-public-bracket-board .pems-bracket-match {
    border-color: rgba(213, 218, 229, .95);
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.pems-stage-bracket-shell .pems-bracket-match:hover,
.pems-double-elim-board .pems-bracket-match:hover {
    border-color: rgba(246, 196, 83, .9);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
}

.pems-stage-bracket-shell .pems-bracket-slot,
.pems-double-elim-board .pems-bracket-slot,
.pems-public-bracket-board .pems-bracket-slot {
    border-color: #e6e1dd;
    background: #fcfaf8;
}

.pems-stage-bracket-shell .pems-match-schedule-summary,
.pems-double-elim-board .pems-match-schedule-summary,
.pems-public-bracket-board .pems-match-schedule-summary {
    border-color: #e5ded8;
    background: #fffdfa;
}

.pems-bracket-connectors .pems-bracket-path {
    stroke-width: 2.8;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

.pems-bracket-connectors .pems-bracket-path.is-winner {
    stroke: #ff6f6f;
    opacity: .96;
}

.pems-bracket-connectors .pems-bracket-path.is-loser {
    stroke: #f6c453;
    opacity: .98;
}

.pems-bracket-legend-item i,
.pems-bracket-match[data-pems-bracket-match].is-connector-source::after {
    background: #ff6f6f;
}

.pems-bracket-legend-item i::after {
    color: #ff6f6f;
}

.pems-bracket-legend-item i.is-loser {
    background: repeating-linear-gradient(90deg, #f6c453 0 6px, transparent 6px 10px);
}

.pems-bracket-legend-item i.is-loser::after {
    color: #f6c453;
}

.pems-tournament-stage-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    border: 1px solid #e5ddd8;
    border-radius: 1rem;
    background: #fff;
    padding: .55rem;
    box-shadow: 0 10px 30px -28px rgba(31, 41, 55, .45);
}

.pems-tournament-stage-tab {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .18rem;
    border: 1px solid transparent;
    border-radius: .8rem;
    padding: .75rem .9rem;
    text-align: left;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.pems-tournament-stage-tab span {
    color: #a2670d;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pems-tournament-stage-tab strong {
    color: #64748b;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pems-tournament-stage-tab.is-active {
    border-color: #750000;
    background: linear-gradient(135deg, #690000 0%, #8d1414 100%);
    box-shadow: 0 10px 24px rgba(92, 0, 0, .14);
}

.pems-tournament-stage-tab.is-active span {
    color: #f6c453;
}

.pems-tournament-stage-tab.is-active strong {
    color: #fff;
}

.pems-double-elim-board.is-preview .pems-bracket-match {
    opacity: .94;
}

.pems-tournament-print-header {
    display: none;
}

@media (max-width: 767.98px) {
    .pems-public-tournament-wide {
        width: calc(100vw - 20px);
    }

    .pems-bracket-board {
        grid-template-columns: repeat(var(--pems-round-count, 1), minmax(260px, 86vw));
        width: max-content;
        min-width: 100%;
        gap: 1.5rem;
    }

    .pems-double-elim-rounds {
        grid-template-columns: repeat(var(--pems-double-round-count, 1), minmax(260px, 86vw));
        width: max-content;
        min-width: 100%;
        gap: 2rem;
    }

    .pems-tournament-stage-tabs {
        grid-template-columns: 1fr;
    }
}

@media print {
    @page {
        size: landscape;
        margin: 8mm;
    }

    body.pems-tournament-print-mode {
        background: #fff !important;
    }

    body.pems-tournament-print-mode .pems-shell-sidebar,
    body.pems-tournament-print-mode #pems-workspace > header,
    body.pems-tournament-print-mode .pems-back-to-top,
    body.pems-tournament-print-mode .pems-toast-host,
    body.pems-tournament-print-mode .pems-tournament-no-print,
    body.pems-tournament-print-mode .pems-bracket-ops,
    body.pems-tournament-print-mode button,
    body.pems-tournament-print-mode a {
        display: none !important;
    }

    body.pems-tournament-print-mode #pems-workspace {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body.pems-tournament-print-mode #pems-main-content {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    body.pems-tournament-print-mode .pems-tournament-workspace {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    body.pems-tournament-print-mode .pems-tournament-print-header {
        display: block !important;
        margin-bottom: 6mm;
        border-bottom: 2px solid #690000;
        padding-bottom: 3mm;
    }

    .pems-tournament-print-kicker {
        color: #8a5a11;
        font-size: 8pt;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .pems-tournament-print-title {
        margin-top: 1mm;
        color: #5c0000;
        font-size: 20pt;
        font-weight: 900;
        text-transform: uppercase;
    }

    .pems-tournament-print-meta {
        margin-top: 1mm;
        color: #475569;
        font-size: 8pt;
        font-weight: 700;
    }

    body.pems-tournament-print-mode .pems-stage-bracket-shell,
    body.pems-tournament-print-mode .pems-double-elim-board,
    body.pems-tournament-print-mode .pems-bracket-board {
        break-inside: avoid;
        border-color: #cbd5e1 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #111827 !important;
    }

    body.pems-tournament-print-mode .pems-stage-bracket-shell .pems-panel-title,
    body.pems-tournament-print-mode .pems-stage-bracket-shell .font-pems-display {
        color: #5c0000 !important;
    }

    body.pems-tournament-print-mode .pems-stage-bracket-shell .pems-panel-subtitle,
    body.pems-tournament-print-mode .pems-stage-bracket-shell .pems-bracket-legend-item {
        color: #475569 !important;
    }

    body.pems-tournament-print-mode .pems-bracket-scroll,
    body.pems-tournament-print-mode .pems-public-bracket-scroll {
        overflow: visible !important;
    }

    body.pems-tournament-print-mode .pems-bracket-match {
        box-shadow: none !important;
    }
}


/* =====================================================================
   Phase 1T.5.3 — Standard-width bracket shell + internal dark parity + print fit
   ===================================================================== */
.pems-tournament-workspace {
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
}

/* Public Event detail must remain inside the established 1240px public shell.
   Only the bracket canvas may scroll horizontally when its natural plot is wider. */
.pems-public-tournament-wide {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    transform: none !important;
}

/* Dark tournament-board treatment is authoritative for every authenticated
   role that can open the Tournament workspace, not only the public portal. */
.pems-tournament-workspace .pems-stage-bracket-shell,
.pems-public-tournament-wide .pems-stage-bracket-shell {
    overflow: hidden;
    border-color: rgba(255, 255, 255, .08) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(141, 20, 20, .22), transparent 34rem),
        linear-gradient(180deg, #1d1f2a 0%, #13151e 100%) !important;
}

.pems-tournament-workspace .pems-bracket-board,
.pems-tournament-workspace .pems-double-elim-board,
.pems-public-tournament-wide .pems-bracket-board,
.pems-public-tournament-wide .pems-double-elim-board {
    border-color: rgba(255, 255, 255, .08) !important;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(180deg, #171923 0%, #10121a 100%) !important;
    background-size: 26px 26px, 26px 26px, auto !important;
}

/* Keep a standard page width, but let the plot use every available pixel before
   introducing local horizontal scrolling. */
.pems-tournament-workspace .pems-bracket-board,
.pems-public-tournament-wide .pems-bracket-board {
    grid-template-columns: repeat(var(--pems-round-count, 1), minmax(270px, 1fr));
}

.pems-tournament-workspace .pems-double-elim-rounds,
.pems-public-tournament-wide .pems-double-elim-rounds {
    grid-template-columns: repeat(var(--pems-double-round-count, 1), minmax(270px, 1fr));
}

@media (max-width: 767.98px) {
    .pems-tournament-workspace {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pems-public-tournament-wide {
        width: 100% !important;
    }

    .pems-tournament-workspace .pems-bracket-board,
    .pems-public-tournament-wide .pems-bracket-board {
        grid-template-columns: repeat(var(--pems-round-count, 1), minmax(260px, 86vw));
        width: max-content;
    }

    .pems-tournament-workspace .pems-double-elim-rounds,
    .pems-public-tournament-wide .pems-double-elim-rounds {
        grid-template-columns: repeat(var(--pems-double-round-count, 1), minmax(260px, 86vw));
        width: max-content;
    }
}

@media print {
    /* The screen canvas may be wider/taller than one landscape page. The bracket
       renderer measures each plot before print and supplies a fit scale so every
       round and connector is included in the printed sheet. */
    body.pems-tournament-print-mode .pems-stage-bracket-shell {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.pems-tournament-print-mode [data-pems-bracket-connectors] {
        width: var(--pems-print-natural-width, 100%) !important;
        min-width: var(--pems-print-natural-width, 100%) !important;
        max-width: none !important;
        height: auto !important;
        zoom: var(--pems-print-scale, 1);
        overflow: visible !important;
        margin: 0 !important;
    }

    body.pems-tournament-print-mode [data-pems-bracket-connectors] .pems-bracket-connectors {
        overflow: visible !important;
    }

    body.pems-tournament-print-mode .pems-bracket-scroll,
    body.pems-tournament-print-mode .pems-public-bracket-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        scrollbar-width: none !important;
    }

    body.pems-tournament-print-mode .pems-bracket-scroll::-webkit-scrollbar,
    body.pems-tournament-print-mode .pems-public-bracket-scroll::-webkit-scrollbar {
        display: none !important;
    }
}

/* =====================================================================
   Phase 1T.5.4 — Canvas-contained dark bracket + responsive student view
   ===================================================================== */

/* Keep the Stage / Tournament section itself light.  The dark treatment belongs
   only to the actual connector surface so the Event page remains balanced. */
.pems-stage-bracket-shell,
.pems-tournament-workspace .pems-stage-bracket-shell,
.pems-public-tournament-wide .pems-stage-bracket-shell {
    overflow: visible !important;
    border: 1px solid #e7ded9 !important;
    border-radius: 1rem;
    background: #fff !important;
    box-shadow: 0 12px 30px -28px rgba(31, 41, 55, .45) !important;
    color: #111827 !important;
}

.pems-stage-bracket-shell .pems-panel-title,
.pems-stage-bracket-shell .font-pems-display {
    color: #5c0000 !important;
}

.pems-stage-bracket-shell .pems-panel-subtitle,
.pems-stage-bracket-shell p {
    color: #64748b !important;
}

.pems-stage-bracket-shell .pems-bracket-legend-item {
    color: #64748b !important;
}

/* Horizontal overflow is owned only by the bracket viewport.  It must never
   widen the page or leak match cards / connector paths outside the section. */
.pems-bracket-scroll,
.pems-public-bracket-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    border-radius: 1rem;
    padding: 0 0 .7rem;
}

.pems-bracket-scroll::-webkit-scrollbar,
.pems-public-bracket-scroll::-webkit-scrollbar {
    height: 8px;
}

.pems-bracket-scroll::-webkit-scrollbar-track,
.pems-public-bracket-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #ebe7e4;
}

.pems-bracket-scroll::-webkit-scrollbar-thumb,
.pems-public-bracket-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #9b948f;
}

/* The canvas itself owns the dark board.  This includes the exact public Stage
   2 preview surface and the authenticated Facilitator / authorized-role board. */
.pems-bracket-connectors-surface.pems-bracket-board,
.pems-bracket-connectors-surface.pems-double-elim-board,
.pems-bracket-connectors-surface.pems-public-double-elim-board,
.pems-bracket-connectors-surface.pems-public-double-elim-board.is-preview {
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
    max-width: none;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 1rem;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(180deg, #171923 0%, #10121a 100%) !important;
    background-size: 26px 26px, 26px 26px, auto !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
    padding: 1rem;
}

/* Keep rounds compact and balanced.  Columns do not stretch into oversized
   cards merely because a lane has only two rounds. */
.pems-bracket-connectors-surface.pems-bracket-board {
    display: grid;
    grid-template-columns: repeat(var(--pems-round-count, 1), minmax(250px, 292px));
    grid-auto-flow: row;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 3.25rem);
}

.pems-double-elim-rounds {
    display: grid;
    grid-template-columns: repeat(var(--pems-double-round-count, 1), minmax(250px, 292px));
    grid-auto-flow: row;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 3.25rem);
    width: 100%;
    min-width: max-content;
}

.pems-double-elim-board .pems-bracket-round-matches {
    min-height: calc(var(--pems-bracket-lane-first-round, 1) * 10.6rem);
}

/* Cards stay clearly separate from the dark board without becoming visually
   heavy. */
.pems-bracket-connectors-surface .pems-bracket-match {
    border-color: rgba(226, 232, 240, .92) !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
}

.pems-bracket-connectors-surface .pems-bracket-slot {
    border-color: #e7e2de !important;
    background: #fbfaf9 !important;
}

.pems-bracket-connectors-surface .pems-match-schedule-summary {
    border-color: #e9e3de !important;
    background: #fffdfa !important;
}

.pems-bracket-connectors-surface .pems-bracket-round-title,
.pems-bracket-connectors-surface .pems-double-elim-lane-label {
    position: relative;
    inset: auto;
}

/* Connector SVG is contained by the canvas.  Paths are calculated inside these
   bounds so no vertical route can create page-level overflow. */
.pems-bracket-connectors-surface > .pems-bracket-connectors {
    inset: 0;
    overflow: hidden;
}

/* Student-first mobile presentation: each round becomes a swipeable, readable
   panel rather than a desktop board squeezed into a phone viewport. */
@media (max-width: 767.98px) {
    .pems-stage-bracket-shell {
        border-radius: .85rem;
    }

    .pems-bracket-scroll,
    .pems-public-bracket-scroll {
        margin-inline: 0 !important;
        padding: 0 0 .65rem !important;
        scroll-snap-type: x proximity;
        scroll-padding-inline: .7rem;
    }

    .pems-bracket-connectors-surface.pems-bracket-board,
    .pems-bracket-connectors-surface.pems-double-elim-board,
    .pems-bracket-connectors-surface.pems-public-double-elim-board {
        min-width: max-content;
        padding: .8rem;
        border-radius: .85rem;
    }

    .pems-bracket-connectors-surface.pems-bracket-board {
        grid-template-columns: repeat(var(--pems-round-count, 1), minmax(224px, min(78vw, 268px)));
        justify-content: start;
        gap: 1.35rem;
    }

    .pems-double-elim-rounds {
        grid-template-columns: repeat(var(--pems-double-round-count, 1), minmax(224px, min(78vw, 268px)));
        justify-content: start;
        gap: 1.35rem;
    }

    .pems-bracket-round {
        scroll-snap-align: start;
    }

    .pems-double-elim-lane-label {
        position: static;
        min-width: 0;
        max-width: calc(100vw - 5rem);
        white-space: normal;
        line-height: 1.25;
    }

    .pems-bracket-round-title {
        position: static;
        padding: .58rem .65rem;
        font-size: .58rem;
    }

    .pems-bracket-match {
        padding: .65rem;
        border-radius: .78rem;
    }

    .pems-bracket-slot {
        min-height: 2.55rem;
        gap: .5rem;
        padding: .38rem .46rem;
    }

    .pems-bracket-ops > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .pems-bracket-connectors .pems-bracket-path {
        stroke-width: 2.25;
    }
}

@media (max-width: 479.98px) {
    .pems-bracket-connectors-surface.pems-bracket-board {
        grid-template-columns: repeat(var(--pems-round-count, 1), minmax(218px, 76vw));
    }

    .pems-double-elim-rounds {
        grid-template-columns: repeat(var(--pems-double-round-count, 1), minmax(218px, 76vw));
    }

    .pems-double-elim-board .pems-bracket-round-matches,
    .pems-bracket-round-matches {
        min-height: auto;
        justify-content: flex-start;
    }
}

@media print {
    /* Screen containment must not clip the complete print plot. */
    body.pems-tournament-print-mode .pems-bracket-connectors-surface.pems-bracket-board,
    body.pems-tournament-print-mode .pems-bracket-connectors-surface.pems-double-elim-board,
    body.pems-tournament-print-mode .pems-bracket-connectors-surface.pems-public-double-elim-board {
        overflow: visible !important;
        border-color: #cbd5e1 !important;
        background: #fff !important;
        box-shadow: none !important;
    }
}

/* Light shell copy must remain readable after the dark treatment is confined
   to the connector canvas. */
.pems-stage-bracket-shell .text-amber-300 {
    color: #a16207 !important;
}

.pems-stage-bracket-shell .text-slate-300 {
    color: #64748b !important;
}

/* =====================================================================
   Phase 1T.5.5 — Round Robin dark canvas + drag panning + compact headers
   ===================================================================== */

/* Tournament bracket section header stays compact and balanced.  The dark
   treatment begins only at the actual tournament canvas below it. */
.pems-stage-bracket-shell,
.pems-tournament-workspace .pems-stage-bracket-shell,
.pems-public-tournament-wide .pems-stage-bracket-shell {
    padding: 0 !important;
    overflow: hidden !important;
}

.pems-bracket-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: .85rem 1rem .75rem;
    border-bottom: 1px solid #eee5e0;
    background: #fff;
}

.pems-bracket-section-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.pems-bracket-section-kicker {
    color: #a16207;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.pems-bracket-section-title {
    margin-top: .18rem;
    color: #5c0000;
    font-family: var(--font-pems-display, inherit);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.pems-bracket-section-subtitle {
    margin-top: .3rem;
    max-width: 54rem;
    color: #64748b !important;
    font-size: .7rem;
    line-height: 1.45;
}

.pems-bracket-section-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: .9rem;
    color: #64748b;
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.pems-bracket-pan-label {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    border: 1px solid #e8ded8;
    border-radius: 999px;
    background: #faf8f6;
    padding: .28rem .55rem;
    color: #7c675e;
    white-space: nowrap;
}

.pems-bracket-pan-label::before {
    content: '↔';
    margin-right: .28rem;
    color: #a16207;
    font-size: .68rem;
}

.pems-bracket-section-head + .pems-bracket-scroll,
.pems-bracket-section-head + .pems-public-bracket-scroll {
    margin-top: 0 !important;
    padding: .7rem .75rem .8rem !important;
}

.pems-stage-inline-notice {
    margin: .7rem 1rem 0;
}

/* Round Robin uses the same tournament-board visual language while standings
   and explanatory copy stay light/readable outside the canvas. */
.pems-round-robin-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: 1rem;
    padding-bottom: .55rem;
}

.pems-round-robin-scroll::-webkit-scrollbar {
    height: 8px;
}

.pems-round-robin-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #ebe7e4;
}

.pems-round-robin-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #9b948f;
}

.pems-round-robin-canvas {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1rem;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(180deg, #171923 0%, #10121a 100%);
    background-size: 26px 26px, 26px 26px, auto;
    padding: 1rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.pems-round-robin-round + .pems-round-robin-round {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.pems-round-robin-round-title {
    margin-bottom: .7rem;
    color: #f6c453;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.pems-round-robin-match-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.pems-round-robin-canvas .pems-bracket-match {
    border-color: rgba(226,232,240,.94) !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.24) !important;
}

.pems-round-robin-canvas .pems-bracket-slot {
    border-color: #e7e2de !important;
    background: #fbfaf9 !important;
}

.pems-round-robin-canvas .pems-match-schedule-summary {
    border-color: #e9e3de !important;
    background: #fffdfa !important;
}

/* Desktop drag-to-pan augments the scrollbar. Touch devices keep native swipe
   physics so students can still scroll the page vertically over the canvas. */
[data-pems-pan-canvas] {
    position: relative;
}

[data-pems-pan-canvas].is-pannable {
    cursor: grab;
}

[data-pems-pan-canvas].is-panning {
    cursor: grabbing;
    scroll-behavior: auto !important;
    user-select: none;
}

[data-pems-pan-canvas].is-panning * {
    user-select: none !important;
}

@media (max-width: 1023.98px) {
    .pems-round-robin-match-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .pems-bracket-section-head {
        align-items: flex-start;
        padding: .75rem .8rem .65rem;
    }

    .pems-bracket-section-title {
        font-size: 1rem;
    }

    .pems-bracket-section-subtitle {
        font-size: .65rem;
    }

    .pems-bracket-section-tools {
        gap: .6rem;
    }

    .pems-bracket-section-tools .pems-bracket-legend-item {
        display: none;
    }

    .pems-bracket-pan-label {
        min-height: 1.55rem;
        padding: .22rem .48rem;
        font-size: 0;
    }

    .pems-bracket-pan-label::before {
        content: 'Swipe ↔';
        margin-right: 0;
        color: #7c675e;
        font-size: .52rem;
        letter-spacing: .05em;
    }

    .pems-bracket-section-head + .pems-bracket-scroll,
    .pems-bracket-section-head + .pems-public-bracket-scroll {
        padding: .6rem .6rem .7rem !important;
    }

    .pems-stage-inline-notice {
        margin: .6rem .75rem 0;
    }

    .pems-round-robin-canvas {
        padding: .75rem;
        border-radius: .85rem;
    }

    .pems-round-robin-match-grid {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .pems-round-robin-round + .pems-round-robin-round {
        margin-top: .9rem;
        padding-top: .8rem;
    }

    [data-pems-pan-canvas] {
        cursor: auto !important;
        touch-action: pan-x pan-y;
    }
}

@media print {
    body.pems-tournament-print-mode .pems-bracket-pan-label {
        display: none !important;
    }

    body.pems-tournament-print-mode .pems-round-robin-scroll {
        overflow: visible !important;
        padding: 0 !important;
    }

    body.pems-tournament-print-mode .pems-round-robin-canvas {
        border-color: #cbd5e1 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    body.pems-tournament-print-mode .pems-round-robin-round-title {
        color: #5c0000 !important;
    }
}

/* =====================================================================
   Phase 1T.5.6 — Softer tournament canvas, modal match operations,
   balanced spacing, gradient Round Robin standings and smooth panning
   ===================================================================== */

/* Give the tournament plot breathing room without widening the surrounding
   P-EMTS page.  The scroll viewport owns overflow; the canvas owns padding. */
.pems-bracket-section-head + .pems-bracket-scroll,
.pems-bracket-section-head + .pems-public-bracket-scroll {
    padding: 1rem 1rem 1.05rem !important;
}

.pems-bracket-connectors-surface.pems-bracket-board,
.pems-bracket-connectors-surface.pems-double-elim-board,
.pems-bracket-connectors-surface.pems-public-double-elim-board,
.pems-bracket-connectors-surface.pems-public-double-elim-board.is-preview,
.pems-round-robin-canvas {
    border-color: rgba(92, 0, 0, .20) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(118, 0, 0, .18), transparent 31rem),
        linear-gradient(rgba(222, 186, 121, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(222, 186, 121, .035) 1px, transparent 1px),
        linear-gradient(180deg, #34292d 0%, #2a2225 52%, #241d20 100%) !important;
    background-size: auto, 28px 28px, 28px 28px, auto !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 16px 34px -30px rgba(54, 22, 27, .65) !important;
}

.pems-bracket-connectors-surface.pems-bracket-board,
.pems-bracket-connectors-surface.pems-double-elim-board,
.pems-bracket-connectors-surface.pems-public-double-elim-board {
    padding: 1.35rem !important;
}

.pems-round-robin-canvas {
    padding: 1.25rem !important;
}

/* Match cards use deliberate vertical rhythm. Participant slots no longer
   touch each other or the schedule / action region. */
.pems-bracket-slots {
    display: grid;
    gap: .55rem;
}

.pems-bracket-match > .pems-match-schedule-summary {
    margin-top: .72rem !important;
}

.pems-match-modal-trigger {
    display: flex;
    width: 100%;
    min-height: 2.55rem;
    margin-top: .72rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid rgba(118, 0, 0, .14);
    border-radius: .7rem;
    background: linear-gradient(180deg, #fffdfb 0%, #fff8f3 100%);
    padding: .6rem .72rem;
    color: #760000;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.pems-match-modal-trigger:hover {
    border-color: rgba(118, 0, 0, .30);
    background: #fff5ef;
}

.pems-match-modal-trigger:focus-visible {
    outline: 3px solid rgba(215, 170, 29, .25);
    outline-offset: 2px;
}

/* The Match Operations modal keeps the bracket card compact and stable while
   all schedule / series / result controls remain available in one place. */
.pems-match-operations-modal {
    isolation: isolate;
}

.pems-match-operations-modal .pems-modal-panel {
    --pems-modal-max: 48rem;
}

.pems-match-modal-section {
    border: 1px solid #eadfd9;
    border-radius: .9rem;
    background: linear-gradient(180deg, #fffdfb 0%, #fff 100%);
    padding: .9rem;
}

.pems-match-modal-section-title {
    color: #7a1717;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* The schedule editor is already inside a modal section, so its own shell can
   be quieter and avoid a card-inside-card appearance. */
.pems-match-modal-section > .rounded-xl.border.border-red-950\/10 {
    margin-top: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Round Robin standings replace the dark hard outline with a very thin
   maroon-to-gold gradient frame that matches the public portal palette. */
.pems-round-robin-standings-frame {
    border: 0 !important;
    border-radius: 1rem;
    background: linear-gradient(125deg, rgba(118,0,0,.22), rgba(215,170,29,.38), rgba(118,0,0,.12));
    padding: 1px;
    box-shadow: 0 10px 24px -24px rgba(92, 0, 0, .45);
}

.pems-round-robin-table {
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: calc(1rem - 1px);
    background: #fff;
}

.pems-round-robin-table-head,
.pems-round-robin-table thead {
    background: linear-gradient(100deg, #711111 0%, #861b1b 72%, #9b6416 100%) !important;
    color: #fff !important;
}

.pems-round-robin-table tbody tr {
    border-color: #efe7e3 !important;
}

.pems-round-robin-table tbody tr:nth-child(even) {
    background: #fffcfa;
}

/* Panning is paint-contained and updated by requestAnimationFrame in the
   renderer.  This reduces main-thread work during mouse drags. */
[data-pems-pan-canvas] {
    contain: paint;
}

[data-pems-pan-canvas].is-panning {
    scroll-snap-type: none !important;
}

@media (max-width: 767.98px) {
    .pems-bracket-section-head + .pems-bracket-scroll,
    .pems-bracket-section-head + .pems-public-bracket-scroll {
        padding: .8rem .75rem .85rem !important;
    }

    .pems-bracket-connectors-surface.pems-bracket-board,
    .pems-bracket-connectors-surface.pems-double-elim-board,
    .pems-bracket-connectors-surface.pems-public-double-elim-board,
    .pems-round-robin-canvas {
        padding: .95rem !important;
    }

    .pems-bracket-slots {
        gap: .48rem;
    }

    .pems-match-modal-trigger {
        min-height: 44px;
    }

    .pems-match-operations-modal .pems-modal-viewport {
        align-items: flex-end;
        padding: .5rem;
    }

    .pems-match-operations-modal .pems-modal-panel {
        width: 100% !important;
        max-height: 92dvh !important;
        border-radius: 1rem 1rem .8rem .8rem;
    }
}

@media print {
    body.pems-tournament-print-mode .pems-match-modal-root,
    body.pems-tournament-print-mode .pems-match-modal-trigger {
        display: none !important;
    }

    body.pems-tournament-print-mode .pems-bracket-connectors-surface.pems-bracket-board,
    body.pems-tournament-print-mode .pems-bracket-connectors-surface.pems-double-elim-board,
    body.pems-tournament-print-mode .pems-bracket-connectors-surface.pems-public-double-elim-board,
    body.pems-tournament-print-mode .pems-round-robin-canvas {
        background: #fff !important;
    }
}

/* =====================================================================
   Phase 1T.5.7 — Shared Match Operations modal + resolved-team gating
   + low-paint tournament panning
   ===================================================================== */

/* Match Operations now uses the same shared x-pems.modal shell as the rest of
   P-EMTS.  Only its inner content receives tournament-specific styling. */
.pems-match-operations-modal {
    min-width: 0;
}

.pems-match-participant-grid,
.pems-match-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.pems-match-participant-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .85rem;
    border: 1px solid #eadfd9;
    border-radius: .9rem;
    background: linear-gradient(135deg, #fffdfb 0%, #fff8f3 62%, #fffbea 100%);
    padding: .8rem;
}

.pems-match-participant-logo {
    width: 3.35rem;
    height: 3.35rem;
    flex: 0 0 3.35rem;
    border: 1px solid rgba(118, 0, 0, .14);
    border-radius: .8rem;
    background: #fff;
    object-fit: contain;
    padding: .3rem;
    box-shadow: 0 8px 18px -16px rgba(92, 0, 0, .55);
}

.pems-match-schedule-editor {
    min-width: 0;
}

/* A resolved match receives a distinct hover/focus treatment. Waiting matches
   remain visible but intentionally non-interactive. */
.pems-match-modal-trigger.is-available {
    cursor: pointer;
}

.pems-match-modal-trigger.is-available:hover {
    border-color: rgba(118, 0, 0, .42);
    background: linear-gradient(180deg, #fff9f3 0%, #fff0e6 100%);
    box-shadow: 0 8px 18px -16px rgba(92, 0, 0, .62);
    transform: translateY(-1px);
}

.pems-match-modal-trigger.is-disabled,
.pems-match-modal-trigger:disabled {
    cursor: not-allowed;
    border-color: rgba(100, 116, 139, .14);
    background: #f8f6f4;
    color: #9a918c;
    opacity: .78;
    transform: none !important;
    box-shadow: none !important;
}

/* Reduce expensive repaint work while the user drags the canvas or the native
   scrollbar. Connectors remain authoritative and return immediately once
   movement stops; they do not need to be recalculated for scrolling. */
.pems-bracket-scroll,
.pems-public-bracket-scroll,
.pems-round-robin-scroll,
[data-pems-pan-canvas] {
    contain: paint style;
    will-change: scroll-position;
}

[data-pems-pan-canvas] [data-pems-bracket-svg] {
    transition: opacity 70ms linear;
    pointer-events: none;
}

[data-pems-pan-canvas].is-panning [data-pems-bracket-svg],
[data-pems-pan-canvas].is-scroll-active [data-pems-bracket-svg] {
    opacity: 0;
}

[data-pems-pan-canvas].is-panning .pems-bracket-match,
[data-pems-pan-canvas].is-scroll-active .pems-bracket-match {
    box-shadow: 0 2px 8px rgba(43, 22, 24, .12) !important;
}

@media (max-width: 767.98px) {
    .pems-match-participant-grid,
    .pems-match-form-grid {
        grid-template-columns: 1fr;
    }

    .pems-match-participant-logo {
        width: 3rem;
        height: 3rem;
        flex-basis: 3rem;
    }
}

/* =====================================================================
   Phase 1T.5.8 — Match completion readiness, championship clarity,
   standings edge repair and interaction performance
   ===================================================================== */

/* Round Robin standings own one clean rounded white surface.  The gradient
   edge is exactly one pixel and horizontal overflow belongs to the inner
   viewport, preventing the oversized tinted strip seen at the right edge. */
.pems-round-robin-standings-frame {
    overflow: hidden !important;
    padding: 1px !important;
}

.pems-round-robin-standings-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: calc(1rem - 1px);
    background: #fff;
    overscroll-behavior-inline: contain;
}

.pems-round-robin-standings-scroll > table {
    width: 100% !important;
    margin: 0 !important;
}

/* Make the championship unmistakable without changing progression. */
.pems-bracket-round.is-championship-round {
    position: relative;
    border-left: 1px solid rgba(215, 170, 29, .34);
    padding-left: .8rem;
}

.pems-championship-zone-label {
    width: fit-content;
    margin: 0 0 .48rem auto;
    border: 1px solid rgba(215, 170, 29, .48);
    border-radius: 999px;
    background: rgba(255, 248, 226, .96);
    padding: .28rem .58rem;
    color: #7c4f08;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pems-bracket-round.is-championship-round .pems-bracket-match {
    border-color: rgba(215, 170, 29, .42) !important;
    box-shadow: 0 10px 24px -20px rgba(150, 97, 10, .6) !important;
}

/* Match Operations schedule is intentionally Start/End then Venue/Notes. */
.pems-match-schedule-editor .pems-match-form-grid {
    align-items: start;
}

.pems-match-schedule-editor textarea.pems-field {
    min-height: 4.25rem;
    resize: vertical;
}

/* Immediate visual feedback while Livewire opens the shared modal. */
.pems-match-modal-trigger.is-opening {
    pointer-events: none;
    border-color: rgba(215, 170, 29, .48) !important;
    background: linear-gradient(180deg, #fff8e9 0%, #fff2d7 100%) !important;
    color: #7c4f08 !important;
}

.pems-match-modal-trigger.is-opening > span:first-child {
    font-size: 0;
}

.pems-match-modal-trigger.is-opening > span:first-child::after {
    content: 'Opening Match…';
    font-size: .62rem;
}

.pems-match-modal-trigger.is-opening > span:last-child {
    animation: pems-match-open-pulse 700ms ease-in-out infinite alternate;
}

@keyframes pems-match-open-pulse {
    from { opacity: .35; }
    to { opacity: 1; }
}

.pems-match-complete-hint {
    max-width: 28rem;
}

[data-pems-match-complete]:disabled {
    cursor: not-allowed !important;
    filter: saturate(.35);
    opacity: .48 !important;
    box-shadow: none !important;
}

/* During active scrolling/panning, remove connector and hover/transition paint
   altogether.  Geometry is restored after movement settles. */
[data-pems-pan-canvas].is-panning [data-pems-bracket-svg],
[data-pems-pan-canvas].is-scroll-active [data-pems-bracket-svg] {
    visibility: hidden !important;
    opacity: 0 !important;
}

[data-pems-pan-canvas].is-panning .pems-bracket-match,
[data-pems-pan-canvas].is-scroll-active .pems-bracket-match,
[data-pems-pan-canvas].is-panning .pems-bracket-slot,
[data-pems-pan-canvas].is-scroll-active .pems-bracket-slot {
    transition: none !important;
}

[data-pems-pan-canvas].is-panning .pems-bracket-match:hover,
[data-pems-pan-canvas].is-scroll-active .pems-bracket-match:hover {
    transform: none !important;
}

@media (max-width: 767.98px) {
    .pems-bracket-round.is-championship-round {
        padding-left: .6rem;
    }

    .pems-championship-zone-label {
        margin-left: 0;
        margin-right: auto;
    }
}

@media print {
    .pems-championship-zone-label {
        border-color: #c8a14a !important;
        background: #fff !important;
        color: #5c0000 !important;
    }
}


/* =====================================================================
   Phase 1T.5.10 — Match modal first-click, standard tournament width,
   standardized tournament banner and report export actions
   ===================================================================== */

/* Tournament operations follows the same authenticated content width used by
   the major administration/reporting pages. The tournament canvas may still
   scroll locally, but the page shell itself remains the shared 1500px standard. */
.pems-tournament-workspace {
    width: min(100%, 1500px) !important;
    max-width: 1500px !important;
    margin-inline: auto !important;
}

/* Keep the Tournament banner on the exact compact P-EMTS banner rhythm used
   by Reports and other administration modules. */
.pems-tournament-hero.pems-page-banner-compact {
    position: relative;
    overflow: hidden;
}

.pems-tournament-hero.pems-page-banner-compact .pems-page-banner-geo {
    pointer-events: none;
}

.pems-tournament-hero.pems-page-banner-compact .pems-button-light {
    min-height: 2.35rem;
    justify-content: center;
    white-space: nowrap;
}

/* Direct browser dispatch opens Match Operations with one child-component
   request. The trigger keeps immediate local feedback while that request is
   in flight and is cleared by the modal's existing x-init once hydrated. */
.pems-match-modal-trigger.is-opening {
    cursor: progress;
}

/* Reports export actions use equal, stable geometry and the institutional
   primary/secondary button hierarchy instead of an isolated green button. */
.pems-report-export-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
}

.pems-report-export-button {
    min-width: 9.5rem;
    min-height: 2.45rem;
    justify-content: center;
    gap: .6rem;
    white-space: nowrap;
}

.pems-report-export-arrow {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .8rem;
    font-weight: 900;
    line-height: 1;
}

.pems-button-secondary.pems-report-export-button .pems-report-export-arrow {
    background: rgba(118, 0, 0, .07);
    color: #760000;
}

@media (max-width: 640px) {
    .pems-tournament-workspace {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pems-tournament-hero.pems-page-banner-compact .pems-button-light {
        width: 100%;
    }

    .pems-report-export-actions {
        width: 100%;
    }

    .pems-report-export-button {
        flex: 1 1 9rem;
        min-width: 0;
    }
}

/* Phase 1T.5.12 — Match first-tap feedback + explicit public bracket switch. */
.pems-match-opening-overlay {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(48, 18, 18, .28);
    backdrop-filter: blur(1.5px);
}

.pems-match-opening-card {
    display: flex;
    width: min(30rem, calc(100vw - 2rem));
    align-items: center;
    gap: .9rem;
    border: 1px solid rgba(118, 0, 0, .14);
    border-top: .3rem solid #760000;
    border-radius: 1rem;
    background: #fffdfc;
    padding: 1rem 1.1rem;
    box-shadow: 0 18px 45px rgba(66, 23, 23, .18);
}

.pems-match-opening-spinner {
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    border: 3px solid #ead8d1;
    border-top-color: #8a1717;
    border-radius: 999px;
    animation: pems-match-opening-spin .7s linear infinite;
}

.pems-match-opening-kicker {
    color: #b05d00;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pems-match-opening-title {
    margin-top: .18rem;
    color: #5c0000;
    font-family: var(--font-display, inherit);
    font-size: 1.08rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pems-match-opening-description {
    margin-top: .12rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 600;
}

@keyframes pems-match-opening-spin {
    to { transform: rotate(360deg); }
}

.pems-bracket-publication-bar {
    border-color: rgba(118, 0, 0, .09) !important;
}

.pems-bracket-publication-status {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .42rem .75rem;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pems-bracket-publication-status.is-private {
    border: 1px solid #d9dee5;
    background: #f8fafc;
    color: #64748b;
}

.pems-bracket-publication-status.is-published {
    border: 1px solid #b7dfca;
    background: #edf9f2;
    color: #18794e;
}

.pems-bracket-publication-toggle {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    gap: .55rem;
    border: 1px solid #d7c6bd;
    border-radius: .75rem;
    background: #fff;
    padding: .38rem .65rem;
    color: #5c0000;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.pems-bracket-publication-toggle:hover {
    border-color: #b98b77;
    background: #fffaf7;
}

.pems-bracket-publication-toggle-track {
    position: relative;
    width: 2.3rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .18s ease;
}

.pems-bracket-publication-toggle-knob {
    position: absolute;
    top: .16rem;
    left: .16rem;
    width: .93rem;
    height: .93rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
    transition: transform .18s ease;
}

.pems-bracket-publication-toggle.is-on .pems-bracket-publication-toggle-track {
    background: #18794e;
}

.pems-bracket-publication-toggle.is-on .pems-bracket-publication-toggle-knob {
    transform: translateX(1.02rem);
}

.pems-button-success.pems-report-export-button .pems-report-export-arrow {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .pems-match-opening-spinner {
        animation-duration: 1.4s;
    }

    .pems-bracket-publication-toggle-track,
    .pems-bracket-publication-toggle-knob {
        transition: none;
    }
}

/* Phase 1T.5.14 — schedule/result scope isolation + exact export-label centering. */
.pems-report-export-button {
    display: grid !important;
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem;
    align-items: center;
    column-gap: .45rem;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    text-align: center;
}

.pems-report-export-button::before {
    content: "";
    grid-column: 1;
    width: 1.25rem;
    height: 1.25rem;
}

.pems-report-export-button > span:first-child {
    grid-column: 2;
    display: block;
    min-width: 0;
    text-align: center;
}

.pems-report-export-button .pems-report-export-arrow {
    position: static !important;
    grid-column: 3;
    transform: none !important;
    margin: 0;
    justify-self: end;
}

/* =====================================================================
   Phase 1T.5.49 — Bracket fullscreen viewport & championship emphasis
   ===================================================================== */

/* Each tournament canvas now owns an anchored fullscreen control. The button
   sits inside the viewport so authorized and public users can maximize the
   bracket without leaving the page context. */
.pems-bracket-viewport {
    position: relative;
}

.pems-bracket-viewport > .pems-bracket-scroll,
.pems-bracket-viewport > .pems-public-bracket-scroll,
.pems-bracket-viewport > .pems-round-robin-scroll {
    margin-top: 0 !important;
}

.pems-bracket-fullscreen-toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.45rem;
    border: 1px solid rgba(215, 170, 29, .36);
    border-radius: 999px;
    background: rgba(255, 252, 247, .95);
    padding: .62rem .85rem;
    color: #6a1111;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 14px 28px -22px rgba(15, 23, 42, .78);
    backdrop-filter: blur(8px);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.pems-bracket-fullscreen-toggle:hover {
    border-color: rgba(118, 0, 0, .34);
    background: rgba(255, 248, 239, .98);
    box-shadow: 0 16px 30px -22px rgba(92, 0, 0, .42);
    transform: translateY(-1px);
}

.pems-bracket-fullscreen-toggle:focus-visible {
    outline: 3px solid rgba(215, 170, 29, .24);
    outline-offset: 2px;
}

.pems-bracket-fullscreen-toggle-icon {
    display: inline-grid;
    width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    border-radius: 999px;
    background: rgba(118, 0, 0, .08);
    font-size: .78rem;
    line-height: 1;
}

/* The losers lane is intentionally dropped further below the Championship
   column so the Grand Final reads as the clear endpoint of the winners path. */
.pems-double-elim-board .pems-double-elim-lane.is-losers {
    margin-top: clamp(4rem, 7vw, 5.75rem);
}

/* Native Fullscreen API and the manual fixed-position fallback share the same
   presentation rules so the canvas expands cleanly either way. */
.pems-bracket-viewport:fullscreen,
.pems-bracket-viewport.is-manual-fullscreen {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    max-width: none;
    padding: 1rem;
    background: linear-gradient(180deg, #0f1118 0%, #171923 100%);
    overflow: hidden;
    isolation: isolate;
}

.pems-bracket-viewport:fullscreen > .pems-bracket-scroll,
.pems-bracket-viewport:fullscreen > .pems-public-bracket-scroll,
.pems-bracket-viewport:fullscreen > .pems-round-robin-scroll,
.pems-bracket-viewport.is-manual-fullscreen > .pems-bracket-scroll,
.pems-bracket-viewport.is-manual-fullscreen > .pems-public-bracket-scroll,
.pems-bracket-viewport.is-manual-fullscreen > .pems-round-robin-scroll {
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    padding: 0 0 .85rem !important;
}

.pems-bracket-viewport:fullscreen .pems-bracket-fullscreen-toggle,
.pems-bracket-viewport.is-manual-fullscreen .pems-bracket-fullscreen-toggle {
    right: 1.25rem;
    bottom: 1.25rem;
}

body.pems-bracket-fullscreen-open {
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .pems-bracket-fullscreen-toggle {
        right: .75rem;
        bottom: .75rem;
        min-height: 2.25rem;
        padding: .56rem .72rem;
        gap: .45rem;
        font-size: .58rem;
    }

    .pems-double-elim-board .pems-double-elim-lane.is-losers {
        margin-top: 2.6rem;
    }

    .pems-bracket-viewport:fullscreen,
    .pems-bracket-viewport.is-manual-fullscreen {
        padding: .75rem;
    }
}

@media print {
    body.pems-tournament-print-mode .pems-bracket-fullscreen-toggle {
        display: none !important;
    }

    body.pems-tournament-print-mode .pems-double-elim-board .pems-double-elim-lane.is-losers {
        margin-top: 2.25rem !important;
    }
}

/* =====================================================================
   Phase 1T.5.50 — Full-bracket fit mode & losers-lane boundary repair
   ===================================================================== */

/* Losers rounds must stop before the dedicated Championship column. The
   percentage is computed from actual rendered tournament columns in Blade. */
.pems-double-elim-board .pems-double-elim-lane.is-losers {
    margin-top: 1.8rem;
}

.pems-double-elim-board .pems-double-elim-lane.is-losers .pems-double-elim-rounds {
    width: var(--pems-losers-lane-width, 100%);
    max-width: var(--pems-losers-lane-width, 100%);
    min-width: max-content;
    justify-content: space-between;
}

/* In fullscreen the bracket becomes an overview, not merely a larger scroll
   window. JS scales the natural tournament canvas to fit the complete board. */
.pems-bracket-viewport:fullscreen > [data-pems-pan-canvas],
.pems-bracket-viewport.is-manual-fullscreen > [data-pems-pan-canvas] {
    position: relative;
    overflow: hidden !important;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    cursor: default !important;
    touch-action: none;
    contain: layout paint style;
}

.pems-bracket-viewport:fullscreen [data-pems-bracket-connectors],
.pems-bracket-viewport.is-manual-fullscreen [data-pems-bracket-connectors],
.pems-bracket-viewport:fullscreen .pems-round-robin-canvas,
.pems-bracket-viewport.is-manual-fullscreen .pems-round-robin-canvas {
    position: absolute !important;
    top: 0;
    left: 0;
    margin: 0 !important;
    transform-origin: 0 0;
    will-change: transform;
}

.pems-bracket-viewport:fullscreen [data-pems-pan-canvas].is-pannable,
.pems-bracket-viewport.is-manual-fullscreen [data-pems-pan-canvas].is-pannable {
    cursor: default !important;
}

@media (max-width: 767.98px) {
    .pems-double-elim-board .pems-double-elim-lane.is-losers {
        margin-top: 1.35rem;
    }
}

@media print {
    body.pems-tournament-print-mode .pems-double-elim-board .pems-double-elim-lane.is-losers .pems-double-elim-rounds {
        width: var(--pems-losers-lane-width, 100%) !important;
        max-width: var(--pems-losers-lane-width, 100%) !important;
    }
}

/* Phase 1T.5.50 exact-column refinement: Losers rounds reuse the same total
   column grid as Winners + Championship, leaving the final column empty. */
.pems-double-elim-board .pems-double-elim-lane.is-losers .pems-double-elim-rounds {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(var(--pems-double-total-columns, var(--pems-double-round-count, 1)), minmax(250px, 292px));
}

@media (max-width: 767.98px) {
    .pems-double-elim-board .pems-double-elim-lane.is-losers .pems-double-elim-rounds {
        grid-template-columns: repeat(var(--pems-double-total-columns, var(--pems-double-round-count, 1)), minmax(224px, min(78vw, 268px)));
    }
}

/* Manual fallback must behave like a real fullscreen surface when the browser
   Fullscreen API is unavailable or denied. */
.pems-bracket-viewport.is-manual-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
}

/* =====================================================================
   Phase 1T.5.51 — Icon-only fullscreen control
   ===================================================================== */
.pems-bracket-fullscreen-toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    min-height: 0;
    border: 1px solid rgba(215, 170, 29, .38);
    border-radius: 999px;
    background: rgba(255, 252, 247, .97);
    padding: 0;
    color: #231f23;
    box-shadow: 0 14px 30px -22px rgba(15, 23, 42, .78);
    backdrop-filter: blur(8px);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
}

.pems-bracket-fullscreen-toggle:hover {
    border-color: rgba(118, 0, 0, .34);
    background: rgba(255, 248, 239, .99);
    box-shadow: 0 16px 30px -22px rgba(92, 0, 0, .42);
    transform: translateY(-1px);
}

.pems-bracket-fullscreen-toggle:focus-visible {
    outline: 3px solid rgba(215, 170, 29, .24);
    outline-offset: 2px;
}

.pems-bracket-fullscreen-glyph {
    position: relative;
    display: block;
    width: 1.6rem;
    height: 1.6rem;
}

.pems-bracket-fullscreen-corner {
    position: absolute;
    width: .68rem;
    height: .68rem;
    border-color: currentColor;
    border-style: solid;
    border-width: 0;
    border-radius: .17rem;
    transition: inset 180ms ease, border-color 150ms ease, transform 180ms ease;
}

.pems-bracket-fullscreen-corner.is-top-left {
    top: 0;
    left: 0;
    border-top-width: .18rem;
    border-left-width: .18rem;
}

.pems-bracket-fullscreen-corner.is-top-right {
    top: 0;
    right: 0;
    border-top-width: .18rem;
    border-right-width: .18rem;
}

.pems-bracket-fullscreen-corner.is-bottom-left {
    bottom: 0;
    left: 0;
    border-bottom-width: .18rem;
    border-left-width: .18rem;
}

.pems-bracket-fullscreen-corner.is-bottom-right {
    right: 0;
    bottom: 0;
    border-bottom-width: .18rem;
    border-right-width: .18rem;
}

.pems-bracket-fullscreen-toggle.is-active .pems-bracket-fullscreen-corner.is-top-left {
    top: .25rem;
    left: .25rem;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: .18rem;
    border-bottom-width: .18rem;
}

.pems-bracket-fullscreen-toggle.is-active .pems-bracket-fullscreen-corner.is-top-right {
    top: .25rem;
    right: .25rem;
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: .18rem;
    border-bottom-width: .18rem;
}

.pems-bracket-fullscreen-toggle.is-active .pems-bracket-fullscreen-corner.is-bottom-left {
    bottom: .25rem;
    left: .25rem;
    border-bottom-width: 0;
    border-left-width: 0;
    border-top-width: .18rem;
    border-right-width: .18rem;
}

.pems-bracket-fullscreen-toggle.is-active .pems-bracket-fullscreen-corner.is-bottom-right {
    bottom: .25rem;
    right: .25rem;
    border-bottom-width: 0;
    border-right-width: 0;
    border-top-width: .18rem;
    border-left-width: .18rem;
}

.pems-bracket-viewport:fullscreen .pems-bracket-fullscreen-toggle,
.pems-bracket-viewport.is-manual-fullscreen .pems-bracket-fullscreen-toggle {
    right: 1.25rem;
    bottom: 1.25rem;
}

@media (max-width: 767.98px) {
    .pems-bracket-fullscreen-toggle {
        right: .75rem;
        bottom: .75rem;
        width: 2.8rem;
        height: 2.8rem;
    }

    .pems-bracket-fullscreen-glyph {
        width: 1.45rem;
        height: 1.45rem;
    }

    .pems-bracket-fullscreen-corner {
        width: .62rem;
        height: .62rem;
    }
}

@media print {
    body.pems-tournament-print-mode .pems-bracket-fullscreen-toggle {
        display: none !important;
    }
}

/* =====================================================================
   Phase 1T.5.52 — Correct fullscreen expand/collapse icon states
   ===================================================================== */
.pems-bracket-fullscreen-toggle .pems-bracket-fullscreen-glyph,
.pems-bracket-fullscreen-toggle .pems-bracket-fullscreen-corner {
    display: none !important;
}

.pems-bracket-fullscreen-icon {
    width: 1.7rem;
    height: 1.7rem;
    display: block;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.pems-bracket-fullscreen-icon.is-collapse {
    display: none;
}

.pems-bracket-fullscreen-toggle.is-active .pems-bracket-fullscreen-icon.is-expand {
    display: none;
}

.pems-bracket-fullscreen-toggle.is-active .pems-bracket-fullscreen-icon.is-collapse {
    display: block;
}

@media (max-width: 767.98px) {
    .pems-bracket-fullscreen-icon {
        width: 1.55rem;
        height: 1.55rem;
    }
}

/* =====================================================================
   Phase 1T.5.53 — Fullscreen transition animation + verifier reconciliation
   ===================================================================== */
.pems-bracket-viewport.is-fullscreen-arriving > [data-pems-pan-canvas] {
    animation: pems-bracket-fullscreen-arrive 230ms cubic-bezier(.2, .75, .22, 1) both;
    transform-origin: 50% 50%;
}

.pems-bracket-viewport.is-fullscreen-leaving > [data-pems-pan-canvas] {
    animation: pems-bracket-fullscreen-leave 190ms cubic-bezier(.55, .04, .82, .35) both;
    transform-origin: 50% 50%;
}

.pems-bracket-viewport.is-fullscreen-returning > [data-pems-pan-canvas] {
    animation: pems-bracket-fullscreen-return 220ms cubic-bezier(.2, .75, .22, 1) both;
    transform-origin: 50% 50%;
}

.pems-bracket-viewport.is-fullscreen-arriving .pems-bracket-fullscreen-toggle,
.pems-bracket-viewport.is-fullscreen-returning .pems-bracket-fullscreen-toggle {
    animation: pems-bracket-fullscreen-button-pop 220ms cubic-bezier(.2, .8, .25, 1) both;
}

.pems-bracket-viewport.is-fullscreen-leaving .pems-bracket-fullscreen-toggle {
    pointer-events: none;
}

@keyframes pems-bracket-fullscreen-arrive {
    from {
        opacity: .28;
        transform: scale(.978);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pems-bracket-fullscreen-leave {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: .18;
        transform: scale(.982);
    }
}

@keyframes pems-bracket-fullscreen-return {
    from {
        opacity: .45;
        transform: scale(.99);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pems-bracket-fullscreen-button-pop {
    0% {
        opacity: .45;
        transform: scale(.86);
    }
    70% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pems-bracket-viewport.is-fullscreen-arriving > [data-pems-pan-canvas],
    .pems-bracket-viewport.is-fullscreen-leaving > [data-pems-pan-canvas],
    .pems-bracket-viewport.is-fullscreen-returning > [data-pems-pan-canvas],
    .pems-bracket-viewport.is-fullscreen-arriving .pems-bracket-fullscreen-toggle,
    .pems-bracket-viewport.is-fullscreen-returning .pems-bracket-fullscreen-toggle {
        animation: none !important;
    }
}

/* =====================================================================
   Phase 1T.5.54 — Lightweight fullscreen transitions + canvas print action
   ===================================================================== */

/* Keep the controls grouped in the lower-right corner. Both actions are
   icon-only and intentionally remain outside the scaled bracket surface. */
.pems-bracket-canvas-actions {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.pems-bracket-canvas-actions .pems-bracket-fullscreen-toggle,
.pems-bracket-canvas-action {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-flex;
    width: 3.1rem;
    height: 3.1rem;
    min-height: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(215, 170, 29, .38);
    border-radius: 999px;
    background: rgba(255, 252, 247, .97);
    padding: 0;
    color: #231f23;
    box-shadow: 0 14px 30px -22px rgba(15, 23, 42, .78);
    backdrop-filter: blur(8px);
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.pems-bracket-canvas-action:hover,
.pems-bracket-canvas-actions .pems-bracket-fullscreen-toggle:hover {
    border-color: rgba(118, 0, 0, .34);
    background: rgba(255, 248, 239, .99);
    box-shadow: 0 16px 30px -22px rgba(92, 0, 0, .42);
    transform: translateY(-1px);
}

.pems-bracket-canvas-action:focus-visible,
.pems-bracket-canvas-actions .pems-bracket-fullscreen-toggle:focus-visible {
    outline: 3px solid rgba(215, 170, 29, .24);
    outline-offset: 2px;
}

.pems-bracket-canvas-action svg,
.pems-bracket-canvas-actions .pems-bracket-fullscreen-icon {
    width: 1.62rem;
    height: 1.62rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Phase 1T.5.53 animated the complete bracket viewport. That forced the browser
   to composite a very large surface and caused visible stutter. 1T.5.54 keeps
   the bracket geometry static and animates only a cheap veil layer. */
.pems-bracket-viewport.is-fullscreen-arriving > [data-pems-pan-canvas],
.pems-bracket-viewport.is-fullscreen-leaving > [data-pems-pan-canvas],
.pems-bracket-viewport.is-fullscreen-returning > [data-pems-pan-canvas],
.pems-bracket-viewport.is-fullscreen-arriving .pems-bracket-fullscreen-toggle,
.pems-bracket-viewport.is-fullscreen-returning .pems-bracket-fullscreen-toggle {
    animation: none !important;
}

.pems-bracket-viewport.is-fullscreen-arriving::after,
.pems-bracket-viewport.is-fullscreen-leaving::after,
.pems-bracket-viewport.is-fullscreen-returning::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background: #0f1118;
    will-change: opacity;
}

.pems-bracket-viewport.is-fullscreen-arriving::after {
    animation: pems-bracket-veil-in 110ms ease-out both;
}

.pems-bracket-viewport.is-fullscreen-leaving::after {
    animation: pems-bracket-veil-out 90ms ease-in both;
}

.pems-bracket-viewport.is-fullscreen-returning::after {
    animation: pems-bracket-veil-return 110ms ease-out both;
}

@keyframes pems-bracket-veil-in {
    from { opacity: .28; }
    to { opacity: 0; }
}

@keyframes pems-bracket-veil-out {
    from { opacity: 0; }
    to { opacity: .22; }
}

@keyframes pems-bracket-veil-return {
    from { opacity: .18; }
    to { opacity: 0; }
}

.pems-bracket-viewport:fullscreen .pems-bracket-canvas-actions,
.pems-bracket-viewport.is-manual-fullscreen .pems-bracket-canvas-actions {
    right: 1.25rem;
    bottom: 1.25rem;
}

@media (max-width: 767.98px) {
    .pems-bracket-canvas-actions {
        right: .75rem;
        bottom: .75rem;
        gap: .45rem;
    }

    .pems-bracket-canvas-actions .pems-bracket-fullscreen-toggle,
    .pems-bracket-canvas-action {
        width: 2.8rem;
        height: 2.8rem;
    }

    .pems-bracket-canvas-action svg,
    .pems-bracket-canvas-actions .pems-bracket-fullscreen-icon {
        width: 1.48rem;
        height: 1.48rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pems-bracket-viewport.is-fullscreen-arriving::after,
    .pems-bracket-viewport.is-fullscreen-leaving::after,
    .pems-bracket-viewport.is-fullscreen-returning::after {
        animation: none !important;
        display: none !important;
    }
}

@media print {
    /* Canvas-only print mode hides the application shell while preserving the
       selected viewport at the top-left of a landscape sheet. */
    body.pems-canvas-print-mode * {
        visibility: hidden !important;
    }

    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target,
    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target * {
        visibility: visible !important;
    }

    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: visible !important;
    }

    body.pems-canvas-print-mode .pems-bracket-canvas-actions {
        display: none !important;
    }

    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target > [data-pems-pan-canvas] {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        contain: none !important;
    }

    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target [data-pems-bracket-connectors] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: var(--pems-print-natural-width, 100%) !important;
        min-width: var(--pems-print-natural-width, 100%) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: none !important;
        zoom: var(--pems-print-scale, 1);
        border-color: #cbd5e1 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #111827 !important;
    }

    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-bracket-match {
        box-shadow: none !important;
    }

    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-bracket-connectors {
        overflow: visible !important;
    }
}

@media print {
    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-round-robin-canvas {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: var(--pems-print-natural-width, 100%) !important;
        min-width: var(--pems-print-natural-width, 100%) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: none !important;
        zoom: var(--pems-print-scale, 1);
        border-color: #cbd5e1 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #111827 !important;
    }
}

/* =====================================================================
   Phase 1T.5.55 — Uniform Double-Elimination card grid + print parity
   ===================================================================== */

/* Phase 1T.5.3 introduced a higher-specificity workspace rule using 1fr
   columns. That rule could stretch the Winners lane while the newer Losers
   lane stayed fixed-width. Make both lanes share one authoritative total-column
   grid so Winners, Losers and Championship cards always use the same width. */
.pems-double-elim-board .pems-double-elim-lane .pems-double-elim-rounds {
    box-sizing: border-box;
    grid-template-columns: repeat(
        var(--pems-double-total-columns, var(--pems-double-round-count, 1)),
        minmax(250px, 292px)
    ) !important;
    grid-auto-flow: row !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: max-content !important;
    max-width: none !important;
}

.pems-double-elim-board .pems-double-elim-lane .pems-bracket-round {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 292px;
}

.pems-double-elim-board .pems-double-elim-lane .pems-bracket-round-title,
.pems-double-elim-board .pems-double-elim-lane .pems-bracket-match {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 292px;
}

/* Canvas print preflight is active before window.print(), so normalize the
   geometry here (outside @media print) before JS measures the natural board.
   This keeps both lane widths identical in the print preview. */
body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-double-elim-board .pems-double-elim-lane .pems-double-elim-rounds,
body.pems-tournament-print-mode .pems-double-elim-board .pems-double-elim-lane .pems-double-elim-rounds {
    grid-template-columns: repeat(
        var(--pems-double-total-columns, var(--pems-double-round-count, 1)),
        292px
    ) !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: max-content !important;
}

body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-double-elim-board .pems-bracket-round,
body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-double-elim-board .pems-bracket-round-title,
body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-double-elim-board .pems-bracket-match,
body.pems-tournament-print-mode .pems-double-elim-board .pems-bracket-round,
body.pems-tournament-print-mode .pems-double-elim-board .pems-bracket-round-title,
body.pems-tournament-print-mode .pems-double-elim-board .pems-bracket-match {
    box-sizing: border-box !important;
    width: 292px !important;
    min-width: 292px !important;
    max-width: 292px !important;
}

@media (max-width: 767.98px) {
    .pems-double-elim-board .pems-double-elim-lane .pems-double-elim-rounds {
        grid-template-columns: repeat(
            var(--pems-double-total-columns, var(--pems-double-round-count, 1)),
            minmax(224px, min(78vw, 268px))
        ) !important;
        justify-content: start !important;
    }

    .pems-double-elim-board .pems-double-elim-lane .pems-bracket-round,
    .pems-double-elim-board .pems-double-elim-lane .pems-bracket-round-title,
    .pems-double-elim-board .pems-double-elim-lane .pems-bracket-match {
        max-width: min(78vw, 268px);
    }
}

@media print {
    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-double-elim-board .pems-double-elim-lane .pems-double-elim-rounds,
    body.pems-tournament-print-mode .pems-double-elim-board .pems-double-elim-lane .pems-double-elim-rounds {
        grid-template-columns: repeat(
            var(--pems-double-total-columns, var(--pems-double-round-count, 1)),
            292px
        ) !important;
    }

    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-double-elim-board .pems-bracket-round,
    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-double-elim-board .pems-bracket-round-title,
    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target .pems-double-elim-board .pems-bracket-match,
    body.pems-tournament-print-mode .pems-double-elim-board .pems-bracket-round,
    body.pems-tournament-print-mode .pems-double-elim-board .pems-bracket-round-title,
    body.pems-tournament-print-mode .pems-double-elim-board .pems-bracket-match {
        width: 292px !important;
        min-width: 292px !important;
        max-width: 292px !important;
    }
}


/* Phase 1T.5.55 - Uniform Double-Elimination card grid + print parity */
/* =====================================================================
   Phase 1T.5.72 - Bracket left-edge alignment
   ===================================================================== */
/* Keep the established vertical breathing room, but align the first bracket
   lane with the surrounding section content instead of double-indenting it. */
.pems-bracket-connectors-surface.pems-bracket-board,
.pems-bracket-connectors-surface.pems-double-elim-board,
.pems-bracket-connectors-surface.pems-public-double-elim-board,
.pems-bracket-connectors-surface.pems-public-double-elim-board.is-preview {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
/* =====================================================================
   Phase 1T.5.74 - True symmetric bracket scroll-shell gutters
   ===================================================================== */
/* Use external margins on the horizontal scroll element instead of internal
   scroll padding. This makes the left and right white gutters deterministic
   in Chromium and also insets the horizontal scrollbar equally at both ends. */
.pems-bracket-viewport > .pems-bracket-scroll,
.pems-bracket-viewport > .pems-public-bracket-scroll {
    box-sizing: border-box !important;
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The dark board fills the inset scroll shell. Its own Phase 1T.5.72 internal
   1rem canvas padding still controls card/header alignment inside the board. */
.pems-bracket-viewport > .pems-bracket-scroll > .pems-bracket-connectors-surface,
.pems-bracket-viewport > .pems-public-bracket-scroll > .pems-bracket-connectors-surface {
    min-width: 100% !important;
}

/* Fullscreen must use the entire viewport instead of carrying normal-page
   gutters into fit-to-view mode. */
.pems-bracket-viewport:fullscreen > .pems-bracket-scroll,
.pems-bracket-viewport:fullscreen > .pems-public-bracket-scroll,
.pems-bracket-viewport.is-manual-fullscreen > .pems-bracket-scroll,
.pems-bracket-viewport.is-manual-fullscreen > .pems-public-bracket-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media print {
    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target > .pems-bracket-scroll,
    body.pems-canvas-print-mode .pems-bracket-viewport.is-print-target > .pems-public-bracket-scroll,
    body.pems-tournament-print-mode .pems-bracket-viewport > .pems-bracket-scroll,
    body.pems-tournament-print-mode .pems-bracket-viewport > .pems-public-bracket-scroll {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* =====================================================================
   Phase 1T.5.75 - RR-DE Stage 2 gutter parity and workspace preview
   ===================================================================== */
/* Chromium's stable scrollbar gutter reserves inline-end space even though
   these bracket viewports only need a horizontal scrollbar. That extra
   reservation made the public Round Robin -> Double Elimination Stage 2
   preview appear wider on the right than on the left. Keep the Phase 1T.5.74
   external 1rem shell gutters, but do not reserve an extra inline-end gutter. */
.pems-bracket-viewport > .pems-bracket-scroll,
.pems-bracket-viewport > .pems-public-bracket-scroll {
    scrollbar-gutter: auto !important;
}

/* Keep both the public Stage 2 placeholder and the authenticated Facilitator
   Stage 2 template on the same dark-canvas geometry as a generated bracket. */
.pems-bracket-connectors-surface.pems-double-elim-board.is-preview,
.pems-bracket-connectors-surface.pems-workspace-stage2-preview {
    box-sizing: border-box !important;
}