/* ═══════════════════════════════════════════════════════════════════════
   Metro Land — archival land-record aesthetic.

   Warm paper ground, hard rules, no rounded corners, no drop shadows on
   content. All data in mono because APNs, acreages and rule IDs are code.
   The rail reads as a document margin, not a floating app panel.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #F2EDE3;
  --paper-2:    #E8E1D3;
  --paper-3:    #DCD3C1;
  --ink:        #17140F;
  --ink-2:      #4A4438;
  --ink-3:      #7C7361;
  --rule:       #17140F;
  --rule-soft:  #B9AF9A;

  --c-unimproved:  #C93A1D;
  --c-committed:   #2C4A63;
  --c-conserved:   #4A6B3E;
  --c-operational: #8A6524;
  --c-enterprise:  #6B4570;
  --flag:          #16120D;

  --panel-w: 25.5rem;
  --detail-w: 27rem;
  --f-display: "Fraunces", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #14120E;
    --paper-2:   #1D1A14;
    --paper-3:   #2A251C;
    --ink:       #F0EADC;
    --ink-2:     #B9AF9A;
    --ink-3:     #837A68;
    --rule:      #F0EADC;
    --rule-soft: #423B2E;

    --c-unimproved:  #FF6B47;
    --c-committed:   #6FA8D6;
    --c-conserved:   #8FC078;
    --c-operational: #D9A441;
    --c-enterprise:  #BC8FC4;
    --flag:          #FFF3D6;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:     #14120E;
  --paper-2:   #1D1A14;
  --paper-3:   #2A251C;
  --ink:       #F0EADC;
  --ink-2:     #B9AF9A;
  --ink-3:     #837A68;
  --rule:      #F0EADC;
  --rule-soft: #423B2E;

  --c-unimproved:  #FF6B47;
  --c-committed:   #6FA8D6;
  --c-conserved:   #8FC078;
  --c-operational: #D9A441;
  --c-enterprise:  #BC8FC4;
  --flag:          #FFF3D6;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

#map { position: absolute; inset: 0; background: var(--paper); }

/* faint paper grain over the whole map, so the basemap reads as printed stock */
#map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #map::after { mix-blend-mode: screen; opacity: .18; }
}
:root[data-theme="dark"] #map::after { mix-blend-mode: screen; opacity: .18; }

/* ── rail ───────────────────────────────────────────────────────────── */

#rail {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 10;
  width: var(--panel-w);
  background: var(--paper);
  border-right: 2px solid var(--rule);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.75rem 1.5rem 2rem;
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
#rail::-webkit-scrollbar { width: 9px; }
#rail::-webkit-scrollbar-thumb { background: var(--rule-soft); }
#rail.collapsed { transform: translateX(calc(-1 * var(--panel-w))); }

.masthead { animation: rise .5s both; }

.wordmark {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, 3.1rem);
  line-height: .88; letter-spacing: -.028em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  margin-bottom: .7rem;
}
.wm-1 { font-weight: 900; }
.wm-2 { font-weight: 400; font-style: italic; color: var(--c-unimproved); }

.dek {
  margin: 0 0 .9rem; font-size: .8rem; line-height: 1.55;
  color: var(--ink-2); max-width: 34ch;
}

.stamp {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  border-block: 1px solid var(--rule-soft); padding: .45rem 0;
  font-variant-numeric: tabular-nums;
}
.stamp-sep { opacity: .45; margin: 0 .35rem; }
#stamp-n { color: var(--ink); font-weight: 600; }

.block { margin-top: 1.9rem; animation: rise .5s both; }
#funnel-block { animation-delay: .06s; }
.block:nth-of-type(2) { animation-delay: .12s; }
.block:nth-of-type(3) { animation-delay: .18s; }

.rule {
  font-family: var(--f-mono);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .8rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
}

.micro {
  font-size: .68rem; line-height: 1.6; color: var(--ink-3);
  margin: .85rem 0 0; max-width: 36ch;
}
.micro strong { color: var(--ink-2); font-weight: 600; }

