/**
 * BRT Geocache front-end styles.
 *
 * One visual system for every geocache surface (landing, check-in, coin
 * journey, coins index), rendered inside the plugin's own
 * full-width shell template (templates/geocache-shell.php) so no theme
 * single-post chrome leaks in.
 *
 * Identity: native BigRigTravels — theme font stack inherited, house orange
 * as the accent. Signature device: the "journey line" — a solid accent rule
 * that fades in from its left tail and terminates in a filled coin-dot —
 * under page titles and section headings, echoing the journey polylines on
 * the maps. Everything else stays quiet.
 *
 * Tokens are overridable for the 2.0 rebrand: set --brt-geocache-accent (and
 * companions) at :root and the whole section rethemes.
 */

/* --- Shell + tokens --------------------------------------------------- */

.brt-gc-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 32px) clamp(56px, 7vw, 96px);
}

.brt-gc {
    --brt-gc-accent: var(--brt-geocache-accent, #e8710a);
    /* Darker companion tone for small text and fills that must clear WCAG AA
       contrast on white (#e8710a is ~3.1:1: fine for large text and graphics,
       not for body-size text). Retheme both tokens together. */
    --brt-gc-accent-strong: var(--brt-geocache-accent-strong, #b45309);
    --brt-gc-accent-soft: var(--brt-geocache-accent-soft, rgba(232, 113, 10, 0.08));
    --brt-gc-ink: var(--brt-geocache-ink, #22262b);
    --brt-gc-border: var(--brt-geocache-border, rgba(34, 38, 43, 0.14));
    --brt-gc-muted: var(--brt-geocache-muted, rgba(34, 38, 43, 0.62));
    --brt-gc-card: var(--brt-geocache-card, #ffffff);
    /* Derived "up for grabs" state: SILVER, matching the up-for-grabs coin
       metal on the maps (gold = found, copper = hidden, silver = up for
       grabs), distinct from the accent (Steve's hidden hunts) and the
       concluded grays. Slate text keeps body-size contrast on white. */
    --brt-gc-ufg: var(--brt-geocache-ufg, #46525e);
    --brt-gc-ufg-soft: var(--brt-geocache-ufg-soft, rgba(170, 179, 189, 0.22));
    /* First-find celebration (owner direction 2026-09-10): GOLD, echoing the
       found-coin metal on the maps. Amber-700 text clears body-size AA on
       white; the soft tint is the badge/callout ground. */
    --brt-gc-gold: var(--brt-geocache-gold, #a16207);
    --brt-gc-gold-soft: var(--brt-geocache-gold-soft, rgba(234, 179, 8, 0.16));
    color: var(--brt-gc-ink);
    line-height: 1.6;
}

.brt-gc .brt-gc-muted {
    color: var(--brt-gc-muted);
    font-size: 0.92em;
}

.brt-gc .brt-gc-empty {
    color: var(--brt-gc-muted);
    margin: 8px 0 16px;
    font-size: 1.02em;
}

.brt-gc .brt-gc-results-note {
    margin: 0 0 8px;
}

.brt-gc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible keyboard focus on every interactive element. */
.brt-gc a:focus-visible,
.brt-gc button:focus-visible,
.brt-gc input:focus-visible,
.brt-gc select:focus-visible,
.brt-gc textarea:focus-visible {
    outline: 2px solid var(--brt-gc-accent-strong);
    outline-offset: 2px;
}

.brt-gc .brt-gc-link {
    color: var(--brt-gc-accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Page head + the journey line -------------------------------------- */

.brt-gc .brt-gc-page-head {
    margin: 0 0 clamp(20px, 3vw, 32px);
}

.brt-gc .brt-gc-eyebrow {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brt-gc-accent-strong);
}

.brt-gc .brt-gc-title {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--brt-gc-ink);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

/* H1 color hardening: theme/kit heading rules (e.g. `.elementor-kit-N h1`,
   `.single-brt_coin h1`) can outrank a two-class selector on some templates.
   These element-qualified selectors state the color at higher specificity so
   the coin H1 (and every geocache H1) always renders in the page ink. */
.brt-gc-shell .brt-gc h1.brt-gc-title,
.brt-gc h1.brt-gc-title {
    color: var(--brt-gc-ink);
}

/* The signature: the journey line. A solid accent route that fades in from
   its left tail and arrives at a filled coin-dot on the right — a road with
   a destination. One element, two background layers: the dot (radial) parked
   at the right edge, the line (linear, transparent tail) running up to it,
   both centered on the same horizontal axis so the dot sits optically on the
   line. Sizes are per-rule custom properties so the section-scale variant
   below only restates numbers. */
.brt-gc .brt-gc-page-head::after,
.brt-gc .brt-gc-section-heading::after {
    --brt-gc-journey-width: 90px;
    --brt-gc-journey-line: 3px;
    --brt-gc-journey-dot: 9px;
    content: "";
    display: block;
    width: var(--brt-gc-journey-width);
    height: var(--brt-gc-journey-dot);
    margin-top: 12px;
    background:
        radial-gradient(circle closest-side, var(--brt-gc-accent) 92%, transparent)
            right center / var(--brt-gc-journey-dot) var(--brt-gc-journey-dot) no-repeat,
        linear-gradient(90deg, transparent, var(--brt-gc-accent) 78%)
            left center / calc(100% - var(--brt-gc-journey-dot) + 2px) var(--brt-gc-journey-line) no-repeat;
}

/* Section scale: same motif, quieter. */
.brt-gc .brt-gc-section-heading::after {
    --brt-gc-journey-width: 64px;
    --brt-gc-journey-line: 2px;
    --brt-gc-journey-dot: 7px;
    margin-top: 10px;
}

.brt-gc .brt-gc-section-heading {
    margin: clamp(36px, 5vw, 56px) 0 18px;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--brt-gc-ink);
}

.brt-gc .brt-gc-framing {
    margin: 0 0 18px;
    font-size: 1.08em;
    max-width: 62ch;
}

/* --- Badges ------------------------------------------------------------ */

.brt-gc-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    background: var(--brt-gc-accent-soft);
    color: var(--brt-gc-accent-strong);
    white-space: nowrap;
}

.brt-gc-badge-unhidden,
.brt-gc-badge-missing,
.brt-gc-badge-retired {
    background: rgba(34, 38, 43, 0.07);
    color: var(--brt-gc-muted);
}

/* Derived up-for-grabs state: the silver badge, matching the silver
   up-for-grabs coin on the maps — distinct from both the accent (hidden
   hunts) and the muted grays (concluded states). */
.brt-gc-badge-upforgrabs {
    background: var(--brt-gc-ufg-soft, rgba(170, 179, 189, 0.22));
    color: var(--brt-gc-ufg, #46525e);
}

/* --- First-find celebration --------------------------------------------- */
/* Owner direction 2026-09-10: first finders are celebrated overtly. Gold
   badge on the first approved stop (coin timeline) and first-find feed
   entries; gold crown marker on the hall-of-fame honor roll; escalated
   check-in congratulation and thanks-screen promise. */

.brt-gc-first-find-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--brt-gc-gold-soft);
    color: var(--brt-gc-gold);
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brt-gc-first-find-icon {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
}

/* Check-in verified screen: the escalated FIRST-find congratulation. */
.brt-gc .brt-gc-first-find-hed {
    color: var(--brt-gc-accent-strong);
}

.brt-gc-first-find-lede {
    font-size: 1.08em;
    font-weight: 600;
}

/* Thanks screen: the "your first find will be celebrated" promise. */
.brt-gc-first-find-note {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-left: 4px solid var(--brt-gc-gold);
    border-radius: 10px;
    background: var(--brt-gc-gold-soft);
}

/* Hall-of-fame honor roll: gold crown marker in the rank circle's spot. */
.brt-gc-hof-rank-first {
    background: var(--brt-gc-gold-soft);
    color: var(--brt-gc-gold);
}

/* --- Stats strip ------------------------------------------------------- */

.brt-gc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px clamp(24px, 4vw, 48px);
    margin: 20px 0 6px;
    padding: 18px 24px;
    border: 1px solid var(--brt-gc-border);
    border-radius: 14px;
    background: var(--brt-gc-card);
}

.brt-gc-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.brt-gc-stat-value {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 800;
    color: var(--brt-gc-accent-strong);
    letter-spacing: -0.01em;
}

.brt-gc-stat-label {
    color: var(--brt-gc-muted);
    font-size: 0.95rem;
}

/* The lead stat: "N coins waiting to be found" opens the strip biggest
   (owner direction 2026-09-10 — the hunt leads; found/states/miles follow). */
.brt-gc-stat-lead .brt-gc-stat-value {
    font-size: clamp(2rem, 3.4vw, 2.6rem);
}

/* --- Hero (landing) ---------------------------------------------------- */

.brt-gc-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px clamp(24px, 4vw, 48px);
    padding: clamp(22px, 4vw, 36px) clamp(22px, 4vw, 40px);
    border-radius: 18px;
    background: var(--brt-gc-accent-soft);
    margin: 0 0 8px;
}

.brt-gc .brt-gc-hero-text {
    margin: 0;
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.55;
    max-width: 58ch;
}

/* The hunt pointer sits with the CTA in the hero's right column: pointer
   above button, both centered as one action block. */
.brt-gc-hero-cta {
    display: grid;
    gap: 10px;
    justify-items: start;
    width: 190px;
}

.brt-gc-hero-cta .brt-gc-hero-pointer {
    font-size: 0.98rem;
    line-height: 1.45;
}

/* "N coins are out there right now — scroll down and go find one." */
.brt-gc .brt-gc-hero-pointer {
    font-weight: 600;
}

/* --- Landing layout (owner feedback 2026-09-09) ------------------------- */

/* Top area: two stacked grid rows sharing the same 2/3-1/3 columns.
   ROW 1: hero (left) + stats (right). ROW 2: hunt section (left) +
   how-it-works (right). The row boundary guarantees "Out there right now"
   and "How it works" start at the same Y regardless of how tall the hero or
   stats run. Collapses to one column under 800px (DOM order: hero, stats,
   hunt, how-it-works, notes). */
.brt-gc-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 44px);
    align-items: start;
}

.brt-gc-home-grid + .brt-gc-home-grid {
    margin-top: clamp(24px, 3.5vw, 36px);
}

/* No stats yet (nothing hidden): the lone hero cell takes the full row. */
.brt-gc-home-grid > .brt-gc-home-main:only-child {
    grid-column: 1 / -1;
}

/* Side column: stats stacked vertically (not a full-width strip), each stat
   still an inline value + label pair. Row 1 isolates the card beside the
   hero, so the numbers get to be bigger and celebratory — with comfortable
   gaps and padding — without pushing the row-2 headings out of line. */
.brt-gc-home-side .brt-gc-stats {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 20px 24px;
}

.brt-gc-home-side .brt-gc-stat-value {
    font-size: 1.5rem;
}

/* Steps stack at natural heights in the side column: one per row, no
   equal-height stretching. */
.brt-gc-home-side .brt-gc-steps {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
}

/* Step leads stay at body size; the explanation drops a couple of points so
   the four steps pack down instead of towering over the left column. */
.brt-gc-home-side .brt-gc-step {
    padding: 12px 16px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.brt-gc-home-side .brt-gc-step strong {
    font-size: 1.05em;
}

/* Below the grid: Recent finds and the Hall of fame side by side; a lone
   section takes the full width. */
.brt-gc-home-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.5vw, 44px);
    align-items: start;
    margin-top: clamp(28px, 4vw, 44px);
}

