/* Adams Blvd Development Tracker: a document page with a map band.

   The street runs two miles east to west and is nearly straight, so the map
   is a wide, short band under the title rather than a full-screen map; the
   table under it holds the same projects. 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 (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-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 */
  --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 four on the page itself (the table, 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-withdrawn: #b8778f;
  --ab-light-ground: #f2f3f0;      /* the light basemap's land */
  --ab-map-h: 420px;
}
html[data-map-theme="light"] {
  --ab-proposed: #1d4ed8;
  --ab-approved: #a16207;
  --ab-permitted: #0f766e;
  --ab-completed: #4b5563;
  --ab-withdrawn: #9b7d9a;
  --ab-stroke: #ffffff;
  --ab-ring: #111827;
  --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; }
.ab-main { padding-bottom: 3rem; }

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

.ab-head { padding-top: 1.5rem; padding-bottom: 1rem; max-width: 1200px; }
.ab-title {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(1.75rem, 5vw, 2.5rem); 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 { margin: 0; max-width: 62ch; color: var(--ob-muted); }
.ab-readout { margin: 0.75rem 0 0; font-size: 0.95rem; }
.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); max-width: 1200px; margin: 0 auto; overflow: hidden; }
@media (min-width: 1200px) { .ab-mapwrap { border-radius: var(--ob-radius-sm); border: 1px solid var(--ob-panel-border); } }
@media (max-width: 768px) { :root { --ab-map-h: 360px; } }
#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); }
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 solid building,
   a see-through lot (as the map draws it, at half strength) 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--lot { background: color-mix(in srgb, var(--ab-completed) 50%, var(--ob-bg)); border: 1px dashed var(--ab-completed); }
html[data-map-theme="light"] .ab-block--lot { background: color-mix(in srgb, var(--ab-completed) 50%, var(--ab-light-ground)); }
.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;
}
.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); }
.leaflet-control-zoom a, .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-list { max-width: 1200px; padding-top: 1.5rem; }
.ab-list-head { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }
.ab-h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.ab-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem; }
.ab-stages { border: 0; margin: 0; padding: 0; min-width: 0; }
.ab-stages legend { padding: 0; margin-bottom: 0.4rem; }
.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 12px;
  border: 1px solid var(--ob-control-border); border-radius: 999px;
  background: var(--ob-surface-flat); color: var(--ob-fg);
  font: 0.8125rem 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 { flex: 1 1 16rem; max-width: 24rem; }
.ab-search .ob-input { min-height: var(--ob-control-h-lg); box-sizing: border-box; width: 100%; }
.ab-check { display: flex; align-items: center; gap: 8px; min-height: var(--ob-control-h-lg); font-size: 0.875rem; cursor: pointer; }
.ab-check input { margin: 0; width: 16px; height: 16px; }
.ab-linkbtn {
  min-height: var(--ob-control-h); padding: 0; border: 0; background: none;
  color: var(--ob-purple); font: inherit; font-size: 0.875rem;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
@media (pointer: coarse) {
  .ab-chip, .ab-linkbtn, .ab-check { min-height: 44px; }
}

/* ---- table -------------------------------------------------------------- */

.ab-table { font-size: 0.875rem; }
.ab-table th { vertical-align: bottom; }
.ab-sort {
  padding: 0; border: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.ab-sort::after { content: ""; display: inline-block; width: 1em; }
th[aria-sort="ascending"] .ab-sort::after { content: " \25B4"; }
th[aria-sort="descending"] .ab-sort::after { content: " \25BE"; }
.ab-table td { vertical-align: top; }
.ab-row { cursor: pointer; }
.ab-row[aria-current="true"] { background: rgba(192, 132, 252, 0.10); }
.ab-row td:first-child { min-width: 12rem; }
.ab-open {
  display: block; padding: 0; border: 0; background: none; color: var(--ob-fg);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.ab-open::before { content: "\25B8"; display: inline-block; width: 1.1em; color: var(--ob-muted); }
.ab-open[aria-expanded="true"]::before { content: "\25BE"; }
.ab-addr { display: block; padding-left: 1.1em; color: var(--ob-muted); font-size: 0.8125rem; }
.ab-stage { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ab-stage .ab-key { border-color: var(--ob-bg); }
.ab-date { display: block; color: var(--ob-muted); font-size: 0.8125rem; white-space: nowrap; }
.ab-aff { display: block; color: var(--ob-muted); font-size: 0.8125rem; white-space: nowrap; }
.ab-dash { color: var(--ob-muted); }
/* Stage dots on the page (chips, table) 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--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--withdrawn { background: var(--ab-withdrawn); }
.ab-legend .ab-key--context { background: var(--ab-context); border-radius: 2px; }
@media (max-width: 640px) {
  .ab-col-use, .ab-col-dev, .ab-table td.ab-col-use, .ab-table td.ab-col-dev { display: none; }
  .ab-table th, .ab-table td { padding: 0.55rem 0.5rem; }
  .ab-row td:first-child { min-width: 0; }
}

/* One project, opened under its row. */
.ab-detail-row > td { padding: 0 0.75rem 1rem; background: rgba(255, 255, 255, 0.02); }
.ab-detail { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0.5rem 2rem; padding-top: 0.5rem; }
@media (max-width: 760px) { .ab-detail { grid-template-columns: minmax(0, 1fr); } }
.ab-detail h3 { margin: 0.75rem 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: 2px 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.2rem 0; }
.ab-permit { line-height: 1.45; }
.ab-permit-sub { color: var(--ob-muted); font-size: 0.8125rem; }
.ab-detail-actions { margin-top: 0.75rem; }

.ab-empty { color: var(--ob-muted); font-size: 0.9rem; }

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

.ab-foot { max-width: 1200px; padding-top: 2rem; font-size: 0.875rem; 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); }