/* Crashers — reference stylesheet.
   Vanilla CSS, no framework, no build step. Every number here is the design.
   Pair with tokens.css. See crashers-reference.html for the markup each rule expects. */

/* ---------- resets ---------- */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-ui); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #8E3520; }

/* Hide scrollbars on the app's scroll regions — the design has no visible track. */
.scroll { overflow-y: auto; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.hscroll { overflow-x: auto; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }

/* ---------- screen shell ----------
   393 x 820 is the design canvas (iPhone 15 logical). In the real app the screen
   fills the viewport; what matters is the three-part column: fixed header,
   flexible scroll region, fixed tab bar. min-height:0 on the middle is required
   or the scroll region will not scroll. */
.screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
}
.screen__body { flex: 1; min-height: 0; }

/* ---------- type scale ----------
   The serif (--font-brand) is ONLY used for the screen title / wordmark and
   the host's quote, so it always means "Crashers" or "the host said this".
   Every name, heading, label, number, button, tag, time, distance and
   paragraph is Hanken Grotesk. Display sizes run at 700 with slightly
   negative tracking; the old serif sizes were 25-42px because a Didone
   reads small, and the sans does not need them. */
.t-hero        { font: 700 30px/1.12 var(--font-display); letter-spacing: -.02em; }   /* detail sheet name */
.t-ob-head     { font: 700 36px/1.08 var(--font-display); letter-spacing: -.025em; }  /* onboarding headline */
.t-title       { font: 500 27px/1   var(--font-brand); }                              /* screen title, wordmark */
.t-serves      { font: 700 21px/1.2 var(--font-display); letter-spacing: -.015em; }   /* feed card name */
.t-serves-sm   { font: 700 18px/1.22 var(--font-display); letter-spacing: -.01em; }   /* saved row, map card */
.t-alert       { font: 700 19px/1.25 var(--font-display); }                           /* alert headline */
.t-quote       { font: italic 400 20px/1.38 var(--font-brand); }                      /* the host's own words */
.t-empty       { font: 700 22px/1.25 var(--font-display); letter-spacing: -.01em; }

/* Labels are sentence case at 12.5px. 10.5px tracked capitals on every
   block turned into noise, and at their old grey they failed AA. */
.t-eyebrow {                                                   /* section labels */
  font: 600 12.5px var(--font-ui);
  color: var(--muted-2);
}
.t-headline-sub {                                              /* under the wordmark */
  font: 500 13px var(--font-ui);
  color: var(--muted-2);
}
.t-meta {                                                      /* card top row */
  font: 600 12.5px var(--font-ui);
  color: var(--muted-3);
}
.t-event-title { font: 600 13.5px/1.35 var(--font-ui); color: var(--ink-2); }
.t-body        { font: 400 15px/1.6 var(--font-ui); color: var(--ink-3); }
.t-body-sm     { font: 400 13px/1.6 var(--font-ui); color: var(--ink-3); }
.t-note        { font: 400 12px/1.6 var(--font-ui); color: var(--muted-3); }

/* ---------- header ---------- */
.header {
  flex: none;
  padding: 10px var(--gutter) 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.header__title { font: 500 27px/1 var(--font-brand); }
.header__sub   { margin-top: 7px; }

.bell {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap);
  padding: 0 4px;
  cursor: pointer;
}
.bell__label { font: 600 12px var(--font-ui); color: var(--muted); }
.bell__count {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 11px var(--font-ui);
}

/* ---------- chip rail ---------- */
.chips {
  flex: none;
  display: flex;
  gap: 7px;
  padding: 0 var(--gutter) 12px;
}
.chip {
  flex: none;
  min-height: 34px;              /* 34 + the row's padding clears 44 */
  display: flex;
  align-items: center;
  padding: 0 13px;
  border-radius: var(--r-pill);
  font: 600 12.5px var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  background: var(--sand);
  color: var(--muted);
}
.chip--on      { background: var(--accent); color: var(--accent-ink); }
.chip--filters { background: var(--ink);    color: var(--paper); }

/* ---------- feed ----------
   No card containers, no shadows, no boxes. The 1px rule IS the card boundary. */
.list { padding: 0 var(--gutter) 24px; }

.group-label { padding: 14px 0 2px; }

.card {
  padding: 15px 0 16px;
  border-top: 1px solid var(--rule);
  cursor: pointer;
}
.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.card__meta-left {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__dist { flex: none; color: var(--accent); }   /* never shrinks */
.card__serves { margin: 10px 0 0; }
.card__title  { margin-top: 8px; }
.card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}

