/* HL&P energy map — shared by the public site's Map page and the HIED edition. Generated from
   scripts/mockups/3d-full-map_template_2026-10-21T0600.html (step 2, Dave 2026-10-21); edit here from now on. */
  #hlp-map {
    --teal: #13353f; --sage: #5F6F5D; --ocean: #081c28; --white: #ffffff; --light-sage: #a8b5a3; --navy: #16365C;
    --dot-utility: #7C3AED; --dot-ipp: #2BE0CF; --dot-kiuc: #ffffff; --sub: #F7CF00; --retired: #9a9a9a; --dot-var: #A3E635;
  }
  #hlp-map, #hlp-map * { box-sizing: border-box; }
  #hlp-map { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--ocean); color: #000;
             font-family: 'BC Sans', system-ui, -apple-system, sans-serif; }
  #hlp-map .hlp-globe { position: absolute; inset: 0; }
  .panel { position: absolute; z-index: 5; background: rgba(255,255,255,.96); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.35); font-size: 13px; }
  .panel b.h { color: var(--sage); }
  .panel button.tg { display: none; font: inherit; font-weight: 700; color: var(--sage); background: none; border: 0; padding: 0; cursor: pointer; }

  /* Views panel: builds to fly to, and View From. */
  .views { top: 10px; left: 10px; padding: 8px 10px; max-width: 250px; }
  .views button.b { display: block; width: 100%; text-align: left; font: inherit; background: none; border: 1px solid #ccc; border-radius: 3px;
                    padding: 5px 8px; margin: 4px 0; cursor: pointer; color: #000; }
  .views .vf { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
  .views .vf button { font: inherit; background: none; border: 1px solid #ccc; border-radius: 3px; padding: 4px; cursor: pointer; color: #000; }
  .views .hint { font-size: 11px; margin-top: 6px; }
  .views .eye { font-size: 12px; font-weight: 700; margin-top: 6px; color: #16365c; }

  /* Grouped layer box (Dave 2026-10-20 "Group it"). */
  /* Height from the map's own box, not the window: measured from the window the box ran past the map's foot and its last
     groups (ALISH, soils) were cut off (Dave 2026-10-25). overscroll-behavior keeps a scroll in the box. */
  .hlp-layers { top: 10px; right: 10px; padding: 6px 10px 8px; max-width: 380px; max-height: calc(100% - 70px); overflow-y: auto;
    overscroll-behavior: contain; }
  .hlp-layers details { border-top: 1px solid #ddd; padding: 3px 0; }
  .hlp-layers details:first-child { border-top: 0; }
  .hlp-layers summary { font-weight: 700; color: var(--sage); cursor: pointer; padding: 2px 0; list-style-position: inside; }
  .hlp-layers summary .hl-on { font-weight: 400; color: #000; }
  /* Rows at least 24 px tall with 16 px boxes: comfortable touch targets (accessibility check, 2026-10-24). */
  .hlp-layers label { display: flex; gap: 8px; align-items: center; min-height: 24px; margin: 1px 0 1px 14px; cursor: pointer; }
  .hlp-layers input { margin: 0; flex: none; width: 16px; height: 16px; }
  .hlp-layers .ns, .hlp-layers .zo { white-space: nowrap; }

  /* Legend. */
  .legend { bottom: 34px; left: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.6; max-width: 300px; max-height: 55vh; overflow-y: auto; }
  .legend b { color: var(--sage); }
  .legend .lg-title { font-weight: 700; font-size: 14px; color: var(--sage); margin-bottom: 2px; }
  .legend .row { display: flex; align-items: center; gap: 8px; }
  .legend .sw { width: 22px; display: inline-flex; justify-content: center; align-items: center; flex: none; }
  .legend .ln { width: 22px; height: 0; border-top: 3px solid; }
  .pt { border-radius: 50%; display: inline-block; }
  .pt.firm { background: var(--c); border: 1.5px solid rgba(0,0,0,.55); }
  .pt.ring { background: transparent; border: 2px solid var(--dot-var); }
  .pt.planned { background: transparent; border: 2.5px dashed #ff9f1c; }
  .pt.retired { background: var(--retired); border: 1px solid #333; }
  .sq { background: var(--sub); border: 1px solid #000; display: inline-block; }

  /* Click card (plants, lines, zones, parcels, build parts). */
  .pop { position: absolute; z-index: 6; background: #fff; border-radius: 6px; box-shadow: 0 3px 14px rgba(0,0,0,.4); padding: 12px 14px 10px;
         font-size: 13px; line-height: 1.4; min-width: 220px; max-width: 330px; display: none; }
  .pop .x { position: absolute; top: 4px; right: 8px; background: none; border: 0; font-size: 18px; cursor: pointer; color: #000; }
  .pop b.n { display: block; font-size: 14px; color: var(--sage); margin: 0 18px 4px 0; }
  .pop .k { font-weight: 700; }
  .pop table { border-collapse: collapse; margin-top: 6px; width: 100%; font-size: 12px; }
  .pop th { background: var(--navy); color: #fff; font-weight: 700; padding: 2px 4px; text-align: left; }
  .pop td { padding: 2px 4px; }
  .pop tr:nth-child(even) td { background: #f5f5f5; }
  .pop .src { margin-top: 6px; font-size: 11px; }

  /* Credits: Esri requires "Powered by Esri" visible; data credits follow. Cesium's logo is not required (not using ion). */
  .credits { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.85); font-size: 11px; padding: 3px 8px; }
  .cesium-credit-logoContainer, .cesium-viewer-bottom, #cesiumCredits { display: none !important; }
  .credits .cr-tg { display: none; font: inherit; font-weight: 700; color: var(--sage); background: none; border: 0; padding: 0; cursor: pointer; }

  @media (max-width: 640px) {
      .panel button.tg { display: block; }
    .views:not(.open) .vbody, .hlp-layers:not(.open) .hl-body, .legend:not(.open) .lg-body { display: none; }
    .legend .lg-title { display: none; }
    .views { max-width: 190px; font-size: 12px; }
    .hlp-layers { max-width: 240px; font-size: 12px; }
    .legend { max-width: 200px; font-size: 11px; bottom: 30px; }
    .credits { font-size: 10px; }
    .credits:not(.open) .more { display: none; }
    .credits .cr-tg { display: inline; }
  }