/* =================================================================================================
   meets/meets.css — the ONE shared look of the meets pages (AG_19653).

   Three parts, and a page links this file for one or two of them:
     1. STAFF pages (admin, meet, checklist, edit, questions) put class="mt-staff" on <body>.
        Ink + gold on warm paper, condensed capitals for titles. No web font: the stacks below
        name fonts a Mac and an iPad already have, so nothing is fetched (no CDN on staff pages).
     2. FAMILY pages (index, sign) sit inside the site header, so they keep the site's own fonts
        and its --navy / --blue / --gray-* variables. Only the .mf and .sg rules apply to them.
     3. The MEET CARD and the "What to Wear / Bring" card (.sched-*), printed by the family page
        (index) and by the public /team page (public/schedule.php), which links this file for
        that part alone (AG_19710, AG_19738).

   A page keeps in its own <style> block only what no other page has. A rule two pages share
   belongs here. The base rules for bare elements are wrapped in :where(), so they weigh
   nothing and any page class wins over them.
   🛑 /team is a PUBLIC page and links this file: every rule outside part 3 must stay behind
   .mt-staff, .mf or .sg, so it never reaches that page.
   ================================================================================================= */

:root {
    --mt-ink: #1b1d23;
    --mt-ink-2: #23262e;
    --mt-ink-3: #41454f;
    --mt-paper: #f4f2ec;
    --mt-card: #ffffff;
    --mt-line: #e2dfd6;
    --mt-line-soft: #efece4;
    --mt-muted: #6a6f7b;
    --mt-gold: #b67e1b;
    --mt-gold-deep: #8f6110;
    --mt-gold-soft: #fbf1dc;
    --mt-red: #a8291b;
    --mt-red-soft: #fbdfdc;
    --mt-green: #1e6b34;
    --mt-green-soft: #dff3e3;
    /* One colour per answer state, used by the checklist cells, the one-meet rows and the hub cells. */
    --mt-yes: #dff3e3;
    --mt-no: #e4e5e9;
    --mt-undecided: #fdf3c4;
    --mt-blank: #fbdfdc;
    --mt-paid: #d8ecf5;
    --mt-ready: #e9e1fb;
    --mt-talk: #ffe6cc;
    --mt-display: "Avenir Next Condensed", "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
    --mt-body: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mt-radius: 12px;
    --mt-shadow: 0 10px 30px -22px rgba(27, 29, 35, .55);
}

/* ---------------------------------------------------------------------------------------------
   1 · STAFF pages
   --------------------------------------------------------------------------------------------- */
