/* Overlap mode — STRICT RED→AMBER→GREEN traffic-light wash (OPAQUE) +
   bottom-anchored fill bar + X/Y headcount text + reason marker.

   ONE signal per cell (breadth), on a strict traffic-light scale:
     • data-overlap-bucket (none|low|med|high|all) — the overlap % at this hour
       (how much of the team shares working hours). The colour TRACKS THE COUNT:
       low overlap reads RED, the ~50% midpoint AMBER, and a clear majority is
       needed before GREEN (deep green only near-everyone). Thresholds 40/60/85
       (breadthToBucket). Red = few free, green = good overlap.

   The wash is the at-a-glance regime; the bottom fill bar carries within-band
   intensity (height = here/of); the centered text gives the literal here/of.

   2026-06-17 redesign (user, several turns: overlap "should use traffic-light
   colours" + "attractive + clear" + "should not show the day/night behind" +
   "colour should reflect the number — red for low, green for good overlap" +
   "low amounts shouldn't read green"). Two coupled changes:
     • STRICT RED→AMBER→GREEN, COLOUR TRACKS COUNT — low reads red (an earlier
       "green-forward" pass that made low amber was rejected), paired with
       stricter 40/60/85 thresholds so 50% reads amber not green. Tints softened
       so it's attractive, not a harsh warning board.
     • OPAQUE WASH — the --overlap-cell-* tokens mix against an OPAQUE surface
       (--overlap-surface), and the cell rule below drops the --cell-daynight
       gradient layer, so the day/night colours no longer composite into the
       cell. --cell-daynight-solid stays UNDER the wash purely as a render-
       failure fallback. See the token block header in view-mode-strip.css for
       the full rationale, per-band alphas, and the canonical derivation.
     (Superseded same-day experiment: a single-hue indigo sequential ramp —
     reverted because the user wanted traffic-light hues.)

   2026-06-13 (superseded) redesign (user): the prior 4-bucket grey→gold→green→green
   ramp had no red, so a low count painted a saturated gold, and a separate
   purple/red/fuchsia categorical WASH (sleep/busy/away) competed with the
   headcount colour. That pass moved the sleep/busy/away REASON to a thin corner
   marker (data-overlap-marker) that doesn't repaint the cell — still true.

   The double-booking DEPTH axis (red diagonal hatch + "!" glyph) was removed
   2026-06-03 (user request). data-overlap-depth is still stamped by the
   painter for the hover tooltip, but nothing paints it visually. */

