/* ════════════════════════════════════════════════════════════════
   #p5 — THE LONG RUN  (merged CONSISTENCY + THE APP closing page)
   One stylesheet per panel, linked after style.css — see STYLE_GUIDE §8.
   Uses web tokens only. No iOS-token exceptions on this panel.

   CONTENTS
   01 · Head labels
   02 · The strip (full-bleed year grid)
   03 · TODAY marker
   04 · CTA in the unwritten half
   05 · Legend + derived stat line
   06 · Hover readout (session tooltip)
   07 · Parked: WHY THE STREAK HOLDS cards
   08 · Responsive
   09 · Reduced motion
   ════════════════════════════════════════════════════════════════ */

/* ── 01 · HEAD LABELS ────────────────────────────────────────── */
.lr-head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-40);
  display: flex; justify-content: space-between; margin-bottom: 16px;
}
.lr-head em { color: var(--blue); font-style: normal; }
.lr-wrap { position: relative; z-index: 2; margin-top: 44px; }

/* ── 02 · THE STRIP ──────────────────────────────────────────── */
/* Full-bleed on purpose: the year grid IS the panel's blueprint grid resolving
   into data, so it must run edge to edge past the panel's 6vw padding
   (same escape hatch as .cm-marquee-wrap). min-height keeps the band tall
   enough for the CTA once the cells shrink on narrow windows; the grid is
   centred inside it. */
.lr-strip {
  position: relative; margin: 0 -6vw;
  min-height: 252px; display: flex; align-items: center;
}
/* the marker anchors to the CELLS, not the band — hence a second wrapper */
.lr-gridwrap { position: relative; width: 100%; }

/* 52 columns × 7 rows, column-major so a column is a week.
   Row height is set from the measured column width in long-run.js (1.6× the
   column — the old heatmap's taller-than-wide cell proportion); a fixed px row
   against 1fr columns turns the strip into a barcode as the viewport widens. */
.lr-grid {
  display: grid; grid-template-rows: repeat(7, 20px);
  grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
}
/* Density is a background alpha, NOT element opacity: opacity would dim the
   hover outline along with the cell and the readout target disappears. */
.lr-grid i { border-radius: 2px; position: relative; background: rgba(242,240,235,0.05); }
.lr-grid i.l1 { background: rgba(255,74,9,0.22); }
.lr-grid i.l2 { background: rgba(255,74,9,0.45); }
.lr-grid i.l3 { background: rgba(255,74,9,0.72); }
.lr-grid i.l4 { background: var(--orange); }
.lr-grid i:hover { outline: 1px solid var(--text); outline-offset: 1px; z-index: 3; }

/* the one day that hasn't happened yet */
.lr-grid i.lr-next {
  background: var(--orange); box-shadow: 0 0 14px rgba(255,74,9,0.6);
  animation: lr-next 2.4s ease-in-out infinite;
}
@keyframes lr-next { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

/* ── 03 · TODAY MARKER ───────────────────────────────────────── */
.lr-mark {
  position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px;
  background: rgba(255,74,9,0.55); pointer-events: none;
}
.lr-mark-l {
  position: absolute; left: 50%; top: -26px; margin-left: 9px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--orange);
}

/* ── 04 · CTA IN THE UNWRITTEN HALF ──────────────────────────── */
/* The download sits inside the 26 empty weeks — consistency and the action are
   one gesture. Anchored to the band (not the cells) so it stays centred.
   pointer-events: the overlay spans the strip's whole right half, so it must
   pass hovers through to the cells beneath (TODAY's tooltip lives there) while
   its two buttons stay clickable — same convention as .dp-over. */
.lr-cta {
  position: absolute; left: 50%; top: 0; bottom: 0; right: 6vw;
  padding-left: 46px; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; gap: 18px;
  pointer-events: none;
}
.lr-cta-act a { pointer-events: auto; }
.lr-cta-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--text-40); }
.lr-cta-act { display: flex; gap: 12px; row-gap: 10px; flex-wrap: wrap; align-items: center; }
/* whole buttons stack; labels never break mid-word when the half is narrow */
.lr-cta-act .btn-o, .lr-cta-act .btn-g { white-space: nowrap; }

/* ── 05 · LEGEND + DERIVED STAT LINE ─────────────────────────── */
.lr-foot {
  max-width: 1240px; width: 100%; margin: 18px auto 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--text-40);
}
.lr-legend { display: flex; align-items: center; gap: 6px; }
.lr-legend i { width: 11px; height: 11px; border-radius: 2px; background: rgba(242,240,235,0.05); }
.lr-legend i.l1 { background: rgba(255,74,9,0.22); }
.lr-legend i.l2 { background: rgba(255,74,9,0.45); }
.lr-legend i.l3 { background: rgba(255,74,9,0.72); }
.lr-legend i.l4 { background: var(--orange); }
/* Read OFF the grid in long-run.js, never hardcoded — hover-count any square
   and the two have to reconcile. */
.lr-stats { display: flex; gap: 20px; letter-spacing: 0.08em; }
.lr-stats b { color: var(--text); font-weight: 500; }
.lr-stats .sep { color: var(--text-25); }
.lr-stats .zero { color: var(--orange); font-weight: 500; }

/* ── 06 · HOVER READOUT ──────────────────────────────────────── */
/* Every square carries its session. Fixed, not absolute: it has to escape the
   panel's overflow:hidden. Y flips below the cell near the nav (long-run.js). */
.lr-tip {
  position: fixed; left: 0; top: 0; z-index: 120; opacity: 0; pointer-events: none;
  transform: translate(-50%, -100%); transition: opacity .15s;
  background: var(--bg2); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 14px 16px; min-width: 214px; box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.lr-tip-date { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--text-40); }
.lr-tip-wod {
  font-family: var(--mono); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--orange); margin-top: 7px;
}
.lr-tip.is-empty .lr-tip-wod { color: var(--text-40); }
.lr-tip.is-today .lr-tip-wod { color: var(--text); }
.lr-tip-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.lr-tip-type { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--text-40); }
.lr-tip-score { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--text); }
.lr-tip-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em; color: var(--text-25); margin-top: 9px; }

/* ── 07 · PARKED: WHY THE STREAK HOLDS ───────────────────────── */
/* Three .ac cards, off by default — the page read overcrowded with them and the
   headline already makes the argument. Markup is parked in index.html. */
.lr-why { max-width: 1240px; width: 100%; margin: 64px auto 0; position: relative; z-index: 2; }

/* ── 08 · RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 980px) {
  /* the CTA can't share the band with the cells at phone width */
  .lr-strip { flex-direction: column; align-items: stretch; min-height: 0; }
  .lr-cta { position: static; right: auto; padding: 28px 6vw 0; }
  .lr-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lr-stats { flex-wrap: wrap; }
  .lr-tip { display: none; } /* no hover on touch — the app owns the detail there */
}

/* ── 09 · REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lr-grid i.lr-next { animation: none; }
}