/* Clark County construction signals, demo surface.
   Layout only. Every colour, size, radius and duration comes from the
   Galebach & Company tokens in gc/gc-tokens.css. Page classes are prefixed
   lm- so they can never be mistaken for a design system component.

   Three type voices and no more:
     serif  headings and the big counts
     sans   everything readable
     mono   dates, record numbers, APNs and scores (.lm-mono)
   Gold is the rule under a heading, the focus ring, and the score. Nothing else. */

[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.lm-body {
  margin: 0;
  background-color: var(--gc-surface);
  color: var(--gc-fg);
  font-family: var(--gc-font-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.lm-body h1,
.lm-body h2,
.lm-body h3 {
  font-family: var(--gc-font-serif);
  font-weight: 400;
  margin: 0;
}

.lm-body p {
  margin: 0;
}

.lm-mono {
  font-family: var(--gc-font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.lm-quiet {
  color: var(--gc-fg-quiet);
}

.lm-gold {
  color: var(--gc-accent);
}

.lm-warnline {
  color: var(--gc-warn);
}

.lm-skip {
  position: absolute;
  left: -9999px;
}

.lm-skip:focus {
  left: var(--gc-space-4);
  top: var(--gc-space-4);
  z-index: var(--gc-z-toast);
  background: var(--gc-surface-raised);
  color: var(--gc-fg);
  padding: var(--gc-space-2) var(--gc-space-3);
  border: 1px solid var(--gc-line-strong);
}

a {
  color: var(--gc-accent);
}

:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ head */

.lm-head {
  padding: var(--gc-space-6) var(--gc-space-5) var(--gc-space-5);
  border-bottom: 1px solid var(--gc-line);
  background:
    linear-gradient(180deg, rgba(169, 140, 75, 0.07), rgba(169, 140, 75, 0)) ,
    var(--gc-surface-deep);
}

.lm-head__title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  margin-top: var(--gc-space-2);
}

.lm-head__sub {
  margin-top: var(--gc-space-3);
  max-width: 78ch;
  color: var(--gc-fg-muted);
  font-size: 0.95rem;
}

.lm-head__note {
  margin-top: var(--gc-space-3);
  color: var(--gc-fg-quiet);
  max-width: 90ch;
}

.lm-stats {
  margin-top: var(--gc-space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  background: var(--gc-line-faint);
  border: 1px solid var(--gc-line);
}

.lm-stat {
  background: var(--gc-surface);
  padding: var(--gc-space-3) var(--gc-space-4);
}

.lm-stat__n {
  font-family: var(--gc-font-serif);
  font-size: 1.85rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: block;
}

.lm-stat--text .lm-stat__n {
  font-family: var(--gc-font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding-top: var(--gc-space-2);
  color: var(--gc-fg-muted);
}

.lm-stat--zero .lm-stat__n {
  color: var(--gc-good);
}

.lm-stat__k {
  display: block;
  margin-top: var(--gc-space-1);
  color: var(--gc-fg-quiet);
}

/* --------------------------------------------------------------- sections */

.lm-main {
  padding: 0 var(--gc-space-5);
}

.lm-section {
  padding: var(--gc-space-6) 0;
  border-bottom: 1px solid var(--gc-line-faint);
}

.lm-section--flat {
  border-bottom: 0;
}

.lm-section__head {
  margin-bottom: var(--gc-space-4);
  border-top: 2px solid var(--gc-accent-dim);
  padding-top: var(--gc-space-3);
  max-width: 96ch;
}

.lm-section__head p {
  margin-top: var(--gc-space-2);
}

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

.lm-maprow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--gc-space-4);
}

.lm-map {
  height: 460px;
  border: 1px solid var(--gc-line);
  background: var(--gc-surface-deep);
}

.lm-maplegend {
  border: 1px solid var(--gc-line);
  padding: var(--gc-space-4);
  background: var(--gc-surface-raised);
  align-self: start;
}

.lm-legend {
  list-style: none;
  margin: var(--gc-space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gc-space-2);
}

.lm-legend li {
  display: flex;
  align-items: center;
  gap: var(--gc-space-2);
  font-size: 0.875rem;
}

.lm-swatch {
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid rgba(12, 18, 34, 0.5);
}

.lm-legend__note {
  margin-top: var(--gc-space-3);
}

.lm-fitall {
  margin-top: var(--gc-space-2);
}

.lm-unmatched {
  margin-top: var(--gc-space-4);
  padding-top: var(--gc-space-3);
  border-top: 1px solid var(--gc-line-faint);
}

.lm-unmatched b {
  font-family: var(--gc-font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  display: block;
  line-height: 1.1;
}

/* Leaflet sits on a cream tile layer, so its own chrome needs toning down. */
.leaflet-container {
  background: var(--gc-surface-deep);
  font-family: var(--gc-font-sans);
}

/* OpenStreetMap ships a light tile. Tone it to the navy surface so the parcel
   colours carry the meaning rather than the basemap. The filter is on the
   street layer's own class, not on the tile pane, because inverting aerial
   imagery turns a warehouse roof into a negative. */
.lm-tiles--street {
  filter: grayscale(1) invert(1) brightness(0.88) contrast(0.92);
}

.leaflet-control-attribution {
  background: rgba(12, 18, 34, 0.72) !important;
  color: var(--gc-fg-quiet) !important;
  font-size: 10px !important;
}

.leaflet-control-attribution a {
  color: var(--gc-accent) !important;
}

.leaflet-tooltip.lm-tip {
  background: var(--gc-surface-deep);
  border: 1px solid var(--gc-line-strong);
  color: var(--gc-fg);
  font-size: 0.8rem;
  box-shadow: none;
}

.leaflet-tooltip.lm-tip::before {
  display: none;
}

/* gc.css caps every canvas at max-width 100%, and Leaflet's own reset exempts
   only the canvas in its overlay pane. The lot lines render into a canvas in a
   pane of our own, which without this collapses to zero width: drawn, sized,
   and invisible. */
.leaflet-container canvas {
  max-width: none !important;
  max-height: none !important;
}

/* A neighbouring lot says one thing: which parcel it is. */
.leaflet-tooltip.lm-tip--lot {
  font-family: var(--gc-font-mono);
  font-size: 0.6875rem;
}

/* Permanent address and APN labels. Over imagery they need to be their own
   surface, so they are a dark pill with light text rather than plain type. */
.leaflet-tooltip.lm-plabel {
  background: rgba(12, 18, 34, 0.86);
  border: 1px solid var(--gc-line-strong);
  border-radius: 2px;
  color: var(--gc-fg);
  font-size: 0.6875rem;
  line-height: 1.25;
  padding: 2px 6px;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
}

.leaflet-tooltip.lm-plabel::before {
  display: none;
}

.lm-plabel__apn {
  font-family: var(--gc-font-mono);
  color: var(--gc-accent);
  font-size: 0.625rem;
}

/* City and zip names sit in the middle of their own outline, so they are type
   with a shadow rather than a pill: a pill that size would hide the map. */
.leaflet-tooltip.lm-blabel {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--gc-fg);
  font-family: var(--gc-font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(12, 18, 34, 0.95), 0 0 2px rgba(12, 18, 34, 0.95);
}

.leaflet-tooltip.lm-blabel::before {
  display: none;
}

.leaflet-control-layers {
  background: var(--gc-surface-raised) !important;
  border: 1px solid var(--gc-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--gc-fg);
  font-size: 0.8125rem;
}

.leaflet-control-layers-toggle {
  background-color: var(--gc-surface-raised);
}

.leaflet-control-layers label {
  margin-bottom: 2px;
}

.leaflet-control-layers-separator {
  border-top: 1px solid var(--gc-line-faint);
}

.leaflet-control-scale-line {
  background: rgba(12, 18, 34, 0.72);
  border: 1px solid var(--gc-line-strong);
  border-top: none;
  color: var(--gc-fg);
  font-family: var(--gc-font-mono);
  font-size: 10px;
  line-height: 1.5;
}

/* ----------------------------------------------------------------- funnel */

.lm-funnelwrap {
  margin-top: var(--gc-space-4);
}

/* The toggle only exists on a phone, where the panel is a sheet of its own. */
.lm-funnel__toggle {
  display: none;
}

.lm-funnel {
  border: 1px solid var(--gc-line);
  background: var(--gc-surface-raised);
}

.lm-funnel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gc-space-4);
  padding: var(--gc-space-4);
  border-bottom: 1px solid var(--gc-line);
}

.lm-funnel__intro {
  display: grid;
  gap: var(--gc-space-1);
  max-width: 62ch;
}

.lm-funnel__sets {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gc-space-3);
}

.lm-funnel__setbtns {
  display: flex;
  align-items: center;
  gap: var(--gc-space-2);
}

.lm-control {
  display: grid;
  gap: var(--gc-space-2);
  min-width: 200px;
}

.lm-control span {
  color: var(--gc-fg-quiet);
}

.lm-control--set {
  min-width: 240px;
}

.lm-input {
  font-family: var(--gc-font-sans);
  font-size: 0.9375rem;
  padding: var(--gc-space-2) var(--gc-space-3);
  background: var(--gc-surface-deep);
  border: 1px solid var(--gc-line);
  color: var(--gc-fg);
  width: 100%;
}

.lm-select {
  appearance: none;
  cursor: pointer;
}

.lm-input--num {
  width: 12ch;
  font-family: var(--gc-font-mono);
  font-variant-numeric: tabular-nums;
}

.lm-range {
  width: 220px;
  max-width: 100%;
  accent-color: var(--gc-accent);
}

/* -- the ordered steps themselves -- */

.lm-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One step is one row: number, what it filters on, the control, and what it
   left. The note sits under it because it is evidence, not chrome. */
.lm-step {
  display: grid;
  grid-template-columns: 1.75rem minmax(9rem, 12rem) minmax(0, 1fr) 15rem;
  grid-template-areas:
    "n label ctl counts"
    ". note note note";
  align-items: center;
  column-gap: var(--gc-space-3);
  row-gap: var(--gc-space-1);
  padding: var(--gc-space-2) var(--gc-space-4);
  border-bottom: 1px solid var(--gc-line);
  border-left: 2px solid transparent;
}

.lm-step:last-child {
  border-bottom: 0;
}

.lm-step.is-on {
  border-left-color: var(--gc-accent);
  background: var(--gc-surface-deep);
}

.lm-step__n {
  grid-area: n;
  color: var(--gc-fg-quiet);
}

.lm-step__label {
  grid-area: label;
  color: var(--gc-fg);
}

.lm-step__ctl {
  grid-area: ctl;
}

.lm-step__counts {
  grid-area: counts;
  text-align: right;
  white-space: nowrap;
}

.lm-step__counts b {
  color: var(--gc-accent);
  margin-right: var(--gc-space-1);
}

.lm-step__note {
  grid-area: note;
  max-width: 110ch;
}

.lm-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-2) var(--gc-space-3);
  align-items: center;
}

