/* Weekly Planning — the microcycle matrix of the H&P Planning module.
   One frame holds the sticky day header, the coaches' Team band (the
   Skyline periodization strip), the seam, and the support-activity
   lanes. The header, the band and the lanes share one column template,
   so a day is the same vertical everywhere. wp- is the module prefix.

   Local values that are intentionally not tokens (Skyline handoff,
   2026-08-09): the volume-bar teal #3e9bab — a muted step off
   --accent-teal, which is too bright at three bars' worth of fill —
   the measured rule #F4F4F5, and the white-alpha pitch/used fills. */

/* On the module root, not the container: the Team day editor popover is
   the container's sibling and its preview draws with the same inks. */
.hp-planning-module {
    /* 150px since the band labels lost their subtitles (Risto, 2026-08-29);
       the rail only needs the lane name and its area line. */
    --wp-label: 150px;
    --wp-slot: 38px;
    --wp-volume-bar: #3e9bab;
    --wp-measured: #F4F4F5;
    /* 100% of match demand sits at 78% of the plot height, leaving
       headroom for sessions planned above match demand. */
    --wp-ref-pct: 78%;
}

.wp-container {
    padding: 0 24px 104px;
}

/* ── The shared column template ── */

.wp-cols {
    display: grid;
    grid-template-columns:
        var(--wp-label)
        var(--wp-slot)
        repeat(var(--wp-day-count, 7), minmax(0, 1fr));
}

/* The matrix is one object, so it carries one radius. */
.wp-frame {
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
}

.wp-frames {
    display: grid;
    gap: 20px;
}

.wp-frame-h {
    padding: 11px 14px 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 750;
}

/* Two boards: each keeps the usual day width. The day header of a
   lower board must not stick over the one above it. */
.wp-frames.is-stacked .wp-daybar {
    position: static;
}

