/* styles/plan.css -- what the Phase tab's pages left (2026-11-06, the
   Vision handoff §2: the tab and its road, zones, chips and season pages
   are gone): the first run's road -- its tiles, phase and competition
   pages (screens/start.js through programme.js) -- and the cycle's sheet.
   WAS Programme: the road and no competition (the Today &
   Programme handoff §5-6, 2026-10-08; references in
   `docs design/today-programme/reference/`). Every size is the reference's;
   colours are the app's tokens, or the reference's own literal where the
   tokens have none. A session's dot colour is today.css's `tp-c-*`.
   CHANGE 1 (8 Oct, `programme_road_v2.html`): a zone a phase, in the
   phase's colour -- `--pc` and its light text colour `--pl`, set on each
   zone, ring, chip and key item by programme.js (`PROG_PHASE_COLOUR`).
   CHANGE 2 §8 (`programme_road_v3.html`): the zones are cards (level 1),
   the day chips on the card fill, today's still its phase's tint. */

/* ---- the page ------------------------------------------------------------ */
body:has(#app .pl-page) h1 { margin-bottom: 14px; }
body:has(#app .pl-page) h1 .brand { width: 26px; }
.c-page.pl-page { gap: 14px; }

/* ---- the season, three screens (CHANGE 3, 9 Oct: `reference/programme.html`,
   `programme_road.html`, `programme_phase.html`) ------------------------- */

/* The journey bar: a segment a phase, the days done in its colour, those
   to come at 28%; the trophy; today's pin, its words leaning so they never
   leave the bar (`--f`, 0 at the start, 1 at the end). */
.pj-journey { position: relative; margin-top: 12px; }
.pj-journey.now { margin-top: 36px; }

.pj-bar { position: relative; display: flex; align-items: center; gap: 3px; }
.pj-seg { position: relative; min-width: 0; height: 14px; border-radius: 7px;
          overflow: hidden;
          background: color-mix(in srgb, var(--pc) 28%, #0b1220); }
.pj-seg i { display: block; height: 100%; background: var(--pc); }
.pj-cup { flex: none; width: 20px; height: 20px; border-radius: 50%;
          box-sizing: border-box; background: rgba(240, 185, 90, .2);
          border: 2px solid var(--comp); display: flex; align-items: center;
          justify-content: center; }
.pj-cup svg { width: 12px; height: 12px; fill: none; stroke: var(--comp);
              stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pj-pin { position: absolute; top: -8px; bottom: -8px;
          left: calc((100% - 23px) * var(--f)); width: 3px; margin-left: -1.5px;
          border-radius: 2px; background: var(--ink);
          box-shadow: 0 0 10px rgba(238, 241, 245, .9); }
.pj-you { position: absolute; top: -30px; left: calc((100% - 23px) * var(--f));
          transform: translateX(calc(-100% * var(--f)));
          height: 22px; padding: 0 9px; border-radius: 11px;
          background: var(--ink); color: var(--bg); font-size: 11px;
          font-weight: 800; text-transform: uppercase; display: flex;
          align-items: center; white-space: nowrap;
          box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.pj-labs { display: flex; gap: 3px; margin-top: 8px; padding-right: 23px; }
/* Never narrower than its dates (MEASURED: Fresh's 2 days of 21 cut
   "28–29 Oct" to "28–29 …" at 48 px); cut short, never run into the next. */
.pj-lab { min-width: 58px; overflow: hidden; }
.pj-lab b, .pj-lab span { display: block; font-size: 11px; white-space: nowrap;
                          overflow: hidden; text-overflow: ellipsis; }
.pj-lab b { font-weight: 800; color: var(--pl); }
.pj-lab span { color: var(--quiet); }

.pj-dl { font-size: 11px; font-weight: 800; color: var(--quiet); }

.pj-dc { width: 30px; height: 30px; border-radius: 15px; box-sizing: border-box;
         display: flex; align-items: center; justify-content: center; }
.pj-dc.done { background: var(--ok); }
.pj-dc.done svg { width: 15px; height: 15px; fill: none; stroke: #08240f;
                  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pj-dc.today { background: #2f8ae0; border: 3px solid #8cc4f5;
               box-shadow: 0 0 0 5px rgba(47, 138, 224, .22), 0 0 14px #2f8ae0; }
.pj-dc.come { border: 2px solid #3d5068; }
.pj-dc.rest { border: 2px dashed var(--ok); font-size: 9px; font-weight: 800;
              text-transform: uppercase; color: var(--ok); }

/* ---- one road (§2) ---- */

/* The tiles on their rail: a node a phase -- done filled and ticked, the
   one you are in filled and ringed, later ones an empty ring, the
   competition a gold medal -- the rail dark, coloured a third of the way
   under the one you are in. */
.pj-tiles { display: flex; flex-direction: column; gap: 14px; }
.pj-trow { position: relative; display: flex; gap: 14px; }
.pj-trow::after { content: ""; position: absolute; left: 13px; top: 38px;
                  bottom: -14px; width: 3px; border-radius: 2px;
                  background: #24364d; }
.pj-trow.now::after { background: linear-gradient(180deg, var(--pc) 0 30%,
                                                  #24364d 30%); }
.pj-trow:last-child::after { content: none; }
.pj-node { position: relative; z-index: 1; flex: none; width: 26px; height: 26px;
           margin: 12px 1px 0; border-radius: 13px; box-sizing: border-box;
           background: var(--bg); border: 3px solid var(--pc);
           display: flex; align-items: center; justify-content: center; }
.pj-trow.now .pj-node { background: var(--pc); border-color: var(--pl);
                        box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc) 25%,
                                                         transparent),
                                    0 0 16px var(--pc); }
.pj-trow.done .pj-node { background: var(--pc); border: 0; }
.pj-trow.done .pj-node svg { width: 14px; height: 14px; fill: none; stroke: var(--bg);
                             stroke-width: 3; stroke-linecap: round;
                             stroke-linejoin: round; }
.pj-trow.comp .pj-node { width: 40px; height: 40px; margin: 6px -6px 0 -6px;
                         border: 0; border-radius: 20px;
                         background: radial-gradient(circle at 35% 30%, #ffd98a,
                                                     #f0b95a 55%, #b9832c);
                         box-shadow: 0 0 18px rgba(240, 185, 90, .55); }
.pj-trow.comp .pj-node svg { width: 20px; height: 20px; fill: none;
                             stroke: #2a1c05; stroke-width: 2;
                             stroke-linecap: round; stroke-linejoin: round; }
button.pj-tile { flex: 1 1 auto; min-width: 0; width: auto; min-height: 0;
                 margin: 0; display: flex; align-items: center; gap: 10px;
                 padding: 13px 12px 13px 16px; border-radius: 18px;
                 background: var(--card-fill); border: 1px solid var(--line);
                 box-shadow: var(--card-lift); color: var(--ink);
                 text-align: left; }
.pj-trow.now button.pj-tile { background: var(--raised-fill);
                              border-color: var(--pc);
                              box-shadow: var(--raised-lift); }
.pj-trow.comp button.pj-tile { background: rgba(240, 185, 90, .08);
                               border-color: rgba(240, 185, 90, .45);
                               box-shadow: none; }
button.pj-tile > svg { flex: none; width: 16px; height: 16px; fill: none;
                       stroke: #8b93a1; stroke-width: 2.4; stroke-linecap: round;
                       stroke-linejoin: round; }
.pj-trow.comp button.pj-tile > svg { stroke: var(--comp); }
button.pj-tile .grow { flex: 1 1 auto; min-width: 0; }
.pj-ttop { display: flex; align-items: center; gap: 8px; }
.pj-ttop b { min-width: 0; font-size: 13px; font-weight: 800; letter-spacing: .1em;
             text-transform: uppercase; color: var(--pl);
             overflow-wrap: anywhere; }
.pj-trow.comp .pj-ttop b { font-size: 16px; letter-spacing: 0;
                           text-transform: none; color: #f6d38f; }
.pj-nowtag { flex: none; height: 20px; padding: 0 8px; border-radius: 10px;
             background: var(--pc); color: var(--bg); font-size: 10px;
             font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
             display: inline-flex; align-items: center; }
.pj-tlen { flex: none; font-size: 12px; color: var(--quiet); }
.pj-tline { display: block; margin-top: 3px; font-size: 14px; color: #c3c8d1; }
.pj-tdates { display: block; margin-top: 2px; font-size: 12px; color: var(--quiet); }

/* ---- a phase (§3) ---- */
.pj-peye { display: flex; align-items: center; gap: 8px; }
.pj-peye i { flex: none; width: 12px; height: 12px; border-radius: 6px;
             background: var(--pc); }
.pj-peye b { font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
             color: var(--pl); }
.pj-ptitle { margin: 4px 0 0; font-size: 34px; font-weight: 800;
             letter-spacing: -0.02em; line-height: 1.05; }
.pj-phead.comp .pj-ptitle { color: #f6d38f; overflow-wrap: anywhere; }
.pj-pline { margin: 2px 0 0; font-size: 16px; color: #c3c8d1; }
.pj-facts { display: flex; gap: 8px; }
.pj-fact { flex: 1 1 0; min-width: 0; padding: 12px 12px 10px; border-radius: 16px;
           background: rgba(5, 6, 7, .35); border: 1px solid #24364d; }
/* 18 px, so a big line fits one line at 375 px (MEASURED: "3 weeks",
   "4½ weeks" and "113 days" broke after the number at the reference's
   22 px); on a narrower phone it wraps at a space rather than lose a word
   ("4½ weeks" was cut to an ellipsis at 320 px). */
.pj-fact b { display: block; font-size: 18px; font-weight: 800;
             line-height: 1.1; }
.pj-fact.now b { color: #8cc4f5; }
.pj-fact span { display: block; margin-top: 5px; font-size: 11px; font-weight: 600;
                line-height: 1.25; color: var(--quiet); }
.pj-sec { padding: 16px; border-radius: 22px; background: var(--card-fill);
          border: 1px solid var(--line); box-shadow: var(--card-lift); }
.pj-sec h3 { margin: 0 0 8px; font-size: 11px; font-weight: 800;
             letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
.pj-text { margin: 0; font-size: 14px; line-height: 1.5; color: #c3c8d1; }
.pj-foot { margin: 10px 0 0; font-size: 12px; color: var(--quiet); }
.pj-sec h3 + .pj-foot { margin-top: 0; }
.pj-typical { display: flex; gap: 4px; }
.pj-tday { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
           align-items: center; gap: 6px; }
.pj-bars { display: flex; flex-direction: column; align-items: center; gap: 3px;
           min-height: 30px; }
.pj-bars i { width: 22px; height: 6px; border-radius: 3px; background: var(--sc); }
.pj-trest { font-size: 9px; font-weight: 800; text-transform: uppercase;
            color: var(--ok); }
.pj-srow { display: flex; gap: 12px; padding: 12px 0;
           border-bottom: 1px solid #1d2a3b; }
.pj-srow:last-child { border-bottom: 0; }
.pj-sbar { flex: none; width: 4px; border-radius: 2px; background: var(--sc); }
.pj-srow .grow { flex: 1 1 auto; min-width: 0; }
.pj-stop { display: flex; justify-content: space-between; gap: 8px; }
.pj-stop b { font-size: 15px; }
.pj-stop b.pj-soft { flex: none; font-size: 13px; color: var(--sc);
                     white-space: nowrap; }
.pj-swhere { display: block; margin-top: 1px; font-size: 12px; color: var(--quiet); }
.pj-swhat { display: block; margin-top: 4px; font-size: 13px; color: #c3c8d1; }
.pj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-chip { height: 28px; padding: 0 11px; border-radius: 14px;
           border: 1px solid var(--sc); font-size: 12px; font-weight: 700;
           display: flex; align-items: center; }
.pj-chip.up { background: color-mix(in srgb, var(--sc) 20%, #0b1220); }
button.pj-next { display: flex; align-items: center; gap: 10px; width: 100%;
                 min-height: 44px; margin: 0; padding: 0; border: 0;
                 background: none; color: #c3c8d1; font-size: 14px;
                 text-align: left; }
button.pj-next b { color: var(--ink); }
button.pj-next .grow { flex: 1 1 auto; min-width: 0; }
.pj-ndot { flex: none; width: 10px; height: 10px; border-radius: 5px;
           background: var(--pc); }
button.pj-next > svg { flex: none; width: 14px; height: 14px; fill: none;
                       stroke: #8b93a1; stroke-width: 2.4; stroke-linecap: round;
                       stroke-linejoin: round; }
/* A narrow phone: the fact tiles' big line steps down (§5.6: no text
   overlaps on the fact tiles at 320 px). */
@media (max-width: 360px) {
  .pj-fact b { font-size: 16px; }
  .pj-fact { padding: 10px 8px 8px; }
}

/* ---- the day sheet and the phase sheet ----------------------------------- */
.pl-sheett { margin: 0; font-size: 24px; font-weight: 800;
             letter-spacing: -0.01em; line-height: 1.15; }

.pl-sheetp { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }