/* Arbah v2 — Phase Detail modal (rendered via the shared Modal from
   Progress). /* Filled by feat/v2-restyle-stubs — scoped v2 token restyle of the
   existing DOM. Applies only under .arbah-v2 so legacy + v1 stay
   byte-identical when the flag is off. */ The phase modal has no unique wrapper, so this paints
   the shared .modal chrome on v2 tokens; per-page modal rules elsewhere
   are more specific and win where they apply. */
.arbah-v2 .modal-panel { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); }
.arbah-v2 .modal-header { border-bottom: 1px solid var(--arbah-v2-border); }
.arbah-v2 .modal-title { font-family: var(--arbah-v2-font-display); color: var(--arbah-v2-ink); }
.arbah-v2[dir="rtl"] .modal-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); }

/* ── v2 body retone (wrapper added only under the flag) ──────────────
   .av2phasemodal wraps the PhaseDetailModal body (phase info bar,
   milestone progress, checklist, add-milestone form). All real data;
   logic untouched. */
.arbah-v2 .av2phasemodal { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); }

/* Phase info bar + progress track surfaces */
.arbah-v2 .av2phasemodal .bg-gray-50 { background: var(--arbah-v2-surface-sunken); }
.arbah-v2 .av2phasemodal .bg-gray-100 { background: var(--arbah-v2-surface-raised); }
.arbah-v2 .av2phasemodal .border-gray-100,
.arbah-v2 .av2phasemodal .border-gray-200,
.arbah-v2 .av2phasemodal .border-gray-300 { border-color: var(--arbah-v2-border); }

/* Progress fill + done states: blue→bronze, green→success */
.arbah-v2 .av2phasemodal .bg-blue-500, .arbah-v2 .av2phasemodal .bg-blue-600 { background: var(--arbah-v2-bronze-500); }
.arbah-v2 .av2phasemodal .bg-blue-600:hover, .arbah-v2 .av2phasemodal .hover\:bg-blue-700:hover { background: var(--arbah-v2-bronze-700); }
.arbah-v2 .av2phasemodal .bg-green-500, .arbah-v2 .av2phasemodal .border-green-500 { background: var(--arbah-v2-success); border-color: var(--arbah-v2-success); }
.arbah-v2 .av2phasemodal .bg-green-50 { background: var(--arbah-v2-success-soft); }
.arbah-v2 .av2phasemodal .border-green-100 { border-color: rgba(5,150,105,.25); }
.arbah-v2 .av2phasemodal .text-blue-600 { color: var(--arbah-v2-bronze-700); }
.arbah-v2 .av2phasemodal .text-green-600 { color: var(--arbah-v2-success); }

/* Text tones */
.arbah-v2 .av2phasemodal .text-gray-800 { color: var(--arbah-v2-ink); }
.arbah-v2 .av2phasemodal .text-gray-500, .arbah-v2 .av2phasemodal .text-gray-400, .arbah-v2 .av2phasemodal .text-gray-300 { color: var(--arbah-v2-ink-subtle); }

/* Add-milestone form (blue tints → bronze) + inputs */
.arbah-v2 .av2phasemodal .bg-blue-50 { background: rgba(160,106,44,.08); }
.arbah-v2 .av2phasemodal .border-blue-200 { border-color: rgba(160,106,44,.28); }
.arbah-v2 .av2phasemodal input { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); color: var(--arbah-v2-ink); }
.arbah-v2 .av2phasemodal input:focus { outline: none; border-color: var(--arbah-v2-bronze-500); box-shadow: 0 0 0 3px rgba(160,106,44,.16); }
.arbah-v2 .av2phasemodal .hover\:border-blue-300:hover { border-color: var(--arbah-v2-bronze-500); }
.arbah-v2 .av2phasemodal .hover\:text-blue-600:hover { color: var(--arbah-v2-bronze-700); }
.arbah-v2 .av2phasemodal .rounded-xl { border-radius: var(--arbah-v2-radius-lg); }
.arbah-v2 .av2phasemodal .rounded-lg { border-radius: var(--arbah-v2-radius-md); }

/* Plex Mono .tnum on the real numerals/dates (phase date-range, milestone
   done/total, milestone due-date), bidi-isolated so they stay LTR in AR.
   Markup adds <bdi class="av2pm-num"> ONLY under the v2 flag (Progress.js),
   so the legacy off-state DOM is byte-identical. */
.arbah-v2 .av2phasemodal .av2pm-num {
  font-family: var(--arbah-v2-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  unicode-bidi: isolate;
}