body.mt-staff {
    margin: 0;
    font-family: var(--mt-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--mt-ink);
    background: var(--mt-paper);
    background-image: linear-gradient(180deg, #ebe7dc 0, var(--mt-paper) 220px);
    background-repeat: no-repeat;
}
:where(body.mt-staff) h1 {
    font-family: var(--mt-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin: 4px 0 10px;
}
:where(body.mt-staff) h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 7px;
    border-radius: 2px;
    background: var(--mt-gold);
}
:where(body.mt-staff) a { color: var(--mt-gold-deep); }

/* Bare form controls and buttons. Zero weight: any class rule on a page beats these. */
:where(body.mt-staff) :is(input[type=text], input[type=date], input[type=number], select, textarea) {
    font: inherit;
    padding: 6px 9px;
    border: 1px solid #cfccc2;
    border-radius: 8px;
    background: #fff;
    color: var(--mt-ink);
    box-sizing: border-box;
}
:where(body.mt-staff) :is(input, select, textarea):focus-visible,
:where(body.mt-staff) :is(button, a):focus-visible {
    outline: 2px solid var(--mt-gold);
    outline-offset: 1px;
}
:where(body.mt-staff) button {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 11px;
    border: 1px solid #cfccc2;
    border-radius: 8px;
    background: #fff;
    color: var(--mt-ink);
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
:where(body.mt-staff) button:hover { border-color: var(--mt-gold); color: var(--mt-gold-deep); }
:where(body.mt-staff) button:disabled { opacity: .5; cursor: default; }

/* The row of links on top of a page. */
.mt-staff .top-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; font-size: 13px; }
.mt-staff .top-links a {
    display: inline-block; padding: 6px 12px; border-radius: 8px; font-weight: 600; text-decoration: none; white-space: nowrap;
    background: #fff; border: 1px solid #cfccc2; color: var(--mt-ink);
}
.mt-staff .top-links a:hover { border-color: var(--mt-gold); color: var(--mt-gold-deep); }
.mt-staff .top-links label { display: inline-flex; align-items: center; gap: 6px; color: var(--mt-muted); font-weight: 600; }

/* Buttons that are links or carry a class. */
.mt-staff .btn {
    display: inline-block; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; cursor: pointer;
    background: #fff; border: 1px solid #cfccc2; color: var(--mt-ink); text-decoration: none; white-space: nowrap;
    transition: border-color .12s, color .12s, background .12s;
}
.mt-staff .btn:hover { border-color: var(--mt-gold); color: var(--mt-gold-deep); }
.mt-staff .btn.main, .mt-staff .btn-primary { background: var(--mt-gold); border-color: var(--mt-gold); color: #fff; }
.mt-staff .btn.main:hover, .mt-staff .btn-primary:hover { background: var(--mt-gold-deep); border-color: var(--mt-gold-deep); color: #fff; }
.mt-staff .btn.small { font-size: 12px; padding: 4px 9px; }
.mt-staff .btn.danger, .mt-staff .btn-danger { color: var(--mt-red); border-color: #e6a49c; background: #fff; }
.mt-staff .btn.danger:hover, .mt-staff .btn-danger:hover { background: var(--mt-red-soft); border-color: var(--mt-red); color: var(--mt-red); }
.mt-staff .btn:disabled { opacity: .45; cursor: default; }

.mt-staff .muted { color: var(--mt-muted); font-size: 13px; }
.mt-staff .sub { color: var(--mt-muted); font-size: 12px; }
.mt-staff .empty { color: var(--mt-muted); margin: 30px 0; }

.mt-staff .banner { border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px;
                    background: var(--mt-red-soft); border: 1px solid #d9796c; color: #8d2c20; }
.mt-staff .banner a { color: #8d2c20; font-weight: 600; }
.mt-staff .banner.ok { background: var(--mt-green-soft); border-color: #9fd3ae; color: var(--mt-green); }

.mt-staff .tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 20px;
                 background: var(--mt-ink-3); color: #e4e5e9; }

/* Filter chips: a hidden checkbox and its label (the hub's Season questions, the checklist). */
.mt-staff .chip { display: block; margin: 3px 0; cursor: pointer; }
.mt-staff .chip span { display: block; padding: 4px 9px; border: 1px solid #cfccc2; border-radius: 20px; background: #fff;
                       font-size: 11.5px; line-height: 1.3; user-select: none; transition: background .12s, border-color .12s; }
.mt-staff .chip:hover span { border-color: var(--mt-gold); }
.mt-staff .chip input:checked + span { background: var(--mt-gold); color: #fff; border-color: var(--mt-gold); }

/* The answer states. */
.mt-staff .c-paid { background: var(--mt-paid); }
.mt-staff .c-ready { background: var(--mt-ready); }
.mt-staff .c-talk { background: var(--mt-talk); }
.mt-staff .c-unpaid, .mt-staff .a-yes { background: var(--mt-yes); }
.mt-staff .c-no, .mt-staff .a-no { background: var(--mt-no); }
.mt-staff .c-undecided, .mt-staff .a-other { background: var(--mt-undecided); }
.mt-staff .c-blank, .mt-staff .a-blank { background: var(--mt-blank); }
.mt-staff .a-paid { background: var(--mt-paid); }

/* The pop-up form: the checklist's cell box (#box) and the one-meet page's modal card. */
.mt-staff #box, .mt-staff .modal .card {
    background: #fff; border: 1px solid var(--mt-line); border-top: 4px solid var(--mt-gold); border-radius: var(--mt-radius);
    box-shadow: 0 18px 46px -18px rgba(27, 29, 35, .5); padding: 14px 18px 16px; text-align: left; font-size: 13px;
}
.mt-staff #box h3, .mt-staff .modal h3 { margin: 0 0 8px; font-family: var(--mt-display); font-size: 19px; letter-spacing: .03em; text-transform: uppercase; }
.mt-staff #box label, .mt-staff .modal label { display: block; margin: 8px 0 3px; color: var(--mt-ink-3); font-weight: 600; }
.mt-staff #box :is(select, textarea, input[type=text]), .mt-staff .modal :is(select, textarea, input[type=text]) { width: 100%; }
.mt-staff #box .hint, .mt-staff .modal .hint { color: var(--mt-muted); font-size: 12px; font-weight: 400; }
.mt-staff #box .warn, .mt-staff .modal .warn { color: var(--mt-red); font-size: 12px; }
.mt-staff #box .actions, .mt-staff .modal .actions { margin-top: 14px; display: flex; gap: 8px; align-items: center; }
.mt-staff #box .actions [data-box=save], .mt-staff .modal .actions :is([data-save], [data-go]) { background: var(--mt-gold); border-color: var(--mt-gold); color: #fff; }
.mt-staff #box .actions [data-box=save]:hover, .mt-staff .modal .actions :is([data-save], [data-go]):hover { background: var(--mt-gold-deep); border-color: var(--mt-gold-deep); }
.mt-staff #box .status, .mt-staff .modal .status { font-size: 12px; }

/* The text-message area (createTextMessageBox) on the checklist and the one-meet page. */
.mt-staff #makeTextMessageBox { margin: 10px auto; }

/* ---------------------------------------------------------------------------------------------
   2 · FAMILY pages — inside the site header; the site's fonts and colour variables apply
   --------------------------------------------------------------------------------------------- */
.mf, .sg { margin: 0 auto; padding: 22px 15px 48px; font-family: 'DM Sans', Arial, sans-serif; color: var(--gray-700, #333); line-height: 1.5; }
.mf a, .sg a { color: #1b76c4; }   /* the site's --blue is too pale for text on white */
.mf :is(select, input[type=text], textarea), .sg input[type=text] {
    font: inherit; font-size: 16px;   /* 16px: an iPhone does not zoom the page on focus */
    padding: 9px 11px; border: 1px solid var(--gray-300, #ccc); border-radius: 10px; background: #fff; max-width: 100%; box-sizing: border-box;
}
.mf :is(select, input[type=text], textarea):focus, .sg input[type=text]:focus {
    outline: none; border-color: var(--blue, #1e88e5); box-shadow: 0 0 0 3px rgba(30, 136, 229, .18);
}
.mf button, .sg form button {
    font: inherit; font-family: 'Barlow Condensed', 'DM Sans', 'DM Sans Fallback', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
    min-height: 42px; padding: 8px 20px; border: none; border-radius: 10px; cursor: pointer;
    background: var(--navy, #0f1b2d); color: #fff; transition: background .12s, transform .08s;
}
.mf button:hover, .sg form button:hover { background: #22395c; }
.mf button:active, .sg form button:active { transform: translateY(1px); }
.mf button:disabled { opacity: .55; cursor: default; }
.mf button.off { background: #fff; color: var(--navy, #0f1b2d); box-shadow: inset 0 0 0 1.5px var(--gray-300, #ccc); }
.mf button.off:hover { background: var(--gray-100, #f3f4f6); }
.mf .err, .sg .err { color: #c62828; font-size: 14px; font-weight: 600; }
.mf .lock { color: #8a6d3b; font-size: 13px; }

/* ---------------------------------------------------------------------------------------------
   3 · The MEET CARD — the ONE copy, for /meets/ (meets/index.php) and /team (public/schedule.php)
   Only what the two pages have the same is here. Each page links this file ABOVE its own <style>
   block, and that block adds what it alone has (/team: the click-to-open header, hover, past and
   next cards; /meets/: the kids' choices beside the title). Every rule is one class, so a page
   rule of the same weight wins by coming later.
   --------------------------------------------------------------------------------------------- */
.sched-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid var(--gray-200); }
.sched-card--meet { border-left: 4px solid var(--blue); }

/* Card header: title + date pills */
.sched-card-header { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 14px 20px; }
.sched-card-title { font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif; font-weight: 700; font-size: 20px; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; }
.sched-card-dates { display: flex; align-items: center; gap: 6px; }
.sched-date-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; padding: 5px 12px; border-radius: 6px; font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.3px; }

/* 3-column body */
.sched-card-columns { display: grid; grid-template-columns: auto auto 1fr; gap: 0; }
.sched-col { padding: 14px 20px; font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: 13px; color: var(--gray-600); line-height: 1.7; }
.sched-col + .sched-col { border-left: 1px solid var(--gray-100); }
.sched-col i { color: var(--blue); margin-right: 4px; width: 14px; text-align: center; display: inline-block; }

/* Deadline items within a column */
.sched-deadline-item { margin-bottom: 4px; }
.sched-deadline-item .dl-label { font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.3px; color: var(--navy); }
.sched-deadline-item .dl-date { margin-left: 4px; }
.sched-deadline-item--past { color: var(--gray-400); }
.sched-deadline-item--past .dl-label { color: var(--gray-400); }

/* Details-only card body (no columns) */
.sched-card-simple { padding: 14px 20px; font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: 14px; color: var(--gray-600); line-height: 1.6; }

/* The "What to Wear / Bring" card (meets/wear_bring.php, the one copy of its words; AG_19738).
   /team prints it open; /meets/ prints it shut and adds its own fold rules. */
.sched-wear-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 48px; border: 1px solid var(--gray-200); }
.sched-wear-header { background: var(--navy); padding: 14px 20px; text-align: center; }
.sched-wear-header h2 { font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif; font-weight: 700; font-size: 20px; color: #fff; text-transform: uppercase; letter-spacing: 0.8px; margin: 0; }
.sched-wear-header h2 i { margin-right: 8px; }
.sched-wear-body { padding: 24px 28px; font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: 15px; color: var(--gray-900); line-height: 1.7; }
.sched-wear-body h3 { font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif; font-weight: 700; font-size: 16px; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 8px 0; padding-bottom: 4px; border-bottom: 2px solid var(--gold); display: inline-block; }
.sched-wear-body h3:first-child { margin-top: 0; }
.sched-wear-body ul { list-style: none; padding: 0; margin: 0 0 4px 0; }
.sched-wear-body ul li { padding: 4px 0 4px 20px; position: relative; }
.sched-wear-body ul li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.sched-wear-body ul ul { margin-top: 2px; }
.sched-wear-body ul ul li::before { background: var(--gray-400); width: 4px; height: 4px; top: 14px; left: 6px; }
.wear-note { display: inline-block; margin-left: 6px; font-size: 13px; color: var(--gray-400); font-style: italic; }
.sched-wear-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gray-100); font-size: 13px; color: var(--gray-400); text-align: center; }

@media (max-width: 640px) {
    .sched-card-columns { grid-template-columns: 1fr; }
    .sched-col + .sched-col { border-left: none; border-top: 1px solid var(--gray-100); }
    .sched-wear-body { padding: 20px 16px; }
}