/* New program content inherits the existing One Journey design system. */
.program-index { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); padding-block:var(--space-5); border-bottom:1px solid var(--color-divider); font-size:var(--text-sm); }
.program-index a { color:var(--color-text-muted); text-decoration:underline; text-underline-offset:5px; }
.program-index a:hover { color:var(--color-primary); }
.program-section { padding-block:clamp(2.25rem,5.25vw,4.5rem); scroll-margin-top:100px; }
.program-heading { max-width:860px; margin-bottom:var(--space-10); }
.program-heading h2,.budget-heading h2 { font:300 var(--text-2xl)/1.1 var(--font-display); letter-spacing:-.025em; margin:var(--space-5) 0 var(--space-6); }
.program-heading h2 em,.budget-heading h2 em { color:var(--color-moss); }
.baja-atlas { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); align-items:start; gap:clamp(var(--space-6),4vw,var(--space-12)); }
.baja-map { min-width:0; }
.baja-map__surface { position:relative; width:100%; aspect-ratio:1; border-radius:var(--radius-xl); overflow:hidden; background:#103f49; }
.baja-map__surface>img,.baja-map__surface>canvas,.baja-map__pins { position:absolute; inset:0; width:100%; height:100%; }
.baja-map__surface>img { display:block; object-fit:cover; }
.baja-map__surface>canvas { pointer-events:none; }
.baja-map__pins { pointer-events:none; }
.baja-pin { position:absolute; left:var(--pin-x); top:var(--pin-y); transform:translate(-50%,-22px); display:flex; align-items:center; flex-direction:column; gap:6px; width:130px; border:0; padding:0; background:none; color:#f2eee6; cursor:pointer; pointer-events:auto; font:500 var(--text-xs)/1.25 var(--font-body); -webkit-tap-highlight-color:transparent; }
.baja-pin>span { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #adc9bc; border-radius:50%; background:#103f49; color:#f2eee6; font-size:var(--text-sm); transition:background .2s,color .2s; }
.baja-pin>strong { font-weight:500; padding:3px 6px; border-radius:4px; background:#103f49; text-align:center; max-width:130px; }
.baja-pin.is-selected>span { background:#f2eee6; color:#103f49; border-color:#f2eee6; box-shadow:0 0 0 5px #f2eee620; }
.baja-pin:hover>span { border-color:#e17a52; }
.baja-pin:focus-visible { outline:2px solid #e17a52; outline-offset:5px; border-radius:6px; }
.baja-map__caption { display:block; color:var(--color-text-muted); font-size:var(--text-xs); text-align:center; margin-top:var(--space-3); }
.baja-map figcaption { margin-top:var(--space-4); font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.65; }
.baja-map a,.geography-notes a,.reporting-fields a { text-decoration:underline; text-underline-offset:3px; }
.phase-selector { display:grid; gap:0; }
.phase-selector button { width:100%; border:0; border-bottom:1px solid var(--color-divider); background:none; color:var(--color-text); display:grid; grid-template-columns:30px 1fr auto; gap:var(--space-3); align-items:center; padding:var(--space-4) var(--space-3); text-align:left; cursor:pointer; font:400 var(--text-sm)/1.35 var(--font-body); }
.phase-selector button>span { color:var(--color-primary); font-size:var(--text-xs); }
.phase-selector button>strong { font-weight:500; }
.phase-selector button>small { font-size:var(--text-xs); color:var(--color-text-muted); }
.phase-selector button.is-selected { background:var(--color-surface); box-shadow:inset 3px 0 var(--color-primary); }
.phase-selector button:hover { background:var(--color-surface); }
.phase-selector button:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; position:relative; z-index:1; }
.phase-detail { padding:var(--space-6) 0 0; min-height:400px; scroll-margin-top:110px; }
.phase-detail h3 { font:300 var(--text-xl)/1.1 var(--font-display); margin:var(--space-4) 0; }
.phase-detail__intro { font-size:var(--text-sm); color:var(--color-text-muted); margin-bottom:var(--space-5); }
.phase-detail dl>div { margin-top:var(--space-4); }
.phase-detail dt { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.07em; color:var(--color-primary); margin-bottom:var(--space-2); }
.phase-detail dd { font-size:var(--text-sm); line-height:1.65; color:var(--color-text-muted); }
.phase-detail .link-arrow { font-size:var(--text-sm); margin-top:var(--space-6); }
.phase-detail__source { font-size:var(--text-xs); margin-top:var(--space-4); color:var(--color-text-muted); }
.phase-detail__source a { text-decoration:underline; text-underline-offset:3px; }
.geography-notes { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); margin:var(--space-10) 0 var(--space-6); padding-block:var(--space-6); border-block:1px solid var(--color-divider); }
.geography-notes h3,.accountability-grid h3 { font-size:var(--text-lg); margin-bottom:var(--space-3); font-weight:500; }
.geography-notes p,.accountability-grid p { font-size:var(--text-sm); color:var(--color-text-muted); }
.reporting-fields { margin-top:var(--space-5); font-size:var(--text-sm); }
.reporting-fields summary { cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.reporting-fields ul { padding-left:var(--space-5); margin-block:var(--space-4); color:var(--color-text-muted); list-style:disc; }
.reporting-fields li { padding-block:var(--space-1); }
.roadmap-list p+p { margin-top:var(--space-4); }
.pilot-plan { border-block:1px solid var(--color-divider); }
.pilot-timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6); list-style:none; margin:var(--space-10) 0 var(--space-6); }
.pilot-timeline li { border-top:2px solid var(--color-primary); padding-top:var(--space-5); }
.pilot-timeline .eyebrow { font-size:var(--text-xs); letter-spacing:.06em; }
.pilot-timeline h3 { font:400 var(--text-lg)/1.3 var(--font-display); margin-block:var(--space-4); }
.pilot-timeline p { font-size:var(--text-sm); color:var(--color-text-muted); }
.budget-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-10); align-items:center; margin-bottom:var(--space-8); }
.budget-heading>div>p { color:var(--color-text-muted); max-width:62ch; font-size:var(--text-sm); }
.budget-target { border-left:1px solid var(--color-divider); padding-left:var(--space-10); }
.budget-target>span { font-size:var(--text-sm); color:var(--color-text-muted); }
.budget-target>strong { display:block; font:300 clamp(2.5rem,5vw,4.5rem)/1.2 var(--font-display); letter-spacing:-.04em; margin-block:var(--space-3); white-space:nowrap; }
.budget-target>strong>small { font:500 var(--text-sm)/1 var(--font-body); letter-spacing:0; }
.budget-allocation { display:flex; width:100%; height:24px; border-radius:4px; overflow:hidden; gap:3px; margin-bottom:var(--space-4); }
.budget-allocation>span { background:var(--budget-color); width:var(--share); }
.budget-groups { margin-top:var(--space-8); }
.budget-groups>details { border-top:1px solid var(--color-divider); }
.budget-groups summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) 0; cursor:pointer; font-size:var(--text-base); list-style:none; }
.budget-groups summary::-webkit-details-marker { display:none; }
.budget-groups summary:after { content:"+"; color:var(--color-primary); font-size:var(--text-lg); width:24px; flex-shrink:0; text-align:center; }
.budget-groups details[open] summary:after { content:"−"; }
.budget-groups summary>span { display:flex; align-items:center; gap:var(--space-3); flex:1; }
.budget-groups summary i { display:block; width:12px; height:12px; background:var(--budget-color); border-radius:50%; flex-shrink:0; border:1px solid var(--color-border); }
.budget-groups summary strong { font-size:var(--text-base); font-weight:500; white-space:nowrap; }
.budget-rows { padding:0 0 var(--space-6) var(--space-6); }
.budget-rows>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2) var(--space-6); border-top:1px solid var(--color-divider); padding:var(--space-4) 0; }
.budget-rows h3 { font:500 var(--text-sm)/1.45 var(--font-body); }
.budget-rows strong { font:500 var(--text-sm)/1.45 var(--font-body); }
.budget-rows p { grid-column:1/-1; color:var(--color-text-muted); max-width:90ch; font-size:var(--text-sm); }
.budget-total { display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; border-block:1px solid var(--color-divider); padding:var(--space-5) 0; margin-bottom:var(--space-5); font-size:var(--text-base); }
.expansion-budget { background:var(--color-surface); border-radius:var(--radius-lg); padding:var(--space-6); margin-top:var(--space-8); font-size:var(--text-sm); }
.expansion-budget summary { cursor:pointer; font-weight:500; }
.expansion-budget p { color:var(--color-text-muted); margin-top:var(--space-5); max-width:90ch; }
.expansion-budget ul { list-style:none; margin-top:var(--space-5); max-width:660px; }
.expansion-budget li { display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) 0; border-bottom:1px solid var(--color-divider); }
.accountability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8); }
.accountability-grid>div { border-top:1px solid var(--color-divider); padding-top:var(--space-5); }
.program-contact-actions { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); margin-block:var(--space-6); }
.program-contact-actions>a:not(.btn),.program-email { font-size:var(--text-sm); text-decoration:underline; text-underline-offset:4px; }
.program-contact-actions .btn { margin:0; width:100%; white-space:normal; text-align:center; }
.program-email { overflow-wrap:anywhere; }
[data-theme=dark] .budget-groups summary i { border-color:#f2eee660; }
[data-theme=dark] .budget-allocation { outline:1px solid #f2eee660; }
@media(max-width:1000px) {
  .baja-atlas { grid-template-columns:minmax(0,1fr); }
  .baja-map { max-width:720px; width:100%; margin-inline:auto; }
  .phase-selector { grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-2); }
  .phase-selector button { display:flex; flex-direction:column; align-items:flex-start; padding:var(--space-3); gap:var(--space-2); height:100%; }
  .phase-selector button.is-selected { box-shadow:inset 0 -3px var(--color-primary); }
  .phase-detail { min-height:0; }
  .baja-phase-explorer { display:flex; flex-direction:column; }
  .baja-phase-explorer .phase-detail { order:0; padding-top:0; }
  .baja-phase-explorer .phase-selector { order:1; margin-top:var(--space-6); }
  .pilot-timeline { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .program-index { gap:var(--space-3) var(--space-4); }
  .program-heading { margin-bottom:var(--space-6); }
  .baja-pin { width:100px; }
  .baja-pin>strong { max-width:100px; font-size:12px; }
  .baja-map__caption { font-size:12px; }
  .baja-map figcaption { font-size:12px; }
  .phase-selector { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phase-selector button { min-height:94px; }
  .phase-selector button:last-child { grid-column:1/-1; min-height:72px; display:grid; grid-template-columns:20px 1fr auto; align-items:center; }
  .geography-notes,.budget-heading,.accountability-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .budget-target { border-left:0; border-top:1px solid var(--color-divider); padding:var(--space-6) 0 0; }
  .pilot-timeline { grid-template-columns:1fr; }
  .budget-groups summary { font-size:var(--text-sm); gap:var(--space-2); }
  .budget-groups summary strong { font-size:var(--text-sm); }
  .budget-groups summary:after { width:14px; }
  .budget-groups summary>span { gap:var(--space-2); }
  .budget-rows { padding-left:var(--space-3); }
  .budget-rows>div { column-gap:var(--space-3); }
  .expansion-budget { padding:var(--space-5); }
}
@media(prefers-reduced-motion:reduce) { .baja-pin>span { transition:none; } }
