/* ═══════════════════════════════════════════════════════
   26in2026 — single stylesheet
   ═══════════════════════════════════════════════════════ */

:root {
  --bg:        #fef3c7;
  --panel:     #ffffff;
  --col-bg:    #fffffe;
  --text:      #0f172a;
  --muted:     #64748b;
  --border:    #0f172a;
  --accent:    #db21bc;
  --success:   #16a34a;
  --danger:    #dc2626;
  --shadow:    2px 2px 0 #0f172a;
  --radius:    10px;
  --gap:       10px;
  --dotMin:    44px;
  --nav-h:     58px;
  --foot-h:    50px;
  --panel-h:   calc(100vh - var(--nav-h) - var(--foot-h));

  /* ── Terrain colours ── */
  --type-road:     #2563eb;
  --type-trail:    #16a34a;  /* kept for backwards compat */
  --type-trails:   #16a34a;
  --type-mixed:    #7c3aed;
  --type-grass:    #65a30d;
  --type-track:    #0891b2;
  --type-indoors:  #c2410c;

  /* ── Gradient colours ── */
  --grad-flat:     #64748b;
  --grad-hills:    #ea580c;
  --grad-mountain: #475569;

  /* ── Social colours ── */
  --social-solo:   #db21bc;
  --social-group:  #0284c7;
  --social-kids:   #ca8a04;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 10%, #fde68a 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, #bbf7d0 0%, transparent 50%),
    radial-gradient(ellipse at 60% 20%, #fbcfe8 0%, transparent 45%);
  color: var(--text);
  font: 14px "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
}
img, svg { display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; }

/* ── Sticky nav ──────────────────────────────────────── */
.topnav {
  flex: 0 0 var(--nav-h);
  height: var(--nav-h);
  z-index: 100;
  background: var(--panel);
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: stretch;
  box-shadow: 0 2px 0 var(--border);
}
.nav-back {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-right: 2px solid var(--border);
  text-decoration: underline;
  font-size: 0.78rem; font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-back:hover { color: var(--text); }
.nav-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 18px;
  border-right: 2px solid var(--border);
  text-decoration: none;
  flex-shrink: 0;
  gap: 1px;
}
.nav-brand-title {
  font-size: 1.6rem; font-weight: 900; line-height: 1;
  color: var(--text); letter-spacing: -0.04em;
}
.nav-brand-title em { color: var(--accent); font-style: normal; }
.nav-brand-sub {
  font-size: 0.6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.nav-tabs {
  display: flex; align-items: center; flex: 1;
  gap: 8px; padding: 0 14px;
}
.nav-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  font-size: 0.78rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text); cursor: pointer;
  background: var(--col-bg);
  border: 2px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform .1s, box-shadow .1s, background .1s, color .1s;
  white-space: nowrap; user-select: none;
}
.nav-tab:hover  { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--border); }
.nav-tab:active { transform: translate(1px,1px);   box-shadow: 1px 1px 0 var(--border); }
.nav-tab.active { background: var(--border); color: var(--panel); transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--border); }

.nav-right {
  margin-left: auto; display: flex; align-items: center;
  padding: 0 14px; border-left: 2px solid var(--border); flex-shrink: 0;
}

/* Hamburger — hidden on desktop */
.hamburger {
  display: none; flex-direction: column;
  justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 6px;
  background: var(--col-bg);
  border: 2px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); cursor: pointer; flex-shrink: 0;
}
.hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--border); border-radius: 2px;
  transition: transform .2s, opacity .2s; transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  display: none; flex-direction: column;
  position: absolute; top: var(--nav-h); right: 0;
  min-width: 200px; background: var(--panel);
  border: 2px solid var(--border); border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 4px 4px 0 var(--border);
  z-index: 200; overflow: hidden;
}
.mobile-menu.open { display: flex; }
.mobile-tab {
  padding: 14px 20px; font-size: 0.85rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.06em;
  text-align: left; color: var(--text); background: transparent;
  border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.mobile-tab:last-child { border-bottom: none; }
.mobile-tab:hover  { background: var(--bg); }
.mobile-tab:active { background: var(--border); color: var(--panel); }

.sync-pill {
  font-size: 0.72rem; font-weight: 800; color: var(--muted); white-space: nowrap;
}

/* ── Panels ──────────────────────────────────────────── */
.tab-panel {
  display: none;
  height: var(--panel-h);
  overflow-y: auto; overflow-x: hidden;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
}
.tab-panel.active { display: flex; flex-direction: column; }

/* ── Stats panel ─────────────────────────────────────── */
#panel-stats { justify-content: stretch; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 10px; flex: 1; min-height: 0;
}
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; grid-template-rows: none; flex: none; }
  .kpi .v { font-size: clamp(1.3rem, 6vw, 1.8rem); }
}
.kpi {
  background: var(--col-bg);
  border: 2px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 14px 12px 14px;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px; min-height: 0; overflow: hidden;
}
.kpi .k {
  font-size: clamp(0.58rem, 0.9vw, 0.75rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); line-height: 1.2; flex-shrink: 0;
}
.kpi .v {
  font-size: clamp(1.1rem, 2.2vw, 2.2rem); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0; display: block;
}