.brt-gc-home-cols > .brt-gc-home-col:only-child {
    grid-column: 1 / -1;
}

/* A heading that opens its column sits flush with the grid row. */
.brt-gc-home-col > .brt-gc-section-heading:first-child,
.brt-gc-home-main > .brt-gc-section-heading:first-child,
.brt-gc-home-side > .brt-gc-section-heading:first-child {
    margin-top: 0;
}

@media (max-width: 800px) {
    .brt-gc-home-grid,
    .brt-gc-home-cols {
        grid-template-columns: 1fr;
    }
}

/* --- [brt_geocache_embed] (owner spec 2026-09-12) ----------------------- */

/* Stats card and/or hunt map on any host page. Vertical stack by default;
   the --horizontal variant (show="both" only) runs the two pieces side by
   side and collapses back to one column under 800px. */
.brt-gc-embed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 3vw, 28px);
    align-items: start;
}

.brt-gc-embed--horizontal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Embed headings sit flush with their column; the host page owns the
   surrounding rhythm. */
.brt-gc-embed .brt-gc-section-heading {
    margin-top: 0;
}

/* The whole stats card is ONE link to /geocache/: text colors inherit (no
   underline soup); the click affordance is a subtle lift + accent border on
   hover/focus. */
.brt-gc .brt-gc-embed-stats-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.brt-gc-embed-stats-link .brt-gc-stats {
    margin: 0;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.brt-gc-embed-stats-link:hover .brt-gc-stats,
.brt-gc-embed-stats-link:focus-visible .brt-gc-stats {
    transform: translateY(-2px);
    border-color: var(--brt-gc-accent);
    box-shadow: 0 6px 18px rgba(34, 38, 43, 0.1);
}

/* Pre-launch card (nothing placed yet): one quiet line, still clickable. */
.brt-gc-embed-stats-empty .brt-gc-stat-label {
    font-size: 1.02rem;
}

/* The map div's height comes inline from the map_height attribute; kill the
   landing's top margin so the map sits flush under its heading (or the
   column top). */
.brt-gc-embed .brt-gc-caches-map {
    margin-top: 0;
}

/* Footer link row: spans both columns in the horizontal layout. */
.brt-gc-embed .brt-gc-embed-footer {
    grid-column: 1 / -1;
    margin: 0;
}

@media (max-width: 800px) {
    .brt-gc-embed--horizontal {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Go find it (pre-find coin page, PRD 7.3a) -------------------------- */

/* Mirrors the landing hero: the hunt invitation is the page's one big move. */
.brt-gc-go-find {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px clamp(24px, 4vw, 48px);
    padding: clamp(20px, 3.5vw, 32px) clamp(20px, 3.5vw, 36px);
    border-radius: 18px;
    background: var(--brt-gc-accent-soft);
    margin: 0 0 18px;
}

.brt-gc-go-find-body {
    min-width: 0;
}

.brt-gc .brt-gc-go-find-heading {
    margin: 0 0 6px;
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.2;
}

.brt-gc .brt-gc-go-find-text {
    margin: 0;
    max-width: 58ch;
}

/* --- Up for grabs (derived state) --------------------------------------- */

/* The re-hider's hint, promoted: the up-for-grabs page's hunt material.
   Styled as a QUOTE from the re-hider — quiet neutral ground, lightbulb
   icon, italic quoted text — deliberately NOT the banner's bar-card
   language (owner feedback 2026-09-09: the pair must stop being twins). */
.brt-gc-hint-promo {
    margin: 0 0 18px;
    padding: 14px 18px 16px;
    border-radius: 10px;
    background: rgba(34, 38, 43, 0.055);
    max-width: 68ch;
}

.brt-gc .brt-gc-hint-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--brt-gc-muted);
}

.brt-gc-hint-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--brt-gc-accent-strong);
}

