/* Know Your Owner
   Ownership is the only saturated colour: signal red for private equity, cobalt for
   independent (a nod to the T's Red and Blue lines). Everything else is stone and ink.
   The map keeps blue water and green parks so people can find their way. */
:root {
  --ground: #f3f4f1;
  --ground-2: #e8eae5;
  --surface: #ffffff;
  --ink: #14181f;
  --ink-2: #4b5260;
  --ink-3: #646b78;
  --control: #8a93a0;
  --band: #14181f;
  --band-ink: #ffffff;
  --band-ink-2: #b9bfca;

  --pe: #d62718;
  --pe-ink: #a3141f;
  --pe-tint: #fce9e6;
  --ind: #1f55d6;
  --ind-ink: #1840a8;
  --ind-tint: #e6edfc;
  --danger: #a3141f;
  --focus: #1f55d6;

  --font-ui: "Public Sans", system-ui, sans-serif;
  --font-display: "Archivo", "Public Sans", system-ui, sans-serif;

  --radius: 6px;
  --panel-w: 420px;
  --peek: 336px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow-x: clip; }
body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ind);
}
::selection { background: var(--ind-tint); color: var(--ind-ink); }
a { color: var(--ink); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Ownership marks: shape and colour both carry the meaning. */
.mark { display: inline-block; width: 10px; height: 10px; flex: none; }
.mark.pe { background: var(--pe); border-radius: 1.5px; transform: rotate(45deg) scale(0.88); }
.mark.ind { background: var(--ind); border-radius: 50%; }

/* Layout */
.app { display: flex; height: 100dvh; }
#map { flex: 1; min-width: 0; background: #e9ece6; }
.panel {
  width: var(--panel-w); flex: none; display: flex; flex-direction: column; min-height: 0;
  background: var(--ground); z-index: 3; box-shadow: 1px 0 0 rgba(20, 24, 31, 0.06), 4px 0 16px rgba(20, 24, 31, 0.06);
}
.fab { display: none; }
.sheet-handle { display: none; }

/* Header band */
.band { background: var(--band); color: var(--band-ink); padding: 16px 24px 18px; }
.band-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--band-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em;
}
.band-link {
  border: 0; background: none; padding: 6px 8px; margin-right: -8px; cursor: pointer;
  color: var(--band-ink-2); font-size: 14px; font-weight: 500; border-radius: var(--radius);
  transition: color 120ms var(--ease-out);
}
.band-link:hover { color: var(--band-ink); }
.band-link:focus-visible { outline-color: var(--band-ink); }
.tagline { margin: 6px 0 0; color: var(--band-ink-2); font-size: 14.5px; text-wrap: balance; }

/* Search and filters */
.controls { padding: 16px 24px 4px; display: grid; gap: 10px; }
.search { position: relative; }
.search .icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--ink-3); pointer-events: none; }
.search input {
  width: 100%; height: 44px; padding: 0 12px 0 40px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius);
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.search input::-webkit-search-cancel-button { filter: grayscale(1) brightness(0.3); cursor: pointer; }

