/* 2026-10-10 04:00 IST - HIIT Classes programme page, BOARD family ("interval board"). The family look comes from
   style-board.css (linked first); this sheet only adds the page's own pieces: the protocol colour slots, the wall of
   two boards (protocol columns + round counter), the chalk round counter and the work/rest waveform panel. Every
   rule is scoped under body.pg-program-hiit-classes.
   Protocol palette (30/30 coral, 40/20 teal, Tabata violet) validated with the dataviz validator, --mode dark
   --pairs all, on the board #17201c and on #141414 / #1c1c1c: ALL CHECKS PASS (worst CVD dE 11.2 deutan, worst
   normal-vision dE 24.3, contrast >= 3:1). Rest blocks use neutral chalk grey, never a category colour. */
body.pg-program-hiit-classes {
  --cf-g1: #e8603c;
  --cf-g2: #1fa98c;
  --cf-g3: #9b7be8;
  --hx-rest: #7d837c;
}
body.pg-program-hiit-classes .hx-p1 { --hx-c: var(--cf-g1); }
body.pg-program-hiit-classes .hx-p2 { --hx-c: var(--cf-g2); }
body.pg-program-hiit-classes .hx-p3 { --hx-c: var(--cf-g3); }

/* 2026-10-10 04:00 IST - the wall: protocol board (wide) beside the round-counter board */
body.pg-program-hiit-classes .hx-wall { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(300px, 1fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; margin-bottom: clamp(56px, 6vw, 80px); }
body.pg-program-hiit-classes .hx-board { margin-bottom: 0; }
body.pg-program-hiit-classes .hx-board .cf-lane { border-top: 4px solid var(--hx-c); padding-top: 14px; }
body.pg-program-hiit-classes .hx-board .cf-lane-head h3 { font-size: clamp(30px, 2.4vw, 38px); }
body.pg-program-hiit-classes .cf-lane .hx-lane-sum { color: var(--cf-chalk-2); font-size: 14px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--cf-line); }