/* ── the funnel ─────────────────────────────────────────────────────── */

.funnel { list-style: none; margin: 0; padding: 0; }
.funnel li {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: .5rem;
  padding: .3rem 0; position: relative;
}
.funnel li + li { border-top: 1px dotted var(--rule-soft); }
.fn-bar {
  grid-column: 1 / -1; height: 5px; background: var(--c-committed);
  transform-origin: left center; animation: grow .7s cubic-bezier(.22,.61,.36,1) both;
}
.funnel li:last-child .fn-bar { background: var(--c-unimproved); }
.fn-label { font-size: .72rem; color: var(--ink-2); }
.funnel li:last-child .fn-label { color: var(--ink); font-weight: 600; }
.fn-n {
  font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.funnel li:last-child .fn-n { color: var(--c-unimproved); font-size: 1.15rem; }
.funnel li:last-child { padding-bottom: .45rem; }
.funnel li:last-child .fn-label { max-width: 24ch; }

/* ── legend / filters ───────────────────────────────────────────────── */

.legend { list-style: none; margin: 0; padding: 0; }
.legend li {
  display: grid; grid-template-columns: 14px 1fr auto;
  align-items: center; gap: .6rem;
  padding: .42rem .3rem; cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
  font-size: .78rem;
}
.legend li:hover { background: var(--paper-2); border-color: var(--rule-soft); }
.legend li.off { opacity: .32; }
.legend li.off .swatch { background: transparent !important; }
.restrict-legend li { cursor: default; }
.restrict-legend li:hover { background: none; border-color: transparent; }

.swatch {
  width: 14px; height: 14px; display: block;
  border: 1.5px solid var(--rule);
}
.swatch.hatched {
  background: repeating-linear-gradient(45deg,
    var(--ink) 0 1.5px, transparent 1.5px 4px);
}
.lg-label { letter-spacing: .01em; }
.lg-n {
  font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ── colophon ───────────────────────────────────────────────────────── */

.colophon {
  margin-top: 2.2rem; padding-top: .9rem;
  border-top: 2px solid var(--rule);
  font-size: .64rem; line-height: 1.65; color: var(--ink-3);
}
.colophon p { margin: 0 0 .5rem; }
.colophon a { color: var(--ink-2); text-underline-offset: 2px; }
.ver { font-variant-numeric: tabular-nums; opacity: .8; }

/* ── floating controls ──────────────────────────────────────────────── */

#rail-toggle, #theme-toggle, #layers-btn {
  position: absolute; z-index: 12;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--rule); cursor: pointer;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 1rem;
  transition: background .14s, transform .14s;
}
#rail-toggle:hover, #theme-toggle:hover, #layers-btn:hover { background: var(--paper-3); }
#rail-toggle:active, #theme-toggle:active, #layers-btn:active { transform: translateY(1px); }
#rail-toggle { top: 1rem; left: calc(var(--panel-w) + 1rem); }
#rail.collapsed ~ #rail-toggle { left: 1rem; }

/* Our own control stack. MapLibre's zoom moves to the bottom so this corner is not shared. */
#map-controls {
  position: absolute; top: 1rem; right: 1rem; z-index: 12;
  display: flex; flex-direction: column; gap: .4rem;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}

/* The controls sit above the detail panel in z-order, so they would cover it. Step them
   aside by exactly the panel width rather than hiding them — they stay usable while
   reading a parcel. */
body.detail-open #map-controls,
body.detail-open #layers-panel { transform: translateX(calc(-1 * var(--detail-w))); }
#layers-panel { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
#map-controls button { position: static; }
#layers-btn.on { background: var(--ink); color: var(--paper); }
#layers-btn.on span { color: var(--paper); }