body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket] {
  /* 2026-06-17: overlap cells must NOT show the day/night gradient behind the
     wash (user: "lots of interference from the day and night colours behind").
     The bucket rules below paint an OPAQUE traffic-light wash over this base,
     so for every MATCHED bucket value (none/low/med/high/all) the day/night
     gradient still never bleeds through.

     2026-08-05 (user screenshot: "white shading on cells where scanner was"):
     the old base here was `background-image: none` + a bare
     --cell-daynight-solid colour, which resolves to #ffffff wherever the
     per-hour solid token isn't set — so any cell whose bucket attribute was
     stamped but never refined (painter threw, row repainted on the other
     mobile surface, or the attribute simply outlived the paint pass) rendered
     SOLID WHITE. That violates the never-white invariant every other mode
     honours (see availability-mode.css). Keep the day/night gradient as the
     unmatched-value fallback: matched buckets override this entire shorthand
     with their opaque wash below, so the 2026-06-17 "no interference" decision
     is untouched — only broken/stale cells change, from white to day/night. */
  background: var(--cell-daynight, none), var(--cell-daynight-solid, var(--surface-primary, #fff)) !important;
}

/* Hour-axis digits (the cell's own text content — "12am", "1pm", etc.) sit
   directly on the bucket wash. They need to override several global rules:
     • style.css line 7013: `body.day-cycle-enabled .timeline-cell { color:
       #ffffff !important; }` — white text-on-cell for day-cycle palette.
     • style.css line 6112: `.compact-hour-cell.current-hour { color: white
       !important; }` — current-hour cell forces white.
     • style.css line 7014: `text-shadow: 0 1px 2px rgba(0,0,0,0.4);` — dark
       drop shadow that fights a white halo if not overridden.
   Specificity: `body[data-color-mode="overlap"].day-cycle-enabled` matches
   both flags, then `.timeline-cell.timeline-cell` (doubled selector) lifts
   us above the single-class day-cycle rule. !important on color/text-shadow
   to beat the !important in the day-cycle rule.

   The .ovl-count overlay (z-index 2) covers the centre, so we push the
   cell's own text downward to the bottom edge — that way the X/Y and the
   hour label don't pile on top of each other. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket],
body[data-color-mode="overlap"].day-cycle-enabled .timeline-cell.timeline-cell[data-overlap-bucket],
body[data-color-mode="overlap"] .timeline-cell.timeline-cell.current-hour[data-overlap-bucket],
body[data-color-mode="overlap"].day-cycle-enabled .timeline-cell.timeline-cell.current-hour[data-overlap-bucket] {
  align-items: flex-end !important;
  padding-bottom: 1px;
  color: #000 !important;
  font-weight: 600 !important;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 3px rgba(255, 255, 255, 0.7) !important;
}
/* Dark mode: cells deepen over slate, so the hour-axis digit flips to white
   with a dark halo (light mode keeps black-on-pastel above). 2026-06-17. */
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket],
body.dark-mode[data-color-mode="overlap"].day-cycle-enabled .timeline-cell.timeline-cell[data-overlap-bucket],
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell.current-hour[data-overlap-bucket],
body.dark-mode[data-color-mode="overlap"].day-cycle-enabled .timeline-cell.timeline-cell.current-hour[data-overlap-bucket] {
  color: #fff !important;
  text-shadow:
    0 0 2px rgba(15, 23, 42, 0.9),
    0 0 3px rgba(15, 23, 42, 0.65) !important;
}

/* Bucket washes — OPAQUE traffic-light tints (2026-06-17). The --overlap-cell-*
   tokens (view-mode-strip.css :root) mix the canonical red/amber/green hues
   against an OPAQUE --overlap-surface, so each wash is a solid colour. We paint
   it as the only visible layer and put --cell-daynight-solid UNDERNEATH purely
   as a render-failure fallback — the day/night gradient (--cell-daynight) is no
   longer composited in, so it can't bleed through and muddy the cell. The
   team-bar consumes the transparent-mix --overlap-* tokens over its own opaque
   segment base; cells and bar share the SAME hues. Don't reintroduce literals.
   Direction: low overlap = red, some = amber, most/all = green; light→saturated
   tints (not heavy). Within-band intensity is carried by the .ovl-bar height. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="none"] { background: linear-gradient(var(--overlap-cell-none), var(--overlap-cell-none)), var(--cell-daynight-solid, var(--surface-primary, #fff)) !important; }
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="low"]  { background: linear-gradient(var(--overlap-cell-low), var(--overlap-cell-low)), var(--cell-daynight-solid, var(--surface-primary, #fff)) !important; }
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="med"]  { background: linear-gradient(var(--overlap-cell-med), var(--overlap-cell-med)), var(--cell-daynight-solid, var(--surface-primary, #fff)) !important; }
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="high"] { background: linear-gradient(var(--overlap-cell-high), var(--overlap-cell-high)), var(--cell-daynight-solid, var(--surface-primary, #fff)) !important; }
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="all"]  {
  background: linear-gradient(var(--overlap-cell-all), var(--overlap-cell-all)), var(--cell-daynight-solid, var(--surface-primary, #fff)) !important;
  /* 2026-06-29 (user: "green borders were showing on my beta — not working hours"):
     the all-bucket cell used to add `box-shadow: inset 0 0 0 1px var(--overlap-all-border)`
     where --overlap-all-border resolves to --status-working (the canonical GREEN). That 1px
     green frame was keyed ONLY on data-overlap-bucket="all" (>=80% of the team overlaps),
     NOT on the viewer's own work window — so it drew a green border around EVERY max-overlap
     cell, including the viewer's own off/sleep hours, reading as a green "working" mark on
     non-working cells. The green bucket FILL already shows max overlap, so the border was
     redundant on top of it. Removed — the work window is marked by the (slate) work brackets
     only, never by a headcount-band border. */
}

