/* ============================================================================
   Built For Camp design language — COMPONENT layer (docs/DESIGN_LANGUAGE.md)
   ----------------------------------------------------------------------------
   The flow language David built for Butler Springs, made product-neutral:

     1. Phone-first: one centered column, everything stacks top-to-bottom.
     2. BUTTON COLOR = CONSEQUENCE. Before anything else, a button's color
        answers "what happens to what I'm doing?":
          AWAY   — navigates to another page (solid primary)
          ACT    — submits / reloads THIS page (accent)
          INPAGE — pure in-page reveal/toggle, you go nowhere (outlined)
          DANGER — destructive, whatever the mechanics (danger red)
     3. Full-width hero buttons for the one thing that matters most on a page;
        full-width reveal headers (native <details>) that open more content.

   COLORS COME FROM brand.css TOKENS ONLY. This file adds a small set of
   semantic aliases (--bf-*) that default to the current Built For More
   palette; a per-org theme overrides the aliases (see themes/earth.css for
   the Butler Springs earth palette) and every component here follows.
   Load AFTER brand.css.
   ============================================================================ */

:root {
    /* Semantic aliases — per-org theming overrides exactly these. */
    --bf-primary: var(--bfc-slate);
    --bf-primary-hover: var(--bfc-slate-hover);
    --bf-on-primary: #FFFFFF;
    --bf-accent: var(--bfc-sky);              /* ACT buttons, highlights */
    --bf-accent-soft: var(--bfc-slate-tint);  /* reveal headers, hover washes */
    --bf-on-accent: var(--bfc-slate-active);
    --bf-flash: var(--bfc-sky-hover);         /* "you're touching it" hover */
    --bf-danger: var(--bfc-danger);
    --bf-danger-deep: #7E2D26;
    --bf-line: var(--bfc-slate);              /* component borders */
    --bf-card: var(--bfc-surface);
    /* Buttons are SQUARE — the BSCC shape David built; rounded corners read
       as a different product. Cards/sections keep a slight radius. */
    --bf-btn-radius: 0;
    --bf-radius: var(--bfc-radius);
    --bf-tap: 44px;                           /* minimum tap target, phone-first */
}

/* ---- Page shell: one centered column that stacks top-to-bottom ---------- */
.bf-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem;
}

.bf-page-title {
    color: var(--bf-primary);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin: .25rem 0 1rem;
}

/* Full-width section band — a LABEL, not a button (David, 2026-09-05: the solid
   primary band was byte-identical to .bf-btn-away and read as clickable).
   Borderless translucent wash + small caps: buttons stay solid-with-border,
   reveal headers keep their arrow + border + hover, and this touches neither.
   The plain background line is the fallback for browsers without color-mix. */
.bf-section-title {
    display: block;
    width: 100%;
    background: var(--bf-accent-soft);
    background: color-mix(in srgb, var(--bf-accent-soft) 45%, transparent);
    color: var(--bf-primary);
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .45rem .9rem;
    border-radius: var(--bf-radius);
    margin: 1.25rem 0 .5rem;
}

/* Clickable list row — the accent-soft "this opens something" treatment the
   reveal headers established (David: reuse the light-blue clickable-row look).
   A block link with a chevron: rows navigate, labels (.bf-section-title) don't. */
.bf-row-link {
    display: block;
    background: var(--bf-accent-soft);
    color: var(--bf-on-accent);
    border: 2px solid var(--bf-line);
    border-radius: var(--bf-btn-radius);
    padding: .6rem .9rem;
    margin: .4rem 0;
    text-decoration: none;
    transition: background-color .12s ease-in-out;
}
.bf-row-link:hover, .bf-row-link:focus {
    background: var(--bf-flash);
    color: var(--bf-on-accent);
}
.bf-row-link .bf-row-link-chevron { float: right; font-weight: 700; }

/* ---- Buttons: COLOR = CONSEQUENCE ---------------------------------------- */
.bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: var(--bf-tap);
    padding: .4rem .9rem;
    font-size: 1.06rem;   /* ≈17px: the BSCC 16–18px bold ladder */
    font-weight: 700;
    border-radius: var(--bf-btn-radius);
    border: 2px solid var(--bf-line);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease-in-out;
}

