/* GOALS */
.goalrow{padding:11px 0;border-bottom:1px solid var(--line)}
.goalrow:last-child{border-bottom:none}
.gr-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.gr-l{font-size:14px;font-weight:600}
.gr-v{font-family:var(--courier);font-weight:500;font-size:16px}
.gr-v .mut{font-weight:400}
.gr-bar{height:6px;background:var(--line);border-radius:0;overflow:hidden}
.gr-bar i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width 1s ease}   /* v2.19.0 — brand red until the target flips it volt (Arrick, 08-12) */
.gr-bar.hit i{background:var(--volt)}

/* HERO v2 */
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:15px;margin-bottom:1px}
  color:var(--ink);margin-top:4px;line-height:1;font-variant-numeric:tabular-nums}
@media(max-width:760px){.wxw{width:100%}.h2-actions{padding-top:14px}.h2-hi{padding:20px 0 0}.h2-main{gap:20px}}
/* v2.18.1 · phones: greeting first (Arrick, 2026-08-12) — below the date/time line
   the hero reads greeting + quote → weather → countdown + phase timeline last.
   (Supersedes the v2.12 order, which put the countdown above the greeting.)
   The hero flattens to one column and reorders — markup unchanged. */
@media(max-width:760px){
  .hero{display:flex;flex-direction:column}
  .hero .wxw{order:3;margin-top:18px}
  .hero #nrSlot{order:4}
}
/* ── the countdown pager · lives with the countdown, not beside it ── */
  border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--r-choice);
  font-family:var(--courier);font-size:14px;line-height:1;padding:0;margin-left:-1px;transition:.12s var(--ease)}
  color:var(--muted);padding-left:10px;white-space:nowrap}
/* phase timeline */
.h2-tl{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}
.tl-ends{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--courier);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.tl-head{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.1em}
.tl-track{position:relative;height:6px;background:var(--line);border-radius:0}
.tl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:0;transition:width 1s var(--ease)}
.tl-tick{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--canvas)}
.tl-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--canvas);box-shadow:none}
.tl-marker b{position:absolute;bottom:17px;left:50%;font-family:var(--courier);font-size:10px;letter-spacing:.08em;color:var(--accent);white-space:nowrap;text-transform:uppercase;font-weight:500}
.tl-marker.flip b{left:auto;right:50%;text-align:right}
.tl-labels{display:flex;margin-top:9px}
.tl-lab{font-family:var(--courier);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.tl-lab.on{color:var(--ink);font-weight:700}

/* MY RACES */
.race-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.race-row:last-of-type{border-bottom:none}
.race-row.act{padding-left:0}  /* v2.8.9 — the TRAINING FOR THIS badge already says this */
.race-name{font-family:var(--helv);font-weight:900;font-size:19px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.race-tag{font-family:var(--courier);font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--paper);padding:4px 10px;border-radius:100px}
.race-meta{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.6}
.race-meta .up{color:var(--good);font-weight:700}
.race-meta .down{color:var(--accent);font-weight:700}
.race-res{font-family:var(--courier);font-size:14px}
.race-acts{display:flex;gap:8px;align-items:center;flex-shrink:0;flex-wrap:wrap}
.race-row.done .race-name{font-size:16px}

/* DAY TOOLTIP — the only survivor of the retired journey charts (v3.6.0);
   js/ui/progress.js renders it as `.jc-tip.px-tip`. */
.jc-tip{position:absolute;top:8px;background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:10px 13px;font-size:11.5px;pointer-events:none;display:none;z-index:6;min-width:140px;box-shadow:0 4px 14px -8px rgba(40,32,26,.34)}
.jc-tip .tt-d{font-family:var(--courier);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;white-space:nowrap}
.jc-tip .tt-r{display:flex;align-items:center;justify-content:space-between;gap:14px;line-height:1.8;white-space:nowrap}
.jc-tip .tt-r i{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-right:7px}
.jc-tip .tt-r .tn{color:var(--line);font-family:var(--courier);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center}
.jc-tip .tt-r b{font-weight:700}

/* HERO META / FOOT */

/* SESSION ROWS (Today's work) */
.sessrow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.sessrow:last-of-type{border-bottom:none}
.sr-t{font-family:var(--helv);font-weight:900;font-size:18px;letter-spacing:-.02em;}
.sr-d{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.sr-status{flex-shrink:0;margin-top:2px}
.sr-log{font-family:var(--courier);font-size:10px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);padding:6px 12px;border-radius:100px}
.sr-log:hover{background:var(--ink);color:var(--paper)}