/**
 * Availability Mode — cost-aware per-cell status colours
 * ============================================
 * Painted by AvailabilityMode.applyToRow (js/services/availability-mode.js).
 *
 * Cost-aware vocabulary: each cell shows the *cost to the person* of being
 * reachable at that hour. After the 2026-06-05 tone reduction the palette is
 * FIVE hues + one pattern, so a glance reads "reachable / soft-cost / sleep /
 * conflict / away" without triaging a wall of near-identical colours.
 *
 * Palette (cost-ascending) — all OPAQUE, on the `background` channel, anchored
 * on canonical STATUS_PRESENTATION hues:
 *   • reachable — green (#22c55e): declared-free OR in working hours, zero
 *                 cost. (available + working collapsed to ONE green 2026-06-05;
 *                 the data still distinguishes them for the bar/scoring.)
 *   • flex      — gold (#fbbf24): edge-of-day / awake-non-working, soft yes,
 *                 paid in convenience. The single warm "soft cost" tone — the
 *                 old burnt-orange `off` step folded into this gold 2026-06-05
 *                 (the painter no longer emits `off` for waking hours anyway),
 *                 so the warm band is one colour instead of gold-vs-orange.
 *   • sleep     — indigo (#7c3aed): paid in sleep — high cost, biologically
 *                 loaded. Deep-sleep darkens toward black for the 3am-vs-5am cue.
 *   • busy      — red (#dc2626): hard conflict, not reachable.
 *   • away      — striped fuchsia (#d946ef): confirmed PTO / leave (categorical).
 *
 * The cost progression (green → gold → indigo → red, with fuchsia stripes for
 * away) gives each cost class its own hue, so the eye never has to resolve two
 * tones of the same colour — that two-greens / gold-vs-orange load was the
 * "too many colours" the reduction targets.
 *
 * Pairs with Fairness mode: Fairness collapses team cost into one score,
 * Availability shows the per-person distribution that score abstracts.
 *
 * The doubled `.timeline-cell.timeline-cell` selector mirrors the trick used
 * in css/fairness-view.css to lift specificity (0,4,1) above the day-cycle
 * rules in style.css (0,3,1) so we can override their `!important` background.
 *
 * SPECIFICITY TRAP (2026-06-03): the mode guard MUST be `:is(...)`, never
 * `:where(...)`. `:where()` contributes ZERO specificity, so wrapping the
 * `[data-color-mode]` attribute in it dropped every fill from the intended
 * (0,4,1) down to (0,3,1) — an EXACT tie with the day-cycle cell gradient
 * (`body.day-cycle-enabled :is(.timeline-cell, .compact-hour-cell)[data-hour]`,
 * also (0,3,1)). On a tie the cascade falls to source order, which the fills
 * happened to win in light mode but LOST in dark mode (the dark day-cycle rule
 * is (0,4,1)). The net symptom was availability fills never painting, so cells
 * stayed transparent and the section's day-cycle ambient `::after` showed
 * through the whole card as one flat colour (blue/black at night, warm midday)
 * — "the cells are all one colour." `:is()` takes the specificity of its most-
 * specific argument ([data-color-mode] → 0,1,0), restoring the (0,4,1) the
 * doubled-class trick was always meant to deliver. Fairness mode uses the bare
 * attribute (no wrapper) and was therefore unaffected — which is exactly why
 * fairness shading worked while availability did not.
 * ============================================
 */

/* Keep the day/night [data-hour] gradient as the BASE (no longer
   `background-image: none`) — status fills now layer on top as translucent
   inset overlays so the local-time shade reads through. Only the day-cycle
   text-shadow is dropped so status labels stay clean. 2026-06-04. */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status] {
  text-shadow: none !important;
}

