/* The BBQ Trail — Field Guide theme (parchment, ink, burnt orange), the
   same as the rest of jeffraben.com. This stylesheet stands alone (the trail
   loads only this file), so the tokens are restated here and the fonts are
   imported here. Category colours in lib/bbq.php are data series and stay. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500&family=Roboto+Serif:opsz,wdth,wght@8..144,62..100,400..800&display=swap");

:root {
  --page: #efe5cf;
  --surface: #f5eddb;
  --ink: #2a2420;
  --ink-2: #524941;
  --muted: #8a7b6d;
  --grid: #d4c5a8;
  --border: rgba(58, 50, 44, 0.32);
  --rule: #3a322c;
  --accent: #c4582a;      /* burnt orange — brand only, never a data series */
  --accent-dark: #a8481f;
  --font-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --font-gothic: 'Oswald', 'Arial Narrow', sans-serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.27  0 0 0 0 0.15  0 0 0 0.10 0'/></filter><rect width='300' height='300' filter='url(%23p)'/></svg>");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  background-image: var(--grain);
  color: var(--ink);
  font-family: 'Roboto Serif', Georgia, serif;
  line-height: 1.55;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.site-header {
  background: var(--page);
  color: var(--ink);
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding-top: 12px; padding-bottom: 12px;
}
.brand { color: var(--accent); font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; }
.brand:hover { color: var(--accent-dark); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.site-header nav a {
  color: var(--ink-2); text-decoration: none; padding: 6px 8px; border-bottom: 2px solid transparent;
  font-family: var(--font-gothic); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.site-header nav a:hover { color: var(--accent); }
/* The accent is 3.5:1 on parchment. The underline still carries it, and the
   current page is the one label you should be able to pick out at a glance. */
.site-header nav a.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.site-header nav a.user { color: var(--ink); font-weight: 500; }

main.wrap { padding-top: 24px; padding-bottom: 48px; }

h1, h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--accent); letter-spacing: .01em; line-height: .95; }
h1 { font-size: 2.4rem; margin: 0 0 6px; }
h2 { font-size: 1.6rem; margin: 32px 0 12px; }
.sub { color: var(--ink-2); margin: 0 0 20px; }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 20px 0; }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 0;
  padding: 14px 16px;
}
.tile { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(50,35,15,0.18); border-color: var(--rule); }
.tile .value { font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; letter-spacing: 0; line-height: 1; color: var(--ink); }
.tile .label { color: var(--ink-2); font-size: 0.85rem; font-family: var(--font-gothic); text-transform: uppercase; letter-spacing: .06em; }
.tile .label a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--muted); }
.tile .label a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.tile .chip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: 0; overflow: hidden;
}
table.data th {
  text-align: left; font-family: var(--font-gothic); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2); padding: 10px 12px; border-bottom: 2px solid var(--rule);
}
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tfoot td { font-weight: 700; background: var(--page); }
.stars { color: var(--accent); letter-spacing: 2px; }
/* Click-to-rate stars on the restaurants list (owner only): hollow and
   near-white until clicked, solid ember orange once saved. */
.rate-form { display: inline-flex; gap: 2px; }
.star-btn { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  cursor: pointer; font-size: 1.3rem; line-height: 1; font-weight: 400;
  color: var(--grid); }
.star-btn:hover { filter: none; }
.star-btn.on { color: var(--accent); }
.rate-form:hover .star-btn { color: var(--accent); }
.rate-form .star-btn:hover ~ .star-btn { color: var(--grid); }

/* ---------- category tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.tabs a {
  text-decoration: none; color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 0.9rem;
}
/* The active tab used to be filled with the category's own colour, with the
   label in white over it. Three of the seven cannot carry readable text in
   any colour — KCBS blue is 3.5:1 against both ink and parchment — and the
   palette is a CVD-validated data series that does not move.
   So the fill is ink, which the label can always be read on, and the category
   colour becomes a bar down the leading edge, where it still says which tab
   you are on. */
.tabs a.active {
  color: var(--page);
  background: var(--ink);
  border-color: var(--ink);
  border-left: 4px solid var(--cat, var(--accent));
  padding-left: 11px;
  font-weight: 600;
}