.lm-opts--wrap {
  max-height: 7.5rem;
  overflow-y: auto;
}

.lm-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--gc-space-1);
  cursor: pointer;
  font-size: 0.875rem;
}

.lm-opt--solo {
  font-size: 0.875rem;
}

.lm-opt input {
  accent-color: var(--gc-accent);
  width: 15px;
  height: 15px;
}

.lm-numrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gc-space-2) var(--gc-space-3);
}

.lm-numrow__unk {
  display: inline-flex;
  align-items: center;
  gap: var(--gc-space-2);
}

.lm-numrow__out {
  color: var(--gc-accent);
}

.lm-funnel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gc-space-2) var(--gc-space-3);
  padding: var(--gc-space-3) var(--gc-space-4);
  border-top: 1px solid var(--gc-line-strong);
  background: var(--gc-surface-deep);
}

.lm-funnel__total {
  font-family: var(--gc-font-serif);
  font-size: 1.125rem;
  white-space: nowrap;
  align-self: center;
}

.lm-funnel__total b {
  color: var(--gc-accent);
  font-size: 1.5rem;
  margin-right: var(--gc-space-1);
}

.lm-check {
  display: flex;
  align-items: center;
  gap: var(--gc-space-2);
  padding-bottom: var(--gc-space-1);
  cursor: pointer;
}

