/* The week strip (M-254) — the shape of a module's reminder horizon on one line, above the reminder
 * grid. Presentation only: the markup is <x-platform::week-strip>, the behaviour is the `week-strip`
 * Stimulus controller (coding-standards §4).
 *
 * Every colour is a design token, so the strip re-skins with the theme and a host can override it
 * without touching markup (§12). The volume level is a discrete `data-level` ATTRIBUTE the rules below
 * match on — never a style string computed in JS — which is what keeps this feature free of inline
 * styles entirely. */

/* The strip sits inside the shared card primitive (<x-platform::card padding="compact" --natural>), which
   is where its border, surface and shadow come from — this sheet declares none of them. That is what lifts
   the strip off the page background: a bare row of cells floating on the page reads as debris, the same row
   on a surface reads as an instrument. The card is the grid toolbar's treatment too, because it is the same
   kind of content (a control strip, not prose) — reused, not re-declared (§3).

   The gap below belongs to the CARD, not to the strip inside it: put it on `.platform-week-strip` and it
   becomes dead air INSIDE the box, which looks like a bug rather than spacing. */
.platform-week-strip-card {
    margin-bottom: var(--platform-space-md);
}

.platform-week-strip {
    /* The hint is positioned against this box (the controller sets only its left/top). */
    position: relative;
}

/* ── The track ───────────────────────────────────────────────────────────────────────────────────
 * THE RESPONSIVE DECISION, and it is a decision rather than an afterthought (§12): the strip scrolls
 * INSIDE ITSELF, and the page body never scrolls sideways.
 *
 * The alternative — fewer, wider buckets on a narrow viewport (months instead of weeks) — was rejected:
 * a cell's meaning would then depend on the width of the glass, and clicking one would filter the grid
 * to a month on a phone and a week on a desktop. The strip would be a different instrument per device.
 *
 * So a week is always a week, and the CELLS adapt instead: `flex: 1 1 0` lets them share the width when
 * there are few (M-255's 3-month floor ≈ 13 cells, which fill the row), and `min-width` stops them
 * collapsing when there are many (its 60-month ceiling ≈ 261 cells, which overflow and scroll). Both
 * ends of that range work at any width, which is the criterion — not "it looks fine at 12 months". */
/* The padding is SYMMETRIC on purpose. The bottom inset is where the horizontal scrollbar lands when the
   horizon overflows; the top one has no job except to match it, so the cells sit centred in the card
   instead of riding high with a band of dead air beneath them. Uneven padding on a one-row strip reads as
   a mistake, and at 53 cells (the usual case) the track does not scroll at all, so the bottom inset would
   otherwise be pure asymmetry. */
.platform-week-strip__track {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-top: var(--platform-space-xs);
    padding-bottom: var(--platform-space-xs);
}

/* Square, and half the size it started at (Dude, 2026-07-17). Two deliberate choices:

   SQUARE CORNERS. A rounded cell at this size spends most of its radius rounding away the fill that IS the
   datum, and 50-odd rounded chips read as a row of buttons rather than one continuous shape. The strip is a
   plot, not a toolbar; its neighbours in the ramp should meet.

   HALF THE FORMER SIZE (was 0.6rem / 1.75rem). The old cell was sized like a control; it only ever had to
   be a mark. `min-width` is the floor that decides when the track starts scrolling rather than shaving
   cells to slivers — halving it means MORE of the horizon fits before the scroll begins, which is the
   overview the strip exists to give. Touch keeps its own, larger target below. */
.platform-week-strip__cell {
    flex: 1 1 0;
    min-width: 0.3rem;
    height: 0.875rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--platform-color-viz-empty);
    cursor: pointer;
}

/* The sequential ramp. One hue, four steps of rising intensity, all from tokens — each theme declares
 * its own six values, dark modes selected against their own surface rather than flipped from the light
 * ones (see tokens.css). Level 0 keeps the empty background above: a quiet week is a cell that is THERE
 * and empty, which is what distinguishes it from a week outside the horizon — those are not cells at
 * all, and the track simply ends. */
.platform-week-strip__cell[data-level="1"] { background: var(--platform-color-viz-1); }
.platform-week-strip__cell[data-level="2"] { background: var(--platform-color-viz-2); }
.platform-week-strip__cell[data-level="3"] { background: var(--platform-color-viz-3); }
.platform-week-strip__cell[data-level="4"] { background: var(--platform-color-viz-4); }