/* Engine-reconciled cells: high headcount but the canonical scorer rates the
   hour poorly, so the band was demoted to agree with the Team Window. The band
   colour already moved (via data-overlap-bucket); this thin dashed bottom edge
   is a quiet "scored down, not just fewer people" cue that pairs with the
   tooltip. Subtle on purpose — the % fill stays the headline signal. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-engine-demoted="true"] {
  border-bottom: 1.5px dashed rgba(100, 116, 139, 0.55) !important;
}

/* Per-hour separators — same translucent hairline availability/fairness use,
   so overlap reads with the same per-hour rhythm regardless of bucket fill.
   2026-06-13: bumped 0.18 → 0.42 (light) / 0.38 (dark) so the line reads on the
   deeper bucket fills too (it was vanishing on the saturated tiers). Matched in
   availability-mode.css and fairness-view.css. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket] {
  border-right: 1px solid rgba(15, 23, 42, 0.42) !important;
}
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket],
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket] {
  border-right: 1px solid rgba(255, 255, 255, 0.38) !important;
}

/* Suppress day-cycle pseudo-element fills. Both ::before and ::after are held
   transparent — the depth hatch + "!" glyph that used to repurpose them were
   removed (see the depth-signal-removed note below), so nothing paints here. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket]::before,
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket]::after {
  background: transparent !important;
}

/* ── Fill bar (bottom-anchored thermometer) ─────────────────────────────
   Quantitative encoding without text. Height is driven by --ovl-ratio
   set by the painter (= here / of). Color matches the bucket's saturated
   tone so the bar reinforces the wash. Lower opacity so it reads as
   background and the X/Y digits punch through. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell .ovl-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--ovl-ratio, 0) * 100%);
  pointer-events: none;
  z-index: 1;
  transition: height 0.15s ease;
  opacity: 0.4;
}
/* Fill-bar hue per band — a deeper tone of THAT band's own traffic-light hue,
   so the bar reads as "more intensity within this band" (its height = here/of)
   without introducing a foreign colour. At opacity 0.4 it darkens the wash from
   the bottom up. `none` is 0% so it has no bar. 2026-06-17: strict red→amber→
   green (busy→busy→flex→available→working). */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="none"] .ovl-bar { background: transparent; }
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="low"]  .ovl-bar { background: var(--shading-busy, #dc2626); }
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="med"]  .ovl-bar { background: var(--status-flex); }
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="high"] .ovl-bar { background: var(--status-available); }
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="all"]  .ovl-bar { background: var(--status-working); }

/* ── (removed 2026-06-13) categorical fill-bar neutralization ──────────────
   The old rule frosted the .ovl-bar white whenever a cell carried
   data-categorical-status (the purple sleep / red busy / fuchsia away WASH).
   That wash is gone in overlap mode — cells now colour purely by overlap %,
   and the sleep/busy/away reason is a thin corner marker (see the
   [data-overlap-marker] block below) that does NOT repaint the cell or the
   bar. So there's no categorical fill to neutralize, and the painter no
   longer stamps data-categorical-status on overlap cells. The bar simply
   shows its band hue at every band. */

