:root {
    --navy: #073f78;
    --blue: #0b67b2;
    --red: #ed1c24;
    --ink: #122236;
    --muted: #5d6f82;
    --line: #dbe5ef;
    --soft: #f4f8fc;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: var(--navy);
    text-decoration: none;
}

a:hover {
    color: var(--red);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px clamp(18px, 5vw, 72px);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}

.brand img {
    display: block;
    width: min(260px, 42vw);
    height: auto;
}

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    font-size: .94rem;
    font-weight: 700;
}

nav form {
    margin: 0;
}

nav button {
    border: 0;
    background: transparent;
    color: var(--navy);
    font-weight: 700;
    padding: 0;
}

main {
    min-height: 72vh;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 540px);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding: clamp(52px, 7vw, 94px) clamp(18px, 5vw, 72px) 42px;
    background:
        linear-gradient(135deg, rgba(7, 63, 120, .08), rgba(237, 28, 36, .04)),
        var(--white);
}

.hero-copy {
    max-width: 780px;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--red);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1, h2, h3, p {
    margin-top: 0;
}

h1 {
    margin-bottom: 18px;
    color: var(--navy);
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: .96;
    font-weight: 900;
}

/* FocusOnNavigate (Components/Routes.razor) moves focus to the page h1 so screen
   readers announce the new page. That gives the heading tabindex="-1", and the
   browser then paints its default focus ring as a box around the heading text.
   The heading is never in the tab order, so hiding the ring costs no keyboard
   affordance while keeping the screen-reader announcement. */
[tabindex="-1"]:focus {
    outline: 0;
}

h2 {
    margin-bottom: 14px;
    color: var(--navy);
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.05;
    font-weight: 900;
}

h3 {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 1.25rem;
}

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

.hero-copy > p:not(.eyebrow) {
    max-width: 650px;
    font-size: 1.12rem;
}

.hero-actions,
.admin-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--navy);
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 800;
    cursor: pointer;
}

.button.primary,
button {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.button.secondary {
    background: var(--white);
    color: var(--navy);
}

.hero-photo-card,
.timing-photo {
    margin: 0;
}

.hero-photo-card img,
.timing-photo img {
    display: block;
    width: 100%;
    border: 1px solid rgba(7, 63, 120, .25);
    box-shadow: 0 24px 70px rgba(7, 63, 120, .2);
}

.hero-photo-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-size: .9rem;
}

.section {
    padding: clamp(42px, 7vw, 86px) clamp(18px, 5vw, 72px);
}

.page-band {
    min-height: 72vh;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 26px;
}

.meet-list,
.timing-gallery {
    display: grid;
    gap: 16px;
}

.meet-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 180px;
    gap: 22px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--blue);
    border-radius: 8px;
    background: var(--white);
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.meet-card:hover,
.meet-card:focus-visible {
    color: inherit;
    border-color: var(--blue);
    border-left-color: var(--red);
    box-shadow: 0 6px 18px rgba(7, 63, 120, .12);
}

.meet-card h3 {
    color: var(--navy);
}

.meet-card:hover h3 {
    color: var(--red);
}

.meet-date {
    display: grid;
    gap: 6px;
}

.meet-date strong {
    color: var(--navy);
    font-size: 1.08rem;
}

.meet-date span,
.meet-status,
.entry-window span,
.meet-actions span {
    color: var(--muted);
    font-size: .92rem;
    font-weight: 700;
}

.meet-status,
.cancelled-status {
    color: var(--navy) !important;
    font-size: 1.03rem !important;
    font-weight: 900 !important;
}

.cancelled-status {
    color: var(--red) !important;
}

.meet-actions {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.meet-actions strong {
    color: var(--navy);
}

.timing-section,
.form-band {
    background: var(--soft);
}

.timing-gallery {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    align-items: start;
}

.scoreboard-photo img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.timer-photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.entry-copy {
    max-width: 760px;
    margin-bottom: 26px;
}

.process-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.process-strip span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    color: var(--navy);
    font-size: .88rem;
    font-weight: 800;
}

