/* ============================================================
 * NovelEarth
 * The big shared map itself, its overlay (layer) toggle list, and each overlay's own sub-controls
 * block.
 * ============================================================ */

/* A dramatically larger map window than any single app's own embedded map (520px tall) -- this
   page exists specifically to give every overlay room to breathe on one big, real map, without
   otherwise breaking out of the site's normal centered #app layout. */
#novelEarthMapHolder{
  width:100%; height:min(78vh, 900px); min-height:440px;
  border-radius:var(--radius); overflow:hidden;
}

.novelearth-layers{
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  background:var(--bg-panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:14px;
}
.novelearth-element-select{ width:auto; min-width:150px; flex:0 0 auto; padding:7px 9px; font-size:13px; }

/* .big-date only gets real styling (weight/size) inside .today-date-nav elsewhere on the site --
   here it inherited plain body text color, which read as low-contrast next to the bolder
   checkbox labels beside it. Gold matches how other emphasized live values (the header clock)
   are already treated, and reads clearly regardless of site theme or full screen's pinned dark
   panel colors. */
.novelearth-time-label{ color:var(--gold-text); font-weight:600; }

/* Stays display:none even in fullscreen now -- App.setupFullscreenControlsCollapse's own
   .map-fs-collapse-label shows "NovelEarth" alongside the collapse toggle it needs a label next to
   anyway, so showing this too would just duplicate it. Left in the markup rather than deleted since
   removing it is a bigger, riskier change than just not showing it. */
.novelearth-fullscreen-title{
  display:none; font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--ink); margin:0 0 10px;
}

/* Now wraps ALL of the date/time and per-overlay toggle blocks as one shared panel (see the HTML
   comment above #novelEarthControlsPanel) -- display:flex + gap instead of each child block's own
   margin-bottom means a display:none child (whichever overlays aren't relevant to the currently
   active one) contributes no gap on either side of it, rather than just collapsing its own margin
   and leaving its sibling's. */
.novelearth-element-block{
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:12px 14px; margin-bottom:12px;
  display:flex; flex-direction:column; gap:10px;
}
/* Golden Hour's and Meteor Activity's own toggles live physically inside novelEarthDateTimeBlock's
   own first .graph-controls row (same row as the date picker), not a separate row/block below it --
   the Overlay dropdown above already names which overlay is active, so a repeated per-block title
   was redundant, and folding the toggles into the date row removes a whole row of vertical space.
   display:contents when active (the default -- see setVisible's own display:'' vs 'none' pattern
   elsewhere in this file) lets these <label> children become direct flex items of that
   .graph-controls row instead of a nested box breaking its flex/wrap layout; display:none via JS
   when the OTHER of the two is active removes it from that row entirely, same as any other
   JS-toggled element on this panel. */
.novelearth-inline-toggle-group{ display:contents; }

/* These wrap the controls, the hover status, and the legends purely so full screen mode (below)
   has single elements to float as overlays. In NORMAL (non-fullscreen) view they should be
   invisible to layout entirely -- display:contents removes the wrapper's own box so its children
   lay out exactly as if they were direct children of <main>/.graph-box, same as before they were
   wrapped, leaving the normal page look completely unchanged. */
.novelearth-controls-overlay, .novelearth-bottom-stack, .novelearth-legend-overlay{ display:contents; }

/* ---------- Full screen ----------
   The Fullscreen API only shows the target element (and its descendants) full-bleed, hiding
   everything else on the page -- that's inherent to the API, not something styled here.
   Rather than stacking the controls/legend above and below the map (which was still eating a
   big chunk of screen height in exchange for going full screen at all), both become small,
   semi-transparent floating panels OVER the map -- top-left for the overlay picker/its
   controls, bottom-center for the legend -- so the map itself gets the whole screen and the
   panels only cover as much of it as their own content needs. MapLibre's own controls
   (zoom, the full-screen button itself) stay at their default top-right corner, which neither
   panel reaches into. -webkit-full-screen covers older WebKit (Safari); :fullscreen is the
   standard, unprefixed pseudo-class every current browser supports. */
.novelearth-fullscreen-target:fullscreen,
.novelearth-fullscreen-target:-webkit-full-screen,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen{
  position:relative; background:var(--bg-deep); padding:0; overflow:hidden;
}
/* These two panels' own background (below) is always a fixed dark translucent color -- and, per
   explicit preference, everything inside them is pinned to Dark theme's own token values
   unconditionally, regardless of which light/dark/twilight theme the rest of the site is
   currently in, rather than trying to track/match the site theme. (An earlier version of this
   rule only overrode Light theme, letting Dark and Twilight pass their own values through
   unchanged -- but Twilight's navy-tinted palette read as "wrong/inconsistent" here even when
   the SITE was already in Dark theme, since Twilight is the site's default with no data-theme
   attribute set. Always forcing Dark's specific values sidesteps that per-theme guessing game
   entirely.) */
