/* Design tokens shared with the team pages (W2, 11/2026) — same values as before. */
    :root {
        --fs-text: #1f2937;
        --fs-text-2: #475569;
        --fs-muted: #64748b;
        --fs-faint: #94a3b8;
        --fs-line-strong: #cbd5e1;
        --fs-border-soft: #e2e8f0;
        --fs-border: #e6eaf0;
        --fs-line: #edf2f7;
        --fs-surface-soft: #f8fafc;
    }

    .official-page {
        color: var(--fs-text);
    }

    .official-page .btn:not(.btn-link) {
        border-radius: 999px;
        font-weight: 600;
        letter-spacing: 0;
    }

    .official-page .btn-sm:not(.btn-link) {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .official-page .btn-primary {
        background-color: #5da2d5;
        border-color: #5da2d5;
        color: #ffffff;
    }

    .official-page .btn-primary:hover,
    .official-page .btn-primary:focus {
        background-color: #438fc4;
        border-color: #438fc4;
        color: #ffffff;
    }

    .official-page .btn-outline-primary {
        border-color: #5da2d5;
        color: #2f7fb8;
    }

    .official-page .btn-outline-primary:hover,
    .official-page .btn-outline-primary:focus {
        background-color: #5da2d5;
        border-color: #5da2d5;
        color: #ffffff;
    }

    .official-page .btn-info {
        background-color: #5da2d5;
        border-color: #5da2d5;
        color: #ffffff;
    }

    .official-page .btn-info:hover,
    .official-page .btn-info:focus {
        background-color: #438fc4;
        border-color: #438fc4;
        color: #ffffff;
    }

    .official-page .btn-raised-info,
    .official-page .btn-raised-primary {
        background-color: #5da2d5;
        border-color: #5da2d5;
        border-radius: 999px;
        color: #ffffff;
        font-weight: 600;
    }

    .official-page .btn-raised-info:hover,
    .official-page .btn-raised-info:focus,
    .official-page .btn-raised-primary:hover,
    .official-page .btn-raised-primary:focus {
        background-color: #438fc4;
        border-color: #438fc4;
        color: #ffffff;
    }

    .official-page .btn-success {
        background-color: #46ad4f;
        border-color: #46ad4f;
        color: #ffffff;
    }

    .official-page .btn-success:hover,
    .official-page .btn-success:focus {
        background-color: #338f3c;
        border-color: #338f3c;
        color: #ffffff;
    }

    .official-page .btn-outline-success {
        border-color: #46ad4f;
        color: #166534;
    }

    .official-page .btn-outline-success:hover,
    .official-page .btn-outline-success:focus {
        background-color: #46ad4f;
        border-color: #46ad4f;
        color: #ffffff;
    }

    .official-page .btn-danger {
        background-color: #ff3b30;
        border-color: #ff3b30;
        color: #ffffff;
    }

    .official-page .btn-danger:hover,
    .official-page .btn-danger:focus {
        background-color: #dc2626;
        border-color: #dc2626;
        color: #ffffff;
    }

    .official-page .btn-outline-danger {
        border-color: #ff3b30;
        color: #ff3b30;
    }

    .official-page .btn-outline-danger:hover,
    .official-page .btn-outline-danger:focus {
        background-color: #ff3b30;
        border-color: #ff3b30;
        color: #ffffff;
    }

    .official-page .btn-warning {
        background-color: #ffd166;
        border-color: #ffd166;
        color: #7c4a03;
    }

    .official-page .btn-warning:hover,
    .official-page .btn-warning:focus {
        background-color: #f8bd39;
        border-color: #f8bd39;
        color: #7c4a03;
    }

    .official-page .btn-secondary {
        background-color: #eef2f7;
        border-color: #eef2f7;
        color: var(--fs-text-2);
    }

    .official-page .btn-secondary:hover,
    .official-page .btn-secondary:focus {
        background-color: #dbe3ed;
        border-color: #dbe3ed;
        color: #334155;
    }

    .official-hero,
    .official-panel {
        background: #ffffff;
        border: 1px solid var(--fs-border);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
        margin-bottom: 1rem;
    }

    .official-page .card {
        background: #ffffff;
        border: 1px solid var(--fs-border);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
        margin-bottom: 1rem;
    }

    .official-page .card-header {
        align-items: center;
        background: transparent;
        border-bottom: 1px solid var(--fs-line);
        color: var(--fs-text);
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 1rem 1.1rem 0.85rem;
    }

    .official-page .card-header h4,
    .official-page .card-header h5,
    .official-page .card-title {
        color: var(--fs-text);
        font-size: 0.98rem;
        font-weight: 700;
        letter-spacing: 0;
        margin-bottom: 0;
    }

    .official-page .card-body {
        padding: 1rem 1.1rem;
    }

    .official-page .card .card {
        box-shadow: none;
    }

    .official-hero {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 1.1rem 1.25rem;
    }

    .official-eyebrow {
        color: var(--fs-muted);
        display: block;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        margin-bottom: 0.35rem;
        text-transform: uppercase;
    }

    .official-title {
        color: var(--fs-text);
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.2;
        margin-bottom: 0.25rem;
    }

    .official-subtitle,
    .official-caption,
    .official-muted {
        color: var(--fs-muted);
        font-size: 0.88rem;
        margin-bottom: 0;
    }

    .official-panel-body {
        padding: 1rem 1.1rem;
    }

    .official-panel-heading {
        align-items: flex-start;
        border-bottom: 1px solid var(--fs-line);
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        margin-bottom: 0.85rem;
        padding-bottom: 0.75rem;
    }

    .official-panel-title {
        color: var(--fs-text);
        font-size: 0.98rem;
        font-weight: 700;
        margin-bottom: 0.15rem;
    }

    /* A drawn status mark — the ✔ / ✘ / ⚠ / ↻ characters looked hand-drawn in
       Nunito (SES review, 10/2026). Filled: green ok, red failed, amber check it,
       blue sent back, grey AI error; a grey ring is pending; a short bar is
       "nothing to check". */
    .official-mark {
        border: 2px solid var(--fs-line-strong);
        border-radius: 50%;
        box-sizing: border-box;
        display: inline-block;
        flex-shrink: 0;
        height: 0.62rem;
        vertical-align: middle;
        width: 0.62rem;
    }

    .official-mark.is-ok { background: #16a34a; border-color: #16a34a; }
    .official-mark.is-fail { background: #dc2626; border-color: #dc2626; }
    .official-mark.is-warn { background: #f59e0b; border-color: #f59e0b; }
    .official-mark.is-back { background: #3b82f6; border-color: #3b82f6; }
    .official-mark.is-error { background: var(--fs-faint); border-color: var(--fs-faint); }
    .official-mark.is-none { border: 0; border-radius: 1px; background: var(--fs-line-strong); height: 2px; width: 0.62rem; }

    .official-pill {
        align-items: center;
        align-self: flex-start;
        border-radius: 999px;
        display: inline-flex;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1;
        padding: 0.45rem 0.7rem;
        white-space: nowrap;
    }

    .official-pill.is-info {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .official-pill.is-success {
        background: #dcfce7;
        color: #166534;
    }

    .official-pill.is-warning {
        background: #fef3c7;
        color: #92400e;
    }

    .official-pill.is-danger {
        background: #fee2e2;
        color: #b91c1c;
    }

    .official-pill.is-muted {
        background: var(--fs-line);
        color: var(--fs-muted);
    }

    .official-page .badge {
        border-radius: 999px;
        font-weight: 700;
        letter-spacing: 0;
        padding: 0.45rem 0.7rem;
    }

    .official-page .badge-primary,
    .official-page .badge-info {
        background-color: #dbeafe;
        color: #1d4ed8;
    }

    .official-page .badge-success {
        background-color: #dcfce7;
        color: #166534;
    }

    .official-page .badge-warning {
        background-color: #fef3c7;
        color: #92400e;
    }

    .official-page .badge-danger {
        background-color: #fee2e2;
        color: #b91c1c;
    }

    .official-page .badge-secondary,
    .official-page .badge-dark {
        background-color: var(--fs-line);
        color: var(--fs-muted);
    }

    .official-settings-grid {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .official-info-box {
        background: var(--fs-surface-soft);
        border: 1px solid var(--fs-line);
        border-radius: 8px;
        min-height: 100%;
        padding: 0.85rem;
    }

    /*
     * Read-only label/value cards that wrap by available width instead of a
     * fixed column count — used where the number of fields varies (the shared
     * "check your details" block shows 3 or 4 of them).
     */
    .official-detail-grid {
        display: grid;
        gap: 0.85rem;
        /* Capped rather than 1fr: these hold a name or a date, so on a wide
           monitor they would otherwise stretch to several hundred pixels each. */
        grid-template-columns: repeat(auto-fit, minmax(15rem, 22rem));
        justify-content: start;
    }

    /*
     * A panel heading with nothing under it (a collapsed section) must not leave
     * a dangling divider and an empty strip.
     */
    .official-panel-heading.is-flush {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /*
     * Horizontal progress stepper: where a submission currently stands.
     * `is-done` = behind us, `is-current` = what happens next.
     */
    .official-steps {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .official-step {
        align-items: center;
        display: flex;
        flex: 1 1 10rem;
        gap: 0.5rem;
        min-width: 10rem;
    }

    .official-step-dot {
        align-items: center;
        background: var(--fs-line);
        border-radius: 999px;
        color: var(--fs-faint);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 0.72rem;
        font-weight: 800;
        height: 1.55rem;
        justify-content: center;
        width: 1.55rem;
    }

    .official-step-label {
        color: var(--fs-faint);
        font-size: 0.82rem;
        font-weight: 600;
    }

    .official-step:not(:last-child)::after {
        background: var(--fs-line);
        content: '';
        flex: 1 1 1rem;
        height: 2px;
        margin: 0 0.5rem;
        min-width: 1rem;
    }

    .official-step.is-done .official-step-dot {
        background: #38a169;
        color: #ffffff;
    }

    .official-step.is-done .official-step-label {
        color: var(--fs-text);
    }

    .official-step.is-done::after {
        background: #38a169;
    }

    .official-step.is-current .official-step-dot {
        background: #5da2d5;
        color: #ffffff;
    }

    .official-step.is-current .official-step-label {
        color: var(--fs-text);
        font-weight: 700;
    }

    /* Receipt scans: a thumbnail small enough to scan a list, big enough to
       tell a fuel receipt from a hotel bill. */
    .official-thumb {
        background: var(--fs-surface-soft);
        border: 1px solid var(--fs-line);
        border-radius: 6px;
        display: block;
        height: 64px;
        object-fit: cover;
        width: 64px;
    }

    /*
     * One receipt as a row of content — thumbnail, what it is, what the AI made
     * of it. A list of these reads far better inside a detail modal than a
     * table nested in the table you opened it from.
     */
    .official-receipt-row {
        align-items: center;
        border: 1px solid var(--fs-line);
        border-radius: 8px;
        display: flex;
        gap: 0.85rem;
        margin-bottom: 0.5rem;
        padding: 0.6rem 0.75rem;
    }

    .official-receipt-main {
        flex: 1 1 12rem;
        min-width: 0;
    }

    .official-receipt-ai {
        flex: 0 1 16rem;
        text-align: right;
    }

    @media (max-width: 575.98px) {
        .official-receipt-row {
            align-items: flex-start;
            flex-direction: column;
        }

        .official-receipt-ai {
            text-align: left;
        }
    }

    /* The thumbnail is the trigger that opens the scan in the viewer modal. */
    .official-thumb-button {
        background: none;
        border: 0;
        border-radius: 6px;
        display: block;
        padding: 0;
    }

    .official-thumb-button:hover .official-thumb,
    .official-thumb-button:focus .official-thumb {
        border-color: #5da2d5;
        box-shadow: 0 0 0 2px rgba(93, 162, 213, 0.25);
        outline: none;
    }

    .official-viewer.is-tall {
        height: 32rem;
    }

    /* Livewire-state modals: tall content scrolls inside the body while the
       header and footer stay pinned. The bundled Bootstrap build predates
       modal-dialog-scrollable, so this recreates it. */
    .official-page .modal {
        overflow-y: auto;
    }

    .official-page .modal-content {
        max-height: calc(100vh - 3.5rem);
    }

    .official-page .modal-body {
        overflow-y: auto;
    }

    .official-thumb.is-file {
        align-items: center;
        color: var(--fs-muted);
        display: inline-flex;
        flex-direction: column;
        font-size: 0.62rem;
        font-weight: 800;
        justify-content: center;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .official-upload-preview {
        border: 1px solid var(--fs-line);
        border-radius: 8px;
        display: block;
        max-height: 220px;
        max-width: 100%;
    }

    /*
     * Zoom/pan viewer for an uploaded scan. Phone photos of receipts are often
     * sideways and the total is in small print, so the toolbar also rotates.
     */
    .official-viewer {
        align-items: center;
        background: var(--fs-surface-soft);
        border: 1px solid var(--fs-line);
        border-radius: 8px;
        display: flex;
        height: 24rem;
        justify-content: center;
        overflow: hidden;
        position: relative;
        touch-action: none;
    }

    .official-viewer img {
        cursor: grab;
        max-height: 100%;
        max-width: 100%;
        transform-origin: center center;
        transition: transform 0.08s linear;
        user-select: none;
        will-change: transform;
    }

    .official-viewer.is-dragging img {
        cursor: grabbing;
        transition: none;
    }

    .official-viewer-empty {
        color: var(--fs-faint);
        font-size: 0.86rem;
        padding: 1rem;
        text-align: center;
    }

    .official-viewer-toolbar {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.5rem;
    }

    /*
     * Round icon buttons rather than a .btn-group: the page turns every button
     * into a pill, and pills butted together read as overlapping lozenges.
     */
    .official-viewer-btn {
        align-items: center;
        background: #ffffff;
        border: 1px solid var(--fs-border-soft);
        border-radius: 999px;
        color: var(--fs-muted);
        display: inline-flex;
        height: 2rem;
        justify-content: center;
        padding: 0;
        transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
        width: 2rem;
    }

    .official-viewer-btn:hover,
    .official-viewer-btn:focus {
        background: #f1f5f9;
        border-color: var(--fs-line-strong);
        color: var(--fs-text);
        outline: none;
    }

    .official-viewer-btn svg {
        height: 1rem;
        width: 1rem;
    }

    .official-viewer-btn.is-text {
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 600;
        padding: 0 0.8rem;
        width: auto;
    }

    .official-viewer-zoom {
        color: var(--fs-muted);
        font-size: 0.78rem;
        font-variant-numeric: tabular-nums;
        margin-left: auto;
    }

    .official-viewer-hint {
        color: var(--fs-faint);
        font-size: 0.76rem;
    }

    .official-info-box-title {
        color: var(--fs-text);
        font-size: 0.88rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .official-field-grid {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
    }

    .official-form-grid {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .official-form-grid.is-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .official-form-grid.is-four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .official-stat-grid {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .official-split-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
    }

    /* Column layouts that views used to set inline (11/2026) — an inline
       grid-template-columns beats the phone rule below, so those forms and tile
       rows stayed side by side on a 390 px screen. */
    .official-form-grid.is-aside,
    .official-split-grid.is-aside {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .official-form-grid.is-five,
    .official-stat-grid.is-five {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .official-stat-grid.is-six {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .official-stack {
        display: grid;
        gap: 1rem;
    }

    .official-category-grid {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .official-category-button {
        align-items: center;
        background: var(--fs-surface-soft);
        border: 1px solid #dbe3ed;
        border-radius: 8px;
        color: var(--fs-text);
        display: flex;
        font-weight: 700;
        justify-content: space-between;
        min-height: 3.25rem;
        padding: 0.85rem 1rem;
        text-align: left;
        width: 100%;
    }

    .official-category-button:hover,
    .official-category-button:focus {
        background: #f8fbff;
        border-color: #93c5fd;
        outline: none;
    }

    .official-content-box {
        background: var(--fs-surface-soft);
        border: 1px solid var(--fs-line);
        border-radius: 8px;
        padding: 0.85rem;
    }

    .official-content-box.is-empty {
        align-items: center;
        color: var(--fs-muted);
        display: flex;
        justify-content: center;
        min-height: 5.5rem;
        text-align: center;
    }

    .official-section-divider {
        border-top: 1px solid var(--fs-line);
        margin-top: 0.85rem;
        padding-top: 0.85rem;
    }

    .official-page label {
        color: var(--fs-muted);
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        margin-bottom: 0.35rem;
        text-transform: uppercase;
    }

    /* Checkbox / radio captions are sentences, not field labels — they must not
       inherit the uppercase treatment above. `.custom-control-label` is the
       Bootstrap 4 equivalent of `.form-check-label`. */
    .official-page .form-check-label,
    .official-page .custom-control-label {
        color: var(--fs-text);
        font-size: 0.86rem;
        font-weight: 600;
        letter-spacing: 0;
        margin-bottom: 0;
        text-transform: none;
    }

    .official-page .form-control,
    .official-page .custom-select,
    .official-page .form-control-rounded {
        background-color: var(--fs-surface-soft);
        border-color: #dbe3ed;
        border-radius: 8px;
        color: var(--fs-text);
        min-height: 2.35rem;
    }

    .official-page .form-control:focus,
    .official-page .custom-select:focus,
    .official-page .form-control-rounded:focus {
        background-color: #ffffff;
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.15);
    }

    .official-page .team-buttons-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .official-page .team-buttons-container .btn {
        margin: 0 !important;
    }

    .official-page .legend .badge {
        display: inline-flex;
        margin-bottom: 0.35rem;
    }

    .official-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    .official-actions.is-left {
        justify-content: flex-start;
    }

    /* A guide that is closed most of the time does not deserve a card of its own:
       one quiet row inside the header (mirrors .team-ses-howto on the team side). */
    .official-howto {
        border-top: 1px solid var(--fs-line);
        margin-top: 0.9rem;
        padding-top: 0.8rem;
    }

    /* Directly under the card heading nothing sits between the heading's own
       rule and this one, so they drew as two lines a few pixels apart (tester
       report). The heading's rule is enough; the fold keeps its own only when
       another block (season chips, an archive notice) separates them. */
    .official-panel-heading + .official-howto {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }

    .official-howto-toggle {
        align-items: baseline;
        background: none;
        border: 0;
        color: var(--fs-muted);
        display: flex;
        font-size: 0.84rem;
        gap: 0.75rem;
        justify-content: space-between;
        padding: 0;
        text-align: left;
        width: 100%;
    }

    .official-howto-toggle strong {
        color: #374151;
    }

    .official-howto-caret {
        color: #3b82f6;
        font-size: 0.78rem;
        font-weight: 700;
        text-decoration: underline;
        white-space: nowrap;
    }

    /* What the AI saw in one photo, read directly under that photo. */
    .official-photo-ai {
        color: var(--fs-muted);
        font-size: 0.72rem;
        line-height: 1.3;
        margin-top: 0.15rem;
    }

    .official-photo-ai.is-flag {
        color: #b45309;
    }

    /* Photos: one even grid of tiles, all the same width (at least 190px,
       4:3 thumbnails) so a team's description and the AI notes underneath
       have room — under a fixed 132px tile they ran down as a long noodle,
       and widening only some tiles broke the grid. Two per row on a phone.
       Same classes as the team pages (ses-styles). */
    /* Photos under the section's input groups (the team's "belongs to"). */
    .official-photo-group-heading {
        color: #1e3a8a;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        margin: 0.25rem 0 0.4rem;
        text-transform: uppercase;
    }

    .official-photo-group-heading span {
        color: var(--fs-muted);
        font-weight: 600;
    }

    .ses-photo-grid {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }

    @media (max-width: 575.98px) {
        .ses-photo-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .ses-photo {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere; /* a pasted URL must not run out of its tile */
        position: relative;
    }

    .ses-photo > button {
        aspect-ratio: 4 / 3;
        width: 100%;
    }

    /* A preview is one document, not a pile of cards. The detail partials are
       built from several panels, which on the dark overlay read as loose scraps;
       inside the sheet they give up their own chrome and become its sections. */
    .official-preview {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35);
        overflow: hidden;
    }

    .official-preview .official-panel {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
    }

    .official-preview .official-panel + .official-panel {
        border-top: 1px solid var(--fs-line);
    }

    .official-preview-head {
        align-items: center;
        background: var(--fs-surface-soft);
        border-bottom: 1px solid var(--fs-border-soft);
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: space-between;
        padding: 0.7rem 1.1rem;
    }

    .official-preview-head span {
        color: var(--fs-text-2);
        font-size: 0.84rem;
    }

    .official-alert {
        border-radius: 8px;
        font-size: 0.88rem;
        margin-bottom: 0.85rem;
    }

    .official-table-wrap {
        overflow-x: auto;
        width: 100%;
    }

    .official-table {
        border-collapse: collapse;
        margin-bottom: 0;
        min-width: 60rem;
        width: 100%;
    }

    .official-table.is-compact {
        min-width: 42rem;
    }

    .official-table th {
        border-bottom: 2px solid var(--fs-line);
        color: var(--fs-text-2);
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        padding: 0.68rem 0.65rem;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .official-table td {
        border-top: 1px solid var(--fs-line);
        color: var(--fs-text);
        font-size: 0.84rem;
        padding: 0.68rem 0.65rem;
        vertical-align: middle;
    }

    .official-table tbody tr:hover {
        background: #f8fbff;
    }

    /* A row that opens its record — the whole row is the target (SES review
       queue, 10/2026); the chevron says so, controls inside keep their own click. */
    .official-click-row {
        cursor: pointer;
    }

    .official-row-chevron {
        color: var(--fs-faint);
        font-size: 1.15rem;
        line-height: 1;
        text-decoration: none;
    }

    .official-click-row:hover .official-row-chevron {
        color: #2f7fb8;
    }

    /* Text that acts — an assignee to change, "Take" to pick a document up.
       No button chrome: the row stays a row of facts. */
    .official-linkish {
        background: none;
        border: 0;
        color: var(--fs-text);
        cursor: pointer;
        font: inherit;
        padding: 0;
    }

    .official-linkish:hover {
        text-decoration: underline dotted;
    }

    .official-linkish.is-muted {
        color: var(--fs-faint);
    }

    /* A list read like the team side's (SES review queue, 10/2026): edge to edge in
       its card, headers and group names in sentence case, a group a grey band, a
       state a dot and a word instead of a pill. Other officials pages keep their caps. */
    .official-panel.is-list {
        overflow: hidden;
    }

    .official-panel.is-list > .official-panel-body {
        padding: 0;
    }

    .official-list .official-table th {
        border-bottom: 1px solid #eef0f3;
        color: var(--fs-muted);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: normal;
        padding-bottom: 0.5rem;
        padding-top: 0.85rem;
        text-transform: none;
    }

    .official-list .official-table td {
        border-color: #eef0f3;
        padding-bottom: 0.75rem;
        padding-top: 0.75rem;
    }

    .official-list .official-table tr > :first-child {
        padding-left: 1.15rem;
    }

    .official-list .official-table tr > :last-child {
        padding-right: 1.15rem;
    }

    .official-list .official-group-row td {
        background: var(--fs-surface-soft);
        border-bottom: 1px solid #eef0f3;
        color: var(--fs-text-2);
        font-size: 0.86rem;
        font-weight: 700;
        padding-bottom: 0.45rem;
        padding-top: 0.45rem;
    }

    .official-list .official-group-row:hover {
        background: none;
    }

    /* On a phone the queue's rows become two-line cards, as the team side's lists do:
       team and status, then round and waiting, then the reviewer. The rest is one tap away. */
    @media (max-width: 767.98px) {
        .official-list .official-table { min-width: 0; }
        .official-list .official-table thead { display: none; }
        .official-list .official-table tr,
        .official-list .official-table td { display: block; }
        .official-list .official-table tr.official-click-row {
            border-top: 1px solid #eef0f3;
            display: grid;
            gap: 0.25rem 0.75rem;
            grid-template-areas: "team status" "round waiting" "assignee assignee";
            grid-template-columns: minmax(0, 1fr) auto;
            padding: 0.7rem 1rem;
        }
        .official-list .official-table tr.official-click-row td { border: 0; padding: 0 !important; }
        .official-list .official-table tr:not(.official-click-row) > td { padding-left: 1rem; padding-right: 1rem; }
        .official-list .q-team { font-weight: 600; grid-area: team; }
        .official-list .q-status { grid-area: status; text-align: right; }
        .official-list .q-round { grid-area: round; }
        .official-list .q-waiting { grid-area: waiting; text-align: right; }
        .official-list .q-assignee { grid-area: assignee; }
        .official-list .q-hide-phone { display: none !important; }
    }

    .official-group-count {
        color: var(--fs-faint);
        font-weight: 600;
    }

    .official-state {
        align-items: center;
        color: var(--fs-text-2);
        display: inline-flex;
        font-size: 0.84rem;
        font-weight: 600;
        gap: 0.45rem;
        white-space: nowrap;
    }

    .official-state::before {
        border: 2px solid var(--fs-line-strong);
        border-radius: 50%;
        box-sizing: border-box;
        content: '';
        flex: 0 0 auto;
        height: 0.55rem;
        width: 0.55rem;
    }

    .official-state.is-info { color: #1d4ed8; }
    .official-state.is-info::before { background: #3b82f6; border-color: #3b82f6; }
    .official-state.is-warning { color: #b45309; }
    .official-state.is-warning::before { background: #f59e0b; border-color: #f59e0b; }
    .official-state.is-success { color: #15803d; }
    .official-state.is-success::before { background: #16a34a; border-color: #16a34a; }
    .official-state.is-muted { color: var(--fs-muted); font-weight: 500; }

    /* A segmented switch — one rounded track, the chosen segment lifted white
       (the team side's pill segments). The review page's tabs and filters. */
    .official-segment {
        background: #f1f5f9;
        border-radius: 8px;
        display: flex;
        gap: 2px;
        padding: 3px;
    }

    .official-segment button {
        background: none;
        border: 0;
        border-radius: 6px;
        color: var(--fs-text-2);
        flex: 1 1 0;
        font-size: 0.76rem;
        font-weight: 600;
        line-height: 1.2;
        min-width: 0;
        padding: 0.3rem 0.2rem;
        text-align: center;
    }

    .official-segment button.is-active {
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
        color: var(--fs-text);
    }

    .official-segment-count {
        color: var(--fs-faint);
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .official-segment button.is-active .official-segment-count {
        color: #2f7fb8;
    }

    /* A middle dot between inline facts — dropped on a phone, where the facts wrap. */
    .official-sep {
        color: var(--fs-line-strong);
    }

    @media (max-width: 575.98px) {
        .official-sep {
            display: none;
        }
    }

    .official-linkish.is-action {
        color: #2f7fb8;
        font-weight: 600;
    }

    /* The reviewer's "Hide approved": Alpine flips this one class on the nav
       panel, the server stamps every row with data-review and (on the open one)
       data-active, and this rule does the hiding — instantly after any morph,
       with nothing per row to re-evaluate. !important because the row's button
       carries Bootstrap's d-flex, which is !important too. */
    .is-hiding-approved [data-review="approved"]:not([data-active]),
    .is-hiding-approved [data-review="summary"]:not([data-active]) {
        display: none !important;
    }
    /* "Hide resolved": returned rows go too — only what still needs a decision stays.
       The Cover Sheet ("summary") never takes a decision, so it is never "left". */
    .is-hiding-resolved [data-review="approved"]:not([data-active]),
    .is-hiding-resolved [data-review="returned"]:not([data-active]),
    .is-hiding-resolved [data-review="summary"]:not([data-active]) {
        display: none !important;
    }

    /* Label/value tables, where <th> names the row instead of the column.

       Two things had to be undone. The header rule (2px under the left cell)
       and the row rule (1px over the right one) drew two offset lines between
       every pair of rows; here one rule spans the whole row, as in any other
       table. And a column header's typography — smaller, heavier, uppercase,
       letter-spaced — made the label read as a different font from the value
       beside it, and from the first column of every ordinary table on the same
       page. A row label is a cell, so it is set like one. */
    .official-table.is-keyvalue th {
        border-bottom: 0;
        border-top: 1px solid var(--fs-line);
        color: var(--fs-text);
        font-size: 0.84rem;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        white-space: normal;
    }

    .official-table.is-keyvalue tbody tr:first-child th,
    .official-table.is-keyvalue tbody tr:first-child td {
        border-top: 0;
    }

    .official-table th.is-sortable {
        cursor: pointer;
        user-select: none;
        transition: color 120ms ease;
    }

    .official-table th.is-sortable:hover,
    .official-table th.is-active {
        color: var(--fs-text);
    }

    .official-sort-arrow {
        color: var(--fs-line-strong);
        font-size: 0.7rem;
        margin-left: 0.2rem;
    }

    .official-table th.is-active .official-sort-arrow {
        color: #5da2d5;
    }

    .official-page .table {
        color: var(--fs-text);
        margin-bottom: 0;
    }

    .official-page .table th {
        border-top: none;
        color: var(--fs-text-2);
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .official-page .table td {
        border-top-color: var(--fs-line);
        vertical-align: middle;
    }

    .official-page .table-bordered,
    .official-page .table-bordered td,
    .official-page .table-bordered th {
        border-color: var(--fs-line);
    }

    .official-page .table-striped tbody tr:nth-of-type(odd) {
        background-color: var(--fs-surface-soft);
    }

    .official-page .modal-content {
        border: 1px solid #dbe3ed;
        border-radius: 8px;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
    }

    .official-page .modal-header,
    .official-page .modal-footer {
        border-color: var(--fs-line);
    }

    .official-page .modal-title {
        color: var(--fs-text);
        font-weight: 700;
    }

    .official-page .modal-footer .btn-secondary {
        background: #ffffff;
        border-color: #51465c;
        color: #51465c;
    }

    .official-page .modal-footer .btn-secondary:hover,
    .official-page .modal-footer .btn-secondary:focus {
        background: #51465c;
        border-color: #51465c;
        color: #ffffff;
    }

    .official-primary-text {
        color: var(--fs-text);
        display: block;
        font-weight: 700;
    }

    .official-secondary-text {
        color: var(--fs-muted);
        display: block;
        font-size: 0.78rem;
        margin-top: 0.1rem;
    }

    /* AI pre-review priority rows — a triage list, not a carnival: severity is
       a thin left accent + a small tag, the title stays ink-dark, and the whole
       row is the click target when it maps to a section. */
    .official-prio {
        align-items: baseline;
        background: var(--fs-surface-soft);
        border: 1px solid var(--fs-line);
        border-left-width: 3px;
        border-radius: 6px;
        color: var(--fs-text);
        display: flex;
        gap: 0.6rem;
        padding: 0.5rem 0.75rem;
        text-align: left;
        width: 100%;
    }

    .official-prio.is-high { border-left-color: #dc2626; }
    .official-prio.is-medium { border-left-color: #d97706; }
    .official-prio.is-low { border-left-color: var(--fs-faint); }

    button.official-prio {
        cursor: pointer;
        transition: background 0.12s, border-color 0.12s;
    }

    button.official-prio:hover {
        background: #eff6ff;
        border-color: #93c5fd;
        border-left-color: inherit;
    }

    .official-prio-tag {
        flex-shrink: 0;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        min-width: 3.4rem;
    }

    .official-prio.is-high .official-prio-tag { color: #b91c1c; }
    .official-prio.is-medium .official-prio-tag { color: #b45309; }
    .official-prio.is-low .official-prio-tag { color: var(--fs-faint); }

    .official-prio-title {
        color: var(--fs-text);
        font-weight: 700;
    }

    .official-prio-why {
        color: var(--fs-muted);
    }

    .official-prio-arrow {
        color: var(--fs-faint);
        flex-shrink: 0;
        margin-left: auto;
    }

    .official-empty {
        color: #718096 !important;
        padding: 1.25rem !important;
        text-align: center;
    }

    @media (max-width: 1199.98px) {
        .official-field-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 1199.98px) {
        .official-stat-grid.is-six {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .official-stat-grid.is-five,
        .official-stat-grid.is-six {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* One column that can shrink below its content: these hold wide tables whose
           wrappers scroll — a plain 1fr column grew to the table and pushed the page
           sideways. */
        .official-form-grid.is-aside,
        .official-form-grid.is-five,
        .official-split-grid.is-aside,
        .official-stack {
            grid-template-columns: minmax(0, 1fr);
        }

        /* Panel header toolbars that views keep on one line (inline nowrap) wrap on a
           phone instead of pushing their last button off the card (11/2026). */
        .official-panel-heading .official-actions {
            flex-wrap: wrap !important;
        }
    }

    @media (max-width: 767.98px) {
        .official-hero,
        .official-panel-heading {
            align-items: stretch;
            flex-direction: column;
        }

        .official-settings-grid,
        .official-field-grid,
        .official-form-grid,
        .official-form-grid.is-three,
        .official-form-grid.is-four,
        .official-stat-grid,
        .official-split-grid,
        .official-detail-grid,
        .official-category-grid {
            grid-template-columns: 1fr;
        }

        .official-actions {
            justify-content: flex-start;
        }

        .official-hero,
        .official-panel-body {
            padding: 1rem;
        }
    }

    /* Result table inputs and inline status buttons */
    .official-page .result-input {
        background: #ffffff;
        border: 1px solid var(--fs-line-strong);
        border-radius: 4px;
        color: var(--fs-text);
        font-size: 0.82rem;
        font-weight: 600;
        height: 1.85rem;
        min-height: 0;
        min-width: 3.25rem;
        padding: 0.2rem 0.45rem;
        text-align: center;
        width: 100%;
        max-width: 5rem;
    }
    .official-page .result-input:focus {
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.15);
        outline: none;
    }
    .official-page .result-input::placeholder {
        color: var(--fs-line-strong);
        font-weight: 400;
    }

    .official-page .result-status-cell {
        align-items: center;
        display: inline-flex;
        gap: 0.25rem;
        white-space: nowrap;
    }
    .official-page .result-status-pill {
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1;
        min-width: 2.6rem;
        padding: 0.32rem 0.55rem;
        text-transform: uppercase;
    }
    .official-page .result-status-pill.is-ok { background: #10b981; color: #fff; }
    .official-page .result-status-pill.is-dns { background: #3b82f6; color: #fff; }
    .official-page .result-status-pill.is-dnf { background: #f59e0b; color: #fff; }
    .official-page .result-status-pill.is-dsq { background: #ef4444; color: #fff; }
    .official-page .result-status-pill.is-dq { background: #ef4444; color: #fff; }
    .official-page .result-status-pill.is-none { background: #e5e7eb; color: var(--fs-text-2); }

    .official-page .result-status-trigger {
        align-items: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        color: var(--fs-faint);
        cursor: pointer;
        display: inline-flex;
        font-size: 1rem;
        height: 1.65rem;
        justify-content: center;
        line-height: 1;
        padding: 0;
        width: 1.65rem;
        transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    }
    .official-page .result-status-trigger:hover {
        background: #f1f5f9;
        border-color: var(--fs-line-strong);
        color: var(--fs-text);
    }
    .official-page .result-status-menu {
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
        font-size: 0.82rem;
        min-width: 8rem;
        padding: 0.35rem 0;
    }
    .official-page .result-status-menu .dropdown-item {
        font-weight: 600;
        padding: 0.4rem 0.85rem;
    }
    .official-page .result-status-menu .dropdown-item.is-delete {
        color: #dc2626;
    }

    .official-page .official-table.is-result td {
        vertical-align: middle;
    }

    /* Sticky lead columns (team + car number) for wide result tables */
    .official-page .official-table.is-result th.result-sticky-1,
    .official-page .official-table.is-result td.result-sticky-1,
    .official-page .official-table.is-result th.result-sticky-2,
    .official-page .official-table.is-result td.result-sticky-2 {
        background: #ffffff;
        position: sticky;
        z-index: 2;
    }
    .official-page .official-table.is-result thead th.result-sticky-1,
    .official-page .official-table.is-result thead th.result-sticky-2 {
        z-index: 3;
    }
    .official-page .official-table.is-result .result-sticky-1 {
        left: 0;
        max-width: 10.5rem;
        min-width: 10.5rem;
        width: 10.5rem;
    }
    .official-page .official-table.is-result .result-sticky-2 {
        left: 10.5rem;
    }
    /* collapsed borders don't travel with sticky cells in Chrome — redraw them */
    .official-page .official-table.is-result td.result-sticky-1,
    .official-page .official-table.is-result td.result-sticky-2 {
        box-shadow: inset 0 1px 0 var(--fs-line);
    }
    .official-page .official-table.is-result thead th.result-sticky-1,
    .official-page .official-table.is-result thead th.result-sticky-2 {
        box-shadow: inset 0 -2px 0 var(--fs-line);
    }
    .official-page .official-table.is-result .result-sticky-2::after {
        background: linear-gradient(to right, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0));
        bottom: 0;
        content: '';
        pointer-events: none;
        position: absolute;
        right: -6px;
        top: 0;
        width: 6px;
    }
    .official-page .official-table.is-result tbody tr:hover td.result-sticky-1,
    .official-page .official-table.is-result tbody tr:hover td.result-sticky-2 {
        background: #f8fbff;
    }

    /* Sticky header rows — the wrap becomes its own scroll box so `top` has something to stick to */
    .official-page .official-table-wrap.has-sticky-head {
        max-height: max(24rem, calc(100vh - 230px));
        overflow: auto;
    }
    .official-page .has-sticky-head .official-table.is-result thead th {
        background: #ffffff;
        box-shadow: inset 0 -2px 0 var(--fs-line);
        position: sticky;
        z-index: 3;
    }
    /* fixed first-row height so the second header row knows its `top` offset */
    .official-page .has-sticky-head .official-table.is-result thead tr:first-child {
        height: 2.5rem;
    }
    .official-page .has-sticky-head .official-table.is-result thead tr:first-child th {
        top: 0;
    }
    .official-page .has-sticky-head .official-table.is-result thead tr:nth-child(2) th {
        top: 2.5rem;
    }
    .official-page .has-sticky-head .official-table.is-result thead th.result-sticky-1,
    .official-page .has-sticky-head .official-table.is-result thead th.result-sticky-2 {
        z-index: 4;
    }

    /* Collapsible details/summary blocks (slot management, etc.) */
    .official-page .slot-mgmt-collapsible {
        background: var(--fs-surface-soft);
        border: 1px solid var(--fs-border-soft);
        border-radius: 10px;
        padding: 0.65rem 0.85rem;
        margin-bottom: 0.6rem;
        transition: border-color 150ms ease, background 150ms ease;
    }
    .official-page .slot-mgmt-collapsible[open] {
        background: #ffffff;
        border-color: var(--fs-line-strong);
        padding-bottom: 1rem;
    }
    .official-page .slot-mgmt-collapsible.is-nested {
        background: transparent;
        border: 1px dashed var(--fs-line-strong);
        margin-top: 0.5rem;
    }
    .official-page .slot-mgmt-summary {
        align-items: center;
        cursor: pointer;
        display: flex;
        gap: 0.65rem;
        list-style: none;
        outline: none;
        position: relative;
        user-select: none;
    }
    .official-page .slot-mgmt-summary::-webkit-details-marker {
        display: none;
    }
    .official-page .slot-mgmt-summary::before {
        background: #ffffff;
        border: 1px solid var(--fs-line-strong);
        border-radius: 4px;
        color: var(--fs-text-2);
        content: '+';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 0.9rem;
        font-weight: 700;
        height: 1.35rem;
        line-height: 1;
        transition: transform 150ms ease, background 150ms ease;
        width: 1.35rem;
    }
    .official-page .slot-mgmt-collapsible[open] > .slot-mgmt-summary::before {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #ffffff;
        content: '−';
    }
    .official-page .slot-mgmt-summary-label {
        color: var(--fs-text);
        font-size: 0.92rem;
        font-weight: 600;
    }
    .official-page .slot-mgmt-summary.is-subtle .slot-mgmt-summary-label {
        color: var(--fs-text-2);
        font-size: 0.85rem;
        font-weight: 600;
    }
    .official-page .slot-mgmt-summary:hover .slot-mgmt-summary-label {
        color: #3b82f6;
    }

    /* TI sheet template editor hierarchy */
    .official-page .ti-party {
        background: #ffffff;
        border: 1px solid var(--fs-border-soft);
        border-left: 4px solid #3b82f6;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
        margin-bottom: 1rem;
        padding: 1rem 1.25rem;
    }
    .official-page .ti-party-header {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        justify-content: space-between;
    }
    .official-page .ti-party-title {
        color: #0f172a;
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
    }
    .official-page .ti-party-meta {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.25rem;
    }

    .official-page .ti-categories {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 0.85rem;
    }
    .official-page .ti-categories-label {
        color: var(--fs-muted);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .official-page .ti-category {
        background: var(--fs-surface-soft);
        border: 1px solid var(--fs-border-soft);
        border-radius: 10px;
        padding: 0.85rem 1rem;
    }
    .official-page .ti-category-header {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        justify-content: space-between;
    }
    .official-page .ti-category-title {
        color: var(--fs-text);
        font-size: 0.98rem;
        font-weight: 700;
        margin: 0;
    }

    .official-page .ti-item-grid {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (max-width: 1199.98px) {
        .official-page .ti-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 767.98px) {
        .official-page .ti-item-grid { grid-template-columns: 1fr; }
    }
    .official-page .ti-item-card {
        align-items: flex-start;
        background: #ffffff;
        border: 1px solid var(--fs-border-soft);
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
        display: flex;
        gap: 0.6rem;
        justify-content: space-between;
        padding: 0.85rem;
        transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
    }
    .official-page .ti-item-card:hover {
        border-color: var(--fs-line-strong);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
        transform: translateY(-1px);
    }
    .official-page .ti-item-card-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
    }
    .official-page .ti-item-card-actions {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 0.3rem;
    }

    /* Saved deposit inputs (locked, green tint) */
    .official-page .deposit-input.is-locked {
        background: #ecfdf5;
        border-color: #6ee7b7;
        color: #065f46;
        cursor: not-allowed;
    }
    .official-page .deposit-input.is-locked:focus {
        outline: none;
        box-shadow: 0 0 0 0.15rem rgba(110, 231, 183, 0.3);
    }

    /* Slot management — layout preview (Management tab) — matches Visualization tab proportions */
    .official-page .mgmt-preview-scale-wrap {
        /* Use a CSS container/scale wrapper so the preview has identical proportions
           to the Visualization tab but fits inside the narrower Management panel.
           The inner .mgmt-preview-container uses the same dimensions as Visualization
           (.gallery-map-container). */
        width: 100%;
        overflow: hidden;
        border-radius: 10px;
        position: relative;
    }
    .official-page .mgmt-preview-scale-wrap::after {
        /* Reserve vertical room equal to scaled container height (700px * 0.62 ≈ 434px). */
        content: '';
        display: block;
        padding-bottom: 62%;
    }
    .official-page .mgmt-preview-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 161.29%; /* 1 / 0.62 so post-scale width is 100% of wrapper */
        min-height: 700px;
        transform: scale(0.62);
        transform-origin: top left;
        background:
            linear-gradient(135deg, rgba(248, 250, 252, 1) 0%, rgba(241, 245, 249, 1) 100%),
            repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.025) 0 1px, transparent 1px 32px),
            repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.025) 0 1px, transparent 1px 32px);
        background-blend-mode: normal, multiply, multiply;
        border: 1px solid var(--fs-border-soft);
        border-radius: 12px;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
    }
    .official-page .mgmt-preview-building {
        position: relative;
        width: 50%;
        height: 400px;
        background: #ffffff;
        border: 1px solid var(--fs-line-strong);
        border-radius: 14px;
        margin: 150px auto;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }
    .official-page .mgmt-preview-building-label {
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        font-weight: 600;
        color: var(--fs-faint);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .official-page .mgmt-preview-entrance {
        position: absolute;
        background: var(--fs-text-2);
        border: 0;
        border-radius: 4px;
        z-index: 15;
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
    }
    .official-page .mgmt-preview-entrance.is-editing {
        background: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35), 0 2px 4px rgba(15, 23, 42, 0.12);
    }
    .official-page .mgmt-preview-slot {
        position: absolute;
        width: 80px;
        height: 80px;
        border: 1px solid #6ee7b7;
        background: rgba(236, 253, 245, 0.95);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(-50%, -50%);
        font-size: 20px;
        font-weight: 700;
        color: #065f46;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    .official-page .mgmt-preview-slot.inside { z-index: 10; }
    .official-page .mgmt-preview-slot.outside { z-index: 5; }
    .official-page .mgmt-preview-slot.is-editing {
        background: rgba(219, 234, 254, 0.95);
        border-color: #3b82f6;
        color: #1e3a8a;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(15, 23, 42, 0.12);
        z-index: 20;
    }
    .official-page .mgmt-preview-object {
        position: absolute;
        border: 1px solid rgba(15, 23, 42, 0.08);
        transform: translate(-50%, -50%);
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .official-page .mgmt-preview-object.rectangle { border-radius: 10px; }
    .official-page .mgmt-preview-object.circle { border-radius: 50%; }
    .official-page .mgmt-preview-object.is-editing {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
        z-index: 6;
    }
    .official-page .mgmt-preview-object-name {
        font-size: 11px;
        font-weight: 600;
        color: rgba(15, 23, 42, 0.75);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
        padding: 2px 6px;
    }

    /* Nav tabs — clean underline style for officials pages */
    .official-page .nav-tabs {
        border-bottom: 1px solid var(--fs-border-soft);
        margin-bottom: 1rem;
        padding-left: 0.25rem;
    }
    .official-page .nav-tabs .nav-item .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--fs-muted);
        font-weight: 600;
        padding: 0.6rem 0.95rem;
        transition: color 120ms ease, border-color 120ms ease;
    }
    .official-page .nav-tabs .nav-item .nav-link:hover,
    .official-page .nav-tabs .nav-item .nav-link:focus {
        background: transparent;
        border-color: transparent;
        color: #5da2d5;
    }
    .official-page .nav-tabs .nav-item .nav-link.active {
        background: transparent;
        border-bottom-color: #5da2d5;
        color: var(--fs-text);
    }

    /* Compact status pill for Tilt/Rain/Noise/Brake/EBS grids (Others tab) */
    .official-page .ti-status-pill {
        align-items: center;
        border-radius: 999px;
        display: inline-flex;
        font-size: 0.74rem;
        font-weight: 700;
        height: 1.4rem;
        justify-content: center;
        line-height: 1;
        min-width: 1.4rem;
        padding: 0 0.35rem;
    }
    .official-page .ti-status-pill.is-done    { background: #dcfce7; color: #166534; }
    .official-page .ti-status-pill.is-pending { background: #f1f5f9; color: var(--fs-faint); }

    /* Monospace tabular time/timestamp display */
    .official-page .ti-time {
        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
        font-variant-numeric: tabular-nums;
    }

    /* Compact pivot matrix — rows × columns counts (e.g. hoodie size × type totals) */
    .official-matrix-wrap {
        background: #ffffff;
        border: 1px solid var(--fs-border-soft);
        border-radius: 8px;
        display: inline-block;
        max-width: 100%;
        overflow-x: auto;
    }

    .official-matrix {
        border-collapse: collapse;
        margin: 0;
        width: auto;
    }

    .official-matrix th,
    .official-matrix td {
        font-size: 0.84rem;
        padding: 0.55rem 0.95rem;
        text-align: right;
        white-space: nowrap;
    }

    .official-matrix thead th {
        background: #ffffff;
        border-bottom: 1px solid var(--fs-border-soft);
        color: var(--fs-text-2);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .official-matrix .is-rowhead {
        text-align: left;
    }

    .official-matrix tbody td {
        border-top: 1px solid var(--fs-line);
        color: var(--fs-text);
        font-variant-numeric: tabular-nums;
    }

    .official-matrix tbody td.is-rowhead {
        color: var(--fs-text);
        font-weight: 700;
    }

    .official-matrix tbody tr:hover td {
        background: #f8fbff;
    }

    .official-matrix .is-zero {
        color: var(--fs-line-strong);
    }

    .official-matrix .is-total-col {
        background: var(--fs-surface-soft);
        border-left: 1px solid var(--fs-border-soft);
        font-weight: 700;
    }

    .official-matrix tfoot td {
        background: #ffffff;
        border-top: 2px solid var(--fs-border-soft);
        color: var(--fs-text);
        font-variant-numeric: tabular-nums;
        font-weight: 800;
    }

    /* "Show the math" lines inside a check row — mirror of the team side:
       formula dark, substitutions lighter and indented, result dark again. */
    /* The numbers behind the % checks (BaselineTable) — the same block the team sees (ses-styles). */
    .ses-abs {
        margin-top: 1rem;
    }

    .ses-abs-title {
        color: #334155;
        font-size: 0.86rem;
        font-weight: 600;
        margin: 0;
    }

    .ses-abs-caption {
        color: var(--fs-faint);
        font-size: 0.8rem;
        margin: 0 0 0.4rem;
    }

    .ses-abs-wrap {
        overflow-x: auto;
    }

    .ses-abs-table {
        border-collapse: collapse;
        font-size: 0.8rem;
        width: 100%;
    }

    .ses-abs-table th,
    .ses-abs-table td {
        border-bottom: 1px solid var(--fs-line);
        padding: 0.35rem 0.5rem;
        vertical-align: top;
        white-space: nowrap;
    }

    .ses-abs-table thead th {
        color: var(--fs-text-2);
        font-weight: 600;
        text-align: right;
    }

    .ses-abs-table thead th small {
        color: var(--fs-faint);
        display: block;
        font-weight: 400;
    }

    /* The row names stay in view while the numbers scroll sideways (phones, four columns). */
    .ses-abs-table tbody th,
    .ses-abs-table thead th:first-child {
        background: #fff;
        left: 0;
        position: sticky;
        z-index: 1;
    }

    .ses-abs-table tbody th {
        color: #334155;
        font-weight: 500;
        text-align: left;
    }

    @media (max-width: 575.98px) {
        .ses-abs-table tbody th {
            max-width: 7.5rem;
            min-width: 6rem;
            white-space: normal;
        }
    }

    .ses-abs-table tbody th span {
        color: var(--fs-faint);
        font-weight: 400;
    }

    .ses-abs-table td {
        color: var(--fs-text);
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .ses-abs-table td.ses-abs-pct {
        color: var(--fs-text-2);
        font-weight: 600;
    }

    .official-check-math {
        color: #8b99ab;
        font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
        font-size: 0.68rem;
        line-height: 1.6;
        margin-top: 0.3rem;
    }

    /* Direct children only: a team's own calculation can hold LaTeX typeset by
       KaTeX, whose markup is nested spans that a descendant selector would break. */
    .official-check-math > span {
        display: block;
        padding-left: 0.75rem;
        white-space: pre-wrap;
    }

    .official-check-math > span:first-child {
        color: var(--fs-text-2);
        padding-left: 0;
    }

    .official-check-math > span:last-child {
        color: var(--fs-text-2);
    }

    /* $$…$$ lines stay in the left-aligned column instead of KaTeX's centring and
       wrap at = and < like inline math (KaTeX keeps them on one line). The
       inline-size containment + scroll is the fallback for a piece too wide to
       wrap, so it cannot stretch the checks table. */
    .official-check-math .katex-display {
        contain: inline-size;
        margin: 0.2rem 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .official-check-math .katex-display > .katex {
        text-align: left;
        white-space: normal;
    }

    /* Wrapped pieces of a $$ line: their boxes touch exactly, so a fraction's
       denominator met the next line's numerator. */
    .official-check-math .katex-display .katex-html > .katex-base {
        margin: 0.15em 0;
    }