@import url('https://fonts.googleapis.com/css2?family=Jost:wght@600;700;800&display=swap');

/* ── Tweak these variables to adjust the look ───────────────────────── */
:root {
  --font:        'Futura', 'Jost', 'Century Gothic', 'Open Sans', ui-sans-serif, sans-serif;
  --radius:      14px;      /* card corner radius */
  --row-height:  200px;     /* every card row is this tall — all same height */
  --gap:         18px;      /* gap between cards */
  --pad:         16px;      /* outer padding around the grid */
  --shadow:      0 8px 20px rgba(0,0,0,.20);
  --shadow-hover: 0 10px 24px rgba(0,0,0,.34);  /* a bit darker on hover */
}
/* ─────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--pad);
  background: transparent;
  font-family: var(--font);
}

/* Always 2 columns. 89% box spans both via grid-column: 1 / -1 below. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
  max-width: 100%;
}

.value-box {
  border-radius: var(--radius);
  padding: 8% 6%;
  color: white;
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(255,255,255,.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font);
  transition: box-shadow .18s ease;
  /* size the labels relative to THIS card's width (see .label cqi units),
     so long labels can grow yet never wrap regardless of screen size */
  container-type: inline-size;
}

/* Hover: deepen the drop shadow a touch to highlight the box you're pointing at. */
.value-box:hover {
  box-shadow: var(--shadow-hover), inset 0 0 0 3px rgba(255,255,255,.10);
}

/* 89% box always spans its own full row */
.value-box.wide {
  grid-column: 1 / -1;
  padding: 4% 5%;
}