/* ══════════════════════════════════════════════════════
   MONTHS — 2-row layout (13 cells per row)
   ══════════════════════════════════════════════════════ */
#panel-months { justify-content: stretch; }

.months-heatmap {
  flex: 1; min-height: 0;
  background: var(--panel);
  border: 2px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* 12 month rows stacked, each fills equal vertical space */
.months-grid {
  display: flex; flex-direction: column;
  gap: clamp(3px, 0.5vh, 8px);
  flex: 1; min-height: 0;
}

/* Each month: label + 2-row grid of 13 cells */
.mh-month-row {
  display: flex;
  align-items: stretch;
  gap: clamp(4px, 0.8vw, 10px);
  flex: 1; min-height: 0;
}
.mh-month-row + .mh-month-row {
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  padding-top: clamp(2px, 0.4vh, 6px);
  margin-top: clamp(-1px, -0.2vh, -1px);
}

.mh-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: clamp(24px, 4vw, 46px);
  font-size: clamp(0.5rem, 0.9vw, 0.75rem);
  font-weight: 900; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}


/* The 26-cell block arranged as 2 rows of 13 */
.mh-cells {
  flex: 1;
  min-width: 0;
  /* height:100% gives the grid a resolved pixel value so 1fr rows work */
  height: 100%;
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: clamp(2px, 0.35vw, 5px);
}

.mh-cell {
  border-radius: clamp(3px, 0.4vw, 6px);
  border: 2px solid var(--border);
  background: var(--col-bg);
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, filter .15s;
  cursor: default;
  position: relative;
  overflow: hidden;
  /* No aspect-ratio: let the grid control dimensions */
}
.mh-cell:not(.empty):hover {
  transform: scale(1.2);
  z-index: 10;
  box-shadow: 3px 3px 0 var(--border);
  filter: brightness(1.08);
}

/* Terrain colours — set via JS data-type, but CSS fallbacks too */
.mh-cell.filled                          { background: color-mix(in oklab, var(--type-road)     78%, white 22%); }
.mh-cell.filled[data-type="road"]        { background: color-mix(in oklab, var(--type-road)     78%, white 22%); }
.mh-cell.filled[data-type="trails"]      { background: color-mix(in oklab, var(--type-trails)   78%, white 22%); }
.mh-cell.filled[data-type="trail"]       { background: color-mix(in oklab, var(--type-trails)   78%, white 22%); }
.mh-cell.filled[data-type="mixed"]       { background: color-mix(in oklab, var(--type-mixed)    78%, white 22%); }
.mh-cell.filled[data-type="grass"]       { background: color-mix(in oklab, var(--type-grass)    78%, white 22%); }
.mh-cell.filled[data-type="track"]       { background: color-mix(in oklab, var(--type-track)    78%, white 22%); }
.mh-cell.filled[data-type="indoors"]     { background: color-mix(in oklab, var(--type-indoors)  78%, white 22%); }
.mh-cell.missed { background: color-mix(in oklab, var(--danger) 72%, white 28%); }

/* ✕ cross inside missed cells */
.mh-missed-cross {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(0.45rem, 1vw, 0.72rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none; z-index: 2;
  line-height: 1;
  letter-spacing: 0;
}

/* Completed months: faded + diagonal slash */
.mh-cell.filled.complete { opacity: 0.5; }
.mh-cell.filled.complete::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.5rem, 1.1vw, 0.85rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  pointer-events: none;
  line-height: 1;
}