.lm-check input {
  accent-color: var(--gc-accent);
  width: 16px;
  height: 16px;
}

.lm-controls__note {
  margin-top: var(--gc-space-2);
  max-width: 96ch;
}

.lm-fitall {
  margin-top: var(--gc-space-2);
}

/* ----------------------------------------------------------------- queues */

.lm-work {
  margin-top: var(--gc-space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gc-space-4);
  align-items: start;
}

.lm-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--gc-line);
}

.lm-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--gc-fg-quiet);
  font-family: var(--gc-font-sans);
  font-size: 0.9375rem;
  padding: var(--gc-space-3) var(--gc-space-4);
  cursor: pointer;
}

.lm-tab[aria-selected="true"] {
  color: var(--gc-fg);
  border-bottom-color: var(--gc-accent);
}

.lm-tab__n {
  font-family: var(--gc-font-mono);
  font-size: 0.75rem;
  color: var(--gc-fg-quiet);
  margin-left: var(--gc-space-2);
}

.lm-list {
  max-height: 72vh;
  overflow-y: auto;
  border: 1px solid var(--gc-line);
  border-top: 0;
}

.lm-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gc-line-faint);
  padding: var(--gc-space-3) var(--gc-space-4);
  color: var(--gc-fg);
  font-family: var(--gc-font-sans);
  cursor: pointer;
}

