/**
 * Best Time Indicator Styles — Team Window markers
 * ============================================
 * Three painted classes ride on the timeline cells:
 *   .golden-hour-start  — filled ★ at window start (left edge of cell)
 *   .golden-hour-end    — filled ◆ at window end (fractional position)
 *   .golden-hour-mid    — thin connector line under every cell between
 *
 * The star "opens" the window and the diamond "closes" it — pair reads
 * as a single arc with a clear terminator at each end.
 *
 * Two colour roles:
 *   - Start ★ and column-rollup row ★ are always gold (--status-flex
 *     hue). They are brand anchors that say "the team window opens here"
 *     — the eye finds the window's start in the same colour every time.
 *   - End ◆ is fairness-coded using a traffic-light palette derived
 *     from the canonical --status-* tokens:
 *       excellent + good → green  (--status-available)
 *       fair             → amber  (--status-flex)
 *       limited          → red    (--status-busy)
 *     Placing the verdict at the terminator mirrors how a stopwatch
 *     reads — the result lands when the timer stops.
 *
 * The connector line under the cells reinforces the verdict colour via
 * --team-window-color-soft.
 *
 * All three carry `data-team-window-quality` — `excellent` / `good` /
 * `fair` / `limited`. Colour resolves from a quality token so the
 * markers visually link to the Best Time pill (same colour = same
 * concept). Match the status-pill colour ramp:
 *
 *   excellent / good → teal-green
 *   fair             → neutral amber
 *   limited          → warning amber
 *
 * Specificity: shading rules in other modes (availability heatmap,
 * fairness shading) live on the same ::before / ::after pseudos with
 * specificity (0,3,1). We lift these to (0,3,2) with a `body` prefix
 * so the marker glyphs win across all view modes.
 */

/* ============================================
   QUALITY TOKEN — single source of marker colour
   ============================================ */

/* Traffic-light palette for team-fairness average — derived from the
   canonical --status-* tokens (defined in view-mode-strip.css / style.css,
   mirroring STATUS_PRESENTATION in js/shared/event-status-utils.js) so the
   markers share the canonical green / amber / red vocabulary used
   everywhere else in the app:
     excellent + good  → green  --status-available
     fair              → amber  --status-flex
     limited           → red    --status-busy
   2026-06-01: switched from hard-coded status hexes to the tokens so this
   file no longer drifts from the canonical palette (palette-ratchet
   guard). The "-soft" connector tint is rebuilt with
   color-mix off the same token instead of a parallel rgba() literal.
   Collapsing 4 quality tiers into 3 traffic-light hues keeps the
   verdict legible at glyph scale (10–11 px) and matches the legend
   semantics: green = go, amber = caution, red = stop. */
.timeline-cell.golden-hour,
.compact-hour-cell.golden-hour {
  /* Default — overridden per-quality below. */
  --team-window-color: var(--status-available);       /* green — default to "go" */
  --team-window-color-soft: color-mix(in srgb, var(--status-available) 50%, transparent);
}

