/* Adams Blvd Development Tracker: the map beside a Projects panel.

   Wide (1000px and up): an app under the header, as on Traffic Violence. The
   map fills the left, full height; the panel on the right holds the title,
   the filters and the list, and a project's details in place of the list
   while one is open. Narrow: the map above the panel, which reads as a page.
   The map follows the map family's rules (map-guidelines.md): zoom top-right,
   credits pill bottom-right, a legend card bottom-left, and the Dark / Light
   basemap switch, which changes only the tiles and the marks drawn on them. */

:root {
  /* One color per stage, per basemap. Measured Oct 6–7, 2026 (Under construction and Withdrawn added Oct 7): every pair,
     and each against the accent purple and the selection orange, is at least
     30 apart (CIE Lab), and each clears 3:1 against its basemap's ground.
     Built is the quiet one: it is most of the list, and what is still to
     come is the news. */
  --ab-proposed: #60a5fa;
  --ab-approved: #facc15;
  --ab-permitted: #2dd4bf;
  --ab-completed: #d1d5db;
  --ab-construction: #84cc16;
  --ab-withdrawn: #b8778f;         /* a plan that will not be built: a dusty rose, apart from the street gray */
  --ab-stroke: var(--ob-bg);       /* a dot's outline */
  --ab-ring: var(--ob-fg);         /* the selected project's ring */
  /* The selected building in 3D: at least 55 apart (CIE Lab) from every stage,
     the street and the gray buildings, in both themes (measured Oct 7, 2026);
     the ring's white would vanish on a Built one. */
  --ab-pick3d: #e879f9;
  --ab-street: #6b7280;            /* Adams itself: opaque, quiet */
  /* The street's other buildings in 3D: quiet, and at least 25 apart (CIE Lab)
     from the street and every stage, in both themes (measured Oct 6, 2026). */
  --ab-context: #33373f;
  --ab-tip: #111827;
  /* The same six on the page itself (the list, the chips, the legend card),
     which stays dark whichever basemap is on. */
  --ab-page-proposed: #60a5fa;
  --ab-page-approved: #facc15;
  --ab-page-permitted: #2dd4bf;
  --ab-page-completed: #d1d5db;
  --ab-page-construction: #84cc16;
  --ab-page-withdrawn: #b8778f;
  --ab-light-ground: #f2f3f0;      /* the light basemap's land */
  --ab-map-h: min(62vh, 520px);    /* the band above the list; the full height beside the panel */
}
html[data-map-theme="light"] {
  --ab-proposed: #1d4ed8;
  --ab-approved: #a16207;
  --ab-permitted: #0f766e;
  --ab-completed: #4b5563;
  --ab-construction: #4d7c0f;
  --ab-withdrawn: #9b7d9a;
  --ab-stroke: #ffffff;
  --ab-ring: #111827;
  --ab-pick3d: #db2777;
  --ab-street: #8c7d66;            /* warm, so it parts from Built's cool gray; 3.6:1 */
  --ab-context: #d4d6da;
  --ob-credits-bg: rgba(255, 255, 255, 0.9);
}

body.ab-page { margin: 0; }
.ab-page *, .ab-page *::before, .ab-page *::after { box-sizing: border-box; }
.ab-page [hidden] { display: none !important; }

/* ---- shell -------------------------------------------------------------- */

.ab-app { --ab-panel-w: 420px; }
@media (min-width: 1000px) {
  .ab-app {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--ab-panel-w);
    height: calc(100vh - var(--ob-bar-h)); height: calc(100dvh - var(--ob-bar-h));
    --ab-map-h: 100%;
  }
  .ab-panel {
    overflow-y: auto; overscroll-behavior: contain;
    border-left: 1px solid var(--ob-panel-border); box-shadow: -8px 0 22px -6px rgba(0, 0, 0, 0.5);
    background: var(--ob-bg); position: relative; z-index: 2;
  }
}
@media (min-width: 1400px) { .ab-app { --ab-panel-w: 460px; } }
.ab-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1.25rem 1.25rem; }
.ab-panel h1, .ab-panel h2, .ab-panel p { margin: 0; }

/* ---- title -------------------------------------------------------------- */