#layers-panel {
  position: absolute; top: 1rem; right: 4rem; z-index: 13;
  width: 17.5rem; max-width: calc(100vw - 6rem);
  background: var(--paper); border: 2px solid var(--rule);
  padding: .9rem 1rem 1rem;
  /* Fade, never a transform. `rise` ends on `transform: none` with fill-mode `both`, which
     would outrank the translate that steps this panel clear of the detail view. */
  animation: fade .18s both;
}
#layers-panel[hidden] { display: none; }
#layers-panel .rule { margin-bottom: .6rem; }
#layers-panel .imagery-row { padding: .3rem 0; }
#layers-panel .imagery-row.sub { padding-left: 1.4rem; }
#layers-panel .micro { max-width: none; }

@media (max-width: 620px) {
  #layers-panel { top: 4.2rem; right: 1rem; left: 1rem; width: auto; }
}

/* Both buttons previously showed three horizontal lines and were indistinguishable.
   The rail toggle is now a sidebar; the layers button is stacked sheets. */
#rail-toggle svg, #layers-btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linejoin: round; stroke-linecap: round;
}
#rail-toggle svg .fill { fill: currentColor; stroke: none; }
#rail-toggle[aria-expanded="false"] svg { transform: scaleX(-1); }

#hint {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 9; pointer-events: none;
  background: var(--paper); border: 1px solid var(--rule);
  padding: .35rem .8rem; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  animation: rise .5s .8s both;
}
#hint.gone { opacity: 0; transition: opacity .3s; pointer-events: none; }

/* ── parcel detail ──────────────────────────────────────────────────── */

#detail {
  position: absolute; z-index: 11; top: 0; right: 0; bottom: 0;
  width: var(--detail-w); max-width: 100%;
  background: var(--paper);
  border-left: 2px solid var(--rule);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 2.9rem 1.5rem 2.5rem;
  animation: slide .28s cubic-bezier(.22,.61,.36,1) both;
}
#detail[hidden] { display: none; }
#detail-close {
  position: absolute; top: .5rem; left: .6rem;
  background: none; border: none; color: var(--ink-3);
  font-size: 1.7rem; line-height: 1; cursor: pointer; padding: .2rem .4rem;
}
#detail-close:hover { color: var(--ink); }

.d-cat {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  display: inline-block; padding: .22rem .5rem; color: var(--paper);
  margin-bottom: .7rem;
}
.d-addr {
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.5rem; line-height: 1.12; letter-spacing: -.015em;
  margin: 0 0 .2rem;
}
.d-apn {
  font-size: .74rem; color: var(--ink-3); margin: 0 0 1.1rem;
  letter-spacing: .04em;
}

.d-flag {
  border: 2px solid var(--rule); padding: .6rem .7rem; margin-bottom: 1.1rem;
  background: repeating-linear-gradient(45deg,
    var(--paper-3) 0 6px, var(--paper-2) 6px 12px);
}
.d-flag b {
  display: block; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: .25rem;
}
.d-flag span { font-size: .72rem; line-height: 1.5; color: var(--ink-2); }

.d-grid {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0;
  font-size: .76rem; margin-bottom: 1.3rem;
}
.d-grid dt {
  color: var(--ink-3); padding: .38rem 0;
  border-top: 1px dotted var(--rule-soft);
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
}
.d-grid dd {
  margin: 0; padding: .38rem 0; border-top: 1px dotted var(--rule-soft);
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.basis {
  display: inline-block; border: 1px solid var(--rule-soft);
  padding: 0 .3rem; font-size: .68rem; color: var(--ink-2);
}

/* ── correction form ────────────────────────────────────────────────── */

.form-wrap { border-top: 2px solid var(--rule); margin-top: 1.4rem; padding-top: 1rem; }
.form-wrap > p.micro { margin-top: .4rem; }
#corr-form { margin-top: .9rem; display: grid; gap: .6rem; }
#corr-form label {
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin-bottom: .22rem;
}
#corr-form select, #corr-form input, #corr-form textarea {
  width: 100%; font-family: var(--f-mono); font-size: .78rem;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule-soft); padding: .45rem .55rem;
  border-radius: 0;
}
#corr-form textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
#corr-form select:focus, #corr-form input:focus, #corr-form textarea:focus {
  outline: 2px solid var(--c-unimproved); outline-offset: -1px;
  border-color: transparent;
}
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