.timeline-cell.golden-hour[data-team-window-quality="excellent"],
.compact-hour-cell.golden-hour[data-team-window-quality="excellent"] {
  --team-window-color: var(--status-available);       /* green */
  --team-window-color-soft: color-mix(in srgb, var(--status-available) 55%, transparent);
}
.timeline-cell.golden-hour[data-team-window-quality="good"],
.compact-hour-cell.golden-hour[data-team-window-quality="good"] {
  --team-window-color: var(--status-available);       /* green — collapses with excellent */
  --team-window-color-soft: color-mix(in srgb, var(--status-available) 50%, transparent);
}
.timeline-cell.golden-hour[data-team-window-quality="fair"],
.compact-hour-cell.golden-hour[data-team-window-quality="fair"] {
  --team-window-color: var(--status-flex);       /* amber */
  --team-window-color-soft: color-mix(in srgb, var(--status-flex) 50%, transparent);
}
.timeline-cell.golden-hour[data-team-window-quality="limited"],
.compact-hour-cell.golden-hour[data-team-window-quality="limited"] {
  --team-window-color: var(--shading-busy, #dc2626);       /* red */
  --team-window-color-soft: color-mix(in srgb, var(--shading-busy, #dc2626) 50%, transparent);
}
/* COMPROMISE — best-available when NO slot clears the quality floor (team
   spans >~12h). Amber, like 'fair', but the glyphs are swapped to HOLLOW
   ◇~~~◇ below so it never reads as a clean recommendation. Amber + hollow
   shape = redundant coding (colour AND form) so colour-blind users still
   distinguish it from the solid green/teal real window. */
.timeline-cell.golden-hour[data-team-window-quality="compromise"],
.compact-hour-cell.golden-hour[data-team-window-quality="compromise"] {
  --team-window-color: var(--status-flex);       /* amber */
  --team-window-color-soft: color-mix(in srgb, var(--status-flex) 45%, transparent);
}

/* ============================================
   GLYPH OVERFLOW — pseudo-elements need room above the cell
   ============================================ */

.timeline-cell.golden-hour,
.compact-hour-cell.golden-hour {
  position: relative !important;
  overflow: visible !important;
  contain: none !important; /* Override contain: layout style so ::before can render above cell */
}

/* ============================================
   ★ START — filled gold star at left edge
   ============================================ */
/*
 * Gold star at the window's start acts as a brand anchor: matches the
 * column-rollup row indicator pill (★ 2pm-5pm) so the user finds the
 * window's start in the same colour wherever it appears. Pairs with
 * the fairness-coloured end ◆ to give the window an opener + verdict
 * pair without overloading either glyph with two readings.
 *
 * `display: block` is required so the marker still renders when the
 * start cell is ALSO the current-time cell — the current-time-cell
 * rule sets ::before { display: none !important } and would otherwise
 * hide the star.
 */
/* Specificity lifts:
   - `body` prefix raises base specificity to (0,3,2) so we beat the plain
     `body.fairness-shading .timeline-cell.working-hour::before` (tie, won on
     source order since this file loads after style.css).
   - `inset: auto !important` resets the `inset: 0` of the fairness-shading
     working-hour frame ::before (style.css ~8223). Without this reset its
     `right/bottom: 0` would stretch our pseudo into a box across the cell and
     the star would render off-position. We then re-declare top/left explicitly.

   NOTE: this (0,3,2) base rule is NOT enough on its own. The fairness-shading
   frame rule was later narrowed to the boundary cells —
   `body.fairness-shading .timeline-cell.working-hour.work-start::before`
   (style.css ~8223, also work-end / sleep-start / sleep-end) — which is (0,4,2)
   and OUTWEIGHS this rule. When the team window's START hour lands on a
   work-start (or work-end / sleep-start / sleep-end) boundary cell, that 4-class
   frame wins the `content` cascade and blanks the ★ to '' — the marker silently
   vanishes (reported as "best-time window above the cells broken on mobile"
   2026-06-19; it is mode- not viewport-specific). The matching-specificity
   override block below re-asserts the glyph for those boundary cells. The end ◆
   uses ::after, which the frame rule never targets, so only the START ::before
   needs the lift. The compromise ☆ start glyph (added with the compromise-window
   feature) is (0,3,2) too, so it loses to the same frame — the override covers
   it as well. */
body .timeline-cell.golden-hour.golden-hour-start::before,
body .compact-hour-cell.golden-hour.golden-hour-start::before,
body .timeline-cell.proposed-slot.golden-hour.golden-hour-start::before,
body .timeline-cell.proposed-slot[data-slot-tooltip].golden-hour.golden-hour-start::before {
  content: '\2605' !important;        /* ★ — filled star */
  display: block !important;
  position: absolute !important;
  inset: auto !important;             /* reset fairness-shading inset:3px */
  top: -11px !important;
  /* CENTRE the star on the window-start instant, exactly as the ◆ end is
     centred on the window-end instant (translateX(-50%)). 2026-08-13, live-probe
     measured: the star was LEFT-EDGE-anchored (`left: max(1px, …)`, no
     transform) while the diamond was CENTRE-anchored, so the visible ★…◆ pair
     always read ~5.6px narrower than the scanner bar (half the 9.2px star glyph
     + the 1px floor) — over a third of an hour cell on mobile, at EVERY
     duration. That asymmetry is why the pair "never matched the scanner's
     duration width" no matter how the fractional-position math was fixed.
     With both glyphs centred, star-centre → diamond-centre = the exact scan
     duration, and the pair straddles the scanner's edges symmetrically.
     --golden-start-pos (set by best-time-indicator.js, mirroring the ◆'s
     --golden-end-pos) carries the window's fractional start within the cell.
     CLIP SAFETY (2026-07-05 incident: "only the end shows on mobile"): a
     centred star's left half protrudes past the row's left edge when the
     window starts at the row's FIRST cell, and .compact-timeline-row is
     overflow-x hidden — the :first-child floor rule below keeps that one case
     pulled inside the row. Mid-row cells overflow into the previous cell,
     which is visible and correct (the boundary instant is shared). */
  left: var(--golden-start-pos, 0%) !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  font-size: 11px !important;
  /* Start ★ is always golden (--status-flex hue), matching the
     column-rollup row indicator pill. Acts as a fixed brand anchor that
     says "the team window opens here" — the eye finds the window's start
     in the same colour every time, regardless of how good the window
     turns out to be. The fairness verdict is carried by the end ◆ glyph
     (see below). */
  color: var(--status-flex) !important;
  line-height: 1 !important;
  z-index: 102 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: none !important;
  background: transparent !important;  /* fairness-shading frame paints none either */
  /* Softened 2026-07-12 (user: "star and diamond above cell best-times are very
     bright"). Was 0 0 3px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,0.85) —
     a full-opacity double white halo that read as glare. This keeps the glyph
     legible on any cell colour without the bloom. */
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.7), 0 0 4px rgba(255, 255, 255, 0.35);
}

/* OVERRIDE — beat the (0,4,2) fairness-shading boundary-frame ::before.
 *
 * `body.fairness-shading .timeline-cell.working-hour.work-start::before`
 * (style.css ~8223, also work-end / sleep-start / sleep-end) is (0,4,2) and
 * sets `content: ''` + `inset: 0`, which clobbers the (0,3,2) start-glyph rule
 * above whenever the window-start cell is a working/sleeping boundary cell — the
 * ★ disappears. We match its specificity here ((0,4,2): body.fairness-shading +
 * 3 cell classes + ::before) and, being later in source order (this file loads
 * after style.css), win the tie. Only `content` and the geometry the frame rule
 * overrides need re-declaring; colour / font-size / z-index / text-shadow still
 * cascade from the base start rule (the frame rule doesn't touch them). */
body.fairness-shading .timeline-cell.golden-hour.golden-hour-start::before,
body.fairness-shading .compact-hour-cell.golden-hour.golden-hour-start::before {
  content: '\2605' !important;        /* ★ — re-assert over the blank frame */
  inset: auto !important;             /* reset the frame's inset: 0 */
  top: -11px !important;
  left: var(--golden-start-pos, 0%) !important; /* centred on the fractional start instant; see base rule note (first-cell clip handled by the :first-child floor below) */
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  border: none !important;            /* drop the frame's 3px border arms */
  background: transparent !important;
  transform: translateX(-50%) !important;
}

/* SAME FAILURE CLASS, DIFFERENT RULE: the DAY-CHANGE SEAM (2026-08-04, user:
 * "missing best time star above cells on home timeline on Mobile").
 *
 * style.css paints the day divider as a ::before on the transition cell:
 *   body[data-layout="compact"] .compact-hour-cell.date-transition::before
 *   { content: '' !important; ... width: 1px; background: #059669; }
 * That is (0,4,2) and blanks `content`, so it outranks the base star rule's
 * (0,3,2) `content:'\2605' !important` and replaces the glyph with a 1px line —
 * exactly what the fairness-shading frame did above, and the override written
 * for that frame never covered this rule.
 *
 * It reads as HOME-ROW-ONLY because the home row is the one framed in BASE_TZ
 * (script.js compactGridOffset = tz.isCurrent ? BASE_TZ : displayOffset), so
 * its midnight day-flip lands inside the visible grid where the best-time
 * window starts. The ◆ end-marker is unaffected because it is an ::after, which
 * .date-transition never targets — which is precisely why the screenshot shows
 * the diamond but no star.
 *
 * Match at (0,5,2) (body[data-layout] + 3 cell classes + ::before) so this wins
 * on specificity rather than relying on source order alone, and re-declare only
 * `content` plus the geometry the seam rule overrides; colour / font-size /
 * z-index / text-shadow still cascade from the base start rule. */
body[data-layout="compact"] .compact-hour-cell.date-transition.golden-hour.golden-hour-start::before,
body[data-layout="compact"] .compact-hour-cell.date-transition-end.golden-hour.golden-hour-start::before {
  content: '\2605' !important;        /* ★ — re-assert over the blank seam */
  inset: auto !important;             /* reset the seam's top/bottom/left */
  top: -11px !important;
  left: var(--golden-start-pos, 0%) !important; /* centred on the start instant, like the base rule */
  right: auto !important;
  bottom: auto !important;
  width: auto !important;             /* drop the seam's width: 1px */
  height: auto !important;
  background: transparent !important; /* drop the seam's green fill */
  border: none !important;
  transform: translateX(-50%) !important;
}

/* FIRST-CELL ANTI-CLIP FLOOR — preserves the 2026-07-05 no-clip property under
 * the centred anchor. When the window starts at the row's FIRST cell, the
 * centred star's left half (~4.6px at 11px font) would protrude past the row's
 * left edge, and .compact-timeline-row (and body/html) are overflow-x hidden —
 * the ★ would be half-eaten or vanish, the exact incident the old edge-anchor
 * was introduced to fix. Floor `left` at 5px so, after translateX(-50%), the
 * glyph sits fully inside the row. Only the row's first cell is affected;
 * every other cell keeps the exact centred position. Selector variants match
 * each start-rule context above ((0,4,2) beats the (0,3,2) base; the
 * fairness / seam variants out-specify their (0,4,2) / (0,5,2) overrides). */
body .timeline-cell.golden-hour.golden-hour-start:first-child::before,
body .compact-hour-cell.golden-hour.golden-hour-start:first-child::before,
body.fairness-shading .timeline-cell.golden-hour.golden-hour-start:first-child::before,
body.fairness-shading .compact-hour-cell.golden-hour.golden-hour-start:first-child::before,
body[data-layout="compact"] .compact-hour-cell.date-transition.golden-hour.golden-hour-start:first-child::before,
body[data-layout="compact"] .compact-hour-cell.date-transition-end.golden-hour.golden-hour-start:first-child::before {
  left: max(5px, var(--golden-start-pos, 0%)) !important;
}

/* Compromise window keeps its HOLLOW ☆ when the start cell is a boundary cell
 * too. The compromise start-glyph rule is only (0,3,2) so it also loses to the
 * (0,4,2) frame; this (0,5,2) variant (the extra [data-…="compromise"] attr)
 * re-asserts ☆ over both the frame AND the solid-★ override directly above. */
body.fairness-shading .timeline-cell.golden-hour[data-team-window-quality="compromise"].golden-hour-start::before,
body.fairness-shading .compact-hour-cell.golden-hour[data-team-window-quality="compromise"].golden-hour-start::before {
  content: '\2606' !important;        /* ☆ — hollow star, matches compromise */
}

/* ============================================
   ◆ END — fairness-coded diamond at fractional position
   ============================================ */
/*
 * Uses ::after (not ::before) so start and end can coexist on the same
 * cell (1h windows: start cell IS end cell).
 *
 * Pairs with the start ★ as a single visual arc: gold star opens
 * ("window starts here", consistent brand anchor), fairness-coloured
 * diamond closes ("and here's how the window scored"). Placing the
 * verdict glyph at the END mirrors how a stopwatch reads — the result
 * lands when the timer stops.
 *
 * Specificity note: in availability / fairness color modes the cell's
 * ::after is also used to paint burden bars (style.css:7463) and
 * availability counts (style.css:7594). Those rules have specificity
 * (0,3,1) — high enough to clobber the plain golden-end selector even
 * with !important. Adding `body` to each branch lifts these to (0,3,2)
 * so the end glyph wins across modes. Without this, the end ◆
 * disappears in availability shading mode.
 */
body .timeline-cell.golden-hour.golden-hour-end::after,
body .compact-hour-cell.golden-hour.golden-hour-end::after,
body .timeline-cell.proposed-slot.golden-hour.golden-hour-end::after,
body .timeline-cell.proposed-slot[data-slot-tooltip].golden-hour.golden-hour-end::after {
  content: '\25C6' !important;        /* ◆ — filled diamond */
  position: absolute !important;
  top: -11px !important;
  left: var(--golden-end-pos, 100%) !important;
  transform: translateX(-50%) !important;
  font-size: 10px !important;
  /* End ◆ is fairness-coded — its colour is the team-window quality
     token (traffic light: excellent + good → green, fair → amber,
     limited → red). The gold start ★ acts as a fixed brand anchor; the
     verdict colour lands at the terminator, mirroring how a stopwatch
     result reads at the end. The connector line under the cells
     reinforces the same quality colour. */
  color: var(--team-window-color) !important;
  line-height: 1 !important;
  z-index: 102 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: none !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  bottom: auto !important;
  right: auto !important;
  /* Softened 2026-07-12 (user: "star and diamond above cell best-times are very
     bright"). Was 0 0 3px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,0.85) —
     a full-opacity double white halo that read as glare. This keeps the glyph
     legible on any cell colour without the bloom. */
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.7), 0 0 4px rgba(255, 255, 255, 0.35);
}

/* ============================================
   COMPROMISE GLYPH OVERRIDES — hollow ☆ / ◇
   ============================================
 * The best-available compromise window must NOT look like a clean
 * recommendation. We keep the same start/end positions but swap the SOLID
 * glyphs (★ ◆) for HOLLOW ones (☆ ◇). Combined with the amber colour bucket
 * above, the user gets two independent signals (shape + colour) that this is
 * "best you can do", not "the answer". The attribute selector adds one more
 * class to each chain, so these out-specify the base glyph rules and the
 * cross-mode (availability/fairness) (0,3,2) rules they already beat.
 */
body .timeline-cell.golden-hour[data-team-window-quality="compromise"].golden-hour-start::before,
body .compact-hour-cell.golden-hour[data-team-window-quality="compromise"].golden-hour-start::before,
body .timeline-cell.proposed-slot.golden-hour[data-team-window-quality="compromise"].golden-hour-start::before {
  content: '\2606' !important;        /* ☆ — hollow star */
  color: var(--status-flex) !important;  /* amber, matches the verdict end glyph */
}
body .timeline-cell.golden-hour[data-team-window-quality="compromise"].golden-hour-end::after,
body .compact-hour-cell.golden-hour[data-team-window-quality="compromise"].golden-hour-end::after,
body .timeline-cell.proposed-slot.golden-hour[data-team-window-quality="compromise"].golden-hour-end::after {
  content: '\25C7' !important;        /* ◇ — hollow diamond */
}

/* ============================================
   ─── CONNECTOR — REMOVED (was: thin tinted strip above the cells)
   ============================================ */
/*
 * The horizontal connector between ★ and ◆ used to paint as a 2px tinted
 * strip across the top of every start / mid / end cell (box-shadow inset +
 * an end-cell gradient band). When the window quality was good/excellent it
 * resolved green, reading as a "green strip above the best-time cells" —
 * which the user asked to remove. The ★ start and ◆ end glyphs still mark
 * the window's bounds; only the connecting strip is gone.
 *
 * We explicitly reset the connector properties to `none` (rather than just
 * deleting the paint rules) so no other cascade re-introduces a strip on
 * these cells.
 *
 * ⭐⭐ 2026-08-06 — THIS RESET WAS THE "UNSHADED CELLS" BUG (user: "cells
 * becoming unshaded still an issue on focus mode... I believe this is
 * remnants of a fix in the past we tried to reduce the mixing of cell
 * colours and scan colour"). Exactly right. The connector was painted on
 * the CELL'S OWN `background-image` — which is the very property the
 * day/night hour gradient uses (style.css `:is(.timeline-cell,
 * .compact-hour-cell)[data-hour="N"] { background: linear-gradient(...) }`).
 * So `background-image: none !important` here did not just remove the
 * strip: it erased the cell's day/night paint outright, leaving
 * background-color to show through as WHITE. Verified live via CDP rule
 * matching on the running board: this rule and its focus-mode twin below
 * were the two winning declarations on every white cell.
 *
 * The band tracked the BEST-TIME WINDOW (the golden-hour run), which is
 * why it moved when the scanner's position/duration changed — the window
 * is recomputed from those criteria — and why it looked scanner-driven
 * while never aligning with the scanner overlay itself.
 *
 * Keep the connector dead WITHOUT touching the cell's paint: the strip was
 * drawn by box-shadow + a ::after band, so resetting those two is
 * sufficient. Never null background/background-image on a cell — that
 * property IS the shading. (Same trap as the removed focus-mode "paint
 * boost", css/performance.css:303.) */
.timeline-cell.golden-hour-start,
.timeline-cell.golden-hour-mid,
.timeline-cell.golden-hour-end,
.compact-hour-cell.golden-hour-start,
.compact-hour-cell.golden-hour-mid,
.compact-hour-cell.golden-hour-end {
  box-shadow: none !important;
}

/* ============================================
   HOME CARD — slightly smaller end glyph to reduce visual weight
   ============================================ */
body .timezone-section[data-is-current="true"] .golden-hour-end::after,
body [data-is-current="true"] .golden-hour-end::after {
  font-size: 8px !important;
  top: -8px !important;
  left: var(--golden-end-pos, 100%) !important;
}
body .timezone-section[data-is-current="true"] .golden-hour-start::before,
body [data-is-current="true"] .golden-hour-start::before {
  font-size: 8px !important;
  top: -8px !important;
}

/* ============================================
   FOCUS MODE — markers only on home / current card
   ============================================ */
body[data-focus-mode] .timezone-section:not(:first-child) .golden-hour-start::before,
body[data-focus-mode] .timezone-section:not(:first-child) .golden-hour-end::after {
  display: none !important;
}
/* Focus-mode twin of the connector reset above. Same 2026-08-06 fix: the
   `background-image: none !important` here was the SECOND winning
   declaration on white cells — and because this rule is focus-mode-only
   and skips the first card, it explains why the symptom read as
   "focus mode" and why the home row was spared. Suppress the connector,
   never the cell's day/night paint. */
body[data-focus-mode] .timezone-section:not(:first-child) .golden-hour-start,
body[data-focus-mode] .timezone-section:not(:first-child) .golden-hour-mid,
body[data-focus-mode] .timezone-section:not(:first-child) .golden-hour-end {
  box-shadow: none !important;
}

body[data-focus-mode] .timezone-section:first-child .golden-hour-start::before,
body[data-focus-mode] .timezone-section:first-child .golden-hour-end::after,
body[data-focus-mode] .timezone-section[data-is-current="true"] .golden-hour-start::before,
body[data-focus-mode] .timezone-section[data-is-current="true"] .golden-hour-end::after {
  font-size: 8px !important;
  top: -9px !important;
  opacity: 0.75 !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

/* ============================================
   BEST TIME BRACKET & REACHABLE INDICATOR
   ============================================ */

/* ============================================
   ★ COLUMN AVG-STRIP INDICATOR — fairness-coded star at window-end
   ============================================ */
/* The team-window ★ glyph that used to be painted on the column's
 * team-strip-bar was removed: the avg bar is a clutter-free drag-to-discover
 * surface, not a verdict glyph. Window quality is conveyed by the segment
 * shading + scanner readout instead. */

/* Availability bracket next to best-time value e.g. (5/8) */
.indicator-bracket {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  opacity: 0.75;
  font-size: 0.6rem;
}

/* Make reachable indicator clickable */
#indicator-reachable {
  cursor: pointer;
}

#indicator-reachable .indicator-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ============================================
   POSITIONAL STABILITY — Reachable + Best Time indicator (2026-07-10, widened 2026-07-11)
   ============================================
   User: "bring the reachability and best-time count leftwards slightly so the
   user doesn't see them changing position." Then (2026-07-11): "Best time's
   indicator — have it in a constant position that allows FULL TIMES and also
   the reachability for that period. Move it leftwards to accommodate; the
   position should remain and not be content-specific."

   The best-time value is NOT a 1–2 digit count — it is a full time-RANGE string
   ("9am-10am" … "12:30pm-12:30am", ~8–15 chars) written by
   status-indicators.js:updateBestTime. It was wrongly sharing the reachable
   count's tiny 1.15em reservation, so the range still widened the pill and
   shoved its neighbour on every recompute (short "9am-10am" → long
   "12:30pm-12:30am"). tabular-nums only stops per-digit jitter, not the
   char-count growth of the range itself.

   Fix: give the best-time value its OWN reservation sized for the widest range
   ("12:30pm-12:30am") so the full time always fits and the box never resizes
   with content. Right-align the range inside that box so its right edge — where
   the "(N/N)" reachability bracket begins — is fixed; the bracket then also
   sits in a stable slot. The reachable count keeps its own 1.15em digit
   reservation (unchanged). With both figures in fixed-width boxes the whole
   right cluster is content-independent, and the negative margin nudges it left
   to make room for the wider reservation (right edge still pinned by
   .team-status-bar space-between, so the left legend does not move).

   Scoped to ≥841px (desktop) ON PURPOSE: below that, style.css owns the
   display state of the bracket/value across two breakpoints (hidden 641–840px,
   shown ≤640px, hidden again ≤480px). Setting `display` here would outrank
   those (an ID+class selector beats their class-only rules) and wrongly
   re-show the bracket on mobile. min-width needs an inline-block box to take
   effect, so we only claim it where we can safely own `display`. */
@media (min-width: 841px) {
  /* Reachable count — a 1–2 digit number; small reservation is right. */
  #indicator-reachable .indicator-value {
    display: inline-block;
    min-width: 1.15em;        /* room for 2 digits at tabular width */
    text-align: right;
  }

  /* Best-time value — a full time RANGE, not a count. Reserve the widest
     range ("12:30pm-12:30am") so the full time always shows and the box is
     content-independent.

     LEFT-align (2026-07-11 follow-up — user: "the icon and the value area are
     separated by lots of space on desktop"): the box was right-aligned so its
     right edge (→ the bracket) stayed fixed, but that pushed short ranges
     ("9am-10am") to the far right of the 9.5em box, leaving a big empty gap
     after the ★. Positional stability does NOT need the value's right edge
     pinned — the whole #status-indicators cluster is right-anchored as a unit
     by .team-status-bar's space-between, and both this box (9.5em) and the
     bracket (3.6em) are fixed-width, so their geometry never changes with
     content regardless of inner alignment. Left-aligning hugs the range to the
     ★ (gap gone) while every box width — and thus the cluster's overall
     position — stays exactly as before. */
  #indicator-besttime .indicator-value {
    display: inline-block;
    /* 2026-07-12 (user: "the reachable count for that time is disconnected from
       the time, bring them together"): DROP the fixed 9.5em min-width. That fixed
       box left a big empty gap between a SHORT range ("9am-12pm", ~58px) and the
       "(3/5)" bracket that sat at the box's far right (~41px void) — the count
       read as detached from the time. Now the value box SHRINKS to its content so
       the bracket sits immediately after the range text (small 4px gap below).
       Positional stability is unaffected: the whole #status-indicators cluster is
       right-anchored by .team-status-bar's space-between and the bracket keeps its
       own fixed 3.6em reservation, so the cluster's right edge stays pinned; only
       the ★+range+count group is now compact instead of gappy. */
    width: max-content;
    text-align: left;
    white-space: nowrap;      /* never wrap the range mid-string */
    margin-right: 4px;        /* small, even gap between the range and the count */
  }

  #indicator-besttime .indicator-bracket {
    display: inline-block;
    min-width: 3.6em;         /* holds the widest "(NN/NN)" whole (measured ~35px @0.65rem) so the fraction never overflows and the time value's right edge stays fixed too */
    text-align: left;         /* fraction grows to the right, into the reserved space */
  }
}