.ab-head { display: flex; flex-direction: column; gap: 0.35rem; }
.ab-title {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  background: var(--ob-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ab-lead { color: var(--ob-muted); font-size: 0.9rem; line-height: 1.45; }
.ab-readout { margin-top: 0.35rem !important; font-size: 0.875rem; line-height: 1.5; }
.ab-readout strong { color: var(--ob-fg); }

/* ---- map ---------------------------------------------------------------- */

/* Clipped at every width: the folded credits' text would otherwise hang past
   the right edge and widen a phone's page. */
.ab-mapwrap { position: relative; height: var(--ab-map-h); overflow: hidden; background: var(--ob-bg); }
html[data-map-theme="light"] .ab-mapwrap { background: var(--ab-light-ground); }
/* Narrow: the map takes most of a phone's first screen, the panel follows. */
#map { position: absolute; inset: 0; z-index: 0; background: var(--ob-bg); }
/* The 3D view sits over the 2D map while it is on. */
#map3d { position: absolute; inset: 0; z-index: 1; background: var(--ob-bg); }
/* The page opens in 3D: the 2D map (made too, for the switch and as the
   fallback) stays hidden until 3D has drawn, and the area says it is loading. */
.ab-mapwrap[data-view="3d"]:not([data-ready3d]) #map { visibility: hidden; }
.ab-loading {
  position: absolute; inset: 0; z-index: 0; display: none; margin: 0;
  align-items: center; justify-content: center; color: var(--ob-muted); font-size: 0.9rem;
}
html[data-map-theme="light"] .ab-loading { color: #4b5563; }
.ab-mapwrap[data-view="3d"]:not([data-ready3d]) .ab-loading { display: flex; }
html[data-map-theme="light"] #map3d { background: var(--ab-light-ground); }
.ab-mapwrap:not([data-view="3d"]) .ab-3d-only { display: none; }
.ab-legend-h { margin-top: 4px; padding-top: 6px !important; border-top: 1px solid var(--ob-panel-border); font-weight: 600; }
.ab-legend-note { max-width: 15rem; color: var(--ob-muted); }
/* Little blocks for the 3D shapes, in the map's own colors: a project's
   building and the gray context. Each sits on a chip of the basemap's ground. */
.ab-block { flex-shrink: 0; box-sizing: border-box; width: 14px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 3px var(--ob-bg); }
html[data-map-theme="light"] .ab-block { box-shadow: 0 0 0 3px var(--ab-light-ground); }
.ab-block--solid { background: var(--ab-completed); }
.ab-block--context { background: var(--ab-context); border: 1px solid var(--ob-control-border); }
/* MapLibre's zoom, rotate and tilt buttons in the panel style. Its own
   stylesheet loads after this one, so these are scoped to the map band. */
.ab-mapwrap .maplibregl-ctrl-top-right { margin: var(--ob-map-inset) var(--ob-map-inset) 0 0; }
.ab-mapwrap .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0; }
.ab-mapwrap .maplibregl-ctrl-group { background: var(--ob-panel); border: 1px solid var(--ob-panel-border); border-radius: var(--ob-radius-sm); box-shadow: var(--ob-panel-shadow); }
.ab-mapwrap .maplibregl-ctrl-group button { width: var(--ob-control-h); height: var(--ob-control-h); background-color: transparent; }
.ab-mapwrap .maplibregl-ctrl-group button + button { border-top: 1px solid var(--ob-panel-border); }
.ab-mapwrap .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
@media (pointer: coarse) { .ab-mapwrap .maplibregl-ctrl-group button { width: 44px; height: 44px; } }
.ab-mapwrap .ab-tip3d .maplibregl-popup-content {
  background: var(--ab-tip); color: var(--ob-fg); padding: 6px 10px;
  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);
}
.ab-mapwrap .ab-tip3d .maplibregl-popup-tip { display: none; }
html[data-map-theme="light"] #map { background: var(--ab-light-ground); }
.leaflet-container { font-family: var(--ob-font); }
/* The shared pill is fixed to the viewport on the full-screen maps; here it
   sits in the map's own corner, as on Traffic Violence. */
.ab-mapwrap .ob-credits { position: absolute; z-index: 700; }

.ab-legend {
  position: absolute; left: var(--ob-map-inset); bottom: var(--ob-map-inset); z-index: 600;
  padding: 8px 12px;
}
/* On a phone the legend and the pill share the bottom edge: the legend steps up. */
@media (max-width: 768px) { .ab-legend { bottom: var(--ob-credits-clear); } }
.ab-legend summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 28px; list-style: none; cursor: pointer;
}
@media (pointer: coarse) { .ab-legend summary { min-height: 44px; } }
.ab-legend summary::-webkit-details-marker { display: none; }
.ab-legend summary::after { content: "\25BE"; }
.ab-legend:not([open]) summary::after { content: "\25B8"; }
.ab-legend[open] summary { margin-bottom: 4px; }
.ab-key { flex-shrink: 0; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ab-stroke); }
.ab-key--street { width: 22px; height: 3px; border: 0; border-radius: 2px; background: var(--ab-street); }
/* The legend card stays dark; in the light theme each mark sits on a chip of
   the light basemap's ground, as it does on the map. */
