/* ============================================
   TimeRangePicker — shared drag-to-set hours picker
   ============================================
   Day/night shading and selection fill colour come from
   STATUS_PRESENTATION (see js/shared/event-status-utils.js).
   The picker also styles the legacy `.atw-time-*` and
   `.tz-simple-time-*` hooks so that existing markup automatically
   inherits the new visual language during migration. */

/* Fresh-mount markup -------------------------------------------------- */
.trp-time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--slate-500, #64748b);
  margin-bottom: 6px;
  padding: 0 2px;
}

.trp-time-track,
.atw-time-track,
.tz-simple-time-track {
  position: relative;
  height: 40px;
  /* Use an explicit slate base — NOT var(--cell-base). --cell-base is declared
     `transparent` in the unconditional :root (view-mode-strip.css), so reading
     it here made the slate fallback dead and painted the track transparent →
     flat white over the modal in EVERY view mode (read as "locked in no-colour
     / Clean-Plane mode" — user-reported 2026-06-26). The picker is its own
     surface and must NOT inherit the board's day-cycle cell base. */
  background: var(--slate-100, #f1f5f9);
  border-radius: 8px;
  cursor: crosshair;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  /* Hour gridlines */
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / 24 - 1px),
    rgba(100, 116, 139, 0.18) calc(100% / 24 - 1px),
    rgba(100, 116, 139, 0.18) calc(100% / 24)
  );
}

.trp-time-track.selecting,
.atw-time-track.selecting,
.tz-simple-time-track.selecting {
  cursor: ew-resize;
}

/* Day/night sleep overlay --------------------------------------------- */
.trp-sleep-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.trp-sleep-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--trp-sleep-color, #7c3aed) 22%, transparent);
}

/* Sleep BRACKET — match the main board's sleeping-hour [ ] end-caps
   (style.css .timeline-cell.sleeping-hour.sleep-start / .sleep-end, #6d28d9).
   Every (non-deep) band gets top + bottom rails; the left cap [ paints only
   on the band that owns the true sleep-start, the right cap ] only on the band
   that owns the true sleep-end, so an overnight window (e.g. 23–7) reads as one
   continuous frame across midnight rather than two closed boxes. The board uses
   3px; the shorter picker track reads cleaner at 2px. */