/* Overdue: its own status tone, outside the ramp, at the left edge — "late" is not "many". It is also
 * the one cell that carries a glyph, because a reserved status colour never rides alone. Not a button:
 * it filters nothing, so it takes no pointer and no hover lift.
 *
 * The glyph is painted in the SURFACE colour — punched out of the fill rather than laid on it. That is
 * not a stylistic choice but the one pairing that cannot fail: `viz-overdue` is guarded at >= 3:1
 * against `surface` in every theme (ThemeContrastTest), so a surface-coloured mark on a viz-overdue fill
 * inherits that same ratio for free. `--platform-color-on-accent` would have read almost the same today
 * and meant something else entirely — it is the ink for the ACCENT, and a theme that re-tuned its accent
 * would silently drag this glyph's colour along with it. */
.platform-week-strip__cell--overdue {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Narrower with the rest, but NOT to the ramp's 0.3rem floor: this is the one cell with something in
       it. The glyph is not decoration — a reserved status colour never rides alone, so it is the channel a
       reader who cannot see the tone still gets. `line-height: 1` because the cell is now shorter than the
       font's natural line box, and a glyph that overflows its own fill is worse than no glyph. */
    min-width: 0.55rem;
    margin-right: var(--platform-space-xs);
    background: var(--platform-color-viz-overdue);
    color: var(--platform-color-surface);
    font-size: var(--platform-font-size-xs);
    font-weight: 700;
    line-height: 1;
    cursor: default;
}

/* Hover deepens the cell's OWN colour rather than drawing a ring around it (Dude, 2026-07-17). An outline
 * on a 14px square is mostly outline — the ring competed with the fill it was pointing at, and a row of
 * them under a moving pointer flickered.
 *
 * `saturate()` rather than a per-level hover token: it works on whatever the cell already is, so one line
 * covers five levels × eight themes and cannot drift from the ramp it decorates. It is also hue-preserving
 * and lightness-preserving, which is what keeps it honest — the earlier note here ("the fill IS the datum,
 * so hover must not repaint it") still holds in the way that matters. Saturation is not the encoded
 * channel: the ramp encodes volume in LIGHTNESS (ThemeContrastTest pins monotone OKLCH L, ΔL >= 0.06), so
 * deepening the colour under the pointer cannot make a quiet week read as a busy one. It only says "this
 * one". The exact count is in the hint either way.
 *
 * Caveat worth knowing: `viz-empty` is a near-grey, so saturating it is a real but faint response — the
 * emptiest cells give the least hover feedback. They are also the cells with the least to say. */
.platform-week-strip__cell:not(.platform-week-strip__cell--overdue):hover {
    filter: saturate(2);
}

.platform-week-strip__cell:focus-visible {
    outline: 2px solid var(--platform-color-text);
    outline-offset: 1px;
}

/* The selected week. An outline in the ink colour, not a fill: the cell's fill is its volume, and a
 * selection that repainted it would destroy the very datum the strip exists to show. */
.platform-week-strip__cell--active {
    outline: 2px solid var(--platform-color-text);
    outline-offset: 1px;
}

/* ── The hint ────────────────────────────────────────────────────────────────────────────────────
 * Text wears TEXT tokens, never the series colour — so it inherits the AA contrast those tokens are
 * already guarded for (ThemeContrastTest), and the ramp's own thresholds never have to carry prose. */
.platform-week-strip__hint {
    position: absolute;
    z-index: 5;
    margin-top: var(--platform-space-xs);
    padding: var(--platform-space-xs) var(--platform-space-sm);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-md);
    background: var(--platform-color-surface);
    box-shadow: var(--platform-shadow-md);
    color: var(--platform-color-text);
    font-size: var(--platform-font-size-sm);
    white-space: nowrap;
    pointer-events: none;
}

/* A finger is not a mouse pointer: give the cells more to aim at on touch. These values are UNCHANGED by
 * the 2026-07-17 halving of the pointer sizes above — that pass was about how the strip reads on a screen
 * you look at, and this rule exists for a target you hit. The gap is now ~2.5× rather than ~1.5×, which is
 * the rule doing its job, not drift.
 *
 * They stay below the 44px --platform-tap-target floor deliberately: at the 60-month horizon that floor
 * would make the strip 261 × 44px ≈ 11,484px of horizontal scroll, which costs every reader the overview
 * the strip exists to give. The floor buys back what a mis-tap costs, and here that is near nothing — a
 * wrong cell just re-filters the grid below, and one more tap fixes it (the right cell, or the same one
 * again to clear). */
@media (pointer: coarse) {
    .platform-week-strip__cell {
        min-width: 1.1rem;
        height: 2.25rem;
    }
}