html[data-map-theme="light"] .ab-legend .ab-key { box-shadow: 0 0 0 3px var(--ab-light-ground); }

.ab-basemap {
  position: absolute; top: var(--ob-map-inset); left: var(--ob-map-inset); z-index: 600;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
}
.ab-basemap .ob-label { font-size: 0.75rem; }
.ab-ctl { display: flex; align-items: center; gap: 8px; }
.ab-ctl + .ab-ctl { margin-left: 4px; }
/* On a phone the two switches stack, each label beside its own buttons. */
@media (max-width: 480px) {
  .ab-basemap { flex-direction: column; align-items: stretch; gap: 6px; }
  .ab-ctl { justify-content: space-between; }
  .ab-ctl + .ab-ctl { margin-left: 0; }
}

.ab-notice {
  position: absolute; top: calc(var(--ob-map-inset) + 52px); left: var(--ob-map-inset); z-index: 650;
  max-width: calc(100% - 2 * var(--ob-map-inset) - 64px); margin: 0; padding: 8px 12px; font-size: 0.8125rem;
}

/* Zoom 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); }
/* Scoped to the map so it outranks Leaflet's own touch size (30px). */
.ab-mapwrap .leaflet-control-zoom a, .ab-mapwrap .leaflet-control-zoom a:hover {
  width: var(--ob-control-h); height: var(--ob-control-h); line-height: var(--ob-control-h);
  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-top.leaflet-right { margin: var(--ob-map-inset) var(--ob-map-inset) 0 0; }
.leaflet-top.leaflet-right .leaflet-control { margin: 0; }

.leaflet-tooltip.ab-tip {
  background: var(--ab-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.ab-tip::before { border-top-color: var(--ab-tip); }
.ab-tip-sub { color: var(--ob-muted); font-size: 0.75rem; }
.leaflet-tooltip.ab-label { padding: 2px 8px; font-weight: 600; pointer-events: none; }

/* ---- filters ------------------------------------------------------------ */

.ab-browse { display: flex; flex-direction: column; gap: 0.75rem; }
.ab-h2 { font-size: 1rem; font-weight: 600; }
.ab-filters { display: flex; flex-direction: column; gap: 0.6rem; }
.ab-stages { border: 0; margin: 0; padding: 0; min-width: 0; }
.ab-stages legend { padding: 0; margin-bottom: 0.4rem; font-size: 0.75rem; }
.ab-filters .ob-label { font-size: 0.75rem; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--ob-control-h); padding: 0 10px;
  border: 1px solid var(--ob-control-border); border-radius: 999px;
  background: var(--ob-surface-flat); color: var(--ob-fg);
  font: 0.78rem var(--ob-font); cursor: pointer;
}
.ab-chip[aria-pressed="true"] { border-color: var(--ob-purple); box-shadow: inset 0 0 0 1px var(--ob-purple); }
.ab-chip[aria-pressed="false"] { color: var(--ob-muted); }
.ab-chip[aria-pressed="false"] .ab-key { opacity: 0.35; }
.ab-chip .ab-n { color: var(--ob-muted); font-variant-numeric: tabular-nums; }
/* The chips' dots are on the page's dark ground in both themes. */
.ab-chips .ab-key { border-color: var(--ob-bg); }
.ab-search .ob-input, .ab-sortsel .ob-input { min-height: var(--ob-control-h-lg); font-size: 0.875rem; }
.ab-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; }
.ab-sortsel { display: flex; flex-direction: column; gap: 0.25rem; min-width: 9.5rem; }
.ab-check { display: flex; align-items: center; gap: 8px; min-height: var(--ob-control-h-lg); font-size: 0.85rem; cursor: pointer; }
.ab-check input { margin: 0; width: 16px; height: 16px; }
.ab-linkbtn {
  align-self: flex-start;
  min-height: var(--ob-control-h); padding: 0; border: 0; background: none;
  color: var(--ob-purple); font: inherit; font-size: 0.85rem;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

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

.ab-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ob-border); }
.ab-list li { border-bottom: 1px solid var(--ob-border); }
.ab-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 0.75rem;
  width: 100%; min-height: 44px; padding: 0.6rem 0.5rem;
  border: 0; background: none; color: var(--ob-fg); font: inherit; text-align: left; cursor: pointer;
}
.ab-item:hover { background: rgba(255, 255, 255, 0.04); }
.ab-item[aria-current="true"] { background: rgba(192, 132, 252, 0.12); }
.ab-item-name { grid-column: 1; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.ab-item-addr { grid-column: 1; color: var(--ob-muted); font-size: 0.78rem; }
.ab-item-sub { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 0.8rem; }
.ab-item-date { color: var(--ob-muted); font-size: 0.75rem; white-space: nowrap; }
.ab-item-use { grid-column: 1 / -1; color: var(--ob-muted); font-size: 0.78rem; }
.ab-stage { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ab-stage .ab-key { border-color: var(--ob-bg); }
.ab-empty { color: var(--ob-muted); font-size: 0.9rem; }

/* Stage dots on the page (chips, list) use the page's set; the legend's
   sit on the basemap's ground and use the map's. */
.ab-key--proposed { background: var(--ab-page-proposed); }
.ab-key--approved { background: var(--ab-page-approved); }
.ab-key--permitted { background: var(--ab-page-permitted); }
.ab-key--completed { background: var(--ab-page-completed); }
.ab-key--construction { background: var(--ab-page-construction); }
.ab-key--withdrawn { background: var(--ab-page-withdrawn); }
.ab-legend .ab-key--proposed { background: var(--ab-proposed); }
.ab-legend .ab-key--approved { background: var(--ab-approved); }
.ab-legend .ab-key--permitted { background: var(--ab-permitted); }
.ab-legend .ab-key--completed { background: var(--ab-completed); }
.ab-legend .ab-key--construction { background: var(--ab-construction); }
.ab-legend .ab-key--withdrawn { background: var(--ab-withdrawn); }
.ab-legend .ab-key--context { background: var(--ab-context); border-radius: 2px; }

/* ---- one project --------------------------------------------------------- */

.ab-one { display: flex; flex-direction: column; gap: 0.35rem; scroll-margin-top: calc(var(--ob-bar-h) + 8px); }   /* clear of the site bar when scrolled to */
.ab-one:focus { outline: none; }
.ab-one-name { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.ab-one-addr { color: var(--ob-muted); font-size: 0.85rem; }
.ab-detail { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
.ab-detail h3 { margin: 0.85rem 0 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ob-muted); }
.ab-detail p { margin: 0.25rem 0; line-height: 1.5; }
.ab-detail a { color: var(--ob-purple); overflow-wrap: anywhere; }
.ab-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.ab-facts dt { color: var(--ob-muted); white-space: nowrap; }
.ab-facts dd { margin: 0; }
.ab-detail ul { margin: 0; padding-left: 1.1rem; }
.ab-detail li { margin: 0.25rem 0; }
.ab-permit { line-height: 1.45; }
.ab-permit-sub { color: var(--ob-muted); font-size: 0.8rem; }
.ab-detail-actions { margin-top: 0.75rem; }

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

.ab-foot { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--ob-border); font-size: 0.8rem; color: var(--ob-muted); }
.ab-about summary { min-height: var(--ob-control-h); display: inline-flex; align-items: center; cursor: pointer; color: var(--ob-purple); }
.ab-about p { max-width: 70ch; line-height: 1.55; }
.ab-about strong { color: var(--ob-fg); font-weight: 600; }
.ab-dl a { color: var(--ob-purple); }