/* 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 ----------
   Bodoni is ONLY used for these. If a piece of text is a label, number, button,
   tag, time, distance or paragraph, it is Karla. */
.t-hero        { font: 400 40px/1.06 var(--font-display); }   /* detail sheet serves */
.t-ob-head     { font: 400 42px/1.08 var(--font-display); }   /* onboarding headline */
.t-title       { font: 500 27px/1   var(--font-display); }    /* screen title, wordmark */
.t-serves      { font: 400 27px/1.16 var(--font-display); }   /* feed card serves */
.t-serves-sm   { font: 400 25px/1.18 var(--font-display); }   /* saved row, map card */
.t-alert       { font: 400 22px/1.22 var(--font-display); }   /* alert headline */
.t-quote       { font: italic 400 20px/1.38 var(--font-display); }
.t-empty       { font: 400 26px/1.22 var(--font-display); }

.t-eyebrow {                                                   /* section labels */
  font: 500 10.5px var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.t-headline-sub {                                              /* under the wordmark */
  font: 500 10.5px var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.t-meta {                                                      /* card top row */
  font: 500 11px var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  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-display); }
.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 10.5px var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.tab--on .tab__dot   { background: var(--accent); }
.tab--on .tab__label { font-weight: 700; color: var(--ink); }