.trp-sleep-band:not(.trp-sleep-band-deep) {
  box-shadow:
    inset 0 2px 0 0 var(--trp-sleep-bracket, #6d28d9),
    inset 0 -2px 0 0 var(--trp-sleep-bracket, #6d28d9);
}

.trp-sleep-band.trp-sleep-cap-start:not(.trp-sleep-band-deep) {
  box-shadow:
    inset 2px 0 0 0 var(--trp-sleep-bracket, #6d28d9),
    inset 0 2px 0 0 var(--trp-sleep-bracket, #6d28d9),
    inset 0 -2px 0 0 var(--trp-sleep-bracket, #6d28d9);
}

.trp-sleep-band.trp-sleep-cap-end:not(.trp-sleep-band-deep) {
  box-shadow:
    inset -2px 0 0 0 var(--trp-sleep-bracket, #6d28d9),
    inset 0 2px 0 0 var(--trp-sleep-bracket, #6d28d9),
    inset 0 -2px 0 0 var(--trp-sleep-bracket, #6d28d9);
}

/* A non-wrapped window owns both caps on one band — full 4-side frame. */
.trp-sleep-band.trp-sleep-cap-start.trp-sleep-cap-end:not(.trp-sleep-band-deep) {
  box-shadow: inset 0 0 0 2px var(--trp-sleep-bracket, #6d28d9);
}

.trp-sleep-band-deep {
  background: color-mix(in srgb, var(--trp-sleep-color, #7c3aed) 35%, transparent);
}

/* Busy-events overlay -------------------------------------------------- */
/* Subtle bands for the caller's OWN existing events on the bound day, so a
   proposer can drag the poll slot around their commitments (user 2026-07-14).
   Deliberately NEUTRAL — a soft slate hatch, not the purple sleep tint or the
   cyan/green selection bracket — so "you're already busy here" reads as info,
   distinct from what the picker SETS and from sleep. Behind the selection,
   click-through. */
.trp-events-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.trp-event-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(100, 116, 139, 0.30) 0,
    rgba(100, 116, 139, 0.30) 4px,
    rgba(100, 116, 139, 0.14) 4px,
    rgba(100, 116, 139, 0.14) 8px
  );
  box-shadow:
    inset 2px 0 0 0 rgba(71, 85, 105, 0.55),
    inset -2px 0 0 0 rgba(71, 85, 105, 0.55);
  border-radius: 2px;
  /* NO GRAYSCALE HERE (2026-08-18, owner: the picker strip came back with
     00:00-12:00 washed flat grey).

     The past band gets a grayscale backdrop because it is ONE region: "this is
     gone" reads well as a single desaturated block. Taken slots are MANY. A
     busy day paints five or more bands, and backdrop-filter composites against
     everything beneath it, so each band eats the colour under it and together
     they gut the day-cycle ramp. Reproduced against the real gradient: the
     past band plus five bands at grayscale(0.9) left almost no colour to judge
     the day by, which is exactly what the screenshot showed.

     The hatch is the "you are busy" signal and does not need a filter's help.
     Keeping the track coloured underneath is also what tells the reader WHICH
     hours these are, which is the whole point of the strip. */
}

body.dark-mode .trp-event-band {
  background: repeating-linear-gradient(
    -45deg,
    rgba(148, 163, 184, 0.34) 0,
    rgba(148, 163, 184, 0.34) 4px,
    rgba(148, 163, 184, 0.16) 4px,
    rgba(148, 163, 184, 0.16) 8px
  );
  box-shadow:
    inset 2px 0 0 0 rgba(148, 163, 184, 0.6),
    inset -2px 0 0 0 rgba(148, 163, 184, 0.6);
}

/* Selection bracket ---------------------------------------------------- */
/* The selected range renders as a working-hours BRACKET [ ] — a faint interior
   tint framed by a bracket outline on all four sides — to match the main board's
   work-start/work-end end-caps (style.css .working-hour.work-start / .work-end).
   2026-07-11: unified onto the SAME tokens the canonical .time-range-selection
   picker uses (style.css ~18901) so EVERY drag picker is pixel-consistent with
   the board cell bracket:
     • --sel-arm  = var(--work-bracket-arm, 2.5px) — the exact arm thickness the
       board cells use, so a change to the board arm tracks here automatically
       (was a hardcoded 2px).
     • --sel-bracket = the per-selection hue (working green by default; the JS
       still paints the live background inline from STATUS_PRESENTATION).
   These classes aren't nested under .time-range-selection, so the tokens are
   (re)declared locally here. The values below are the fallback before JS paints. */
.trp-time-selection,
.atw-time-selection,
.tz-simple-time-selection {
  --sel-arm: var(--work-bracket-arm, 2.5px);
  /* Work-bracket BLUE fallback (2026-07-16). The working-hours bracket recoloured
     green→work-event-blue on the board (--work-bracket / --event-work #3b82f6); the
     drag-to-set-working-hours window matches it. JS still paints the live hue inline
     from variantColor() (blue for 'working'), this is the pre-paint fallback. NOT
     --status-working (that green stays the working STATUS colour). */
  --sel-bracket: var(--event-work, #3b82f6);
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--sel-bracket) 16%, transparent);
  box-shadow:
    inset var(--sel-arm) 0 0 0 var(--sel-bracket),
    inset calc(-1 * var(--sel-arm)) 0 0 0 var(--sel-bracket),
    inset 0 var(--sel-arm) 0 0 var(--sel-bracket),
    inset 0 calc(-1 * var(--sel-arm)) 0 0 var(--sel-bracket);
  border-radius: 4px;
  z-index: 2;
  /* The band itself stays click-through so a press on EMPTY track still
     starts a fresh 'draw'. The drag logic hit-tests against the band bounds
     using the track-level listener, so the band needn't capture events; the
     grab-handles below opt back IN to pointer events for edge dragging. */
  pointer-events: none;
  transition: left 0.1s ease, width 0.1s ease;
}

/* While actively dragging, kill the position transition so the band tracks
   the finger 1:1 instead of easing behind it. */
.trp-time-track.selecting .trp-time-selection,
.atw-time-track.selecting .atw-time-selection,
.tz-simple-time-track.selecting .tz-simple-time-selection,
.trp-time-track.selecting .atw-time-selection,
.trp-time-track.selecting .tz-simple-time-selection {
  transition: none;
}

/* Edge grab-handles ---------------------------------------------------- */
/* Two pill handles at the band's left/right edges. They sit slightly OUTSIDE
   the band and stretch the full height so they present a generous, finger-
   sized target (reinforced by an even wider invisible ::before hit-slop).
   Grabbing one extends only that side; grabbing the band body slides the whole
   window. This mirrors the scanner scope bar's resize affordances. */
.trp-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 70%;
  background: var(--trp-handle-color, var(--event-work, #3b82f6));
  border-radius: 6px;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Invisible hit-slop so the handle is comfortably grabbable on touch without
   making the visible pill chunky. */
.trp-handle::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -10px;
  right: -10px;
}

/* A subtle grip line down the centre of each handle. */
.trp-handle::after {
  content: '';
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
}

.trp-handle-start {
  left: -4px;
  cursor: ew-resize;
}

.trp-handle-end {
  right: -4px;
  cursor: ew-resize;
}

/* Duration-locked -------------------------------------------------------- */
/* With `fixedDuration` set the block only ever SLIDES, so the affordances must
   stop promising a resize: the track loses its crosshair (nothing to draw), the
   selection reads as grabbable, and the edge handles are hidden entirely rather
   than sitting there as dead ew-resize grips. */
.trp-time-track.trp-duration-locked {
  cursor: grab;
}

.trp-time-track.trp-duration-locked.selecting {
  cursor: grabbing;
}

.trp-time-track.trp-duration-locked .trp-time-selection {
  cursor: grab;
}

.trp-time-track.trp-duration-locked .trp-handle-start,
.trp-time-track.trp-duration-locked .trp-handle-end {
  display: none;
}

/* Live drag tooltip --------------------------------------------------- */
/* A compact time label that follows the moving edge while dragging, so the
   exact time is readable instead of eyeballing the hour line the handle covers
   (user 2026-07-13). Anchored to the track and pinned to its top edge; the
   track is overflow:hidden, so the pill lives just INSIDE the top rather than
   floating above (which would be clipped). translateX(-50%) centres it on the
   edge; the clamp in JS keeps `left` within 0–100% so it never runs off an end. */
.trp-drag-tooltip {
  position: absolute;
  /* Pinned to the top INSIDE the track (the track is overflow:hidden for its
     rounded corners, so a pill floating above would be clipped). Bumped from a
     tiny 11px chip to a bold 14px tabular-figure pill so the exact time reads at
     a glance while lining the handle up — the moving handle no longer hides the
     number you're aiming for (user 2026-07-14: "difficult to line up without
     looking at the number"). */
  top: 3px;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  padding: 2px 9px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
  color: #fff;
  background: rgba(15, 23, 42, 0.95); /* slate-900 pill for contrast on any band */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.1s ease;
}
.trp-drag-tooltip.is-visible {
  opacity: 1;
}
body.dark-mode .trp-drag-tooltip {
  background: rgba(226, 232, 240, 0.95); /* slate-200 pill */
  color: var(--slate-900, #0f172a);
}

/* Cursor feedback per mode while hovering/dragging the body. */
.trp-time-track.mode-move,
.atw-time-track.mode-move,
.tz-simple-time-track.mode-move {
  cursor: grabbing;
}

/* Marker dashes inside the track (kept under sleep + selection) */
.trp-time-markers,
.atw-time-markers,
.tz-simple-time-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Dark-mode tweaks ---------------------------------------------------- */
body.dark-mode .trp-time-track,
body.dark-mode .atw-time-track,
body.dark-mode .tz-simple-time-track {
  /* Explicit slate, not var(--cell-base) — see the light-mode note above. */
  background: var(--slate-800, #1e293b);
}
body.dark-mode .trp-time-labels {
  color: var(--slate-400, #94a3b8);
}

/* Dark-mode sleep bracket — brighter violet, mirroring the board's
   body.dark-mode .timeline-cell.sleeping-hour.sleep-start (#8b5cf6). */
body.dark-mode .trp-sleep-band:not(.trp-sleep-band-deep) {
  --trp-sleep-bracket: #8b5cf6;
}

/* Past / future time-of-day overlay ----------------------------------- */
/* Injected by buildPastOverlay() when a picker is bound to TODAY. Hours that
   have already elapsed can't hold a future meeting, so they read a muted GRAY
   (user 2026-07-13 — was red, which read as an error and fought the sleep/work
   hues); the still-bookable remainder of the day reads a faint YELLOW so "ahead
   of now" is unmistakable at a glance. Sits above the sleep tint but below the
   selection (z-index 1.5 via source order — see buildPastOverlay), and never
   intercepts pointer events: drag-blocking is enforced in the picker's clamp
   math, not by swallowing events here. */
.trp-past-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.trp-past-band {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Flat, COLORLESS gray — no hatch (user 2026-07-14: "make the expended time
     gray or colorless"). Past hours read as "already gone / not available",
     quietly. The hatch was retired here so it doesn't read the same as the new
     busy-events bands (which own the diagonal hatch now — "you're busy" vs.
     "time's gone" must look different). Translucent so the day/night track +
     sleep tint stay legible underneath. */
  background: color-mix(in srgb, var(--slate-500, #64748b) 22%, transparent);
  /* ACTUALLY DESATURATE, do not just tint (2026-08-17, owner: "make the past
     events and taken times shaded gray"). The wash above was already slate, but
     a translucent grey over a SATURATED base only tints it: the track paints a
     24-stop day-cycle gradient at 0.85 alpha, so the deep blues and purples
     still read straight through and the past competed with the pickable hours.
     backdrop-filter removes the colour underneath instead of layering over it,
     which is the difference between "greyish" and grey. */
  backdrop-filter: grayscale(1);
}

.trp-future-band {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Left intentionally near-transparent: the SELECTABLE region shouldn't be
     tinted a warning colour. The old faint amber wash read as "caution" over
     the whole bookable day; a barely-there neutral keeps focus on the past
     (gray) / now (seam) contrast. */
  background: transparent;
}

/* "Now" seam — a crisp neutral hairline between past (gray) and future. A muted
   slate line (not red) marks where "now" falls without reading as an alarm; it's
   just the boundary of the unavailable region. */
.trp-now-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
  background: var(--slate-500, #64748b);
  box-shadow: 0 0 4px color-mix(in srgb, var(--slate-500, #64748b) 60%, transparent);
}

/* Dark mode: same neutral gray at slightly higher alpha so the past region
   carries on the darker slate track. Uses a lighter slate tier for the hatch. */
body.dark-mode .trp-past-band {
  background: color-mix(in srgb, var(--slate-400, #94a3b8) 18%, transparent);
}
body.dark-mode .trp-future-band {
  background: transparent;
}
body.dark-mode .trp-now-seam {
  background: var(--slate-400, #94a3b8);
}