html,
body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
/* links to the rest of the site (see ../../_quarto.yml) -- the map isn't rendered by
   Quarto, so this stands in for its navbar, matching the theme's colors */
#site-nav {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  background: #000000;
  padding: 8px 12px;
  font: 15px/1.4 Inter, sans-serif;
}
#site-nav a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
#site-nav a:hover,
#site-nav a[aria-current],
#site-nav summary[aria-current],
#site-nav summary:hover {
  color: #ffde17;
}
/* the dropdowns, like Quarto's navbar menus */
#site-nav .nav-menu {
  position: relative;
}
#site-nav summary {
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
#site-nav .nav-menu > div {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  /* over the map and its controls */
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: max-content;
  background: #000000;
  padding: 8px 12px;
  border-radius: 0 0 4px 4px;
}
#site-nav .site-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  color: #ffffff;
  font-size: 17px;
}
/* same as theme.scss: the logo's paths are black with no fill of their own */
#site-nav .site-title img {
  height: 36px;
  filter: invert(1);
}
#disclaimer-banner {
  flex: none;
  background: #fff3cd;
  color: #664d03;
  border-bottom: 1px solid #ffe69c;
  padding: 6px 12px;
  font: 13px/1.4 sans-serif;
  text-align: center;
}
#map-container {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
/* the legend, scale, and attribution, as a column beside the map so none of them cover it */
#sidebar {
  flex: none;
  overflow-y: auto;
  padding: 8px 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 13px/1.4 sans-serif;
}
#map-area {
  position: relative;
  flex: 1;
  min-width: 0;
}
#map {
  width: 100%;
  height: 100%;
}
/* on a phone, a column beside the map would leave it too narrow -- stack the sidebar above it instead, scrolling if it's long */
@media screen and (max-width: 700px) {
  #map-container {
    flex-direction: column;
  }
  #sidebar {
    max-height: 35vh;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }
}
/* the scale and attribution are MapLibre controls, just rendered in the sidebar rather than in corners of the map (see main.js). Together at the bottom of the sidebar, however tall it is -- the attribution in grey, so it doesn't compete with the legend. */
#map-scale {
  margin-top: auto;
}
#map-places {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}
#map-places[hidden] {
  display: none;
}
#overview-map {
  flex: none;
  height: 160px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
#map-scale .maplibregl-ctrl-scale {
  margin: 0;
}
#map-attribution .maplibregl-ctrl-attrib {
  margin: 0;
  padding: 0;
  background: none;
  font-size: 11px;
  max-width: 240px;
  color: #888888;
}
#map-attribution .maplibregl-ctrl-attrib a {
  color: inherit;
}

@media print {
  @page {
    size: landscape;
    margin: 0.4in;
  }
  /* #map isn't forced to 100vh here -- it already fills whatever's left below the
     banner via the flex layout below; hardcoding it on top of that overflowed the
     page by the banner's own height */
  html,
  body {
    height: 100vh;
    width: 100vw;
  }
  /* the yellow background/border read as a screen warning color; on paper, plain
     black text is more legible and doesn't rely on background-graphics being on */
  #disclaimer-banner {
    color: #000000;
    border-bottom: none;
  }
  /* zoom buttons are meaningless on paper; the compass sits in the same top-right
     group (see the NavigationControl call below) and stays put, so only the
     zoom-in/out buttons are targeted here rather than hiding the whole corner */
  .maplibregl-ctrl-top-right .maplibregl-ctrl-zoom-in,
  .maplibregl-ctrl-top-right .maplibregl-ctrl-zoom-out {
    display: none !important;
  }
  /* geolocate and full screen are each their own group (no "you are here" or full
     screen on a printed page); unlike zoom each is the only button in its box, so
     hiding the whole group (not just the button) avoids leaving an empty bordered
     square behind */
  .maplibregl-ctrl-top-right
    .maplibregl-ctrl-group:has(.maplibregl-ctrl-geolocate),
  .maplibregl-ctrl-top-right
    .maplibregl-ctrl-group:has(.maplibregl-ctrl-fullscreen) {
    display: none !important;
  }
  /* the compass's arrow is a background-image, which browsers drop when "print
     backgrounds" is off unless told otherwise -- same issue as the legend swatches
     below, just on a control the library styles rather than one of ours */
  .maplibregl-ctrl-icon,
  .maplibregl-ctrl-group {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  /* the attribution control is a <details>/<summary> toggle; the summary is already
     hidden on screen (compact:false skips it), but print rendering brings back its
     native disclosure marker (the arrow) and the space it reserves -- kill it explicitly */
  .maplibregl-ctrl-attrib-button {
    display: none !important;
  }
  .maplibregl-ctrl-attrib-button::-webkit-details-marker {
    display: none !important;
  }
  .maplibregl-ctrl-attrib-button::marker {
    content: "" !important;
  }
  /* the toggle can't be clicked on paper, but the swatch + label still work as a legend key */
  #layer-controls input[type="checkbox"] {
    display: none;
  }
  /* a search box (or site navigation) is meaningless on paper */
  #site-nav,
  #place-search {
    display: none;
  }
}

