/* ═══════════════════════════════════════════════════════════════════════
   The "Remind me" drawer — ONE stylesheet, every surface.

   It used to borrow the public league page's .pcm-* rules, which live in a
   <style> block PublicLeagueController prints. That worked until Registration
   Near You needed the same drawer: that page is served from a static file and
   loads app.css, so it has no .pcm-* at all. The choices were a second copy of
   the rules or a sheet both pages link, and this codebase has already paid for
   a second copy once — #ev-modal and #pubcal-modal drifted into two different
   email inputs, one of them 14px, which makes iOS zoom on focus and stay
   zoomed.

   So the drawer owns its look under .rmd-*, depends on nothing a host page
   happens to define, and is linked by both. Values are ported from .pcm-* so
   the league page looks exactly as it did.

   Dark surfaces (the Bold shell) add .is-dark to the overlay — remind-drawer.js
   reads it from its own script tag's data-dark.
   ═══════════════════════════════════════════════════════════════════════ */

.rmd-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.rmd-overlay[hidden] { display: none; }

.rmd-box {
    --rmd-pad: 30px; --rmd-pad-t: 30px; --rmd-pad-b: 26px; --rmd-bg: #fff;
    background: var(--rmd-bg); color: #1f2937;
    border-radius: 16px; width: 100%; max-width: 460px;
    max-height: 88vh; overflow: auto;
    /* ⚠ Scrolling to the end of the panel must not carry on into the page.
       A NARROWED drawer deliberately leaves the page scrollable, so without
       this, hitting the bottom starts moving the page under you. */
    overscroll-behavior: contain;
    padding: var(--rmd-pad-t) var(--rmd-pad) var(--rmd-pad-b);
    position: relative; box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    display: flex; flex-direction: column;
}
/* A column flex container shrinks its children by default, which would squash
   the sticky header the moment the body is taller than the box. */
.rmd-box > * { flex-shrink: 0; }

/* Full-bleed, pinned to the very top. The sticky offset is the box's OWN top
   padding negated: a scrollport's sticky rectangle is inset by its padding, so
   top:0 pins the bar that far down and the text scrolls into the gap above it. */
.rmd-head {
    position: sticky; top: calc(var(--rmd-pad-t) * -1); z-index: 3;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    margin: calc(var(--rmd-pad-t) * -1) calc(var(--rmd-pad) * -1) 20px;
    padding: 14px var(--rmd-pad);
    background: var(--rmd-bg); border-bottom: 1px solid #e5e7eb;
}
.rmd-head-text { min-width: 0; flex: 1 1 auto; padding-top: 4px; }
/* The header bar's controls, ported from the services panel (2026-10-18) so
   every public drawer has the same two chips in the same corner: 44px (the
   phone minimum), radius 12, grey — the Luke & Spencer treatment.

   The size toggle comes FIRST so close keeps the corner it has always had; a
   visitor reaching for the X must not find a new button under their cursor. */