.brt-gc .brt-gc-hint-quote {
    margin: 5px 0 0;
    font-style: italic;
    font-size: 1.05em;
    line-height: 1.55;
}

.brt-gc .brt-gc-hint-quote::before {
    content: "\201C";
}

.brt-gc .brt-gc-hint-quote::after {
    content: "\201D";
}

/* --- Coin page layout (owner feedback 2026-09-09) ----------------------- */

/* Header row: identity (coin #, eyebrow, status pill, journey line) left
   ~1/3, stats right ~2/3 — no full-width stats strip. Without stats the
   identity spans the row. Collapses under 800px. */
.brt-gc-coin-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
    margin: 0 0 clamp(18px, 2.5vw, 28px);
}

.brt-gc .brt-gc-coin-head > .brt-gc-page-head {
    margin: 0;
}

.brt-gc-coin-head > .brt-gc-page-head:only-child {
    grid-column: 1 / -1;
}

.brt-gc-coin-head-stats .brt-gc-stats {
    margin: 0;
}

.brt-gc-coin-head-stats .brt-gc-muted {
    margin: 8px 2px 0;
}

/* Up for grabs: the "Re-hidden near X" banner and the re-hider's hint side
   by side 50/50 (collapsing under 700px). The banner keeps its bar-card
   shape but in the ACCENT family — a celebration, not another green box —
   while the hint (above) reads as a quiet quote, so the pair no longer
   look like twins. */