/* ── Unpainted-cell fallback (day/night, never white) ─────────────────────
   A cell with NO data-availability-status is one the painter hasn't reached
   yet (boot race, mid-rebuild, late mount) or one it skipped. Per explicit
   user preference (2026-06-02): such a cell must fall back to the day/night
   local-time shading — NEVER white. The day-cycle [data-hour] gradient
   (style.css ~7078, applies because `day-cycle-enabled` is always on in
   every mode) is exactly that fallback, so the correct behaviour is to let
   it show through and NOT override it.

   This rule used to force `background-image:none; background-color:var(
   --cell-base)` (i.e. WHITE) on attribute-less cells to avoid a "muddy gray"
   remnant. That is what produced the user-reported white cells. We now leave
   the gradient alone — a stranded cell reads as its hour's sky colour, which
   is the intended fallback — and only drop the white text-shadow so any
   hour label stays legible until the painter stamps a status. The painter
   (availability-mode.js pre-stamp + dataStarved-by-attribute guard) remains
   the real fix that makes stranding rare; this just guarantees the brief
   pre-paint frame is day/night shaded rather than white.

   NOTE: the daynight gradient rules in style.css are !important, so a plain
   rule here cannot beat them anyway — which is why we no longer try to.
   Scoped to availability; fairness/overlap fall through to the same
   [data-hour] gradient via their own attribute-less paths. */
body[data-color-mode="availability"] .timeline-cell.timeline-cell:not([data-availability-status]) {
  text-shadow: none !important;
}

/* ── Light-mode fills ────────────────────────────────────
   Anchored on canonical STATUS_PRESENTATION greens so cells, team-bar segments,
   and chip indicators all speak the same green.

   2026-06-04 (product direction): a STAMPED cell paints its PURE, OPAQUE status
   hue — the colour must NOT be affected by the day/night shade beneath it. The
   day/night local-time gradient is the base for UNSTAMPED cells only; once a
   painter assigns a status, that status colour is deterministic regardless of
   the hour underneath. (Previously the fills were translucent color-mix() that
   let the base tint bleed through, which read as the same status looking
   different on a day vs night card and as a white-ish wash — the reported bug.)
   The vivid→receding hierarchy now lives in the hue/value of the tokens
   themselves, not in base-bleed translucency. */
/* 2026-06-05: fills paint on the `background` channel (not box-shadow).
   Two reasons: (1) the bracket-suppression rule below sets `box-shadow:none
   !important` on .working-hour/.sleeping-hour at the SAME (0,4,1) specificity
   but LATER in source order, so a box-shadow fill was being clobbered on every
   working/sleeping cell (same P0 bug fixed in fairness-view.css). `background`
   is a different channel, so they no longer collide. (2) `background`
   out-specifies the day-cycle [data-hour] gradient (0,3,1) via the doubled
   .timeline-cell, so stamped cells are deterministic regardless of the hour.

   GENTLE (2026-06-05): each fill is a color-mix toward the OPAQUE surface
   (--surface-primary), NOT the pure token — restoring the calmer muted register
   the user prefers while staying a solid, no-gradient-bleed colour. (Do NOT mix
   toward --cell-base: it's `transparent`, which would re-open the gradient bleed.)
   Alphas mirror the original tuning: available/working 85, flex 78, sleep 80,
   busy 85 — the vivid→receding hierarchy is preserved.

   TONE REDUCTION (P2, user request "reduce availability tones"): available +
   working collapse to ONE green on cells. The data distinction is preserved for
   the team-bar headcount + scoring; on a per-person cell "declared-free" vs
   "in-working-hours" isn't a glanceable action, and two near-identical greens
   added to the colour load. Both now paint --status-available. */

/* ONE cell-fill source (2026-07-13 audit CELL-03): the per-status fill mixes
   are tokens, consumed by BOTH the solid-cell rules below AND the JS
   multi-segment gradient (_STATUS_FILL in availability-mode.js). The JS map
   had drifted to the pre-softening mixes (green 85 vs 62 etc.), so a
   partly-busy cell's slices painted visibly more vivid than identical-status
   solid neighbours — "two shades of red at 12pm". One token, no drift; the
   dark override keeps theme-correctness for inline gradients too. */
