/* =========================================================
   THEME VISIBILITY & STYLE SYNCHRONIZATION v101
   Final visual pass for equal hierarchy/readability in light and dark.
   ========================================================= */

/* ---------- Global interaction visibility ---------- */
:where(a,button,[role="button"]):focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 72%,transparent)!important;
  outline-offset:3px!important;
}

html[data-theme=dark] .site-header{
  background:color-mix(in srgb,var(--bg) 91%,transparent)!important;
  border-bottom-color:var(--line)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.12);
}
html[data-theme=dark] .site-header nav a{
  color:var(--muted)!important;
}
html[data-theme=dark] .site-header nav a:hover,
html[data-theme=dark] .site-header nav a.active{
  color:var(--primary)!important;
  background:var(--surface2)!important;
}
html[data-theme=dark] .theme,
html[data-theme=dark] .menu{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}

/* ---------- Generic StoryMap / Research / Publications / Professional ---------- */
html[data-theme=dark] body.story-page .story-map-shell,
html[data-theme=dark] body.story-page .story-map-caption,
html[data-theme=dark] body.story-page .story-chapter,
html[data-theme=dark] body.story-page .story-record-cell{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}

html[data-theme=dark] body.story-page .story-map-head,
html[data-theme=dark] body.story-page .story-step{
  background:color-mix(in srgb,var(--surface2) 72%,var(--surface))!important;
  border-color:var(--line)!important;
}

html[data-theme=dark] body.story-page .story-chapter-media{
  background:var(--surface2)!important;
  border-color:var(--line)!important;
}

html[data-theme=dark] body.story-page .story-chapter h3,
html[data-theme=dark] body.story-page .story-map-caption strong,
html[data-theme=dark] body.story-page .story-record-cell strong{
  color:var(--primary2)!important;
}

html[data-theme=dark] body.story-page .story-summary,
html[data-theme=dark] body.story-page .story-chapter-body>p,
html[data-theme=dark] body.story-page .story-location,
html[data-theme=dark] body.story-page .story-record-cell span,
html[data-theme=dark] body.story-page .story-map-head p,
html[data-theme=dark] body.story-page .story-map-caption p{
  color:var(--muted)!important;
}

html[data-theme=dark] body.story-page .story-chapter-meta{
  border-color:var(--line)!important;
}

html[data-theme=dark] body.story-page .story-chapter .tags span{
  background:var(--surface2)!important;
  border-color:var(--line)!important;
  color:var(--muted)!important;
}

html[data-theme=dark] body.story-page .story-more{
  background:transparent!important;
  color:var(--primary)!important;
  border-color:var(--accent)!important;
}

/* The thematic skills map had a light-only beige background in a later rule. */
html[data-theme=dark] body[data-story-page="skills"] .thematic-capability-map{
  background:
    radial-gradient(circle at center,#153d45 0 20%,#071d22 21% 100%)!important;
}
html[data-theme=dark] body[data-story-page="skills"] .thematic-node{
  background:rgba(13,32,36,.94)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}

/* Publication image panel: retain editorial treatment without a bright light-mode strip. */
html[data-theme=dark] #publication-record-page .publication-record-media{
  background:
    linear-gradient(180deg,#0b2732 0%,#143c49 18%,var(--surface2) 18%,var(--surface) 100%)!important;
  border-color:var(--line)!important;
}
html[data-theme=dark] #publication-record-page .publication-record-card{
  background:var(--surface)!important;
  border-color:var(--line)!important;
}

/* ---------- Home ---------- */
html[data-theme=dark] .home-atlas-page .ha-intro,
html[data-theme=dark] .home-atlas-page .ha-map-legend,
html[data-theme=dark] .home-atlas-page .ha-map-title small,
html[data-theme=dark] .home-atlas-page .ha-o6-header small,
html[data-theme=dark] .home-atlas-page .ha-professional-roles article>strong{
  color:var(--muted)!important;
}