/* collapses/expands the sidebar -- styled like MapLibre's own buttons (e.g. zoom) in the opposite corner */
#sidebar-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  width: 29px;
  height: 29px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  font: bold 18px/29px sans-serif;
  color: #333333;
  cursor: pointer;
}
#sidebar-toggle:hover {
  background: #f2f2f2;
}
/* the sidebar is above the map on a phone (see above), so the arrows point up/down rather than left/right */
@media screen and (max-width: 700px) {
  #sidebar-toggle {
    transform: rotate(90deg);
  }
}
#map-container.sidebar-collapsed #sidebar {
  display: none;
}
/* a printout without its legend isn't much use, so it's always there on paper */
@media print {
  #map-container.sidebar-collapsed #sidebar {
    display: flex;
  }
  #sidebar-toggle {
    display: none;
  }
}
#live-data-spinner {
  position: absolute;
  top: 12px;
  /* right of the sidebar toggle */
  left: 48px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: 3px solid #ffffff;
  border-top-color: #e0342a;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  animation: live-data-spin 0.8s linear infinite;
}
#live-data-spinner[hidden] {
  display: none;
}
@keyframes live-data-spin {
  to {
    transform: rotate(360deg);
  }
}

/* in the sidebar under the town name(s), rather than floated over the map */
#place-search {
  position: relative;
  margin: 0;
}
/* over the rest of the sidebar, rather than pushing it down */
#place-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#place-search-suggestions[hidden] {
  display: none;
}
#place-search-suggestions li {
  padding: 5px 10px;
  cursor: pointer;
}
#place-search-suggestions li:hover,
#place-search-suggestions li[aria-selected="true"] {
  background: #eef3fb;
}
#place-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font: 13px sans-serif;
}

#layer-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#layer-controls label,
#layer-controls .sub-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
/* indented to line up with the text of the row they belong to (past its checkbox and swatch) */
#layer-controls .sub-items {
  margin-left: 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* on paper, minus the 25px the hidden checkbox (and its gap) took up, so they still line up with their row's text -- after the rule above, so it wins */
@media print {
  #layer-controls .sub-items {
    margin-left: 23px;
  }
}
#layer-controls .swatch {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex: none;
  /* browsers drop background colors/gradients when printing unless told otherwise,
     which left these blank -- they're the whole point of a legend */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* matches the low-to-high colors of RISK_BINS in buildings.js -- the only key for them, deliberately without the individual levels */
#layer-controls .swatch.buildings {
  background: linear-gradient(135deg, #fcbba1, #fb6a4a, #67000d);
  border-color: #4d4d4d;
}
/* no key for a layer that isn't shown, on screen or on paper */
#layer-controls label:has(input:not(:checked)) + .layer-key {
  display: none;
}
/* matches FLAME_LENGTH_CLASSES below */
/* the middle (orange) class's hatch -- see hatchCss in rasters.js (9.9px is
   HATCH_SIZE / sqrt(2)) */
#layer-controls .swatch.flame-length {
  background:
    repeating-linear-gradient(
      -45deg,
      rgb(240, 120, 0) 0 1px,
      transparent 1px 9.9px
    ),
    #ffffff;
}
/* one row per class: its color + what that flame length means for attack */
/* the flame length key: one row per class, with its pattern, a bold name, and a description */
.table-key {
  margin: 0 0 4px 21px;
  font-size: 10px;
  line-height: 1.2;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 2px 5px;
  align-items: center;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* big enough to show a few repeats of the flame length hatch, so it reads as a pattern */
.table-key .cell {
  width: 32px;
  height: 16px;
  border: 1px solid #4d4d4d;
}
.table-key .term {
  font-weight: bold;
  white-space: nowrap;
}
#layer-controls .swatch.roads {
  background: #2b2b2b;
}
#layer-controls .swatch.driveways {
  background: #6a2fb8;
}
#layer-controls .swatch.trails {
  background: #557a12;
}
#layer-controls .swatch.hillshade {
  background: linear-gradient(135deg, #ffffff, #6b6b6b);
}
/* symbols drawn in icons.js -- see buildLegendKeys in legend.js */
#layer-controls .swatch.icon {
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* stands in for the boxed weight limits on the map itself */
#layer-controls .swatch.sign {
  box-sizing: border-box;
  background: #ffffff;
  border-color: #000000;
  font: bold 10px/14px sans-serif;
  text-align: center;
}
/* yellow, like the weight limit boxes themselves (see icons.js) */
#layer-controls .swatch.sign.weight-limit {
  background: #ffd200;
  border-radius: 3px;
}
#layer-controls .swatch.hydrants {
  background: #e0342a;
  border-radius: 50%;
}
#layer-controls .swatch.water-sources {
  background: #1f5fa8;
  border-radius: 50%;
}
/* smaller than the other point swatches, same as the pools on the map */
#layer-controls .swatch.pools {
  background: #6baed6;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin: 3px;
}
/* On paper the map is what matters, so the sidebar is a fixed width narrower than on screen (where it's as wide as its longest line), with longer lines wrapping to fit. At the end of the stylesheet, so it wins over the screen styles above. */
@media print {
  #sidebar {
    width: 224px;
  }
  #layer-controls label,
  #layer-controls .sub-item {
    white-space: normal;
  }
  #map-attribution .maplibregl-ctrl-attrib {
    max-width: none;
  }
}