.bf-btn-away {
    background: var(--bf-primary);
    color: var(--bf-on-primary);
}
.bf-btn-away:hover, .bf-btn-away:focus {
    background: var(--bf-primary-hover);
    color: var(--bf-on-primary);
}

.bf-btn-act {
    background: var(--bf-accent);
    color: var(--bf-on-accent);
}
.bf-btn-act:hover, .bf-btn-act:focus {
    background: var(--bf-flash);
    color: var(--bf-on-accent);
}

.bf-btn-inpage {
    background: var(--bf-card);
    color: var(--bf-primary);
}
.bf-btn-inpage:hover, .bf-btn-inpage:focus {
    background: var(--bf-accent-soft);
    color: var(--bf-primary);
}

/* Compact variant for secondary card actions ("Edit Camper Information") —
   still comfortably tappable, just visibly subordinate to the main buttons. */
.bf-btn-sm {
    min-height: 36px;
    font-size: .92rem;
    padding: .25rem .7rem;
}

.bf-btn-danger {
    background: var(--bf-danger);
    border-color: var(--bf-danger-deep);
    color: #FFFFFF;
}
.bf-btn-danger:hover, .bf-btn-danger:focus {
    background: var(--bf-danger-deep);
    color: #FFFFFF;
}

/* Dirty-save pending state (bf-design.js): a settings form's Save button is hidden
   until something changes, then appears wearing this — a light, translucent red that
   says "you have an unsaved change" without adding another block of the primary
   colour to a page full of settings cards (David, 2026-09-06). Two-class selectors
   so it beats Bootstrap's .btn-outline-primary on the same element; the rgba lines
   are the fallback for browsers without color-mix(). */
.btn.bf-btn-pending, .bf-btn.bf-btn-pending {
    background-color: rgba(192, 57, 43, .12);
    background-color: color-mix(in srgb, var(--bf-danger) 14%, transparent);
    border-color: rgba(192, 57, 43, .45);
    border-color: color-mix(in srgb, var(--bf-danger) 45%, transparent);
    color: var(--bf-danger-deep);
    font-weight: 700;
    animation: bf-pending-in .18s ease-out;
}
.btn.bf-btn-pending:hover, .btn.bf-btn-pending:focus,
.bf-btn.bf-btn-pending:hover, .bf-btn.bf-btn-pending:focus {
    background-color: rgba(192, 57, 43, .22);
    background-color: color-mix(in srgb, var(--bf-danger) 26%, transparent);
    border-color: var(--bf-danger);
    color: var(--bf-danger-deep);
}
@keyframes bf-pending-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

/* The one thing that matters most on this page: full width, can't be missed. */
.bf-btn-hero {
    display: flex;
    width: 100%;
    font-size: 1.15rem;
    padding: .7rem 1rem;
    margin: .35rem 0;
}

.bf-btn:disabled, .bf-btn.disabled {
    background: var(--bfc-grey);
    border-color: var(--bfc-grey);
    color: #fff;
    cursor: not-allowed;
}

/* ---- Reveal: full-width header that opens more (native <details>) ------- */
.bf-reveal {
    margin: .4rem 0;
}
.bf-reveal > summary {
    list-style: none;
    display: block;
    width: 100%;
    background: var(--bf-accent-soft);
    color: var(--bf-on-accent);
    border: 2px solid var(--bf-line);
    border-radius: var(--bf-btn-radius); /* button-like header: square, like the BSCC pseudo-buttons */
    font-size: 1.06rem;
    font-weight: 700;
    padding: .6rem .9rem;
    cursor: pointer;
}
.bf-reveal > summary::-webkit-details-marker { display: none; }
.bf-reveal > summary::before { content: "▸ "; }
.bf-reveal[open] > summary::before { content: "▾ "; }
.bf-reveal > summary:hover { background: var(--bf-flash); }
.bf-reveal > .bf-reveal-body {
    border: 1px solid var(--bf-line);
    border-top: 0;
    border-radius: 0 0 var(--bf-radius) var(--bf-radius);
    padding: .75rem .9rem;
    background: var(--bf-card);
}