.mh-cell.missed.complete { opacity: 0.5; }

/* Run number in current month */
.mh-run-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(0.4rem, 1vw, 0.7rem);
  font-weight: 900; color: #fff;
  pointer-events: none; z-index: 2;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Bonus runs pill — heatmap rows and statRuns KPI */
.mh-extras-badge,
.extras-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-weight: 900;
  color: var(--muted);
  background: var(--col-bg);
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  box-shadow: 1px 1px 0 #cbd5e1;
  white-space: nowrap;
  letter-spacing: 0.04em;
  cursor: default;
  line-height: 1.6;
  transition: background .15s, color .15s, border-color .15s;
}
/* Pink when there are actual bonus runs */
.mh-extras-badge--has,
.extras-badge--has {
  color: #fff;
  background: var(--accent);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
/* Heatmap: sits beside the cells */
.mh-extras-badge {
  flex-shrink: 0;
  align-self: center;
}
/* KPI: inline next to the number */
.extras-badge {
  vertical-align: middle;
  margin-left: 6px;
  font-size: 0.3em;
}

/* Shared tooltip */
.cell-tooltip {
  position: fixed; z-index: 999;
  background: var(--border); color: #fff;
  font-size: 0.78rem; font-weight: 800;
  padding: 6px 12px; border-radius: 6px;
  pointer-events: none; white-space: nowrap;
  display: none; letter-spacing: 0.03em;
  box-shadow: var(--shadow);
}

/* ── Mobile months override ── */
@media (max-width: 700px) {
  /*
    Goal: all 12 months visible, no horizontal overflow, scrollable vertically if needed.
    --cell accounts for:
      panel padding (10px x2 = 20)
      heatmap card padding (8px x2 = 16)
      label col (28px)
      label-to-cells gap (6px)
      12 gaps between 13 cells (3px x12 = 36)
      total overhead = 106px
    --cell = (100vw - 106px) / 13
  */
  #panel-months {
    overflow-y: auto;
    overflow-x: hidden;
    height: var(--panel-h);
    padding: 10px;
  }

  .months-heatmap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
    border-radius: 10px;
  }

  .months-grid {
    flex: 1;
    min-height: 0;
    gap: 3px;
  }

  .mh-month-row {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    gap: 6px;
  }
  .mh-month-row + .mh-month-row {
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    padding-top: 3px;
    margin-top: 0;
  }

  .mh-label {
    width: 28px;
    font-size: 0.58rem;
    display: flex;
    align-items: center;
  }

  .mh-cells {
    --cell: calc((100vw - 106px) / 13);
    flex: 1;
    min-width: 0;
    height: 100%;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;
    gap: 3px;
  }

  .mh-cell {
    border-radius: 4px;
    border-width: 1.5px;
    box-shadow: 1px 1px 0 var(--border);
  }

  .mh-run-num { font-size: clamp(0.4rem, 2vw, 0.58rem); }

  .mh-cell.filled.complete::after {
    font-size: clamp(0.45rem, 2vw, 0.65rem);
  }
}

/* ══════════════════════════════════════════════════════
   GRAPHS — three grouped sections
   ══════════════════════════════════════════════════════ */
#panel-graphs { justify-content: stretch; padding: 14px; }

/* Outer wrapper: 3 groups side by side on desktop */
.graphs-outer {
  flex: 1; min-height: 0;
  display: flex;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}

/* Each group: a labelled panel */
.graph-group {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
}
/* Adjacent groups share a border */
.graph-group + .graph-group { margin-left: -2px; border-radius: 0; }
.graph-group:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.graph-group:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

/* Group heading */
.graph-group-label {
  flex-shrink: 0;
  padding: 7px 12px;
  font-size: 0.65rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  background: var(--col-bg);
}

/* Columns inside each group */
.graph-cols {
  flex: 1; min-height: 0;
  display: flex;
  gap: clamp(4px, 0.8vw, 10px);
  padding: clamp(6px, 1vw, 14px);
  align-items: stretch;
  overflow: hidden;
}

.graph-col {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  gap: 5px;
}