/* ── Headcount text (X/Y) ──────────────────────────────────────────────
   Centered, monospace tabular-nums so digits don't shift width. Hidden by
   default; revealed only on cells wide enough to read it cleanly. We use
   container queries when available with a min-width-class fallback in JS;
   here the simple approach is to hide below a viewport-zoom threshold via
   :where for low specificity and let the cell width handle the rest. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell .ovl-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #0f172a;
  font-weight: 600;
  pointer-events: none;
  z-index: 2;
  letter-spacing: -0.02em;
  /* White halo so the digits punch through the fill-bar wash and any
     scanner-scope shading regardless of which bucket they sit on. */
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 3px rgba(255, 255, 255, 0.75);
}
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="none"] .ovl-count { color: var(--overlap-none-text); font-weight: 700; }
/* `all` is the deep emerald band (84% working-green) — near-black digits read
   poorly on it, so flip the count to white with a dark halo (inverse of the
   default light-cell treatment). 2026-06-17. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="all"]  .ovl-count {
  color: #fff;
  font-weight: 700;
  text-shadow:
    0 0 2px rgba(15, 23, 42, 0.85),
    0 0 3px rgba(15, 23, 42, 0.6);
}

/* Dark mode — every overlap cell deepens over the dark slate (see the
   body.dark-mode token block in view-mode-strip.css), so the default dark
   #0f172a digits + the dark-red `none` digits read poorly. Flip ALL bands'
   counts to white with a dark halo so they punch through every dark-mode band.
   2026-06-17. */
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket] .ovl-count,
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket="none"] .ovl-count {
  color: #fff;
  text-shadow:
    0 0 2px rgba(15, 23, 42, 0.9),
    0 0 3px rgba(15, 23, 42, 0.65);
}

/* Fit the X/Y count to the CELL width — SHRINK, then HIDE (2026-07-06, user:
   "overlap mode and perhaps others the cell labels are too wide for the small
   cells"). The count is `here/of` (e.g. "5/8" — up to 5 glyphs), and at the
   default 10px it overflowed narrow cells. Now that the cell is an inline-size
   container (container-type on .timeline-cell / .compact-hour-cell, style.css),
   these @container queries finally resolve against the CELL width:
     • ≤ 44px — shrink to 9px so a 2-digit/2-digit count still fits
     • ≤ 34px — shrink to 8px (letter-spacing tightened) for the tightest legible size
     • ≤ 26px — HIDE: below this even 8px "10/12" can't fit; the bucket colour +
                fill-bar height still carry the overlap signal, so the number
                drops rather than spilling past the cell edge.
   The painter still writes data-overlap-here/of regardless — CSS only governs the
   visual. (Previously a single max-width:36px hide rule that never fired because
   no ancestor was a container.) */
@container (max-width: 44px) {
  body[data-color-mode="overlap"] .timeline-cell.timeline-cell .ovl-count,
  body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell .ovl-count {
    font-size: 9px;
  }
}
@container (max-width: 34px) {
  body[data-color-mode="overlap"] .timeline-cell.timeline-cell .ovl-count,
  body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell .ovl-count {
    font-size: 8px;
    letter-spacing: -0.04em;
  }
}
@container (max-width: 26px) {
  body[data-color-mode="overlap"] .timeline-cell.timeline-cell .ovl-count,
  body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell .ovl-count {
    display: none;
  }
}

/* Hour-axis digit ("12am", "1pm") — the cell's own text, set with
   `white-space:nowrap; overflow:visible` so labels can OVERHANG (intentional on
   wide cells). But in overlap mode the digit sits ON the bucket wash, so on a
   narrow cell the overhang spills onto the neighbour's wash and reads as garbled.
   Clip it to the cell below the same widths the count shrinks at, so the label
   stays inside its own coloured cell. */
@container (max-width: 34px) {
  body[data-color-mode="overlap"] .timeline-cell.timeline-cell[data-overlap-bucket] {
    overflow: hidden !important;
    text-overflow: clip;
  }
}

