/* ============================================================
   Arbah v2 — Phases surface (Lane D)
   Scoped restyle of the project-timeline DOM under .arbah-v2.

   ENRICHMENT NOTE — protocol "style only what exists, log missing DOM":
   The codebase has no dedicated Phases page or route under v2 today.
   What exists is the project-timeline block inside ProjectDetail.js's
   OverviewTab (lines 72-84), which is GATED on isArbahV1() returning
   true (line 52). Under .arbah-v2, that block does NOT render — the
   v1 gate keeps it off the page.

   This file forward-styles the .project-timeline* hooks against v2
   tokens so that when the wiring lane unlocks the gate (a one-line
   JS change in ProjectDetail.js to render the timeline under v2 too,
   OR a dedicated Phases page wired via a new index.html link), no
   second Phases CSS PR is needed. Until that moment, this stylesheet
   is a no-op under v2 — the off-state byte-identical guarantee is
   preserved either way (the .arbah-v2 ancestor gate keeps the rules
   inert when the flag is off).

   The richer Phases SPEC (KPI · status tabs · per-phase progress
   bars · timeline rail with logical-prop pseudo-elements · empty
   state · "Add phase" action) presumes a standalone Phases surface
   that does not exist in the codebase. Those regions are logged as
   future enrichment for the wiring/architect.

   DOM source (NO edits — visual rollout only):
     src/pages/ProjectDetail.js  (project-timeline block, v1-gated).

   !important policy: 0. The .arbah-v2 ancestor + class compounds
   out-specify the Tailwind utility classes on the source DOM.

   RTL: timeline runs horizontally; flex layout mirrors via the page
   dir attribute. Per-marker accent uses scoped fills (not
   directional borders), so no extra RTL block is needed.
   ============================================================ */

/* -- Project-timeline (lives in OverviewTab, v1-gated today) -- */
/* Outer wrapper sets type. Background reads through from the
   .app-shell sunken canvas. */
.arbah-v2 .project-timeline {
  font-family: var(--arbah-v2-font-sans);
  color: var(--arbah-v2-ink);
}

/* Horizontal track of markers — flex laid out, horizontal-scrolls
   on narrow screens. */
.arbah-v2 .project-timeline .project-timeline-track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding-block: 4px;
}

/* Each marker — a small card containing dot + label + optional
   date. Surface card chrome on v2 tokens. */
.arbah-v2 .project-timeline .project-timeline-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 96px;
  padding: 10px 12px;
  background: var(--arbah-v2-surface);
  border: 1px solid var(--arbah-v2-border);
  border-radius: var(--arbah-v2-radius-md);
  box-shadow: var(--arbah-v2-shadow-sm);
  text-align: center;
  flex: 1 1 0;
}

/* The dot — circular, 18px; the v1 source DOM puts ✓ inside when
   completed. State modifiers (below) tone the dot's bg + border. */
.arbah-v2 .project-timeline .project-timeline-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  background: var(--arbah-v2-surface-raised);
  border: 1.5px solid var(--arbah-v2-border-strong);
  color: var(--arbah-v2-ink-muted);
}

/* Completed — bronze accent + filled circle. Locked semantic from
   the v1 source comment in ProjectDetail.js:
     "completed → bronze-500, current → navy-700, upcoming → navy-50"
   carried over verbatim under v2 tokens. */
.arbah-v2 .project-timeline .project-timeline-marker-completed {
  border-color: var(--arbah-v2-bronze-200);
}
.arbah-v2 .project-timeline .project-timeline-marker-completed .project-timeline-dot {
  background: var(--arbah-v2-accent);
  border-color: var(--arbah-v2-accent);
  color: #fff;
}

/* Current — navy brand fill. The "you are here" phase. */
.arbah-v2 .project-timeline .project-timeline-marker-current {
  border-color: var(--arbah-v2-brand);
  box-shadow: var(--arbah-v2-shadow-md);
}
.arbah-v2 .project-timeline .project-timeline-marker-current .project-timeline-dot {
  background: var(--arbah-v2-brand);
  border-color: var(--arbah-v2-brand);
  color: #fff;
}

/* Upcoming — navy-100 soft fill, default border. */
.arbah-v2 .project-timeline .project-timeline-marker-upcoming .project-timeline-dot {
  background: var(--arbah-v2-navy-100);
  border-color: var(--arbah-v2-border);
  color: var(--arbah-v2-navy-700);
}

/* Label — small semibold ink. */
.arbah-v2 .project-timeline .project-timeline-label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--arbah-v2-ink);
  word-break: break-word;
}

/* Date — mono numeric for tabular alignment, muted ink. */
.arbah-v2 .project-timeline .project-timeline-date {
  font-family: var(--arbah-v2-font-mono);
  font-size: 11px;
  color: var(--arbah-v2-ink-muted);
  letter-spacing: 0.02em;
}

/* -- Mobile bump -- */
/* On narrow screens the track scrolls horizontally; tighten the
   marker min-width so 2 markers fit per viewport before scroll. */
@media (max-width: 640px) {
  .arbah-v2 .project-timeline .project-timeline-marker {
    min-width: 88px;
    padding: 8px 10px;
  }
}

/* ============================================================
   Arbah v2 — Phases TABLE rebuild (flag-gated, real DOM).
   The PhasesTableV2 component (src/components/phases/PhasesTableV2.js,
   rendered by Progress.js under .arbah-v2) carries the design detail
   inline on --arbah-v2-* tokens; these rules only enforce the row
   min-width so the fixed-column grid scrolls horizontally on mobile
   instead of squishing. Flag OFF unaffected (legacy tabs render).
   ============================================================ */
.arbah-v2 .av2phases-head, .arbah-v2 .av2phases-row { min-width: 540px; }
.arbah-v2 .av2phases-row:hover { background: var(--arbah-v2-surface-sunken); }