.novelearth-fullscreen-target:fullscreen .novelearth-controls-overlay,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-controls-overlay,
.novelearth-fullscreen-target:fullscreen .novelearth-bottom-stack,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-bottom-stack,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-controls-overlay,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-bottom-stack{
  --bg-panel:#1B1B1B; --bg-panel-2:#232323; --bg-raised:#2C2C2C;
  --line:#3A3A3A; --line-soft:#2A2A2A;
  --ink:#EDEDED; --ink-dim:#B0B0B0; --ink-faint:#8C8C8C;
  --input-bg:#0A0A0A;
}
.novelearth-fullscreen-target:fullscreen .graph-box,
.novelearth-fullscreen-target:-webkit-full-screen .graph-box,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .graph-box{
  position:absolute; inset:0; padding:0; border:none; border-radius:0; background:none;
}
.novelearth-fullscreen-target:fullscreen #novelEarthMapHolder,
.novelearth-fullscreen-target:-webkit-full-screen #novelEarthMapHolder,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen #novelEarthMapHolder{
  position:absolute; inset:0; width:100%; height:100%; border-radius:0;
}
/* #novelEarthOpenAppLink's default top-left corner (from .novelearth-link-badge, matching every
   other app's own "Open in NovelEarth" badge) is exactly where .novelearth-controls-overlay
   floats in full screen (see its own rule below) -- moved to the one corner nothing else claims
   there (top-right is MapLibre's own zoom/full-screen controls, bottom-center is
   .novelearth-bottom-stack) so it stays reachable instead of sitting hidden underneath the
   controls panel. */
.novelearth-fullscreen-target:fullscreen #novelEarthOpenAppLink,
.novelearth-fullscreen-target:-webkit-full-screen #novelEarthOpenAppLink,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen #novelEarthOpenAppLink{
  top:auto; left:10px; bottom:10px;
}
/* Below ~600px the centered .novelearth-bottom-stack (status pill + legend) can grow wide/tall
   enough -- a wrapped multi-item legend, or a wide gradient bar like the Dark Skies overlay's
   Bortle scale -- to reach into this same bottom-left corner and sit on top of the link, sometimes
   hiding it completely. There's no corner left to move it to instead (top-right is MapLibre's own
   zoom/fullscreen controls, top-left is .novelearth-controls-overlay, bottom-center is the stack
   this collides with) -- so rather than a link that's sometimes unreachable and sometimes invisible
   depending on which overlay is active, it's hidden here. Normal (non-fullscreen) view is
   unaffected -- the link sits top-left there instead, with nothing to collide with. Same fix as
   every other app's own "Open in X" badge -- see golden-hour/css/07-graph.css's identical rule. */
@media (max-width:600px){
  .novelearth-fullscreen-target:fullscreen #novelEarthOpenAppLink,
  .novelearth-fullscreen-target:-webkit-full-screen #novelEarthOpenAppLink,
  .novelearth-fullscreen-target.maplibregl-pseudo-fullscreen #novelEarthOpenAppLink{
    display:none;
  }
}
/* The distance scale (shared/js/base-map.js's own maplibregl.ScaleControl, bottom-left on every
   map) only collides with the badge above once fullscreen moves that badge down into the SAME
   bottom-left corner (its own rule just above) -- normal view never has this conflict, since the
   badge sits top-left there instead. Pushed up above the badge rather than the reverse, since the
   badge already has an established, deliberate claim on the plain bottom-left corner. */
.novelearth-fullscreen-target:fullscreen .maplibregl-ctrl-bottom-left,
.novelearth-fullscreen-target:-webkit-full-screen .maplibregl-ctrl-bottom-left,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .maplibregl-ctrl-bottom-left{
  bottom:44px;
}

.novelearth-fullscreen-target:fullscreen .novelearth-controls-overlay,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-controls-overlay,