.wp-frame .wp-daybar {
    border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

/* ── A joined frame: two microcycles side by side ──
   The names sit over their own columns above the day header, and the
   first day of the later microcycle carries a strong seam down every
   layer. */

.wp-mcbar {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--ink-line);
    border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

.wp-mcbar-lead {
    grid-column: span 2;
}

.wp-mc {
    padding: 8px 12px 6px;
    border-left: 1px solid var(--ink-line);
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.wp-frame .wp-mcbar + .wp-daybar {
    border-radius: 0;
}

.wp-day.is-mc-start,
.wp-band > .wp-band-cell.is-mc-start,
.wp-cell.is-mc-start {
    border-left: 2px solid var(--ink-line-strong);
}

.wp-lanewrap {
    overflow: hidden;
    border-radius: 0 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px);
}

/* ── The day header ── */

/* Sticks under the app header while the band scrolls away; top: 0 would
   put it behind the app header. */
.wp-daybar {
    position: sticky;
    top: var(--app-header-height);
    z-index: 14;
    background: var(--surface-raised);
}

.wp-daybar > div {
    padding: 9px 12px 8px;
}

.wp-daybar-lead {
    grid-column: span 2;
    display: flex;
    align-items: flex-end;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.wp-day {
    border-left: 1px solid var(--ink-line);
    text-align: center;
}

.wp-day-code {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: 0.4px;
    font-variant-numeric: tabular-nums;
}

.wp-day-match {
    color: var(--accent);
}

.wp-day-date {
    display: block;
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 0.61rem;
    font-weight: 650;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.wp-day-fixture {
    display: block;
    margin-top: 2px;
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ── The Team band ── */

.wp-band {
    background: var(--surface-raised);
}

.wp-band > div {
    border-bottom: 1px solid var(--ink-line);
}

.wp-band > .wp-band-cell {
    border-left: 1px solid var(--ink-line);
    padding: 14px 12px 15px;
    text-align: center;
}

.wp-band > .wp-lab {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 11px 12px 13px;
}

.wp-band > .wp-band-last {
    border-bottom: 0;
}

.wp-lab b {
    display: block;
    color: var(--text-secondary);
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wp-team-editable {
    cursor: pointer;
}

.wp-team-editable:hover {
    background: var(--ink-wash);
}

/* ── Row 1: the volume plot ── */

/* The plot fills its row, so the baseline is the row's own floor and no
   bar floats above dead space. The 22px top padding is the clearance
   for the value label above the match bar. */
.wp-band > .wp-plotcell {
    display: flex;
    padding: 22px 12px 0;
}

.wp-plot {
    position: relative;
    flex: 1;
    min-height: 142px;
    /* One equal slot per session so a single bar centres in the cell and
       two bars centre in their own halves, never leaning left and right. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: end;
    justify-items: center;
    border-bottom: 1px solid var(--ink-line-strong);
}

.wp-ref {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--wp-ref-pct);
    height: 0;
    border-top: 1px dashed var(--accent);
    opacity: 0.62;
}

.wp-plotcol {
    position: relative;
    width: 60px;
    cursor: pointer;
}

.wp-cell.is-drop-target {
    outline: 1px dashed var(--accent);
    outline-offset: -2px;
}

.wp-chip[draggable="true"] {
    cursor: grab;
}

.wp-chip.is-dragging {
    opacity: 0.55;
}

.wp-bar {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--wp-volume-bar);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.wp-bars-split {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: end;
    gap: 6px;
}

.wp-bars-split .wp-bar { flex: 1; }
.wp-bars-split .wp-bar-st { background: var(--text-secondary); }
.wp-bars-split .wp-bar-nst { background: var(--wp-volume-bar); }

.wp-split-bar-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    color: var(--text-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.wp-plotval {
    position: absolute;
    left: -14px;
    right: -14px;
    text-align: center;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wp-plotval i {
    display: block;
    margin-bottom: 2px;
    color: var(--text-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    font-style: normal;
}

/* Measured, once the session has happened: a rule across the planned
   bar at the height the squad really reached. */
.wp-real {
    position: absolute;
    left: -8px;
    right: -8px;
    height: 0;
    border-top: 2px solid var(--wp-measured);
}

.wp-real b {
    position: absolute;
    left: calc(100% + 8px);
    top: -9px;
    color: var(--wp-measured);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wp-matchcol {
    position: relative;
    width: 60px;
    height: var(--wp-ref-pct);
}

.wp-matchbar {
    width: 100%;
    height: 100%;
    background: rgba(var(--accent-rgb), 0.34);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.wp-matchcol .wp-plotval,
.wp-matchcol .wp-plotval i {
    color: var(--accent);
}

.wp-plot-empty {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.7rem;
}

/* The axis marks hang off the label cell's own floor, which is the
   plot's baseline, so the label column never drives the row's height. */
.wp-axis {
    position: absolute;
    right: 12px;
    bottom: calc((100% - 22px) * 0.78 - 6px);
    color: var(--accent);
    font-size: 0.575rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* ── Row 2: the sessions ── */

/* Sessions sit side by side, in the order their bars do. */
.wp-sessions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.wp-sess {
    flex: 1;
    min-width: 0;
    padding: 2px 0;
}

.wp-sess + .wp-sess {
    border-left: 1px solid var(--ink-line);
    padding-left: 14px;
    margin-left: -2px;
}

.wp-struct {
    display: block;
    color: var(--text-primary);
    font-size: 0.83rem;
    font-weight: 700;
}

.wp-win {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.73rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-win-unset {
    color: var(--text-tertiary);
    font-weight: 500;
}

.wp-venue {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 0.66rem;
    font-weight: 450;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-tline {
    display: block;
    margin-top: 8px;
}

.wp-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin: 0 6px;
    color: var(--text-tertiary);
    font-size: 0.575rem;
    font-weight: 700;
    letter-spacing: 0.85px;
    text-transform: uppercase;
}

.wp-pair b {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.wp-pair.is-real b {
    color: var(--wp-measured);
}

.wp-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px 9px;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 0.685rem;
    font-weight: 600;
}

.wp-tags-unset {
    color: var(--text-tertiary);
    font-weight: 450;
}

.wp-unset {
    color: var(--text-tertiary);
    font-size: 0.7rem;
    font-weight: 500;
}
/* ── Row 3: the pitch footprint ── */

.wp-pitchcol {
    display: inline-block;
    text-align: center;
}

.wp-pitch {
    display: block;
    width: 124px;
    height: 80px;
    overflow: visible;
}

.wp-pitch-ground {
    fill: var(--surface-field);
    stroke: var(--ink-line-strong);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wp-pitch-line {
    fill: none;
    stroke: var(--ink-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wp-pitch-used {
    fill: rgba(255, 255, 255, 0.17);
    stroke: rgba(255, 255, 255, 0.40);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wp-pitch-dim {
    display: block;
    margin-top: 7px;
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Row 3a: the physical targets ──
   The qualities a day exposes, as pills on the same idiom as the gym day.
   A label is written by staff and can be long, so these pills wrap inside
   their own text where the gym pair never does; nothing is truncated,
   because a truncated plan is a hidden plan. */

.wp-physrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.wp-pill-phys {
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
}

/* ── Row 4: the gym pills ── */

.wp-gymrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* One gym statement: the pill, then the strength types it works. */
.wp-gymline {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.wp-gymline em {
    color: var(--text-tertiary);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-pill {
    padding: 2px 9px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    background: var(--ink-wash);
    color: var(--text-primary);
    font-size: 0.635rem;
    font-weight: 650;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.wp-pill-off {
    background: transparent;
    border-style: dashed;
    color: var(--text-tertiary);
}

/* ── Row 5: the GK estimate ──
   The value and its share of the peak on one line, the track under
   them at the full day width: the track is the measured peak, the fill
   the coach's plan. */

.wp-gk {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 6px;
}

.wp-gk + .wp-gk {
    margin-top: 10px;
}

.wp-gk-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

/* The value and its slot tag are set like the Volume bar's label
   (.wp-plotval) so the two lanes read at one size (Risto 2026-08-29). */
.wp-gk b {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wp-gk b i {
    margin-right: 6px;
    color: var(--text-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 1px;
}

.wp-gk span {
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.wp-gk-track {
    position: relative;
    display: block;
    width: 100%;
    height: 8px;
    background: var(--ink-wash-strong);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.wp-gk-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    min-width: 4px;
    background: var(--wp-volume-bar);
    border-radius: var(--radius-pill);
}

/* ── The dense scale ──
   Six days and up: the mock's four-day metrics read cluttered on a
   long microcycle, so the band tightens — narrower bars and gaps, the
   measured value tucked inside its column, session blocks stacked
   instead of side by side, a smaller pitch and GK track. */

.wp-dense .wp-plotcol,
.wp-dense .wp-matchcol {
    width: 42px;
}

.wp-dense .wp-plot {
    gap: 0;
}

.wp-dense .wp-plotval {
    left: -10px;
    right: -10px;
    font-size: 0.7rem;
}

.wp-dense .wp-plotval i {
    font-size: 0.55rem;
}

.wp-dense .wp-real {
    left: -4px;
    right: -4px;
}

/* The measured value stays inside its own column instead of running
   into the neighbouring day. */
.wp-dense .wp-real b {
    left: auto;
    right: 0;
    top: -13px;
    font-size: 0.62rem;
}

.wp-dense .wp-sessions {
    flex-direction: column;
    gap: 9px;
}

/* A long window leaves a narrow day, so the physical pills tighten with
   everything else rather than pushing the row tall. */
.wp-dense .wp-physrow {
    gap: 4px;
}

.wp-dense .wp-pill-phys {
    padding: 2px 7px;
    font-size: 0.585rem;
    letter-spacing: 0.2px;
}

.wp-dense .wp-sess + .wp-sess {
    border-left: 0;
    border-top: 1px solid var(--ink-line);
    padding: 8px 0 0;
    margin: 0;
}

.wp-dense .wp-struct {
    font-size: 0.75rem;
}

.wp-dense .wp-win {
    font-size: 0.68rem;
}

.wp-dense .wp-pair {
    margin: 0 4px;
    font-size: 0.55rem;
}

.wp-dense .wp-pair b {
    font-size: 0.85rem;
}

.wp-dense .wp-pitch {
    width: 96px;
    height: 62px;
}

.wp-dense .wp-gk {
    padding: 0;
}

.wp-dense .wp-gk b {
    font-size: 0.7rem;
}

.wp-dense .wp-gk b i,
.wp-dense .wp-gk span {
    font-size: 0.55rem;
}


/* ── The wide scale ──
   Eleven days and up — two microcycles in one frame — narrow the label
   rail and every gutter so fourteen days keep a readable column. */

.wp-frame.wp-wide {
    --wp-label: 132px;
    --wp-slot: 34px;
}

.wp-wide .wp-daybar > div {
    padding: 9px 6px 8px;
}

.wp-wide .wp-day-code {
    font-size: 0.85rem;
}

.wp-wide .wp-band > .wp-band-cell {
    padding: 12px 6px 13px;
}

.wp-wide .wp-band > .wp-lab {
    padding: 11px 10px 13px;
}

.wp-wide .wp-plotcol,
.wp-wide .wp-matchcol {
    width: 30px;
}

.wp-wide .wp-pitch {
    width: 72px;
    height: 47px;
}

.wp-wide .wp-matrix td {
    padding: 5px;
}

.wp-wide .wp-lane-label {
    padding: 7px 10px;
}

.wp-wide .wp-lane-label strong {
    font-size: 0.72rem;
}

.wp-wide .wp-chip {
    padding: 2px 7px;
    font-size: 0.64rem;
}

/* ── The seam between the two layers ── */

.wp-seam {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 30px;
    padding: 0 12px;
    background: var(--surface-chrome);
    border-top: 2px solid var(--ink-line-strong);
    border-bottom: 1px solid var(--ink-line);
}

.wp-seam b {
    color: var(--text-secondary);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.wp-seam .wp-seam-right {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ── The support-activity lanes ── */

/* A real table with a fixed layout and a colgroup mirroring the grid's
   column template: the remaining width divides equally over the days,
   which is what keeps the lanes aligned to the band above for any
   window length. */
.wp-matrix {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface-recess);
    font-size: 0.78rem;
}

.wp-col-label {
    width: var(--wp-label);
}

.wp-col-slot {
    width: var(--wp-slot);
}

.wp-matrix td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--ink-line);
    vertical-align: top;
}

.wp-matrix tr:last-child td {
    border-bottom: 0;
}

/* Three separate lines — task, area, timing rule — no separators. */
.wp-lane-label {
    padding: 7px 12px;
    background: var(--ink-zebra);
    vertical-align: middle;
}

.wp-lane-label strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.785rem;
    font-weight: 650;
}

.wp-lane-area {
    display: block;
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 0.585rem;
    font-weight: 700;
    letter-spacing: 0.95px;
    text-transform: uppercase;
}

.wp-slot {
    color: var(--text-tertiary);
    font-size: 0.585rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-align: center;
    vertical-align: middle;
}

.wp-cell {
    border-left: 1px solid var(--ink-line);
    text-align: left;
    cursor: pointer;
}

.wp-matrix tbody tr:hover .wp-cell {
    background: var(--ink-wash);
}

/* The match column reads a shade apart in the lanes (Skyline handoff). */
.wp-cell.is-match {
    background: rgba(255, 255, 255, 0.012);
}

.wp-cell.is-editing {
    background: var(--ink-wash-strong);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.wp-matrix-player .wp-lane-label {
    vertical-align: top;
}

.wp-cell-player .wp-chip {
    white-space: normal;
    max-width: 100%;
    line-height: 1.25;
    text-align: left;
}

.wp-empty {
    padding: 40px 0;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    text-align: center;
}

/* ── The chips ── */

.wp-chip {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 9px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    background: var(--ink-wash);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.685rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.wp-chip:hover {
    border-color: var(--accent);
}

/* An Individual Testing chip counts the tests after the player.
   The protocol names stay on the title. */
.wp-chip-test {
    margin-left: 5px;
    color: var(--text-secondary);
    font-weight: 550;
}

.wp-chip-done {
    border-color: transparent;
    background: var(--accent-soft);
}

/* A chip closed without work — cancelled or not executed — keeps its
   cell, struck through. */
.wp-chip-cancelled,
.wp-chip-not-executed {
    color: var(--text-tertiary);
    text-decoration: line-through;
    background: transparent;
}

/* Every cell reveals an add target on hover and on focus — including the
   cells that already hold chips, so a lane and a day can take a second
   player without leaving the grid. */
.wp-add {
    display: inline-block;
    padding: 2px 9px;
    border: 1px dashed transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: transparent;
    font: inherit;
    font-size: 0.685rem;
    cursor: pointer;
}

.wp-cell:hover .wp-add,
.wp-add:focus-visible {
    border-color: var(--ink-line-strong);
    color: var(--text-tertiary);
}

.wp-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── The legend, under the frame behind a disclosure ── */

.wp-legend {
    padding: 12px 0 0;
}

.wp-legend .nv-disclosure {
    flex: 0 0 auto;
    max-width: none;
}

.wp-legend .nv-disclosure > span {
    overflow: visible;
    text-overflow: clip;
}

.wp-legend-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    margin-top: 11px;
    padding: 12px 14px;
    background: var(--surface-chrome);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-sm);
}

/* The flex display above is an author rule and would beat the UA's
   [hidden] { display: none } — this keeps the disclosure honest. */
.wp-legend-body[hidden] {
    display: none;
}

.wp-lg {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-tertiary);
    font-size: 0.68rem;
}

.wp-lg .wp-chip {
    margin: 0;
    cursor: default;
}

.wp-sw {
    display: inline-block;
    width: 16px;
    height: 10px;
    background: var(--wp-volume-bar);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.wp-sw-real {
    height: 0;
    background: transparent;
    border-radius: 0;
    border-top: 2px solid var(--wp-measured);
}

.wp-sw-ref {
    height: 0;
    background: transparent;
    border-radius: 0;
    border-top: 1px dashed var(--accent);
}

/* ── Toolbar controls ──
   The window disclosure holds the centre lane; the draft count and the
   approval act sit in the toolbar's right lane (.wp-actions). */

.wp-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wp-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.wp-window {
    position: relative;
}

/* Placement, surface and plane come from the shared .hp-pop fixed layer;
   the module adds only its width and internal grid. */
.wp-window-panel {
    min-width: 360px;
    display: grid;
    gap: 12px;
}

/* ── The settings panel ──
   Two short lists of words, so the panel reads as a list and not as a
   form (Risto, 2026-08-13): no field chrome until a name is touched, and
   the remove mark stays quiet until its row is under the pointer. A long
   vocabulary scrolls inside the panel rather than off the screen. */

.wp-set-panel {
    width: 300px;
    max-height: min(70vh, 560px);
    padding: 0;
    overflow-y: auto;
}

.wp-set-sec {
    padding: 12px 12px 11px;
    border-bottom: 1px solid var(--ink-line);
}

.wp-set-last {
    border-bottom: 0;
}

.wp-set-h {
    margin: 0 0 5px 6px;
    color: var(--text-tertiary);
    font-size: 0.575rem;
    font-weight: 700;
    letter-spacing: 1.05px;
    text-transform: uppercase;
}

.wp-set-list {
    display: grid;
}

.wp-set-row,
.wp-set-add {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* The name field carries no border of its own: the list is a column of
   words, and an edit box appears where one is being edited. */
.wp-set-name {
    flex: 1;
    min-width: 0;
    height: 28px;
    padding: 0 6px;
    background: transparent;
    border-color: transparent;
    font-size: 0.735rem;
}

.wp-set-name:hover {
    border-color: var(--ink-line);
}

.wp-set-name:focus {
    background: var(--surface-field);
    border-color: var(--ink-line-strong);
}
/* The add row sits on the list, not under a rule: one more line in the
   same column, with its action showing only once there is text to add. */
.wp-set-add {
    margin-top: 2px;
}
.wp-set-empty {
    margin: 0;
    padding: 4px 6px;
    color: var(--text-tertiary);
    font-size: 0.625rem;
    line-height: 1.5;
}

/* ── The test picker in the cell editor ── */

.wp-test-pick {
    display: grid;
    max-height: 200px;
    padding: 2px 0;
    overflow-y: auto;
}

.nv-seg + .wp-test-pick {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.wp-test-cat {
    margin: 6px 0 2px 2px;
    color: var(--text-tertiary);
    font-size: 0.575rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wp-test-cat:first-child {
    margin-top: 0;
}

.wp-test-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 2px;
    font-size: 0.735rem;
    cursor: pointer;
}

.wp-test-opt .ac-lbl {
    color: var(--text-secondary);
}

.wp-test-opt:hover .ac-lbl {
    color: var(--text-primary);
}

.wp-test-opt:has(input:disabled) {
    cursor: default;
    opacity: 0.55;
}

.wp-window-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wp-window-label {
    min-width: 56px;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

/* Layout only — the controls keep their shared classes untouched. */
.wp-window-row select,
.wp-window-row .hub-date-trigger {
    flex: 1;
    min-width: 0;
}

.wp-window-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 2px;
    border-top: 1px solid var(--ink-line);
}

.wp-window-range {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The day count sits beside the range on weight and ink alone. */
.wp-window-range b {
    color: var(--text-primary);
    font-weight: 750;
}

/* ── The cell editor ──
   A popover anchored beside its cell, not the shared modal: at twenty-three
   lane rows a modal covering the matrix loses the context being planned
   against. It is placed by placeEditor(), which keeps it clear of the cell
   it is editing and of the row's label band. */

.wp-pop {
    position: fixed;
    z-index: 200;
    width: 300px;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

.wp-pop-head {
    padding: 12px 14px 11px;
    border-bottom: 1px solid var(--ink-line);
}

.wp-pop-head strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.wp-pop-head span {
    display: block;
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.wp-pop-body {
    padding: 12px 14px;
}

.wp-field {
    display: grid;
    min-width: 0;
    margin-bottom: 10px;
}

.wp-field:last-child {
    margin-bottom: 0;
}

/* Grid items default to min-width auto: a select with a long option would
   otherwise run past the 300px popover edge. The closed select ellipsizes;
   the open list still shows every option in full. */
.wp-field > * {
    min-width: 0;
}

.wp-field > span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wp-pop-hint {
    padding: 9px 14px;
    border-top: 1px solid var(--ink-line);
    background: var(--surface-raised);
    color: var(--text-tertiary);
    font-size: 0.69rem;
    line-height: 1.5;
}

.wp-pop-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--ink-line);
}

.wp-pop-spacer {
    flex: 1;
}

/* ── The Team day editor ──
   Sectioned by question, with the day it is writing drawn beside the
   fields. Selection anywhere in this popover is one step on the ink
   ladder, so the only pink is the primary action, the focus rings and
   the match line in the preview. */

.wp-pop-volume {
    width: min(780px, calc(100vw - 24px));
}

.wp-vol-body {
    display: grid;
    gap: 10px;
}

.wp-vol-metrics {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px 10px;
}

.wp-vol-metrics div {
    min-width: 0;
}

.wp-vol-metrics span {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.wp-vol-metrics b {
    display: block;
    margin-top: 2px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.wp-vol-split {
    padding: 10px 0 2px;
    border-top: 1px solid var(--ink-line);
}

.wp-vol-split-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.wp-vol-split-head strong {
    color: var(--text-primary);
    font-size: 0.78rem;
}

.wp-vol-split-head span,
.wp-vol-split p {
    color: var(--text-tertiary);
    font-size: 0.68rem;
}

.wp-vol-split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px 18px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.wp-vol-split-grid span { color: var(--text-secondary); }
.wp-vol-split-grid b,
.wp-vol-split-grid strong { color: var(--text-primary); text-align: right; }
.wp-vol-split-grid b { color: var(--text-tertiary); font-size: 0.64rem; letter-spacing: 0.05em; }

.wp-vol-split p { margin: 8px 0 0; }

.wp-vol-drills td.wp-vol-drill-name {
    white-space: normal;
}

.wp-pop-team {
    width: 568px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

.wp-ed-head {
    display: flex;
    gap: 16px;
    padding: 15px 18px 16px;
    border-bottom: 1px solid var(--ink-line);
}

.wp-ed-id {
    flex: 1;
    min-width: 0;
}

.wp-ed-kick {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.575rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.wp-ed-md {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 5px;
}

.wp-ed-md b {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: 0.3px;
}

.wp-ed-md span {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
}

.wp-ed-sub {
    display: block;
    margin-top: 7px;
    color: var(--text-tertiary);
    font-size: 0.665rem;
    line-height: 1.5;
    text-wrap: pretty;
}

/* The preview is the point: the cell this form writes, drawn as it
   will read. */
.wp-ed-prev {
    flex: 0 0 168px;
    padding: 9px 10px 10px;
    background: var(--surface-field);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-sm);
}

.wp-ed-prev-k {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.545rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wp-ed-plot {
    position: relative;
    height: 72px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin-top: 7px;
    border-bottom: 1px solid var(--ink-line-strong);
}

.wp-ed-ref {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 58px;
    border-top: 1px dashed var(--accent);
    opacity: 0.6;
}

.wp-ed-reflbl {
    position: absolute;
    right: 0;
    bottom: 60px;
    color: var(--accent);
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.wp-ed-bar {
    position: relative;
    width: 40px;
    background: var(--wp-volume-bar);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.wp-ed-bar span {
    position: absolute;
    left: -12px;
    right: -12px;
    top: -17px;
    text-align: center;
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wp-ed-pline {
    display: block;
    margin-top: 8px;
    color: var(--text-primary);
    font-size: 0.735rem;
    font-weight: 700;
}

.wp-ed-pmeta {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.665rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wp-ed-ptags {
    display: block;
    margin-top: 4px;
    color: var(--text-tertiary);
    font-size: 0.63rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.wp-ed-sec {
    padding: 13px 18px;
    border-bottom: 1px solid var(--ink-line);
}

.wp-ed-sec-h {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 9px;
}

.wp-ed-sec-h b {
    color: var(--text-secondary);
    font-size: 0.585rem;
    font-weight: 700;
    letter-spacing: 1.05px;
    text-transform: uppercase;
}

.wp-ed-sec-h span {
    color: var(--text-tertiary);
    font-size: 0.655rem;
}

/* The 4-way structure choice: a sunken pill well. */
.wp-ed-well {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-field);
    border-radius: var(--radius-pill);
}
.wp-ed-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* The quick session lengths under the window row: one tap writes the end
   from the start, and the chip matching the current span reads selected. */
.wp-ed-lengths {
    margin-top: 8px;
}

.wp-ed-time {
    width: 88px;
    height: 34px;
    flex: 0 0 auto;
}

.wp-ed-dash {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.wp-ed-dur {
    min-width: 44px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wp-ed-venue {
    flex: 1;
    height: 34px;
    min-width: 0;
}

/* The RPE ladder: picking 7 shows what 7 is, next to 5 and next to 9. */
.wp-ed-rpe {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wp-ed-rpe-read {
    color: var(--text-tertiary);
    font-size: 0.655rem;
    line-height: 1.4;
}

.wp-ed-rpe-read b {
    display: block;
    color: var(--text-primary);
    font-size: 0.735rem;
    font-weight: 700;
}
.wp-ed-note {
    width: 100%;
    height: 34px;
    margin-top: 11px;
    padding: 0 11px;
    background: var(--surface-field);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.75rem;
}

.wp-ed-note::placeholder {
    color: var(--text-disabled);
}

.wp-ed-note:focus {
    outline: none;
    border-color: var(--accent);
}

.wp-ed-gk {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wp-gk-slider {
    flex: 1;
    min-width: 0;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--ink-wash);
    border-radius: var(--radius-sm);
}

.wp-gk-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-primary);
    cursor: pointer;
}

.wp-gk-slider:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

.wp-team-rpe-input {
    width: 88px;
}

.wp-ed-gkval {
    min-width: 96px;
    color: var(--text-tertiary);
    font-size: 0.63rem;
    font-weight: 650;
    letter-spacing: 0.5px;
    text-align: right;
    white-space: nowrap;
}

.wp-ed-gkval b {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.wp-ed-off {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    line-height: 1.6;
}

/* A sub-choice inside a section: the strength types under an on pill. */
.wp-ed-sub {
    margin-top: 9px;
}

.wp-ed-sub > span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-tertiary);
    font-size: 0.585rem;
    font-weight: 700;
    letter-spacing: 1.05px;
    text-transform: uppercase;
}

/* Two facts the coach does not type: they arrive from the Training
   Planner. */
.wp-ed-read {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 11px 18px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--ink-line);
}

.wp-ed-read div {
    min-width: 0;
}

.wp-ed-read b {
    display: block;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wp-ed-read span {
    display: block;
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 0.615rem;
    font-weight: 650;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.wp-ed-read-pitch {
    display: flex;
    align-items: center;
    gap: 9px;
}

.wp-ed-read-pitch .wp-pitch {
    width: 58px;
    height: 38px;
}

.wp-ed-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
}

.wp-ed-spacer {
    flex: 1;
}