/* SoCal Hard Tech Map: a full-screen map in the map family's layout.

   Companies panel top-left (open on a desktop; at 768px and under, closed
   until asked for, over a backdrop), zoom top-right, credits pill
   bottom-right, as on LA Bus Lanes and the census map. Along the
   bottom runs the timeline, which the other maps don't have: the legend and
   the credits pill sit a row above it, the legend in the bottom-right on a
   desktop (see below). The menu button, panel, timeline and legend use the
   .ob-panel kit from ui.css, so their surface, border, radius and blur come
   from brand.css.

   Only the basemap changes with the theme; the panels stay dark, as on the
   other maps (brand.css makes them nearly opaque over the light basemap). */

:root {
  /* The marks, one set per basemap. Purple is a company; orange is one that
     is new on this poster. Each clears 3:1 against its basemap's ground, and
     the pair is told apart by more than hue: the legend, the tooltip and the
     list all say "New" in words. */
  --hm-dot: var(--ob-purple);
  --hm-new: var(--ob-orange);
  --hm-stroke: var(--ob-bg);       /* a dot's outline */
  --hm-ring: var(--ob-fg);         /* the selected company's ring */
  --hm-move: var(--ob-fg);         /* the dashed line of a move */
  --hm-agg: rgba(192, 132, 252, 0.28);    /* a place's disc, zoomed out */
  --hm-agg-edge: var(--ob-purple);
  --hm-agg-text: var(--ob-fg);
  --hm-stack-text: var(--ob-on-accent);   /* a shared dot's count, on its fill */
  --hm-near-bg: rgba(3, 7, 18, 0.75);     /* a shared hollow dot's ground */
  --hm-near-text: var(--ob-fg);
  --hm-tip: #111827;               /* a tooltip's ground, as Traffic Violence's --sd-tip */
  --hm-light-ground: #f2f3f0;      /* the light basemap's land */
  --hm-panel-w: 320px;
  --hm-time-h: 98px;
  /* What sits on the bottom edge on other maps sits a row above the timeline. */
  --hm-above-time: calc(var(--ob-map-inset) + var(--hm-time-h) + 8px);
}
html[data-map-theme="light"] {
  --hm-dot: #7e22ce;               /* 6.4:1 on the light basemap's ground */
  --hm-new: #c2410c;               /* 4.9:1 */
  --hm-stroke: #ffffff;
  --hm-ring: #111827;
  --hm-move: #111827;
  --hm-agg: rgba(126, 34, 206, 0.18);
  --hm-agg-edge: #7e22ce;
  --hm-agg-text: #3b0764;
  --hm-stack-text: #ffffff;
  --hm-near-bg: rgba(255, 255, 255, 0.85);
  --hm-near-text: #111827;
}

body.hm-page {
  margin: 0;
  background: var(--ob-bg);
  color: var(--ob-fg);
  font-family: var(--ob-font);
}
html[data-map-theme="light"] body.hm-page { background: var(--hm-light-ground); }

/* Every element the page shows and hides sets its own display, which would
   override [hidden]. */
.hm-page [hidden] { display: none !important; }

/* The landmark around the map and its panels. */
.hm-main { position: absolute; inset: 0; }
#map { position: fixed; inset: 0; z-index: 0; background: inherit; }

/* Tucked above the screen until a keyboard reaches it, then shown under the
   header bar. */
.hm-skip {
  position: absolute; left: 12px; top: -48px; z-index: 10001;
  padding: 8px 12px; border-radius: var(--ob-radius-sm);
  background: var(--ob-purple); color: var(--ob-on-accent);
  font: 13px var(--ob-font); text-decoration: none;
}
.hm-skip:focus { top: calc(var(--ob-bar-h) + 8px); }

/* ---- Companies button and panel ----------------------------------------- */

.menu-btn {                        /* the surface is .ob-panel's */
  position: fixed; top: var(--ob-map-inset); left: var(--ob-map-inset); z-index: 9995;
  min-height: var(--ob-control-h-lg);
  padding: 8px 14px;
  font: 600 13px var(--ob-font);
  cursor: pointer;
}