.brt-gc-ufg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(16px, 2.5vw, 28px);
    align-items: stretch;
    margin: 0 0 18px;
}

.brt-gc .brt-gc-ufg-row .brt-gc-framing {
    margin: 0;
    padding: 14px 18px;
    border-left: 4px solid var(--brt-gc-accent);
    border-radius: 10px;
    background: var(--brt-gc-accent-soft);
    max-width: none;
}

.brt-gc-ufg-row .brt-gc-hint-promo {
    margin: 0;
    max-width: none;
}

/* Map + story: the journey map (smaller, sticky) and "The story so far"
   side by side on a 5/7 split so both move up the page; a lone child spans
   the full width. Collapses under 800px. */
.brt-gc-coin-story {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: start;
    margin-top: clamp(20px, 3vw, 32px);
}

.brt-gc-coin-story > :only-child {
    grid-column: 1 / -1;
}

.brt-gc-coin-story-map {
    position: sticky;
    top: 20px;
}

.brt-gc-coin-story .brt-gc-journey-map {
    height: clamp(280px, 34vw, 400px);
    margin: 0;
}

/* A lone full-width map keeps the standard map height. */
.brt-gc-coin-story > .brt-gc-coin-story-map:only-child {
    position: static;
}

.brt-gc-coin-story > .brt-gc-coin-story-map:only-child .brt-gc-journey-map {
    height: clamp(320px, 45vw, 480px);
}

