/* ════════════════════════════════════════════════════════════════
   RandWOD Website — data-panel.css
   The DATA panel (#p2): TRAINING LOAD · SESSION · PR
   Uses the tokens already defined in css/style.css §01
   (--bg2 --text --text-60/40/25 --line --line-strong --orange --blue
    --green --body --mono). Link this AFTER style.css.
   ════════════════════════════════════════════════════════════════ */

/* ── card shell ──────────────────────────────────────────────── */
.dp { margin-top: 30px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--bg2); overflow: hidden; }
.dp-bar { display: flex; align-items: center; gap: 6px; padding: 15px 20px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; }
.dp-tab { font: inherit; color: var(--text-40); background: none; border: none; cursor: pointer; padding: 9px 16px; border-radius: 5px; letter-spacing: 0.14em; }
.dp-tab.on { background: rgba(255,74,9,0.14); color: var(--orange); }
.dp-meta { margin-left: auto; color: var(--text-25); }

/* ONE body height for every tab — SESSION's, the tallest — so the card
   never changes size on a tab switch. LOAD and PR grow their charts below
   to spend the extra room instead of floating in it. */
.dp-body { display: grid; grid-template-columns: 1.85fr 1fr; height: 478px; }

.dp-plot { padding: 32px 28px 28px 32px; display: flex; flex-direction: column; justify-content: center; }
.dp-side { padding: 32px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }

/* ── shared type ─────────────────────────────────────────────── */
.dp-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--text-40);
        display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
        height: 16px; white-space: nowrap; }
.dp-h .read { color: var(--text-60); overflow: hidden; text-overflow: ellipsis; }
.dp-h .read.hot { color: var(--orange); }
.dp-big { font-family: var(--mono); font-size: 72px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.dp-big.time { font-size: 64px; color: var(--orange); }
.dp-unit { font-family: var(--mono); font-size: 16px; color: var(--text-40); }
.dp-cap { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--text-40); }
.dp-up { font-family: var(--mono); font-size: 13px; color: var(--green); }
.dp-rule { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.dp-side .dp-note { margin-top: 26px; }
.dp-note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-25); }
.dp-dev { border: 1px dashed var(--text-25); border-radius: 4px; padding: 3px 9px;
          font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--text-40); white-space: nowrap; }

.dp-legend { display: flex; gap: 22px; margin-top: 20px; font-family: var(--mono); font-size: 10px;
             letter-spacing: 0.14em; color: var(--text-40); white-space: nowrap; }
.dp-legend span { display: flex; gap: 8px; align-items: center; }
.dp-sw { width: 10px; height: 8px; border-radius: 2px; }
.dp-sw.o { background: var(--orange); }
.dp-sw.o-dim { background: rgba(255,74,9,0.45); }
.dp-sw.b { background: rgba(0,177,252,0.28); }
.dp-sw.line { width: 10px; height: 2px; border-radius: 0; background: var(--orange); }
.dp-sw.dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--blue); background: var(--bg2); }
.dp-sw.vline { width: 1px; height: 9px; border-radius: 0; background: rgba(242,240,235,0.3); }

/* ── plot frame (shared by all three charts) ─────────────────── */
.dp-chart { position: relative; height: 250px; }
/* LOAD spends the shared 478px body in its chart (bars/lines are %-based so
   they just scale); PR's interior already fills it — don't grow that one. */
.dp-body[data-tab="load"] .dp-chart { height: 305px; }
.dp-chart.pad { padding-right: 46px; }
.dp-gl { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.dp-chart.pad .dp-gl { right: 46px; }
.dp-gl.base { background: var(--line-strong); }
.dp-y { position: absolute; right: 0; font-family: var(--mono); font-size: 10.5px; color: var(--text-40); }
.dp-y.mid { color: var(--text-25); }
.dp-x { display: flex; gap: 10px; margin-top: 12px; }
.dp-chart.pad ~ .dp-x { padding-right: 46px; }
.dp-x span { flex: 1; text-align: center; font-family: var(--mono); font-size: 10px; color: var(--text-40); }
.dp-x span.on { color: var(--text); }
.dp-xrow { position: relative; height: 20px; margin-top: 12px; font-family: var(--mono); font-size: 10px; color: var(--text-25); }
.dp-xrow span { position: absolute; top: 0; }

/* bars */
.dp-bars { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; }
.dp-chart.pad .dp-bars { right: 46px; }
.dp-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: crosshair; }
.dp-fill { width: 74%; height: 0; border-radius: 2px 2px 0 0; background: var(--orange);
           transition: height .7s cubic-bezier(.2,.8,.2,1), background .15s linear; }
.dp-col.dim .dp-fill { background: rgba(255,74,9,0.62); }

/* rolling-average overlay: solid line + hollow markers */
.dp-over { position: absolute; left: 0; right: 46px; top: 0; bottom: 0; pointer-events: none; }
.dp-over svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dp-over polyline { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke;
                    opacity: 0; transition: opacity .5s ease .35s; }
.dp-mark { position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--blue);
           background: var(--bg2); transform: translate(-4.5px, -4.5px); opacity: 0; transition: opacity .35s ease; }
.dp.in polyline, .dp.in .dp-mark { opacity: 1; }

