/* ============================================================
   gis-presentation.css — modal legibility layer (all GIS viewers)

   Why: GIS modals are Tailwind-utility styled inside the compiled
   town bundles with micro type (text-[8px]…text-[10px]) and muted
   slate-on-dark text. On a 1080p projector — especially mirrored
   from a laptop running 150% display scaling (1280×720 logical) —
   that renders illegibly small and washes out.

   What: scoped ONLY to modal/overlay surfaces (never the map
   toolbar, dock, or pills, where compact type is intentional),
   raise the minimum type sizes and the muted-text contrast.
   !important is required: these override same-specificity Tailwind
   utilities emitted by the in-page compiler.

   Loaded by: richmond / islandfalls / caribou index.html and
   eliot/map.html, after the town bundle's styles.
   ============================================================ */

/* ── The modal scopes ─────────────────────────────────────────
   .fixed.inset-0           React modal host (stats/rankings/TIF/groups…)
   .e-modal / .e-modal-bg   Eliot-style modals
   others                   town-page modals with their own ids     */

/* Minimum readable type inside modals (raise-only; never shrinks) */
:is(.fixed.inset-0, .e-modal, .e-modal-bg,
    #scout-modal, #mortgage-calc-modal, #growth-calc-modal,
    .stack-ranking-modal, .stack-ranking-modal-overlay,
    .upload-modal-content, .images-modal-content) .text-\[8px\] {
  font-size: 11px !important;
}
:is(.fixed.inset-0, .e-modal, .e-modal-bg,
    #scout-modal, #mortgage-calc-modal, #growth-calc-modal,
    .stack-ranking-modal, .stack-ranking-modal-overlay,
    .upload-modal-content, .images-modal-content) .text-\[9px\] {
  font-size: 11px !important;
}
:is(.fixed.inset-0, .e-modal, .e-modal-bg,
    #scout-modal, #mortgage-calc-modal, #growth-calc-modal,
    .stack-ranking-modal, .stack-ranking-modal-overlay,
    .upload-modal-content, .images-modal-content) .text-\[10px\] {
  font-size: 12px !important;
}
:is(.fixed.inset-0, .e-modal, .e-modal-bg,
    #scout-modal, #mortgage-calc-modal, #growth-calc-modal,
    .stack-ranking-modal, .stack-ranking-modal-overlay,
    .upload-modal-content, .images-modal-content) .text-\[11px\] {
  font-size: 12.5px !important;
}
:is(.fixed.inset-0, .e-modal, .e-modal-bg,
    #scout-modal, #mortgage-calc-modal, #growth-calc-modal,
    .stack-ranking-modal, .stack-ranking-modal-overlay,
    .upload-modal-content, .images-modal-content) .text-xs {
  font-size: 13px !important;
}

/* Data tables inside modals: a touch more line-height for projection */
:is(.fixed.inset-0, .e-modal,
    .stack-ranking-modal, #scout-modal) table {
  line-height: 1.45;
}

/* Muted-text contrast on the DARK theme only (projectors wash out
   slate-400/500 on navy). Light mode keeps its own palette. */
body:not(.light-mode) :is(.fixed.inset-0, .e-modal, .e-modal-bg,
    #scout-modal, #mortgage-calc-modal, #growth-calc-modal,
    .stack-ranking-modal, .stack-ranking-modal-overlay) .text-slate-400 {
  color: #b3bfce !important;
}
body:not(.light-mode) :is(.fixed.inset-0, .e-modal, .e-modal-bg,
    #scout-modal, #mortgage-calc-modal, #growth-calc-modal,
    .stack-ranking-modal, .stack-ranking-modal-overlay) .text-slate-500 {
  color: #9fabbb !important;
}

/* Safety net on short displays (720px logical): these named panels cap at
   the viewport and scroll internally instead of clipping. (The React modal
   host panels already manage their own height — measured, no clipping.) */
.e-modal,
.stack-ranking-modal,
.upload-modal-content,
.images-modal-content {
  max-height: min(92vh, 100vh - 24px);
  overflow-y: auto;
}

/* Keep required map credits readable without letting them dominate the map.
   Applies to OpenLayers attribution overlays where this stylesheet is a shared
   boundary for map surfaces. */
.ol-attribution {
  font-size: 10px !important;
  color: #e2e8f0 !important;
}
.ol-attribution:not(.ol-collapsed) {
  background: rgba(13, 20, 33, 0.62) !important;
}
.ol-attribution a {
  color: #dbeafe !important;
}