html[data-theme=dark] .home-atlas-page .ha-research-orbit a,
html[data-theme=dark] .home-atlas-page .ha-summary-card,
html[data-theme=dark] .home-atlas-page .ha-work-card,
html[data-theme=dark] .home-atlas-page .ha-education-card{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}

html[data-theme=dark] .home-atlas-page .ha-map-title,
html[data-theme=dark] .home-atlas-page .ha-o6-header,
html[data-theme=dark] .home-atlas-page .ha-map-legend{
  background:color-mix(in srgb,var(--surface) 91%,transparent)!important;
  border-color:var(--line)!important;
}

html[data-theme=dark] .home-atlas-page .ha-o6-panel{
  background:rgba(9,28,33,.82)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}

html[data-theme=dark] .home-atlas-page .ha-o6-steps button{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-theme=dark] .home-atlas-page .ha-o6-steps button:hover{
  background:var(--surface2)!important;
}
html[data-theme=dark] .home-atlas-page .ha-o6-steps button.active{
  background:#173f57!important;
  color:#fff!important;
  border-color:color-mix(in srgb,var(--accent) 55%,#173f57)!important;
}

/* ---------- UAV / RTK ---------- */
html[data-theme=dark] .uav-field-page .platform-reference-card small,
html[data-theme=dark] .uav-field-page .evidence-record-copy p,
html[data-theme=dark] .uav-field-page .processing-note p,
html[data-theme=dark] .uav-field-page .compact-section-head-academic p,
html[data-theme=dark] .uav-field-page .map-caption,
html[data-theme=dark] .uav-field-page .engagement-showcase figcaption{
  color:var(--muted)!important;
}

html[data-theme=dark] .uav-field-page .method-line span,
html[data-theme=dark] .uav-field-page .academic-method-note span{
  color:var(--text)!important;
}

html[data-theme=dark] .uav-field-page .platform-glyph,
html[data-theme=dark] .uav-field-page .platform-glyph.lidar,
html[data-theme=dark] .uav-field-page .platform-glyph.jashore,
html[data-theme=dark] .uav-field-page .platform-glyph.multi,
html[data-theme=dark] .uav-field-page .record-number{
  background:var(--surface2)!important;
  border-color:var(--line)!important;
  color:var(--primary2)!important;
}

html[data-theme=dark] .uav-field-page .field-map-head button,
html[data-theme=dark] .uav-field-page .field-map-filters button{
  background:var(--surface2)!important;
  border-color:var(--line)!important;
  color:var(--muted)!important;
}

html[data-theme=dark] .uav-field-page .field-map-filters button:hover{
  background:color-mix(in srgb,var(--surface2) 72%,var(--primary))!important;
  color:var(--text)!important;
}

html[data-theme=dark] .uav-field-page .field-map-filters button.active{
  background:#173f57!important;
  border-color:color-mix(in srgb,var(--accent) 48%,#173f57)!important;
  color:#fff!important;
}

/* Real screenshots/images should remain natural; frames adapt to theme. */
html[data-theme=dark] .uav-field-page .workflow-card-image,
html[data-theme=dark] .uav-field-page .flightplan-card,
html[data-theme=dark] .uav-field-page .workflow-card,
html[data-theme=dark] .uav-field-page .academic-media,
html[data-theme=dark] .uav-field-page .academic-method-note{
  border-color:var(--line)!important;
}

/* ---------- GIS Automation ---------- */
html[data-theme=dark] .automation-compact-page .automation-compact-back,
html[data-theme=dark] .automation-compact-page .automation-compact-kicker,
html[data-theme=dark] .automation-compact-page .automation-project-group h3,
html[data-theme=dark] .automation-compact-page .automation-project-tab>span,
html[data-theme=dark] .automation-compact-page .automation-project-detail-heading>div>span,
html[data-theme=dark] .automation-compact-page .automation-project-facts dt,
html[data-theme=dark] .automation-compact-page .automation-project-reviewer span,
html[data-theme=dark] .automation-compact-page .automation-project-evidence>span,
html[data-theme=dark] .automation-compact-page .automation-project-footer-label,
html[data-theme=dark] .automation-compact-page .automation-project-notes span{
  color:var(--accent)!important;
}

html[data-theme=dark] .automation-compact-page .automation-project-tab strong,
html[data-theme=dark] .automation-compact-page .automation-project-detail h2,
html[data-theme=dark] .automation-compact-page .automation-project-reviewer strong,
html[data-theme=dark] .automation-compact-page .automation-compact-source-note strong{
  color:var(--primary2)!important;
}

html[data-theme=dark] .automation-compact-page .automation-academic-summary>p,
html[data-theme=dark] .automation-compact-page .automation-project-tab small,
html[data-theme=dark] .automation-compact-page .automation-project-format,
html[data-theme=dark] .automation-compact-page .automation-project-summary,
html[data-theme=dark] .automation-compact-page .automation-project-facts dd,
html[data-theme=dark] .automation-compact-page .automation-project-tags span,
html[data-theme=dark] .automation-compact-page .automation-project-evidence p,
html[data-theme=dark] .automation-compact-page .automation-compact-source-note,
html[data-theme=dark] .automation-compact-page .automation-project-github-note,
html[data-theme=dark] .automation-compact-page .automation-project-notes p,
html[data-theme=dark] .automation-compact-page .automation-project-visual figcaption{
  color:var(--muted)!important;
}

html[data-theme=dark] .automation-compact-page .automation-project-code-panel{
  background:#07171b!important;
  border-color:var(--line)!important;
}
html[data-theme=dark] .automation-compact-page .automation-project-code-panel pre,
html[data-theme=dark] .automation-compact-page .automation-project-code-panel code{
  color:#d8ece9!important;
}

/* ---------- Urban Planning v53 ---------- */
html[data-theme=dark] .urban-planning-page .up-breadcrumbs,
html[data-theme=dark] .urban-planning-page .up-v53-intro p,
html[data-theme=dark] .urban-planning-page .up-v53-story-head p,
html[data-theme=dark] .urban-planning-page .up-v53-chipwrap span,
html[data-theme=dark] .urban-planning-page .up-v53-keywords span,
html[data-theme=dark] .urban-planning-page .up-v53-inline-note,
html[data-theme=dark] .urban-planning-page .up-v53-copy ul,
html[data-theme=dark] .urban-planning-page .up-v53-shorttext,
html[data-theme=dark] .urban-planning-page .up-v53-media-row figcaption,
html[data-theme=dark] .urban-planning-page .up-v53-map-status small{
  color:var(--muted)!important;
}

html[data-theme=dark] .urban-planning-page .up-breadcrumbs a,
html[data-theme=dark] .urban-planning-page .up-v53-youtube-row a,
html[data-theme=dark] .urban-planning-page .up-v53-map-status strong,
html[data-theme=dark] .urban-planning-page .up-v53-mini-grid strong{
  color:var(--primary2)!important;
}

html[data-theme=dark] .urban-planning-page .up-v53-mini-grid span{
  color:var(--accent)!important;
}

html[data-theme=dark] .urban-planning-page .up-v53-chipwrap span,
html[data-theme=dark] .urban-planning-page .up-v53-keywords span,
html[data-theme=dark] .urban-planning-page .up-v53-inline-note,
html[data-theme=dark] .urban-planning-page .up-v53-mini-grid>div,
html[data-theme=dark] .urban-planning-page .up-v53-map-status{
  background:var(--surface2)!important;
  border-color:var(--line)!important;
}

html[data-theme=dark] .urban-planning-page .up-v53-story-card,
html[data-theme=dark] .urban-planning-page .up-v53-map-sticky,
html[data-theme=dark] .urban-planning-page .up-v53-media-row figure,
html[data-theme=dark] .urban-planning-page .up-v53-youtube-row a,
html[data-theme=dark] .urban-planning-page .up-v53-main-visual{
  background:var(--surface)!important;
  border-color:var(--line)!important;
}

/* ---------- Education ---------- */
html[data-theme=dark] .simple-education-page .education-breadcrumbs,
html[data-theme=dark] .simple-education-page .education-simple-intro>p,
html[data-theme=dark] .simple-education-page .education-institution,
html[data-theme=dark] .simple-education-page .education-degree-body p{
  color:var(--muted)!important;
}
html[data-theme=dark] .simple-education-page .education-breadcrumbs a{
  color:var(--primary)!important;
}
html[data-theme=dark] .simple-education-page .education-kicker,
html[data-theme=dark] .simple-education-page .education-degree-topline span,
html[data-theme=dark] .simple-education-page .education-degree-body span{
  color:var(--accent)!important;
}
html[data-theme=dark] .simple-education-page .education-degree-topline strong{
  color:var(--primary2)!important;
}

/* ---------- Teaching & Capacity Building ---------- */
html[data-theme=dark] .teaching-capacity-page .tc-lead,
html[data-theme=dark] .teaching-capacity-page .tc-profile-note,
html[data-theme=dark] .teaching-capacity-page .tc-provider,
html[data-theme=dark] .teaching-capacity-page .tc-record-copy p,
html[data-theme=dark] .teaching-capacity-page .tc-evidence-line,
html[data-theme=dark] .teaching-capacity-page figcaption,
html[data-theme=dark] .teaching-capacity-page .tc-conclusion p,
html[data-theme=dark] .teaching-capacity-page .tc-summary-card p{
  color:var(--muted)!important;
}
html[data-theme=dark] .teaching-capacity-page .tc-teaching-points li{
  color:var(--text)!important;
}
html[data-theme=dark] .teaching-capacity-page .tc-record,
html[data-theme=dark] .teaching-capacity-page .tc-summary-card,
html[data-theme=dark] .teaching-capacity-page figure{
  border-color:var(--line)!important;
}

/* ---------- Contact & CV ---------- */
html[data-theme=dark] .compact-contact-page .professor-fit-strip,
html[data-theme=dark] .compact-contact-page .professor-contact-details,
html[data-theme=dark] .compact-contact-page .professor-contact-row,
html[data-theme=dark] .compact-contact-page .professor-resource-row,
html[data-theme=dark] .compact-contact-page .compact-address-row{
  border-color:var(--line)!important;
}
html[data-theme=dark] .compact-contact-page .professor-email-list a,
html[data-theme=dark] .compact-contact-page .professor-fit-strip strong{
  color:var(--text)!important;
}

/* ---------- Footer ---------- */
html[data-theme=dark] .footer-visual{
  opacity:.95!important;
}
html[data-theme=dark] .footer-academic-meta{
  border-color:var(--line)!important;
  color:var(--muted)!important;
}

/* ---------- Back to top ---------- */
html[data-theme=dark] .back-to-top small{
  color:var(--primary2)!important;
}
html[data-theme=dark] .back-to-top span{
  color:var(--accent)!important;
}

/* ---------- Leaflet visibility ---------- */
html[data-theme=dark] .leaflet-tooltip{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-theme=dark] .leaflet-tooltip::before{
  border-top-color:var(--surface)!important;
}
html[data-theme=dark] .leaflet-popup-content-wrapper,
html[data-theme=dark] .leaflet-popup-tip{
  background:var(--surface)!important;
  color:var(--text)!important;
}
html[data-theme=dark] .leaflet-bar a{
  background:var(--surface)!important;
  color:var(--primary2)!important;
  border-color:var(--line)!important;
}
html[data-theme=dark] .leaflet-bar a:hover{
  background:var(--surface2)!important;
}

/* Light mode explicitly retains natural basemap and image rendering. */
html[data-theme=light] .leaflet-tile-pane,
html[data-theme=light] img{
  filter:none;
}

/* Avoid theme-transition flash on images and maps. */
img,
.leaflet-tile-pane{
  transition:none!important;
}