.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-controls-overlay{
  display:block; position:absolute; top:12px; left:12px; z-index:10;
  /* overflow:visible (not auto) -- the date-picker calendar (shared/css/date-picker-popup.css)
     drops open BELOW the date field as its own absolutely-positioned floating box, which isn't
     meant to be clipped/scrolled inside this panel at all, just to visually float past its
     bottom edge the way any dropdown does. overflow:auto was forcing an internal scrollbar to
     reach it instead, since anything visually overflowing a scrollable ancestor's box counts
     toward what it scrolls to reveal, position:absolute or not. */
  width:min(360px, calc(100% - 24px)); max-height:calc(100% - 24px); overflow:visible;
  background:rgba(15,16,22,0.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:12px;
}
/* Collapse toggle -- see golden-hour/css/07-graph.css's identical .map-fs-collapse-bar rule for the
   full reasoning (lets the whole panel below it disappear on a narrow viewport, where the full
   stack of toggles/date-nav/time slider can otherwise eat most of a phone's fullscreen height);
   mirrored here under NovelEarth's own :fullscreen target class. The bar/label/button class names
   are NOT novelearth-prefixed on purpose -- App.setupFullscreenControlsCollapse
   (shared/js/fullscreen-controls-collapse.js) creates the same elements regardless of which map
   calls it, so one shared set of class names covers every map AND NovelEarth. */
.map-fs-collapse-bar{ display:none; }
.novelearth-fullscreen-target:fullscreen .map-fs-collapse-bar,
.novelearth-fullscreen-target:-webkit-full-screen .map-fs-collapse-bar,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .map-fs-collapse-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.novelearth-fullscreen-target:fullscreen .novelearth-controls-overlay:not(.is-collapsed) .map-fs-collapse-bar,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-controls-overlay:not(.is-collapsed) .map-fs-collapse-bar,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-controls-overlay:not(.is-collapsed) .map-fs-collapse-bar{
  margin-bottom:10px;
}
.map-fs-collapse-label{
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.map-fs-collapse-btn{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border-radius:50%;
  border:1px solid var(--line-soft); background:var(--bg-panel-2); color:var(--ink-dim);
  cursor:pointer;
}
.map-fs-collapse-btn:hover{ color:var(--ink); border-color:var(--gold-text); }
.map-fs-collapse-btn svg{ width:16px; height:16px; display:block; }
.novelearth-controls-overlay.is-collapsed > *:not(.map-fs-collapse-bar){ display:none; }
.novelearth-fullscreen-target:fullscreen .novelearth-controls-overlay.is-collapsed,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-controls-overlay.is-collapsed,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-controls-overlay.is-collapsed{
  width:auto; max-height:none; overflow:visible;
}
.novelearth-fullscreen-target:fullscreen .novelearth-controls-overlay .novelearth-layers,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-controls-overlay .novelearth-layers,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-controls-overlay .novelearth-layers{
  background:none; border:none; border-radius:0; padding:0; margin:0 0 10px;
}
.novelearth-fullscreen-target:fullscreen .novelearth-controls-overlay .novelearth-element-block,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-controls-overlay .novelearth-element-block,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-controls-overlay .novelearth-element-block{
  border:none; border-radius:0; padding:0; margin:0;
}
/* The hover status and the legend are two SEPARATE floating boxes (not one shared panel) so the
   hover box can come and go on its own without the legend panel resizing/repositioning around
   it -- stacked with a small gap via this shared flex column, which is what's actually
   bottom-center-anchored; each child box below just supplies its own look. */
.novelearth-fullscreen-target:fullscreen .novelearth-bottom-stack,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-bottom-stack,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-bottom-stack{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:10;
  max-width:calc(100% - 24px);
}
/* Hidden until it actually has hover text -- see wireHoverStatus in js/01-novelearth-map.js,
   which toggles this on/off directly rather than leaving an empty box reserving space
   (shrink-to-fit width/padding here is what then keeps it from being wider than its own text
   once it IS showing something). */
.novelearth-fullscreen-target:fullscreen .novelearth-hover-status,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-hover-status,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-hover-status{
  background:rgba(15,16,22,0.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-soft); border-radius:999px; padding:5px 14px;
  margin:0; min-height:0; white-space:nowrap;
}
.novelearth-fullscreen-target:fullscreen .novelearth-legend-overlay,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-legend-overlay,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-legend-overlay{
  display:block;
  /* Shrink-to-fit (max-width only, no explicit width) so the panel hugs whatever's actually
     inside it instead of always reserving 920px of dead space -- the gradient bar below has its
     own FIXED pixel width (not a max-width relative to this panel), so it no longer depends on
     the panel's size to stay constant; the panel can shrink-wrap freely without the bar
     fluctuating along with it as Night/Twilight toggle legend items in and out. */
  max-width:100%;
  background:rgba(15,16,22,0.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:10px 18px;
}
.novelearth-fullscreen-target:fullscreen .novelearth-legend-overlay .graph-legend,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-legend-overlay .graph-legend,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-legend-overlay .graph-legend{
  margin:0;
}
/* Fixed pixel width (not a max-width relative to the panel, which now shrink-wraps its content)
   -- this is what actually keeps the bar's own size constant regardless of how many legend items
   above it are currently toggled on, and regardless of full screen's much wider viewport, without
   forcing the whole panel to stay artificially wide around it. */
.novelearth-fullscreen-target:fullscreen .novelearth-legend-overlay .gradient-legend,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-legend-overlay .gradient-legend,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-legend-overlay .gradient-legend{
  margin:8px auto 0; width:524px; max-width:100%;
}
/* Same 524px as the gradient-legend just above (tuned down from an earlier 2.5x-wider attempt that
   read as too large in fullscreen) -- still its own separate rule rather than folded back into the
   combined selector above, since the two may get tuned independently again later. */
.novelearth-fullscreen-target:fullscreen .novelearth-legend-overlay .bortle-legend,
.novelearth-fullscreen-target:-webkit-full-screen .novelearth-legend-overlay .bortle-legend,
.novelearth-fullscreen-target.maplibregl-pseudo-fullscreen .novelearth-legend-overlay .bortle-legend{
  margin:8px auto 0; width:524px; max-width:100%;
}