.panel {
  position: fixed; top: 56px; left: var(--ob-map-inset); z-index: 9990;
  display: flex; flex-direction: column; gap: 10px;
  box-sizing: border-box;
  width: var(--hm-panel-w);
  max-width: calc(100vw - 2 * var(--ob-map-inset));
  max-height: calc(100vh - 56px - var(--ob-bar-h) - var(--ob-map-inset));
  max-height: calc(100dvh - 56px - var(--ob-bar-h) - var(--ob-map-inset));
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform .25s ease, visibility 0s;
}
.panel.closed {
  transform: translateX(calc(-100% - 24px));
  visibility: hidden;                         /* off-screen is not enough: M2 */
  transition: transform .25s ease, visibility 0s linear .25s;
}
/* Focus moves to the panel when it opens on a phone; brand.css's ring shows
   only when a keyboard put it there. */
.panel:focus:not(:focus-visible) { outline: none; }
.panel h1, .panel h2, .panel h3, .panel p { margin: 0; }
.ob-panel-sub cite { font-style: normal; }

.hm-backdrop { position: fixed; inset: 0; z-index: 9989; background: rgba(3, 7, 18, 0.6); }

.hm-readout { font-size: 0.8125rem; color: var(--ob-muted); }
.hm-readout strong { color: var(--ob-fg); font-weight: 600; }

.hm-filters { display: flex; flex-direction: column; gap: 8px; }
.hm-filters .ob-label { font-size: 0.75rem; }
.hm-input { font-size: 0.875rem; min-height: var(--ob-control-h-lg); box-sizing: border-box; }
.hm-check { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 0.8125rem; cursor: pointer; }
.hm-check input { margin: 0; width: 16px; height: 16px; }
.hm-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--ob-radius-sm);
  background: rgba(192, 132, 252, 0.12);
  font-size: 0.8125rem;
}

.hm-linkbtn {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ob-purple);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---- the list ------------------------------------------------------------ */