.tag {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-tag);
  font: 500 11.5px var(--font-ui);
  color: var(--muted);
  white-space: nowrap;
}
.tag--filled {
  padding: 6px 11px;
  border: 0;
  border-radius: var(--r-tag-filled);
  background: var(--ink);
  color: var(--paper);
  font: 600 12px var(--font-ui);
}
.mark { font: 500 11.5px var(--font-ui); color: var(--muted-2); white-space: nowrap; }

.save {
  margin-left: auto;             /* pushed right */
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-radius: var(--r-save);
  background: var(--paper-2);
  font: 600 12px var(--font-ui);
  color: var(--muted);
  cursor: pointer;
}

/* ---------- buttons ---------- */
.btn {
  text-align: center;
  padding: 16px;
  border-radius: var(--r-button);
  font: 700 14.5px var(--font-ui);
  cursor: pointer;
}
.btn--primary   { background: var(--accent); color: var(--accent-ink); }
.btn--secondary { border: 1px solid var(--border); color: var(--ink-2); }
.btn--text {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 13px var(--font-ui);
  color: var(--muted-2);
  cursor: pointer;
}
.btn-row { display: flex; gap: 9px; }
.btn-row .btn--primary { flex: 1; }

/* ---------- blocks ---------- */
.block {
  padding: 15px 17px;
  background: var(--paper-2);
  border-radius: var(--r-block);
}
.block__label { margin-bottom: 9px; }

/* ---------- facts table (event detail) ---------- */
.facts { margin-top: 18px; }
.fact {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.fact:last-child { border-bottom: 1px solid var(--rule); }
.fact__label {
  flex: none;
  width: 82px;
  font: 600 12.5px var(--font-ui);
  color: var(--muted-3);
}
.fact__value { font: 500 13.5px/1.45 var(--font-ui); }
.fact__value span { color: var(--muted-2); font-weight: 400; }

/* ---------- sheets ---------- */
.sheet-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim-sheet); }
.sheet-wrap--detail .sheet-scrim { background: var(--scrim-detail); }

.sheet {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-sheet);
  overflow-y: auto;
  scrollbar-width: none;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet--filters { max-height: 86%; padding: 16px var(--gutter) 26px; }
.sheet--detail  { max-height: 92%; padding: 14px var(--gutter) 28px; }

.grabber {
  width: 40px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--rule);
  margin: 0 auto 14px;
}
.close {
  flex: none;
  width: var(--tap); height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--muted);
  font: 600 15px var(--font-ui);
  cursor: pointer;
}

/* Filter options. Note the two-tier selection colour:
   --ink for scoping (when / within), --accent for content filters. */
.opts { display: flex; gap: 7px; flex-wrap: wrap; }
.opt {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--r-option);
  background: var(--sand);
  color: var(--muted);
  font: 600 13px var(--font-ui);
  cursor: pointer;
}
.opt--on        { background: var(--ink);    color: var(--paper); }
.opt--on-accent { background: var(--accent); color: var(--accent-ink); }

/* ---------- map ---------- */
.map { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--map-land); }

/* Markers are labelled pills, not pins. */
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: var(--tap);
  min-height: var(--tap);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pin__label {
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 11px var(--font-ui);
  white-space: nowrap;
  box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .35);
}
.pin--on .pin__label {
  padding: 7px 11px;
  background: var(--ink);
  color: var(--accent-ink);
  font-size: 11.5px;
  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .4);
}
.you {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--dot-you);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.map-card {
  flex: none;
  padding: 14px var(--gutter) 18px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

/* ---------- toggles (profile) ---------- */
.switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  min-height: var(--tap);
  cursor: pointer;
}
.switch-row__label { font: 600 14px var(--font-ui); }
.switch-row__sub   { font: 400 12px/1.4 var(--font-ui); color: var(--muted-2); margin-top: 3px; }
.switch {
  flex: none;
  width: 46px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--rule);
  display: flex;
  align-items: center;
  padding: 3px;
}
.switch__knob { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); }
.switch--on { background: var(--accent); justify-content: flex-end; }
.switch--on .switch__knob { background: var(--accent-ink); }

/* ---------- tab bar ---------- */
.tabs {
  flex: none;
  display: flex;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 8px 8px 22px;
}
.tab {
  flex: 1;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
/* The dot is always in the DOM, transparent when inactive, so labels never shift. */
.tab__dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.tab__label {
  font: 600 12px var(--font-ui);
  color: var(--muted-4);
}
.tab--on .tab__dot   { background: var(--accent); }
.tab--on .tab__label { font-weight: 700; color: var(--ink); }