/* ── Depth signal removed 2026-06-03 (user request) ────────────────────
   The double-booking depth axis (red diagonal hatch for data-overlap-depth
   2|3, plus the "!" glyph on saturated triple-booked cells) is gone from
   overlap cells. It was a SECOND, unrelated question ("is anyone stacked-
   booked?") layered on top of the headcount wash — the source of "overlap
   makes no sense / has stripes." Overlap cells now carry ONLY the breadth
   signal (bucket wash + fill-bar + X/Y count). The painter still stamps
   data-overlap-depth for the hover tooltip; nothing paints it visually.
   (The ::after is held transparent by the day-cycle suppression rule above,
   so removing these rules leaves no orphaned overlay.) */

/* ── Reason-for-low-overlap MARKER — REMOVED 2026-07-12 ────────────────────
   User: "thicker brackets for overlap, remove the corner indicators." The tiny
   triangular corner notch (data-overlap-marker sleep/busy/away, painted here via
   ::before) was a per-row REASON cue — "this slot is low-overlap because THIS
   member is asleep/busy". It's now redundant: the (thicker, 2026-07-12) purple
   sleep bracket + green work bracket already frame each member's own sleep/work
   window, and the notch competed with them (same violet, same cell corner) —
   reading as visual noise, not signal. So the ::before paint is DROPPED entirely.
   The day-cycle suppression rule above (…[data-overlap-bucket]::before { background:
   transparent }) already holds ::before inert, so removing these re-enable rules
   leaves the notch unpainted. The painter still stamps data-overlap-marker on the
   cell (the hover tooltip reads it, ensureOverlapChildren) — only the visual notch
   is gone. To restore: re-add a `[data-overlap-marker]::before` paint rule here. */

/* ── Working / sleep brackets ────────────────────────────────────────────
   In overlap mode the cell fill is column-aggregate (reachability across
   the whole team) — it does NOT tell you whether THIS member is in their
   working window. So the per-row brackets stay informative; but the
   default bracket green (rgba(34,197,94,0.55)) and bracket purple
   (rgba(124,58,237,0.55)) blend into the green-spectrum bucket washes
   high/all bucket washes. Re-tone them to a neutral dark slate so they
   read against any band hue (red, yellow, or green).

   2026-06-25 (user: "the green border should be like the other modes,
   bracket only on the start and end cell"): the working-window must read as
   a BRACKET — arms on work-start / work-end ONLY, interior cells bare — not
   a continuous top/bottom rail down every working hour. The prior overlap
   rule (and, on mobile, the compact green rule at style.css:6513) painted a
   slate/green edge on EVERY .working-hour cell, so the window looked like a
   solid box rather than a `[ … ]` frame. Interior working cells now carry
   NO box-shadow; only the boundary cells paint arms. Mirrored for the mobile
   .compact-hour-cell layout below — the desktop slate override never matched
   the compact cells, so on mobile the green compact bracket bled through.

   Specificity (0,3,2) beats the base rules (0,1,1) via the doubled
   .timeline-cell.timeline-cell trick — must beat !important from the
   base rules at style.css:5390. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell.working-hour {
  box-shadow: none !important;
}
body[data-color-mode="overlap"] .timeline-cell.timeline-cell.working-hour.work-start {
  box-shadow:
    inset 4px 0 0 0 rgba(34, 197, 94, 0.7),
    inset 0 4px 0 0 rgba(34, 197, 94, 0.7),
    inset 0 -4px 0 0 rgba(34, 197, 94, 0.7) !important;
}
body[data-color-mode="overlap"] .timeline-cell.timeline-cell.working-hour.work-end {
  box-shadow:
    inset -4px 0 0 0 rgba(34, 197, 94, 0.7),
    inset 0 4px 0 0 rgba(34, 197, 94, 0.7),
    inset 0 -4px 0 0 rgba(34, 197, 94, 0.7) !important;
}
body[data-color-mode="overlap"] .timeline-cell.timeline-cell.working-hour.work-start.work-end {
  box-shadow: inset 0 0 0 4px rgba(34, 197, 94, 0.7) !important;
}
/* Sleeping-hour brackets: PURPLE arms on the boundary cells (2026-07-11, user:
   "green working and purple sleeping"). Mirrors the working-bracket structure —
   arms on sleep-start / sleep-end ONLY, interior cells bare — so the sleep
   window reads as a `[ … ]` frame, not a full-column stripe. The thin corner
   marker (data-overlap-marker) still carries the sleep/busy/away REASON; this
   bracket marks the member's own sleep WINDOW. The box-shadow transition is
   killed below so the purple can't interpolate through the default green. */