#corr-submit {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); padding: .6rem 1rem; cursor: pointer;
  transition: background .14s, color .14s;
}
#corr-submit:hover:not(:disabled) { background: transparent; color: var(--ink); }
#corr-submit:disabled { opacity: .45; cursor: not-allowed; }

#corr-status { font-size: .72rem; line-height: 1.5; }
#corr-status.ok  { color: var(--c-conserved); }
#corr-status.err { color: var(--c-unimproved); }

.notes { margin-top: 1.2rem; }
.note {
  border-left: 3px solid var(--c-conserved); padding: .4rem 0 .4rem .6rem;
  margin-bottom: .6rem; font-size: .74rem; line-height: 1.5; color: var(--ink-2);
}

/* ── motion ─────────────────────────────────────────────────────────── */

@keyframes rise  { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes grow  { from { transform: scaleX(0); } }
@keyframes fade  { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── maplibre chrome ────────────────────────────────────────────────── */

.maplibregl-ctrl-attrib {
  font-family: var(--f-mono); font-size: .6rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
}
.maplibregl-ctrl-attrib a { color: var(--ink-2); }
.maplibregl-ctrl-group {
  border: 2px solid var(--rule) !important; border-radius: 0 !important; box-shadow: none !important;
}
.maplibregl-ctrl-group button { border-radius: 0 !important; }
.maplibregl-canvas { cursor: crosshair; }

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --panel-w: 20rem; }
  #detail { width: 100%; border-left: none; border-top: 2px solid var(--rule); }
  /* Full-width panel: there is nowhere to step aside to, so get out of the way entirely. */
  body.detail-open #map-controls,
  body.detail-open #layers-panel {
    transform: none; opacity: 0; pointer-events: none;
  }
}
@media (max-width: 620px) {
  :root { --panel-w: 100%; }
  #rail { border-right: none; }
  #rail-toggle { left: 1rem !important; }
  /* Panel is bottom-anchored here, so the top-right controls are clear again. */
  #detail { top: auto; height: 68%; }
  body.detail-open #map-controls { opacity: 1; pointer-events: auto; }
}

/* ── "why this classification?" ─────────────────────────────────────── */

.why-wrap { margin-top: 1.4rem; }
.why {
  border: 1px solid var(--rule-soft); margin-bottom: .5rem;
  background: var(--paper-2);
}
/* Three columns: text, status, toggle. The badge and the +/- used to share a cell, held
   apart by a margin — hence the crowding. */
.why summary {
  cursor: pointer; padding: .55rem .65rem; list-style: none;
  display: grid; grid-template-columns: 1fr auto 1rem; gap: .15rem .8rem;
  align-items: start; font-size: .74rem;
}
.why summary::-webkit-details-marker { display: none; }
.why summary::after {
  content: "+"; grid-column: 3; grid-row: 1 / span 2;
  align-self: center; justify-self: end;
  color: var(--ink-3); font-size: 1rem; line-height: 1;
}
.why[open] summary::after { content: "\2212"; }
.why-label { font-weight: 600; grid-column: 1; grid-row: 1; }
.why-signal {
  grid-column: 1; grid-row: 2; font-size: .69rem; color: var(--ink-3); line-height: 1.45;
}
/* A status, not a control. No border, no box — a dot and a word. */
.why-conf {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  display: flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: .64rem; letter-spacing: .04em; font-weight: 500;
}
.why-conf::before {
  content: ""; width: .45rem; height: .45rem; background: currentColor;
  border-radius: 50%; flex: none;
}
.conf-high   { color: var(--c-conserved); }
.conf-medium { color: var(--c-operational); }
.conf-low    { color: var(--c-unimproved); }

