/* ============================================================
   Arbah v2 — Timelapse surface (Lane D)
   Scoped restyle of the Timelapse page DOM under .arbah-v2.
   Legacy AND v1 paint stay byte-identical when the flag is off.

   Hook targeted (from src/pages/Timelapse.js):
     .timelapse-page  — page root (also carries data-testid)

   Out of scope (logged enrichment):
   - VantagePicker chrome (separate component, has its own DOM).
   - TimelapseViewer chrome (separate component — the playback
     controls + scrubber + main viewer are inside this component).
     Per protocol "FLAG any JS-driven player controls" — the player
     controls live inside TimelapseViewer.js. Re-skinning those would
     require knowing their class hooks; this PR scopes to the
     timelapse-page shell only. The viewer/picker get a separate pass.
   - Empty states / cloud-required state — use the EmptyState
     primitive which is already styled by arbah-v2-primitives.css.

   !important policy: 0. Ancestor specificity wins against the
   page's Tailwind utilities without escalation.

   RTL: page dir attribute flips the back-arrow icon via the
   conditional name="arrow-right/-left" in JS — handled by the
   page's existing logic, no CSS work needed.
   ============================================================ */

/* -- Page shell -- */
.arbah-v2 .timelapse-page {
  font-family: var(--arbah-v2-font-sans);
  color: var(--arbah-v2-ink);
}

/* -- Project picker (initial step) -- */
.arbah-v2 .timelapse-page select {
  background: var(--arbah-v2-surface);
  border: 1px solid var(--arbah-v2-border);
  border-radius: var(--arbah-v2-radius-md);
  color: var(--arbah-v2-ink);
  font-family: var(--arbah-v2-font-sans);
  font-size: 14px;
  padding-block: 10px;
  padding-inline: 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.arbah-v2 .timelapse-page select:focus {
  outline: none;
  border-color: var(--arbah-v2-brand);
  box-shadow: 0 0 0 3px rgba(16, 42, 67, .12);
}

/* Picker label */
.arbah-v2 .timelapse-page .text-sm.font-medium.text-gray-700 {
  color: var(--arbah-v2-ink);
  font-family: var(--arbah-v2-font-mono);
  letter-spacing: 0.04em;
}

/* -- Step-2 vantage row (project breadcrumb) -- */
/* The project-name breadcrumb when picking a vantage point. */
.arbah-v2 .timelapse-page .text-sm.text-gray-600 {
  color: var(--arbah-v2-ink-muted);
}