/* ── MOBILE (≤640px): same "right-aligned, reserved space so it doesn't move"
   treatment as desktop (2026-07-12, user: "align rightwards still, just with
   enough space for the time and person count without it moving. aim for this in
   mobile and desktop"). style.css owns the DISPLAY state of the bracket across
   the 640/480 breakpoints, so we DELIBERATELY do NOT set `display` here (that
   would outrank its show/hide and wrongly reveal the bracket where it should be
   hidden). We only size + align the boxes so, WHEN shown, the time range and the
   (N/N) count each occupy a stable reservation and the cluster's right edge stays
   pinned by .team-status-bar's space-between — the range hugs the ★, the count
   sits right after it, and neither shifts as the content changes. */
@media (max-width: 640px) {
  /* Reachable count — 1–2 digits; small fixed reservation, right-aligned so its
     right edge (the cluster anchor) never moves. Guarded to inline-block only if
     already shown — `display: inline-block` here is safe because the reachable
     value (not the bracket) is always shown at this width. */
  #indicator-reachable .indicator-value {
    min-width: 1.15em;
    text-align: right;
  }

  /* Best-time value = a full time RANGE. Shrink to content (hug the ★) + nowrap
     so a short range doesn't leave a gap before the count, and a long range
     never wraps mid-string. No fixed width needed: the cluster is right-anchored
     as a unit, so content-sizing keeps the group compact without moving it. */
  #indicator-besttime .indicator-value {
    width: max-content;
    max-width: 60vw;          /* never let an over-long range push the cluster off-screen on a narrow phone */
    text-align: left;
    white-space: nowrap;
    margin-right: 4px;        /* even gap between the range and the (N/N) count */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Reservation for the (N/N) count so it holds its slot and the range's right
     edge stays put. text-align:left → the fraction grows rightward into the
     reserved space, not leftward into the range. NB: no `display` — style.css
     decides whether the bracket is shown at this width. */
  #indicator-besttime .indicator-bracket {
    min-width: 3.6em;
    text-align: left;
  }
}

/* Leftward nudge of the settled cluster so the widened best-time reservation
   has room while the cluster's right edge stays pinned (request: "move it
   leftwards to accommodate; the position should remain"). Safe at all widths —
   margin does not affect the bracket/value display state. */
#status-indicators {
  margin-left: -8px;
}