.hm-results:focus { outline: none; }
.hm-results-h { margin-bottom: 4px; }
.hm-list { list-style: none; margin: 0; padding: 0; }
.hm-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--ob-radius-sm);
  background: none;
  color: var(--ob-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hm-row:hover { background: rgba(255, 255, 255, 0.05); }
.hm-row[aria-current="true"] { background: rgba(192, 132, 252, 0.16); }
.hm-row-name { font-size: 0.875rem; font-weight: 600; }
.hm-row-sub { font-size: 0.75rem; color: var(--ob-muted); }
/* The kit's .ob-badge, a size smaller beside a name. */
.hm-row-name .ob-badge, .hm-detail h2 .ob-badge { margin-left: 6px; padding: 0 6px; font-size: 0.6875rem; vertical-align: 1px; }
.hm-empty { font-size: 0.8125rem; color: var(--ob-muted); }

/* ---- one company ----------------------------------------------------------- */

.hm-detail { display: flex; flex-direction: column; gap: 10px; }
.hm-detail:focus { outline: none; }
.hm-detail h2 { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.hm-detail a { color: var(--ob-purple); }
.hm-detail-site { font-size: 0.8125rem; overflow-wrap: anywhere; }
.hm-locs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hm-loc { font-size: 0.8125rem; line-height: 1.4; }
.hm-loc-place { font-weight: 600; }
.hm-loc-note { color: var(--ob-muted); font-size: 0.75rem; }
.hm-history { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 0.8125rem; }
.hm-history dt { color: var(--ob-muted); white-space: nowrap; }
.hm-history dd { margin: 0; }
.hm-history .hm-off { color: var(--ob-muted); font-style: italic; }
.hm-detail-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* ---- footer ---------------------------------------------------------------- */

.hm-foot {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--ob-panel-border);
  font-size: 0.75rem;
  color: var(--ob-muted);
  /* Pinned to the bottom of the panel, so the basemap switch, About and downloads
     are in reach without scrolling past the whole company list. Opaque, so list rows
     do not show through it. */
  position: sticky; bottom: -12px; z-index: 2;
  background: var(--ob-surface-flat);
  background: rgb(from var(--ob-panel) r g b / 1);   /* the panel's own color, opaque */
  /* Reach over the panel's own padding (12px 14px) so nothing shows around it. */
  margin: 2px -14px -12px; padding: 10px 14px 20px;
}
/* An opened About scrolls inside the footer rather than covering the list. */
.hm-about[open] { max-height: 38vh; overflow-y: auto; }
/* A link that jumps over the list (one Tab stop per company) to these options. */
.hm-skip-list:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hm-skip-list { display: inline-block; margin-bottom: 6px; font-size: 0.8125rem; color: var(--ob-purple); }
.hm-theme { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hm-theme .ob-label { font-size: 0.75rem; }
.hm-theme .ob-seg button { min-height: var(--ob-control-h); }
.hm-about summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; color: var(--ob-purple); }
.hm-about p { margin: 6px 0 0; line-height: 1.45; }
.hm-about a { color: var(--ob-purple); }
.hm-dl { margin: 6px 0 0; }
.hm-dl a { color: var(--ob-purple); }
.hm-about cite { font-style: italic; }

/* ---- legend ----------------------------------------------------------------- */

/* Bottom-right on a desktop, above the credits pill: unlike the other maps'
   short Layers panels, this panel holds the company list and runs the
   height of the screen, so a bottom-left legend would sit under it. On a
   phone the panel is a sheet over a backdrop, and the legend goes back to
   the family's corner. Either way it sits above the timeline and the pill. */
.hm-legend {
  position: fixed; right: var(--ob-map-inset); z-index: 9985;
  bottom: calc(var(--hm-above-time) + var(--ob-credits-h) + 8px);
  max-width: calc(100vw - 2 * var(--ob-map-inset));
  padding: 8px 12px;
}
@media (max-width: 768px) { .hm-legend { right: auto; left: var(--ob-map-inset); } }
/* The credits pill keeps its corner, a row up. (.hm-page: brand.css is
   linked after this sheet.) */
.hm-page .ob-credits { bottom: var(--hm-above-time); }
.hm-legend summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 28px;
  list-style: none; cursor: pointer;
}
.hm-legend summary::-webkit-details-marker { display: none; }
.hm-legend summary::after { content: "\25BE"; }
.hm-legend:not([open]) summary::after { content: "\25B8"; }
.hm-legend[open] summary { margin-bottom: 4px; }
.hm-key { flex-shrink: 0; box-sizing: border-box; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; }
.hm-key--dot { background: var(--hm-dot); border: 1.5px solid var(--hm-stroke); }
.hm-key--new { background: var(--hm-new); border: 1.5px solid var(--hm-stroke); }
.hm-key--approx { border: 2px solid var(--hm-dot); }
.hm-key--place {
  width: 22px; height: 22px;
  background: var(--hm-agg); border: 1.5px solid var(--hm-agg-edge);
  color: var(--hm-agg-text); font: 700 10px/1 var(--ob-font);
}
.hm-key--stack {
  width: 18px; height: 18px;
  background: var(--hm-dot); border: 1.5px solid var(--hm-stroke);
  color: var(--hm-stack-text); font: 700 10px/1 var(--ob-font);
}
/* The legend card is dark in both themes; the light theme's marks sit on a
   chip of the light basemap's ground, as they do on the map. */
html[data-map-theme="light"] .hm-key { box-shadow: 0 0 0 3px var(--hm-light-ground); }
/* One column for the swatches (22px, the widest), so the labels line up. */
.hm-legend .hm-key--dot, .hm-legend .hm-key--new, .hm-legend .hm-key--approx { margin-inline: 4px; }
.hm-legend .hm-key--stack { margin-inline: 2px; }
/* The place disc is translucent; in the light theme it sits on the
   basemap's ground, as on the map, so its dark number can be read. */
html[data-map-theme="light"] .hm-legend .hm-key--place {
  background: linear-gradient(var(--hm-agg), var(--hm-agg)), var(--hm-light-ground);
}

/* ---- the map's own marks ------------------------------------------------- */

/* Zoomed out, a place's count: a translucent disc with the number on it. */
.hm-agg {
  box-sizing: border-box;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--hm-agg);
  border: 1.5px solid var(--hm-agg-edge);
  color: var(--hm-agg-text);
  font: 700 12px/1 var(--ob-font);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px var(--hm-stroke);
  cursor: pointer;
}
.hm-agg--on { border-width: 3px; }
.leaflet-marker-icon.hm-agg-icon { background: none; border: 0; }

/* Zoomed in, several companies at one point share a dot with their count,
   as on Traffic Violence. Sized from the dots' radius (--hm-stack-d, set by
   sizeDots as the map zooms). */