:root {
  --cell-fill-available: color-mix(in srgb, var(--status-available) 62%, var(--surface-primary, #fff));
  --cell-fill-flex:      color-mix(in srgb, var(--status-flex) 66%, var(--surface-primary, #fff));
  /* ⚠️SLEEP DOES NOT MIX TOWARD WHITE (2026-09-02, owner: "why different
     purples, the light purple on cells is undesired, use the team bar
     colour"). Its siblings here soften toward the surface, and for available /
     flex / busy that reads fine. For sleep it did not: 68% toward white renders
     #a679f3, a pale lilac at luminance 0.283, while the team bar directly above
     paints #6232bf at 0.086 — the cell was 3.3x LIGHTER than the bar segment
     labelling the very same hours, so one state wore two colours on one screen.
     Now mixed toward #1a0b3d, the same dark stop every deep-sleep surface
     already darkens into, at the strength that lands on the bar's own
     composite (measured 0.090 vs the bar's 0.086). Night should read heavy;
     it is the one status here that is genuinely dark, not merely tinted. */
  --cell-fill-sleep:     color-mix(in srgb, var(--status-sleep) 78%, #1a0b3d);
  --cell-fill-busy:      color-mix(in srgb, var(--shading-busy, #dc2626) 74%, var(--surface-primary, #fff));
  --cell-fill-away:      color-mix(in srgb, var(--status-away) 74%, var(--surface-primary, #fff));
  /* AVAILABILITY-mode own-PTO fill: deep-orange, matching the away cell stripe +
     occluder + verdict band (all --status-away-scan since 2026-07-14 "pink
     retired"). The 2026-07-14 pass migrated every OTHER away surface off fuchsia
     but missed the viewer's-own-away CELL rule below, leaving a lone pink wash in
     availability mode (user 2026-07-16 "some pink shaded areas"). Fairness KEEPS
     --cell-fill-away fuchsia — a deliberate "fairness washes away" signal (M8). */
  --cell-fill-away-scan: color-mix(in srgb, var(--status-away-scan) 74%, var(--surface-primary, #fff));
}
body.dark-mode {
  --cell-fill-available: color-mix(in srgb, var(--status-available) 74%, var(--surface-primary, #1a1a2e));
  --cell-fill-flex:      color-mix(in srgb, var(--status-flex) 72%, var(--surface-primary, #1a1a2e));
  --cell-fill-sleep:     color-mix(in srgb, var(--status-sleep) 78%, #1a0b3d);
  --cell-fill-busy:      color-mix(in srgb, var(--shading-busy, #dc2626) 76%, var(--surface-primary, #1a1a2e));
  --cell-fill-away:      color-mix(in srgb, var(--status-away) 76%, var(--surface-primary, #1a1a2e));
  /* Dark-mode own-PTO deep-orange (dark away-cell darker stop --status-away-scan-dark #ea580c). */
  --cell-fill-away-scan: color-mix(in srgb, var(--status-away-scan-dark, var(--status-away-scan)) 76%, var(--surface-primary, #1a1a2e));
}
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="available"],
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="working"] {
  /* CALMER GREEN (user "availability too harsh — dial everything down"): now
     62%. Part of a uniform ~10pt softening of ALL availability cell hues
     (green 72→62, flex 78→66, sleep 80→68, busy 85→74) so the whole grid calms
     instead of reading as a wall of loud colour, while keeping the relative
     hierarchy (green still the dominant answer over flex). Earlier step took
     green 85→72. */
  background: linear-gradient(var(--cell-fill-available), var(--cell-fill-available)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
/* Flex cost: amber. Reachable but paid in convenience (edge of working day).
   VISUAL HIERARCHY (2026-06-03): availability mode answers "who can I meet
   NOW?" — so available/working (the answer) stay vivid and the "not-here"
   states (flex/off/sleep/away) drop to a soft wash that RECEDES. The eye
   should land on the green windows in under a second instead of triaging a
   wall of equally-loud colour. Floor: muted states stay ≥ ~52% so they still
   out-paint the day-cycle gradient underneath (never_white_daynight_fallback /
   the :where→:is fill-specificity fix). */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="flex"] {
  /* Gentle gold (P3, "unify the flex shades"): flex is the single warm
     "soft-yes" tone, muted so it recedes behind the green answer. `off` no
     longer paints a second warm hue (burnt-orange) — it folds into this gold
     (see the off rule below), so the warm band reads as ONE colour across the
     whole awake-non-working stretch. 78→66% in the 2026-06-10 uniform softening. */
  background: linear-gradient(var(--cell-fill-flex), var(--cell-fill-flex)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
/* Off-hours cost: deeper burnt-orange — a DISTINCT step within the warm cost
   ramp, separated from flex by HUE + VALUE, not just saturation (2026-06-02,
   revised). off (reachable-but-outside-hours) and flex (edge-of-day soft-yes)
   are adjacent cost classes a typical row shows side by side. The original
   pairing made both the same amber at 55% vs 78% — the eye can't resolve a
   pure saturation difference, so "the yellows look near identical." A first
   revision split off to a cool steel-blue (#5b7da6); at 62% over a light base
   that computes to rgb(153,174,200), a desaturated pale blue that reads as
   GREY next to the vivid emerald/amber/red siblings ("availability has grey
   cells again"). This revision keeps off warm — preserving the gold→orange→red
   warm cost ramp — but pushes it to a deeper, redder orange (#ea7a1f) so flex
   (golden #fbbf24) and off separate on the warm axis: gold vs burnt-orange is
   an obvious hue jump, not a saturation guess. #ea7a1f is well clear of the
   neutral --status-empty grey (#94a3b8, "no data") and of red busy (#dc2626)
   — orange sits between gold and red as the warmer-cost middle step. Mixed
   against --cell-base like its siblings so the day-cycle ambient tint can't
   bleed through. Scoped to availability-mode cells only — the shared
   --status-off token and the team-bar bucket tokens are untouched. */
/* `off` folds into flex gold (P2 tone reduction). The availability painter no
   longer emits `off` for any WAKING hour — every awake-non-working hour is now
   `flex` (see availability-mode.js statusForCell + memory
   availability_flex_widened_to_waking). So `off` is effectively dead on cells,
   and the burnt-orange #ea7a1f it used to paint was a SECOND warm tone the eye
   had to separate from flex gold — exactly the "too many colours" load the user
   flagged. Any stray `off` that does appear now paints the SAME gold as flex, so
   the warm "soft cost" band is one colour. (The shared --status-off token and
   the team-bar bucket tokens are untouched — this is cells-only.) */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="off"] {
  background: linear-gradient(var(--cell-fill-flex), var(--cell-fill-flex)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
/* Sleep cost: canonical sleep purple (#7c3aed). Biological constraint —
   highest "soft" cost before busy's hard conflict. Purple distinguishes it
   from the warm cost ramp (amber/orange) so it doesn't read as "just later
   in the evening." Anchors on STATUS_PRESENTATION so sleep is one colour
   in every mode (daynight, status, availability).
   Two tints carry the "3am vs 5am" intuition: edge sleep (default) is the
   78% mix; deep sleep (01:00–03:59 local — SLEEP_HOURS.DEEP_SLEEP_START..
   DEEP_SLEEP_END in js/core/scoring-engine.js, set by availability-mode.js)
   mixes toward black for a darker purple. Same hue, intensity = severity. */
/* Sleep cells paint purple in availability mode only. Fairness mode is
   intentionally excluded: its per-hour cost ramp already prices sleep via
   chronotype + work window, and painting sleep-purple on top of the ramp
   flattens the gradient through the night (see js/ui/fairness-view.js
   applyFairnessToRow + the matching exemption in memory/
   categorical_status_invariant.md). */
body[data-color-mode="availability"] .timeline-cell.timeline-cell[data-availability-status="sleep"] {
  /* Gentle sleep purple toward the opaque surface (background channel). 80→68%
     in the 2026-06-10 uniform softening. */
  background: linear-gradient(var(--cell-fill-sleep), var(--cell-fill-sleep)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
body[data-color-mode="availability"] .timeline-cell.timeline-cell[data-availability-status="sleep"][data-sleep-depth="deep"] {
  /* Deep-sleep = darker toward-black mix PLUS the -45deg diagonal stripe (2026-07-12
     audit M9 + user "wouldn't striped like the cells be better for deep sleep, keep
     consistent"). Was a SOLID darker mix while the team-bar and scope-strip painted
     deep sleep as a -45deg stripe — the three surfaces read the same hue but the
     cell alone lacked the texture. Now all three carry the identical deep-sleep
     stripe. The stripe is a subtle darker-band overlay on top of the darker base so
     "deep = darker AND striped" both cues land; edge/mixed sleep stay solid (lighter). */
  background:
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--status-sleep) 78%, #1a0b3d) 0 4px,
      color-mix(in srgb, var(--status-sleep) 55%, #1a0b3d) 4px 8px),
    linear-gradient(color-mix(in srgb, var(--status-sleep) 78%, #1a0b3d), color-mix(in srgb, var(--status-sleep) 78%, #1a0b3d)),
    var(--cell-daynight), var(--cell-daynight-solid) !important;
}
/* Hard conflict: solid red. Puts "busy" on the same visual axis as the
   other cost classes (one solid colour per class) so the row reads as a
   left-to-right cost gradient rather than "five colours and one pattern."
   Uses the canonical busy red from STATUS_PRESENTATION (#dc2626) at the
   same alpha as adjacent cost classes so event chips on top stay legible.
   The previous hatch worried about clashing with Status mode's red, but
   Status and Availability are mutually-exclusive modes — the user never
   sees both at once, so the disambiguation cost outweighed the benefit. */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="busy"] {
  /* Gentle busy red toward the opaque surface (background channel). 85→74% in
     the 2026-06-10 uniform softening — still the strongest cost class so it
     stays the visual anchor for a hard conflict. */
  background: linear-gradient(var(--cell-fill-busy), var(--cell-fill-busy)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}

/* Away (PTO / leave): NO cost FILL (2026-07-05, user: "isn't away an event type
   rather than shading?"). Away is a leave EVENT, not a reachability-cost band, so
   it no longer paints a fuchsia cell wash competing with the free→conflict cost
   ramp. It stays visible as its own striped event overlay — the `.tz-seg-away`
   per-row strip (violet stripes, comparison-column.js) drawn whenever an away
   event covers the hour — and the `data-categorical-status="away"` hook still
   fires for the avg bar, so bar and cells agree without a duplicate fill.
   AVAILABILITY only: fairness still washes away because in fairness the point IS
   the per-person impact of the hour, and "on leave" is maximal impact — so the
   fairness fill for away is kept below. */
body[data-color-mode="fairness"] .timeline-cell.timeline-cell[data-availability-status="away"] {
  background: repeating-linear-gradient(
    -45deg,
    var(--status-away) 0,
    var(--status-away) 6px,
    #86198f           6px,
    #86198f           10px
  ), var(--cell-daynight), var(--cell-daynight-solid) !important;
}

/* Tentative band: emitted by the painter as a positioned child of the
   cell (see availability-mode.js applyToRow). The cell's underlay paints
   the would-be base status (working green, sleep purple, busy red, etc.)
   so each tentative cell reads "potentially blocking on top of <whatever
   this hour normally is>".

   Distinction from confirmed busy is stripe-vs-solid, NOT hue:
     • solid red    = confirmed blocking event
     • red stripes  = unconfirmed / tentative event (might still block)
   Same red family because both are conflict signals; the stripe pattern
   carries the "not yet confirmed" qualifier. Stripes use transparent
   gaps so the underlying mode colour reads through.

   Override on busy base: white stripes (red-on-red would disappear).
   The white-stripe override is the one place we leave the canonical
   palette, because the stripe is conveying "tentative on top of busy"
   meta-state, not a status hue. */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell .cell-segment-tentative,
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .compact-hour-cell .cell-segment-tentative {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(220, 38, 38, 0.55) 0px,
      rgba(220, 38, 38, 0.55) 5px,
      transparent 5px,
      transparent 10px
    );
}
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell .cell-segment-tentative[data-base-status="busy"],
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .compact-hour-cell .cell-segment-tentative[data-base-status="busy"] {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.65) 0px,
      rgba(255, 255, 255, 0.65) 5px,
      transparent 5px,
      transparent 10px
    );
}
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell .cell-segment-tentative,
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .compact-hour-cell .cell-segment-tentative,
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell .cell-segment-tentative,
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .compact-hour-cell .cell-segment-tentative {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(220, 38, 38, 0.50) 0px,
      rgba(220, 38, 38, 0.50) 5px,
      transparent 5px,
      transparent 10px
    );
}
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell .cell-segment-tentative[data-base-status="busy"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .compact-hour-cell .cell-segment-tentative[data-base-status="busy"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell .cell-segment-tentative[data-base-status="busy"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .compact-hour-cell .cell-segment-tentative[data-base-status="busy"] {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55) 0px,
      rgba(255, 255, 255, 0.55) 5px,
      transparent 5px,
      transparent 10px
    );
}

/* ── Dark-mode adjustments ───────────────────────────────
   Dark-tuned hues, GENTLE (2026-06-05): color-mix toward the opaque dark surface
   (--surface-primary, which darkens in dark mode) at the same alphas as light
   mode, so the muted register holds on a dark card without gradient bleed. Same
   channel + tone-reduction as the light block — available + working = one green,
   flex + off = one gold.
   2026-06-09: repointed off the hardcoded #10b981 (emerald) / #f59e0b (deep amber)
   onto the SAME canonical --status-available (#22c55e) / --status-flex (#fbbf24)
   tokens the light cells, the scope-strip, and the legend all use — the dark cells
   were the lone surface painting a different green/gold, re-creating the "two
   shading norms" divergence inside the scan band (scope-strip #22c55e over a
   #10b981 cell). Alpha lifted 85→90 / 78→82 so saturation survives the dark mix
   without an off-palette hue. */
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="available"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="available"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="working"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="working"] {
  /* CALMER GREEN (dark): now 74%, part of the 2026-06-10 uniform softening
     (green 84→74, flex 82→72, sleep 80→70, busy 85→76). Green stays a clear
     step above the 72% flex so it remains the dominant answer tone — no
     inversion. Pairs with the light-mode green 72→62 change. */
  background: linear-gradient(var(--cell-fill-available), var(--cell-fill-available)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="flex"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="flex"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="off"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="off"] {
  /* 82→72% in the 2026-06-10 uniform softening; stays just below the 74% green. */
  background: linear-gradient(var(--cell-fill-flex), var(--cell-fill-flex)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
/* Dark-mode sleep — availability mode only (fairness exempt; see light-mode
   block above for rationale). */
body.dark-mode[data-color-mode="availability"] .timeline-cell.timeline-cell[data-availability-status="sleep"],
body.dark-mode[data-color-mode="availability"] .timeline-cell.timeline-cell[data-availability-status="sleep"] {
  /* 80→70% in the 2026-06-10 uniform softening. */
  background: linear-gradient(var(--cell-fill-sleep), var(--cell-fill-sleep)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
body.dark-mode[data-color-mode="availability"] .timeline-cell.timeline-cell[data-availability-status="sleep"][data-sleep-depth="deep"],
body.dark-mode[data-color-mode="availability"] .timeline-cell.timeline-cell[data-availability-status="sleep"][data-sleep-depth="deep"] {
  /* 2026-09-02 (colour review): dark mode painted deep sleep FLAT and equal to
     edge sleep, so depth vanished at night. Same darker -45deg hatch as light. */
  background:
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--status-sleep) 78%, #1a0b3d) 0 4px,
      color-mix(in srgb, var(--status-sleep) 55%, #1a0b3d) 4px 8px),
    linear-gradient(color-mix(in srgb, var(--status-sleep) 78%, #1a0b3d), color-mix(in srgb, var(--status-sleep) 78%, #1a0b3d)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="busy"],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="busy"] {
  /* 85→76% in the 2026-06-10 uniform softening; still the strongest cost class. */
  background: linear-gradient(var(--cell-fill-busy), var(--cell-fill-busy)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}

/* ── OWN-EVENT CELL SHADING (2026-06-26 outline request → 2026-07-06 revert) ────
   A busy/away cell that is the VIEWER'S OWN blocker (home row, data-own="1" set in
   availability-mode.js applyToRow). Now paints the SAME solid tint as teammates'
   cells (74% light / 76% dark, matching the base [data-availability-status] rule
   above) with NO ownership box-shadow border. Specificity beats the base fill via
   the extra [data-own="1"] (same !important tier).

   HISTORY — the 2026-06-26 "own events as an OUTLINE not full shading" design
   knocked the FILL to a faint 14%/20% tint + a strong inset status-hue border.
   Two problems, both reported 2026-07-06, both fixed here by reverting to plain
   solid shading + no border:
     1. On small mobile cells the faint fill read as FAILED / empty shading — a
        clearly-busy cell showed near-white with only the red border ("the red
        border still shows"; own All-Hands meetings). Solid fill fixes it.
     2. The inset border ringed the WHOLE cell even when only PART of the hour is
        busy (a sub-hour event like "Design Review 7–7:30a" paints a split
        gradient: red half + flex-yellow half, yet the red frame wrapped the whole
        cell, implying the full hour is busy). Per user ("shading and no border is
        best") the border is DROPPED; the solid fill + the accurate partial
        gradient (availability-mode.js, sub-hour cells) carry the meaning alone. */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="busy"][data-own="1"] {
  background: linear-gradient(var(--cell-fill-busy), var(--cell-fill-busy)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
/* Own-PTO away cell, split by mode (2026-07-16): AVAILABILITY paints deep-orange
   (--cell-fill-away-scan) to match every other away surface + the M8 "away is an
   event, not a fuchsia wash" ruling; FAIRNESS keeps the deliberate fuchsia
   (--cell-fill-away). Previously both shared one :is(availability,fairness) rule
   on the fuchsia token — the lone surviving pink painter in availability mode. */
body[data-color-mode="availability"] .timeline-cell.timeline-cell[data-availability-status="away"][data-own="1"] {
  background: linear-gradient(var(--cell-fill-away-scan), var(--cell-fill-away-scan)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
body[data-color-mode="fairness"] .timeline-cell.timeline-cell[data-availability-status="away"][data-own="1"] {
  background: linear-gradient(var(--cell-fill-away), var(--cell-fill-away)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status="busy"][data-own="1"] {
  background: linear-gradient(var(--cell-fill-busy), var(--cell-fill-busy)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
body.dark-mode[data-color-mode="availability"] .timeline-cell.timeline-cell[data-availability-status="away"][data-own="1"] {
  background: linear-gradient(var(--cell-fill-away-scan), var(--cell-fill-away-scan)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}
body.dark-mode[data-color-mode="fairness"] .timeline-cell.timeline-cell[data-availability-status="away"][data-own="1"] {
  background: linear-gradient(var(--cell-fill-away), var(--cell-fill-away)), var(--cell-daynight), var(--cell-daynight-solid) !important;
}

/* Suppress day-cycle working/sleeping bracket pseudo-element fills so they
   don't paint over the status colour. (Borders stay; only the inset bg.) */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status]::before,
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status]::after {
  background: transparent !important;
}

/* Suppress working-hour + sleeping-hour stripes on INTERIOR cells only.
   This rule originally blanked the whole window because the old design
   striped translucent green/purple across every cell, which blended into
   the opaque fills as cell-edge noise. The brackets are now boundary-only
   (a three-sided [ on .work-start/.sleep-start and ] on .work-end/
   .sleep-end, opaque green-700 / violet-700) — two cells per window, a
   deliberate "this is where work / sleep starts and ends" cue that must
   stay visible in every mode. So only interior cells are stripped (this
   still covers the stacked layout's all-cell top/bottom stripes); the
   boundary cells keep their base brackets from style.css. */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell.working-hour:not(.work-start):not(.work-end),
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell.sleeping-hour:not(.sleep-start):not(.sleep-end) {
  box-shadow: none !important;
}

/* COMPACT GREEN BRACKET LEAK (2026-06-29, user: "the green cell borders bug we
   resolved already comes back when logged in but not [on] my first use").
   The MOBILE compact grid paints green working-hour brackets on .compact-hour-cell
   .work-start/.work-end (style.css ~6607-6622, rgba(34,197,94,0.4)) gated ONLY on
   body[data-layout="compact"] — the availability/fairness mode override above only
   ever matched .timeline-cell, never .compact-hour-cell, so the green brackets were
   never suppressed on the compact board in these modes. On first use the home window
   is the default 9–5 and demo members are uniform/absent, so few boundary cells get
   marked; once LOGGED IN the real per-member working hours (incl. v2 per-day
   schedules) load and re-mark boundary cells across rows → the green [ ] brackets
   reappear — exactly the "returns when logged in" report. The accepted remedy for the
   same leak in OVERLAP mode (commit 3283970b, overlap-mode.css compact overrides) was
   to suppress the compact green entirely in the scan mode, since on ~13px compact
   cells the coloured arms read as stray borders, not a meaningful start/end cue (the
   real working window is already carried by the fill ramp). Mirror that here for
   availability + fairness. Doubled .compact-hour-cell.compact-hour-cell raises
   specificity to beat the no-important base at style.css:6607-6622; :not(.current-hour)
   mirrors the base so the live-now highlight is never touched. */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .compact-hour-cell.compact-hour-cell.working-hour.work-start:not(.current-hour),
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .compact-hour-cell.compact-hour-cell.working-hour.work-end:not(.current-hour),
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .compact-hour-cell.compact-hour-cell.working-hour.work-start.work-end:not(.current-hour) {
  box-shadow: none !important;
}

/* ── Hour separators ──────────────────────────────────────────────────
 * Cells should keep clear per-hour separators uniformly across the
 * timeline (matching daynight mode's behaviour). The default 1px #e5e7eb
 * border-right disappears against saturated availability backgrounds,
 * so we strengthen it to a darker translucent line that reads at every
 * cost-class fill — applied EVERYWHERE in availability mode (inside and
 * outside the scanner scope alike). The scanner does not modify cell
 * separation; the standard border carries through unchanged.
 *
 * 2026-06-13 (divider legibility): 0.18 still washed out against the deepest
 * fills (busy red, sleep indigo) — cells read as missing their divider. Bumped
 * to 0.42 (light) / 0.38 (dark) so the hairline reads on every tier. Matched in
 * fairness-view.css and overlap-mode.css. */
body:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status] {
  border-right: 1px solid rgba(15, 23, 42, 0.42) !important;
}

/* Dark-mode variant. */
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status],
body.dark-mode:is([data-color-mode="availability"],[data-color-mode="fairness"]) .timeline-cell.timeline-cell[data-availability-status] {
  border-right: 1px solid rgba(255, 255, 255, 0.38) !important;
}