.brt-gc .brt-gc-coin-story-log .brt-gc-timeline-heading {
    margin-top: 0;
}

@media (max-width: 800px) {
    .brt-gc-coin-head,
    .brt-gc-coin-story {
        grid-template-columns: 1fr;
    }

    .brt-gc-coin-story-map {
        position: static;
    }
}

@media (max-width: 700px) {
    .brt-gc-ufg-row {
        grid-template-columns: 1fr;
    }
}

/* --- Admin-only banner (enumeration-guard bypass) ----------------------- */

/* Deliberately loud and un-themed: this is a "you are seeing something the
   public cannot" flag, not part of the visitor-facing visual system. */
.brt-gc-admin-banner {
    margin: 0 0 20px;
    padding: 12px 18px;
    border: 2px solid #d97706;
    border-radius: 10px;
    background: #fef3c7;
    color: #1f2937;
}

.brt-gc-admin-banner a {
    color: #92400e;
    text-decoration: underline;
}

/* --- Private "your log is in review" note (coin page) ------------------- */

/* Ships hidden in every coin page's markup and is unhidden client-side only
   for the visitor whose my-recent-logs cookie names this coin. */
.brt-gc-review-banner {
    margin: 0 0 20px;
    padding: 12px 18px;
    border-left: 4px solid var(--brt-gc-accent);
    border-radius: 10px;
    background: var(--brt-gc-accent-soft);
    color: var(--brt-gc-ink);
}

/* --- Buttons + CTA ----------------------------------------------------- */

.brt-gc-button {
    display: inline-block;
    padding: 13px 26px;
    border: 0;
    border-radius: 12px;
    background: var(--brt-gc-accent);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 140ms ease, transform 140ms ease;
}

.brt-gc-button:hover,
.brt-gc-button:focus {
    background: var(--brt-gc-accent-strong);
    color: #fff;
    text-decoration: none;
}

.brt-gc-button:active {
    transform: translateY(1px);
}

/* CTA row (landing pattern, shared by every surface): a primary button plus
   a spaced quiet link. The flex gap is load-bearing — inline anchors
   separated only by collapsed whitespace read as one run-together line. */
.brt-gc-cta {
    margin: 22px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

/* --- "What you're looking for": coin front/back preview in the rail ---- */

.brt-gc-coin-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 8px;
}

.brt-gc-coin-preview figure {
    margin: 0;
}

.brt-gc-coin-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(34, 38, 43, 0.18);
}

.brt-gc-coin-preview figcaption {
    margin-top: 6px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--brt-gc-muted);
    text-align: center;
}

/* --- How it works steps ------------------------------------------------ */

.brt-gc-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin: 0 0 14px;
}

.brt-gc-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--brt-gc-border);
    border-radius: 14px;
    background: var(--brt-gc-card);
}

.brt-gc-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brt-gc-accent);
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
}

/* --- Maps -------------------------------------------------------------- */

/* The theme rounds ALL images; on a Leaflet map every 256px tile is an
   <img>, so four rounded tile corners meeting produce a white four-point
   "star" at each tile intersection, plus hairline seams (the front-page map
   is immune only because it lives in an iframe). Flatten tiles hard. */
