/* Shared by every showcase page's interactive map, loaded after the page's own page.css. showcase-map.js moves the
   Play button, slider, period and legend into .sc-dock right under the map. On a phone (under 900 px) the map is sized
   to leave room for the dock, the dock sticks to the bottom of the screen while the map is in view, and the readout
   takes only the room it needs, so the map, the legend and Play are on screen together while the map plays. From
   900 px the dock heads the panel beside the map. Also: 44 px touch targets, a quieter Geoscience Australia base map
   (map.js gives that tile layer the class sc-base-ga) and a lighter look for shapes with no value. */
.sc-dock { display: grid; gap: 6px; padding: 10px 14px; background: #faf8f1; border-top: 1px solid var(--rule, #a9b8cf); }
.sc-dock .sc-legend { padding-top: 6px; }
.sc-dock .sc-hint { margin: 0; }
/* a dock holding only the legend (a map with no time slider) needs no rule above it */
.sc-dock > .sc-legend:first-child { border-top: 0; padding-top: 0 !important; }
/* the base map behind the data, quieter: fewer colours, softer road shields and labels. The attribution is untouched */
.sc-base-ga { filter: saturate(.35) contrast(.82) brightness(1.08); }
/* a shape with no value for what is shown: a pale fill and a dashed edge, matched by its legend key */
.sc-legend i.sc-none-key { background: #f1eee7 !important; border: 1px dashed #8d887c; }

@media (max-width: 899px) {
  .sc-docked { --sc-dock-h: 150px; }
  /* map plus dock fit the screen (svh: the height with the browser's bars showing) */
  .sc-docked #sc-map { height: max(240px, min(62vh, calc(100svh - var(--sc-dock-h) - 16px))); min-height: 0; max-height: 640px; }
  .sc-docked .sc-dock { position: sticky; bottom: 0; z-index: 500; padding: 8px 12px 10px; gap: 4px; background: rgba(250, 248, 241, .97); box-shadow: 0 -4px 12px rgba(22, 60, 110, .12); }
  .sc-docked .sc-time { gap: 8px; }
  .sc-docked .sc-time button { min-height: 44px; min-width: 64px; padding: 6px 10px; }
  .sc-docked .sc-time input { height: 44px; margin: 0; }
  .sc-docked .sc-time output { font-size: 16px; }
  /* a slim legend: one or two lines of keys under a short title */
  .sc-docked .sc-dock .sc-legend { gap: 2px 10px; font-size: 11.5px; line-height: 1.3; padding-top: 4px; }
  .sc-docked .sc-dock .sc-legend p { font-size: 11.5px !important; line-height: 1.3 !important; }
  .sc-docked .sc-dock .sc-legend i { width: 13px; height: 10px; }
  .sc-docked .sc-dock .sc-hint { font-size: 12px !important; }
  /* the readout takes the room it needs, no more (it held 230 px open even when empty) */
  .sc-docked .sc-info { min-height: 0; }
  .sc-docked .sc-info:empty { display: none; }
  .sc-docked .sc-panel button { min-height: 44px; }
  /* every map's readout on a phone, docked or not (the facilities map and the maps with no slider held 230 px open) */
  .sc-info { min-height: 0 !important; }
  .sc-info:empty { display: none; }
  .sc-docked .leaflet-control-attribution { font-size: 10px; line-height: 1.3; }
}

/* two maps stacked on a phone: both fit over the dock */
@media (max-width: 699px) {
  .sc-docked.sc-twin .sc-map { height: max(200px, calc((100svh - var(--sc-dock-h) - 96px) / 2)); min-height: 0; max-height: 420px; }
}
@media (min-width: 700px) {
  .sc-docked.sc-twin .sc-panel { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .sc-docked:not(.sc-twin) { grid-template-rows: auto 1fr; }
  .sc-docked:not(.sc-twin) #sc-map { grid-column: 1; grid-row: 1 / span 2; }
  .sc-docked:not(.sc-twin) .sc-dock { grid-column: 2; grid-row: 1; border-top: 0; border-left: 1px solid var(--rule, #a9b8cf); padding: 12px 14px 4px; }
  .sc-docked:not(.sc-twin) .sc-panel { grid-column: 2; grid-row: 2; }
}

/* breadcrumbs above each showcase's kicker: Home / Showcases / this page */
.sc-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 500 13px var(--mono, ui-monospace, monospace); color: var(--muted, #5b6573); margin: 0 0 10px; }
.sc-crumbs a { color: var(--ink, #1d4f91); text-decoration: none; }
.sc-crumbs a:hover { text-decoration: underline; }