/* 2026-10-10 04:00 IST - round counter board */
body.pg-program-hiit-classes .hx-counter { padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
body.pg-program-hiit-classes .hx-counter h3 { font-size: clamp(30px, 2.6vw, 40px); color: var(--cf-chalk); transform: rotate(-1.5deg); text-shadow: 0 0 1px rgba(255,255,255,.5); }
body.pg-program-hiit-classes .hx-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
body.pg-program-hiit-classes .hx-pick { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
body.pg-program-hiit-classes .hx-pick .cf-sw { background: var(--hx-c); }
body.pg-program-hiit-classes .hx-timer-svg { display: block; width: 100%; max-width: 280px; height: auto; }
body.pg-program-hiit-classes .hx-face { fill: var(--cf-board-2); }
body.pg-program-hiit-classes .hx-track { fill: none; stroke: rgba(236,235,228,.08); }
body.pg-program-hiit-classes .hx-arc { fill: none; stroke-linecap: butt; }
body.pg-program-hiit-classes .hx-work { stroke: var(--hx-c); }
body.pg-program-hiit-classes .hx-rest { stroke: var(--hx-rest); }
body.pg-program-hiit-classes .hx-set.is-off { display: none; }
body.pg-program-hiit-classes .hx-tick { stroke: rgba(236,235,228,.22); stroke-width: 1.5; }
body.pg-program-hiit-classes .hx-tick.is-long { stroke: rgba(236,235,228,.5); stroke-width: 2; }
body.pg-program-hiit-classes .hx-hand { transform-box: view-box; transform-origin: 50% 50%; transition: transform 1s linear; }
body.pg-program-hiit-classes .hx-hand circle { fill: var(--cf-chalk); stroke: var(--cf-board-2); stroke-width: 3; }
body.pg-program-hiit-classes .hx-hand.no-ease { transition: none; }
body.pg-program-hiit-classes .hx-phase { fill: var(--cf-chalk); font: 700 17px var(--body); letter-spacing: .24em; text-transform: uppercase; }
body.pg-program-hiit-classes .hx-counter[data-phase="rest"] .hx-phase { fill: var(--cf-chalk-2); }
body.pg-program-hiit-classes .hx-counter[data-phase="done"] .hx-phase { fill: var(--accent); }
body.pg-program-hiit-classes .hx-count { fill: var(--cf-chalk); font: 700 96px var(--body); }
body.pg-program-hiit-classes .hx-round { fill: var(--cf-chalk-2); font: 600 15px var(--body); }
body.pg-program-hiit-classes .hx-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
body.pg-program-hiit-classes .hx-counter .btn { min-width: 112px; justify-content: center; }

/* 2026-10-10 04:00 IST - work/rest waveform on the board-framed panel */
body.pg-program-hiit-classes .hx-wave .cf-panel-side { max-width: 900px; }
body.pg-program-hiit-classes .hx-sw-rest { background: var(--hx-rest); height: 6px; margin-top: 6px; }
body.pg-program-hiit-classes .wv-rows { display: grid; gap: 18px; }
body.pg-program-hiit-classes .wv-row { outline: none; border-radius: 8px; }
body.pg-program-hiit-classes .wv-row:focus-visible { box-shadow: 0 0 0 2px var(--cf-board), 0 0 0 4px var(--accent); }
body.pg-program-hiit-classes .wv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin-bottom: 6px; }
body.pg-program-hiit-classes .wv-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cf-chalk); }
body.pg-program-hiit-classes .wv-name .cf-sw { background: var(--hx-c); }
body.pg-program-hiit-classes .wv-meta { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; color: var(--cf-chalk-2); font-size: 14px; }
body.pg-program-hiit-classes .wv-total { color: var(--cf-chalk); font-weight: 700; }
body.pg-program-hiit-classes .wv-plot { position: relative; }
body.pg-program-hiit-classes .wv-svg { display: block; width: 100%; height: 72px; overflow: visible; }
body.pg-program-hiit-classes .wv-grid { stroke: rgba(236,235,228,.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
body.pg-program-hiit-classes .wv-base { stroke: rgba(236,235,228,.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
body.pg-program-hiit-classes .wv-work, body.pg-program-hiit-classes .wv-rest { stroke: var(--cf-board); stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity .15s; }
body.pg-program-hiit-classes .wv-work { fill: var(--hx-c); }
body.pg-program-hiit-classes .wv-rest { fill: var(--hx-rest); }
body.pg-program-hiit-classes .wv-svg:hover rect:not(:hover) { opacity: .55; }
body.pg-program-hiit-classes .wv-axis { margin-top: 6px; }
body.pg-program-hiit-classes .wv-ticks { position: relative; height: 18px; border-top: 1px solid rgba(236,235,228,.2); }
body.pg-program-hiit-classes .wv-ticks span { position: absolute; left: var(--x); top: 3px; transform: translateX(-50%); font: 600 12px var(--body); color: var(--cf-chalk-2); font-variant-numeric: tabular-nums; }
body.pg-program-hiit-classes .wv-ticks span:first-child { transform: none; }
body.pg-program-hiit-classes .wv-ticks span:last-child { transform: translateX(-100%); }
body.pg-program-hiit-classes .wv-axis-title { margin: 6px 0 0; font-size: 13px; color: var(--cf-chalk-2); }

/* 2026-10-10 04:00 IST - weekly board: the interval-day chip under the focus line */
body.pg-program-hiit-classes .cf-col-chip { margin: 8px 0 0; }

@media (max-width: 1000px) {
  body.pg-program-hiit-classes .hx-wall { grid-template-columns: 1fr; }
  body.pg-program-hiit-classes .hx-board .cf-lane:nth-child(-n+2) { border-top: 4px solid var(--hx-c); padding-top: 14px; }
  body.pg-program-hiit-classes .hx-board .cf-lane { border-top: 4px solid var(--hx-c); }
  body.pg-program-hiit-classes .hx-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body.pg-program-hiit-classes .hx-board { grid-template-columns: 1fr; }
  body.pg-program-hiit-classes .hx-board .cf-lane + .cf-lane { margin-top: 14px; }
  body.pg-program-hiit-classes .wv-svg { height: 56px; }
  body.pg-program-hiit-classes .wv-ticks span.is-odd { display: none; }
  body.pg-program-hiit-classes .hx-count { font-size: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  body.pg-program-hiit-classes .hx-hand, body.pg-program-hiit-classes .wv-work, body.pg-program-hiit-classes .wv-rest { transition: none; }
}