body[data-color-mode="overlap"] .timeline-cell.timeline-cell.sleeping-hour {
  box-shadow: none !important;
}
body[data-color-mode="overlap"] .timeline-cell.timeline-cell.sleeping-hour.sleep-start {
  box-shadow:
    inset 4px 0 0 0 rgba(124, 58, 237, 0.7),
    inset 0 4px 0 0 rgba(124, 58, 237, 0.7),
    inset 0 -4px 0 0 rgba(124, 58, 237, 0.7) !important;
}
body[data-color-mode="overlap"] .timeline-cell.timeline-cell.sleeping-hour.sleep-end {
  box-shadow:
    inset -4px 0 0 0 rgba(124, 58, 237, 0.7),
    inset 0 4px 0 0 rgba(124, 58, 237, 0.7),
    inset 0 -4px 0 0 rgba(124, 58, 237, 0.7) !important;
}
body[data-color-mode="overlap"] .timeline-cell.timeline-cell.sleeping-hour.sleep-start.sleep-end {
  box-shadow: inset 0 0 0 4px rgba(124, 58, 237, 0.7) !important;
}

/* Mobile compact layout (.compact-hour-cell). The desktop .timeline-cell
   override above never matched these cells, so the compact green bracket
   (style.css:6513, rgba(34,197,94,0.4)) bled through in overlap mode — the
   "green border around the cells" report. Mirror the slate bracket-only
   treatment here: interior cells bare, arms on the boundary cells only.
   :not(.current-hour) matches the compact base rule it's overriding. */
