/* Shared styles for the BeardMeatsFood stats site (all pages) — official-site dark kit. */
@import url("../../frontend/styles/tokens.css");

:root {
  /* Status colours — marks and text share values on this kit (all pass WCAG
     text contrast on both surfaces: win 7.7:1, loss 4.8:1, unknown 6.1:1 on
     #242424; higher on #1a1a1a).
     CVD-validated (Machado 2009 protan/deutan/tritan) 2026-07-13:
     win #00d084 vs loss #ff4d4f — worst adjacent ΔE 24.8 (deutan) on both
     #1a1a1a (body) and #242424 (card); all marks >= 3:1 contrast on both.
     Results are additionally never encoded by colour alone (letters, labels,
     position, texture, tooltips). Re-validate if any value changes. */
  --win: #00d084;
  --win-text: #00d084;
  --loss: #ff4d4f;
  --loss-text: #ff4d4f;
  --unknown: #9ca3af;      /* "verdict pending" */
  --unknown-text: #9ca3af;
  --surface: var(--bmf-color-surface);
  --border: #ffffff1f;
}

body { margin: 0; background: var(--bmf-color-bg); color: var(--bmf-color-text);
       font-family: var(--bmf-font-sans); }
.wrap { max-width: 1200px; margin: 0 auto; padding: var(--bmf-space-6); }
h1 { font-family: var(--bmf-font-display); font-weight: 700; font-size: clamp(3rem, 11vw, 7rem);
     line-height: .92; margin: 0; letter-spacing: .01em; text-transform: uppercase; }
h3 { margin-top: 0; }
.sub { color: var(--bmf-color-text-muted); font-size: var(--bmf-font-size-200);
       margin: var(--bmf-space-2) 0 var(--bmf-space-4); }
.muted { color: var(--bmf-color-text-muted); }
a { color: inherit; text-decoration-color: rgba(224, 255, 0, .5); }
a:hover { text-decoration-color: var(--bmf-color-brand); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--bmf-radius-md);
        box-shadow: var(--bmf-shadow-1); padding: var(--bmf-space-4); margin-bottom: var(--bmf-space-4); }

/* Masthead: roundel homage (white-on-dark, like the official mark) + top nav */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--bmf-space-4);
            flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .16);
            padding: var(--bmf-space-1) 0 var(--bmf-space-3); margin-bottom: var(--bmf-space-6); }
.roundel { width: 64px; height: 64px; border-radius: 50%; flex: none; text-decoration: none;
           border: 2.5px solid var(--bmf-color-text);
           box-shadow: inset 0 0 0 2.5px var(--bmf-color-bg), inset 0 0 0 4.5px var(--bmf-color-text);
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           text-align: center; line-height: 1.06; letter-spacing: .05em; color: var(--bmf-color-text);
           transform: rotate(-4deg); }
.roundel .r-x { font-size: 7px; }
.roundel .r-w { font-family: var(--bmf-font-display); font-weight: 700; font-size: 10px; }
.nav { display: flex; gap: var(--bmf-space-6); flex-wrap: wrap; margin: 0; }
.nav a { padding: .35rem 0; border-bottom: 2px solid transparent; text-decoration: none;
         text-transform: uppercase; letter-spacing: .13em; font-weight: 500;
         font-size: var(--bmf-font-size-100); }
.nav a.active { color: var(--bmf-color-brand); border-bottom-color: var(--bmf-color-brand); }
.nav a:hover:not(.active) { border-bottom-color: rgba(224, 255, 0, .4); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--bmf-space-4); margin-bottom: var(--bmf-space-4); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--bmf-radius-md);
        box-shadow: var(--bmf-shadow-1); padding: var(--bmf-space-4); }
.tile .num { font-family: var(--bmf-font-display); font-weight: 700; font-size: 2.4rem;
             line-height: 1; color: var(--bmf-color-text); }
.tile .num .w { color: var(--win-text); } .tile .num .l { color: var(--loss-text); }
.tile .label { font-size: var(--bmf-font-size-100); color: var(--bmf-color-text-muted); margin-top: var(--bmf-space-1); }

/* Badges, chips, filters — result badges as outline stamps; pending = dashed
   (not-yet-stamped). Letters/labels always accompany the colour. */
.badge { display: inline-block; padding: .08rem .5rem; border: 1.5px solid currentColor; border-radius: 4px;
         background: transparent; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
         text-transform: uppercase; white-space: nowrap; }
.badge.win { color: var(--win-text); }
.badge.loss { color: var(--loss-text); }
.badge.unknown { color: var(--unknown-text); border-style: dashed; }
/* special: frosted outline, deliberately NOT a verdict colour */
.badge.special { color: var(--bmf-color-text); border-color: rgba(255, 255, 255, .45);
                 background: rgba(255, 255, 255, .08); }