.graph-label {
  flex-shrink: 0;
  font-size: clamp(0.5rem, 0.9vw, 0.78rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
  text-align: center;
  padding: 6px 3px;
  border-radius: 6px; border: 2px solid var(--border);
  background: var(--col-bg); /* overridden by JS */
  box-shadow: var(--shadow);
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.graph-count {
  flex-shrink: 0;
  font-size: clamp(1.2rem, 2.5vw, 2.6rem);
  font-weight: 900; letter-spacing: -0.04em;
  text-align: center; line-height: 1;
}

.graph-shaft {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  gap: clamp(1px, 0.25vw, 3px);
  overflow: hidden;
}

.graph-block {
  flex: 1; min-height: 0;
  border-radius: clamp(2px, 0.25vw, 4px);
  background: #e2e8f0;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .1s, box-shadow .1s, filter .1s;
}
.graph-block.filled {
  border-color: rgba(0,0,0,.2); cursor: default;
  /* colour set by JS via style.background */
}
.graph-block.filled:hover {
  transform: scaleX(1.15); box-shadow: var(--shadow);
  filter: brightness(1.1); z-index: 10;
}

.graph-tooltip {
  position: fixed; z-index: 999;
  background: var(--border); color: #fff;
  font-size: 0.78rem; font-weight: 800;
  padding: 6px 12px; border-radius: 6px;
  pointer-events: none; white-space: nowrap;
  display: none; letter-spacing: 0.03em;
  box-shadow: var(--shadow);
}

/* Mobile graphs: stack the 3 groups vertically, each scrollable */
@media (max-width: 700px) {
  #panel-graphs { padding: 10px; overflow-y: auto; }

  .graphs-outer {
    flex-direction: column;
    flex: none;
    gap: 10px;
    overflow: visible;
  }

  .graph-group {
    flex: none;
    /* Fixed height per group so bars are visible */
    height: 200px;
    border-radius: var(--radius) !important;
    margin-left: 0 !important;
  }

  .graph-group-label { padding: 6px 10px; }

  .graph-cols { padding: 8px; gap: 4px; overflow: hidden; }

  .graph-label {
    font-size: clamp(0.42rem, 1.8vw, 0.6rem);
    padding: 4px 2px; letter-spacing: 0;
  }
  .graph-count { font-size: clamp(0.85rem, 3.5vw, 1.4rem); }
  .graph-shaft { gap: 2px; }
  .graph-block { border-radius: 2px; border-width: 1px; }
}

/* ── About panel — quirky layout ────────────────────── */
#panel-about { overflow: hidden; padding: 0; }

.about-quirky {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 44px 1fr;
  grid-template-areas:
    "why"
    "ticker"
    "rules";
  gap: 0; position: relative; overflow: hidden;
}
.aq-block {
  padding: clamp(20px, 3vw, 40px);
  border: 2px solid var(--border); background: var(--panel);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden; position: relative; z-index: 1;
}
.aq-eyebrow {
  font-size: 0.65rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent);
}
.aq-headline {
  font-size: clamp(1.4rem, 3.5vw, 3rem); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.05;
}
.aq-headline em { font-style: normal; color: var(--accent); }
.aq-block p { font-size: clamp(0.82rem, 1.2vw, 1rem); line-height: 1.65; color: var(--muted); margin: 0; }
.aq-why { grid-area: why; border-right: none; border-bottom: none; }
.aq-ticker {
  grid-area: ticker; background: var(--border); color: var(--panel);
  border-top: 2px solid var(--border); border-bottom: 2px solid var(--border);
  overflow: hidden; display: flex; align-items: center;
}
.aq-ticker-inner {
  display: flex; gap: 48px; white-space: nowrap;
  animation: tickerScroll 22s linear infinite;
  font-size: 0.82rem; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0 24px; width: max-content; will-change: transform;
}
.aq-ticker-inner span { flex-shrink: 0; }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.aq-rules { grid-area: rules; border-top: 2px solid var(--border); }
.aq-rule-list { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: center; }
.aq-rule {
  font-size: clamp(0.82rem, 1.3vw, 1.05rem); font-weight: 800;
  padding: 8px 14px; border-radius: 6px; border: 2px solid var(--border);
}
.aq-rule-in  { background: color-mix(in oklab, var(--success) 15%, white 85%); }
.aq-rule-out { background: color-mix(in oklab, var(--danger)  12%, white 88%); color: var(--muted); text-decoration: line-through; text-decoration-color: var(--danger); }

@media (max-width: 600px) {
  #panel-about { overflow-y: auto; }
  .about-quirky {
    grid-template-columns: 1fr; grid-template-rows: none;
    grid-template-areas: "why" "ticker" "rules"; flex: none;
  }
  .aq-why { border-right: 2px solid var(--border); }
}

/* ── Footer ───────────────────────────────────────────── */
.footer {
  flex: 0 0 var(--foot-h); height: var(--foot-h);
  background: var(--panel); border-top: 2px solid var(--border);
  display: flex; gap: var(--gap); align-items: center;
  justify-content: space-between; padding: 0 16px;
  z-index: 50; position: relative;
}
.mdLink {
  display: flex; align-items: center;
  padding: 5px 12px; height: 32px;
  border: 2px solid var(--border); border-radius: 8px;
  background: var(--col-bg); text-decoration: none;
  color: var(--text); font-weight: 900; font-size: 0.8rem;
  box-shadow: var(--shadow);
}
.runsLeft { color: var(--danger); font-weight: 800; }

/* ── Mobile global ──────────────────────────────────── */
@media (max-width: 700px) {
  .nav-tabs  { display: none; }
  .nav-brand {flex: 1;
    border-right: none;}
  .hamburger { display: flex; }
  body { position: relative; }
}
@media (max-width: 520px) {
  :root { --gap: 8px; --dotMin: 44px; --nav-h: 52px; --foot-h: 44px; }
  .nav-brand { padding: 6px 10px; }
  .nav-brand-title { font-size: 1.2rem; }
  .nav-brand-sub { display: none; }
  .nav-right { padding: 0 8px; }
  .tab-panel { padding: 10px; }
}
@media (min-width: 900px) { :root { --dotMin: 52px; } }

/* ══════════════════════════════════════════════════════
   FORM TAB
   ══════════════════════════════════════════════════════ */
#panel-form { justify-content: stretch; }

.form-outer {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.form-section {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.form-section + .form-section { margin-top: 12px; }

.form-section-head {
  font-size: 0.65rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}

.form-divider { height: 12px; flex-shrink: 0; }

/* ── Sparklines ── */
.form-spark-row {
  display: grid;
  grid-template-columns: 70px 1fr 80px;
  align-items: center;
  gap: 12px;
  min-height: 0;
}
.form-spark-label {
  font-size: 0.72rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text); flex-shrink: 0;
}
.form-spark-chart {
  flex: 1; min-width: 0;
  position: relative;
}
.form-spark-range {
  display: flex; flex-direction: column;
  gap: 2px; text-align: right; flex-shrink: 0;
  font-size: 0.65rem; font-weight: 800;
  color: var(--muted); letter-spacing: 0.03em;
}

/* ── Monthly comparison bars ── */
.form-comp-block {
  display: flex; flex-direction: column; gap: 8px;
}
.form-comp-label {
  font-size: 0.65rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
}
.form-comp-bars {
  display: flex;
  gap: clamp(6px, 1.2vw, 16px);
  align-items: flex-end;
  height: 100px;
}
.form-comp-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.form-comp-val {
  font-size: clamp(0.5rem, 0.9vw, 0.68rem);
  font-weight: 800; color: var(--muted);
  text-align: center; white-space: nowrap;
  flex-shrink: 0;
}
.form-comp-val.best {
  color: var(--text); font-size: clamp(0.55rem, 1vw, 0.75rem);
}
.form-comp-bar-wrap {
  flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: flex-end;
}
.form-comp-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  transition: filter .15s;
  min-height: 4px;
}
.form-comp-bar:hover { filter: brightness(1.1); }
.form-comp-month {
  font-size: clamp(0.5rem, 0.85vw, 0.65rem);
  font-weight: 900; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  flex-shrink: 0; text-align: center;
}

/* form-comp-block separator */
.form-comp-block + .form-comp-block {
  border-top: 1px solid rgba(15,23,42,0.1);
  padding-top: 12px;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .form-section { padding: 12px; }
  .form-spark-row { grid-template-columns: 56px 1fr 68px; gap: 8px; }
  .form-comp-bars { height: 80px; gap: 4px; }
    
}

.mobile-tab.active {
  background: var(--border);
  color: var(--panel);
}

/* ══════════════════════════════════════════════════════
   MAP
   ══════════════════════════════════════════════════════ */
#panel-map { justify-content: stretch; gap: 14px; }

.map-canvas {
  flex: 1; min-height: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--panel);
  position: relative;
  isolation: isolate;
  z-index: 0;
}
.map-canvas .leaflet-container { background: var(--col-bg); font-family: inherit; }
.map-canvas .leaflet-popup-content-wrapper {
  border: 2px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
}
.map-canvas .leaflet-popup-tip { border: 2px solid var(--border); }