.rmd-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rmd-close, .rmd-size {
    flex: 0 0 auto; width: 44px; height: 44px;           /* 44px hit area */
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 0; border: none; border-radius: 12px;
    background: #f5f5f5; color: #666; line-height: 1; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
/* ⚠ NO `display` HERE — see the note in pcmStyles(). `.rmd-size svg` is
   (0,1,1) and would beat `.pe-dico-out` (0,1,0) for that one property,
   showing both arrows in the button. */
.rmd-close svg, .rmd-size svg { width: 18px; height: 18px; }
/* NOTHING lifts on hover — background and colour only. */
.rmd-close:hover, .rmd-size:hover { background: #e0e0e0; color: #333; }
.rmd-close:focus-visible, .rmd-size:focus-visible {
    outline: 2px solid var(--league-secondary, #38bdf8); outline-offset: 2px;
}

/* A short rule the width of a word under the title — the panels' one piece of
   ornament, and it marks where a long heading ends. */
.rmd-rule {
    display: block; width: 54px; height: 3px; margin-top: 9px;
    border-radius: 2px; background: var(--league-secondary, #38bdf8);
}

/* One button, two glyphs. The panel opens WIDE, so it opens showing CONTRACT —
   which is also what says the wide state is the default rather than something
   you did. pe-dico-* is shared with the other public drawers; this sheet also
   declares it because Registration Near You links this file ALONE. */
.pe-dico-out { display: none; }
.is-narrow .pe-dico-in { display: none; }
.is-narrow .pe-dico-out { display: block; }

.rmd-kind {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #64748b; margin-bottom: 4px;
}
.rmd-kind:empty { display: none; }
.rmd-kind::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: var(--league-secondary, #38bdf8);
}
/* Double class: a public skin's `h1..h6` rule is (0,1,1) and beats a bare
   class, so the heading would come out in the league's editorial serif. */
.rmd-box .rmd-title {
    font-family: var(--lp-font-heading, inherit);
    font-size: 21px; font-weight: 800; margin: 0; color: #0f172a; line-height: 1.3;
}
.rmd-desc { font-size: 14px; line-height: 1.65; color: #475569; margin: 0 0 22px; }

.rmd-rows { margin: 0 0 22px; display: grid; gap: 14px; }
.rmd-row { display: flex; gap: 16px; font-size: 14px; align-items: baseline; }
.rmd-row-k { flex: 0 0 128px; color: #94a3b8; font-weight: 600; }
.rmd-row-v { color: #1f2937; line-height: 1.45; }

.rmd-form { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; }
.rmd-label {
    font-size: 12.5px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .04em;
}
/* 16px is not a style choice: anything smaller makes iOS zoom the page in on
   focus and leave it zoomed. */
.rmd-input {
    width: 100%; box-sizing: border-box; min-width: 0;
    border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px;
    font-size: 16px; font-family: inherit; color: #1f2937; background: #fff;
}
.rmd-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
/* Honeypot: a bot fills every field it finds; a person never sees this one. */
.rmd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.rmd-send {
    width: 100%; display: block; text-align: center; box-sizing: border-box;
    background: var(--league-btn-bg, var(--league-secondary, #2563eb));
    color: var(--league-btn-text, #fff);
    padding: 12px 24px; border-radius: 8px; border: none;
    font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer;
}
.rmd-send[disabled] { opacity: .65; cursor: default; }

.rmd-msg { font-size: 13px; line-height: 1.45; width: 100%; margin-top: 10px; }
.rmd-msg.is-ok { color: #15803d; font-weight: 600; }
.rmd-msg.is-err { color: #dc2626; font-weight: 600; }

.rmd-note {
    font-size: 13px; line-height: 1.6; color: #64748b;
    margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #e8ecf3;
}
.rmd-note a { color: #0284c7; font-weight: 600; }
/* `display:flex` on .rmd-box would otherwise beat the UA's [hidden] rule and
   keep the note's top border on screen with nothing under it. */
.rmd-note[hidden] { display: none; }

/* ── Dark surfaces (the Bold shell) ───────────────────────────────────── */
.rmd-overlay.is-dark { background: rgba(0, 0, 0, .66); }
.rmd-overlay.is-dark .rmd-box { --rmd-bg: #16181f; color: #e5e7eb; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); }
.rmd-overlay.is-dark .rmd-head { border-bottom-color: rgba(255, 255, 255, .12); }
.rmd-overlay.is-dark .rmd-close,
.rmd-overlay.is-dark .rmd-size { background: rgba(255, 255, 255, .07); color: #9aa4b2; }
.rmd-overlay.is-dark .rmd-close:hover,
.rmd-overlay.is-dark .rmd-size:hover { background: rgba(255, 255, 255, .14); color: #e5e7eb; }
.rmd-overlay.is-dark .rmd-kind { color: #9aa4b2; }
.rmd-overlay.is-dark .rmd-box .rmd-title { color: #fff; }
.rmd-overlay.is-dark .rmd-desc { color: #c3c9d4; }
.rmd-overlay.is-dark .rmd-row-k { color: #8b93a1; }
.rmd-overlay.is-dark .rmd-row-v { color: #e5e7eb; }
.rmd-overlay.is-dark .rmd-label { color: #8b93a1; }
.rmd-overlay.is-dark .rmd-input { background: #0f1116; border-color: #333a48; color: #e5e7eb; }
.rmd-overlay.is-dark .rmd-input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, .16); }
.rmd-overlay.is-dark .rmd-msg.is-ok { color: #4ade80; }
.rmd-overlay.is-dark .rmd-msg.is-err { color: #fca5a5; }
.rmd-overlay.is-dark .rmd-note { color: #9aa4b2; border-top-color: rgba(255, 255, 255, .12); }
.rmd-overlay.is-dark .rmd-note a { color: #7dd3fc; }

/* ── A side drawer from 600px up ──────────────────────────────────────── */
@media (min-width: 600px) {
    .rmd-overlay { align-items: stretch; justify-content: flex-end; padding: 0; }
    /* 680 to match the event-details drawer on the same page. A short form does
       not need the room, but two panels sliding in from the same edge at two
       different widths is the thing a visitor notices. */
    .rmd-box {
        width: min(var(--pe-drawer-w, 680px), 94vw); max-width: min(var(--pe-drawer-w, 680px), 94vw);
        height: 100%; max-height: 100%; border-radius: 0;
        --rmd-pad: 34px; --rmd-pad-t: 34px; --rmd-pad-b: 30px;
        padding: var(--rmd-pad-t) var(--rmd-pad) var(--rmd-pad-b);
        box-shadow: -18px 0 48px rgba(0, 0, 0, .28);
        /* Its own compositor layer while it slides, as L&S does. */
        will-change: transform;
        /* The accent edge: the only thing separating a panel from the page
           behind it, and it carries the league's colour rather than a grey
           hairline. 5px, from L&S — at 4 it reads as a border, at 5 as a
           deliberate mark. */
        border-left: 5px solid var(--league-secondary, #38bdf8);
        animation: rmdIn .38s cubic-bezier(.32, .72, 0, 1);
        /* ⚠ RESIZING IS A TRANSITION, NOT A JUMP (Robb, 2026-10-18: "I want a
           smooth transition"). Expand/contract only swaps `is-narrow`, so
           without this the panel teleports between 680 and 520 in one frame.
           Same easing and duration as the admin drawers in app.css. */
        transition: width .32s cubic-bezier(.65, 0, .35, 1), max-width .32s cubic-bezier(.65, 0, .35, 1);
    }
    .rmd-overlay.is-closing { pointer-events: none; }
    .rmd-overlay.is-closing .rmd-box { animation: rmdOut .26s cubic-bezier(.32, .72, 0, 1) forwards; }

    /* ⚠ WIDE IS THE DEFAULT and `is-narrow` is the opt-out. 520 is the narrow
       width of every public drawer, so two panels narrowed from DIFFERENT
       expanded widths land on the same readable column. */
    .rmd-overlay.is-narrow .rmd-box {
        width: min(var(--pe-drawer-w-narrow, 520px), 94vw);
        max-width: min(var(--pe-drawer-w-narrow, 520px), 94vw);
    }
    /* ⚠ A NARROWED PANEL IS NOT A DIALOG — it is a side panel, and the page
       beside it is meant to be read and used. The scrim clears, and the
       full-viewport overlay has to STOP INTERCEPTING THE POINTER or it
       swallows every scroll and click through a page you can see perfectly
       well. The panel itself stays interactive, hence the pair. Desktop only:
       a phone sheet has no narrow state and must stay modal. */
    .rmd-overlay.is-narrow { background: rgba(0, 0, 0, 0); pointer-events: none; }
    .rmd-overlay.is-narrow .rmd-box { pointer-events: auto; }
}
@keyframes rmdIn  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes rmdOut { from { transform: none; } to { transform: translateX(100%); } }

/* The scrim fades with the panel rather than snapping to full strength the
   instant the overlay is displayed. Ported from L&S, which transitions the
   overlay's opacity; `hidden` cannot be transitioned out of, so this is the
   keyframe form of the same thing. */
@keyframes peScrimIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes peScrimOut { from { opacity: 1; } to { opacity: 0; } }
.rmd-overlay:not([hidden]) { animation: peScrimIn .26s ease; }
.rmd-overlay.is-closing { animation: peScrimOut .26s ease forwards; }

/* ── A bottom sheet below 600px ───────────────────────────────────────── */
@media (max-width: 599px) {
    .rmd-overlay { align-items: flex-end; padding: 0; }
    .rmd-box {
        width: 100%; max-width: 100%; border-radius: 20px 20px 0 0;
        max-height: 92vh;
    }
    /* The grab bar belongs to the STICKY HEAD, not to the box: on the box it
       sits above the bar, the bar's negative top margin rides over it, and it
       scrolls away leaving the sheet with no grabber (the .pcm-* sheets paid
       for that lesson first). touch-action:none hands the vertical gesture to
       the sheet; without it the browser scrolls the page instead of letting
       the sheet follow the finger. A tap still reaches the close button. */
    .rmd-head { padding-top: 20px; cursor: grab; touch-action: none; }
    .rmd-head:active { cursor: grabbing; }
    .rmd-head::before {
        content: ''; position: absolute; top: 8px; left: 50%;
        transform: translateX(-50%); width: 36px; height: 4px;
        background: #d1d5db; border-radius: 2px;
    }
    .rmd-overlay.is-dark .rmd-head::before { background: rgba(255, 255, 255, .3); }
    /* While a finger is down the sheet tracks it exactly, so the easing is off. */
    .rmd-overlay.is-dragging .rmd-box { animation: none; }
    /* A bottom sheet is already the full width of the screen. */
    .rmd-size { display: none; }
    .rmd-row { flex-direction: column; gap: 2px; }
    .rmd-row-k { flex: none; font-size: 12px; }

    /* ── 44px is the floor for anything you tap ───────────────────────────
       Measured on a 375px phone before this: the email field came out 43,
       the submit 42 and the "create it now" link 38. Close enough to look
       right and under the floor every other surface in this app holds to.

       ⚠ Grow the HIT AREA, never the visual. The input and the button are
       boxes, so a min-height is the hit area; the note's link is a run of
       text mid-sentence, and padding it would push the sentence apart — it
       gets the ::after expander the shared mobile pass in app.css uses for
       exactly this, same inset. */
    .rmd-input { min-height: 44px; }
    .rmd-send {
        min-height: 44px;
        /* The label is one line, so centre it in the taller box rather than
           letting the extra height sit under the text. */
        display: flex; align-items: center; justify-content: center;
    }
    .rmd-note a { position: relative; }
    .rmd-note a::after { content: ""; position: absolute; inset: -11px -12px; }
}
@media (prefers-reduced-motion: reduce) {
    .rmd-box { animation: none !important; }
}