.chip { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.swatch.pending { background: repeating-linear-gradient(45deg, #9ca3af 0 2px, #3a3a3a 2px 5px) !important;
                  border: 1px solid var(--unknown); }
.legend { display: flex; gap: var(--bmf-space-4); font-size: var(--bmf-font-size-100);
          color: var(--bmf-color-text-muted); margin-top: var(--bmf-space-3); flex-wrap: wrap; }

/* Frosted-glass chips/buttons (official kit): rgba white fill, ~10px radius,
   white all-caps labels. Active = neon text + underline, never a neon fill. */
.fbtn { background: var(--bmf-color-frost); color: var(--bmf-color-text); border: 0;
        border-radius: var(--bmf-radius-md); padding: .4rem 1rem; cursor: pointer;
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        font-family: var(--bmf-font-sans); font-size: .72rem; font-weight: 500;
        letter-spacing: .08em; text-transform: uppercase; }
.fbtn:hover:not(.active) { background: rgba(255, 255, 255, .28); }
.fbtn.active { color: var(--bmf-color-brand); font-weight: 700;
               text-decoration: underline 2px; text-underline-offset: 4px; }
.btn { background: var(--bmf-color-frost); color: var(--bmf-color-text); border: 0;
       border-radius: var(--bmf-radius-md); padding: var(--bmf-space-2) var(--bmf-space-4); cursor: pointer;
       -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
       font-family: var(--bmf-font-sans); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.btn:hover { background: rgba(255, 255, 255, .28); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: var(--bmf-font-size-100); }
th, td { padding: var(--bmf-space-2); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--bmf-color-text-muted); font-weight: 500; font-size: .72rem;
     text-transform: uppercase; letter-spacing: .09em; }

/* Charts (hand-rolled SVG) */
.chart-title { font-weight: 500; margin-bottom: var(--bmf-space-2); }
.chart-note { font-size: .75rem; color: var(--bmf-color-text-muted); margin-top: var(--bmf-space-2); }
svg text { fill: var(--bmf-color-text); font-family: var(--bmf-font-sans); }
.grid-line { stroke: #ffffff14; }
.axis-label { font-size: 11px; opacity: .75; }

/* Taped snapshot — the site's photo treatment (hero, collaborator cards, Wall of
   Shame). White print, semi-transparent white tape on the dark ground. */
.snap { position: relative; display: block; background: #fff; padding: 7px 7px 8px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, .5); text-decoration: none; }
.snap::before { content: ""; position: absolute; top: -9px; left: 50%; width: 58px; height: 17px;
                transform: translateX(-50%) rotate(-2deg); background: rgba(255, 255, 255, .28); z-index: 1; }
.snap img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.snap .cap { display: block; color: #3a3a3a; font-style: italic; font-size: .7rem; line-height: 1.35; padding: 6px 2px 0; }

/* Ledger row — label, dotted leader, value (hero tape + collaborator cards) */
.ledger-row { display: flex; align-items: baseline; gap: 8px; padding: .28rem 0; }
.ledger-row .lr-label { font-size: .72rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
                        color: var(--bmf-color-text-muted); white-space: nowrap; }
.ledger-row .lr-dots { flex: 1; border-bottom: 2px dotted rgba(255, 255, 255, .22); transform: translateY(-3px); }
.ledger-row .lr-value { font-family: var(--bmf-font-display); font-weight: 700; font-size: 1.3rem;
                        line-height: 1; white-space: nowrap; letter-spacing: .02em; }
.ledger-row .lr-value.win { color: var(--win-text); }
.ledger-row .lr-value.loss { color: var(--loss-text); }
.ledger-row .lr-value.pending { color: var(--unknown-text); }

/* Collapsible geography groups (Tours & Series, Restaurants):
   native <details>/<summary>, all collapsed by default. Chevron rotates and
   goes neon on open summaries; counts live in .g-stats so a collapsed group
   still informs. */
.grp > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer;
                 list-style: none; padding: .45rem .4rem; border-bottom: 1px solid var(--border); }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary:hover { background: rgba(255, 255, 255, .05); }
.grp > summary .chev { color: var(--bmf-color-text-muted); font-size: .72em;
                       display: inline-block; transition: transform .12s ease; }
.grp[open] > summary .chev { transform: rotate(90deg); color: var(--bmf-color-brand); }
.grp > summary .g-stats { color: var(--bmf-color-text-muted); font-size: .78rem; }
.grp > summary .g-stats .w { color: var(--win-text); font-weight: 700; }
.grp > summary .g-stats .l { color: var(--loss-text); font-weight: 700; }
.g-body { margin-left: 18px; }
.g-continent > summary .g-title { font-family: var(--bmf-font-display); font-weight: 700; font-size: 1.7rem;
                                  line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.g-country > summary .g-title { font-family: var(--bmf-font-display); font-weight: 700; font-size: 1.15rem;
                                line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
.g-state > summary .g-title { font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
@media (max-width: 480px) { .g-body { margin-left: 8px; } }

/* Tooltip (shared) */
.tip { position: fixed; pointer-events: none; background: #111; color: #fff;
       border: 1px solid #ffffff2e; box-shadow: var(--bmf-shadow-3);
       padding: 6px 10px; border-radius: 6px; font-size: .75rem; z-index: 50; display: none; max-width: 280px; }

/* Small screens: keep everything one column and readable at 390px */
@media (max-width: 480px) {
  .wrap { padding: var(--bmf-space-4); }
  .nav { gap: var(--bmf-space-4); }
  .roundel { width: 54px; height: 54px; }
}

/* Site-wide footer (injected by BMF.nav) */
.sitefoot { margin-top: var(--bmf-space-8); padding: var(--bmf-space-4) 0 var(--bmf-space-6);
            border-top: 1px solid var(--bmf-color-border); font-size: .72rem;
            color: var(--bmf-color-text-muted); }
.sitefoot p { margin: .2rem 0; }
.sitefoot a { color: inherit; text-decoration: underline; }
.sitefoot a:hover { color: var(--bmf-color-brand); }