/* hover tooltip (clamped in JS so it never leaves the plot) */
.dp-tip { position: absolute; transform: translateX(-50%); display: none; font-family: var(--mono); font-size: 11px;
          color: var(--text); background: rgba(13,13,13,0.92); border: 1px solid var(--line-strong);
          border-radius: 6px; padding: 5px 9px; white-space: nowrap; }
.dp-tip.on { display: block; }

/* ── session: heart-rate curve ───────────────────────────────── */
.dp-hr { position: absolute; left: 0; right: 46px; top: 0; bottom: 0; }
.dp-hr svg { width: 100%; height: 100%; display: block; }
/* the chart draws via the clip rect widening 0→600 (data-panel.js drives it
   inline — see the comment there for why it can't ride the .in class); this
   rule owns only the easing. Stroke and area share the clip, so they reveal
   together. */
.dp-hr clipPath rect { transition: width 1.3s cubic-bezier(.2,.8,.2,1); }
.dp-hr path.line { fill: none; stroke: var(--orange); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.dp-hr path.area { fill: url(#dp-hr-grad); }
.dp-rl { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(242,240,235,0.12); pointer-events: none; }
.dp-rlab { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px;
           letter-spacing: 0.14em; color: var(--text-40); pointer-events: none; }
.dp-z5 { position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
         background: repeating-linear-gradient(90deg, rgba(255,74,9,0.3) 0 3px, transparent 3px 7px); }
.dp-z5lab { position: absolute; right: 2px; font-family: var(--mono); font-size: 9.5px; color: rgba(255,74,9,0.5); pointer-events: none; }
.dp-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(242,240,235,0.28); display: none; pointer-events: none; }
.dp-cdot { position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--text);
           background: var(--bg2); transform: translate(-4.5px, -4.5px); display: none; pointer-events: none; }
.dp-scrub.on .dp-cursor, .dp-scrub.on .dp-cdot { display: block; }
.dp-scrub { cursor: crosshair; }

/* round splits (right column) */
.dp-splits { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.dp-split { display: grid; grid-template-columns: 24px 1fr 58px; gap: 12px; align-items: center; font-family: var(--mono); }
.dp-rnum { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--blue); color: var(--blue);
           font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dp-track { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(242,240,235,0.06); }
.dp-track i { width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.dp-track i.a { background: var(--orange); }
.dp-track i.b { background: rgba(0,177,252,0.75); }
.dp-split .t { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.dp-moves { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; font-family: var(--mono); font-size: 11px; color: var(--text-40); }
.dp-moves div { display: flex; justify-content: space-between; gap: 14px; }
.dp-moves .v { color: var(--text); }
.dp-moves .m-o { color: var(--orange); }
.dp-moves .m-b { color: var(--blue); }
.dp-foot-stats { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);
                 font-family: var(--mono); font-size: 11px; color: var(--text-40); }
.dp-foot-stats em { font-style: normal; color: var(--text); }

/* ── PR: community histogram ─────────────────────────────────── */
.dp-bins { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.dp-bin { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: crosshair; }
.dp-bin i { width: 100%; height: 0; border-radius: 2px 2px 0 0; background: rgba(0,177,252,0.28);
            transition: height .6s cubic-bezier(.2,.8,.2,1), background .15s linear; }
.dp-bin.you i { background: var(--orange); }
.dp-bin.old i { background: rgba(255,74,9,0.45); }
.dp-bin.hot i { background: rgba(0,177,252,0.62); }
.dp-bin.you.hot i { background: var(--orange); }
.dp-youline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,74,9,0.35); pointer-events: none; }
.dp-youlab { position: absolute; top: -22px; transform: translateX(-84%); font-family: var(--mono); font-size: 10.5px;
             letter-spacing: 0.14em; color: var(--orange); white-space: nowrap; pointer-events: none; }
.dp-prlist { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.dp-pr { display: grid; grid-template-columns: 1fr 74px; gap: 10px; align-items: baseline;
         font-family: var(--mono); font-size: 11.5px; color: var(--text-40); }
.dp-pr em { font-style: normal; font-size: 16px; color: var(--text); }
.dp-pr.now em, .dp-pr.now .pct { color: var(--orange); }
.dp-pr .pct { text-align: right; }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .dp-body, .dp-body[data-tab="load"], .dp-body[data-tab="session"], .dp-body[data-tab="pr"] { grid-template-columns: 1fr; height: auto; }
  /* A `1fr` track keeps min-width:auto, so it refuses to shrink below its
     items' min-content — and .dp-h / .dp-x are nowrap. Without these the whole
     card blows past the viewport instead of the columns stacking. */
  .dp-plot, .dp-side { min-width: 0; }
  .dp-h { height: auto; white-space: normal; flex-wrap: wrap; row-gap: 4px; }
  .dp-side { border-left: none; border-top: 1px solid var(--line); }
  .dp-chart { height: 200px; }
  .dp-big { font-size: 54px; }
  .dp-legend { flex-wrap: wrap; gap: 12px; white-space: normal; }
  /* 12 week labels in ~235px: shrink them, and truncate rather than let one
     long label push the card wide again */
  .dp-x { gap: 3px; }
  .dp-x span { font-size: 9px; min-width: 0; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-fill, .dp-track i, .dp-bin i, .dp-over polyline, .dp-mark, .dp-hr clipPath rect { transition: none; }
}