/* ── Colors ──────────────────────────────────────────────────────────── */
.navy   { background: radial-gradient(circle at 40% 25%, #254b86, #17366d 62%, #102855); }
.orange { background: linear-gradient(145deg, #ffa21f, #ff7118); }
.gray   { background: linear-gradient(145deg, #f0f1f3, #d6d8dd); }
.green  { background: linear-gradient(145deg, #62b53d, #3d9a26); }
.red    { background: linear-gradient(145deg, #ff3f34, #e41e1e); }
.blue   { background: linear-gradient(145deg, #2376ff, #0755d7); }
.teal   { background: linear-gradient(145deg, #1aa9a8, #128985); }
.purple { background: linear-gradient(145deg, #7b44d1, #5f26a9); }
.gold   { background: linear-gradient(145deg, #f6bd22, #e79a00); }
.dark-text { color: #424850; }

/* ── Layout pieces ───────────────────────────────────────────────────── */
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 4%; }

.metric {
  display: flex; align-items: baseline; gap: .22em;
  white-space: nowrap;
  text-shadow: 0 3px 6px rgba(0,0,0,.25);
}

/* ── Font sizes (2-col) — edit clamp(MIN, FLUID, MAX) ───────────────── */
/* At a 700px iframe the fluid value (5vw) gives ~35px; at 1280px ~64px. */
.number { font-weight: 800; font-size: clamp(22px, 5vw, 68px); line-height: .92; letter-spacing: -.04em; }
.unit   { font-weight: 700; font-size: clamp(13px, 2.5vw, 38px); line-height: 1; }
.compact      { font-size: clamp(20px, 4.2vw, 58px); }
.compact-unit { font-size: clamp(12px, 2vw, 30px); }

.icon { flex: 0 0 20%; max-width: 140px; }
/* shoe on the Miles card is a wide graphic — give it more room */
.icon.shoe-icon { flex-basis: 30%; max-width: 190px; }
.icon svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); }
.icon-text       { font-family: var(--font); font-size: 27px; font-weight: 700; fill: #fff; }
.icon-text.small { font-size: 21px; }

.divider      { height: 2px; background: rgba(255,255,255,.50); margin: 5% 0 4%; border-radius: 999px; }
.divider.warm { background: rgba(255,228,170,.70); }
.divider.soft { background: rgba(255,255,255,.25); }
.divider.dark { background: rgba(0,0,0,.15); }

/* ── Label font size ─────────────────────────────────────────────────── */
/* cqi = % of the card's OWN width, so the label scales with the card and the
   longest one ("Sleeping in the wilderness") stays on a single line at every
   screen size — no px floor, because a floor would force that label to wrap/clip
   on a narrow phone. Capped at 30px so it never out-sizes the number above. */
.label          { font-weight: 700; font-size: min(6.4cqi, 30px); line-height: 1.05; text-shadow: 0 3px 6px rgba(0,0,0,.20); white-space: nowrap; }
.label.centered { text-align: center; }
.label.italic   { font-style: italic; text-align: center; }

/* ── Zero Days card ──────────────────────────────────────────────────── */
.zero-layout  { justify-content: flex-start; gap: 7%; }
.zero-icon    { position: relative; width: 28%; min-width: 80px; height: 100px; }
.big-zero     { position: absolute; left: 0; top: -8px; font-size: 100px; font-weight: 800; line-height: 1; }
.little-s     { position: absolute; left: 62%; top: 47px; font-size: 44px; font-weight: 800; }
.metric-stack { flex: 1; }
.sub-label    { font-size: clamp(12px, 1.8vw, 28px); font-weight: 700; }

/* ── 89% wide card ───────────────────────────────────────────────────── */
.wide-top { justify-content: flex-start; gap: 3%; align-items: center; }
.percent-icon {
  flex: 0 0 auto;
  width: clamp(44px, 6vw, 88px); height: clamp(44px, 6vw, 88px);
  display: grid; place-items: center;
  border-radius: calc(var(--radius) * 0.6);
  background: rgba(155,100,0,.40);
  font-size: clamp(26px, 4vw, 64px);
  font-weight: 800;
  text-shadow: 0 3px 5px rgba(0,0,0,.25);
  font-family: var(--font);
}
/* ── 89% single-line text — adjust font-size here ───────────────────── */
.pct-label {
  font-weight: 800;
  font-size: clamp(20px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 3px 6px rgba(0,0,0,.22);
  white-space: nowrap;
}
.progress      { width: 100%; height: 11%; min-height: 14px; margin: 4% 0 0; border-radius: 999px; background: rgba(0,0,0,.18); box-shadow: inset 0 2px 4px rgba(0,0,0,.16); overflow: hidden; }
.progress-fill { width: 89%; height: 100%; border-radius: inherit; background: linear-gradient(#ffe646, #ffc900); box-shadow: inset 0 3px 5px rgba(255,255,255,.55); }

/* ── Hover tooltips ──────────────────────────────────────────────────── */
/* Add  data-tooltip="your text here"  to any <section class="value-box">.
   The caption slides UP from the bottom, INSIDE the card. It has to be inside
   because .value-box uses overflow:hidden (and the whole thing is embedded in
   an iframe) — a tooltip popping outside the card would just get clipped.
   Cards with an empty data-tooltip="" show nothing. */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]:not([data-tooltip=""])::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(12,12,12,.92);
  color: #fff;
  font-family: var(--font);
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  padding: 10px 14px;
  transform: translateY(100%);          /* hidden below the card edge */
  transition: transform .22s ease;
  pointer-events: none;
  z-index: 5;
}
[data-tooltip]:not([data-tooltip=""]):hover::after { transform: translateY(0); }

/* Touch devices (no hover): the hover tooltip is unreachable without a mouse,
   so make each captioned card a real tap target — cursor:pointer so iOS Safari
   fires the click — and reveal its caption when tapped. The .tip-open class is
   toggled by the small script in index.html. Desktop hover is unchanged. */
@media (hover: none) {
  [data-tooltip]:not([data-tooltip=""]) { cursor: pointer; }
  [data-tooltip]:not([data-tooltip=""]).tip-open::after { transform: translateY(0); }
}

/* ── Small screens (phones): stack icon on top, text below ──────────────
   Below this width the side-by-side icon + number gets squished, so we
   turn each card into a vertical stack: icon (centered, bigger) on top,
   then the number + label underneath. The 89% and Zero-Days cards keep
   their own custom layouts. */
@media (max-width: 500px) {
  body { padding: 10px; }

  /* Let stacked content grow the row; both cards in a row still stretch
     to the same (tallest) height, so equal-height is preserved. */
  .grid { grid-auto-rows: minmax(180px, auto); gap: 12px; }

  /* stack the standard icon cards */
  .top-row:not(.wide-top):not(.zero-layout) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35em;
    text-align: center;
  }
  /* icon always first (some cards list it after the number in the HTML),
     centered and larger so it fills the top of the card */
  .top-row:not(.wide-top) .icon {
    order: -1;
    flex: none;
    width: 55%;
    max-width: 96px;
    margin: 0 auto;
  }
  .top-row:not(.wide-top) .icon.shoe-icon { width: 66%; max-width: 130px; }
  .top-row:not(.wide-top) .metric { justify-content: center; }
  .label { text-align: center; }

  /* Zero-Days card: stack the big "0s" over its text too */
  .zero-layout { flex-direction: column; align-items: center; gap: .4em; }
  .zero-icon   { min-width: 64px; height: 80px; }
  .big-zero    { font-size: 80px; }
  .little-s    { top: 38px; font-size: 36px; }
}