.why-rationale, .why-conf-blurb, .why-id {
  font-size: .72rem; line-height: 1.55; color: var(--ink-2);
  margin: 0 .6rem .5rem; padding-top: .1rem;
}
.why-rationale { border-top: 1px dotted var(--rule-soft); padding-top: .55rem; }
.why-conf-blurb { color: var(--ink-3); }
.why-conf-blurb b { color: var(--ink-2); }
.why-id { font-size: .66rem; color: var(--ink-3); }
.why-id code { font-size: .95em; }

.d-sub {
  font-size: .8rem; color: var(--ink-2); margin: 0 0 .15rem;
  letter-spacing: .01em;
}

/* ── search ─────────────────────────────────────────────────────────── */

#search {
  width: 100%; font-family: var(--f-mono); font-size: .78rem;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule-soft); padding: .5rem .55rem; border-radius: 0;
}
#search:focus { outline: 2px solid var(--c-unimproved); outline-offset: -1px; }
#results { list-style: none; margin: .4rem 0 0; padding: 0; max-height: 15rem; overflow-y: auto; }
#results li {
  padding: .4rem .45rem; cursor: pointer; font-size: .74rem;
  border-bottom: 1px dotted var(--rule-soft); line-height: 1.35;
}
#results li:hover, #results li[aria-selected="true"] { background: var(--paper-2); }
#results .r-name { display: block; }
#results .r-sub { color: var(--ink-3); font-size: .68rem; }
#results .r-cat {
  float: right; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .05rem .3rem; color: var(--paper);
}
#results .r-none { color: var(--ink-3); cursor: default; border: none; }

.imagery-row {
  display: flex; align-items: center; gap: .5rem; font-size: .78rem;
  cursor: pointer; padding: .2rem 0 .5rem;
}
.imagery-row input { accent-color: var(--c-unimproved); }
#imagery-year {
  width: 100%; font-family: var(--f-mono); font-size: .76rem;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule-soft); padding: .4rem; border-radius: 0;
}
#imagery-year:disabled { opacity: .4; }

.sources-link {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink) !important; border-bottom: 1px solid var(--c-unimproved);
  padding-bottom: .1rem; text-decoration: none;
}

/* ── download, district, permalink ──────────────────────────────────── */

.dl {
  display: block; border: 1px solid var(--rule-soft); padding: .5rem .6rem;
  margin-bottom: .4rem; text-decoration: none; color: var(--ink);
  transition: background .12s, border-color .12s;
}
.dl:hover { background: var(--paper-2); border-color: var(--rule); }
.dl b { display: block; font-size: .78rem; font-weight: 600; }
.dl span { font-size: .68rem; color: var(--ink-3); }

#district {
  width: 100%; font-family: var(--f-mono); font-size: .76rem;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule-soft); padding: .45rem; border-radius: 0;
}
#filter-note {
  font-size: .6rem; letter-spacing: .06em; text-transform: none;
  color: var(--c-unimproved);
}

#detail-link {
  position: absolute; top: .5rem; right: .8rem;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; background: transparent; color: var(--ink-3);
  border: 1px solid var(--rule-soft); padding: .25rem .5rem; cursor: pointer;
}
#detail-link:hover { color: var(--ink); border-color: var(--rule); }

.d-cat-blurb {
  display: block; font-size: .7rem; color: var(--ink-3);
  margin: -.45rem 0 .7rem; line-height: 1.45;
}

/* Layer prose folded away so the funnel stays high in the rail. */
details.more.compact { border-top: 1px dotted var(--rule-soft); margin-top: .6rem; }
details.more.compact > summary {
  cursor: pointer; list-style: none; padding: .45rem 0;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
details.more.compact > summary::-webkit-details-marker { display: none; }
details.more.compact > summary::before { content: "+ "; }
details.more.compact[open] > summary::before { content: "\2212 "; }
details.more.compact > summary:hover { color: var(--ink); }