.lm-row:hover {
  background: var(--gc-accent-wash);
}

.lm-row[aria-current="true"] {
  background: var(--gc-accent-wash);
  box-shadow: inset 3px 0 0 var(--gc-accent);
}

.lm-row__top {
  display: flex;
  gap: var(--gc-space-3);
  align-items: baseline;
  justify-content: space-between;
}

.lm-row__name {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.lm-score {
  font-family: var(--gc-font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--gc-accent);
  flex: none;
  border: 1px solid var(--gc-line);
  padding: 0 var(--gc-space-2);
}

.lm-score--low {
  color: var(--gc-fg-quiet);
}

.lm-row__meta {
  margin-top: var(--gc-space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-1) var(--gc-space-3);
  color: var(--gc-fg-quiet);
  font-family: var(--gc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.lm-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  vertical-align: 1px;
}

.lm-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gc-space-3);
  padding: var(--gc-space-3) 0;
}

.lm-empty {
  padding: var(--gc-space-6) var(--gc-space-4);
  color: var(--gc-fg-quiet);
  text-align: center;
}

/* ------------------------------------------------------------- the card */

.lm-card {
  border: 1px solid var(--gc-line);
  background: var(--gc-surface-raised);
  padding: var(--gc-space-5);
  position: sticky;
  top: var(--gc-space-4);
  max-height: calc(100vh - 2 * var(--gc-space-4));
  overflow-y: auto;
}

.lm-card__name {
  font-size: 1.5rem;
  line-height: 1.15;
}

.lm-card__aliases {
  margin-top: var(--gc-space-2);
  color: var(--gc-fg-quiet);
  font-size: 0.85rem;
}

.lm-card__badges {
  margin-top: var(--gc-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-2);
}

.lm-pill {
  font-family: var(--gc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--gc-line);
  padding: 2px var(--gc-space-2);
  color: var(--gc-fg-muted);
}

.lm-pill--stage {
  border-color: var(--gc-line-strong);
}

.lm-pill--anchor,
.lm-pill--warn {
  border-color: var(--gc-warn);
  color: var(--gc-warn);
}

.lm-block {
  margin-top: var(--gc-space-5);
  padding-top: var(--gc-space-3);
  border-top: 1px solid var(--gc-line-faint);
}

.lm-block > h4 {
  font-family: var(--gc-font-mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gc-fg-quiet);
  margin: 0 0 var(--gc-space-3);
}

.lm-scorebig {
  display: flex;
  align-items: baseline;
  gap: var(--gc-space-3);
}

.lm-scorebig b {
  font-family: var(--gc-font-serif);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gc-accent);
  font-variant-numeric: tabular-nums;
}

.lm-reasons {
  list-style: none;
  margin: var(--gc-space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gc-space-2);
}

.lm-reasons li {
  font-size: 0.875rem;
  padding-left: var(--gc-space-4);
  text-indent: calc(-1 * var(--gc-space-4));
  color: var(--gc-fg-muted);
}

.lm-facts {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--gc-space-2) var(--gc-space-3);
  font-size: 0.875rem;
}

.lm-facts dt {
  color: var(--gc-fg-quiet);
  font-family: var(--gc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 2px;
}

.lm-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.lm-qs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gc-space-2);
}

.lm-qs li {
  font-size: 0.875rem;
  color: var(--gc-warn);
  border-left: 2px solid var(--gc-warn);
  padding-left: var(--gc-space-3);
}

.lm-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gc-space-3);
}

.lm-tl li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--gc-space-3);
  font-size: 0.875rem;
}

.lm-tl__d {
  font-family: var(--gc-font-mono);
  font-size: 0.75rem;
  color: var(--gc-accent);
  border-right: 1px solid var(--gc-line-faint);
  padding-right: var(--gc-space-3);
}

/* A source with no published date: say so, do not print "null". */
.lm-tl__nodate {
  display: block;
  color: var(--gc-fg-quiet);
  font-style: italic;
}

.lm-tl__seen {
  display: block;
  color: var(--gc-fg-quiet);
  font-size: 0.7rem;
  margin-top: 2px;
}

.lm-tl__w {
  color: var(--gc-fg-quiet);
  font-size: 0.78rem;
  margin-top: 2px;
  display: block;
  border-bottom: 1px dotted var(--gc-line-strong);
  cursor: help;
  width: fit-content;
  max-width: 100%;
}