.brt-gc .leaflet-tile,
.brt-gc .leaflet-container .leaflet-tile-container img {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.brt-gc-journey-map,
.brt-gc-coins-map,
.brt-gc-caches-map {
    height: clamp(320px, 45vw, 480px);
    margin: 14px 0 8px;
    border: 1px solid var(--brt-gc-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--brt-gc-card);
}

.brt-gc-stop-icon {
    background: transparent;
    border: 0;
}

/* --- Coin markers: flat game-coin construction (owner direction 2026-09-09:
   texture/reeding turns to fuzz at map size; bold simple parts read as a coin
   at 24-28px — saturated metal, thick rim, white halo, thickness crescent,
   struck star or stop number). */
.brt-gc-stop {
    /* Flat "game-coin" construction: at map sizes (24-28px) texture reads as
       fuzz, so the coin cue comes from bold simple parts — saturated metal,
       one thick darker rim, a white halo popping it off the map, a top
       highlight + bottom thickness crescent, and a star (or stop number)
       struck on the face. Metals: GOLD = found (default), COPPER = hidden /
       journey origin, SILVER = up for grabs. */
    --brt-gc-coin-fill: #eaa61a;
    --brt-gc-coin-rim: #ffe294;
    --brt-gc-coin-shade: rgba(150, 95, 10, 0.35);
    --brt-gc-coin-glint: rgba(255, 240, 190, 0.55);
    --brt-gc-coin-text: #ffedb8;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brt-gc-coin-fill);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 0 0 3px var(--brt-gc-coin-rim),
        inset 0 -4px 0 var(--brt-gc-coin-shade),
        inset 0 3px 0 var(--brt-gc-coin-glint);
    color: var(--brt-gc-coin-text);
    font-weight: 900;
    font-size: 0.78rem;
    line-height: 1;
}

/* An unnumbered pin gets the struck star; numbered journey stops override
   the pseudo-element with their number as element text. */
.brt-gc-stop:empty::after {
    content: "\2605";
    font-size: 0.72rem;
    line-height: 1;
}

/* COPPER: a coin still in the ground (hidden pin, journey origin). */
.brt-gc-stop-origin,
.brt-gc-pin-hidden {
    --brt-gc-coin-fill: #c07a42;
    --brt-gc-coin-rim: #f3c397;
    --brt-gc-coin-shade: rgba(110, 55, 18, 0.35);
    --brt-gc-coin-glint: rgba(255, 220, 185, 0.5);
    --brt-gc-coin-text: #ffdfc2;
}

/* GOLD: found (explicit alias of the default metal). */
.brt-gc-pin-found {
    --brt-gc-coin-fill: #eaa61a;
    --brt-gc-coin-rim: #ffe294;
    --brt-gc-coin-shade: rgba(150, 95, 10, 0.35);
    --brt-gc-coin-glint: rgba(255, 240, 190, 0.55);
    --brt-gc-coin-text: #ffedb8;
}

/* SILVER: re-hidden and up for grabs. */
.brt-gc-pin-ufg {
    --brt-gc-coin-fill: #aab3bd;
    --brt-gc-coin-rim: #f0f3f7;
    --brt-gc-coin-shade: rgba(80, 90, 102, 0.35);
    --brt-gc-coin-glint: rgba(255, 255, 255, 0.5);
    --brt-gc-coin-text: #f4f7fa;
}

/* Map legend: compact bottom-left key for the coin colors (only states
   present on the map are rendered by the scripts). */
.brt-gc-map-legend {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #1f2937;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.brt-gc-legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
}

/* Legend swatches inherit the full coin construction at 14px; wider teeth
   and lighter shadows keep the tiny disc crisp instead of noisy. */
.brt-gc-legend-swatch {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        inset 0 0 0 2px var(--brt-gc-coin-rim),
        inset 0 -2px 0 var(--brt-gc-coin-shade),
        inset 0 1.5px 0 var(--brt-gc-coin-glint);
}

.brt-gc-legend-swatch:empty::after {
    content: none;
}

.brt-gc-legend-swatch::before {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.25);
}

.brt-gc-legend-swatch::after {
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(0, 0, 0, 0.12);
}

/* Compact non-interactive thumbnail map (journey-map.js initThumbMap):
   marker only, ~180px tall, no dragging or zoom. */
.brt-gc-thumb-map {
    height: 180px;
    border: 1px solid var(--brt-gc-border, #e2e2df);
    border-radius: 10px;
    overflow: hidden;
    background: var(--brt-gc-card, #fff);
}

/* --- Journey timeline (mile-marker list) ------------------------------- */

.brt-gc .brt-gc-timeline-heading {
    margin: clamp(30px, 4vw, 44px) 0 16px;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 800;
}

.brt-gc-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
    position: relative;
}

/* Vertical journey line connecting the stops: a quiet solid route behind the
   numbered discs (the discs are the emphasis; the line just joins them).
   Centered under the 32px stop discs: 4px list padding + 16px = 20px, so a
   2px line starts at 19px. */
.brt-gc-timeline::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 1px;
    background: var(--brt-gc-accent);
    opacity: 0.35;
}

.brt-gc-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0 0 22px;
}

.brt-gc-timeline-item:last-child {
    padding-bottom: 4px;
}

.brt-gc-stop-num {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brt-gc-card);
    border: 2px solid var(--brt-gc-accent);
    color: var(--brt-gc-accent-strong);
    font-weight: 800;
    font-size: 0.9rem;
}

.brt-gc-timeline-body {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
}

.brt-gc-timeline-meta {
    color: var(--brt-gc-muted);
    font-size: 0.9em;
    margin: 2px 0 0;
}

.brt-gc-timeline-comment {
    margin: 6px 0 0;
    max-width: 68ch;
}

.brt-gc-keeping {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--brt-gc-accent-strong);
}

/* --- Tables (landing hunt list, coins index) ---------------------------- */

