/* Page styles for base/templates/base/map_page.html.
   Moved out of the template unchanged; linked from the same point in the
   page, so these rules still resolve in exactly the order they used to. */

/* No width override any more. This page renders in the same `.page-content`
   as the public map — the public shell's ordinary measure, --nh-page-measure
   in static/css/tokens.css — so the card list gets the geometry the shared
   stylesheet was written for: `#sensor-dashboard` is `flex: 1` beside a
   `flex: 2` map with a 20px gap, landing at ((measure - 40) - 20) / 3. At the
   1400px measure that is ~447px, and at the 1300px it was before, ~413px:
   both under the 455px that `repeat(auto-fit, minmax(220px, 1fr))` needs for
   a second column, which is why one column of cards is what you get either
   way. The map itself takes the rest, so the extra width goes where it is
   worth having. If the ordinary measure ever passes ~1425px this list gains a
   second column of cards — that is the number to check. Under main.html this
   had to be reconstructed with an explicit 1340px (its `.container` padding
   is content-box); inheriting the right shell states it once instead. */
.page-content { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

/* The counts and the edit links travel together, immediately after the picker
   that names the map — they are one label for it, and wrapping them as a unit
   keeps "12 sensors · 3 layers" against the name it counts rather than adrift
   at the far end of the row. */
.mp-id { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; flex:0 1 auto; }
.mp-id .meta { color:var(--ink-3); font-size:0.85rem; }
/* Drawn as links, because they are. Both used to be the page's default anchor
   colour with no underline, and the only thing marking either as clickable was
   the arrow one of them carried — so "All maps" beside it read as a label. An
   underline says it without spending a character, and it says it for both. */
.mp-id a {
  font-size:0.85rem;
  color:var(--brand-blue-deep, var(--link));
  text-decoration:underline;
  text-underline-offset:2px;
}
.mp-id a:hover { color:var(--brand-blue-deeper, #175571); }
.mp-id a:focus-visible { outline:2px solid var(--brand-blue, var(--accent-ring)); outline-offset:2px; }
body.dark-mode .mp-id a { color:var(--brand-blue-light, var(--link)); }
/* The map's own words: a standing description, and notes that change with
   conditions. The notes are the louder of the two on purpose — they are the
   part a returning viewer is meant to re-read.

   The description keeps only what is specific to it here: author newlines are
   meaningful, and it is a shade darker than the public map's source note
   because it is the author's own text about this map, not boilerplate about
   where the tiles came from.

   It reads inside its own dropdown now (.mp-drop below), captioned "Notes" by
   the summary that opens it — which is where the inline "Notes:" tag it used to
   carry went. */
.mp-about { color:var(--ink-2); white-space:pre-wrap; }

/* --- the band sits ON the map, not high above it ------------------------
   The page's own top padding clears the fixed navbar; everything after that
   was margin stacked on margin — a title block, a description, three
   permanent bullets, the notes card and the page switcher, all before the
   first pixel of map. On a laptop that put the map itself below the fold on
   a page whose entire purpose is the map. The text is unchanged; what
   changed is that it is spent in one band immediately above the map instead
   of a column of separated blocks. */
/* 74px cleared the navbar and nothing more, so the title started hard
   against it. The extra few pixels are breathing room between the fixed bar
   and the first line of the band — the one place on this page where space is
   worth spending, because it is what makes the band read as the page's own
   heading rather than as part of the chrome above it. */
.page-content { padding-top: 86px; }
/* ONE row: the picker that names the map, what it holds, the links out, and the
   two dropdowns. map.css aligns the band's items to their FLOOR, which is right
   when the band is a heading beside two columns of prose; here every item is a
   control or a single line of text, so they line up on their centres and the
   row reads as one bar. */
.map-head {
  margin-bottom: 4px;
  row-gap: 6px;
  /* Wider than the gaps INSIDE the name cluster (.mp-id, 14px), which is what
     makes the row read as three things rather than one long strip: the picker
     and the counts-and-links belong to each other, while "How to use this map"
     and "Notes" are separate controls that were running into "All maps" at
     18px. */
  column-gap: 32px;
  align-items: center;
}
/* The picker is IN the row now, so its own stylesheet's trailing 12px would
   push the row's contents apart from the inside. Selected through the band to
   keep this scoped to the map page. */
.map-head .page-switcher { margin: 0; }
.mp-id { align-items: center; }

/* --- the two dropdowns --------------------------------------------------
   Notes and the tips are the same kind of thing — words about the map that are
   read once — so they are the same control, side by side at the end of the row.

   The panel is ABSOLUTE, over the map. In flow, opening either one grew the
   band and pushed the map down, which is the whole cost the band was written to
   avoid, and it re-centred every other item on the row on the way. Over the map
   it costs nothing until it is asked for. z-index clears Leaflet's own controls
   (.leaflet-control sits at 800 in leaflet.css, panes lower still). */
.mp-drop { position:relative; flex:0 0 auto; }
.mp-drop > summary {
  cursor:pointer; font-size:0.8rem; color:var(--ink-3); list-style-position:outside;
  white-space:nowrap;
}
.mp-drop > summary:focus-visible { outline:2px solid var(--accent-ring); outline-offset:2px; }
.mp-drop__panel {
  position:absolute; z-index:1200; top:calc(100% + 7px); left:0;
  width:max-content; max-width:min(60ch, calc(100vw - 40px));
  padding:10px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); box-shadow:0 10px 26px rgba(0,0,0,0.14);
}
/* The last dropdown on the row hangs off its RIGHT edge: anchored left, a 60ch
   panel opened from the far side of a wide band runs off the page. */
.mp-drop--right .mp-drop__panel { left:auto; right:0; }
.mp-drop .map-tips { margin:0; }
.mp-drop .map-head__note { max-width:none; }
body.dark-mode .mp-drop__panel {
  background:var(--field); border-color:var(--line); box-shadow:0 10px 26px rgba(0,0,0,0.5);
}
@media (max-width:640px) {
  /* IN FLOW on a phone, not a hanging card at all. The previous rule kept
     `position:absolute; left:0; width:calc(100vw - 40px)` — but that left edge
     is the SUMMARY's, not the viewport's, so any dropdown that had wrapped past
     mid-row (Notes, routinely) pushed its panel off the right edge of the
     screen with no way to scroll to it. A static panel simply expands the row:
     the open dropdown takes the full row width, the map slides down, and
     nothing can be cut off because nothing is positioned. */
  .mp-drop[open] { flex:1 1 100%; }
  .mp-drop__panel { position:static; width:100%; max-width:none; margin-top:7px; }
  .mp-drop--right .mp-drop__panel { left:auto; right:auto; }
}
@media (max-width:768px) { .page-content { padding-top: 90px; } }

/* --- Cards under the map, not beside it ---------------------------------
   map.css lays the dashboard out as a `flex: 1` column next to a `flex: 2`
   map, which caps every card at about a third of the page — the reason they
   read as cramped. Stacking gives each card the map's full width to spend,
   and the page ends up head band, then map, then cards, in the order the
   markup already has them.

   The card list also stops being a nested scroll region. Beside the map it
   had to be one (it was competing with the map for the same 80vh); underneath
   it can simply be as tall as it is, and the page's own scroll does the work
   — a scroll box inside a scrolling page is the thing that made this list
   awkward to get through on a phone. */
.map-container { display:block; position:relative; }
#map { width:100%; }
#sensor-dashboard {
  height:auto; max-height:none; overflow:visible; margin-top:16px;
  /* Wide cards rather than many narrow ones: two across a 1300px page, and
     one on anything narrower, which is the single column that reads best. */
  grid-template-columns:repeat(auto-fit, minmax(min(560px, 100%), 1fr));
}
@media (max-width:768px) {
  #sensor-dashboard { height:auto; max-height:none; overflow:visible; }
}
/* The map's own notes. A hairline box on the neutral sunk fill — NOT the
   cream ground with a gold edge it used to have, which was a highlighter
   stripe down a page that is otherwise all map. The uppercase "NOTES" label
   below is what says whose words these are; the box only has to hold them
   apart from the map. */
.mp-notes { margin:0 0 6px; padding:8px 12px; max-width:80ch; border-radius:var(--r-sm);
            border:1px solid var(--line); background:var(--surface-2);
            color:var(--ink-2); font-size:0.88rem; line-height:1.5; white-space:pre-wrap; }
.mp-notes h2 { margin:0 0 3px; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--warning-ink); }
body.dark-mode .mp-about { color:var(--ink-2); }
body.dark-mode .mp-notes { background:var(--surface-2); border-color:var(--line); color:var(--ink); }
table.gj-popup { font-size:0.8rem; border-collapse:collapse; }
table.gj-popup th { text-align:left; padding-right:8px; color:var(--ink-3); font-weight:600; vertical-align:top; }
/* No height override here on purpose. map.css already gives both panes 80vh,
   and 45vh/50vh under 768px, and this page used to restate that at 72vh — the
   one number that made the two maps visibly different heights for no reason a
   reader could find. Parity with the public map is the point; the shared
   stylesheet is where a change to it belongs, so it lands on both. */