/* v2 train screen styles */

/* ── Season timeline: crumb on top; phases stack vertically on phones,
      become side-by-side columns on desktop ──────────────────────────── */
.tr-season { margin-bottom: 12px; }
.tr-season .sp-crumb { margin-bottom: 14px; }
.tr-tl { display: flex; flex-direction: column; gap: 18px; }
.tr-tl-phase { border-left: 3px solid var(--phc-soft); padding-left: 12px; min-width: 0; }
.tr-tl-phase.past { opacity: 0.55; }
.tr-tl-ph-head {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
}
.tr-tl-ph-mo { color: var(--txt-3); font-weight: 500; }
.tr-tl-block { background: var(--card-2); border-radius: 10px; padding: 8px 11px; margin-bottom: 6px; }
.tr-tl-block.past { opacity: 0.6; }
.tr-tl-block.cur { background: rgba(0,212,170,0.07); border: 1.5px solid rgba(0,212,170,0.55); }
.tr-tl-name { font-size: 13px; font-weight: 500; line-height: 1.35; }
.tr-tl-block.cur .tr-tl-name { font-weight: 600; }
.tr-tl-meta { font-size: 11px; color: var(--txt-3); margin-top: 1px; }
.tr-tl-done { color: var(--green); }
.tr-tl-now { color: var(--accent); font-weight: 600; }
.tr-tl-wkbars { display: flex; gap: 3px; margin-top: 7px; }
.tr-tl-wk { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.09); }
.tr-tl-wk.done { background: var(--green); }
.tr-tl-wk.now { background: var(--gold); }
.tr-tl-rec { font-size: 11px; color: var(--txt-2); margin-top: 6px; }
.tr-tl-mile { font-size: 11.5px; color: var(--txt-2); padding: 2px 0 2px 3px; }
.tr-tl-mile.past { color: var(--txt-3); }
.tr-tl-race {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.4);
    border-radius: 10px; padding: 9px 11px;
}
.tr-tl-race-d { width: 9px; height: 9px; background: var(--red); transform: rotate(45deg); border-radius: 2px; flex-shrink: 0; }
.tr-tl-race-n { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
.tr-tl-race-w { font-size: 11px; color: var(--red); flex-shrink: 0; }
@media (min-width: 1024px) {
    .tr-tl { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; align-items: start; }
    .tr-tl-phase { border-left: none; border-top: 3px solid var(--phc-soft); border-radius: 3px 3px 0 0; padding-left: 0; padding-top: 9px; }
}

/* Unified day rows: date cell + shared session cards */
.tr-row { display:flex; gap:10px; margin-bottom:8px; align-items:flex-start; }
.tr-row .tr-dc-date { padding-top:14px; }
.tr-row-cards { flex:1; min-width:0; }
.tr-pending .dc-title { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px; }
.tr-today-card { border-color:rgba(0,212,170,0.4); }
@media (min-width:1024px) { .tr-row { margin-bottom:10px; } }

/* ── Week selector ─────────────────────────── */
.tr-week-bar { margin-bottom: 12px; }
.tr-week-sel {
    width: auto; max-width: 100%;
    font-size: 13px; font-weight: 600;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 8px 12px;
}

/* ── Week header ───────────────────────────── */
.tr-week-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tr-week-title { font-size: 16px; font-weight: 700; min-width: 0; }
.tr-week-pill {
    flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.tr-wt-build    { color: var(--bike);   background: rgba(245,158,11,0.12); }
.tr-wt-recovery { color: var(--green);  background: rgba(52,211,153,0.12); }
.tr-wt-test     { color: var(--blue);   background: rgba(56,189,248,0.12); }
.tr-wt-taper    { color: var(--purple); background: rgba(167,139,250,0.12); }
.tr-wt-race     { color: var(--red);    background: rgba(248,113,113,0.12); }
.tr-wt-default  { color: var(--accent); background: var(--accent-dim); }
.tr-block-info { font-size: 12px; color: var(--txt-3); margin-bottom: 10px; }

/* ── Weekly load bar ───────────────────────── */
.tr-load { margin: 10px 0 14px; }
.tr-comp { margin: -6px 0 14px; }
.tr-comp .tr-lb-row { margin-bottom: 7px; }
.tr-comp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-comp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--txt-2); font-weight: 600;
    background: var(--card-2); border-radius: 12px; padding: 3px 10px;
}
.tr-comp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tr-lb-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--txt-2); margin-bottom: 6px; }
.tr-lb-row b { color: var(--txt); }
.tr-lb-track { height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; position: relative; }
.tr-lb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }

/* ── Weekly focus ──────────────────────────── */
.tr-focus { margin-bottom: 12px; }
.tr-focus .eyebrow { margin-bottom: 8px; }
.tr-focus ul { margin: 0; padding-left: 18px; }
.tr-focus li { font-size: 13px; line-height: 1.55; color: var(--txt-2); margin-bottom: 6px; }
.tr-focus li:last-child { margin-bottom: 0; }
.tr-focus li strong { color: var(--txt); }