.brt-gc-table-wrap {
    overflow-x: auto;
    margin: 10px 0 0;
    border: 1px solid var(--brt-gc-border);
    border-radius: 14px;
    background: var(--brt-gc-card);
}

.brt-gc-coins-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
}

.brt-gc-coins-table th,
.brt-gc-coins-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--brt-gc-border);
}

.brt-gc-coins-table tbody tr:last-child td {
    border-bottom: 0;
}

.brt-gc-coins-table tbody tr:hover {
    background: var(--brt-gc-accent-soft);
}

.brt-gc-coins-table th {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brt-gc-muted);
}

.brt-gc-coins-table th button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    letter-spacing: inherit;
    text-transform: inherit;
}

.brt-gc-coins-table th[aria-sort="ascending"] button::after {
    content: " \25B4";
    color: var(--brt-gc-accent-strong);
}

.brt-gc-coins-table th[aria-sort="descending"] button::after {
    content: " \25BE";
    color: var(--brt-gc-accent-strong);
}

/* The hunt board's coin cells: the second line under the coin link is muted
   secondary detail — a hidden row's spot name (with the "Watch the hiding
   video" affordance), an up-for-grabs row's re-hider hint — never the row's
   identity. */
.brt-gc-coins-table .brt-gc-hunt-cache,
.brt-gc-coins-table .brt-gc-hunt-hint {
    display: block;
    font-size: 0.85em;
}

/* The "Watch the hiding video" deep link inside that muted detail line:
   accent color so it still reads as a link against the muted parent. */
.brt-gc-coins-table .brt-gc-hunt-video {
    color: var(--brt-gc-accent-strong);
    white-space: nowrap;
}

/* The quiet everything-else pointer under the board: Traveling and Kept
   coins tell their stories on /geocache/coins/, not here. */
.brt-gc-board-outro {
    margin: 10px 2px 0;
}

/* --- Filters ----------------------------------------------------------- */

/* The hunt list reads as one contained unit: controls + table in a card. */
.brt-gc-hunt-card {
    border: 1px solid var(--brt-gc-border);
    border-radius: 14px;
    background: var(--brt-gc-card);
    padding: 14px 18px 18px;
    margin: 16px 0 0;
}

.brt-gc-hunt-card .brt-gc-coins-controls {
    margin-top: 0;
}

.brt-gc-hunt-card .brt-gc-table-wrap {
    margin-top: 12px;
}

.brt-gc-coins-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin: 16px 0 4px;
}

.brt-gc-coins-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.92rem;
}

.brt-gc-coins-controls select,
.brt-gc-coins-controls input[type="search"],
.brt-gc-coins-controls input[type="text"] {
    padding: 9px 12px;
    border: 1px solid var(--brt-gc-border);
    border-radius: 10px;
    background: var(--brt-gc-card);
    font: inherit;
    font-weight: 400;
}

/* --- Recent finds feed ------------------------------------------------- */

.brt-gc-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--brt-gc-border);
    border-radius: 14px;
    background: var(--brt-gc-card);
}

.brt-gc-feed-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--brt-gc-border);
}

.brt-gc-feed-item:last-child {
    border-bottom: 0;
}

/* --- Stats teaser shortcode -------------------------------------------- */

.brt-gc-teaser {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    font-size: 1.02rem;
}

.brt-gc-teaser strong {
    color: var(--brt-geocache-accent-strong, #b45309);
    font-size: 1.25em;
}

.brt-gc-teaser-sep {
    color: rgba(34, 38, 43, 0.35);
}

/* --- Hunt video + hints (hidden coin page, PRD 7.3a) -------------------- */

.brt-gc-video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 14px 0 8px;
    border-radius: 14px;
    overflow: hidden;
    background: #101418;
}

.brt-gc-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Steve's hiding hints: a quiet post-content-style block under the video. */
.brt-gc .brt-gc-hunt-hints {
    max-width: 68ch;
    margin: 0 0 18px;
}

.brt-gc .brt-gc-hunt-hints p {
    margin: 0 0 10px;
}

.brt-gc .brt-gc-hunt-hints p:last-child {
    margin-bottom: 0;
}

/* --- Check-in flow ------------------------------------------------------ */

.brt-gc-checkin {
    max-width: 640px;
    margin: 0 auto;
}

.brt-gc-checkin .brt-gc-card {
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--brt-gc-border);
    border-radius: 18px;
    background: var(--brt-gc-card);
    box-shadow: 0 2px 14px rgba(34, 38, 43, 0.05);
}

.brt-gc-checkin .brt-gc-card > h1:first-child,
.brt-gc-checkin .brt-gc-card > .brt-gc-title:first-child {
    margin-top: 0;
}

