/* Fundraisers.
 *
 * Two halves in one file.
 *
 *   .frp-*   the PUBLIC page at /f/{slug} (public_fundraiser.php), which has none of the app's chrome:
 *            no sidebar, no header, no session. Somebody arrives from a text message on a phone, so
 *            the squares are big, the numbers are readable at arm's length and nothing needs a mouse.
 *   .fr-*    the organizer's pages inside the app (fundraisers.php, fundraiser_create.php,
 *            fundraiser_manage.php), which sit under the normal header and sidebar and borrow its
 *            variables.
 *
 * Brand: navy #0F2642, green #70af43, Barlow Condensed for headlines and Inter for text, the same
 * pair the public tournament page uses.
 */

/* =============================================================== public page */

* { box-sizing: border-box; }

body.frp {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
    background: #f8fafc;
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
}

/* An element that sets its own display (.frp-pick is a flex row) would otherwise ignore the hidden attribute. */
.frp [hidden], .fr-page [hidden] { display: none !important; }

.frp-wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.frp-offscreen { position: absolute; left: -9999px; top: 0; }
.frp a { color: #0F2642; }

.frp-top { background: #0b1d33; color: #cbd5e1; font-size: 0.9rem; }
.frp-top__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; }
.frp-brand { display: inline-flex; align-items: center; text-decoration: none; }
.frp-brand img { display: block; height: 30px; width: auto; }
.frp-top__links { display: flex; align-items: center; gap: 18px; }
.frp-top__links a { color: #e2e8f0 !important; font-weight: 600; text-decoration: none; }
.frp-top__links a:hover { color: #ffffff !important; }
.frp-top__links .frp-top__cta { background: #9be26b; color: #0F2642 !important; padding: 8px 16px; border-radius: 999px; }
.frp-top__links .frp-top__cta:hover { background: #b2ee86; color: #0F2642 !important; }
@media (max-width: 520px) { .frp-top__links a:not(.frp-top__cta) { display: none; } }

/* ------------------------------------------------------------------- hero */

/* Navy with a faint chalk-line diagonal and a green glow, over a stadium at night with nobody in it (fundraiser-hero.jpg: floodlights
   blurred past recognition, no people, nothing readable, no sport). It is scenery and nothing more: a child's photo is still only ever
   the one framed picture below, and if the picture never loads the navy underneath is the whole hero, so nothing depends on it. The
   veil on top is heavier on the left, where the name sits, and keeps white text well clear of the contrast it needs. A phone shows a
   tall narrow slice, so it gets the middle of the picture (fundraiser-hero-m.jpg) rather than a 2000 pixel strip it would mostly crop. */
.frp-hero {
    position: relative; overflow: hidden; color: #ffffff; padding: 38px 0 44px;
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(112, 175, 67, 0.32), transparent 62%),
        radial-gradient(700px 420px at -5% 105%, rgba(37, 78, 130, 0.75), transparent 60%),
        linear-gradient(90deg, rgba(11, 29, 51, 0.9) 0%, rgba(11, 29, 51, 0.66) 48%, rgba(11, 29, 51, 0.4) 100%),
        url("../img/fundraiser-hero.jpg") center / cover no-repeat,
        #0b1d33;
}
@media (max-width: 720px) {
    .frp-hero {
        background:
            radial-gradient(900px 420px at 88% -10%, rgba(112, 175, 67, 0.32), transparent 62%),
            radial-gradient(700px 420px at -5% 105%, rgba(37, 78, 130, 0.75), transparent 60%),
            linear-gradient(180deg, rgba(11, 29, 51, 0.8), rgba(11, 29, 51, 0.62)),
            url("../img/fundraiser-hero-m.jpg") center / cover no-repeat,
            #0b1d33;
    }
}
.frp-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 46px);
}
.frp-hero .frp-wrap { position: relative; }
.frp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.frp-hero__id { display: flex; align-items: center; gap: 28px; }
.frp-hero__text { min-width: 0; }

.frp-avatar {
    flex: none; width: clamp(104px, 17vw, 200px); aspect-ratio: 1; border-radius: 18px; overflow: hidden;
    display: grid; place-items: center; border: 4px solid #ffffff;
    background: linear-gradient(135deg, #78b84a, #3f7a22); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.frp-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frp-avatar span {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-style: italic;
    font-size: clamp(3rem, 9vw, 6rem); line-height: 1; color: #ffffff; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.frp-kicker {
    margin: 0 0 2px; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-style: italic;
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 1.05rem; color: #9be26b;
}
.frp-name {
    margin: 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-style: italic;
    text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 0.95; letter-spacing: 0.005em;
    overflow-wrap: anywhere; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}
.frp-rule { display: block; width: 92px; height: 5px; margin: 12px 0 12px; border-radius: 4px; background: #9be26b; }
.frp-sub { margin: 0 0 12px; font-size: clamp(1rem, 2.6vw, 1.2rem); color: #e2e8f0; overflow-wrap: anywhere; }
.frp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.frp-chips li {
    padding: 5px 14px; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px; background: rgba(255, 255, 255, 0.07);
    font-size: 0.85rem; font-weight: 600; color: #f1f5f9;
}

.frp-banner {
    margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 0.92rem;
}
.frp-banner--preview { background: #fef3c7; color: #78350f; }
.frp-banner--warn { background: #fef3c7; color: #78350f; }

@media (max-width: 860px) {
    .frp-hero { padding: 26px 0 30px; }
    .frp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .frp-hero__id { gap: 16px; }
    .frp-avatar { border-width: 3px; border-radius: 14px; }
}
/* ------------------------------------------------------------------- layout */

.frp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}
.frp-aside { grid-column: 2; grid-row: 1; position: sticky; top: 14px; display: grid; gap: 16px; }
.frp-main { grid-column: 1; grid-row: 1; display: grid; gap: 16px; min-width: 0; }

@media (max-width: 860px) {
    .frp-grid { grid-template-columns: minmax(0, 1fr); }
    .frp-aside, .frp-main { grid-column: 1; grid-row: auto; position: static; }
}

.frp-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.frp-card h2 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.5rem; margin: 0 0 8px; color: #0F2642; letter-spacing: 0.01em; }
.frp-card h3 { font-size: 1.05rem; margin: 0 0 6px; color: #0F2642; }
.frp-help, .frp-legend-note { color: #64748b; font-size: 0.88rem; margin: 0 0 10px; }
.frp-story p { margin: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- progress */

.frp-progress__raised { margin: 0 0 10px; color: #475569; }
.frp-progress__raised strong { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 2.4rem; color: #0F2642; line-height: 1; margin-right: 6px; }
.frp-bar { display: flex; height: 16px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.frp-bar__received { background: #70af43; transition: width 0.6s ease; }
.frp-bar__way {
    background: repeating-linear-gradient(135deg, #b9dca0, #b9dca0 6px, #d4eac2 6px, #d4eac2 12px);
    transition: width 0.6s ease;
}
.frp-stats { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 4px; color: #475569; font-size: 0.92rem; }
.frp-stats strong { color: #0F2642; }

/* The progress card lives in the hero now: glass over the navy, the amount in green, one big button. */
.frp-progress--hero {
    background: rgba(8, 22, 40, 0.72); border: 1px solid rgba(255, 255, 255, 0.2); color: #e2e8f0; padding: 22px 22px 18px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.frp-progress__title {
    margin: 0 0 8px; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; font-size: 1.4rem; line-height: 1.1; color: #ffffff; overflow-wrap: anywhere;
}
.frp-card.frp-progress--hero h2 { color: #ffffff; }
.frp-progress--hero .frp-progress__raised { color: #cbd5e1; margin-bottom: 12px; }
.frp-progress--hero .frp-progress__raised strong { color: #9be26b; font-size: clamp(2.6rem, 7vw, 3.6rem); }
.frp-progress--hero .frp-bar { height: 18px; background: rgba(255, 255, 255, 0.2); }
.frp-progress--hero .frp-bar__received { background: linear-gradient(90deg, #70af43, #9be26b); }
.frp-progress--hero .frp-bar__way { background: repeating-linear-gradient(135deg, #5f7f4a, #5f7f4a 6px, #7d9f66 6px, #7d9f66 12px); }
.frp-progress__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin: 10px 0 0; font-size: 0.92rem; color: #cbd5e1; }
.frp-progress__meta b, .frp-progress__days strong { color: #ffffff; }
.frp-progress--hero .frp-stats { color: #cbd5e1; }
.frp-progress--hero .frp-stats strong { color: #ffffff; }
.frp-stats--row { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 16px; }
.frp-progress--hero .frp-legend-note { margin: 12px 0 0; color: #94a3b8; font-size: 0.8rem; }

.frp-btn--lime { background: #9be26b; color: #0F2642 !important; }
.frp-btn--lime:hover { background: #b2ee86; }
.frp-btn--lg {
    padding: 16px 20px; font-size: 1.15rem; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.04em;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800;
}

/* The story card, with where the money goes and a thank-you in a hand-written face. */
.frp-uses { margin-top: 16px; padding: 12px 16px; background: #f4faed; border-left: 4px solid #70af43; border-radius: 0 10px 10px 0; }
.frp-uses h3 { margin: 0 0 4px; }
.frp-uses p { margin: 0; color: #334155; overflow-wrap: anywhere; }
.frp-thanks {
    margin: 20px 0 0 !important; font-family: "Caveat", "Segoe Script", cursive; font-weight: 600; font-size: 2rem; line-height: 1.15;
    color: #0F2642; padding-bottom: 8px; border-bottom: 4px solid #9be26b; display: inline-block; max-width: 100%;
}

/* "Ways to give": the methods by name. The details are not on the page; they arrive with a started gift. */
.frp-ways__list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.frp-ways__list li {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 10px;
    background: #f8fafc; font-weight: 700; color: #0F2642; overflow-wrap: anywhere;
}
.frp-ways__list li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #70af43; }

/* A phone's "Support" bar: always in reach until the giving card itself is on screen. */
.frp-sticky { display: none; }
@media (max-width: 860px) {
    .frp-sticky {
        display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20;
        padding: 15px 18px; border-radius: 14px; text-align: center; text-decoration: none; background: #9be26b; color: #0F2642 !important;
        font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.04em;
        text-transform: uppercase; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    }
    body.frp { padding-bottom: 84px; }
}

/* ----------------------------------------------------------------- buttons */

.frp-btn {
    display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
    padding: 11px 18px; border-radius: 9px; font: inherit; font-weight: 600; font-size: 0.95rem;
    line-height: 1.2;
}
.frp-btn--block { display: block; width: 100%; }
.frp-btn--primary { background: #70af43; color: #ffffff !important; }
.frp-btn--primary:hover { background: #5f9a37; }
.frp-btn--navy { background: #0F2642; color: #ffffff !important; }
.frp-btn--navy:hover { background: #1a3a63; }
.frp-btn--ghost { background: #ffffff; color: #0F2642 !important; border: 1px solid #cbd5e1; }
.frp-btn--ghost:hover { background: #f1f5f9; }
.frp-btn--small { padding: 7px 12px; font-size: 0.85rem; }
.frp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.frp-btn:focus-visible, .frp-square:focus-visible, .frp-preset:focus-visible { outline: 3px solid #70af43; outline-offset: 2px; }
.frp-link { background: none; border: 0; color: #64748b; text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.88rem; padding: 6px 0; margin-top: 10px; }

.frp-undo { margin: 0 0 6px; }
.frp-share__row { display: flex; flex-wrap: wrap; gap: 8px; }
.frp-share__row .frp-btn { padding: 8px 12px; font-size: 0.88rem; }

/* ----------------------------------------------------------------- squares */

.frp-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; padding: 0; font-size: 0.82rem; color: #475569; }
.frp-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; border: 2px solid #cbd5e1; background: #ffffff; margin-right: 4px; }
.frp-key--taken { background: #fde68a; border-color: #f59e0b; }
.frp-key--confirmed { background: #0F2642; border-color: #0F2642; }

.frp-squares { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.frp-square {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 62px; padding: 6px 4px; background: #ffffff; border: 2px solid #cbd5e1; border-radius: 10px;
    font: inherit; color: #0F2642; cursor: pointer; transition: transform 0.08s ease, border-color 0.08s ease;
}
.frp-square:hover:not(:disabled) { border-color: #70af43; transform: translateY(-1px); }
.frp-square__label { font-size: 0.7rem; color: #64748b; line-height: 1.1; }
.frp-square__amt { font-weight: 700; font-size: 1.12rem; line-height: 1.2; }
.frp-square[aria-pressed="true"] { background: #e0f2d8; border-color: #70af43; box-shadow: inset 0 0 0 1px #70af43; }
.frp-square[data-state="taken"] { background: #fef3c7; border-color: #f59e0b; color: #92400e; cursor: not-allowed; }
.frp-square[data-state="taken"] .frp-square__amt { text-decoration: line-through; }
.frp-square[data-state="confirmed"] { background: #0F2642; border-color: #0F2642; color: #ffffff; cursor: not-allowed; }
.frp-square[data-state="confirmed"] .frp-square__label { color: #cbd5e1; }
.frp-square__mark { position: absolute; top: 3px; right: 6px; font-size: 0.8rem; color: #9be26b; }

.frp-pick {
    position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 12px 14px; background: #0F2642; color: #ffffff; border-radius: 10px;
    font-weight: 600;
}

.frp-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.frp-preset {
    padding: 12px 20px; border: 2px solid #cbd5e1; border-radius: 10px; background: #ffffff; color: #0F2642;
    font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
}
.frp-preset[aria-pressed="true"] { background: #e0f2d8; border-color: #70af43; }

/* -------------------------------------------------------------------- forms */

.frp-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.frp-field { display: block; margin: 0 0 14px; border: 0; padding: 0; }
.frp-field > span, .frp-field > legend { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; color: #1e293b; padding: 0; }
.frp-field em { font-weight: 400; color: #64748b; font-style: normal; }
.frp-field input[type="text"], .frp-field select, .frp-sentrow select, .frp-field textarea {
    width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; background: #ffffff; color: #0f172a;
}
.frp-field input:focus, .frp-sentrow select:focus { outline: 3px solid rgba(112, 175, 67, 0.4); border-color: #70af43; }
.frp-radio label { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-weight: 500; }
.frp-form__row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.frp-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.frp-error { margin: 8px 0; padding: 10px 12px; background: #fee2e2; color: #991b1b; border-radius: 8px; font-size: 0.92rem; }

/* ---------------------------------------------------------- the claim panel */

#frp-claim { border-color: #70af43; border-width: 2px; }
.frp-hold { margin: 0 0 8px; color: #92400e; font-weight: 600; }
.frp-ref { margin: 0 0 14px; padding: 10px 12px; background: #f1f5f9; border-radius: 8px; }
.frp-ref strong { font-size: 1.25rem; letter-spacing: 0.06em; color: #0F2642; white-space: nowrap; }
.frp-methods { display: grid; gap: 10px; margin-bottom: 14px; }
.frp-method { padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.frp-method h3 { margin: 0 0 6px; }
.frp-method__handle { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.frp-method__handle code { font-size: 1.05rem; font-weight: 700; color: #0F2642; overflow-wrap: anywhere; }
.frp-method__note { margin: 0 0 8px; color: #475569; font-size: 0.92rem; overflow-wrap: anywhere; }
.frp-sentrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.frp-sentrow select { width: auto; flex: 1 1 200px; }
.frp-privatelink, .frp-sharenudge { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #475569; font-size: 0.92rem; }

/* ------------------------------------------------------------- supporters */

.frp-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.frp-people li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.frp-people li:last-child { border-bottom: 0; padding-bottom: 0; }
.frp-people__name { font-weight: 600; overflow-wrap: anywhere; }
.frp-people__amt { font-weight: 700; color: #0F2642; }
.frp-people__msg { grid-column: 1 / -1; color: #64748b; font-size: 0.88rem; overflow-wrap: anywhere; }

.frp-how ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #334155; }

/* ------------------------------------------------- playbook block and footer */

.frp-plx { background: #0F2642; color: #ffffff; margin-top: 30px; padding: 30px 0; }
.frp-plx__row { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between; }
.frp-plx h2 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.8rem; margin: 0 0 6px; }
.frp-plx p { margin: 0; color: #cbd5e1; max-width: 620px; }

.frp-foot { padding: 22px 0 40px; color: #64748b; font-size: 0.82rem; }
.frp-foot p { margin: 0 0 10px; max-width: 760px; }
.frp-foot a { color: #475569; }

.frp-missing { padding: 60px 16px; text-align: center; }
.frp-missing h1 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; color: #0F2642; }

@media (max-width: 520px) {
    .frp-card { padding: 16px; }
    .frp-squares { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .frp-bar__received, .frp-bar__way, .frp-square { transition: none; }
}

/* ======================================================= organizer pages (.fr-*) */

.fr-page h1 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; color: #0F2642; letter-spacing: 0.01em; }
.fr-page h2 { font-size: 1.25rem; margin: 0 0 8px; color: #0F2642; }
.fr-page h3 { font-size: 1.05rem; margin: 18px 0 6px; color: #0F2642; }
.fr-lede { color: #475569; max-width: 640px; margin: 0 0 18px; }
.fr-help { color: #64748b; font-size: 0.9rem; margin: 0 0 12px; }
.fr-privacy { color: #475569; font-size: 0.86rem; background: #f1f5f9; border-radius: 8px; padding: 8px 12px; margin: 8px 0 14px; }
.fr-legal { color: #64748b; font-size: 0.86rem; margin: 18px 0 14px; max-width: 680px; }
.fr-section { padding: 20px; margin: 16px 0; }

.fr-field { display: block; margin: 0 0 14px; border: 0; padding: 0; }
.fr-field > span, .fr-field > legend { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; color: #1e293b; padding: 0; }
.fr-field em { font-weight: 400; font-style: normal; color: #64748b; }
.fr-field input[type="text"], .fr-field input[type="number"], .fr-field input[type="date"], .fr-field input[type="month"],
.fr-field select, .fr-field textarea {
    width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; background: #ffffff;
}
.fr-field textarea { resize: vertical; }
.fr-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 0.95rem; }
.fr-check input { margin-top: 4px; }
.fr-choice { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; }
.fr-choice label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.fr-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.fr-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 640px) { .fr-grid2, .fr-grid3 { grid-template-columns: minmax(0, 1fr); } }
/* "How many of each": a line is an amount, how many squares have it, and what that adds up to. */
.fr-mixhead, .fr-mixrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 8ch; gap: 0 12px; align-items: center; margin: 0 0 8px; }
.fr-mixhead { font-weight: 600; font-size: 0.9rem; color: #1e293b; margin-bottom: 4px; }
.fr-mixrow input[type="text"], .fr-mixrow input[type="number"] {
    width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; background: #ffffff;
}
.fr-mixhead span:last-child, .fr-mixrow__sub { text-align: right; }
.fr-mixrow__sub { font-weight: 600; color: #0F2642; font-size: 0.92rem; }
.fr-mix #fr-mixadd { margin: 4px 0 8px; }

/* Which sheet: a card for each, with a small drawing of it, instead of a dropdown of long sentences that ran together. The radio
   inside each card is the real control (keyboard and screen readers get it), stretched over the card. */
.fr-sheets { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.fr-sheets > legend { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: #1e293b; padding: 0; }
.fr-sheets__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; }
.fr-sheet-card {
    position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 2px solid #e2e8f0; border-radius: 12px;
    background: #ffffff; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.fr-sheet-card:hover { border-color: #b9dca0; }
.fr-sheet-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fr-sheet-card:has(input:checked) { border-color: #70af43; background: #f4faed; box-shadow: 0 0 0 1px #70af43; }
.fr-sheet-card:has(input:focus-visible) { outline: 3px solid rgba(112, 175, 67, 0.55); outline-offset: 2px; }
.fr-sheet-card:has(input:checked)::after {
    content: "\2713"; position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: #70af43; color: #ffffff;
    font-weight: 700; font-size: 0.8rem; display: grid; place-items: center;
}
.fr-sheet-card__art { display: block; height: 66px; margin-bottom: 4px; padding: 8px; border-radius: 8px; background: #f1f5f9; overflow: hidden; }
.fr-sheet-card__title { font-weight: 700; color: #0F2642; line-height: 1.25; }
.fr-sheet-card__text { font-size: 0.82rem; color: #64748b; line-height: 1.35; }

/* The drawings: a few tiles each, never a real control. */
.fr-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; height: 100%; align-content: center; }
.fr-mini i {
    display: grid; place-items: center; min-height: 22px; border-radius: 4px; background: #ffffff; border: 1px solid #cbd5e1;
    color: #0F2642; font-style: normal; font-size: 0.62rem; font-weight: 700;
}
.fr-mini--cal { grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 132px; margin: 0 auto; }
.fr-mini--cal i, .fr-mini--cal u { display: block; min-height: 12px; }
.fr-mini--tiers i:nth-child(-n+2) { background: #e0f2d8; border-color: #b9dca0; }
.fr-mini--tiers i:nth-child(n+3):nth-child(-n+4) { background: #b9dca0; border-color: #8fc766; }
.fr-mini--tiers i:nth-child(n+5) { background: #70af43; border-color: #5f9a37; color: #ffffff; }
.fr-mini--bars { display: flex; align-items: flex-end; gap: 6px; padding: 0 6px; }
.fr-mini--bars b { flex: 1; background: #70af43; border-radius: 3px 3px 0 0; }
.fr-mini--text {
    display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px dashed #94a3b8; border-radius: 6px;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; color: #475569;
}

/* "What is the money for?": the old list is a row of quick picks under a box for the organizer's own words. */
.fr-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 14px; }
.fr-quick__label { margin-right: 2px; font-size: 0.82rem; color: #64748b; }
.fr-quick__btn {
    padding: 4px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #ffffff; color: #0F2642;
    font: inherit; font-size: 0.82rem; cursor: pointer;
}
.fr-quick__btn:hover { border-color: #70af43; background: #f4faed; }

/* The picture cropper (assets/js/photo_crop.js): a square to drag the picture inside, a zoom slider, two buttons. */
.fr-crop { max-width: 340px; margin: 10px 0 14px; padding: 14px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; }
.fr-crop__stage {
    position: relative; width: 280px; max-width: 100%; aspect-ratio: 1; overflow: hidden; border: 2px solid #70af43; border-radius: 10px;
    background: #ffffff; cursor: grab; touch-action: none; user-select: none;
}
.fr-crop__stage:active { cursor: grabbing; }
.fr-crop__stage:focus-visible { outline: 3px solid rgba(112, 175, 67, 0.55); outline-offset: 2px; }
.fr-crop__stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.fr-crop__zoom { display: block; width: 100%; margin: 12px 0 8px; }
.fr-crop__row { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-crop__done { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; }
.fr-crop__done img { width: 96px; height: 96px; border: 3px solid #ffffff; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25); }
.fr-crop__done p { margin: 0 0 8px; }
.fr-preview { background: #e0f2d8; border-radius: 8px; padding: 10px 14px; font-weight: 600; color: #0F2642; margin: 4px 0 8px; min-height: 1.2em; }

.fr-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: #f4f7f6; }
.fr-gate__card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 32px; max-width: 460px; text-align: center; }

.fr-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px; background: #e2e8f0; color: #334155;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle; font-family: Inter, sans-serif; text-transform: uppercase;
}
.fr-badge--live { background: #e0f2d8; color: #2f6b13; }
.fr-badge--draft { background: #e2e8f0; color: #475569; }
.fr-badge--closed { background: #e2e8f0; color: #64748b; }
.fr-badge--hidden, .fr-badge--warn { background: #fee2e2; color: #991b1b; }
.fr-badge--waiting { background: #fef3c7; color: #92400e; }
.fr-verify { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; border-radius: 8px; padding: 12px 16px; }

.fr-linkbtn { background: none; border: 0; color: #475569; text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.88rem; padding: 6px 4px; }
.fr-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.fr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0 12px; }
.fr-stat { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.fr-stat span { display: block; color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fr-stat strong { display: block; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 2rem; color: #0F2642; line-height: 1.1; }
.fr-stat em { font-style: normal; color: #64748b; font-size: 0.85rem; }
.fr-bar { margin: 0 0 8px; }

.fr-claim {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    padding: 14px 0; border-top: 1px solid #e2e8f0;
}
.fr-claim:first-of-type { border-top: 0; }
.fr-claim__main { flex: 1 1 320px; min-width: 0; }
.fr-claim__top { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.fr-claim__amt { font-weight: 700; color: #0F2642; }
.fr-ref { font-family: ui-monospace, Menlo, Consolas, monospace; background: #f1f5f9; padding: 1px 8px; border-radius: 6px; font-size: 0.85rem; }
.fr-claim__meta { color: #64748b; font-size: 0.88rem; margin-top: 2px; overflow-wrap: anywhere; }
.fr-claim__msg { color: #334155; font-style: italic; margin-top: 4px; overflow-wrap: anywhere; }
.fr-claim__warn { margin-top: 6px; background: #fef3c7; color: #78350f; border-radius: 6px; padding: 6px 10px; font-size: 0.86rem; }
.fr-claim__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fr-claim__actions form { margin: 0; }

.fr-linkrow { display: flex; gap: 8px; }
.fr-linkrow input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; background: #f8fafc; }
.fr-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fr-qr { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.fr-qr__code { width: 200px; height: 200px; flex: 0 0 auto; }
.fr-qr__code svg { display: block; width: 100%; height: 100%; }

.fr-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 12px; max-height: 220px; overflow: auto; padding: 4px; border: 1px solid #e2e8f0; border-radius: 6px; }
.fr-pickgrid label { font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }

.fr-tablewrap { overflow-x: auto; }
.fr-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.fr-table th { text-align: left; color: #64748b; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 2px solid #e2e8f0; }
.fr-table td { padding: 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.fr-table small { color: #64748b; }

.fr-cover { max-width: 320px; width: 100%; border-radius: 10px; display: block; }
.fr-coverform { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.fr-section summary { cursor: pointer; }
.fr-danger { border-color: #fecaca; }

/* The flyer: nothing on screen, the only thing that prints. */
.fr-flyer { display: none; }
@media print {
    body * { visibility: hidden; }
    .fr-flyer, .fr-flyer * { visibility: visible; }
    .fr-flyer { display: block; position: absolute; left: 0; top: 0; width: 100%; text-align: center; padding: 48px 40px; font-family: "Inter", Arial, sans-serif; color: #0F2642; }
    .fr-flyer h1 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 54px; line-height: 1.05; margin: 0 0 8px; }
    .fr-flyer__sub { font-size: 24px; margin: 0 0 30px; }
    .fr-flyer__qr svg { width: 360px; height: 360px; }
    .fr-flyer__scan { font-size: 30px; font-weight: 700; margin: 14px 0 6px; }
    .fr-flyer__url { font-size: 16px; color: #475569; overflow-wrap: anywhere; }
    .fr-flyer__brand { margin-top: 40px; font-size: 14px; color: #64748b; }
}

/* .btn-secondary exists nowhere globally (tournament.css scopes its own to its pages), so the organizer
   pages define theirs. .btn-primary is global (style.css) and is only tuned here for width and links. */
.fr-page .btn-secondary {
    display: inline-block; width: auto; padding: 9px 15px; border: 1px solid #cbd5e1; border-radius: 6px;
    background: #ffffff; color: #334155; font: inherit; font-size: 0.88rem; font-weight: 600; text-align: center;
    text-decoration: none; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.fr-page .btn-secondary:hover { border-color: #70af43; background: #f8fafc; }
.fr-page .btn-primary { display: inline-block; width: auto; padding: 10px 18px; text-decoration: none; text-align: center; cursor: pointer; }
.fr-page button:disabled { opacity: 0.5; cursor: not-allowed; }
.fr-page .card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; }