.hm-stack { background: none; border: 0; }
.hm-stack span {
  display: grid; place-items: center; box-sizing: border-box;
  width: var(--hm-stack-d, 8px); height: var(--hm-stack-d, 8px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--hm-dot); border: 2px solid var(--hm-stroke);
  color: var(--hm-stack-text);
  font: 700 0.6875rem/1 var(--ob-font); font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.hm-stack--new span { background: var(--hm-new); }
.hm-stack--near span { background: var(--hm-near-bg); border: 2px solid var(--hm-dot); color: var(--hm-near-text); }


/* The selected company's name beside its ring. */
.leaflet-tooltip.hm-label { padding: 2px 8px; font-weight: 600; pointer-events: none; }

/* What a poster step adds fades in (the canvas dots do so in main.js). */
@keyframes hm-enter { from { opacity: 0; transform: scale(0.6); } }
.hm-stack.hm-enter span, .hm-agg.hm-enter { animation: hm-enter 0.45s ease-out; }
.hm-stack.hm-enter span { animation-name: hm-enter-stack; }
@keyframes hm-enter-stack { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } }

/* ---- the phone's company card -------------------------------------------- */

.hm-peek {
  position: fixed; z-index: 9987;
  left: var(--ob-map-inset); right: var(--ob-map-inset);
  bottom: calc(var(--ob-map-inset) + var(--hm-time-h) + 8px);   /* just above the timeline */
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 8px 14px;
}
.hm-peek-text { flex: 1; min-width: 0; }
.hm-peek-text p { margin: 0; }
.hm-peek-name { font-size: 0.9375rem; font-weight: 600; }
.hm-peek-name .ob-badge { margin-left: 6px; padding: 0 6px; font-size: 0.6875rem; vertical-align: 1px; }
.hm-peek-where { font-size: 0.75rem; color: var(--ob-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-peek #hm-peek-more { flex: none; min-height: 44px; padding: 0 6px; }
.hm-peek-close {
  flex: none; width: 44px; height: 44px;
  border: 0; background: none; color: var(--ob-muted);
  font: 22px/1 var(--ob-font); cursor: pointer;
}
/* While the card is up, the credits pill and the legend move up over it. */
body:has(#hm-peek:not([hidden])) { --hm-above-time: calc(var(--ob-map-inset) + var(--hm-time-h) + 8px + 68px); }

/* ---- the timeline -------------------------------------------------------- */

/* Along the bottom, from the panel to the right edge: the whole width when
   the panel is closed, and on a phone. The range input is the control; the
   dates under it are a mouse shortcut to its stops, placed under the
   thumb's centers. */
.hm-timeline {
  position: fixed; z-index: 9986;
  bottom: var(--ob-map-inset);
  left: calc(var(--hm-panel-w) + 2 * var(--ob-map-inset));
  right: var(--ob-map-inset);
  box-sizing: border-box;
  height: var(--hm-time-h);
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px 6px 8px;
}
body:has(#hm-panel.closed) .hm-timeline { left: var(--ob-map-inset); }
@media (max-width: 768px) { .hm-timeline { left: var(--ob-map-inset); } }
.hm-play {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--ob-control-border); border-radius: 50%;
  background: var(--ob-surface-flat); color: var(--ob-fg);
  font: 13px/1 var(--ob-font);
  cursor: pointer;
}
.hm-play[aria-pressed="true"] { background: var(--ob-purple); border-color: var(--ob-purple); color: var(--ob-on-accent); }
.hm-track { --thumb: 18px; flex: 1; min-width: 0; padding: 0 26px; }

/* The growth line. It spans the thumb's travel (inset by half a thumb each
   side), so a stop's x here is its x on the slider. */
.hm-chart { position: relative; height: 42px; margin: 0 calc(var(--thumb) / 2); }
.hm-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-chart path { fill: none; stroke: var(--ob-purple); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hm-chart .hm-chart-all { stroke-opacity: 0.4; stroke-dasharray: 3 4; }
.hm-chart .hm-chart-fill { fill: color-mix(in srgb, var(--ob-purple) 24%, transparent); stroke: none; }
#hm-chart-pts button {
  position: absolute; left: calc(var(--p) * 100%); bottom: calc(var(--y) * 1%);
  width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer;
}
#hm-chart-pts button::before {
  content: ""; position: absolute; left: -4px; bottom: -4px;
  width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%;
  background: var(--ob-surface-flat); border: 2px solid var(--ob-purple);
}
#hm-chart-pts button.past::before { background: var(--ob-purple); }
#hm-chart-pts button.on::before { left: -6px; bottom: -6px; width: 12px; height: 12px; background: var(--ob-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-purple) 35%, transparent); }
#hm-chart-pts button span {
  position: absolute; left: 0; bottom: 8px; transform: translateX(-50%);
  color: var(--ob-muted); font: 0.6875rem/1 var(--ob-font); font-variant-numeric: tabular-nums;
}
#hm-chart-pts button.on span { color: var(--ob-fg); font-weight: 700; bottom: 10px; }
#hm-time { display: block; width: 100%; height: 22px; margin: 0; accent-color: var(--ob-purple); cursor: pointer; }
.hm-ticks { position: relative; height: 18px; }
.hm-ticks button {
  position: absolute; top: 0;
  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p));
  transform: translateX(-50%);
  padding: 0 2px;
  border: 0; background: none;
  color: var(--ob-muted);
  font: 0.75rem/18px var(--ob-font); white-space: nowrap;
  cursor: pointer;
}
.hm-ticks button.on { color: var(--ob-fg); font-weight: 600; }
/* The counts under the dates stand in for the chart where there is no room for it. */
.hm-tick-n { display: none; }
.hm-time-label { flex: none; min-width: 8.5em; margin: 0; text-align: right; font-size: 0.875rem; font-weight: 600; }
.hm-time-label span { display: block; }
.hm-time-count { font-size: 0.75rem; font-weight: 400; color: var(--ob-muted); }
@media (max-width: 560px) {
  :root { --hm-time-h: 72px; }
  .hm-chart, .hm-time-label { display: none; }
  .hm-ticks { height: 34px; }
  .hm-ticks button { text-align: center; }
  .hm-tick-n { display: block; font-size: 0.6875rem; }
}