/* Both classes sit on the SAME div (checkin.php renders
   `<div class="brt-gc brt-gc-checkin">`), so this must be a compound
   selector — a descendant combinator here never matches and the full
   page-title scale (up to 3rem) would win inside the 640px card. */
.brt-gc.brt-gc-checkin .brt-gc-title {
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    margin-bottom: 6px;
}

.brt-gc-checkin .brt-gc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin: 18px 0 10px;
}

/* Plugin JS toggles visibility with the hidden attribute (checkin.js field
   groups, the coin page's ships-hidden review banner, the coins-index
   results note); make sure no theme display rule resurrects a hidden
   element anywhere in plugin markup. */
.brt-gc [hidden] {
    display: none !important;
}

/* The two-option choice cards (radio inside; checkin.js highlights the pick
   and progressively discloses that option's fields). */
.brt-gc-checkin .brt-gc-choice {
    border: 0;
    padding: 0;
    margin: 18px 0 10px;
    display: grid;
    gap: 10px;
}

.brt-gc-checkin .brt-gc-choice > legend {
    font-weight: 700;
    padding: 0;
    margin-bottom: 4px;
}

.brt-gc-checkin .brt-gc-option-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid var(--brt-gc-border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-weight: 400;
}

.brt-gc-checkin .brt-gc-option-card input[type="radio"] {
    margin-top: 4px;
    flex: none;
}

.brt-gc-checkin .brt-gc-option-card.is-selected {
    border-color: var(--brt-gc-accent);
    background: var(--brt-gc-accent-soft);
}

.brt-gc-checkin .brt-gc-option-title {
    display: block;
    font-weight: 700;
}

.brt-gc-checkin .brt-gc-option-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.92em;
}

/* Per-option field groups; legends double as headings in the no-JS render. */
.brt-gc-checkin .brt-gc-option-fields {
    border: 0;
    padding: 0;
    margin: 0;
}

.brt-gc-checkin .brt-gc-option-fields > legend {
    font-weight: 700;
    padding: 0;
    margin: 14px 0 0;
}

.brt-gc-checkin .brt-gc-derived-location {
    margin: 10px 0;
}

.brt-gc-checkin label {
    font-weight: 700;
}

.brt-gc-checkin input[type="text"],
.brt-gc-checkin select,
.brt-gc-checkin textarea {
    padding: 11px 13px;
    border: 1px solid var(--brt-gc-border);
    border-radius: 10px;
    font: inherit;
    background: #fff;
}

/* The code entry is the moment: big, monospace, engraved-looking. */
.brt-gc-checkin .brt-gc-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
    max-width: 11ch;
    padding: 12px 8px 12px 14px;
}

.brt-gc-checkin textarea {
    width: 100%;
    min-height: 110px;
}

.brt-gc-notice {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-left: 4px solid var(--brt-gc-accent);
    border-radius: 10px;
    background: var(--brt-gc-accent-soft);
}

.brt-gc-notice p {
    margin: 0;
}

.brt-gc-errors {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-left: 4px solid #b91c1c;
    border-radius: 10px;
    background: rgba(185, 28, 28, 0.07);
}

/* --- Hall of fame ------------------------------------------------------- */

.brt-gc-hof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 0 0 10px;
}

.brt-gc-hof-panel {
    padding: 20px 24px;
    border: 1px solid var(--brt-gc-border);
    border-radius: 14px;
    background: var(--brt-gc-card);
}

.brt-gc .brt-gc-hof-heading {
    margin: 0 0 10px;
    font-size: 1.08rem;
    font-weight: 800;
}

.brt-gc-hof-panel .brt-gc-muted {
    margin: 0 0 8px;
}

.brt-gc-hof-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brt-gc-hof-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--brt-gc-border);
}

.brt-gc-hof-item:last-child {
    border-bottom: 0;
}

.brt-gc-hof-rank {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brt-gc-accent-soft);
    color: var(--brt-gc-accent-strong);
    font-weight: 800;
    font-size: 0.85rem;
}

/* --- Responsive + motion ------------------------------------------------ */

@media (max-width: 720px) {
    .brt-gc-hero,
    .brt-gc-go-find {
        grid-template-columns: 1fr;
    }

    .brt-gc-stats {
        gap: 8px 24px;
        padding: 14px 18px;
    }

    .brt-gc-checkin .brt-gc-row {
        align-items: stretch;
        flex-direction: column;
    }

    .brt-gc-checkin .brt-gc-code-input {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brt-gc * {
        transition: none !important;
        animation: none !important;
    }
}