/* Pulsing "you are here" marker */
.map-marker-wrap { position: relative; width: 22px; height: 22px; }
.map-marker-pin {
  position: absolute; inset: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 2;
}
.map-marker-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  margin-top: -11px; margin-left: -11px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  animation: mapPulse 2s ease-out infinite;
  z-index: 1;
}
.map-marker-ring.delay { animation-delay: 1s; }
@keyframes mapPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-marker-ring { animation: none; opacity: 0.25; }
}

.route-bar-card {
  flex-shrink: 0;
  background: var(--panel);
  border: 2px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 30px 18px;
}
.route-bar-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.route-bar-title { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.route-bar-pct { font-size: 1.1rem; font-weight: 900; color: var(--accent); }
.route-bar-track {
  position: relative; height: 14px;
  background: var(--col-bg);
  border: 2px solid var(--border); border-radius: 999px;
}
.route-bar-fill {
  position: absolute; inset: 0; right: auto;
  background: var(--accent);
  border-radius: 999px 0 0 999px;
  transition: width .3s;
}
.route-bar-you {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--panel); border: 3px solid var(--border);
  box-shadow: var(--shadow); z-index: 3;
}
.route-bar-you::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
  animation: mapPulse 2s ease-out infinite;
  z-index: -1;
}
.route-bar-ticks { position: relative; height: 30px; margin-top: 4px; }
.route-bar-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 0.58rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.route-bar-tick::before {
  content: ''; position: absolute; left: 50%; top: -14px;
  width: 2px; height: 8px; background: var(--border);
}