.hm-notice {
  position: fixed; top: calc(var(--ob-bar-h) + var(--ob-map-inset)); left: 50%; z-index: 9980;
  transform: translateX(-50%);
  max-width: calc(100vw - 2 * var(--ob-map-inset) - 120px);
  padding: 8px 12px;
}

/* Tooltips and the stack list: the Traffic Violence treatment (M7). */
.leaflet-tooltip.hm-tip, .hm-popup .leaflet-popup-content-wrapper {
  background: var(--hm-tip); color: var(--ob-fg);
  border: 1px solid var(--ob-panel-border); border-radius: var(--ob-radius-sm);
  box-shadow: var(--ob-panel-shadow);
  font: 0.8125rem/1.35 var(--ob-font);
}
.leaflet-tooltip-top.hm-tip::before { border-top-color: var(--hm-tip); }
.hm-popup .leaflet-popup-tip { background: var(--hm-tip); }
.hm-popup .leaflet-popup-content { margin: 10px 12px; }
.hm-popup a.leaflet-popup-close-button { color: var(--ob-muted); width: 32px; height: 32px; font-size: 20px; }
.hm-tip-sub { color: var(--ob-muted); font-size: 0.75rem; }
.hm-stack-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.hm-stack-list .hm-row { min-height: 36px; padding: 4px 6px; }

/* Leaflet's controls in the panel style. */
.leaflet-control-zoom.leaflet-bar { border: 1px solid var(--ob-panel-border); border-radius: var(--ob-radius-sm); box-shadow: var(--ob-panel-shadow); }
.leaflet-control-zoom a, .leaflet-control-zoom a:hover {
  width: 44px; height: 44px; line-height: 44px;
  background: var(--ob-panel); color: var(--ob-fg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.leaflet-control-zoom a.leaflet-disabled { color: var(--ob-muted); opacity: 0.5; cursor: default; }
.leaflet-container { font-family: var(--ob-font); }

/* On a phone the panel is a sheet: the full width, and short of the credits
   pill at the bottom. */
@media (max-width: 768px) {
  .panel {
    z-index: 9992;                            /* modal here: above the credits pill */
    width: min(var(--hm-panel-w), calc(100vw - 2 * var(--ob-map-inset)));   /* clear of the zoom control */
    max-height: calc(100dvh - 56px - var(--ob-bar-h) - var(--ob-map-inset));
  }
}