/* ---------- bar chart (single series) ---------- */
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 16px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; border-bottom: 2px solid var(--rule); }
/* The column must have a definite height, or the bars' percentage heights
   resolve to 0 and the chart renders empty. */
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 20px; position: relative; }
.bar-col .bar { width: 100%; max-width: 34px; background: #2a78d6; border-radius: 0; flex-shrink: 1; }
.bar-col .val {
  font-size: 0.75rem; color: var(--ink-2); margin-bottom: 3px; line-height: 1;
  visibility: hidden; font-variant-numeric: tabular-nums;
}
.bar-col:hover .val, .bar-col.peak .val { visibility: visible; }
.bar-col:hover .bar { background: #1c5cab; }
.bar-labels { display: flex; gap: 6px; margin-top: 6px; }
.bar-labels span { flex: 1; text-align: center; font-size: 0.72rem; color: var(--muted); min-width: 20px; }

/* ---------- forms ---------- */
form.card, .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 0;
  padding: 20px; max-width: 640px;
}
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--font-gothic); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; color: var(--ink-2); }
.field .hint { font-size: 0.8rem; color: var(--muted); font-weight: 400; }
input[type=text], input[type=password], input[type=date], input[type=number],
input[type=url], input[type=email], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--grid); border-radius: 0;
  font: inherit; background: rgba(255,255,255,0.4); color: var(--ink);
}
textarea { min-height: 80px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-row label { font-weight: 400; display: flex; align-items: center; gap: 6px; }

button, .btn {
  background: var(--accent); color: #fff; border: none; border-radius: 0;
  padding: 9px 18px; font: inherit; font-family: var(--font-gothic); font-weight: 500; font-size: .9rem; text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer; text-decoration: none; display: inline-block; box-shadow: 3px 3px 0 var(--ink);
}
button:hover, .btn:hover { background: var(--accent-dark); }
button.secondary, .btn.secondary {
  background: transparent; color: var(--ink); border: 1.5px solid var(--rule); box-shadow: none;
}
button.secondary:hover, .btn.secondary:hover { background: var(--ink); color: var(--page); }
button.danger { background: #d03b3b; }

.flash { border-radius: 0; padding: 10px 14px; margin: 0 0 16px; font-size: 0.95rem; }
.flash.ok { background: #e7f5e7; color: #006300; border: 1px solid #b7e0b7; }
.flash.err { background: #fdeaea; color: #a12020; border: 1px solid #f0bcbc; }

/* ---------- map ---------- */
.map-layout { display: flex; gap: 16px; align-items: stretch; }
#map { flex: 1; min-height: 560px; border-radius: 0; border: 1px solid var(--border); }
.map-side {
  width: 230px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; padding: 14px; font-size: 0.92rem;
}
.map-side h3 { margin: 0 0 8px; font-size: 0.85rem; text-transform: uppercase; color: var(--muted); }
.map-side label.cat { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.map-side .swatch { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.map-side .count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-side select { margin-top: 4px; }

/* ---------- hero banner ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 0; margin: 4px 0 24px;
  padding: 40px 28px; color: var(--ink); text-align: center;
  background: var(--surface);
  border: 2px solid var(--rule);
  box-shadow: 0 0 0 6px var(--page), 0 0 0 7px var(--rule);
}
.hero-smoke {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background:
    radial-gradient(400px 160px at 18% 120%, rgba(235,104,52,0.35), transparent 70%),
    radial-gradient(360px 150px at 82% 130%, rgba(237,161,0,0.28), transparent 70%);
}
.hero-inner { position: relative; }
.hero-emoji { font-size: 2.2rem; letter-spacing: 6px; margin-bottom: 6px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.hero-title { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 400; margin: 0; letter-spacing: .01em; line-height: .95; text-transform: uppercase; color: var(--accent); }
.hero-tagline { margin: 10px auto 0; max-width: 560px; color: var(--ink-2); font-size: 1.05rem; }
.dash-sub { margin: 0; font-size: 1.1rem; color: var(--ink-2); }

/* ---------- page head + judge filter ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.judge-filter { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 0.9rem; }
.judge-filter .jf-label { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.judge-filter select { border: none; background: transparent; font: inherit; font-weight: 600; color: var(--accent-dark); cursor: pointer; padding: 2px 4px; }
.judge-filter select:focus { outline: none; }

.tile-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.muted-note { color: var(--muted); font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
/* "+2" beside a visit date: the other days the photos say he was there. */
.more-visits { font-size: 0.78em; color: var(--muted); border: 1px solid var(--grid); border-radius: 999px;
  padding: 0 0.35em; cursor: help; }

.assoc-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; color: #fff; background: var(--c, #666); }

/* Pinned to the bottom of the screen by /css/footbar.css; what is here is
   what it looks like. The trail's tokens are the same palette under other
   names, so the bar matches the rest of the site without restating colours. */
.site-footer {
  border-top: 2px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.85rem;
  --jr-footbar-bg: var(--page);
  --jr-footbar-grain: var(--grain);
  --jr-footbar-rule: var(--rule);
  --jr-footbar-ink: var(--ink-2);
}
/* Which build you're looking at — the difference between "not live yet"
   and "live and wrong". Quieter than the footer text around it. */
/* opacity on top of a colour is contrast nothing can account for — three
   quarters of an already-quiet ink lands under what small text needs. Say the
   colour instead. */
.site-footer .site-version { font-size: 0.8rem; color: var(--ink-2); }
/* This stylesheet never styled a link in the footer, so the one link in it
   came out in the browser's default blue — which belongs to no part of this
   palette and was the only blue on the page. */
.site-footer a { color: var(--accent-dark); }
.site-footer a:hover { color: var(--ink); }
.footer-meta { font-size: 0.72rem; opacity: 0.75; margin-top: 4px; }

.actions { white-space: nowrap; }
.actions a { color: var(--ink-2); font-size: 0.85rem; }

@media (max-width: 760px) {
  .map-layout { flex-direction: column; }
  .map-side { width: auto; }
  .field-row { flex-direction: column; gap: 0; }
}

/* — certifications — */
.cert-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}
.cert-expired { background: #e34948; color: #fff; }
.cert-soon    { background: #eda100; color: #2a2a2a; }

.cert-add { margin: 10px 0 26px; }
.cert-add summary {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
}
.cert-add[open] summary { margin-bottom: 8px; }