/* ---- Stacked item cards (instead of tables on family-facing pages) ------ */
.bf-card-row {
    background: var(--bf-card);
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius);
    padding: .75rem .9rem;
    margin: .5rem 0;
}
.bf-card-row .bf-card-title {
    font-weight: 700;
    color: var(--bf-primary);
    font-size: 1.05rem;
}
.bf-card-row .bf-card-sub {
    color: var(--bfc-ink-muted);
    font-size: .92rem;
}
/* BSCC placement: actions STACK, one per line, snug width — full width is
   reserved for the hero (importance = width, never a shared row of equals). */
.bf-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .55rem;
}
.bf-card-actions .bf-btn { width: fit-content; }
.bf-card-actions .bf-btn-hero { width: 100%; }

/* ---- Status chips -------------------------------------------------------- */
.bf-chip {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    border: 1px solid var(--bf-line);
}
.bf-chip-ok   { background: var(--bf-primary); color: var(--bf-on-primary); }
.bf-chip-info { background: var(--bf-accent-soft); color: var(--bf-on-accent); }
.bf-chip-due  { background: var(--bf-accent); color: var(--bf-on-accent); }
.bf-chip-off  { background: var(--bfc-cloud); color: var(--bfc-ink-muted); border-color: var(--bfc-grey); }

/* ---- Money line ---------------------------------------------------------- */
.bf-balance {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bf-primary);
}
.bf-balance.bf-balance-due { color: var(--bf-danger-deep); }

/* ---- Account summary box (the BSCC header box) ---------------------------- */
/* Facts before buttons: balance due, cost, paid, credits, canteen. The heavy accent
   border and soft wash are what made the original readable; here they are theme
   tokens, so Butler Springs gets its blues and another camp gets its own colours. */
.bf-summary {
    border: 3px solid var(--bf-accent);
    background: var(--bf-accent-soft);
    background: color-mix(in srgb, var(--bf-accent-soft) 55%, var(--bf-card));
    border-radius: var(--bf-radius);
    padding: .75rem 1rem;
    margin: .25rem 0 .75rem;
}
.bf-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .15rem 0;
    font-size: 1.02rem;
}
.bf-summary-row .bf-summary-label { color: var(--bf-primary); font-weight: 600; }
.bf-summary-row.bf-summary-lead { font-size: 1.15rem; font-weight: 700; }

/* The admin console's at-a-glance box (GAP-34): the same box, its facts flowing into
   columns on a wide screen so eight figures don't become a tall single stack. */
.bf-summary-admin .bf-summary-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    column-gap: 2.5rem;
    row-gap: .1rem;
}
.bf-row-link-admin { margin: .35rem 0; padding: .5rem .9rem; }
/* The row the page below is ABOUT (the retreat dashboard's selected event): the accent
   border says "you are here" without turning the row into a button. */
.bf-row-link.bf-row-link-current { border-color: var(--bf-accent); }
.bf-summary-row a.bf-summary-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Denser camper card for the dashboard list — same card, tighter. */
.bf-card-row.bf-card-compact { padding: .5rem .75rem; margin: .35rem 0; }
.bf-card-row.bf-card-compact .bf-card-actions { margin-top: .4rem; }

/* ---- Summary stat block -------------------------------------------------- */
/* A dashboard figure must never break across two lines — "$128,450.00" split over
   two rows reads as two numbers. Nowrap alone only trades wrapping for CLIPPING:
   measured in Segoe UI Bold, a 12-character amount needs ~133px at 20px type, and a
   sixth-of-a-container tile offers 72-142px depending on breakpoint. So the value
   also scales to the width it actually has: cqi is a share of the tile, min() caps it
   so a roomy tile doesn't inflate the type. Where container queries are unsupported
   the whole declaration is dropped and the element's own fs-* class still applies,
   with nowrap intact — the pre-existing behaviour, never worse.
   No colour here on purpose: the semantic colour stays on the page element. */
.bf-stat { container-type: inline-size; }
.bf-stat-value {
    white-space: nowrap;
    /* 13cqi is chosen, not guessed: it is the largest share that still fits a
       14-character worst case ("-$1,043,200.00") in the narrowest tile the grid
       produces. The 1.25rem cap governs every roomier tile. */
    font-size: min(1.25rem, 13cqi);
}