.lm-parcel {
  border: 1px solid var(--gc-line-faint);
  padding: var(--gc-space-3);
  margin-bottom: var(--gc-space-3);
}

.lm-parcel__apn {
  font-family: var(--gc-font-mono);
  font-size: 0.85rem;
  color: var(--gc-accent);
}

.lm-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gc-space-2);
  font-size: 0.85rem;
}

.lm-links a {
  overflow-wrap: anywhere;
}

.lm-card__hint {
  color: var(--gc-fg-quiet);
  font-size: 0.9rem;
}

.lm-card__close {
  display: none;
}

/* ---------------------------------------------------------------- anchors */

.lm-anchors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gc-space-4);
}

.lm-anchor {
  border: 1px solid var(--gc-line);
  border-top: 2px solid var(--gc-warn);
  background: var(--gc-surface-raised);
  padding: var(--gc-space-4);
}

.lm-anchor h3 {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: var(--gc-space-2);
}

.lm-anchor__why {
  margin-top: var(--gc-space-3);
  font-size: 0.875rem;
  color: var(--gc-fg-muted);
}

.lm-anchor .lm-tl {
  margin-top: var(--gc-space-4);
}

.lm-anchor .lm-tl li {
  grid-template-columns: 6rem minmax(0, 1fr);
}

/* ------------------------------------------------------------------- asks */

.lm-asks {
  margin: 0;
  padding-left: var(--gc-space-5);
  display: grid;
  gap: var(--gc-space-3);
  max-width: 90ch;
  font-size: 0.9375rem;
  color: var(--gc-fg-muted);
}

.lm-asks b {
  color: var(--gc-fg);
}

/* ------------------------------------------------------------------ foot */

.lm-foot {
  border-top: 1px solid var(--gc-line);
  background: var(--gc-surface-deep);
  padding: var(--gc-space-6) var(--gc-space-5);
}

.lm-foot__grid {
  margin-top: var(--gc-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--gc-space-4);
}

.lm-caveat p + p {
  margin-top: var(--gc-space-2);
  font-size: 0.875rem;
  color: var(--gc-fg-muted);
}

.lm-caveat--first p + p {
  color: var(--gc-warn);
}

.lm-foot__end {
  margin-top: var(--gc-space-6);
  padding-top: var(--gc-space-3);
  border-top: 1px solid var(--gc-line-faint);
}

.lm-scrim {
  position: fixed;
  inset: 0;
  background: rgba(12, 18, 34, 0.72);
  z-index: var(--gc-z-overlay);
}

/* ------------------------------------------------------------------ small */

@media (max-width: 1080px) {
  .lm-maprow {
    grid-template-columns: 1fr;
  }

  .lm-work {
    grid-template-columns: 1fr;
  }

  /* The card becomes a sheet: on a phone there is no room for two columns. */
  .lm-card {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 86vh;
    z-index: var(--gc-z-dialog);
    border: 0;
    border-top: 2px solid var(--gc-accent);
    box-shadow: var(--gc-shadow-overlay);
  }

  .lm-card[hidden] {
    display: none !important;
  }

  .lm-card__close {
    display: block;
    position: sticky;
    top: 0;
    margin-left: auto;
  }
}

@media (max-width: 860px) {
  /* On a phone the funnel is twelve steps of controls, which is the whole
     screen. It collapses to one button that says how many candidates are
     left, and opens as a panel over the page. */
  .lm-funnel__toggle {
    display: inline-flex;
  }

  .lm-funnel {
    display: none;
    margin-top: var(--gc-space-3);
  }

  .lm-funnel.is-open {
    display: block;
  }

  .lm-funnel__head {
    flex-direction: column;
    align-items: stretch;
  }

  .lm-step {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    grid-template-areas:
      "n label"
      ". counts"
      ". ctl"
      ". note";
    align-items: start;
    padding: var(--gc-space-3) var(--gc-space-4);
  }

  .lm-step__counts {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .lm-main {
    padding: 0 var(--gc-space-4);
  }

  .lm-head,
  .lm-foot {
    padding-left: var(--gc-space-4);
    padding-right: var(--gc-space-4);
  }

  .lm-map {
    height: 320px;
  }

  .lm-facts {
    grid-template-columns: 1fr;
    gap: var(--gc-space-1) 0;
  }

  .lm-facts dd + dt {
    margin-top: var(--gc-space-2);
  }

  .lm-tl li {
    grid-template-columns: 1fr;
    gap: var(--gc-space-1);
  }

  .lm-tl__d {
    border-right: 0;
    padding-right: 0;
  }

  .lm-stat__n {
    font-size: 1.5rem;
  }
}