/* ── Day cards ─────────────────────────────── */
.tr-days { margin-bottom: 4px; }
.tr-day-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 13px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px;
}
.tr-day-card.tr-today { border-color: rgba(0,212,170,0.4); }
.tr-day-card.tr-done { opacity: 0.75; }
.tr-dc-date { width: 40px; flex-shrink: 0; text-align: center; align-self: flex-start; padding-top: 2px; }
.tr-dow { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-3); }
.tr-dnum { font-family: var(--disp); font-size: 22px; font-weight: 600; line-height: 1.05; }
.tr-dc-sessions { flex: 1; min-width: 0; }
.tr-dc-sess {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 4px 0; border-radius: 8px;
}
.tr-dc-sess + .tr-dc-sess { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.tr-dc-body { flex: 1; min-width: 0; }
.tr-dc-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; min-width: 0; }
.tr-sdot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.tr-dc-meta { font-size: 11.5px; color: var(--txt-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-dc-done { font-size: 11px; font-weight: 600; color: var(--green); margin-top: 3px; }
.tr-dc-status { flex-shrink: 0; }
.tr-rest .tr-dc-body { flex: 1; min-width: 0; }

/* ── Totals + notes ────────────────────────── */
.tr-totals { padding: 6px 12px; overflow-x: auto; }
.tr-notes ul { margin: 0; padding-left: 18px; }
.tr-notes li { font-size: 12.5px; line-height: 1.55; color: var(--txt-2); margin-bottom: 6px; }
.tr-notes li:last-child { margin-bottom: 0; }

/* ── Pre-season countdown ──────────────────── */
.tr-countdown { text-align: center; padding: 26px 16px; margin-bottom: 12px; }
.tr-cd-num { font-family: var(--disp); font-size: 58px; font-weight: 700; line-height: 1; color: var(--accent); margin-top: 8px; }
.tr-cd-days { font-size: 13px; font-weight: 600; color: var(--txt-2); margin-top: 4px; }
.tr-cd-sub { font-size: 12px; color: var(--txt-3); margin-top: 8px; }

/* ── Workout detail ────────────────────────── */
.tr-det-meta { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tr-syncs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tr-sync { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; }
.tr-sync.ok { background: rgba(52,211,153,0.13); color: var(--green); }
.tr-sync.fail { background: rgba(248,113,113,0.14); color: var(--red); }
.tr-sync.pending { background: rgba(245,158,11,0.13); color: var(--bike); }
.tr-goal { font-size: 13px; line-height: 1.6; color: var(--txt-2); }
.tr-goal strong { color: var(--txt); }
.tr-hl {
    background: var(--accent-dim); border: 1px solid rgba(0,212,170,0.25); border-radius: 10px;
    padding: 10px 12px; font-size: 12.5px; line-height: 1.55; color: var(--txt-2); margin: 10px 0;
}
.tr-hl b, .tr-hl strong { color: var(--accent); }
.tr-equip { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--txt-3); margin: 8px 0; }

.tr-steps { padding-top: 2px; padding-bottom: 2px; }
.tr-step { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.tr-step:last-child { border-bottom: none; }
.tr-step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); flex-shrink: 0; margin-top: 7px; }
.tr-step-txt { font-size: 13px; line-height: 1.55; color: var(--txt-2); min-width: 0; }
.tr-step-txt strong { color: var(--txt); }
.tr-step-sec {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--txt-3); padding: 12px 2px 4px;
}
.tr-step-sec strong { color: var(--txt-2); }

.tr-segment { margin-top: 10px; }
.tr-seg-head { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.tr-seg-head b { flex: 1; min-width: 0; }
.tr-seg-ic { display: flex; flex-shrink: 0; }
.tr-seg-dur { font-family: var(--disp); font-size: 16px; font-weight: 600; color: var(--txt-2); flex-shrink: 0; }

.tr-zwo { margin-top: 10px; padding: 12px; overflow: hidden; }
.tr-zwo svg { display: block; width: 100%; height: auto; }
.tr-zwo-dl { margin-top: 10px; }
.tr-act-stats { margin-bottom: 4px; }
.tr-review .grade { margin-bottom: 8px; display: inline-block; }

/* ── Season plan doc ───────────────────────── */
.tr-race { margin: 0 0 12px; }
.tr-sec { margin-bottom: 10px; }
.tr-sec-head { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.tr-sec-sub { font-size: 12px; color: var(--txt-3); margin-bottom: 8px; }
.tr-tblwrap { overflow-x: auto; margin: 8px 0; }
.tr-para { font-size: 13px; line-height: 1.6; color: var(--txt-2); margin: 8px 0; }
.tr-para b, .tr-para strong { color: var(--txt); }
.tr-list { margin: 8px 0; }
.tr-list-title { font-size: 12px; font-weight: 700; color: var(--txt); margin-bottom: 4px; }
.tr-list ul, .tr-keylist ul { margin: 0; padding-left: 18px; }
.tr-list li, .tr-keylist li { font-size: 12.5px; line-height: 1.55; color: var(--txt-2); margin-bottom: 5px; }
.tr-keylist {
    border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2);
    padding: 10px 12px; margin: 10px 0;
}
.tr-kl-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.tr-doc-block { border-left: 3px solid var(--line-2); padding: 2px 0 2px 12px; margin: 12px 0; }
.tr-db-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.tr-plan-block { margin-bottom: 8px; }
.tr-pb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tr-pb-head b { font-size: 13.5px; min-width: 0; }
.tr-pb-meta { font-size: 11.5px; color: var(--txt-3); margin-top: 4px; }
.tr-adjust { margin: 8px 0 0; padding-left: 18px; }
.tr-adjust li { font-size: 12.5px; line-height: 1.55; color: var(--txt-2); margin-bottom: 4px; }

/* ── Desktop ───────────────────────────────── */
@media (min-width: 1024px) {
    .tr-days { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .tr-day-card { margin-bottom: 0; }
    .tr-gr-track { height: 30px; }
    .tr-gr-bar { font-size: 10.5px; }
    .tr-week-sel { min-width: 260px; }
}