body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.working-hour:not(.current-hour) {
  box-shadow: none !important;
}
body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.working-hour.work-start:not(.current-hour) {
  box-shadow:
    inset 4px 0 0 0 rgba(34, 197, 94, 0.7),
    inset 0 4px 0 0 rgba(34, 197, 94, 0.7),
    inset 0 -4px 0 0 rgba(34, 197, 94, 0.7) !important;
}
body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.working-hour.work-end:not(.current-hour) {
  box-shadow:
    inset -4px 0 0 0 rgba(34, 197, 94, 0.7),
    inset 0 4px 0 0 rgba(34, 197, 94, 0.7),
    inset 0 -4px 0 0 rgba(34, 197, 94, 0.7) !important;
}
body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.working-hour.work-start.work-end:not(.current-hour) {
  box-shadow: inset 0 0 0 4px rgba(34, 197, 94, 0.7) !important;
}
/* Compact (mobile) PURPLE sleep brackets — mirror the desktop sleep arms. */
body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.sleeping-hour:not(.current-hour) {
  box-shadow: none !important;
}
body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.sleeping-hour.sleep-start:not(.current-hour) {
  box-shadow:
    inset 4px 0 0 0 rgba(124, 58, 237, 0.7),
    inset 0 4px 0 0 rgba(124, 58, 237, 0.7),
    inset 0 -4px 0 0 rgba(124, 58, 237, 0.7) !important;
}
body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.sleeping-hour.sleep-end:not(.current-hour) {
  box-shadow:
    inset -4px 0 0 0 rgba(124, 58, 237, 0.7),
    inset 0 4px 0 0 rgba(124, 58, 237, 0.7),
    inset 0 -4px 0 0 rgba(124, 58, 237, 0.7) !important;
}
body[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.sleeping-hour.sleep-start.sleep-end:not(.current-hour) {
  box-shadow: inset 0 0 0 4px rgba(124, 58, 237, 0.7) !important;
}

/* Dark-mode variant — flip slate to light so brackets remain visible
   against dark cell fills. Interior cells stay bare (bracket-only). */
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell.working-hour {
  box-shadow: none !important;
}
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell.working-hour.work-start {
  box-shadow:
    inset 4px 0 0 0 rgba(74, 222, 128, 0.85),
    inset 0 4px 0 0 rgba(74, 222, 128, 0.85),
    inset 0 -4px 0 0 rgba(74, 222, 128, 0.85) !important;
}
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell.working-hour.work-end {
  box-shadow:
    inset -4px 0 0 0 rgba(74, 222, 128, 0.85),
    inset 0 4px 0 0 rgba(74, 222, 128, 0.85),
    inset 0 -4px 0 0 rgba(74, 222, 128, 0.85) !important;
}
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell.working-hour.work-start.work-end {
  box-shadow: inset 0 0 0 4px rgba(74, 222, 128, 0.85) !important;
}
/* Dark-mode PURPLE sleep brackets — brighter violet for dark cell fills. */
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell.sleeping-hour {
  box-shadow: none !important;
}
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell.sleeping-hour.sleep-start {
  box-shadow:
    inset 4px 0 0 0 rgba(167, 139, 250, 0.85),
    inset 0 4px 0 0 rgba(167, 139, 250, 0.85),
    inset 0 -4px 0 0 rgba(167, 139, 250, 0.85) !important;
}
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell.sleeping-hour.sleep-end {
  box-shadow:
    inset -4px 0 0 0 rgba(167, 139, 250, 0.85),
    inset 0 4px 0 0 rgba(167, 139, 250, 0.85),
    inset 0 -4px 0 0 rgba(167, 139, 250, 0.85) !important;
}
body.dark-mode[data-color-mode="overlap"] .timeline-cell.timeline-cell.sleeping-hour.sleep-start.sleep-end {
  box-shadow: inset 0 0 0 4px rgba(167, 139, 250, 0.85) !important;
}
/* Dark-mode compact (mobile) — same light slate arms, boundary cells only. */
body.dark-mode[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.working-hour:not(.current-hour) {
  box-shadow: none !important;
}
body.dark-mode[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.working-hour.work-start:not(.current-hour) {
  box-shadow:
    inset 4px 0 0 0 rgba(74, 222, 128, 0.85),
    inset 0 4px 0 0 rgba(74, 222, 128, 0.85),
    inset 0 -4px 0 0 rgba(74, 222, 128, 0.85) !important;
}
body.dark-mode[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.working-hour.work-end:not(.current-hour) {
  box-shadow:
    inset -4px 0 0 0 rgba(74, 222, 128, 0.85),
    inset 0 4px 0 0 rgba(74, 222, 128, 0.85),
    inset 0 -4px 0 0 rgba(74, 222, 128, 0.85) !important;
}
body.dark-mode[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.working-hour.work-start.work-end:not(.current-hour) {
  box-shadow: inset 0 0 0 4px rgba(74, 222, 128, 0.85) !important;
}
/* Dark compact (mobile) PURPLE sleep brackets. */
body.dark-mode[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.sleeping-hour:not(.current-hour) {
  box-shadow: none !important;
}
body.dark-mode[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.sleeping-hour.sleep-start:not(.current-hour) {
  box-shadow:
    inset 4px 0 0 0 rgba(167, 139, 250, 0.85),
    inset 0 4px 0 0 rgba(167, 139, 250, 0.85),
    inset 0 -4px 0 0 rgba(167, 139, 250, 0.85) !important;
}
body.dark-mode[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.sleeping-hour.sleep-end:not(.current-hour) {
  box-shadow:
    inset -4px 0 0 0 rgba(167, 139, 250, 0.85),
    inset 0 4px 0 0 rgba(167, 139, 250, 0.85),
    inset 0 -4px 0 0 rgba(167, 139, 250, 0.85) !important;
}
body.dark-mode[data-color-mode="overlap"] .compact-hour-cell.compact-hour-cell.sleeping-hour.sleep-start.sleep-end:not(.current-hour) {
  box-shadow: inset 0 0 0 4px rgba(167, 139, 250, 0.85) !important;
}

/* ── Kill the box-shadow transition on cells so the slate bracket never
      interpolates THROUGH green (2026-07-11) ──────────────────────────────
   User (2026-07-11): "logged in overlap mode had the green border around cells
   we removed previously again." The settled overlap bracket IS slate — the
   rules above win the cascade (verified live on beta). The green is a TRANSITION
   ARTIFACT: .timeline-cell.clickable-cell (style.css ~11064) transitions
   `box-shadow 0.15s`, and the cell's DEFAULT bracket colour is the (deliberately
   green) --work-bracket. Every time a cell repaints in overlap mode — entering
   the mode, and the frequent per-row re-renders mobile does (auto-pan, resize,
   scanner refresh, quota/team re-render churn) — the box-shadow ANIMATES from
   green → slate over 150ms, flashing a green frame. On mobile the re-render
   churn makes that flash near-constant, so it reads as "the green border is
   back" even though no static rule paints green. Suppressing the box-shadow
   transition on these cells in overlap mode makes the slate bracket paint
   instantly with no green interpolation. Scoped to overlap + the work/sleep
   boundary cells so the click/hover box-shadow feedback in other modes (and on
   non-bracket cells) is untouched. Covers desktop .timeline-cell + mobile
   .compact-hour-cell, light + dark. */
body[data-color-mode="overlap"] .timeline-cell.working-hour,
body[data-color-mode="overlap"] .timeline-cell.sleeping-hour,
body[data-color-mode="overlap"] .compact-hour-cell.working-hour,
body[data-color-mode="overlap"] .compact-hour-cell.sleeping-hour {
  transition-property: transform, filter !important;   /* drop box-shadow from the transition list */
}

/* ── Kill the box-shadow transition on cells so the slate bracket never
      interpolates THROUGH green (2026-07-11) ──────────────────────────────
   User (2026-07-11): "logged in overlap mode had the green border around cells
   we removed previously again." The settled overlap bracket IS slate — the
   rules above win the cascade (verified live on beta). The green is a TRANSITION
   ARTIFACT: .timeline-cell.clickable-cell (style.css ~11064) transitions
   `box-shadow 0.15s`, and the cell's DEFAULT bracket colour is the (deliberately
   green) --work-bracket. Every time a cell repaints in overlap mode — entering
   the mode, and the frequent per-row re-renders mobile does (auto-pan, resize,
   scanner refresh, quota/team re-render churn) — the box-shadow ANIMATES from
   green → slate over 150ms, flashing a green frame. On mobile the re-render
   churn makes that flash near-constant, so it reads as "the green border is
   back" even though no static rule paints green. Suppressing the box-shadow
   transition on these cells in overlap mode makes the slate bracket paint
   instantly with no green interpolation. Scoped to overlap + the work/sleep
   boundary cells so the click/hover box-shadow feedback in other modes (and on
   non-bracket cells) is untouched. Covers desktop .timeline-cell + mobile
   .compact-hour-cell, light + dark. */
body[data-color-mode="overlap"] .timeline-cell.working-hour,
body[data-color-mode="overlap"] .timeline-cell.sleeping-hour,
body[data-color-mode="overlap"] .compact-hour-cell.working-hour,
body[data-color-mode="overlap"] .compact-hour-cell.sleeping-hour {
  transition-property: transform, filter !important;   /* drop box-shadow from the transition list */
}