@media (max-width: 700px) {
  #panel-map { padding: 10px; overflow-y: auto; gap: 10px; }
  .map-canvas { height: 260px; flex: none; }
  .route-bar-card { padding: 12px 12px 26px 12px; }
  .route-bar-tick { font-size: 0.5rem; }
}
/* ══════════════════════════════════════════════════════
   SMFTD INTEGRATION OVERRIDES
   This now lives inside the main site template (nav,
   footer, and page chrome come from base.njk) instead of
   being its own standalone app shell. These overrides
   undo the old fixed-viewport app-shell sizing so content
   flows normally on the page like every other SMFTD page,
   instead of being clipped into an internal scroll box.
   ══════════════════════════════════════════════════════ */
html, body { height: auto; overflow: visible; }

body {
  background-color: var(--cream);
  background-image: none;
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  display: block;
}

/* The dashboard panels (KPI grid, months, graphs, map, about) were designed
   around a proportional font. Body now defaults to DM Mono (monospace) for
   the surrounding SMFTD chrome, which is much wider per character and was
   causing numbers/labels to overflow their boxes. Restore the original
   proportional font for just the panel content. */
.tab-panel {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.tab-panel.active {
  height: auto;
  overflow: visible;
}

@media (min-width: 701px) {
  .map-canvas { height: 480px; flex: none; }

  /* Months heatmap and Graphs both rely on flex:1 / height:100% chains
     to size their internal grids, which need a bounded ancestor height
     to resolve against. The page used to be viewport-locked so that
     bound existed automatically; now that it flows normally, give these
     two panels their own explicit height (with internal scroll) so the
     grid cells and bar charts render at a real size instead of
     collapsing toward zero. */
  #panel-months {
    height: 640px;
    overflow-y: auto;
    padding: 14px;
  }

  #panel-graphs {
    height: 480px;
    overflow: hidden;
  }
}