.entry-form {
    display: grid;
    gap: 16px;
    max-width: 860px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.builder-layout {
    display: grid;
    grid-template-columns: minmax(320px, 560px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.builder-layout .section-heading {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

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

/* City / State / ZIP sit on one row, with the state and zip kept narrow. */
.form-grid-address {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

label {
    display: grid;
    gap: 7px;
    color: var(--navy);
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #b8c7d6;
    border-radius: 6px;
    padding: 11px 12px;
    color: var(--ink);
    background: var(--white);
    font: inherit;
    font-weight: 400;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(11, 103, 178, .2);
    border-color: var(--blue);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-label input {
    width: auto;
}

.form-message {
    margin: 0;
    padding: 12px;
    border-radius: 6px;
    background: rgba(11, 103, 178, .1);
    color: var(--navy);
    font-weight: 800;
}

.form-message.error {
    background: rgba(237, 28, 36, .1);
    color: var(--red);
}

.admin-layout {
    min-height: 72vh;
}

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

.admin-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: 14px;
    align-items: center;
    min-width: 760px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.admin-row:last-child {
    border-bottom: 0;
}

.admin-head {
    background: var(--navy);
    color: var(--white);
    font-weight: 900;
}

.event-row {
    grid-template-columns: 44px 2fr 1.3fr 1fr 1.1fr 110px;
}

.event-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.tab-strip {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.tab-strip button {
    min-height: 0;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
}

.tab-strip button.is-active {
    border-color: var(--line);
    background: var(--white);
    color: var(--navy);
    box-shadow: 0 2px 0 0 var(--white);
}

.tab-intro {
    margin-bottom: 14px;
}

.inline-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.inline-label select {
    width: auto;
    padding: 7px 10px;
}

.row-link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--navy);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.row-link:hover {
    color: var(--red);
    text-decoration: underline;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(7, 63, 120, .45);
}

.modal-panel {
    position: fixed;
    z-index: 41;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(920px, 94vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: var(--soft);
    box-shadow: 0 30px 80px rgba(7, 63, 120, .35);
    overflow: hidden;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    background: var(--navy);
    color: var(--white);
}

.modal-head h2 {
    margin: 0;
    color: var(--white);
    font-size: 1.3rem;
}

.modal-head .link-button {
    border-color: rgba(255, 255, 255, .5);
    background: transparent;
    color: var(--white);
}

.modal-body {
    display: grid;
    gap: 18px;
    padding: 22px;
    overflow-y: auto;
}

.modal-body .entry-form,
.modal-body .document-panel {
    max-width: none;
}

/* Site announcement pop-up (admin-scheduled, shown once per visitor). Starts hidden; the
   [hidden] rule wins over the flex layout so it stays invisible until announcement.js reveals it. */
.announcement {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.announcement[hidden] {
    display: none;
}

.announcement-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 63, 120, .5);
}

.announcement-panel {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px clamp(20px, 4vw, 32px);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 24px 70px rgba(7, 63, 120, .3);
}

.announcement-panel h2 {
    margin-bottom: 12px;
    color: var(--navy);
}

.announcement-panel p {
    margin-bottom: 12px;
}

.announcement-close {
    position: absolute;
    top: 8px;
    right: 10px;
    min-height: auto;
    padding: 4px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 400;
}

.announcement-close:hover {
    color: var(--red);
}

.announcement-link {
    margin-top: 6px;
}

.meet-list-panel {
    display: grid;
    gap: 12px;
    align-content: start;
}

.draft-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--blue);
    border-radius: 8px;
    background: var(--soft);
    color: var(--navy);
    font-weight: 700;
}

.link-button.is-danger {
    border-color: rgba(237, 28, 36, .45);
    color: var(--red);
}

.draft-bar.is-danger {
    border-left-color: var(--red);
    background: rgba(237, 28, 36, .07);
    color: var(--red);
}

.draft-bar.is-danger .field-hint {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 400;
}

.link-button.is-draft {
    border-color: var(--blue);
    color: var(--blue);
}

.edit-note {
    color: var(--navy);
    font-weight: 800;
}

.document-row {
    grid-template-columns: 1.1fr 1.2fr 1.8fr 1fr 90px;
}

/* Meet documents carry a visibility column and a two-button action cell, so they get their own
   template rather than sharing the questions grid above. */
.meet-document-row {
    grid-template-columns: 1fr 1.1fr 1.6fr .8fr .9fr 140px;
}

/* The email-results form stacks full-width fields down the panel rather than sitting in the
   multi-column document-form grid, so the recipient boxes span the whole shaded area. */
.email-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.email-form .email-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.email-form .email-field input,
.email-form .email-field textarea {
    width: 100%;
    box-sizing: border-box;
}

.email-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0;
}

.email-group legend {
    font-weight: 800;
    color: var(--navy);
    padding: 0 6px;
}

/* The line above a team list: the count on the left, the tools on the right. */
.email-teams-head,
.team-contacts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
}

.email-teams-tools {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

/* Takes the contact list away as a spreadsheet, for an operator who would rather mail the teams
   from their own client than through the site. */
.csv-link {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    white-space: nowrap;
}

.csv-link:hover {
    border-color: var(--red);
}

/* Teams entered, one row each. A list rather than a card grid: school names run long, and in
   columns a wrapped name climbed over the address sitting next to it. */
.team-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.team-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 2px;
    border-bottom: 1px solid var(--line);
}

.team-contact-list .checkbox-label {
    flex: 1;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.team-contact-list input[type="checkbox"] {
    margin-top: 3px;
}

.team-contact-name {
    flex: 1 1 55%;
    min-width: 0;
    color: var(--navy);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.team-contact-email {
    flex: 1 1 45%;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    font-weight: 400;
}

.team-contact-email .field-hint {
    display: block;
}

/* The contact list above the entry queue. */
.team-contacts {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

/* Files to send wrap into as many ~220px columns as fit (about three on a full-width panel),
   collapsing to fewer as the panel narrows, so a long list stays compact. */
.email-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 18px;
}

.email-checkbox-grid .checkbox-label {
    margin: 0;
}

.checkbox-label.inline {
    margin: 0;
    font-weight: 600;
}

.email-send {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

/* Date + time pair for the entry window. */
.date-time {
    display: flex;
    gap: 8px;
}

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

.badge-internal {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
}

.badge-public {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e6edf4;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
}

.backup-row {
    grid-template-columns: 2fr 1.2fr .8fr 1.2fr;
}

.digest-status {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: -6px 0 4px 26px;
}

.digest-status .field-hint.error {
    color: var(--danger, #b3261e);
}

/* The one sentence saying what the entry window above actually does. Read more often than the
   hints around it, so it sits apart from them rather than in the same grey run-on. */
.entry-window-status {
    color: var(--ink, inherit);
    margin: -4px 0 4px;
}

.entry-window-status.is-closed {
    color: var(--danger, #b3261e);
}

/* The billing list is worked down rather than read, so the search box and the state filters sit
   together above it and the row is wide enough to edit in place. */
.billing-filters {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin: 18px 0 10px;
}

.billing-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.billing-tabs .link-button.is-active {
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
}

.billing-row {
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 2fr)
        minmax(0, .6fr) minmax(0, .6fr)
        minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr);
    min-width: 1100px;
}

/* Settled rows stay legible but recede, so what is still owed reads first. */
.billing-row.is-settled {
    color: var(--muted);
}

.billing-row input[type="text"],
.billing-row input[type="date"] {
    width: 100%;
    min-width: 0;
}

/* Notes read as prose rather than as another grey hint, since they are written to be read. */
.host-notes {
    white-space: pre-wrap;
    margin: 4px 0 10px;
    color: var(--ink);
}

.meet-search {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 28px 0 10px;
}

.meet-search input[type="search"] {
    min-width: 260px;
}

.meet-search .field-hint {
    flex-basis: 100%;
}

.form-message.warning {
    background: #fdf0d5;
    border-left: 4px solid #d98324;
    color: #6b4200;
}

.entry-row {
    grid-template-columns: 1.3fr 1.2fr 1.3fr 1.1fr 1fr .7fr;
}

/* Answers hang under their submission rather than squeezing into a column of their own. */
.entry-answers {
    grid-template-columns: 1.3fr 1fr;
    padding-top: 0;
    border-top: 0;
}

/* A meet with nothing submitted yet. Native select options accept little styling, so the label
   also says "no entries" — the colour is a hint, not the only signal. */
.entry-toolbar option.is-empty {
    color: var(--muted);
}

.receipt {
    max-width: 620px;
}

.receipt h3 {
    margin: 22px 0 8px;
    font-size: 1rem;
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
}

.receipt-table td {
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.receipt-table td:first-child {
    width: 42%;
    color: var(--muted);
    font-weight: 700;
    padding-right: 14px;
}

/* The numbers are the reason a coach opens this, so they carry weight. */
.receipt-table.is-counts td:last-child {
    font-weight: 900;
    font-size: 1.05rem;
}

.count-warning {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fdf0d5;
    color: #6b4200;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: help;
}

.answer-list {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: .86rem;
}

.entry-row.is-superseded {
    background: var(--soft);
    color: var(--muted);
}

.entry-row a {
    margin-right: 12px;
}

.entry-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    color: var(--muted);
    font-weight: 700;
}

.entry-toggle {
    display: inline-flex;
    gap: 8px;
}

.entry-toggle a {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 800;
}

.entry-toggle a.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.badge-latest {
    background: rgba(11, 103, 178, .14);
    color: var(--navy);
}

.badge-superseded {
    background: rgba(93, 111, 130, .16);
    color: var(--muted);
}

/* Per-meet entry questions on the submission form. */
.meet-question {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.acknowledgement {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.acknowledgement p {
    margin: 0;
    font-weight: 700;
}

.batch-panel {
    margin-bottom: 18px;
}

.revision-count {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.document-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.document-panel h2 {
    margin: 0;
    color: var(--navy);
}

.document-panel > p {
    margin: 0;
}

.document-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.document-form label {
    margin: 0;
}

.field-hint {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    text-transform: none;
}

/* The events list stacks the meet name and each address line one per row. */
.event-name-row {
    display: block;
}

.event-location-line {
    display: block;
}

.link-button {
    min-height: 0;
    padding: 6px 10px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--red);
    font-size: .85rem;
}

.user-row {
    grid-template-columns: 1.6fr .9fr .9fr 1fr 1.1fr;
}

.user-row .field-hint {
    display: block;
}

.invite-link {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--white);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.subscription-row {
    grid-template-columns: 1fr 1.4fr 1.4fr 200px;
}

.subscription-url {
    overflow-wrap: anywhere;
    font-size: .88rem;
}

.subscription-error {
    display: block;
    color: var(--red);
    font-size: .84rem;
    font-weight: 700;
}

.subscription-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.import-row {
    grid-template-columns: 140px minmax(0, 1fr);
    min-width: 0;
}

.calendar-subscribe {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.calendar-title {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--line);
    overflow: hidden;
}

.calendar-heading {
    padding: 10px 8px;
    background: var(--navy);
    color: var(--white);
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 104px;
    padding: 6px;
    background: var(--white);
}

.calendar-day.is-outside {
    background: var(--soft);
}

.calendar-day.is-outside .calendar-date {
    color: #a9b8c7;
}

.calendar-day.is-today {
    box-shadow: inset 0 0 0 2px var(--blue);
}

.calendar-date {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.calendar-meet {
    display: block;
    padding: 4px 6px;
    border-left: 3px solid var(--blue);
    border-radius: 4px;
    background: rgba(11, 103, 178, .1);
    color: var(--navy);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.calendar-meet:hover {
    background: rgba(11, 103, 178, .2);
    color: var(--navy);
}

.calendar-meet.is-cancelled {
    border-left-color: var(--red);
    background: rgba(237, 28, 36, .1);
    text-decoration: line-through;
}

.calendar-list-heading {
    font-size: 1.4rem;
}

.status-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status-strip .badge {
    margin-left: 0;
}

.form-section-heading {
    margin: 10px 0 0;
    color: var(--navy);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.meet-contacts {
    margin-bottom: 32px;
}

.meet-contacts h2 {
    color: var(--navy);
    margin-bottom: 12px;
}

.meet-host {
    margin: 0 0 16px;
    color: var(--muted);
}

.meet-host strong {
    color: var(--navy);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.contact-card {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.contact-card span {
    color: var(--red);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.contact-card strong {
    color: var(--navy);
    font-size: 1.05rem;
}

.contact-card a {
    font-weight: 700;
    word-break: break-word;
}

.download-group {
    margin: 18px 0 10px;
    color: var(--navy);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.download-group:first-of-type {
    margin-top: 0;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 28px clamp(18px, 5vw, 72px);
    border-top: 1px solid var(--line);
    background: var(--navy);
}

footer img {
    width: 220px;
    max-width: 52vw;
    filter: brightness(0) invert(1);
}

footer p {
    margin: 0;
    color: var(--white);
}

#blazor-error-ui {
    display: none;
}

.validation-message {
    color: var(--red);
    font-weight: 700;
}

.meet-location span {
    display: block;
}

.meet-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.meet-fact {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

/* Direct child only: this styles the tile's label, and a descendant selector would also catch
   spans inside the value — the live clock among them. */
.meet-fact > span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.meet-fact strong {
    color: var(--navy);
    font-size: 1.08rem;
}

/* The live meet clock. Tabular figures so the seconds ticking over do not shift the text beside
   it a pixel back and forth once a second. */
.meet-clock {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The clock where it sits inline rather than in a meet-fact tile: the admin entry toolbar and the
   meet form's entry-window block. */
.meet-clock-fact {
    display: grid;
    gap: 6px;
    align-content: center;
}

.meet-clock-fact > span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.meet-clock-fact strong {
    color: var(--navy);
    font-size: 1.08rem;
}

/* Sits under the meet fact grid, which carries its own bottom margin. */
.meet-zone-note {
    margin-top: -20px;
    margin-bottom: 32px;
}

/* Sits inline beside the submission counts in the admin toolbar, so it reads as one more fact
   about the meet being worked rather than a separate block. */
.entry-toolbar-clock {
    color: var(--muted);
}

.entry-toolbar-clock .meet-clock {
    color: var(--navy);
    font-weight: 700;
}

.meet-downloads h2 {
    color: var(--navy);
    margin-bottom: 14px;
}

.download-list {
    display: grid;
    gap: 12px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.download-list a {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--blue);
    border-radius: 8px;
    background: var(--white);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.download-list a:hover,
.download-list a:focus-visible {
    border-color: var(--blue);
    border-left-color: var(--red);
    box-shadow: 0 6px 18px rgba(7, 63, 120, .12);
}

.download-list strong {
    font-size: 1.08rem;
}

.download-list span {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    word-break: break-all;
}

/* Teams, meet directors, and facilities - the directory an admin keeps. */
.team-row {
    grid-template-columns: 1.6fr .7fr 1fr .8fr 1.2fr;
}

.team-row .field-hint,
.facility-row .field-hint {
    display: block;
}

.facility-row {
    grid-template-columns: 1.4fr 2fr .8fr 1.2fr;
}

/* The directors hang under their team rather than squeezing into a column of their own. */
.director-panel {
    grid-template-columns: minmax(0, 1fr);
    background: var(--soft);
}

.director-list {
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.director-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}

.director-line:last-child {
    border-bottom: 0;
}

.director-line.is-superseded {
    color: var(--muted);
}

.director-line .field-hint {
    display: block;
}

.director-form {
    margin-bottom: 12px;
}

/* The email log: a wide subject column, because the subject is what identifies a message. */
.email-row {
    grid-template-columns: 1fr .9fr 1.5fr 1.6fr .9fr;
}

.email-row .field-hint {
    display: block;
    overflow-wrap: anywhere;
}

.email-recipients {
    overflow-wrap: anywhere;
    font-size: .88rem;
}

.email-preview {
    margin-bottom: 20px;
}

.email-frame {
    width: 100%;
    height: 460px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

@media (max-width: 900px) {
    .site-header,
    .hero,
    .meet-card,
    .timing-gallery,
    .builder-layout {
        grid-template-columns: 1fr;
    }

    .site-header {
        display: grid;
        justify-items: start;
    }

    nav {
        justify-content: flex-start;
    }

    .meet-actions {
        justify-items: start;
    }

    .form-grid,
    .document-form {
        grid-template-columns: 1fr;
    }

    .calendar-day {
        min-height: 74px;
    }

    .modal-panel {
        top: 0;
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .calendar-meet {
        font-size: .68rem;
    }

    /* Too narrow for two columns: the address drops under the team name rather than squeezing
       into a strip a few characters wide. */
    .team-contact-list li,
    .team-contact-list .checkbox-label {
        flex-wrap: wrap;
    }

    .team-contact-email {
        flex-basis: 100%;
        text-align: left;
    }

    .email-frame {
        height: 320px;
    }
}