.filters { display: flex; gap: 6px; }
.filters button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 10px; flex: 1 1 auto;
  border: 0; border-radius: var(--radius); background: var(--ground-2); color: var(--ink);
  font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.filters button:hover { background: #dcdfd8; }
.filters .count { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.filters [aria-checked="true"] .count { color: inherit; opacity: 0.8; }
.filters .f-all[aria-checked="true"] { background: var(--ink); color: #fff; }
.filters .f-pe[aria-checked="true"] { background: var(--pe); color: #fff; }
.filters .f-ind[aria-checked="true"] { background: var(--ind); color: #fff; }
.filters [aria-checked="true"] .mark { background: #fff; }

/* Views */
.view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c4c8c0 transparent; }
.view[hidden] { display: none; }

/* The answer for the area in view */
.summary { padding: 14px 24px 10px; }
.summary-text { margin: 0 0 8px; font-size: 14.5px; color: var(--ink-2); }
.summary-text b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.strip { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--ground-2); gap: 2px; }
.strip span { display: block; height: 100%; transition: flex-grow 240ms var(--ease-out); }
.strip[hidden] { display: none; }
.strip-pe { background: var(--pe); }
.strip-ind { background: var(--ind); }

.list { list-style: none; margin: 0; padding: 0 12px 16px; }
.row {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
  align-items: baseline; width: 100%; padding: 11px 12px; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--radius);
  transition: background-color 120ms var(--ease-out);
}
.row:hover, .row.is-hover { background: var(--surface); }
.row .mark { translate: 0 1px; }
.row-name { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.25; overflow-wrap: break-word; min-width: 0; letter-spacing: -0.005em; }
.row-town { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.row-owner { grid-column: 2 / 4; font-size: 14px; font-weight: 600; }
.row.pe .row-owner { color: var(--pe-ink); }
.row.independent .row-owner { color: var(--ind-ink); }

.empty { padding: 20px 24px 28px; color: var(--ink-2); font-size: 14.5px; display: grid; gap: 8px; justify-items: start; }
.empty strong { color: var(--ink); font-size: 16px; font-family: var(--font-display); font-weight: 700; }

.link {
  border: 0; background: none; padding: 0; cursor: pointer; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.link:hover { text-decoration-thickness: 2px; }

.back {
  display: inline-flex; align-items: center; gap: 4px; margin: 12px 16px 0; padding: 8px;
  border: 0; background: none; border-radius: var(--radius); cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.back:hover { color: var(--ink); background: var(--ground-2); }

/* Detail */
#detail { padding: 4px 0 28px; }
.d-head { padding: 0 24px; }
.d-category { font-size: 14px; color: var(--ink-3); margin: 6px 0 2px; }
.d-category::first-letter { text-transform: uppercase; }
.d-name { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; text-wrap: balance; }
.d-address { margin: 8px 0 0; color: var(--ink-2); }

.verdict {
  margin: 20px 0 0; padding: 14px 24px; color: #fff; display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.01em;
  animation: wipe 260ms var(--ease-out) both;
}
.verdict.pe { background: var(--pe); }
.verdict.independent { background: var(--ind); }
.verdict .mark { width: 14px; height: 14px; background: #fff; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Ownership chain: drawn like a transit line, one stop per owner. */
.chain { list-style: none; margin: 0; padding: 18px 24px 4px; }
.chain li { position: relative; padding: 0 0 18px 30px; }
.chain li::before {
  content: ""; position: absolute; left: 5px; top: 5px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--line-c); z-index: 1;
}
.chain li::after { content: ""; position: absolute; left: 10px; top: 12px; bottom: -6px; width: 3px; background: var(--line-c); }
.chain li:last-child { padding-bottom: 0; }
.chain li:last-child::after { display: none; }
.chain li:last-child::before { background: var(--line-c); }
.chain.pe { --line-c: var(--pe); }
.chain.independent { --line-c: var(--ind); }
.stop-role { display: block; font-size: 13px; color: var(--ink-3); }
.stop-name { display: block; font-weight: 700; font-size: 16px; line-height: 1.3; }
.chain li:last-child .stop-name { font-family: var(--font-display); font-size: 18px; }
.chain.pe li:last-child .stop-name { color: var(--pe-ink); }
.chain.independent li:last-child .stop-name { color: var(--ind-ink); }

.d-section { margin: 24px 24px 0; }
.d-section h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.d-section p { margin: 0; max-width: 60ch; color: var(--ink-2); }
.sources { display: grid; gap: 8px; margin-top: 12px; }
.source {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px;
  background: var(--surface); border-radius: var(--radius); text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 14.5px; transition: box-shadow 120ms var(--ease-out);
  box-shadow: 0 0 0 1px rgba(20, 24, 31, 0.08);
}
.source:hover { box-shadow: 0 0 0 1px var(--ink); }
.source small { display: block; font-weight: 400; color: var(--ink-3); font-size: 13px; }
.checked { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.d-correct { margin: 26px 24px 0; font-size: 14.5px; color: var(--ink-2); }

/* Form */
form { padding: 4px 24px 32px; display: grid; gap: 18px; }
.view-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.12; letter-spacing: -0.015em; margin: 6px 0 0; }
.hint { margin: -8px 0 0; color: var(--ink-2); font-size: 14.5px; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field legend { font-size: 14.5px; font-weight: 600; padding: 0; }
.field em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink); padding: 10px 12px; min-height: 44px;
  background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius);
}
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius); font-weight: 600;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.choice input[value="pe"]:checked + span { background: var(--pe); border-color: var(--pe); color: #fff; }
.choice input[value="independent"]:checked + span { background: var(--ind); border-color: var(--ind); color: #fff; }
.choice input:checked + span .mark { background: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 15px;
  transition: transform 120ms var(--ease-out), background-color 120ms var(--ease-out);
}
.btn:hover { background: #000; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-block { width: 100%; }
.form-msg { margin: 0; font-size: 14.5px; }
.form-msg:empty { display: none; }
.form-msg.error { color: var(--danger); font-weight: 600; }
.done { padding: 4px 24px 32px; display: grid; gap: 12px; justify-items: start; }
.done p { margin: 0; color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.prose { padding: 4px 24px 32px; }
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 24px 0 0; }
.prose p { color: var(--ink-2); max-width: 60ch; }
.prose .link { font-size: inherit; }

.panel-foot { padding: 12px 24px 16px; background: var(--ground); box-shadow: 0 -1px 0 rgba(20, 24, 31, 0.06); }

/* Map chrome */
.maplibregl-ctrl-group { border-radius: var(--radius) !important; box-shadow: 0 1px 4px rgba(20, 24, 31, 0.18) !important; }
.maplibregl-ctrl-attrib { font-family: var(--font-ui); font-size: 11px; }
.maplibregl-popup.name-tip .maplibregl-popup-content {
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: #fff; background: var(--ink);
  padding: 5px 9px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(20, 24, 31, 0.25);
}
.maplibregl-popup.name-tip.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--ink); }
.maplibregl-popup.name-tip.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--ink); }

/* Phone: the panel becomes a bottom sheet over the map. */
@media (max-width: 760px) {
  .app { display: block; }
  #map { position: fixed; inset: 0; }
  .panel {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 86dvh; min-height: var(--peek);
    border-radius: 14px 14px 0 0; overflow: hidden;
    box-shadow: 0 -4px 24px rgba(20, 24, 31, 0.18);
    transform: translateY(calc(100% - var(--peek)));
    transition: transform 320ms var(--ease-out);
  }
  .panel.is-open { transform: translateY(0); }
  .band { border-radius: 14px 14px 0 0; padding: 2px 16px 10px; }
  body.sheet-open .tagline { display: none; }
  .sheet-handle {
    display: grid; place-items: center; height: 16px; width: 100%;
    border: 0; background: none; padding: 0; cursor: pointer;
  }
  .sheet-handle span { width: 40px; height: 4px; border-radius: 2px; background: #5a606c; }
  .wordmark { font-size: 18px; }
  .tagline { font-size: 13.5px; margin-top: 2px; }
  .controls { padding: 12px 16px 2px; }
  .filters button { height: 44px; }
  .summary { padding: 12px 16px 8px; }
  .list { padding: 0 4px 16px; }
  .d-head, .chain, .verdict { padding-left: 16px; padding-right: 16px; }
  .d-section, .d-correct { margin-left: 16px; margin-right: 16px; }
  form, .prose, .done, .empty { padding-left: 16px; padding-right: 16px; }
  .back { margin: 8px 8px 0; }
  .panel-foot { display: none; }
  .view { padding-bottom: env(safe-area-inset-bottom); }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; }
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: var(--peek); }
  .fab {
    display: inline-flex; align-items: center; gap: 6px; position: fixed; right: 12px; z-index: 2;
    bottom: calc(var(--peek) + 12px); height: 44px; padding: 0 16px; border: 0; border-radius: 22px;
    background: var(--ink); color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer;
    box-shadow: 0 2px 10px rgba(20, 24, 31, 0.3);
  }
  .fab .icon { width: 16px; height: 16px; stroke-width: 2.2; }
  body.sheet-open .fab { display: none; }
}

@media (hover: hover) {
  .row:hover .row-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}

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